/* ===========================================================================
   Be Safe Safety — WooCommerce restyle (Cart / Checkout / Order-Received)
   ---------------------------------------------------------------------------
   The store uses the WC BLOCKS cart & checkout (post content is
   `wp:woocommerce/cart` and `wp:woocommerce/checkout`). The React frontend
   hydrates into `.wp-block-woocommerce-cart` / `.wp-block-woocommerce-checkout`
   wrappers built from `.wc-block-cart*` / `.wc-block-checkout*` parts and the
   shared `.wc-block-components-*` primitives. Order-received is the classic
   `order-received` checkout endpoint (`.woocommerce-order-received` body class,
   `.woocommerce-order` markup).

   This sheet repaints those WC defaults to the Be Safe design system: Inter
   typography, the `--neutral-*` palette, rounded cards/inputs, pill quantity
   steppers and the dark-pill primary button (figma `.btn--dark`). It does NOT
   change WC's own column layout — WC Blocks already ships the same 2-column
   items+summary grid the figma shows (`.wc-block-components-sidebar-layout`
   with `.wc-block-components-main` + `.wc-block-components-sidebar`), so we
   only restyle, never re-flow and never hide functional UI.

   Class names verified against the compiled WC block stylesheets
   (woocommerce/assets/client/blocks/cart.css + checkout.css) — every selector
   below targets a class WC actually emits.

   Scoping: every rule is prefixed `body.breakdance` plus a WC page/body class
   (`body.woocommerce-cart`, `body.woocommerce-checkout`,
   `body.woocommerce-order-received`) so nothing can leak to other pages.
   No `!important` — `body.breakdance` + the WC class chain carry the weight.
   Enqueued only on WC pages (see includes/assets.php).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. Shared page frame — typography + width for all three pages
--------------------------------------------------------------------------- */
body.breakdance.woocommerce-cart,
body.breakdance.woocommerce-checkout,
body.breakdance.woocommerce-order-received {
	font-family: var(--font);
	color: var(--text);
}

body.breakdance.woocommerce-cart .wp-block-woocommerce-cart,
body.breakdance.woocommerce-checkout .wp-block-woocommerce-checkout,
body.breakdance.woocommerce-order-received .woocommerce {
	max-width: var(--content-max);
	margin-left: auto;
	margin-right: auto;
	/* No own horizontal gutter — the .section-container below already pads 1rem
	   each side. Adding it here as well doubled the gutter and squeezed the
	   content (very visible on mobile). */
}

/* The WC pages render through a Breakdance template whose section caps content
   at --bde-section-width (1120px) — narrower than the site header
   (--container-max) and not aligned with it, so the page reads as indented.
   Widen the section container to the header width, with the same 1rem gutter,
   so the breadcrumb + page content line up with the nav above. `padding-top`
   uses the shared --header-gap token (the BD section default is 100px) — that
   padding IS the gap between the header and the breadcrumb. */
body.breakdance.woocommerce-cart .section-container,
body.breakdance.woocommerce-account .section-container,
body.breakdance.woocommerce-checkout .section-container,
body.breakdance.woocommerce-order-received .section-container {
	max-width: var(--container-max);
	padding-top: var(--header-gap);
	padding-left: 1rem;
	padding-right: 1rem;
}

/* WC Blocks page headings (e.g. cross-sell "You might also like", empty-cart
   title). */
body.breakdance.woocommerce-cart .wp-block-woocommerce-cart h1,
body.breakdance.woocommerce-cart .wp-block-woocommerce-cart h2,
body.breakdance.woocommerce-checkout .wp-block-woocommerce-checkout h1,
body.breakdance.woocommerce-checkout .wp-block-woocommerce-checkout h2 {
	font-family: var(--font);
	color: var(--neutral-900);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   0a. Cart breadcrumb + page title
   Prepended into the cart page content by includes/woocommerce.php as static
   markup ahead of the `wp:woocommerce/cart` block. Reuses `.bss-breadcrumb`
   from bss-pages.css for the trail; here we only frame it to the cart width
   and add the figma cart page title ("Cart"). The cart page previously had no
   breadcrumb or title at all.

   LEFT-ALIGN: the cart page is a Breakdance "Fallback: Everywhere" template;
   `the_content()` (with this markup prepended) renders inside a Breakdance
   code block — `.bde-code-block` is `display:flex; flex-direction:column;
   align-items:flex-start`. The breadcrumb (`display:flex`) and the `<h1>` are
   flex items, so they shrink-wrap to their content width; the earlier
   `margin-left:auto; margin-right:auto` then centred those shrunk boxes on the
   flex cross-axis — that is why they read as centred. `align-self: stretch`
   makes them fill the code block (i.e. the cart content width) so they sit
   top-left, matching the cart block below and the product / archive pages.
--------------------------------------------------------------------------- */
body.breakdance.woocommerce-cart .bss-cart-breadcrumb,
body.breakdance.woocommerce-cart .bss-cart-title {
	align-self: stretch;                     /* fill the section container */
	margin-left: 0;
	margin-right: 0;
	text-align: left;
}
body.breakdance.woocommerce-cart h1.bss-cart-title {
	font-family: var(--font);
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--neutral-900);
	/* The separator line lives on the title itself so it spans the full
	   (header) width: 2.5rem below the text, then a 1px line, then 4rem. */
	margin: 0.5rem 0 4rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid var(--neutral-200);
}
@media (min-width: 64rem) {
	body.breakdance.woocommerce-cart h1.bss-cart-title { font-size: 3rem; }
}
/* The cart item count next to the title, e.g. "Cart (2)" — figma Neutral-300. */
body.breakdance.woocommerce-cart .bss-cart-title__count {
	color: var(--neutral-300);
}
/* No divider directly under the cart summary title (figma) — drop the top
   border of the coupon wrapper that sits right after the title. */
body.breakdance.woocommerce-cart .wc-block-cart__totals-title + .wc-block-components-totals-wrapper {
	border-top: 0;
}
/* The divider below the order summary (between "Total estimado" and the
   checkout button) — WC paints it with a translucent dark colour; match the
   solid --neutral-200 every other summary divider uses. */
body.breakdance.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
	border-bottom-color: var(--neutral-200);
}
/* The separator line + the 4rem gap below it are carried by the cart title
   (see the h1.bss-cart-title rule above). */
/* The first item row sits directly under the title separator's 4rem — drop its
   own top padding so that gap stays exactly 4rem. WC renders the column header
   in a <thead> and the item rows in a <tbody>, so they are NOT siblings: a
   `header + row` selector never matches. Target the first <tbody> row. */
body.breakdance.woocommerce-cart .wc-block-cart-items__row:first-child {
	padding-top: 0;
}
/* WC adds a margin below the cart layout; drop it so the gap down to "You may
   also like" is exactly the cross-sells' own 4rem top margin. */
body.breakdance.woocommerce-cart .wc-block-components-sidebar-layout {
	margin-bottom: 0;
}
/* WC also leaves a margin under the summary column itself — visible on mobile
   once the layout stacks. Drop it. */
body.breakdance.woocommerce-cart .wc-block-cart__sidebar {
	margin-bottom: 0;
}
/* Mobile / tablet stack — WC drops `.is-large` and the layout becomes a single
   column, so the summary card sits flush under the line items (gap 0). Figma
   puts a 2rem gap there. The two-column `.is-large` layout has the columns side
   by side, so it must NOT get this top margin. */
body.breakdance.woocommerce-cart .wc-block-components-sidebar-layout:not(.is-large) .wc-block-cart__sidebar {
	margin-top: 2rem;
}
/* The proceed-to-checkout divider must match the other summary dividers; drop
   WC's margin-bottom so the summary column ends flush at the checkout button.
   NOTE: with Mollie active the accepted-payment-methods icon strip renders
   AFTER the submit block, so the flush-bottom rule glues it to the button —
   the icon strip re-adds its own gap below. */
body.breakdance.woocommerce-cart .wc-block-cart__submit {
	border-color: var(--neutral-200);
	margin-bottom: 0;
}
/* Mollie's accepted-payment-methods icon strip (cart summary, under the
   checkout button) — breathing room from the button + tidy icon spacing. */
body.breakdance.woocommerce-cart .wp-block-woocommerce-cart-accepted-payment-methods-block {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}
body.breakdance.woocommerce-cart .wp-block-woocommerce-cart-accepted-payment-methods-block .wc-block-components-payment-method-icon {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   0b. Account breadcrumb + page title
   Prepended into the My Account page content by includes/woocommerce.php,
   exactly like the cart header. The account page is the same Breakdance
   "Fallback: Everywhere" code block, so the same `align-self: stretch` fix
   applies — see the 0a note above.
--------------------------------------------------------------------------- */
body.breakdance.woocommerce-account .bss-account-breadcrumb,
body.breakdance.woocommerce-account .bss-account-title {
	align-self: stretch;                     /* fill the section container */
	margin-left: 0;
	margin-right: 0;
	text-align: left;
}
body.breakdance.woocommerce-account h1.bss-account-title {
	font-family: var(--font);
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--neutral-900);
	margin: 0.5rem 0 1.5rem;                 /* breadcrumb -> title */
}
@media (min-width: 64rem) {
	body.breakdance.woocommerce-account h1.bss-account-title { font-size: 3rem; }
}

/* The account content (nav + panels) sits in the standard, narrower content
   container and is CENTRED — while the breadcrumb + title above span the wider
   header width (section 0). Without this the WooCommerce account layout would
   stretch the full 1408px section and the form fields would overflow. */
body.breakdance.woocommerce-account .bde-woopageaccount {
	max-width: var(--content-max);
	align-self: center;
	width: 100%;
}

/* Hero block — breadcrumb + Profile title; figma .account-hero has a border
   below the whole block, so the rule lives on the title (last element). */
body.breakdance.woocommerce-account h1.bss-account-title {
	border-bottom: 1px solid var(--neutral-200);
	padding-bottom: 2.5625rem;
	margin-bottom: 0;
}

/* Port of figma-builds/be-safe-safety/account.html (.account-layout +
   .account-card + .account-field*). WC My Account renders a sidebar
   (.woocommerce-MyAccount-navigation) + content panel
   (.woocommerce-MyAccount-content) inside .bde-woopageaccount .woocommerce —
   we re-flow them into the figma 2-column shape and restyle WC's stock inputs,
   buttons, tables and notices to match. Selectors are prefixed
   `body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce`
   so they beat both BD's compiled defaults (.bde-* generic resets) and WC's
   own stylesheets (the WC link/notice color overrides we saw in #228). */
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-start;
	padding: 4rem 0;
}
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce > .woocommerce-notices-wrapper {
	flex: 1 1 100%;
	width: 100%;
	order: -1;
}

/* Sidebar nav — figma .account-nav */
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce nav.woocommerce-MyAccount-navigation {
	flex: 0 0 21.25rem;
	padding: 0.5rem 0;
	background: transparent;
}
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce nav.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce nav.woocommerce-MyAccount-navigation li {
	list-style: none;
	margin: 0;
	padding: 0;
	background: transparent;
}
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce nav.woocommerce-MyAccount-navigation li a {
	display: block;
	font-family: var(--font);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--neutral-300);
	text-decoration: none;
	background: transparent;
	padding: 0;
	border: 0;
	border-radius: 0;
	transition: color var(--t-fast, .15s) var(--ease, ease);
}
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce nav.woocommerce-MyAccount-navigation li a:hover,
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce nav.woocommerce-MyAccount-navigation li a:focus {
	color: var(--neutral-500);
	background: transparent;
	outline: none;
}
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce nav.woocommerce-MyAccount-navigation li.is-active a,
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce nav.woocommerce-MyAccount-navigation li.is-active a:hover,
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce nav.woocommerce-MyAccount-navigation li.is-active a:focus {
	color: var(--neutral-900);
	background: transparent;
}

/* Content panel — figma .account-card */
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce-MyAccount-content,
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce > form.woocommerce-form-login,
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce > form.lost_reset_password,
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce > .u-columns {
	flex: 1 1 0;
	min-width: 0;
	background: var(--neutral-0);
	border-radius: var(--radius, 0.75rem);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* Logged-OUT login/register lives directly under .woocommerce — keep its first
   <h2> ("Entrar" / "Registrar") as the card title; the form below uses the same
   field + button styling. */
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce > h2 {
	font-family: var(--font);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	color: var(--neutral-900);
	margin: 0;
	flex: 1 1 100%;
}

/* WC notices (info / message / error) inside the account panel — figma never
   shows the coloured banner; we mute it to a quiet text block. Scope is the
   whole .bde-woopageaccount because the address endpoint prints its
   "Os endereços a seguir serão usados..." notice OUTSIDE .woocommerce-content. */
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce-message,
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce-info,
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce-notice {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	color: var(--neutral-700);
	font-size: 1rem;
	line-height: 1.5;
	box-shadow: none;
}
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce-message::before,
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce-info::before,
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce-notice::before {
	display: none;
}

/* Inline content links inside the dashboard panel — match figma's underlined
   neutral link, NOT WC's WordPress-admin blue. Action buttons (.edit, .button,
   .woocommerce-button) are excluded — they get the pill-button treatment below. */
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce-MyAccount-content a:not(.edit):not(.button):not(.woocommerce-button):not(.woocommerce-Button):not(.bss-card) {
	color: var(--neutral-900);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce-MyAccount-content a:not(.edit):not(.button):not(.woocommerce-button):not(.woocommerce-Button):not(.bss-card):hover {
	color: var(--blue-500, var(--blue-600));
}

/* ---------------------------------------------------------------------------
   Addresses endpoint (/minha-conta/edit-address/)
   WC renders 2 address sub-cards via .u-columns > .u-column1/2 with a header
   (.woocommerce-Address-title) holding the heading + the "Adicionar Endereço"
   anchor (class="edit"). The figma reads those as proper pill-buttons aligned
   to the right of the heading row.
--------------------------------------------------------------------------- */
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	width: 100%;
	margin: 0;
}
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns .col-1,
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns .col-2,
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns .u-column1,
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns .u-column2 {
	flex: 1 1 calc(50% - 0.75rem);
	min-width: 18rem;
	width: auto;
	float: none;
	padding: 1.5rem;
	background: var(--neutral-0);
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius, 0.75rem);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Address-card heading row — heading stacked above, "Add" pill button below.
   Stacking (vs side-by-side flex) keeps the card readable at narrow widths
   where the button label runs long ("Adicionar Endereço De Cobrança"). */
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns .woocommerce-Address-title,
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns header.title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
}
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns .woocommerce-Address-title h3,
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns header.title h3 {
	font-family: var(--font);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--neutral-900);
	margin: 0;
	padding: 0;
	letter-spacing: 0;
}
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns .woocommerce-Address-title .edit,
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns header.title .edit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--neutral-900);
	background: var(--neutral-0);
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-pill, 999px);
	padding: 0.5rem 1rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--t-fast, .15s) var(--ease, ease), border-color var(--t-fast, .15s) var(--ease, ease);
}
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce-Address-title .edit:hover {
	background: var(--neutral-100);
	border-color: var(--neutral-300);
	color: var(--neutral-900);
}

/* Address body — the actual address text + the "you haven't filled" empty line */
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns address {
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--neutral-500);
	margin: 0;
}
body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns p {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--neutral-500);
	margin: 0;
}

@media (max-width: 48rem) {
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns .col-1,
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns .col-2,
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns .u-column1,
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns .u-column2 {
		flex: 1 1 100%;
	}
}

/* Form-row + field labels — figma .account-field / .account-field__label */
body.breakdance.woocommerce-account .form-row,
body.breakdance.woocommerce-account .woocommerce-form-row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
}
body.breakdance.woocommerce-account .form-row label,
body.breakdance.woocommerce-account .woocommerce-form-row label,
body.breakdance.woocommerce-account .woocommerce-MyAccount-content label {
	font-family: var(--font);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	color: var(--neutral-900);
	margin: 0;
	padding: 0;
}
body.breakdance.woocommerce-account .required {
	color: var(--neutral-400);
	text-decoration: none;
}

/* Inputs — figma .account-field__input */
body.breakdance.woocommerce-account input[type="text"],
body.breakdance.woocommerce-account input[type="email"],
body.breakdance.woocommerce-account input[type="tel"],
body.breakdance.woocommerce-account input[type="password"],
body.breakdance.woocommerce-account input[type="number"],
body.breakdance.woocommerce-account input[type="date"],
body.breakdance.woocommerce-account select,
body.breakdance.woocommerce-account textarea,
body.breakdance.woocommerce-account .woocommerce-Input,
body.breakdance.woocommerce-account .input-text {
	width: 100%;
	padding: 1rem;
	border: 1px solid var(--neutral-700);
	border-radius: var(--radius, 0.75rem);
	font-family: var(--font);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--neutral-900);
	background: var(--neutral-0);
	outline: none;
	transition: border-color var(--t-fast, .15s) var(--ease, ease);
	box-shadow: none;
}
body.breakdance.woocommerce-account input:focus,
body.breakdance.woocommerce-account select:focus,
body.breakdance.woocommerce-account textarea:focus {
	border-color: var(--neutral-900);
}

/* Select2 widget — WC enhances País / Estado <select> elements into a custom
   widget (.select2-container) that replaces the native control. The original
   <select> is hidden, so styling `select { … }` never reaches the screen — we
   restyle the Select2 selection box + the popover dropdown to match the figma
   text-input box exactly (1rem padding, 1px var(--neutral-700) border, radius). */
body.breakdance.woocommerce-account .select2-container .select2-selection--single,
body.breakdance.woocommerce-checkout .select2-container .select2-selection--single,
body.breakdance.woocommerce .select2-container .select2-selection--single {
	height: auto;
	min-height: 3.5rem;
	padding: 1rem;
	border: 1px solid var(--neutral-700);
	border-radius: var(--radius, 0.75rem);
	background: var(--neutral-0);
	font-family: var(--font);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--neutral-900);
	box-shadow: none;
	display: flex;
	align-items: center;
}
body.breakdance.woocommerce-account .select2-container--open .select2-selection--single,
body.breakdance.woocommerce-account .select2-container--focus .select2-selection--single,
body.breakdance.woocommerce-checkout .select2-container--open .select2-selection--single,
body.breakdance.woocommerce-checkout .select2-container--focus .select2-selection--single,
body.breakdance.woocommerce .select2-container--open .select2-selection--single,
body.breakdance.woocommerce .select2-container--focus .select2-selection--single {
	border-color: var(--neutral-900);
}
body.breakdance.woocommerce-account .select2-container .select2-selection__rendered,
body.breakdance.woocommerce-checkout .select2-container .select2-selection__rendered,
body.breakdance.woocommerce .select2-container .select2-selection__rendered {
	padding: 0;
	line-height: 1.5;
	color: var(--neutral-900);
}
body.breakdance.woocommerce-account .select2-container .select2-selection__placeholder,
body.breakdance.woocommerce-checkout .select2-container .select2-selection__placeholder,
body.breakdance.woocommerce .select2-container .select2-selection__placeholder {
	color: var(--neutral-400);
}
body.breakdance.woocommerce-account .select2-container .select2-selection__arrow,
body.breakdance.woocommerce-checkout .select2-container .select2-selection__arrow,
body.breakdance.woocommerce .select2-container .select2-selection__arrow {
	top: 50%;
	right: 1rem;
	height: 1.5rem;
	width: 1.5rem;
	transform: translateY(-50%);
}
body.breakdance.woocommerce-account .select2-container .select2-selection__clear,
body.breakdance.woocommerce-checkout .select2-container .select2-selection__clear,
body.breakdance.woocommerce .select2-container .select2-selection__clear {
	color: var(--neutral-400);
	margin-right: 0.25rem;
}

/* Dropdown panel — match the input look-and-feel */
.select2-container--default .select2-dropdown {
	border: 1px solid var(--neutral-700);
	border-radius: var(--radius, 0.75rem);
	background: var(--neutral-0);
	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
	overflow: hidden;
}
.select2-container--default .select2-dropdown .select2-search--dropdown {
	padding: 0.5rem;
}
.select2-container--default .select2-dropdown .select2-search__field {
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius, 0.5rem);
	font-family: var(--font);
	font-size: 0.9375rem;
	color: var(--neutral-900);
	outline: none;
}
.select2-container--default .select2-dropdown .select2-search__field:focus {
	border-color: var(--neutral-900);
}
.select2-container--default .select2-results__option {
	padding: 0.625rem 1rem;
	font-family: var(--font);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--neutral-700);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--neutral-100);
	color: var(--neutral-900);
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: transparent;
	color: var(--neutral-900);
	font-weight: 600;
}

/* Remember-me checkbox row */
body.breakdance.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--neutral-700);
}
body.breakdance.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--neutral-900);
}

/* Submit button — figma .btn .btn--dark */
body.breakdance.woocommerce-account .woocommerce-button,
body.breakdance.woocommerce-account button[type="submit"].woocommerce-Button,
body.breakdance.woocommerce-account .bde-woopageaccount button[name="login"],
body.breakdance.woocommerce-account .bde-woopageaccount button[name="register"],
body.breakdance.woocommerce-account .bde-woopageaccount button[name="save_account_details"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font);
	font-weight: 600;
	font-size: 1rem;
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius-pill, 999px);
	border: 0;
	background: var(--neutral-900);
	color: var(--neutral-0);
	cursor: pointer;
	transition: background var(--t-fast, .15s) var(--ease, ease);
	text-decoration: none;
}
body.breakdance.woocommerce-account .woocommerce-button:hover,
body.breakdance.woocommerce-account button[type="submit"].woocommerce-Button:hover {
	background: var(--neutral-700);
}

/* Outline variant for "secondary" actions like edit-address / view-order */
body.breakdance.woocommerce-account .button:not(.woocommerce-Button):not([name="login"]):not([name="register"]):not([name="save_account_details"]) {
	background: var(--neutral-0);
	color: var(--neutral-700);
	border: 1px solid var(--border, var(--neutral-200));
	border-radius: var(--radius-pill, 999px);
	padding: 0.75rem 1.25rem;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
body.breakdance.woocommerce-account .button:not(.woocommerce-Button):not([name="login"]):not([name="register"]):not([name="save_account_details"]):hover {
	background: var(--neutral-100);
	border-color: var(--neutral-300);
}

/* Lost-password link under the login form */
body.breakdance.woocommerce-account .woocommerce-LostPassword a {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--neutral-900);
	text-decoration: none;
}
body.breakdance.woocommerce-account .woocommerce-LostPassword a:hover {
	color: var(--blue-500, var(--blue-600));
}

/* Dashboard greeting + endpoint list */
body.breakdance.woocommerce-account .woocommerce-MyAccount-content p {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--neutral-700);
	margin: 0;
}
body.breakdance.woocommerce-account .woocommerce-MyAccount-content p a {
	color: var(--neutral-900);
	font-weight: 600;
	text-decoration: underline;
}

/* Orders / downloads tables — match the card surface */
body.breakdance.woocommerce-account .woocommerce-MyAccount-content table {
	width: 100%;
	border-collapse: collapse;
}
body.breakdance.woocommerce-account .woocommerce-MyAccount-content th,
body.breakdance.woocommerce-account .woocommerce-MyAccount-content td {
	padding: 1rem 0.75rem;
	border-bottom: 1px solid var(--neutral-200);
	font-size: 0.9375rem;
	text-align: left;
}
body.breakdance.woocommerce-account .woocommerce-MyAccount-content th {
	font-weight: 600;
	color: var(--neutral-700);
}

/* Mobile (≤768px) — account page
   Figma maps the sidebar to a horizontal wrap of chip-style links (.account-nav
   flex-direction:row, flex-wrap:wrap, gap 0.75rem 1.25rem) sitting above the
   full-width card. WC's edit-account form puts first/last name in a 2-column
   row that must stack here too, and the action bar's primary button goes
   full-width below the secondary. */
@media (max-width: 48rem) {
	body.breakdance.woocommerce-account h1.bss-account-title {
		font-size: 2.25rem;
		padding-bottom: 1.5rem;
	}

	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce {
		flex-direction: column;
		padding: 2rem 0 4rem;
		gap: 1.5rem;
	}
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce nav.woocommerce-MyAccount-navigation,
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce-MyAccount-content {
		flex: 1 1 100%;
		width: 100%;
	}

	/* Sidebar nav → single-line horizontal scroll row (figma mobile #232).
	   Items DO NOT wrap; the row scrolls horizontally so labels stay readable
	   and the active item never jumps line. NO border-bottom — figma keeps the
	   row clean; only the title divider above sets the section break. */
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce nav.woocommerce-MyAccount-navigation {
		margin: 0 -1rem;       /* let the scroll row breathe to the screen edges */
		padding: 0 1rem;
	}
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce nav.woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 1.5rem;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce nav.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce nav.woocommerce-MyAccount-navigation li {
		flex: 0 0 auto;
	}
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce nav.woocommerce-MyAccount-navigation li a {
		font-size: 1rem;
		line-height: 1.25;
		padding: 0.75rem 0;
		white-space: nowrap;
	}

	/* Card padding gets a touch tighter on small screens */
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce-MyAccount-content,
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce > form.woocommerce-form-login,
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce > form.lost_reset_password {
		padding: 1.25rem;
		gap: 1.5rem;
	}

	/* WC edit-account 2-column form rows → stack on mobile */
	body.breakdance.woocommerce-account .form-row-first,
	body.breakdance.woocommerce-account .form-row-last {
		width: 100%;
		float: none;
		margin-right: 0;
	}

	/* Action-bar buttons go full width, primary on top (figma column-reverse) */
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce-MyAccount-content fieldset + p,
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce-MyAccount-content form > p:last-child {
		display: flex;
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 0.75rem;
	}
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce button[type="submit"],
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce .woocommerce-button,
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .woocommerce .button {
		width: 100%;
	}

	/* Address-cards header — keep button label readable on narrow card */
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns .woocommerce-Address-title .edit,
	body.breakdance.woocommerce-account .bde-woopageaccount.breakdance-woocommerce .u-columns header.title .edit {
		width: 100%;
		justify-content: center;
	}
}

/* ===========================================================================
   1. CART  (.wc-block-cart / .wc-block-components-sidebar-layout)
   =========================================================================== */

/* --- Cart line items list (left column) ---
   WooCommerce renders the items as `<table class="wc-block-cart-items">` with
   one `<tr class="wc-block-cart-items__row">` per line. Each row is a CSS grid
   with three real cells: `__image` (thumbnail), `__product` (name + unit price
   + quantity, stacked in `__wrap`) and `__total` (line subtotal).

   The figma cart wants: thumbnail | product info | quantity pinned RIGHT |
   line total. We re-flow the row grid to a clean 3-track layout and right-
   align the quantity inside the product cell. WC's own grid-placement rules
   that target `__quantity` as a direct grid child are inert here — `__quantity`
   is nested inside the `__product` cell — so this re-flow does not fight them.
--------------------------------------------------------------------------- */
body.breakdance.woocommerce-cart .wc-block-cart-items {
	border: 0;
	border-collapse: collapse;
}

/* DIVIDER FIX — the row separator must be one continuous line. WC's default
   `border-bottom` sits on the `<tr>`; on a `display:grid` row that paints
   correctly, but the column-header `<tr>` and the table edges leave a visible
   gap where borders meet. We make the row itself the single source of the
   line (full bleed, no inset) and drop every competing border. */
body.breakdance.woocommerce-cart .wc-block-cart-items__row {
	display: grid;
	grid-template-columns: 5rem 1fr;
	column-gap: 1.5rem;
	align-items: center;
	border: 0;
	border-bottom: 1px solid var(--neutral-200);
	padding: 1.5rem 0;
}
body.breakdance.woocommerce-cart .wc-block-cart-items__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;                       /* figma: last item is flush */
}
/* Kill any per-cell borders so nothing breaks the continuous row line */
body.breakdance.woocommerce-cart .wc-block-cart-items__row > td,
body.breakdance.woocommerce-cart .wc-block-cart-item__image,
body.breakdance.woocommerce-cart .wc-block-cart-item__product,
body.breakdance.woocommerce-cart .wc-block-cart-item__total {
	border: 0;
	padding: 0;
}

/* Column header strip ("Product" / "Total") — quiet muted caption that lines
   up with the row grid, with its own continuous bottom divider. */
body.breakdance.woocommerce-cart .wc-block-cart-items__header {
	display: none;                           /* figma cart has no Produto/Total header row */
}
body.breakdance.woocommerce-cart .wc-block-cart-items__header > th,
body.breakdance.woocommerce-cart .wc-block-cart-items__header-image,
body.breakdance.woocommerce-cart .wc-block-cart-items__header-product,
body.breakdance.woocommerce-cart .wc-block-cart-items__header-total {
	border: 0;
	color: var(--neutral-400);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
/* The product header is `visibility:hidden` by default; show it as the figma
   "Produto" caption spanning the thumbnail + info tracks. */
body.breakdance.woocommerce-cart .wc-block-cart-items__header-image {
	grid-column: 1 / 3;
	width: auto;
	visibility: visible;
	text-align: left;
}
body.breakdance.woocommerce-cart .wc-block-cart-items__header-product {
	display: none;
}
body.breakdance.woocommerce-cart .wc-block-cart-items__header-total {
	width: auto;
	text-align: right;
}

/* Product thumbnail — exact figma config: WC's visible tile is the image link
   (`> a`) — a fixed 5rem square (white, 0.5rem radius) that centres the
   product <img> with the figma padding. */
body.breakdance.woocommerce-cart .wc-block-cart-item__image > a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 5rem;
	height: 5rem;
	aspect-ratio: 1 / 1;
	/* No inner padding: the photo fills the white tile, so the tile stops
	   reading as a frame drawn around the product. */
	padding: 0;
	border-radius: 0.5rem;
	background: var(--neutral-0);
}
body.breakdance.woocommerce-cart .wc-block-cart-item__image,
body.breakdance.woocommerce-cart .wc-block-cart-item__image img,
body.breakdance.woocommerce-cart .wc-block-components-product-image img {
	border-radius: var(--radius);
}
body.breakdance.woocommerce-cart .wc-block-cart-item__image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
/* No tint behind the order-summary thumbnails either — same reason as the
   cart line items: it shows as a grey box around a white-background photo. */
body.breakdance.woocommerce-cart .wc-block-components-product-image img,
body.breakdance.woocommerce-checkout .wc-block-components-product-image img {
	background: transparent;
}

/* Product cell — a stacked INFO COLUMN on the left, quantity pinned right.
   `__wrap` is WC's flex column holding (in DOM source order) the product name,
   an optional sale badge, `.wc-block-cart-item__prices` (the per-unit price),
   the `.wc-block-components-product-metadata` short description / variation
   data, and the `.wc-block-cart-item__quantity` stepper.

   The figma cart wants the info column to read top-to-bottom
   name -> description -> unit price, with the quantity stepper to the right.
   WC's DOM order is name -> prices -> description, so we lay `__wrap` out as a
   2-column grid: track 1 (`1fr`) stacks every info child on its own row, track
   2 (`auto`) holds the quantity spanning the full height. `order` then moves
   the unit price BELOW the description without touching the markup — the
   quantity and the separate `__total` cell are never reordered. */
body.breakdance.woocommerce-cart .wc-block-cart-item__product {
	min-width: 0;
}
body.breakdance.woocommerce-cart .wc-block-cart-item__wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 1.5rem;
	align-items: center;
	width: 100%;
}
/* Info column — name, description and unit price each occupy their own row in
   grid track 1. `order` sets the visual sequence: name (1) -> description (2)
   -> unit price (3). They keep a small vertical rhythm via row-gap. */
body.breakdance.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-product-name,
body.breakdance.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-sale-badge,
body.breakdance.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-cart-item__prices,
body.breakdance.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-product-metadata,
body.breakdance.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-product-details {
	grid-column: 1;
	min-width: 0;
	margin: 0;
}
body.breakdance.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-product-name {
	order: 1;
}
body.breakdance.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-product-metadata,
body.breakdance.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-product-details {
	order: 2;
	margin-top: 0.25rem;
}
/* Unit price — pulled directly under the name + description block. */
body.breakdance.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-cart-item__prices {
	order: 3;
	margin-top: 0.25rem;
}
/* An optional sale badge stays grouped with the unit price. */
body.breakdance.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-sale-badge {
	order: 4;
	margin-top: 0.25rem;
	justify-self: start;
}
/* Quantity block — second grid track, vertically centred against the info
   column, never reordered. */
body.breakdance.woocommerce-cart .wc-block-cart-item__quantity {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: center;
	margin: 0;
}

/* Product name (cart line items use the shared product-name primitive) */
body.breakdance.woocommerce-cart .wc-block-components-product-name {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--neutral-900);
	max-width: none;
}
body.breakdance.woocommerce-cart a.wc-block-components-product-name:hover {
	text-decoration: underline;
	color: var(--neutral-900);
}

/* Price + metadata */
body.breakdance.woocommerce-cart .wc-block-cart-item__prices,
body.breakdance.woocommerce-cart .wc-block-components-product-price {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--neutral-500);
}
body.breakdance.woocommerce-cart .wc-block-components-product-price__value {
	color: var(--neutral-900);
	font-weight: 500;
}
body.breakdance.woocommerce-cart .wc-block-components-product-metadata,
body.breakdance.woocommerce-cart .wc-block-components-product-details,
body.breakdance.woocommerce-cart .wc-block-components-product-details__name {
	color: var(--neutral-400);
	font-size: 0.875rem;
}
body.breakdance.woocommerce-cart .wc-block-components-product-details__value {
	color: var(--neutral-500);
}

/* --- Per-line Total column: hidden ---
   The figma cart (cart.html) has no per-row line total — the line subtotal
   appears only in the Summary panel. Hide WC's `__total` cell and its column
   header so each row is thumbnail + product info only. */
body.breakdance.woocommerce-cart .wc-block-cart-item__total,
body.breakdance.woocommerce-cart .wc-block-cart-items__header-total {
	display: none;
}

/* --- Quantity stepper — figma rounded pill (.cart-page__qty) ---
   WC Blocks renders `.wc-block-components-quantity-selector` as a flex row of
   three children, ordered via CSS `order`: the minus button (order 1, text
   glyph "−"), the `__input` (order 2) and the plus button (order 3, text glyph
   "+"). The −/+ are plain text children, NOT SVG icons, so we size the glyphs
   with `font-size`. WC's own rule fixes the pill to 107px wide with a 4px
   radius and a 5%-tint fill; we repaint it to the figma chunkier transparent
   pill. `overflow` is left at WC's `hidden` — it does not clip the taller
   43px pill because the children are height:100% and centred. */
body.breakdance.woocommerce-cart .wc-block-components-quantity-selector {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;                            /* figma — between − / number / + */
	width: auto;                             /* override WC's fixed 107px */
	height: 2.6875rem;                       /* 43px — figma */
	padding: 0.75rem 1.25rem;                /* figma */
	overflow: visible;                       /* WC clips its content with overflow:hidden */
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-pill);
	background: transparent;                 /* figma pill has no fill */
}
/* The number — constant neutral colour in every state (no focus/invalid tint). */
body.breakdance.woocommerce-cart .wc-block-components-quantity-selector__input,
body.breakdance.woocommerce-cart .wc-block-components-quantity-selector__input:focus {
	width: 2.25rem;                          /* narrow — WC's default input is wide */
	min-width: 0;
	padding: 0;
	text-align: center;
	color: var(--neutral-900);
	font-weight: 600;
	font-family: var(--font);
	background: transparent;
	box-shadow: none;
}
/* The − / + buttons — WC's text glyph is hidden (font-size:0); the figma SVG
   icon is drawn via a mask ::before so it inherits the colour. */
body.breakdance.woocommerce-cart .wc-block-components-quantity-selector__button {
	width: auto;
	min-width: 0;
	height: 100%;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	opacity: 1;
	color: var(--neutral-900);
	background: transparent;
	border: 0;
	border-radius: 0;
}
body.breakdance.woocommerce-cart .wc-block-components-quantity-selector__button::before {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
}
body.breakdance.woocommerce-cart .wc-block-components-quantity-selector__button--minus::before {
	background-color: var(--neutral-900);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5%2013V11H19V13H5Z'%20fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5%2013V11H19V13H5Z'%20fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.breakdance.woocommerce-cart .wc-block-components-quantity-selector__button--plus::before {
	background-color: var(--neutral-900);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M11%2013H5V11H11V5H13V11H19V13H13V19H11V13Z'%20fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M11%2013H5V11H11V5H13V11H19V13H13V19H11V13Z'%20fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* No hover/focus fill — the figma's hover wash was rejected; keep it flat so
   the − and + never change colour or gain a background. */
body.breakdance.woocommerce-cart .wc-block-components-quantity-selector__button:hover,
body.breakdance.woocommerce-cart .wc-block-components-quantity-selector__button:focus,
body.breakdance.woocommerce-cart .wc-block-components-quantity-selector__button:active {
	background: transparent;
	color: var(--neutral-900);
}
body.breakdance.woocommerce-cart .wc-block-components-quantity-selector__button:disabled {
	color: var(--neutral-300);
}

/* --- Remove (trash) control ---
   The cart's remove control is the `.wc-block-cart-item__remove-link` <button>,
   whose only child is WC's own 24px trash <svg>. WC's stock cart stylesheet
   hides this button on the desktop cart and only shows it on the mobile stack
   via `.wc-block-cart table.wc-block-cart-items .wc-block-cart-item__remove-
   link { display:none }` — specificity (0,3,0). The remove button is nested in
   `.wc-block-cart-item__quantity`, so chaining that class gives our rules
   (0,4,0): they win over WC's hide rule regardless of stylesheet load order
   (WC Blocks injects its cart CSS lazily on hydration), no `!important` needed.
   We re-show the button and repaint it: hide WC's own svg and render the
   QuoteForm trash icon via a `::before` `mask-image`, so the cart and the
   QuoteForm element share one delete icon. The <button> and its click handler
   are untouched — removing an item keeps working. */
body.breakdance.woocommerce-cart .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	color: var(--neutral-400);
	background: transparent;
	border: 0;
	transition: color var(--t-fast) var(--ease);
}
/* Hide WC's own trash svg / any text without removing the functional button. */
body.breakdance.woocommerce-cart .wc-block-cart-item__quantity .wc-block-cart-item__remove-link svg {
	display: none;
}
/* QuoteForm trash icon (elements/QuoteForm/html.twig) drawn as a CSS mask so
   it inherits the link colour — neutral-400, red-600 on hover. The URL-encoded
   data-URI is the exact SVG the QuoteForm "remove from selection" button uses,
   so the cart and the QuoteForm share one delete icon. */
body.breakdance.woocommerce-cart .wc-block-cart-item__quantity .wc-block-cart-item__remove-link::before {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%206h18M8%206V4h8v2m-9%200v14a1%201%200%200%200%201%201h8a1%201%200%200%200%201-1V6M10%2011v6M14%2011v6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%206h18M8%206V4h8v2m-9%200v14a1%201%200%200%200%201%201h8a1%201%200%200%200%201-1V6M10%2011v6M14%2011v6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.breakdance.woocommerce-cart .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
	color: var(--red-600);
}

/* --- Cart line items — small-screen stack ---
   WC adds `is-small` / `is-mobile` to the cart wrapper at narrow widths. There
   the figma stacks the row: thumbnail + info on top, quantity and total below.
   Collapse the 3-track row grid to WC's mobile 2-column flow, and let the
   product cell `__wrap` drop its 2-track grid so the info column + quantity
   stack vertically (name -> description -> unit price -> quantity stepper). */
body.breakdance.woocommerce-cart .is-small .wc-block-cart-items__row,
body.breakdance.woocommerce-cart .is-mobile .wc-block-cart-items__row {
	grid-template-columns: 5rem 1fr;
	column-gap: 1rem;
	row-gap: 0.75rem;
	align-items: start;
}
body.breakdance.woocommerce-cart .is-small .wc-block-cart-item__total,
body.breakdance.woocommerce-cart .is-mobile .wc-block-cart-item__total {
	min-width: 0;
}
body.breakdance.woocommerce-cart .is-small .wc-block-cart-item__wrap,
body.breakdance.woocommerce-cart .is-mobile .wc-block-cart-item__wrap {
	grid-template-columns: minmax(0, 1fr);
}
body.breakdance.woocommerce-cart .is-small .wc-block-cart-item__quantity,
body.breakdance.woocommerce-cart .is-mobile .wc-block-cart-item__quantity {
	grid-column: 1;
	grid-row: auto;
	order: 5;
	margin-top: 0.75rem;
	justify-self: start;
}

/* --- Cart summary / totals column (right column, .wc-block-cart__sidebar) ---
   No card: the figma summary is a borderless column (`.cart-page__summary` has
   no border/background/padding). The heading, totals rows and the divider lines
   around the Total sit directly on the page background. Confirmed borderless
   with André 2026-05-21. NOTE: WooCommerce puts BOTH `wc-block-cart__sidebar`
   and `wc-block-components-sidebar` on the SAME element — any rule written as
   `.wc-block-cart__sidebar .wc-block-components-sidebar` (descendant) matches
   nothing; use `.wc-block-cart__sidebar` directly. */

/* Summary heading ("Cart totals") — figma .cart-page__summary-title (24px) */
body.breakdance.woocommerce-cart .wc-block-cart__totals-title {
	display: block;
	color: var(--neutral-900);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 1rem;
}

/* Totals row groups — subtle dividers between blocks */
body.breakdance.woocommerce-cart .wc-block-components-totals-wrapper {
	border-color: var(--neutral-200);
}
body.breakdance.woocommerce-cart .wc-block-components-panel,
body.breakdance.woocommerce-cart .wc-block-components-panel > h2 {
	border-color: var(--neutral-200);
}

/* Total row fence (figma .cart-page__total) — the Total is fenced by two
   divider lines, each 1.5rem clear of content on both sides. WooCommerce ships
   every `.wc-block-components-totals-wrapper` with `padding: 16px 0` (1rem) and
   the order-summary-block with a 1rem (16px) bottom margin — both too tight.
   `:has()` targets only the Total's own wrapper, the wrapper directly above it,
   and the order-summary-block (whose bottom margin is the gap from the lower
   divider down to the Checkout button). Desktop + mobile — same figma value. */
body.breakdance.woocommerce-cart .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	padding-top: 1.5rem;       /* upper divider -> "Total" text */
	padding-bottom: 1.5rem;    /* "Total" text -> lower divider */
}
body.breakdance.woocommerce-cart .wc-block-components-totals-wrapper:has(+ .wc-block-components-totals-wrapper .wc-block-components-totals-footer-item) {
	padding-bottom: 1.5rem;    /* rows above -> upper divider */
}
body.breakdance.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
	margin-bottom: 1.5rem;     /* lower divider -> Checkout button */
}

/* Totals rows (Subtotal / Shipping / Tax / Discount) — figma .cart-page__line */
body.breakdance.woocommerce-cart .wc-block-components-totals-item {
	font-size: 1rem;
	font-weight: 500;
	color: var(--neutral-500);
}
body.breakdance.woocommerce-cart .wc-block-components-totals-item__label {
	color: var(--neutral-500);
}
body.breakdance.woocommerce-cart .wc-block-components-totals-item__value {
	color: var(--neutral-900);
	font-weight: 500;
}
body.breakdance.woocommerce-cart .wc-block-components-totals-item__description {
	color: var(--neutral-400);
	font-size: 0.875rem;
}

/* Footer total row (figma .cart-page__total — 18px, both ends dark) */
body.breakdance.woocommerce-cart .wc-block-components-totals-footer-item {
	font-size: 1.125rem;
	font-weight: 600;
}
body.breakdance.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.breakdance.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--neutral-900);
	font-weight: 600;
}
body.breakdance.woocommerce-cart .wc-block-components-totals-footer-item-tax,
body.breakdance.woocommerce-cart .wc-block-components-totals-footer-item-shipping {
	color: var(--neutral-400);
	font-size: 0.875rem;
	font-weight: 500;
}

/* Coupon disclosure ("Add a coupon" link / panel toggle) */
body.breakdance.woocommerce-cart .wc-block-components-totals-coupon-link,
body.breakdance.woocommerce-cart .wc-block-components-panel__button {
	color: var(--neutral-900);
	font-weight: 500;
	font-size: 0.875rem;
}
body.breakdance.woocommerce-cart .wc-block-components-panel__button-icon {
	fill: var(--neutral-400);
}

/* Coupon input field inside the disclosure */
body.breakdance.woocommerce-cart .wc-block-components-totals-coupon__input input[type="text"] {
	font-family: var(--font);
	color: var(--neutral-900);
	border-radius: var(--radius);
	border-color: var(--neutral-200);
}
body.breakdance.woocommerce-cart .wc-block-components-totals-coupon__input input[type="text"]:focus {
	border-color: var(--neutral-900);
	box-shadow: 0 0 0 1px var(--neutral-900);
	outline: none;
}

/* Applied-coupon chips */
body.breakdance.woocommerce-cart .wc-block-components-chip {
	background: var(--neutral-100);
	color: var(--neutral-700);
	font-family: var(--font);
	font-weight: 500;
}

/* ===========================================================================
   2. CHECKOUT  (.wc-block-checkout / .wc-block-components-sidebar-layout)
   =========================================================================== */

/* Step headings ("Contact information", "Shipping address", "Payment options") */
body.breakdance.woocommerce-checkout .wc-block-components-checkout-step__title {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--neutral-900);
	font-family: var(--font);
}
body.breakdance.woocommerce-checkout .wc-block-components-checkout-step__heading-content,
body.breakdance.woocommerce-checkout .wc-block-components-checkout-step__description {
	color: var(--neutral-500);
	font-size: 1rem;
	font-weight: 500;
	font-family: var(--font);
}
body.breakdance.woocommerce-checkout .wc-block-components-checkout-step__heading-content a {
	color: var(--neutral-900);
	text-decoration: underline;
}

/* Subtle divider between steps (figma .checkout-step border-top) */
body.breakdance.woocommerce-checkout .wc-block-components-checkout-step .wc-block-components-checkout-step__heading {
	border-color: var(--neutral-200);
}

/* Step-number badges (when the form uses --with-step-number) — neutral, not blue */
body.breakdance.woocommerce-checkout .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title:before {
	color: var(--neutral-900);
}
body.breakdance.woocommerce-checkout .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content:before,
body.breakdance.woocommerce-checkout .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__description:before {
	border-color: var(--neutral-200);
}

/* --- Form fields — rounded inputs on the neutral card aesthetic ---
   WC Blocks renders an outlined input with a floating label inside
   `.wc-block-components-text-input`; `select`s are `select.wc-block-components-
   select-input` inside `.wc-block-components-select`. The figma checkout uses a
   bottom-border-only field; WC's floating-label input does not survive being
   reduced to a single underline (the label overlaps the value), so we keep
   WC's outlined box and only restyle radius / border / focus — see report. */
body.breakdance.woocommerce-checkout .wc-block-components-text-input input[type="text"],
body.breakdance.woocommerce-checkout .wc-block-components-text-input input[type="email"],
body.breakdance.woocommerce-checkout .wc-block-components-text-input input[type="tel"],
body.breakdance.woocommerce-checkout .wc-block-components-text-input input[type="number"],
body.breakdance.woocommerce-checkout .wc-block-components-text-input input[type="password"],
body.breakdance.woocommerce-checkout .wc-block-components-text-input input[type="url"],
body.breakdance.woocommerce-checkout .wc-block-components-select .wc-block-components-select-input,
body.breakdance.woocommerce-checkout select.wc-block-components-select-input,
body.breakdance.woocommerce-checkout .wc-block-components-textarea {
	font-family: var(--font);
	font-size: 1rem;
	color: var(--neutral-900);
	background-color: var(--neutral-0);
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius);
}
body.breakdance.woocommerce-checkout .wc-block-components-text-input input:focus,
body.breakdance.woocommerce-checkout .wc-block-components-select .wc-block-components-select-input:focus,
body.breakdance.woocommerce-checkout select.wc-block-components-select-input:focus,
body.breakdance.woocommerce-checkout .wc-block-components-textarea:focus {
	border-color: var(--neutral-900);
	box-shadow: 0 0 0 1px var(--neutral-900);
	outline: none;
}

/* Address-form row rhythm — every text-input row carries margin-top: 12px,
   but the select-based rows (Country / State, `.wc-block-components-country-
   input` / `.wc-block-components-state-input`) render with margin 0 since the
   Mollie blocks integration loads its stylesheet, gluing them to the row
   above. Re-assert the same 12px the sibling text inputs compute to.
   CAREFUL: the 12px must live on the WRAPPER for both fields. Stock WC gives
   the STATE field its 12px on the inner `.wc-blocks-components-select` (the
   country field's inner select has 0) — leaving that in place doubles the
   state offset and drops its box 12px below Town/City on the shared flex
   line. Normalize: wrapper carries the row gap, inner selects carry none. */
body.breakdance.woocommerce-checkout .wc-block-components-address-form .wc-block-components-country-input,
body.breakdance.woocommerce-checkout .wc-block-components-address-form .wc-block-components-state-input {
	margin-top: 12px;
}
body.breakdance.woocommerce-checkout .wc-block-components-address-form .wc-block-components-country-input .wc-blocks-components-select,
body.breakdance.woocommerce-checkout .wc-block-components-address-form .wc-block-components-state-input .wc-blocks-components-select {
	margin-top: 0;
}

/* Floating-label colour (figma .checkout-field__label — muted) */
body.breakdance.woocommerce-checkout .wc-block-components-text-input label,
body.breakdance.woocommerce-checkout .wc-block-components-select label {
	color: var(--neutral-400);
	font-family: var(--font);
}
/* Active / filled label sits on a white chip — keep it readable */
body.breakdance.woocommerce-checkout .wc-block-components-text-input.is-active label {
	color: var(--neutral-500);
}

/* Validation errors — design-system red, not WC default */
body.breakdance.woocommerce-checkout .wc-block-components-validation-error {
	color: var(--red-600);
	font-family: var(--font);
}
body.breakdance.woocommerce-checkout .wc-block-components-text-input.has-error input,
body.breakdance.woocommerce-checkout .wc-block-components-text-input.has-error input:hover,
body.breakdance.woocommerce-checkout .wc-block-components-text-input.has-error input:focus {
	border-color: var(--red-600);
}

/* Checkboxes / radios — neutral accent (figma .pay-option__radio accent-color) */
body.breakdance.woocommerce-checkout .wc-block-components-checkbox__input,
body.breakdance.woocommerce-checkout .wc-block-components-radio-control__input {
	accent-color: var(--neutral-900);
}
body.breakdance.woocommerce-checkout .wc-block-components-checkbox__input:checked {
	background: var(--neutral-900);
	border-color: var(--neutral-900);
}
body.breakdance.woocommerce-checkout .wc-block-components-checkbox__mark {
	fill: var(--neutral-0);
}
body.breakdance.woocommerce-checkout .wc-block-components-checkbox__label,
body.breakdance.woocommerce-checkout .wc-block-components-radio-control__label {
	color: var(--neutral-900);
	font-family: var(--font);
	font-weight: 500;
}
body.breakdance.woocommerce-checkout .wc-block-components-radio-control__secondary-label,
body.breakdance.woocommerce-checkout .wc-block-components-radio-control__description,
body.breakdance.woocommerce-checkout .wc-block-components-radio-control__secondary-description {
	color: var(--neutral-400);
	font-family: var(--font);
}

/* Shipping / payment option cards (figma .pay-option border + radius) */
body.breakdance.woocommerce-checkout .wc-block-components-radio-control-accordion-option,
body.breakdance.woocommerce-checkout .wc-block-components-radio-control__option {
	border-radius: var(--radius);
	border-color: var(--neutral-200);
}
body.breakdance.woocommerce-checkout .wc-block-components-radio-control__option-checked,
body.breakdance.woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked,
body.breakdance.woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--neutral-900);
	box-shadow: inset 0 0 0 1px var(--neutral-900);
}

/* Mollie issuer picker (KBC/CBC "Select your bank") — Mollie renders a bare
   <p> + native <select> inside `.mollie-payment-method-container`, ignoring
   the checkout field system. Restyle both to match the other checkout fields
   (white box, 1px --neutral-200 border, --radius, --font). The select gets
   `appearance: none` + an inline chevron since there is no wrapper element
   to hang WC's arrow on. */
/* The accordion content pads `0 16px 16px` — top 0 — so the container must
   bring its own top gap or the label glues to the selected-option row. */
body.breakdance.woocommerce-checkout .mollie-payment-method-container {
	margin-top: 1rem;
}
body.breakdance.woocommerce-checkout .mollie-payment-method-container p {
	font-family: var(--font);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--neutral-500);
	margin: 0 0 0.5rem;
}
body.breakdance.woocommerce-checkout .mollie-payment-method-container select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--neutral-900);
	background-color: var(--neutral-0);
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2371717A'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1.25rem;
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius);
	padding: 0.75rem 3rem 0.75rem 1rem;
	height: auto;
	cursor: pointer;
}
body.breakdance.woocommerce-checkout .mollie-payment-method-container select:focus {
	border-color: var(--neutral-900);
	box-shadow: 0 0 0 1px var(--neutral-900);
	outline: none;
}

/* Custom shipping-method tiles (free / paid pickup options) */
body.breakdance.woocommerce-checkout .wc-block-checkout__shipping-method-option {
	border-radius: var(--radius);
	border-color: var(--neutral-200);
}
body.breakdance.woocommerce-checkout .wc-block-checkout__shipping-method-option--selected {
	border-color: var(--neutral-900);
	box-shadow: inset 0 0 0 1px var(--neutral-900);
}
body.breakdance.woocommerce-checkout .wc-block-checkout__shipping-method-option-title {
	color: var(--neutral-900);
	font-weight: 600;
	font-family: var(--font);
}
body.breakdance.woocommerce-checkout .wc-block-checkout__shipping-method-option-price {
	color: var(--neutral-500);
	font-family: var(--font);
}

/* Saved-address card (figma .checkout-review__block) */
body.breakdance.woocommerce-checkout .wc-block-components-address-card {
	border-radius: var(--radius);
}
body.breakdance.woocommerce-checkout .wc-block-components-address-card address {
	color: var(--neutral-900);
	font-family: var(--font);
	font-style: normal;
}
body.breakdance.woocommerce-checkout .wc-block-components-address-card__edit {
	color: var(--neutral-900);
	font-weight: 600;
	text-decoration: underline;
}

/* --- Checkout order summary (right column, .wc-block-checkout__sidebar) ---
   Same rounded card as the cart summary so the two pages read as one system. */
body.breakdance.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-sidebar {
	background: var(--neutral-0);
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius);
	padding: 1.5rem;
	font-family: var(--font);
}

/* Order-summary collapse heading ("Order summary" + total) */
body.breakdance.woocommerce-checkout .wc-block-components-checkout-order-summary__title,
body.breakdance.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
	color: var(--neutral-900);
	font-size: 1.5rem;
	font-weight: 600;
	font-family: var(--font);
	text-transform: none;
	letter-spacing: 0;
}
body.breakdance.woocommerce-checkout .wc-block-components-checkout-order-summary__title-price {
	color: var(--neutral-900);
	font-weight: 600;
}
body.breakdance.woocommerce-checkout .wc-block-components-checkout-order-summary__title-icon {
	fill: var(--neutral-400);
}

/* Order-summary line items (figma .checkout__summary-item) */
body.breakdance.woocommerce-checkout .wc-block-components-order-summary__content,
body.breakdance.woocommerce-checkout .wc-block-components-totals-wrapper {
	border-color: var(--neutral-200);
}
body.breakdance.woocommerce-checkout .wc-block-components-order-summary-item__image img {
	border-radius: var(--radius);
	background: var(--neutral-100);
}
body.breakdance.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-name {
	color: var(--neutral-900);
	font-size: 1rem;
	font-weight: 500;
	font-family: var(--font);
}
body.breakdance.woocommerce-checkout .wc-block-components-order-summary-item__total-price,
body.breakdance.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices {
	color: var(--neutral-500);
	font-size: 0.875rem;
	font-weight: 500;
}
body.breakdance.woocommerce-checkout .wc-block-components-order-summary-item__description,
body.breakdance.woocommerce-checkout .wc-block-components-product-metadata {
	color: var(--neutral-400);
	font-size: 0.875rem;
}
/* Quantity bubble on the summary thumbnail */
body.breakdance.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
	background: var(--neutral-900);
	color: var(--neutral-0);
	font-family: var(--font);
	font-weight: 600;
}

/* Checkout totals rows */
body.breakdance.woocommerce-checkout .wc-block-components-totals-item {
	font-size: 1rem;
	font-weight: 500;
	color: var(--neutral-500);
}
body.breakdance.woocommerce-checkout .wc-block-components-totals-item__label {
	color: var(--neutral-500);
}
body.breakdance.woocommerce-checkout .wc-block-components-totals-item__value {
	color: var(--neutral-900);
	font-weight: 500;
}
body.breakdance.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.breakdance.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--neutral-900);
	font-weight: 600;
	font-size: 1.125rem;
}

/* Coupon disclosure on checkout */
body.breakdance.woocommerce-checkout .wc-block-components-totals-coupon-link,
body.breakdance.woocommerce-checkout .wc-block-components-panel__button {
	color: var(--neutral-900);
	font-weight: 500;
	font-size: 0.875rem;
}
body.breakdance.woocommerce-checkout .wc-block-components-totals-coupon__input input[type="text"] {
	font-family: var(--font);
	color: var(--neutral-900);
	border-radius: var(--radius);
	border-color: var(--neutral-200);
}
body.breakdance.woocommerce-checkout .wc-block-components-totals-coupon__input input[type="text"]:focus {
	border-color: var(--neutral-900);
	box-shadow: 0 0 0 1px var(--neutral-900);
	outline: none;
}
body.breakdance.woocommerce-checkout .wc-block-components-chip {
	background: var(--neutral-100);
	color: var(--neutral-700);
	font-family: var(--font);
	font-weight: 500;
}

/* Terms-and-conditions row */
body.breakdance.woocommerce-checkout .wc-block-checkout__terms {
	color: var(--neutral-500);
	font-family: var(--font);
}

/* ===========================================================================
   3. PRIMARY BUTTONS  — dark pill (figma .btn--dark)
   "Proceed to Checkout", "Place Order", "Continue Shopping"
   =========================================================================== */
body.breakdance.woocommerce-cart .wc-block-cart__submit-button,
body.breakdance.woocommerce-cart .wc-block-components-button.contained,
body.breakdance.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.breakdance.woocommerce-checkout .wc-block-components-button.contained,
body.breakdance.woocommerce-order-received .woocommerce a.button,
body.breakdance.woocommerce-order-received .woocommerce button.button {
	background: var(--neutral-900);
	color: var(--neutral-0);
	font-family: var(--font);
	font-weight: 600;
	font-size: 1rem;
	border: 0;
	border-radius: var(--radius-pill);
	padding: 0.75rem 1.25rem;
	line-height: 1;
	box-shadow: none;
	transition: background-color var(--t-base) var(--ease),
	            transform var(--t-fast) var(--ease);
}
body.breakdance.woocommerce-cart .wc-block-cart__submit-button:hover,
body.breakdance.woocommerce-cart .wc-block-components-button.contained:hover,
body.breakdance.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
body.breakdance.woocommerce-checkout .wc-block-components-button.contained:hover,
body.breakdance.woocommerce-order-received .woocommerce a.button:hover,
body.breakdance.woocommerce-order-received .woocommerce button.button:hover {
	background: var(--neutral-700);
	color: var(--neutral-0);
}
body.breakdance.woocommerce-cart .wc-block-components-button.contained:active,
body.breakdance.woocommerce-checkout .wc-block-components-button.contained:active,
body.breakdance.woocommerce-checkout .wc-block-components-checkout-place-order-button:active,
body.breakdance.woocommerce-order-received .woocommerce a.button:active {
	transform: scale(0.97);
}
/* The place-order button's text + price separator + icon inherit the pill */
body.breakdance.woocommerce-checkout .wc-block-components-checkout-place-order-button__text,
body.breakdance.woocommerce-checkout .wc-block-components-checkout-place-order-button__icon {
	color: var(--neutral-0);
}
body.breakdance.woocommerce-checkout .wc-block-components-checkout-place-order-button__separator {
	background: rgba(255, 255, 255, 0.3);
}

/* Loading / disabled button state stays legible */
body.breakdance.woocommerce-cart .wc-block-components-button:disabled,
body.breakdance.woocommerce-checkout .wc-block-components-button:disabled,
body.breakdance.woocommerce-checkout .wc-block-components-checkout-place-order-button--loading {
	opacity: 0.6;
}

/* Secondary / outline buttons — "Return to cart", ghost actions (figma .btn--outline) */
body.breakdance.woocommerce-cart .wc-block-components-button.outlined,
body.breakdance.woocommerce-checkout .wc-block-components-button.outlined,
body.breakdance.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
	background: var(--neutral-0);
	color: var(--neutral-700);
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-pill);
	font-family: var(--font);
	font-weight: 600;
	box-shadow: none;
}
body.breakdance.woocommerce-cart .wc-block-components-button.outlined:hover,
body.breakdance.woocommerce-checkout .wc-block-components-button.outlined:hover,
body.breakdance.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button:hover {
	background: var(--neutral-100);
	border-color: var(--neutral-300);
	color: var(--neutral-700);
}

/* Text-style buttons — the coupon "Apply" submit.
   WooCommerce gives the coupon Apply button (.wc-block-components-totals-coupon
   __button, also a .wc-block-components-button) NO `cursor` rule of its own and
   the base .wc-block-components-button has none either, so it shows the default
   arrow on hover — `cursor: pointer` is added here. */
body.breakdance.woocommerce-cart .wc-block-components-totals-coupon__button,
body.breakdance.woocommerce-checkout .wc-block-components-totals-coupon__button {
	font-family: var(--font);
	font-weight: 600;
	color: var(--neutral-900);
	cursor: pointer;
}

/* Pointer cursor for the cart's interactive controls — the coupon "Apply"
   button, the "Add a coupon" panel toggle, the quantity +/- steppers and the
   "Remove item" button. WooCommerce already sets `cursor: pointer` on the
   quantity buttons and on `.wc-block-cart-item__remove-link:hover`; these
   selectors restate it so every clickable cart control is covered consistently
   even where WC's own rule is absent. */
body.breakdance.woocommerce-cart .wc-block-components-totals-coupon__button,
body.breakdance.woocommerce-cart .wc-block-components-panel__button,
body.breakdance.woocommerce-cart .wc-block-components-totals-coupon-link,
body.breakdance.woocommerce-cart .wc-block-components-quantity-selector__button,
body.breakdance.woocommerce-cart .wc-block-cart-item__remove-link {
	cursor: pointer;
}
body.breakdance.woocommerce-cart .wc-block-components-quantity-selector__button:disabled {
	cursor: not-allowed;
}

/* The cart cross-sells "Add to Cart" / "View product" actions use the site
   `.bss-btn` component (rendered by includes/woocommerce.php). They inherit the
   full button styling from tokens.css — see section 7 below for the only cart-
   specific tweak (full-width inside the card). */

/* ===========================================================================
   4. ORDER-RECEIVED  (classic checkout endpoint — .woocommerce-order-received)
   Centred confirmation per figma order-confirmed.html (.confirmed__*)
   =========================================================================== */
body.breakdance.woocommerce-order-received .woocommerce {
	max-width: 43.5rem;          /* figma .confirmed__wrap — 696px */
	padding-top: 2rem;
	padding-bottom: 6rem;
}

/* "Thank you. Your order has been received." banner (figma .confirmed__title) */
body.breakdance.woocommerce-order-received .woocommerce-notice--success,
body.breakdance.woocommerce-order-received p.woocommerce-thankyou-order-received {
	text-align: center;
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--neutral-900);
	background: transparent;
	border: 0;
	padding: 0 0 0.5rem;
}

/* Order meta strip (order number / date / total / payment method) */
body.breakdance.woocommerce-order-received .woocommerce-order-overview {
	list-style: none;
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius);
	background: var(--neutral-0);
}
body.breakdance.woocommerce-order-received .woocommerce-order-overview li {
	border: 0;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--neutral-400);
	text-transform: none;
	line-height: 1.4;
}
body.breakdance.woocommerce-order-received .woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.25rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--neutral-900);
}

/* Section headings ("Order details", "Billing address", …) */
body.breakdance.woocommerce-order-received .woocommerce h2,
body.breakdance.woocommerce-order-received .woocommerce h3 {
	font-family: var(--font);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--neutral-900);
	margin: 2.5rem 0 0.75rem;
}

/* Order-details + downloads tables → rounded card */
body.breakdance.woocommerce-order-received .woocommerce table.shop_table,
body.breakdance.woocommerce-order-received .woocommerce .woocommerce-table {
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-family: var(--font);
	width: 100%;
}
body.breakdance.woocommerce-order-received .woocommerce table.shop_table th,
body.breakdance.woocommerce-order-received .woocommerce table.shop_table td {
	border-color: var(--neutral-200);
	padding: 0.875rem 1rem;
	font-size: 1rem;
	color: var(--neutral-900);
}
body.breakdance.woocommerce-order-received .woocommerce table.shop_table th {
	color: var(--neutral-400);
	font-weight: 600;
	font-size: 0.875rem;
	background: var(--neutral-100);
}
body.breakdance.woocommerce-order-received .woocommerce table.shop_table tfoot th,
body.breakdance.woocommerce-order-received .woocommerce table.shop_table tfoot td {
	font-weight: 600;
	background: var(--neutral-0);
	color: var(--neutral-900);
}
body.breakdance.woocommerce-order-received .woocommerce table.shop_table .order-total td,
body.breakdance.woocommerce-order-received .woocommerce table.shop_table .order-total th {
	font-size: 1.125rem;
}
body.breakdance.woocommerce-order-received .woocommerce table.shop_table a {
	color: var(--neutral-900);
	font-weight: 500;
}
body.breakdance.woocommerce-order-received .woocommerce table.shop_table a:hover {
	text-decoration: underline;
}
/* Product-name + meta inside the order table */
body.breakdance.woocommerce-order-received .woocommerce td.product-name .wc-item-meta,
body.breakdance.woocommerce-order-received .woocommerce td.product-name .wc-item-meta li {
	color: var(--neutral-400);
	font-size: 0.875rem;
}

/* Billing / shipping address cards (figma .confirmed__block) */
body.breakdance.woocommerce-order-received .woocommerce .woocommerce-customer-details {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
body.breakdance.woocommerce-order-received .woocommerce .woocommerce-customer-details address {
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--neutral-500);
	background: var(--neutral-0);
}
body.breakdance.woocommerce-order-received .woocommerce .woocommerce-customer-details address p {
	margin: 0.5rem 0 0;
}

/* Downloads / actions buttons sit centred per the figma confirmation column */
body.breakdance.woocommerce-order-received .woocommerce-order .woocommerce-bacs-bank-details {
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	background: var(--neutral-0);
	list-style: none;
}

/* ===========================================================================
   5. EMPTY CART / EMPTY CHECKOUT
   =========================================================================== */
body.breakdance.woocommerce-cart .wc-block-cart__empty-cart__title,
body.breakdance.woocommerce-cart .with-empty-cart-icon {
	font-family: var(--font);
	font-weight: 600;
	color: var(--neutral-900);
}
body.breakdance.woocommerce-checkout .wc-block-checkout-empty__title {
	font-family: var(--font);
	font-weight: 600;
	color: var(--neutral-900);
}
body.breakdance.woocommerce-checkout .wc-block-checkout-empty__description {
	color: var(--neutral-500);
	font-family: var(--font);
}

/* Store notices / error banners — keep WC's semantic colours but Inter type */
body.breakdance.woocommerce-cart .wc-block-components-notice-banner,
body.breakdance.woocommerce-checkout .wc-block-components-notice-banner {
	font-family: var(--font);
	border-radius: var(--radius);
}

/* ===========================================================================
   6. CART CROSS-SELLS  (.bss-cart-cross-sells)
   ---------------------------------------------------------------------------
   WooCommerce's default cart cross-sells block (`woocommerce/product-collection`
   / cross-sells) is suppressed in includes/woocommerce.php; this section is the
   site's own replacement, appended after the cart block as `.bss-cart-cross-
   sells` with each product rendered as a real `.bss-card.bss-card--product`
   card (the same component the ProductGrid element and PDP "Related products"
   use — visuals come from tokens.css). Here we only frame the section to the
   cart width and lay the cards out in a responsive grid. The card surface,
   thumbnail, name / brand / price typography and the `.bss-btn` action are all
   inherited from tokens.css — nothing is re-skinned.
   =========================================================================== */
body.breakdance.woocommerce-cart .bss-cart-cross-sells {
	/* Full-width like the cart title so the separator line spans the whole
	   header width. Figma: 4rem from the cart block down to the line, then
	   4rem from the line down to the "You may also like" heading. */
	align-self: stretch;
	margin: 4rem 0 0;
	padding-top: 4rem;
	border-top: 1px solid var(--neutral-200);
}
/* The heading + card grid stay capped to the cart content width and aligned
   with the cart block above. */
body.breakdance.woocommerce-cart .bss-cart-cross-sells__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	/* Gutter comes from .section-container — see the cart block rule above. */
}
body.breakdance.woocommerce-cart .bss-cart-cross-sells__title {
	font-family: var(--font);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--neutral-900);
	margin: 0 0 1.5rem;
}
body.breakdance.woocommerce-cart .bss-cart-cross-sells__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
}
/* The cross-sell product card has no border — figma shows a plain card. */
/* The card link wraps thumbnail + body; strip default link styling so the
   card looks identical to the ProductGrid card. */
body.breakdance.woocommerce-cart .bss-cart-cross-sells__link {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	text-decoration: none;
	color: inherit;
}
body.breakdance.woocommerce-cart .bss-cart-cross-sells__link:hover .bss-card__name {
	text-decoration: underline;
}
/* The add-to-cart action sits at the foot of the card. */
body.breakdance.woocommerce-cart .bss-cart-cross-sells__add {
	margin-top: auto;
}

/* The cart cross-sell quote banner uses the shared .bss-quote-banner
   component (tokens.css) — the same one the PDP related grid uses. */

/* ===========================================================================
   7. RESPONSIVE — WC Blocks ships its own breakpoints; only nudge the
   confirmation heading + section headings down on small phones and reflow the
   cross-sells grid.
   =========================================================================== */
@media (max-width: 64rem) {
	body.breakdance.woocommerce-cart .bss-cart-cross-sells__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	body.breakdance.woocommerce-order-received .woocommerce-notice--success,
	body.breakdance.woocommerce-order-received p.woocommerce-thankyou-order-received {
		font-size: 1.375rem;
	}
	body.breakdance.woocommerce-order-received .woocommerce h2,
	body.breakdance.woocommerce-order-received .woocommerce h3 {
		font-size: 1.25rem;
	}
	body.breakdance.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-sidebar {
		padding: 1.25rem;
	}
	body.breakdance.woocommerce-cart .bss-cart-cross-sells__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	body.breakdance.woocommerce-cart .bss-cart-cross-sells__title {
		font-size: 1.25rem;
	}
}