/* ==========================================================================
   Make My Theme — header.css
   ========================================================================== */

/* ── Announcement Bar ───────────────────────────────────────────────────────── */

/* Raw accent fill — one of the two accent-filled text surfaces
   (Design.md §3.5). The delivered palette is the only accent the network
   paints, so Paper text here rides the site's own accent at whatever
   contrast that accent measures; the light sites are a documented waiver. */
.announcement-bar {
    background-color: var(--accent);
    color: var(--accent-fg);
    font-size: var(--fs-14);
    text-align: center;
    padding-block: var(--sp-2);
    position: relative;
    z-index: var(--z-header);
    overflow: hidden;
    max-height: 100px;
    transition: max-height var(--dur-slow) var(--ease), opacity var(--dur-base) var(--ease), padding-block var(--dur-slow) var(--ease);
}

.announcement-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
}

.announcement-bar__text {
    margin: 0;
    flex: 1;
    text-align: center;
}

.announcement-bar__text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.announcement-bar__close {
    flex-shrink: 0;
    color: inherit;
    opacity: 0.7;
    transition: opacity var(--dur-fast) var(--ease);
    padding: var(--sp-1);
    line-height: 0;
}

.announcement-bar__close:hover {
    opacity: 1;
}

.announcement-bar.is-hidden {
    max-height: 0;
    opacity: 0;
    padding-block: 0;
}


/* ── Site Header (.mm-header) ──────────────────────────────────────────────── */

/* The sticky offset every surface below the header reads. main.js overwrites
   it with the measured height; this is the no-JS default (88px min-height +
   the 1px rule). */
:root {
    --mm-header-h: 89px;
}

.mm-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    transition: box-shadow var(--dur-base) var(--ease);
}

/* Subtle shadow once scrolled past the top */
.mm-header.is-scrolled {
    box-shadow: var(--shadow-1);
}

.mm-header__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--sp-8);
    min-height: 88px;
}


/* ── Logo (.mm-logo) ───────────────────────────────────────────────────────── */

/* Lockup scale — declared on BOTH .mm-logo and .mm-logo__main on purpose.
   .mm-logo needs it as the lockup's owner; .mm-logo__main needs to be
   self-sufficient, because it is the unit anything else rendering the lockup
   will reach for. If only the parent declared it, a .mm-logo__main used on its
   own would leave every calc() below referencing an undefined custom property
   — and an invalid calc() does NOT fall back through the cascade, it makes the
   whole declaration compute to its initial value. `height` becomes `auto`, the
   device renders at whatever the surrounding flex row leaves it, and the mark
   silently comes out a different size in every instance.

   See the geometry note on .mm-logo__main for what --mm-mark-h is.

   --mm-safe is the delivered exclusion zone. Every "(Safe Space)" export in
   Branding/ sits its ink exactly 137.05 units inside the viewBox, on a device
   ink height of 233.73 — so the safe area is 0.5864x the mark's ink height, on
   all four sides, for all three lockups. (The older note below cited 114.19:
   that is only the padding the safe-space file ADDS, and misses the 22.86 the
   plain export already carries.) */
.mm-logo,
.mm-logo__main {
    --mm-mark-h: clamp(9px, calc((100vw - 2 * var(--container-pad) - 282px) / 14.880), 30px);
    --mm-lockup-fs: calc(var(--mm-mark-h) * 1.2835);
    --mm-safe: calc(var(--mm-mark-h) * 0.5864);
}

.mm-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-normal);
    font-size: var(--fs-22);
    line-height: 1;
    color: var(--ink);
    padding: 8px 0;
    text-decoration: none;
}

/* Product-logo geometry — every number below was MEASURED off the delivered
   landscape lockup (assets/images/make-my-landscape.svg), not chosen. Setting
   the wordmark live is only legitimate because it reproduces that artwork to
   the unit; see inc/multisite.php → makemy_product_lockup() for the derivation
   and tests/js/Theme/product-lockup.test.js for the pins.

   --mm-mark-h is the device's INK height. Everything else is a fixed ratio to
   it, so the whole lockup rescales from that one number:

     font-size   1.28350 x ink height   (wordmark is set at 300 units against a
                                         233.73-unit device in the lockup file)
     gap         0.26860 em             (device right edge -> wordmark origin)
     tracking   -0.03    em             (the guidelines' "kerning -30", solved
                                         off the artwork across all five gaps)
     baseline    0.11703 em above centred — the delivered wordmark does not sit
                                         on the device's optical centre.

   The mark is the DOUBLE device — the one the landscape lockup itself is built
   on, and the form the brand leads with. Both devices are the same ink height
   (233.73) and pad their ink identically, so swapping between them changes the
   width factor below and nothing else. Both also pad symmetrically (233.73 of
   279.46 units tall), so the <img> renders at 1/0.83636 = 1.19565x the wanted
   ink height. */
.mm-logo__main {
    /* The lockup is ONE LINE — it is a single typeset run, and breaking it
       turns the product logo into two stacked words. So it shrinks to fit
       instead of wrapping (.mm-lockup is nowrap, with no exceptions). On a
       phone (480px and down) it changes FORM rather than wrapping: the
       product word alone, set under the device — see the 480px block.

       At its longest ("make my wardrobe") the lockup measures 14.880 x
       --mm-mark-h: 11.889 wordmark + 2.744 device + 0.247 gap. The device term
       is its BOX (2.744), not its ink (2.548) — the SVG pads its ink 0.09780 a
       side — and the gap term is the delivered 0.345 less that same padding,
       since the two meet.

       What it must fit into, from 481px to 900px, is 100vw less both
       --container-pads, less a 282px RESERVATION:
         254px  header actions — the VAT switch with its "Ex VAT" label (98px),
                account + basket + menu (3 x 44px; search hides below 900px)
                and the 3 x 8px gaps between the four
          12px  the header grid gap (one gap: the grid drops to two tracks
                below 900px, see the responsive block)
          16px  clearance, so the lockup never sits hard against the actions
       --container-pad is read live rather than restated, because it is fluid
       itself (20px to 500px wide, 4vw after). Above 900px the expression is
       past its 30px ceiling long before it matters, so desktop is a flat 30px.
       At 481px it gives 10.7px; the 9px floor never binds on this branch.

       The 282px is a RESERVATION, not a measurement — it encodes today's
       action count, VAT label and grid gap. Change any of those (a fourth
       icon, a longer label) and this number has to change with them, or the
       header scrolls sideways on phones — which is exactly how the VAT
       switch (added after an older 200px figure) broke it. A container query
       would size off the real track instead, but the logo's track is
       content-sized, so that is circular; the vw reservation is the honest
       simple answer.

       The 16px also holds the safe area open on the right: --mm-safe peaks at
       17.59px (0.5864 x 30px), and the reserved 16px sits on top of the 12px
       grid gap (32px from 900px up), so the gap to the actions never drops
       below 28px while the mark is at full size. */
    display: inline-flex;
    align-items: center;
    /* No flex gap: the hub's lockup is a single image, and the sub-brand's
       device-to-wordmark gap is the measured 0.2686em set on .mm-lockup. */
    gap: 0;
}

/* Brand lockup, or an uploaded per-site custom logo.
   Safe space (corrected 2026-08-11): the "(Safe Space)" exports sit their ink
   137.05 units inside the viewBox — 114.19 of added padding PLUS the 22.86 the
   plain export already carries. Against the 233.73-unit device that is
   0.5864 × the mark's ink height = --mm-safe, 17.59px at full size. Left is
   covered by --container-pad (20–40px), top and bottom by the 88px header
   min-height (22px clear around the 44px hub lockup), and the icon cluster
   by the 16px reserved in --mm-mark-h. The header carries no tagline under
   the logo (dropped 2026-09-28 to give the mark the height instead); the
   44px hub lockup matches the 30px sub-brand ink height.

   Every .mm-logo__img rule is scoped under .mm-logo__main for SPECIFICITY:
   on basket, checkout and account pages WooCommerce stamps .woocommerce-page
   on <body>, and its `.woocommerce-page img { height: auto; max-width: 100% }`
   (0,1,1) outranks a bare .mm-logo__img (0,1,0). A percentage max-width inside
   this shrink-to-fit box collapses the image to 0x0 — the logo vanished. */
.mm-logo__main .mm-logo__img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 270px;
}

/* The hub's landscape lockup shrinks to fit rather than holding 44px down to
   the 480px swap: at 44px it is 267px wide, and from 481px to 572px that plus
   the header actions ran past the screen edge. Same room as the sub-brand
   lockup — 100vw less both --container-pads less the 282px reservation (see
   .mm-logo__main) — divided by the file's aspect ratio (2044.67 / 337.02 =
   6.067). It reaches the 44px cap at ~597px, so desktop is unchanged. At 481px
   it is 26.2px tall and 159px wide, clear of the 114px lockup minimum
   (Design.md §2.1); below 480px the single device takes over. */
.mm-logo__main .mm-logo__img--landscape {
    height: min(44px, calc((100vw - 2 * var(--container-pad) - 282px) / 6.067));
}

/* Landscape lockup on desktop; compact Brand Device takes over on narrow screens.
   Hub only — a sub-brand uses .mm-logo__img--mark, which is shown at every width. */
.mm-logo__main .mm-logo__img--device {
    display: none;
}

/* The sub-brand's device — sized from the ink, not the padded viewBox. */
.mm-logo__main .mm-logo__img--mark {
    height: calc(var(--mm-mark-h) * 1.19565);
    width: auto;
    max-width: none;
    flex: none;
}

/* ── Product logo (.mm-lockup) — "make my wardrobe" as one typeset run ──────
   Brand Guidelines p8: the product word takes the site's allocated colour;
   "make my" stays Coal. Typeset, not artwork — see the geometry note above. */
.mm-lockup {
    font-family: var(--font-sans);
    font-size: var(--mm-lockup-fs);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink);
    white-space: nowrap;

    /* The delivered gap is 0.2686em from the device's INK edge to the wordmark
       pen origin — but margin-left measures from the <img> BOX edge, and the
       device SVG pads its ink by 22.86 units a side (0.09780 x ink height). So
       subtract that padding back out, or the gap renders ~28% wide. */
    margin-left: calc(var(--mm-lockup-fs) * 0.2686 - var(--mm-mark-h) * 0.09780);
    /* Lift onto the delivered baseline; align-items:center alone drops it. */
    transform: translateY(-0.11703em);
}

/* letter-spacing also fires after the LAST glyph. Claw that trailing 0.03em
   back so the lockup's right edge is the ink edge, as the artwork's is. */
.mm-lockup__product {
    color: var(--accent);
    margin-right: -0.03em;
}


/* ── Primary Navigation (.mm-nav) ──────────────────────────────────────────── */

/* min-width: 0 lets the 1fr track be narrower than the menu. Without it the
   track grows to the row's full width and shoves the header actions off the
   right edge of the screen, which is what cropped the header between 900px and
   ~1400px. nav-overflow.js then moves whatever doesn't fit into "More".

   `safe center` keeps an overflowing row pinned at its start, so the no-JS
   fallback (and the frame before the script runs) clips the END of the menu
   rather than splitting the loss across both ends and cutting into Products. */
.mm-nav {
    display: flex;
    justify-content: center;
    justify-content: safe center;
    min-width: 0;
}

.mm-nav:not(.is-fitted) {
    overflow: hidden;
}

.mm-nav__list {
    display: flex;
    gap: var(--sp-1);
    list-style: none;
    padding: 0;
    margin: 0;
}

.mm-nav__list > li {
    display: block;
}

.mm-nav__list a {
    position: relative;
    display: block;
    padding: 12px 14px;
    font-size: var(--fs-14);
    font-weight: var(--fw-regular);
    color: var(--ink-soft);
    border-radius: var(--r-xs);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease);
}

.mm-nav__list a:hover {
    color: var(--ink);
}

/* Hover / active underline — one pseudo, scales in from the left on hover
   and stays fully drawn for the current page. */
.mm-nav__list > li > a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-base) var(--ease);
}

.mm-nav__list > li > a:hover::after,
.mm-nav__list > li > a:focus-visible::after,
.mm-nav__list .current-menu-item > a::after,
.mm-nav__list .current_page_item > a::after,
.mm-nav__list .current-menu-ancestor > a::after {
    transform: scaleX(1);
}

/* Active page: darker text */
.mm-nav__list .current-menu-item > a,
.mm-nav__list .current_page_item > a,
.mm-nav__list .current-menu-ancestor > a {
    color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
    .mm-nav__list > li > a::after { transition: none; }
}

/* Dropdown (depth 2+) — kept conservative, inherits old behaviour */
.mm-nav__list .menu-item-has-children {
    position: relative;
}

.mm-nav__list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    list-style: none;
    margin: 0;
    padding: var(--sp-1) 0;
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
    z-index: var(--z-raised);
}

.mm-nav__list .menu-item-has-children:hover .sub-menu,
.mm-nav__list .menu-item-has-children:focus-within .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.mm-nav__list .sub-menu a {
    padding: var(--sp-2) var(--sp-3);
    border-radius: 0;
}

/* ── "More" overflow (nav-overflow.js) ─────────────────────────────────────── */

/* Links moved into More. Also the no-JS answer for [hidden] below: the
   .mm-nav__list > li display rule out-specifies the UA's [hidden]. */
.mm-nav__list > li.is-overflow,
.mm-nav__more[hidden],
.mm-nav__more-list[hidden] {
    display: none;
}

.mm-nav__more {
    position: relative;
}

/* Reads as one more nav link: same padding, size, colour and underline. */
.mm-nav__more-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 12px 14px;
    background: none;
    border: 0;
    border-radius: var(--r-xs);
    font: inherit;
    font-size: var(--fs-14);
    font-weight: var(--fw-regular);
    color: var(--ink-soft);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease);
}

.mm-nav__more-btn:hover,
.mm-nav__more-btn[aria-expanded="true"],
.mm-nav__more-btn.is-current {
    color: var(--ink);
}

.mm-nav__more-btn svg {
    transition: transform var(--dur-fast) var(--ease);
}

.mm-nav__more-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.mm-nav__more-btn::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-base) var(--ease);
}

.mm-nav__more-btn:hover::after,
.mm-nav__more-btn:focus-visible::after,
.mm-nav__more-btn[aria-expanded="true"]::after,
.mm-nav__more-btn.is-current::after {
    transform: scaleX(1);
}

/* Same popover as the depth-2 .sub-menu above, right-aligned because More is
   always the last item and sits hard against the header actions. */
.mm-nav__more-list {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    list-style: none;
    margin: 0;
    padding: var(--sp-1) 0;
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-2);
    z-index: var(--z-raised);
}

.mm-nav__more-list a {
    padding: var(--sp-2) var(--sp-3);
    border-radius: 0;
}

.mm-nav__more-list a:hover,
.mm-nav__more-list a:focus-visible {
    color: var(--ink);
    background: var(--paper-soft);
}

@media (prefers-reduced-motion: reduce) {
    .mm-nav__more-btn,
    .mm-nav__more-btn svg,
    .mm-nav__more-btn::after { transition: none; }
}


/* ── Header Actions (.mm-header__actions) ──────────────────────────────────── */

.mm-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    justify-self: end;
}

.mm-header__divider {
    display: inline-block;
    width: 1px;
    height: 24px;
    background: var(--rule);
    margin: 0 4px;
}


/* ── Icon Button (.mm-iconbtn) — used for search, cart, hamburger ─────────── */

.mm-iconbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--h-control);
    height: var(--h-control);
    color: var(--ink-soft);
    background: none;
    border: 0;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.mm-iconbtn:hover {
    background: var(--paper-soft);
    color: var(--ink);
}

.mm-iconbtn__count {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 15px;
    padding: 2px 4px;
    background: var(--accent);
    /* --accent-fg, not Paper: this is an 11px number on the raw accent, and
       Cabinet flips the foreground to Coal because Paper on Corn is 2.05:1. */
    color: var(--accent-fg);
    font-family: var(--font-sans);
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-normal);
    line-height: 1;
    text-align: center;
    border-radius: 8px;
    pointer-events: none;
}

.mm-iconbtn__count.is-hidden,
.cart-count.is-hidden {
    display: none;
}

/* One-shot scale bump when the cart count changes (JS-triggered). */
.cart-count.is-bumping {
    animation: mm-cart-bump var(--dur-base) var(--ease);
    transform-origin: center;
}

@keyframes mm-cart-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .cart-count.is-bumping { animation: none; }
}

/* Hamburger — hidden on desktop, shown below 900px */
.mm-iconbtn--menu {
    display: none;
}


/* ── Search Overlay ─────────────────────────────────────────────────────────── */

.search-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--paper);
    z-index: var(--z-drawer);
    display: flex;
    align-items: flex-start;
    padding-top: 15vh;
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.search-overlay[hidden] {
    display: none;
}

.search-overlay__inner {
    position: relative;
    width: 100%;
}

.search-overlay__inner .search-field {
    width: 100%;
    height: auto; /* searchform.php adds .input (a fixed 44px) — the overlay field sizes to its type */
    font-size: clamp(1.5rem, 4vw, 3rem);
    border: none;
    border-bottom: 2px solid var(--ink);
    padding: var(--sp-4) 0;
    background: transparent;
    border-radius: 0;
}

.search-overlay__inner .search-field:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: none;
}

.search-overlay__inner .search-submit {
    display: none;
}

.search-overlay__close {
    position: absolute;
    top: 0;
    right: 0;
    color: var(--ink);
    padding: var(--sp-2);
    transition: color var(--dur-fast) var(--ease);
}

.search-overlay__close:hover {
    color: var(--accent);
}


/* ── Mini Cart Drawer ─────────────────────────────────────────────────────────── */

/* A card hung under the header's basket icon, not a full-height panel
   (maintainer decision, 2026-09-26, option A): it fits its contents up to
   half the screen, then the lines scroll while the subtotal and actions stay
   pinned. `--cart-drawer-top` is the header's bottom edge, measured by
   main.js as it opens, so the card clears the admin bar and announcement bar
   too. The 420px floor keeps two rows visible on a short screen. */
.cart-drawer {
    position: fixed;
    top: calc(var(--cart-drawer-top, 0px) + var(--sp-2));
    right: var(--sp-4);
    width: min(420px, calc(100vw - 2 * var(--sp-4)));
    max-height: min(
        max(50vh, 420px),
        calc(100vh - var(--cart-drawer-top, 0px) - var(--sp-6))
    );
    background-color: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--sp-2) * -1));
    transition: opacity var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease),
                visibility 0s linear var(--dur-base);
    box-shadow: var(--shadow-3);
}

.cart-drawer[hidden] {
    display: flex; /* keep flex, animate instead */
}

.cart-drawer.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease),
                visibility 0s;
}

/* Phone: the full width under the header, a gutter either side. */
@media (max-width: 600px) {
    .cart-drawer {
        right: var(--sp-2);
        width: calc(100vw - 2 * var(--sp-2));
    }
}

.cart-drawer__inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--rule);
    flex-shrink: 0;
}

/* Regular, like every display heading (§4.4) — the designer's pop-out. */
.cart-drawer__title {
    font-size: var(--fs-22);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-tight);
    margin: 0;
}

/* The designer's boxed ×: a 44px square on Rule Interactive, Ink on hover. */
.cart-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--h-control);
    height: var(--h-control);
    flex: 0 0 auto;
    border: 1px solid var(--rule-interactive);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--ink);
    transition: border-color var(--dur-fast) var(--ease);
}

.cart-drawer__close:hover {
    border-color: var(--ink);
}

.cart-drawer__close:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

/* The fragment wrapper and the template's body both stretch, so the lines
   scroll and the subtotal + actions stay pinned at the foot. */
.cart-drawer__content,
.cart-drawer .widget_shopping_cart_content,
.cart-drawer__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Rows (woocommerce/cart/mini-cart.php) ──
   The basket page's row, condensed: drawing, name + one-line summary, ×;
   then the bare stepper and the price on one line under the text. Set in
   Lexend throughout, as the basket is (Design.md §4.1). */

.cart-drawer__lines {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0 var(--sp-6);
    list-style: none;
}

.cart-drawer__line {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) var(--h-control);
    column-gap: var(--sp-4);
    padding: var(--sp-5) 0;
    border-bottom: 1px solid var(--rule);
}

.cart-drawer__drawing {
    grid-row: 1 / span 2;
    width: 72px;
    aspect-ratio: 1;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
    overflow: hidden;
}

.cart-drawer__drawing img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The basket page's "drawing pending" stripes (journey.css .mmj-drawing). */
.cart-drawer__drawing .mmj-drawing__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        var(--paper) 0 5px,
        var(--paper-soft) 5px 10px
    );
}

.cart-drawer__text {
    min-width: 0;
}

.cart-drawer__name {
    margin: 0;
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
}

.cart-drawer__meta {
    margin: 2px 0 0;
    font-size: var(--fs-13);
    line-height: var(--lh-body);
    color: var(--ink-muted);
}

/* The basket page's × (.mmj-remove): ghost until hovered, then Error. The
   44px box is pulled up so the glyph sits level with the name. */
.cart-drawer__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--h-control);
    height: var(--h-control);
    margin-top: calc(var(--sp-3) * -1);
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    font-size: var(--fs-18);
    color: var(--ink-muted);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.cart-drawer__remove:hover {
    background: var(--paper-soft);
    color: var(--err);
}

.cart-drawer__remove:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.cart-drawer__foot-row {
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-2);
}

/* The bare stepper's first glyph sits on the text column's edge. */
.cart-drawer__qty {
    margin-left: -8px;
}

.cart-drawer__qty input,
.cart-drawer__qty input:focus {
    border: 0;
    background: transparent;
    font-family: var(--font-sans);
    font-feature-settings: normal;
    letter-spacing: var(--tracking-normal);
}

/* A text link beside the row's price, not a button: 13px and underlined, and
   centred on the row by the foot row's `align-items` rather than given a
   button's height (the checkout rail's Edit basket reads the same way). */
.cart-drawer__edit {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--dur-fast) var(--ease);
}

.cart-drawer__edit:hover {
    color: var(--ink);
}

.cart-drawer__price,
.cart-drawer__total-value {
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.cart-drawer__line.is-busy .cart-drawer__foot-row {
    opacity: 0.5;
    pointer-events: none;
}

/* Inline remove confirmation — the basket page's .mmj-confirm. */
.cart-drawer__confirm {
    grid-column: 2 / -1;
    margin-top: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--paper-soft);
}

.cart-drawer__confirm[hidden] {
    display: none;
}

.cart-drawer__confirm-text {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-14);
    line-height: var(--lh-body);
}

.cart-drawer__confirm-text strong {
    font-weight: var(--fw-semibold);
}

.cart-drawer__confirm-actions {
    display: flex;
    gap: var(--sp-2);
}

/* ── Foot: subtotal, a delivery note, two actions ── */

.cart-drawer__foot {
    flex-shrink: 0;
    padding: var(--sp-5) var(--sp-6) var(--sp-6);
    border-top: 1px solid var(--rule-strong);
}

.cart-drawer__total {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    margin: 0;
    font-size: var(--fs-16);
}

.cart-drawer__note {
    margin: var(--sp-1) 0 var(--sp-5);
    font-size: var(--fs-13);
    color: var(--ink-muted);
}

.cart-drawer__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}

/* A phone-width drawer can't fit "Continue shopping" in half its width. */
@media (max-width: 420px) {
    .cart-drawer__actions {
        grid-template-columns: 1fr;
    }
}

/* ── Empty: the brand device, one line, one action ── */

.cart-drawer__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-5);
    padding: var(--sp-10) var(--sp-6);
    text-align: center;
}

.cart-drawer__mark {
    width: 128px;
    fill: var(--ink);
}

.cart-drawer__empty-text {
    margin: 0;
    font-size: var(--fs-16);
}


/* ── Mobile Nav ─────────────────────────────────────────────────────────────── */

.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: min(380px, 100vw);
    height: 100%;
    background-color: var(--paper);
    border-right: 1px solid var(--rule);
    z-index: var(--z-drawer);
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease);
    box-shadow: var(--shadow-3);
}

.mobile-nav[hidden] {
    display: block; /* keep in DOM for transitions */
}

.mobile-nav.is-open {
    transform: none;
}

.mobile-nav__inner {
    height: 100%;
    overflow-y: auto;
    padding: var(--sp-6);
}

.mobile-nav__close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    color: var(--ink);
    margin-bottom: var(--sp-8);
    transition: color var(--dur-fast) var(--ease);
}

.mobile-nav__close:hover {
    color: var(--accent);
}

.mobile-nav__menu {
    list-style: none;
}

.mobile-nav__menu li {
    border-bottom: 1px solid var(--rule);
}

.mobile-nav__menu a {
    display: block;
    padding: var(--sp-4) 0;
    font-size: var(--fs-18);
    font-weight: var(--fw-regular);
    color: var(--ink);
    transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}

.mobile-nav__menu a:hover {
    color: var(--accent);
    padding-left: var(--sp-2);
}

/* Staggered fade-in when the drawer opens. Delay only applies on open
   (via `.is-open`); on close, items fade straight out without offset. */
.mobile-nav__menu > li {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease);
}

.mobile-nav.is-open .mobile-nav__menu > li {
    opacity: 1;
    transform: none;
}

.mobile-nav.is-open .mobile-nav__menu > li:nth-child(1)  { transition-delay: 140ms; }
.mobile-nav.is-open .mobile-nav__menu > li:nth-child(2)  { transition-delay: 180ms; }
.mobile-nav.is-open .mobile-nav__menu > li:nth-child(3)  { transition-delay: 220ms; }
.mobile-nav.is-open .mobile-nav__menu > li:nth-child(4)  { transition-delay: 260ms; }
.mobile-nav.is-open .mobile-nav__menu > li:nth-child(5)  { transition-delay: 300ms; }
.mobile-nav.is-open .mobile-nav__menu > li:nth-child(6)  { transition-delay: 340ms; }
.mobile-nav.is-open .mobile-nav__menu > li:nth-child(7)  { transition-delay: 380ms; }
.mobile-nav.is-open .mobile-nav__menu > li:nth-child(n+8) { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
    .mobile-nav__menu > li {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.mobile-nav__menu .sub-menu {
    list-style: none;
    padding-left: var(--sp-4);
}

.mobile-nav__menu .sub-menu a {
    font-size: var(--fs-14);
    padding-block: var(--sp-3);
    color: var(--ink-muted);
}


/* ── VAT display switch ─────────────────────────────────────────────────────
   The switch itself — track, knob, hover, focus and the on state — is the
   plugin's shared `.core-switch` primitive (Plugin/core/assets/css/
   core-controls.css), the same one the configurator's Advanced options switch
   wears; enqueue.php makes that sheet a dep of this one. Its on state keys off
   <html data-vat="ex"> (set by the head bootstrap before paint) rather than
   aria-checked (which only lands when the deferred vat-toggle.js runs), so an
   ex visitor never sees the switch flash off — see the note in that sheet.
   Only the header's genuine divergences live here: a 32px hit target to sit
   on the header's button rung, and the short/long label swap below. */
.mm-vat-toggle {
    min-height: var(--h-btn-sm);
}

.mm-vat-toggle__short {
    display: none;
}


/* ── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    /* Nav collapses into hamburger drawer */
    .mm-nav {
        display: none;
    }

    /* Desktop-only bits of the right-side action group */
    .mm-header__actions .js-search-toggle,
    .mm-header__divider {
        display: none;
    }

    /* Hamburger appears */
    .mm-iconbtn--menu {
        display: inline-flex;
    }

    /* VAT switch keeps its place with the short label */
    .mm-vat-toggle__long {
        display: none;
    }
    .mm-vat-toggle__short {
        display: inline;
    }

    /* Two tracks, not three: with the nav gone, the third track sits empty
       but its gap stays, and on a phone that 12px came out of the right-hand
       --container-pad — the actions ended 10px from the screen edge. */
    .mm-header__inner {
        grid-template-columns: auto 1fr;
        gap: var(--sp-3);
    }
}

@media (max-width: 480px) {
    .mm-logo {
        font-size: var(--fs-18);
    }
    .mm-logo__main .mm-logo__img {
        height: 28px;
    }
    /* The sub-brand device keeps sizing off --mm-mark-h, which is already
       fluid. Re-asserted only because .mm-logo__img above would otherwise win
       on source order and pin it to 28px. */
    .mm-logo__main .mm-logo__img--mark {
        height: calc(var(--mm-mark-h) * 1.19565);
    }
    /* Landscape runs ~170px wide at 28px — too wide next to the icon cluster,
       so swap in the compact single Brand Device. It is sized on its own:
       34px tall draws 39.0px of ink width (320.71 of 366.42 units across a
       279.46-unit height), clearing the device-alone minimum of 38px ink
       width (Design.md §2.1). At 28px it drew only 32px. Don't go below 34. */
    .mm-logo__main .mm-logo__img--landscape {
        display: none;
    }
    .mm-logo__main .mm-logo__img--device {
        display: block;
        height: 34px;
    }

    /* The VAT switch stays on a phone, shortened to its footprint rather than
       its words: "Ex VAT" sets under the track, so the switch is 44px wide
       (the touch floor) instead of 98px. Height stays on the 32px button
       rung — 18px track + 3px + an 11px line fills it exactly, which is why
       the block padding goes. The knob is re-centred on the track: horizontally
       it sits either side of the switch's centre line, and vertically it moves
       up from the button's centre (16px) to the track's (9px). */
    .mm-vat-toggle {
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        min-width: var(--h-control);
        padding-block: 0;
        padding-inline: var(--sp-1);
        font-size: var(--fs-11);
        line-height: 1;
    }
    .mm-vat-toggle::before {
        order: -1;
    }
    .mm-vat-toggle::after {
        right: 50%;
        margin-top: -7px;
    }

    /* Sub-brand: the product word alone, under the device — the delivered
       PORTRAIT lockup's arrangement (device centred over the wordmark) with the
       product word in place of "make my". The one-line lockup cannot fit here:
       even at its 9px floor it is ~134px, beside 200px of actions at 375px.

       Sized off the longest product word ("wardrobe", 4.57em at -0.03em
       tracking = 5.866 x --mm-mark-h), in the room left by both
       --container-pads and a 228px reservation: 200px of actions (the 44px
       VAT switch above + 3 x 44px + 3 x 8px), the 12px grid gap and 16px of
       clearance. 15px floor: the device's ink is then 38px wide, the
       device-alone minimum (Design.md §2.1). 22px ceiling: the stack plus its
       safe area top and bottom (3.81 x --mm-mark-h) still fits the 88px header.

       No gap between the two: the portrait artwork puts the wordmark baseline
       1.2186 x ink height below the device's ink, and a line-height-1 line box
       of Lexend Deca puts its baseline 0.875em (1.1231 x ink height) down from
       its top — so the word's box starts 0.0955 below the ink, which is where
       the device's own 0.0978 padding already ends. The landscape gap and
       baseline lift are undone for the same reason: they place the word BESIDE
       the device. */
    .mm-logo__main:has(> .mm-lockup) {
        --mm-mark-h: clamp(15px, calc((100vw - 2 * var(--container-pad) - 228px) / 5.866), 22px);
        flex-direction: column;
    }
    .mm-logo__main:has(> .mm-lockup) .mm-lockup {
        margin-left: 0;
        transform: none;
    }
    /* The space after it collapses on its own: it is now the first thing on
       the line, and nowrap still collapses leading white space. */
    .mm-logo__main .mm-lockup__prefix {
        display: none;
    }
}

/* Below 360px the stacked word would push the device under its 38px minimum,
   so the device stands alone, sized into the same 228px reservation by its
   box width (2.744 x --mm-mark-h). Capped at the hub's 34px device (28.44px of
   ink); at 320px it is 18.9px of ink, 48px wide. */
@media (max-width: 359px) {
    .mm-logo__main:has(> .mm-lockup) {
        --mm-mark-h: clamp(15px, calc((100vw - 2 * var(--container-pad) - 228px) / 2.744), 28.44px);
    }
    .mm-logo__main .mm-lockup {
        display: none;
    }
}