/* ================================================================== *
 * MINI-CART DRAWER
 *
 * Targets the Woo block mini-cart (woocommerce/mini-cart).
 * Structure: .wc-block-mini-cart__drawer contains title, scrollable
 * items area, and sticky footer with subtotal + two action buttons.
 * NOT scoped to .nou-page-cart — mini-cart renders on ALL pages.
 * ================================================================== */

.wc-block-mini-cart__drawer {
	font-family: var(--wp--preset--font-family--primary);
}

/* --- Title: "Your cart (items: N)" ---
 *
 * Woo renders the title as <h2.wc-block-mini-cart__title> holding two inner
 * blocks: title-label and title-items-counter. The close button is NOT in here
 * — it is absolutely positioned against the contents wrapper; see its own rule
 * below.
 *
 * Design source: design-lab/css/wf-c-cart.css `.wc-block-mini-cart__title`.
 */

.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
	display: flex;
	align-items: center;
	gap: 6px;
	/* Woo ships `h2.wc-block-mini-cart__title { margin: 16px 16px -32px }` for a
	   scroll-fade header: the side margins inset the heading and the negative
	   bottom margin lets the items list slide underneath it. Left alone, the
	   heading text lands 16px right of every other line in the drawer and the
	   list overlaps it by 32px. This layout uses a fixed header with a hard
	   rule instead, so the margin is zeroed — 0-2-0 here beats Woo's 0-1-1. */
	margin: 0;
	/* Same fade, second half: Woo masks the bottom 24px of the heading to
	   transparent. That is 24px of a 51px box, so it swallows the border-bottom
	   below and the divider simply never appears. */
	mask-image: none;
	-webkit-mask-image: none;
	padding: 18px 20px;
	border-bottom: 1px solid var(--wp--custom--line--soft);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

/* Counter reads one step quieter than the label it belongs to. neutral-600 is
 * the lightest grey still clearing 4.5:1 on the page background.
 *
 * Target the counter block by name, NOT a bare `span`. Woo wraps BOTH children
 * of the title in spans — `…-title-label-block` and `…-title-items-counter-
 * block` — so `.wc-block-mini-cart__title span` greys out "Your cart" as well
 * and the two-tone heading collapses into one flat grey line. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__title .wp-block-woocommerce-mini-cart-title-items-counter-block {
	color: var(--wp--custom--neutral--600);
}

/* Woo also ships `h2.wc-block-mini-cart__title span:first-child { margin-right:
 * 8px }`. That margin stacks on top of this container's `gap: 6px`, so the live
 * heading reads "Your cart" then 14px of air then "(3 items)" while the
 * wireframe shows 6px. Zeroing it hands spacing back to `gap` alone, which is
 * the single knob the design specifies. Woo's selector is 0-1-2 (element +
 * class + pseudo-class); this chain is 0-3-0, so it wins outright. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__title .wp-block-woocommerce-mini-cart-title-label-block {
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

/* Close button — 32px touch target, above the WCAG 2.5.8 minimum of 24px.
 *
 * The close is NOT a child of the title. Woo renders it as
 * `button.wc-block-components-button.wc-block-components-drawer__close` inside
 * `.wc-block-components-drawer__close-wrapper`, `position: absolute` against
 * `.wp-block-woocommerce-mini-cart-contents`, pinned `top/right: 12px`. So
 * `.wc-block-mini-cart__title .components-button` (what this file targeted
 * before) matches nothing, and `margin-left: auto` — a flex-item property —
 * cannot place it either. It is positioned with `top`/`right` instead.
 *
 * Woo's own rule carries `margin: -1em` with `padding: 1em !important`, which
 * inflates the 24px glyph to a 56px box overhanging the drawer edge. Both are
 * reset so the visible box equals the touch target. The padding reset needs
 * `!important` to answer Woo's own — and without it the 32px `width` is
 * ignored too: under `box-sizing: border-box` a 16px padding on each side plus
 * the 1px borders floors the box at 34px, so it silently renders 34 not 32.
 * `.wc-block-components-button` is in the chain to outrank Woo's
 * `.wc-block-components-button.wc-block-components-drawer__close` (0-2-0) —
 * this ties at 0-3-0 and wins on source order.
 *
 * `background` needs `!important` for the same reason: Woo declares
 * `background: transparent !important` on that rule.
 *
 * `top`/`right` centre it in the 51px header: (51 - 32) / 2 = 9.5, and the
 * right edge lines up with the header's own 20px padding. Woo's 12px/12px
 * would sit high and inside of that, off-axis from the title text. */
.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close {
	display: grid;
	place-items: center;
	top: 9.5px;
	right: 20px;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0 !important;
	border: 1px solid var(--wp--custom--line--soft);
	border-radius: var(--wp--custom--radius--xs);
	background: none !important;
	opacity: 1;
	/* `!important` here answers Woo's `color: inherit !important` on the same
	   rule — without it the glyph inherits the title's contrast tone instead of
	   the muted n-700 the wireframe specifies, and the X reads as loud as the
	   heading next to it. The SVG is `fill: currentcolor`, so this is what
	   colours it. */
	color: var(--wp--custom--neutral--700) !important;
	cursor: pointer;
}

/* Woo's glyph is a 24px SVG; scale it down to sit inside the 32px box. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close:hover {
	border-color: var(--wp--custom--line--strong);
	color: var(--wp--preset--color--contrast) !important;
}

/* Woo always renders the notices container above the title, even with nothing
   in it, and gives it `margin: 16px 48px 0 16px`. Empty it is 0px tall but the
   margin still applies, so the header sits 16px down from the drawer edge with
   a bare white band above it. Collapse the margin only while it holds no
   notice — a real one still gets its spacing.

   `:not(:has(> *))`, not `:empty`: Woo leaves a newline text node inside the
   container, and `:empty` rejects any node at all, including whitespace. This
   tests for element children, which is the actual question. It adds no weight
   either — `:not()`/`:has()` inherit their argument's specificity and `*` is
   zero — so `.wp-block-woocommerce-mini-cart-contents` is in the chain to tie
   Woo's own 0-3-0 and win on source order. */
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents .wc-block-components-notices:not(:has(> *)) {
	margin: 0;
}

/* --- Scrollable items area --- */

.wc-block-mini-cart__items {
	flex: 1;
	overflow-y: auto;
	padding: 4px 20px;
}

/* --- Product rows ---
 *
 * Woo emits each row as a <tr> with three <td>: image, product, total. Left as
 * table layout the money column sizes itself from the table algorithm and the
 * thumbnail column collapses to the image's intrinsic width, so the row cannot
 * be measured against the drawer's 20px gutters. Overriding to grid gives the
 * three cells explicit widths.
 *
 * `auto` on the third column — not `1fr`, not a fixed width. The price is the
 * only element in the row whose width is content-driven and must never wrap
 * ("$1,180.00" is wider than "$59.00"), so it takes exactly what it needs and
 * the product cell absorbs the remainder via `minmax(0, 1fr)`. The `minmax(0,` is
 * load-bearing: a bare `1fr` has an automatic minimum of the content's min-content
 * width, so a long product name would push the price out of the drawer instead
 * of wrapping.
 *
 * `align-items: start` — without it the grid stretches every cell to the tallest
 * row height, and the price cell's `text-align: right` then centres the money
 * vertically against a two-line product name. The price must sit on the name's
 * first line.
 *
 * WHY THE SELECTORS BELOW REPEAT WOO'S FULL DESCENDANT CHAIN
 * Woo scopes its own cart-row rules through the table and the row, and in the
 * drawer also through the responsive container classes. Measured in Woo 10.7's
 * mini-cart-contents.css, the rules this file has to outrank:
 *
 *   table.wc-block-cart-items .wc-block-cart-items__row
 *     .wc-block-cart-item__prices  { display:flex }                    0-3-1
 *     .wc-block-cart-item__wrap    { gap:4px }                         0-3-1
 *     .wc-block-components-product-name { line-height:1.4;
 *                                    max-width:max-content }           0-3-1
 *     .wc-block-cart-item__image img { width:100% }                    0-3-1
 *   .is-mobile table.wc-block-cart-items .wc-block-cart-items__row
 *                                  { grid-template-columns:80px 132px } 0-3-1
 *     .wc-block-cart-item__image   { padding-right:16px }              0-4-1
 *   table.wc-block-cart-items .wc-block-cart-items__row
 *     .wc-block-cart-item__quantity .wc-block-cart-item__remove-link
 *                                  { display:inline; height:24px }     0-4-1
 *
 * `is-mobile` IS present on the frontend. Measured with the drawer open on a
 * 1440px desktop viewport, the element is `wc-block-mini-cart__drawer
 * wc-block-components-drawer is-mobile` — the drawer component adds it at
 * runtime. Grepping the JS bundle finds the string only inside the editor
 * `edit:()` callback and is misleading; "mobile" describes the drawer's narrow
 * column, not the device.
 *
 * So a plain `.wc-block-mini-cart__drawer .x` (0-2-0) loses every one of the
 * above. Prefixing `.wc-block-mini-cart__drawer` onto Woo's own chain puts these
 * rules one class ahead of whichever Woo rule they answer. Drop the chain and
 * the drawer silently reverts: the row falls back to Woo's 2-column grid, the
 * line total lands on top of the product name, the unit price un-hides (giving
 * two prices per line), and the thumbnail renders at 64px — 80px column minus
 * Woo's 16px padding-right.
 *
 * Design source: design-lab/css/wf-c-cart.css `.wc-block-cart-items__row`.
 */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	grid-template-areas: "image product total";
	align-items: start;
	gap: 4px 12px;
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--custom--line--soft);
}

.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row:last-child {
	border-bottom: 0;
}

/* Table cells carry Woo's own padding/borders; the grid owns spacing now.
 *
 * This chain is 0-3-2 and does NOT cover every cell on its own: Woo declares
 * `…__row .wc-block-cart-item__product { padding: 0 16px 0 0 }` at 0-4-1, which
 * outranks it. The product cell is zeroed by its own rule further down, which
 * matches that 0-4-1 chain and wins on source order. Delete the `padding: 0`
 * there and 16px of right padding comes back on that one cell only. */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row > td {
	padding: 0;
	border: 0;
	vertical-align: top;
}

/* Product image — 72px thumbnail, cropped 16:10 like the catalog cards.
   `object-position: top` keeps the top of a tall screenshot visible instead of
   centring on its middle, which for a UI screenshot is usually empty canvas.
   `padding-right: 0` undoes Woo's 16px (declared at 0-4-1, hence the full
   chain here); the grid `gap` provides that spacing now. */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
	grid-area: image;
	padding-right: 0;
}

/* Woo emits TWIN nodes for the thumbnail and the product name: a bare
   <img>/<span> used when the product is hidden from the catalog, and an
   <a>-wrapped pair for the normal case. Whichever does not apply carries the
   `hidden` attribute — Woo relies on the UA's `[hidden] { display:none }`.
   Every rule below sets `display` explicitly, which outranks that UA rule, so
   without this the inactive twin still draws: the image cell stacks to two
   thumbnails tall and the name renders twice.

   The chain below carries one more class than any rule it has to beat, so
   source order never decides it. */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image [hidden],
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap [hidden] {
	display: none;
}

.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image > a,
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image > img {
	display: block;
	width: 72px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid var(--wp--custom--line--soft);
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--custom--neutral--100);
}

.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

/* Woo's `.is-mobile` rule spans this cell across columns 2-4 and puts the
   quantity bar on its own grid row; the grid-area assignment overrides both.
   The `padding: 0` is not redundant with the `> td` rule above — see the note
   there; this is the only chain heavy enough to beat Woo's 0-4-1 declaration. */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
	grid-area: product;
	min-width: 0;
	padding: 0;
}

/* Name, then the quantity/remove control bar, stacked with one gap value.
   Woo's own markup puts several sibling divs here; a flex column means the
   hidden ones (unit price, metadata) leave no residual gap when removed.
   Woo declares `gap:4px` on this element at 0-3-1, so the chain is required. */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Product name — `line-height: 1.35` is matched by the line-total rule below so
   both first-line boxes are the same height and the money aligns with the name.
   `max-width: none` undoes Woo's `max-content`, which would otherwise let a long
   name size the cell instead of wrapping inside it. */
/* Literal 14px, not a preset token. theme.json's scale jumps x-small 16 →
   small 18 with nothing between; `--small` renders the name at 18px, which in
   a 400px drawer crowds the line total and pushes most names onto two lines.
   The drawer's UI type (11/12/13/22) already sits below the content scale for
   the same reason. */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	display: block;
	max-width: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:hover {
	color: var(--wp--preset--color--primary);
}

/* Product metadata / short description — ẩn trong mini-cart, không đủ chỗ */
.wc-block-mini-cart__drawer .wc-block-components-product-metadata {
	display: none;
}

/* Hide the per-item unit price in the drawer — keep only the line total,
   which is quantity-aware. Both slots share .wc-block-components-product-price,
   so the unit-price container must be hidden explicitly. Woo sets
   `display:flex` on it at 0-3-1; without the full chain the unit price stays
   visible and every line shows its price twice. */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices {
	display: none;
}

/* Line total price — the ONE price shown per row.
   `line-height: 1.35` mirrors the product name so both first-line boxes match
   and the money sits on the name's baseline, not below it. */
/* Woo ships this cell as `display:flex; justify-content:flex-end`, so `text-align`
   would be a no-op on the price box. Restate the flex end-alignment here instead
   of relying on Woo's rule staying put — the intent is "money hugs the right
   edge", and that should be readable in this file. */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	grid-area: total;
	display: flex;
	justify-content: flex-end;
}

.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--wp--preset--color--contrast);
}

/* --- Quantity + remove control bar ---
 *
 * WHY `gap`, NOT `justify-content: space-between`
 * Tried space-between to push the trash icon to the row's right edge. It cannot
 * work: this flex container lives inside the `product` grid cell, so the slack
 * it distributes is the cell's, not the row's. Measured in the wireframe at
 * 400px: the trash landed at x=1201 while the line price ended at x=1260 — a
 * 59px miss, which reads worse than an honest gap because it looks *almost*
 * aligned. Woo renders the drawer through React, so the theme cannot move the
 * remove button out of the product cell to fix this properly. `gap: 12px`
 * (Woo's own shipped value) keeps the stepper and trash as one deliberate
 * cluster instead of a near-miss.
 */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
	display: flex;
	align-items: center;
	gap: 12px;
	grid-column-start: auto;
	grid-row-start: auto;
	padding-right: 0;
	vertical-align: baseline;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	/* Woo hardcodes `width: 107px`, sized for ITS 3-part box. The drawer's is
	   34 + 40 + 34 + 2px of border = 110px, so the right edge of the `+` stepper
	   would be clipped by `overflow: hidden`. */
	width: auto;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--xs);
}

/* Woo's markup order is input → minus → plus, which renders as [1][−][+].
   `order` restores the conventional [−][1][+] without touching the DOM. */
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button--minus {
	order: 1;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button--plus {
	order: 3;
}

/* 34px steppers — comfortably past the WCAG 2.5.8 minimum of 24px, and large
   enough to hit on a phone without the row growing taller than the thumbnail.
   Woo's `min-width: 30px` sits on `.wc-block-components-quantity-selector
   .wc-block-components-quantity-selector__button` (0-2-0) and would win the
   width battle on a tie, so this selector repeats the parent class too. */
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	display: grid;
	place-items: center;
	width: 34px;
	min-width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	line-height: 1;
	opacity: 1;
	color: var(--wp--custom--neutral--700);
	cursor: pointer;
	transition: background-color 160ms var(--wp--custom--easing--base);
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
	background: var(--wp--custom--neutral--100);
	color: var(--wp--preset--color--contrast);
}

/* Woo styles this element as `.wc-block-components-quantity-selector
   input.wc-block-components-quantity-selector__input` (0-2-1), which beats a
   plain `.drawer .input` (0-2-0) on every property it declares — including
   `order:2`, `font-size:--small` and `padding:.4em 0`. Matching its
   `input.`-qualified chain and prefixing the drawer puts these one class ahead.
   Without it the count renders at 14px in a .4em box instead of the 12px mono
   figure the steppers are sized around. */
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	order: 2;
	width: 40px;
	min-width: 40px;
	flex: 0 0 auto;
	padding: 7px 0;
	border: 0;
	border-inline: 1px solid var(--wp--custom--line--soft);
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--wp--preset--color--contrast);
	appearance: textfield;
}

/* The native number spinners duplicate the −/+ buttons and break the 40px box. */
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

/* Remove button — trash icon, same 34px box as the steppers so the control bar
   reads as one row of equal-height targets. The transparent resting border
   reserves the hover border's space, so nothing shifts on hover.
   Woo declares `display:inline; height:24px; text-decoration:underline` at
   0-4-1 via `…__row .wc-block-cart-item__quantity .…__remove-link`, so this
   selector matches that chain and adds the drawer class on top. */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--xs);
	background: none;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	color: var(--wp--custom--neutral--600);
	cursor: pointer;
	transition: color 160ms var(--wp--custom--easing--base),
		border-color 160ms var(--wp--custom--easing--base);
}

.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
	border-color: var(--wp--custom--line--strong);
	color: #b42318;
}

.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link svg {
	display: block;
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* --- Footer: subtotal + tax note + two buttons --- */

.wc-block-mini-cart__footer {
	padding: 18px 20px;
	border-top: 1px solid var(--wp--custom--line--strong);
	background: var(--wp--custom--surface--soft);
}

/* Subtotal line */
.wc-block-mini-cart__footer-subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
}

.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--600);
}

.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 22px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--contrast);
}

/* "Discounts calculated at checkout." — the note under the subtotal.
 *
 * Woo renders it as a THIRD CHILD of `.wc-block-mini-cart__footer-subtotal`
 * (`.wc-block-components-totals-item__description`), not as a sibling of it and
 * not under `.wc-block-mini-cart__tax-label` — that class belongs to the small
 * tax note on the header button and never appears in the footer. The subtotal
 * row is `flex-wrap: wrap`, so the note wraps onto its own full-width line
 * beneath the label/value pair; `width: 100%` (from Woo) is what forces that
 * break, and removing it would drag the note up onto the price line.
 *
 * Woo sizes it `var(--wp--preset--font-size--x-small, calc(--small × .875))`.
 * The fallback assumes ~12px, but this theme's `--x-small` token is 16px, so
 * without a rule here the note renders at 16px in the body font — larger than
 * the $22 subtotal's own label and visibly heavier than the wireframe.
 *
 * The selector mirrors Woo's own chain
 * (`.wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-
 * cart__footer-subtotal .…__description`, 0-4-0) so the weights tie and this
 * sheet — enqueued after Woo's — wins on source order. A shorter selector loses.
 *
 * `font-weight` is pinned because Woo sets 600 on the subtotal row itself and
 * the note would otherwise inherit it. */
.wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description {
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--base);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	color: var(--wp--custom--neutral--600);
}

/* Two action buttons side-by-side.
 *
 * NOT `1fr 1fr`. Checkout is the primary path out of the drawer and gets 1.4fr,
 * so the visual weight matches the intent instead of presenting "view cart" and
 * "checkout" as equal choices. `minmax(0,` on both tracks keeps a long
 * translated label from overflowing the drawer instead of wrapping.
 *
 * The `.wc-block-mini-cart__footer` prefix is required: Woo declares
 * `.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions
 * { display:flex; gap:16px }` at 0-2-0, which outranks a bare class here. Drop
 * it and the grid never applies — the two buttons fall back to Woo's
 * `flex-grow:1` and render at near-equal width, losing the checkout emphasis. */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 10px;
	margin-top: 14px;
}

/* Below ~380px two mono uppercase labels cannot both fit on one line; stacking
   is better than shrinking the type past legibility. */
@media (max-width: 380px) {
	.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* "View my cart" — outline button.
 *
 * The class is ON the <a>, not on a wrapper. Woo renders
 * `<a class="wc-block-components-button … wp-block-woocommerce-mini-cart-cart-
 * button-block">`, so a descendant selector (`…-cart-button-block a`) matches
 * nothing and every declaration below silently does not apply — the button
 * falls back to Woo's own `.wc-block-components-button` styling and renders as
 * Inter 16px sentence-case instead of the mono 11px uppercase this file
 * specifies. The `.wc-block-mini-cart__footer-actions` prefix keeps this ahead
 * of Woo's own button rules.
 *
 * `.wc-block-components-button` is included in the chain so this outranks
 * Woo's `.wc-block-components-button{font-size:…}`, which is otherwise equal
 * weight and would win on source order for the properties it declares. */
.wc-block-mini-cart__footer-actions a.wp-block-woocommerce-mini-cart-cart-button-block,
.wc-block-mini-cart__footer-actions .wc-block-mini-cart__shopping-button a {
	display: block;
	padding: 12px 16px;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--xs);
	background: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: border-color 180ms var(--wp--custom--easing--base);
}

.wc-block-mini-cart__footer-actions a.wp-block-woocommerce-mini-cart-cart-button-block:hover,
.wc-block-mini-cart__footer-actions .wc-block-mini-cart__shopping-button a:hover {
	border-color: var(--wp--preset--color--primary);
}

/* "Go to checkout" — filled button. Same class-on-the-anchor note as above. */
.wc-block-mini-cart__footer-actions a.wp-block-woocommerce-mini-cart-checkout-button-block {
	display: block;
	padding: 12px 16px;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--wp--preset--color--base);
	transition: background-color 180ms var(--wp--custom--easing--base);
}

.wc-block-mini-cart__footer-actions a.wp-block-woocommerce-mini-cart-checkout-button-block:hover {
	background: var(--wp--preset--color--secondary);
}

/* Woo wraps each label in `<div class="wc-block-components-button__text">`,
   which is where its own font-size lands. Inherit so the anchor rules above
   are what decide the type. */
.wc-block-mini-cart__footer-actions .wc-block-components-button__text {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	line-height: inherit;
}

/* --- Mini-cart button in header (icon + badge) --- */

.wc-block-mini-cart__button {
	position: relative;
	background: none;
	border: 0;
	padding: 6px;
	cursor: pointer;
	color: var(--wp--preset--color--contrast);
}

/*
 * OPEN STATE — drawer is showing, button remains visually highlighted.
 *
 * Design source: design-lab/wf-c-base.css `.wf-c-cartbtn[aria-expanded="true"]`.
 * Wireframe measurement: hover uses 6% neutral-900 background, the open state
 * uses 10% so the button reads as "pressed" rather than "being hovered".
 *
 * Without this rule, the moment the drawer opens the button snaps back to its
 * resting state. aria-expanded="true" is correct for AT but the visual signal
 * is gone — the user loses track of what they just activated.
 *
 * HOW WOO SIGNALS THE OPEN STATE
 * The Woo block mini-cart uses the WordPress Interactivity API. The button
 * itself never receives aria-expanded — instead the overlay's class list
 * changes from --is-hidden to --with-slide-in. Measured on Woo 10.7:
 *   closed: .wc-block-components-drawer__screen-overlay--is-hidden
 *   open:   .wc-block-components-drawer__screen-overlay--with-slide-in
 *
 * CSS :has() is the only pure-CSS way to reach a sibling element in a
 * different part of the DOM. The overlay is a direct child of <body>; the
 * button is inside .nou-catalog-header. body:has(overlay-open) then
 * descends to the button — a forward-compat pattern that survives Woo
 * structural changes as long as both elements remain in the same document.
 *
 * :has() is supported in all browsers released since mid-2023 (Chrome 105+,
 * Safari 15.4+, Firefox 121+). On older browsers the rule is silently ignored
 * and the button shows resting state while the drawer is open — acceptable
 * graceful degradation.
 *
 * Scoped to .nou-catalog-header to avoid affecting mini-cart buttons that
 * appear in other contexts (e.g. a floating cart widget from a third-party
 * plugin). catalog.css owns the 6% hover rule on the same selector, so both
 * rules live in sister files — easier to compare and maintain together.
 *
 * Not in catalog.css because: catalog.css handles the button's layout and
 * hover chrome (positioning, icon size, badge geometry) — those rules do not
 * depend on WooCommerce being active. This file handles drawer behaviour, which
 * is WooCommerce-specific and loaded globally via nouthemes_mini_cart_styles().
 */
body:has(.wc-block-components-drawer__screen-overlay--with-slide-in)
.nou-catalog-header .wc-block-mini-cart__button {
	color: var(--wp--custom--neutral--900);
	background: color-mix(in srgb, var(--wp--custom--neutral--900) 10%, transparent);
}

.wc-block-mini-cart__badge {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	color: var(--wp--preset--color--base);
}

/* ================================================================== *
 * REDUCED MOTION
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.nou-page-cart .wc-block-cart__submit-button,
	.wc-block-mini-cart__shopping-button a,
	.wc-block-mini-cart__drawer .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button,
	.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
		transition: none;
	}
}