/* Buttercup Childcare - the cart and the checkout (D15 / D16).
 *
 * These two pages are the last thing a parent sees before paying, and until now
 * they were the only pages on the site still wearing Breakdance's WooCommerce
 * defaults: blue #3b82f6 buttons and links, sky-blue #e0f2fe notices, 12.8px
 * grey-700 line-item detail, 16px system-scale form controls. Measured before
 * the change, at 1440:
 *
 *                     was                             now (this file)
 *   H1                none at all                     46px ink, centred
 *   product name      16px  rgb(59,130,246) blue      17.4px ink
 *   child details     12.8px, dd column 11.88px wide  15px, full column width
 *   thead             12.8px rgb(55,65,81)            15px ink 500
 *   totals box        bare, no chrome                 .bc-fees-card language
 *   Proceed / Place   350x50 and 328x46, blue, 16px   17.4px accent, 76.72px
 *   Return to shop    171x46 blue                     17.4px accent, 76.72px
 *   notices           sky-100 / sky-500               accent tint / ink
 *
 * HOW THIS BEATS THE DEFAULTS. Breakdance's woo stylesheet is a raw <link>
 * printed in wp_head AFTER wp_print_styles, so no enqueued sheet can ever
 * follow it - this one included. Two things make that irrelevant:
 *
 *   1. Nearly all of Breakdance's woo appearance is driven by --bde-woo-* and
 *      --bde-* custom properties declared on `:root, .bde-global-css-vars`.
 *      Redeclaring them on .bc-woo-page - an ANCESTOR of everything on these
 *      pages - wins by proximity in the cascade whatever the source order.
 *      .bde-global-css-vars is also stamped on inner elements (the billing
 *      fieldset), so those get a (0,2,0) descendant selector to outrank the
 *      (0,1,0) re-declaration.
 *   2. The handful of rules that are not variable-driven are written as
 *      `.bc-woo-page .breakdance-woocommerce X` (0,3,1+), which outranks
 *      Breakdance's own `.breakdance-woocommerce X` (0,2,1) on specificity.
 *
 * Same technique, and the same reason, as the .bc-product-page block at the
 * foot of shop.css. Nothing here touches the Oxygen stylesheet.
 *
 * CONTRAST. Every colour pairing introduced here is stated with its measured
 * ratio in the comment above it. Nothing on these pages puts type on the
 * accent orange except the primary buttons, which are the site-wide .bc-btn
 * treatment and are deliberately left alone (2.48:1, an open decision).
 */

/* --- 1. Breakdance's WooCommerce tokens, remapped onto Buttercup's ------
 *
 * Both selectors carry the same block: the second is only there to outrank the
 * `.bde-global-css-vars` re-declaration on inner elements.
 */
.bc-woo-page,
.bc-woo-page .bde-global-css-vars {
	/* Palette. Ink #1d2129 on white is 16.13:1. */
	--bde-woo-base-text-color: var(--bc-ink);
	--bde-woo-base-headings-color: var(--bc-ink);
	--bde-woo-base-primary-color: var(--bc-accent);
	--bde-woo-base-primary-color-hover: var(--bc-accent-dark);
	--bde-woo-base-text-on-primary-color: var(--bc-white);
	--bde-woo-base-border-color: var(--bc-line);
	--bde-woo-base-paragraph-line-height: 1.6;
	--bde-woo-base-heading-line-height: 1.4;

	/* Type. The standard size is the site body size; "small" is the 15px the
	   pre-checkout child-details form already uses, so the billing form a
	   parent fills at checkout is the same object as the one they filled on
	   the product page. */
	--bde-woo-typography__size-small: 15px;
	--bde-woo-typography__size-small-font-family: var(--bc-font);
	--bde-woo-typography__size-standard: var(--bc-body);
	--bde-woo-typography__size-standard-font-family: var(--bc-font);
	--bde-woo-typography__size-medium: 20px;
	--bde-woo-typography__size-medium-font-family: var(--bc-font);
	--bde-woo-typography__size-large: var(--bc-h4);
	--bde-woo-typography__size-large-font-family: var(--bc-font);
	--bde-woo-typography__size-extra-large: var(--bc-h4);
	--bde-woo-typography__size-extra-large-font-family: var(--bc-font);
	/* Body copy on this site is weight 300, not 400. */
	--bde-woo-typography-font-weight-normal: 300;
	--bde-woo-typography-font-weight-medium: 500;
	--bde-woo-typography-font-weight-heavy: 500;

	/* Buttons. This is the site's one button formula - padding 1.398em 2.334em
	   on line-height 1.5 - expressed in Breakdance's variables. Because the
	   padding is in em, one font-size change per breakpoint moves the whole
	   button. At 17.4px it renders 76.72px tall, which is the product page's
	   own Add to cart to the pixel, so the three buttons in the booking flow
	   are one object. (The site-wide .bc-btn-md is 74.75px; the 2px is the
	   1px transparent border Breakdance's buttons carry.) */
	--bde-button-font-size: var(--bc-body);
	--bde-button-line-height: 1.5;
	--bde-button-font-weight: 500;
	--bde-button-padding-base: 1.398em 2.334em;
	--bde-button-padding-lg: 1.398em 2.334em;
	--bde-button-padding-sm: 1.398em 2.334em;
	--bde-button-border-radius: 2px;
	--bde-button-border-width: 1px;

	/* Primary: white on accent, as .bc-btn. Left at the site's existing
	   treatment on purpose - recolouring it is John's open decision. */
	--bde-button-primary-background-color: var(--bc-accent);
	--bde-button-primary-background-color-hover: var(--bc-accent-dark);
	--bde-button-primary-text-color: var(--bc-white);
	--bde-button-primary-text-color-hover: var(--bc-white);
	--bde-button-primary-border-color: transparent;
	--bde-button-primary-border-color-hover: transparent;

	/* Secondary: the .bc-btn-quiet treatment. Ink on white 16.13:1; on hover
	   white on ink, also 16.13:1. */
	--bde-button-secondary-background-color: var(--bc-white);
	--bde-button-secondary-background-color-hover: var(--bc-ink);
	--bde-button-secondary-text-color: var(--bc-ink);
	--bde-button-secondary-text-color-hover: var(--bc-white);
	--bde-button-secondary-border-color: var(--bc-line);
	--bde-button-secondary-border-color-hover: var(--bc-ink);

	/* Disabled: the "Update cart" button before anything has changed. Muted
	   ink on paper is 4.61:1 - the site's own muted token, over 4.5:1. */
	--bde-woo-buttons-and-links__disabled-button-color: var(--bc-paper);
	--bde-woo-buttons-and-links__disabled-button-text-color: var(--bc-muted);

	/* Text links inside the woo areas. Ink with an underline rather than the
	   site's default accent, for the same reason /camps uses .bc-band-a:
	   accent on white is 2.48:1 and these are 15-17px, not headings. */
	--bde-woo-buttons-and-links__text-link-color: var(--bc-ink);
	--bde-woo-buttons-and-links__text-link-color-hover: var(--bc-ink);

	/* Form controls: the pre-checkout child-details form, exactly. */
	--bde-form-font-size: 15px;
	--bde-form-text-color: var(--bc-ink);
	--bde-form-label-color: var(--bc-ink);
	--bde-form-label-font-weight: 500;
	--bde-form-label-required-color: #b3261e;
	--bde-form-input-background-color: var(--bc-white);
	--bde-form-input-border-color: rgba(29, 33, 41, 0.22);
	--bde-form-input-border-width: 1px;
	--bde-form-input-border-radius: 4px;
	--bde-form-input-padding-top: 11px;
	--bde-form-input-padding-bottom: 11px;
	--bde-form-input-padding-left: 13px;
	--bde-form-input-padding-right: 13px;
	--bde-form-input-focused-border-color: var(--bc-accent);
	--bde-form-input-focused-shadow: none;
	--bde-form-input-placeholder-color: var(--bc-muted);
	--bde-form-after-label: 6px;
	--bde-form-gap: 16px;

	/* THE COMPOSITES HAVE TO BE SET TOO, AND THIS IS NOT BELT AND BRACES.
	   A custom property's value is resolved at the element that DECLARES it,
	   so `--bde-form-input-border-top: var(--bde-form-input-border-width) solid
	   var(--bde-form-input-border-color)` was already frozen to grey-300 on
	   :root before it ever inherited down here. Overriding the ingredient does
	   nothing; the composite itself has to be restated. Same for every
	   --bde-woo-forms__* below, each of which is `var(--bde-form-*)` on :root.
	   (Measured: the padding vars, which are used directly in the rule, landed
	   first time; the border and radius, which are composites, did not.) */
	--bde-form-input-border-top: 1px solid rgba(29, 33, 41, 0.22);
	--bde-form-input-border-right: 1px solid rgba(29, 33, 41, 0.22);
	--bde-form-input-border-bottom: 1px solid rgba(29, 33, 41, 0.22);
	--bde-form-input-border-left: 1px solid rgba(29, 33, 41, 0.22);
	--bde-woo-forms__inputs-border-radius: 4px;
	--bde-woo-forms__inputs-border-color: rgba(29, 33, 41, 0.22);
	--bde-woo-forms__inputs-border-color-focused: var(--bc-accent);
	--bde-woo-forms__inputs-shadow: none;
	--bde-woo-forms__inputs-shadow-focused: none;
	--bde-woo-forms__inputs-background-color: var(--bc-white);
	--bde-woo-forms__inputs-background-color-focused: var(--bc-white);
	--bde-woo-forms__inputs-text-color: var(--bc-ink);
	--bde-woo-forms__inputs-placeholder-color: var(--bc-muted);
	--bde-woo-forms__labels-color: var(--bc-ink);
	--bde-woo-forms__labels-required-color: #b3261e;
	--bde-woo-forms__spacing-after-label: 6px;
	--bde-woo-forms__spacing-between-fields: 16px;

	/* The notice icons are masks painted with their own colour variables, not
	   with the notice text colour, so they stayed sky blue until these three.
	   Ink on the info and success tints, #b3261e on the error tint - the same
	   pairs as the text, so the same ratios. */
	--info-svg-icon-color: var(--bc-ink);
	--success-svg-icon-color: var(--bc-ink);
	--error-svg-icon-color: #b3261e;

	/* Boxes. The site's card language is .bc-fees-card: paper, a 1px --bc-line
	   hairline, an 8px radius, no shadow. The cart totals and the checkout
	   order review become that card; the payment block nested inside the order
	   review is stripped bare instead, so the card is not drawn twice. */
	--bde-woo-wrappers__background-color: var(--bc-paper);
	--bde-woo-wrappers__border-color: var(--bc-line);
	--bde-woo-wrappers__border-width: 1px;
	--bde-woo-wrappers__border-radius: var(--bc-radius);
	--bde-woo-wrappers__shadow: none;
	--bde-woo-payment-box-background-color: var(--bc-paper);
	--bde-woo-payment-box-border-color: var(--bc-line);
	--bde-woo-tables__header-color: var(--bc-paper);
	--bde-woo-tables__background-color: transparent;
	--bde-woo-tables__border-color: var(--bc-line);
	--bde-woo-tables__border-radius: var(--bc-radius);

	/* Cart line-item thumbnails match the shop card crop: flush, no chrome. */
	--bde-woo-product-images__border-width: 0px;
	--bde-woo-product-images__border-radius: 0px;
	--bde-woo-widgets__remove-item-from-cart-color: var(--bc-ink);

	/* Notices. Three tints, each measured against ink or its own ink:
	     info     ink #1d2129 on #fdf1e9 (accent tint)  14.67:1
	     success  ink #1d2129 on sage #cde0cc           11.62:1
	     error    #b3261e     on #fbeae8                 6.17:1
	   All three clear 4.5:1. */
	--bde-woo-notices__border-radius: var(--bc-radius);
	--bde-woo-notices__info-background: #fdf1e9;
	--bde-woo-notices__info-text: var(--bc-ink);
	--bde-woo-notices__info-link-text: var(--bc-ink);
	--bde-woo-notices__info-link-text-hover: var(--bc-ink);
	--bde-woo-notices__success-background: var(--bc-sage);
	--bde-woo-notices__success-text: var(--bc-ink);
	--bde-woo-notices__success-link-text: var(--bc-ink);
	--bde-woo-notices__success-link-text-hover: var(--bc-ink);
	--bde-woo-notices__error-background: #fbeae8;
	--bde-woo-notices__error-text: #b3261e;
	--bde-woo-notices__error-link-text: #b3261e;
	--bde-woo-notices__error-link-text-hover: #b3261e;
}

/* --- 2. The page heading --------------------------------------------------
 *
 * Neither page had one. Every other page on the site opens with a 46px page
 * title in the 1015 measure, so their absence was the single loudest signal
 * that these two were a different website.
 *
 * INK RATHER THAN THE SHOP'S ORANGE, AND THAT IS THE MAJORITY TREATMENT.
 * Measured at 1440: the page title is 46px centred on every page, but only
 * /book-with-buttercup is rgb(244,136,71) - /creche, /fees and the rest are
 * already rgb(17,24,39). Ink #1d2129 at 16.13:1 is four units off that and
 * indistinguishable beside it. It also keeps these two pages out of the
 * accent-on-white contrast debt (orange on white is 2.48:1, an open decision
 * for John rather than something to spread onto two more pages).
 */
.bc-woo-h1 {
	/* .woocommerce is a wrapping flex row on the cart (the form beside the
	   totals), so an h1 dropped into it becomes a flex item and shrink-wraps -
	   it came out 218px wide and sitting alongside the basket table. */
	flex: 0 0 100%;
	width: 100%;
	font-family: var(--bc-font);
	font-size: var(--bc-h2);
	font-weight: 500;
	line-height: 1.4;
	color: var(--bc-ink);
	text-align: center;
	text-wrap: balance;
	margin: 0 0 26px;
}


/* --- 3. The cart line items ----------------------------------------------- */

/* ONE COLUMN, NOT TWO.
 *
 * Breakdance lays .woocommerce out as a wrapping flex row - the cart form
 * beside a 350px totals panel - which leaves the line-item table 610px of the
 * 1015 measure and the product-name column about 270px. That is the wrong
 * trade on this site: every childcare line carries the seven answers item 7 of
 * the brief collects, so the line items need the width more than the totals
 * do. The table now takes the full measure and the totals card sits under it,
 * right-aligned, which is also WooCommerce's own cart layout.
 */
.bc-woo-page .breakdance-woocommerce > .woocommerce > form.woocommerce-cart-form,
.bc-woo-page .breakdance-woocommerce > .woocommerce > .cart-collaterals,
.bc-woo-page .breakdance-woocommerce .wc-empty-cart-message,
.bc-woo-page .breakdance-woocommerce p.return-to-shop {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
}

.bc-woo-page .breakdance-woocommerce .cart-collaterals {
	display: flex;
	justify-content: flex-end;
	margin-top: 0;
}

/* No table chrome. Breakdance draws both the basket table and the checkout
   order review as a bordered, rounded box with a filled header band; the
   totals and order-review panels are already that box, so the tables inside
   them came out as a box in a box. Hairlines only. */
.bc-woo-page .breakdance-woocommerce table.cart,
.bc-woo-page .breakdance-woocommerce .woocommerce-checkout-review-order-table {
	width: 100%;
	background-color: transparent;
	border: 0;
	border-radius: 0;
}

/* Breakdance draws the table's outline as INSET BOX-SHADOWS on thead and
   tbody, not as a border, so zeroing the border left the box behind. */
.bc-woo-page .breakdance-woocommerce table.cart thead,
.bc-woo-page .breakdance-woocommerce table.cart tbody,
.bc-woo-page .breakdance-woocommerce .woocommerce-checkout-review-order-table thead,
.bc-woo-page .breakdance-woocommerce .woocommerce-checkout-review-order-table tbody,
.bc-woo-page .breakdance-woocommerce .woocommerce-checkout-review-order-table tfoot {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}


/* Column headings. 12.8px grey-700 on a filled grey band before. */
.bc-woo-page .breakdance-woocommerce table.cart thead th {
	font-family: var(--bc-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--bc-ink);
	text-align: left;
	padding: 0 18px 14px 0;
	border-bottom: 1px solid var(--bc-line);
}

.bc-woo-page .breakdance-woocommerce table.cart td {
	padding-top: 22px;
	padding-bottom: 22px;
	padding-right: 18px;
	vertical-align: top;
}

/* The last column (Subtotal) sits flush with the right edge of the measure.
   Declared after both rules above so it wins on source order rather than by
   accident. */
.bc-woo-page .breakdance-woocommerce table.cart thead th:last-child,
.bc-woo-page .breakdance-woocommerce table.cart tbody td:last-child {
	padding-right: 0;
}

.bc-woo-page .breakdance-woocommerce table.cart tbody tr.cart_item {
	border-bottom: 1px solid var(--bc-line);
}

/* The thumbnail. Breakdance sizes it 64px with object-fit: contain and a
   1px grey border; the shop cards are flush 1:1 cover crops, so this matches
   them and grows enough to read at a glance. */
.bc-woo-page .breakdance-woocommerce .woocommerce-cart-form__contents td.product-thumbnail {
	width: 88px;
}

.bc-woo-page .breakdance-woocommerce .woocommerce-cart-form__contents td.product-thumbnail img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: 0;
	border-width: 0;
}

/* The product name. Was 16px rgb(59,130,246) - Breakdance's link blue. Ink at
   16.13:1, with the underline carrying the affordance instead of the colour. */
.bc-woo-page .breakdance-woocommerce .cart_item td.product-name > a {
	font-family: var(--bc-font);
	font-size: var(--bc-body);
	font-weight: 500;
	line-height: 1.4;
	color: var(--bc-ink);
	text-decoration: none;
}

.bc-woo-page .breakdance-woocommerce .cart_item td.product-name > a:hover,
.bc-woo-page .breakdance-woocommerce .cart_item td.product-name > a:focus-visible {
	color: var(--bc-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* D16 - THE CHILD DETAILS BROKE MID-WORD ("Asthma inhaler i / n bag").
 *
 * Breakdance lays dl.variation out as `grid-template-columns: auto 1fr` with
 * `word-break: break-all`. With seven labels as long as "Who is authorised to
 * collect your child?:" the `auto` column eats the row - the value column
 * measured 11.88px wide at 1440 - and break-all then chops every value into
 * one-or-two-character lines. These are the seven answers item 7 of the brief
 * exists to collect, so they have to be legible.
 *
 * One column, label above value, and break only where a word genuinely cannot
 * fit. `anywhere` rather than `break-word` so a long unbroken string still
 * cannot widen the row.
 */
.bc-woo-page .breakdance-woocommerce dl.variation,
.bc-woo-page .breakdance-woocommerce ul.wc-item-meta li {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: 14px 0 0;
	font-family: var(--bc-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--bc-ink);
	word-break: normal;
	overflow-wrap: anywhere;
}

.bc-woo-page .breakdance-woocommerce dl.variation dt {
	font-weight: 500;
	color: var(--bc-ink);
	margin: 10px 0 0;
	word-break: normal;
	overflow-wrap: anywhere;
}

.bc-woo-page .breakdance-woocommerce dl.variation dt:first-child {
	margin-top: 0;
}

/* Muted ink on white is 4.61:1 - the site's own secondary text token. */
.bc-woo-page .breakdance-woocommerce dl.variation dd {
	font-weight: 300;
	color: var(--bc-muted);
	margin: 0;
	word-break: normal;
	overflow-wrap: anywhere;
}

.bc-woo-page .breakdance-woocommerce dl.variation dd p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	font-weight: inherit;
	display: block;
}

/* Prices in the line. */
.bc-woo-page .breakdance-woocommerce table.cart td.product-price,
.bc-woo-page .breakdance-woocommerce table.cart td.product-subtotal {
	font-family: var(--bc-font);
	font-size: var(--bc-body);
	font-weight: 300;
	color: var(--bc-ink);
	white-space: nowrap;
}

/* The remove "x". Ink at 16.13:1, held back at 0.55 opacity until hover. */
.bc-woo-page .breakdance-woocommerce .woocommerce-cart-form__contents .product-remove a {
	color: var(--bc-ink);
	font-size: 22px;
	opacity: 0.55;
}

.bc-woo-page .breakdance-woocommerce .woocommerce-cart-form__contents .product-remove a:hover,
.bc-woo-page .breakdance-woocommerce .woocommerce-cart-form__contents .product-remove a:focus-visible {
	color: var(--bc-ink);
	opacity: 1;
}

/* --- 4. The coupon / update row ------------------------------------------- */

.bc-woo-page .breakdance-woocommerce .woocommerce-cart-form__contents td.actions {
	padding-top: 26px;
	border-bottom: 0;
}

/* Stretch the coupon field to the button's height so the row has one baseline
   rather than a 46px input beside a 77px button. */
.bc-woo-page .breakdance-woocommerce .actions .coupon {
	align-items: stretch;
	gap: 12px;
}

.bc-woo-page .breakdance-woocommerce .actions .coupon input.input-text {
	height: auto;
	align-self: stretch;
	max-width: 260px;
}

/* --- 5. The cart totals --------------------------------------------------- */

/* .bc-fees-card, which is how every other panel on the site is drawn. */
.bc-woo-page .breakdance-woocommerce .cart_totals {
	width: 100%;
	max-width: 400px;
	background-color: var(--bc-paper);
	border: 1px solid var(--bc-line);
	border-radius: var(--bc-radius);
	padding: 24px;
}

.bc-woo-page .breakdance-woocommerce .cart_totals h2 {
	font-family: var(--bc-font);
	font-size: var(--bc-h4);
	font-weight: 500;
	line-height: 1.4;
	color: var(--bc-ink);
	text-wrap: balance;
	margin: 0 0 14px;
}

.bc-woo-page .breakdance-woocommerce .cart_totals table th,
.bc-woo-page .breakdance-woocommerce .cart_totals table td {
	font-family: var(--bc-font);
	font-size: var(--bc-body);
	color: var(--bc-ink);
	padding: 10px 0;
}

.bc-woo-page .breakdance-woocommerce .cart_totals table th {
	font-weight: 300;
}

.bc-woo-page .breakdance-woocommerce .cart_totals table td {
	text-align: right;
}

.bc-woo-page .breakdance-woocommerce .cart_totals tr.order-total th,
.bc-woo-page .breakdance-woocommerce .cart_totals tr.order-total td {
	font-weight: 500;
	border-top: 1px solid var(--bc-line);
	padding-top: 16px;
}

.bc-woo-page .breakdance-woocommerce .cart_totals tr.order-total .woocommerce-Price-amount {
	font-size: 20px;
	font-weight: 500;
	color: var(--bc-ink);
	white-space: nowrap;
}

/* Breakdance pins the checkout button to a flat height: 50px, which no
   variable overrides - it is a literal in its own rule. */
.bc-woo-page .breakdance-woocommerce a.checkout-button {
	width: 100%;
	height: auto;
	margin-top: 20px;
}

/* --- 6. The empty basket --------------------------------------------------
 *
 * The state a parent is most likely to land in and the one least likely to get
 * looked at: a sky-blue notice and a blue button on an otherwise blank page,
 * with no page heading above them at all.
 */
.bc-woo-page .breakdance-woocommerce .wc-empty-cart-message {
	margin: 0 0 26px;
}

.bc-woo-page .breakdance-woocommerce .cart-empty {
	text-align: center;
	font-family: var(--bc-font);
	font-size: var(--bc-body);
	font-weight: 300;
	color: var(--bc-ink);
}

.bc-woo-page .breakdance-woocommerce p.return-to-shop {
	display: flex;
	justify-content: center;
	margin: 0;
}

/* --- 7. The checkout ------------------------------------------------------ */

.bc-woo-page .breakdance-woocommerce .woocommerce-billing-fields > h3,
.bc-woo-page .breakdance-woocommerce .woocommerce-additional-fields > h3,
.bc-woo-page .breakdance-woocommerce #order_review_heading,
.bc-woo-page .breakdance-woocommerce h3#ship-to-different-address {
	font-family: var(--bc-font);
	font-size: var(--bc-h4);
	font-weight: 500;
	line-height: 1.4;
	color: var(--bc-ink);
	text-wrap: balance;
	margin: 0 0 18px;
}

.bc-woo-page .breakdance-woocommerce .checkout .form-row label,
.bc-woo-page .breakdance-woocommerce .checkout_coupon label {
	font-family: var(--bc-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--bc-ink);
}

/* "(optional)" is styled separately by Breakdance and kept the 17.4px body
   size, so it came out bigger than the label it qualifies ("Phone" at 15px
   followed by "(optional)" at 17.4). */
.bc-woo-page .breakdance-woocommerce .checkout .form-row label .optional {
	font-size: inherit;
	font-weight: 300;
	color: var(--bc-muted);
}

/* #b3261e on white is 6.54:1 - the same required marker the child-details
   form already uses. */
.bc-woo-page .breakdance-woocommerce .checkout .required {
	color: #b3261e;
	text-decoration: none;
	border: 0;
}

/* Every control on these two pages is the box the pre-checkout child-details
   form already uses: 15px Poppins, ink, a 1px rgba(29,33,41,.22) hairline and
   a 4px radius. A parent fills that form on the product page and this one at
   checkout; they should be the same object. */
.bc-woo-page .breakdance-woocommerce .input-text,
.bc-woo-page .breakdance-woocommerce textarea,
.bc-woo-page .breakdance-woocommerce select,
.bc-woo-page .breakdance-woocommerce .quantity input.qty,
.bc-woo-page .breakdance-woocommerce .select2-container--default .select2-selection--single,
.bc-woo-page .breakdance-woocommerce .select2-container--default .select2-selection__rendered {
	font-family: var(--bc-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--bc-ink);
	border-color: rgba(29, 33, 41, 0.22);
	border-radius: 4px;
}

.bc-woo-page .breakdance-woocommerce .checkout .input-text:focus-visible,
.bc-woo-page .breakdance-woocommerce .checkout textarea:focus-visible,
.bc-woo-page .breakdance-woocommerce .checkout select:focus-visible {
	outline: 3px solid var(--bc-accent);
	outline-offset: 1px;
	border-color: var(--bc-accent);
}

/* The order review is the same card as the cart totals; the payment block
   inside it is stripped bare a few rules below, so there is no box in a box. */
.bc-woo-page .breakdance-woocommerce .woocommerce-checkout-review-order {
	background-color: var(--bc-paper);
	border: 1px solid var(--bc-line);
	border-radius: var(--bc-radius);
	padding: 24px;
}

.bc-woo-page .breakdance-woocommerce .woocommerce-checkout-review-order-table th,
.bc-woo-page .breakdance-woocommerce .woocommerce-checkout-review-order-table td {
	font-family: var(--bc-font);
	font-size: var(--bc-body);
	color: var(--bc-ink);
	padding: 12px 0;
	vertical-align: top;
}

.bc-woo-page .breakdance-woocommerce .woocommerce-checkout-review-order-table thead th {
	font-size: 15px;
	font-weight: 500;
	padding-top: 0;
	border-bottom: 1px solid var(--bc-line);
}

.bc-woo-page .breakdance-woocommerce .woocommerce-checkout-review-order-table td.product-total,
.bc-woo-page .breakdance-woocommerce .woocommerce-checkout-review-order-table th.product-total {
	text-align: right;
	white-space: nowrap;
}

.bc-woo-page .breakdance-woocommerce .woocommerce-checkout-review-order-table tfoot th,
.bc-woo-page .breakdance-woocommerce .woocommerce-checkout-review-order-table tfoot td {
	font-weight: 300;
	padding: 10px 0;
}

.bc-woo-page .breakdance-woocommerce .woocommerce-checkout-review-order-table tfoot tr.order-total th,
.bc-woo-page .breakdance-woocommerce .woocommerce-checkout-review-order-table tfoot tr.order-total td {
	font-weight: 500;
	border-top: 1px solid var(--bc-line);
	padding-top: 16px;
}

.bc-woo-page .breakdance-woocommerce .woocommerce-checkout-review-order-table tfoot tr.order-total .woocommerce-Price-amount {
	font-size: 20px;
	font-weight: 500;
	color: var(--bc-ink);
	white-space: nowrap;
}

/* The order-notes placeholder is a full sentence, so a two-row textarea clips
   it - five lines at 390. Tall enough to read, still resizable. */
.bc-woo-page .breakdance-woocommerce #order_comments {
	min-height: 96px;
	resize: vertical;
}

.bc-woo-page .breakdance-woocommerce #payment {
	background-color: transparent;
	border: 0;
	padding: 20px 0 0;
}

.bc-woo-page .breakdance-woocommerce #payment .place-order {
	padding: 0;
	margin: 0;
}

.bc-woo-page .breakdance-woocommerce #place_order {
	width: 100%;
	margin-top: 8px;
}

/* --- 8. The breakpoint ladder ---------------------------------------------
 *
 * The button padding is in em, so one font-size per breakpoint carries the
 * whole button down the site's 17.4 / 17.2 / 17.0 / 16.8 / 16.8 md ladder.
 */
@media (max-width: 1119px) {
	.bc-woo-page,
	.bc-woo-page .bde-global-css-vars {
		--bde-button-font-size: 17.2px;
	}
}

@media (max-width: 1023px) {
	.bc-woo-page,
	.bc-woo-page .bde-global-css-vars {
		--bde-button-font-size: 17.0px;
	}

	.bc-woo-page .breakdance-woocommerce .cart_totals,
	.bc-woo-page .breakdance-woocommerce .woocommerce-checkout-review-order {
		padding: 22px;
	}
}

@media (max-width: 767px) {
	.bc-woo-page,
	.bc-woo-page .bde-global-css-vars {
		--bde-button-font-size: 16.8px;
	}

	/* Breakdance stacks the basket table into single-column rows below 767, so
	   the column headings no longer sit above anything. (They were already
	   invisible before this change - this states it rather than relying on it.) */
	.bc-woo-page .breakdance-woocommerce table.cart thead {
		display: none;
	}

	.bc-woo-page .breakdance-woocommerce .actions .coupon {
		flex-wrap: wrap;
	}

	.bc-woo-page .breakdance-woocommerce .actions .coupon input.input-text {
		max-width: none;
		width: 100%;
	}

	.bc-woo-page .breakdance-woocommerce .actions .coupon button {
		width: 100%;
	}

	/* Stacked, the price lands straight under the last child-detail answer. */
	.bc-woo-page .breakdance-woocommerce table.cart td.product-price,
	.bc-woo-page .breakdance-woocommerce table.cart td.product-subtotal {
		padding-top: 10px;
	}

	.bc-woo-page .breakdance-woocommerce #order_comments {
		min-height: 140px;
	}
}

@media (max-width: 479px) {
	.bc-woo-page,
	.bc-woo-page .bde-global-css-vars {
		--bde-button-font-size: 16.8px;
	}

	.bc-woo-page .breakdance-woocommerce .cart_totals,
	.bc-woo-page .breakdance-woocommerce .woocommerce-checkout-review-order {
		padding: 18px 16px;
	}

	.bc-woo-page .breakdance-woocommerce .woocommerce-cart-form__contents td.product-thumbnail img {
		width: 72px;
		height: 72px;
	}
}