/* ==========================================================================
   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;
}

/* The §7.10 square close (`.core-btn--close`, core-controls.css), recoloured
   for the accent fill: it takes the bar's `--accent-fg` rather than Ink
   Muted, and a wash of that same colour on hover rather than Paper Sunk. */
.announcement-bar__close {
    flex-shrink: 0;
    color: inherit;
}

.announcement-bar__close:hover {
    background: color-mix(in oklch, var(--accent-fg) 15%, transparent);
    color: inherit;
}

.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: "make my"
       over the product word, beside 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: var(--sp-3) var(--sp-4);
    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: var(--sp-4);
    right: var(--sp-4);
    bottom: var(--sp-2);
    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: var(--sp-3) var(--sp-4);
    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: var(--sp-4);
    right: var(--sp-4);
    bottom: var(--sp-2);
    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: var(--sp-2);
    right: var(--sp-2);
    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: var(--r-xs);
    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 .core-input (a 44px floor) — the overlay field sizes to its type */
    font-size: clamp(var(--fs-22), 4vw, var(--fs-48));
    border: none;
    border-bottom: 2px solid var(--ink);
    padding: var(--sp-4) 0;
    background: transparent;
    border-radius: 0;
}

/* The underline thickens 2px → 4px as the focus signal: the colour shift
   alone vanishes on the hub, whose accent is Ink (maintainer pick,
   2026-09-30, issue #452). An inset shadow adds the width without moving the
   text. */
.search-overlay__inner .search-field:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: inset 0 -2px 0 var(--accent);
}

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

/* The §7.10 square close (`.core-btn--close`); this rule only pins it. */
.search-overlay__close {
    position: absolute;
    top: 0;
    right: 0;
}


/* ── 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))
    );
    /* Paper, Rule and rung 3 come from `.core-modal-panel` (core-modal.css);
       the drawer keeps §14.1's 6px radius over the modal's 10px. */
    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);
}

.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 (width < 640px) {
    .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;
}

/* The header row, title and × are the shared modal rhythm
   (`.core-modal-header` / `-title`, `.core-btn--close` — Design.md §7.10);
   the drawer only stops the header shrinking when the lines scroll. */
.cart-drawer__header {
    flex-shrink: 0;
}

/* 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-5); /* the header's side padding, so the edges line up */
    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__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-5) 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 (width < 480px) {
    .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%;
    /* Paper, Rule and rung 3 come from `.core-modal-panel`; a full-height
       drawer is square-cornered and has no left edge to draw. */
    border-width: 0 1px 0 0;
    border-radius: 0;
    z-index: var(--z-drawer);
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease);
}

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

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

/* Header row ("Menu" + the square ×) and body are the shared modal rhythm
   (Design.md §7.10); only the body scrolls, so the × never leaves view. */
.mobile-nav__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-nav__header {
    flex-shrink: 0;
}

.mobile-nav__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.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);
}

/* The list arrives with the drawer, as one group (Design.md §6.2 — a
   per-item cascade was decoration, removed 2026-09-30). Reduced motion is
   the global reset in main.css, which lands it at its end state. */
.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__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 44px hit target so it
   shares one rung with the 44px icon buttons beside it (§5.4, inc. #340 —
   the track itself is unchanged), and the short/long label swap below. */
.mm-vat-toggle {
    min-height: var(--h-control);
}

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


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

@media (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 (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: var(--sp-1);
        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: "make my" over the product word, both beside the device
       (maintainer ruling 2026-09-30, issue #450). The one-line lockup cannot
       fit here: even at its 9px floor it is ~134px, beside 200px of actions at
       375px. So the run breaks into its two halves, stacked — each line still
       nowrap — and the device keeps its place on the left.

       The text is set at 0.9 x --mm-mark-h, not the landscape 1.2835: the two
       lines together stand beside the device, so they are sized as a block.
       0.9 is the largest ratio that still holds the device at its 38px floor
       on a 375px phone. Width, in --mm-mark-h: 2.744 device box + 0.247 gap
       (the landscape gap, unchanged — margin-left still reads --mm-lockup-fs)
       + 4.113 for "wardrobe", the widest line (4.57em x 0.9) = 7.104. It fits
       the same 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 block plus its safe area top and
       bottom still fits the 88px header.

       The baseline lift is undone: it seats a single line on the device's
       optical centre, and a two-line block centres as a block. */
    .mm-logo__main:has(> .mm-lockup) {
        --mm-mark-h: clamp(15px, calc((100vw - 2 * var(--container-pad) - 228px) / 7.104), 22px);
    }
    .mm-logo__main:has(> .mm-lockup) .mm-lockup {
        display: inline-flex;
        flex-direction: column;
        font-size: calc(var(--mm-mark-h) * 0.9);
        transform: none;
    }
}

/* Below 375px the words beside the device would push it 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 (width < 375px) {
    .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;
    }
}