/* Shared storefront shell: customer navigation, narrow-screen header and footer.
   Desktop composition is deliberately untouched — every layout change lives in a media query. */
[hidden] { display: none !important; }

/* ---- Header controls ------------------------------------------------------ */
.header-actions .icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; }
.header-actions .icon-button svg { width: 24px; height: 24px; }
/* One Bag control at every width, not a word on desktop and an icon on mobile.
   The word "Bag" is redundant beside a glyph that already says Bag, so it is
   collapsed rather than repeated; the count carries the meaning on its own. The
   accessible name is the aria-label cart-store.mjs keeps in step ("Bag, 3
   items"), which a collapsed text node cannot shadow.

   These rules deliberately out-specify the `.bag-button span` circle in
   styles.css and the `.catalog-bag span` circle that used to sit in catalog.css
   and commerce.css — `.header-actions [data-bag-count]` is (0,2,0) against their
   (0,1,1) and (0,2,1). The catalog and commerce copies had *higher* specific-
   ity than the old mobile-only override, which is why the count rendered as a
   25px bordered disc that swallowed the glyph on Catalog, Product, Bag and
   Checkout while the homepage was fine. Those duplicates are gone.

   The badge sets its own font-size because the control collapses the word with
   `font-size: 0`; without it the badge would inherit the collapse. */
.header-actions .bag-button, .header-actions .catalog-bag { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0; width: 44px; min-width: 44px; height: 44px; padding: 0; font-size: 0; transition: color .3s ease; }
.header-actions .bag-icon { display: block; width: 22px; height: 22px; }
.header-actions .bag-button:focus-visible, .header-actions .catalog-bag:focus-visible { color: var(--gold); }
/* Pressed feedback lands on the same frame as the touch, before any navigation
   starts, so the control never feels unresponsive on a phone. */
.header-actions .bag-button:active, .header-actions .catalog-bag:active { color: var(--gold); }
@media (hover: hover) {
  .header-actions .bag-button:hover, .header-actions .catalog-bag:hover { color: var(--gold); }
}
.header-actions [data-bag-count] { position: absolute; top: 2px; right: 0; width: auto; aspect-ratio: auto; min-width: 15px; height: 15px; padding: 0 4px; border: 0; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: 9px; font-weight: 600; line-height: 15px; letter-spacing: 0; text-align: center; box-shadow: 0 0 0 2px var(--ink); }
.catalog-header > nav { margin-left: auto; }
.catalog-header .header-actions { gap: .8rem; }

/* Phase 5.9 — the signed-in state of the header's account control.
   On desktop the account icon is the entire entry point to the account area, and
   a 44px glyph is too small a signal to be the only difference between "you are
   signed out, tap to sign in" and "you are signed in, tap to open your account".
   The chrome sets data-customer-state from the session (storefront-account.mjs),
   and this is the whole of the visual response: the champagne that already means
   "you are somewhere" in this palette, on the one control that means "you are
   someone".

   Nothing is added to the row — no name, no initials, no badge — because the
   header is the approved composition and a second, state-dependent element in it
   would have to be designed for and would then need a signed-out counterpart. The
   accessible name carries the same information as text ("My Account, signed in"),
   which is where a screen-reader user gets it from, and the mobile menu says the
   same thing in plain words beside a visible Sign out control. */
.account-control[data-customer-state="signed-in"] { color: var(--gold); }
/* The pressed and hover tints both land on --gold already, so a signed-in icon
   would show no change on press. Give it the ivory it gets signed out, so the
   press is still felt. */
.account-control[data-customer-state="signed-in"]:active { color: var(--ivory); }
@media (hover: hover) {
  .account-control[data-customer-state="signed-in"]:hover { color: var(--ivory); }
}

/* ---- Account links inside the mobile menu --------------------------------- */
.customer-menu { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.customer-menu a, .customer-menu button { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; padding: 0; font: 500 14px var(--sans); color: var(--gold); cursor: pointer; }
.customer-menu a:active, .customer-menu button:active { color: var(--ivory); }
@media (hover: hover) {
  .customer-menu a:hover, .customer-menu button:hover { color: var(--ivory); }
}
.customer-menu p { flex-basis: 100%; margin: 0; font-size: 13px; }

/* Store-information blocks that only exist in the narrow-screen footer. The
   placeholder link columns that used to sit alongside these are gone — none of
   their six destinations existed in the project. */
.mobile-footer-copy, .mobile-back-top { display: none; }

/* ---- Mobile menu composition ---------------------------------------------- */
/* Two labelled landmarks — Shop and Explore — instead of one flat list, so the
   menu reads as a designed hierarchy rather than whatever links a page happened
   to carry. Shop holds the browsing paths at display scale, Explore sits a step
   down in both size and colour, and the account block closes the composition.
   Every row keeps a 44px-or-better target. */
.mobile-menu { display: flex; flex-direction: column; padding: 92px 24px 36px; }
.menu-group-title { margin: 0 0 8px; color: var(--gold); font: 500 .62rem var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.menu-group + .menu-group { margin-top: 34px; }
.menu-list { display: grid; margin: 0; padding: 0; list-style: none; }
.menu-list a, .menu-list button { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 54px; padding: .3rem 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ivory); text-align: left; cursor: pointer; font: 400 clamp(1.5rem, 6.6vw, 1.95rem)/1.15 var(--display); transition: color .3s ease; }
/* The rule stays put on hover: shifting the divider with the label made the
   column of hairlines look untidy, so only the arrow and the colour move.
   Hover is guarded like every other decorative hover in the storefront — the
   menu is reached by tap, and where it is reached by pointer the guarded rules
   below still apply. */
.menu-list a::after, .menu-list button::after { content: '→'; font: 400 .78em var(--sans); color: var(--gold); opacity: .4; transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.menu-list a:focus-visible, .menu-list button:focus-visible { color: var(--gold); }
.menu-list a:focus-visible::after, .menu-list button:focus-visible::after { opacity: 1; transform: translateX(3px); }
.menu-list a:active, .menu-list button:active { color: var(--gold); }
.menu-list a:active::after, .menu-list button:active::after { opacity: 1; }
.menu-list--quiet a, .menu-list--quiet button { min-height: 46px; color: var(--muted); font-size: clamp(1.12rem, 4.8vw, 1.35rem); border-bottom-color: rgba(242,238,230,.09); }
.menu-list--quiet a:focus-visible, .menu-list--quiet button:focus-visible { color: var(--ivory); }
.menu-list--quiet a:active, .menu-list--quiet button:active { color: var(--ivory); }
@media (hover: hover) {
  .menu-list a:hover, .menu-list button:hover { color: var(--gold); }
  .menu-list a:hover::after, .menu-list button:hover::after { opacity: 1; transform: translateX(3px); }
  .menu-list--quiet a:hover, .menu-list--quiet button:hover { color: var(--ivory); }
}
.menu-list--quiet li:last-child a, .menu-list--quiet li:last-child button { border-bottom: 0; }
/* The account block closes the composition. Anchoring it to the foot of the menu
   keeps the browsing paths top-weighted and puts Sign in where a returning
   customer looks for it, instead of stranding it in the middle of the panel. */
.mobile-menu .customer-menu { margin-top: auto; }
/* A quiet brand footnote under the account block — a closing line, not a second
   navigation. */
.mobile-menu > .menu-note { margin: 18px 0 0; color: var(--muted); }

/* Restrained open: the blocks rise in sequence. The delays sit only on the open
   state, so closing stays immediate, and the reduced-motion rule in styles.css
   zeroes both the duration and the delay. */
.mobile-menu .menu-group, .mobile-menu .customer-menu, .mobile-menu > .menu-note { opacity: 0; transform: translateY(14px); transition: opacity .42s ease, transform .42s cubic-bezier(.2,.7,.2,1); }
.mobile-menu.open .menu-group, .mobile-menu.open .customer-menu, .mobile-menu.open > .menu-note { opacity: 1; transform: none; }
.mobile-menu.open nav:nth-of-type(1) { transition-delay: .05s; }
.mobile-menu.open nav:nth-of-type(2) { transition-delay: .11s; }
.mobile-menu.open .customer-menu { transition-delay: .17s; }
.mobile-menu.open > .menu-note { transition-delay: .21s; }

@media (max-height: 600px) and (max-width: 980px) {
  .mobile-menu { padding-top: 76px; }
  .menu-group + .menu-group, .mobile-menu .customer-menu { margin-top: 22px; }
}

/* ---- Desktop navigation (audited, not changed) -----------------------------
   Above 980px every surface already carries visible navigation, so no desktop
   menu control was added: the homepage header runs Categories / New arrivals /
   Finishes / Our story on `.desktop-nav`, and the catalog, product, Bag, account
   and checkout headers run Home / Collection / New arrivals in the header's own
   `nav`. A hamburger above this width would hide links that currently fit on one
   line, which is the opposite of what the header needs — the only desktop
   header problem was the Bag control, and that is addressed at the top of this
   file. The menu control appears *only* with the narrow-screen shell below. */
@media (max-width: 980px) {
  .catalog-header > nav { display: none; }
  .catalog-header { gap: 8px; }
}

@media (max-width: 768px) {
  /* ---- Header ------------------------------------------------------------ */
  /* One gutter (5vw) is shared by the header, every section and both footers —
     the same value catalog.css and commerce.css already use — so text blocks
     share a left edge instead of scattering across 16/19.5/24px. */
  .site-header, .site-header.scrolled, .catalog-header { height: 66px; min-height: 66px; padding: 0 5vw; gap: 8px; }
  .site-header .wordmark, .catalog-header .wordmark { min-height: 44px; gap: 6px; letter-spacing: .03em; }
  .site-header .brand-monogram, .catalog-header .brand-monogram { width: 32px; height: 38px; }
  .site-header .wordmark > span, .catalog-header .wordmark > span { font-size: 10px; white-space: nowrap; }
  .site-header .wordmark em, .catalog-header .wordmark em { display: block; font-size: 13px; }

  .header-actions, .catalog-header .header-actions { gap: 0; }
  .header-actions .icon-button { flex: 0 0 44px; }
  /* The Bag control itself is defined once at the top of this file and is the
     same at every width, so nothing about it is overridden here. */

  /* The menu control reads as a close control while the menu is open. */
  .menu-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; }
  .menu-button span { width: 22px; margin: 0; transition: transform .3s ease; }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

  /* ---- Homepage footer --------------------------------------------------- */
  .site-footer { padding: 56px 5vw 28px; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 32px; }
  .footer-top > div { display: block; }
  .footer-top h2 { font-size: clamp(2.5rem, 11vw, 3.4rem); }
  .footer-top .primary-cta { padding: .8rem .8rem .8rem 1.1rem; gap: 1.75rem; }
  .footer-top .primary-cta b { width: 38px; }

  /* Single column now that the two placeholder link columns are gone: every
     remaining child — lockup, back link, back-to-top, copyright — spans the
     full width, so the two-track grid only left an empty right-hand column. */
  .footer-bottom { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding-top: 32px; }
  .footer-brand-block { grid-column: 1 / -1; }
  .footer-bottom .brand-lockup { width: 124px; }
  .footer-note { font-size: .72rem; }
  .footer-copyright { margin: 0; padding-top: 20px; font-size: .72rem; }

  /* ---- Catalogue, product, Bag and checkout footer ----------------------- */
  .catalog-footer { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; align-items: start; padding: 40px 5vw 28px; text-align: left; }
  .catalog-footer > img, .catalog-footer > a { grid-column: 1 / -1; }
  .catalog-footer .brand-lockup { width: 124px; align-self: start; }
  .mobile-back-top { display: flex; align-items: center; gap: .5rem; grid-column: 1 / -1; min-height: 44px; padding: 0; border: 0; background: none; color: var(--gold); font: inherit; font-size: .78rem; cursor: pointer; }
  /* The base rule above hides every mobile-only footer block; each one is
     switched back on here. This one was missed, so the copyright was absent
     from the catalogue, product, Bag and checkout footers at every width. */
  .mobile-footer-copy { display: block; grid-column: 1 / -1; margin: 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; }

  /* ---- Storefront sections ---------------------------------------------- */
  .section { padding: 64px 5vw; }
  .section-heading { margin-bottom: 28px; }
  .service-strip article { min-height: 150px; }
  .catalog-intro { padding-top: 24px; padding-bottom: 32px; }
  .catalog-back-row { padding-top: 12px; }
  .catalog-intro h1 { font-size: clamp(44px, 12vw, 70px); }
  .product-back-row { margin-bottom: 20px; }
}

@media (max-width: 359px) {
  /* No header padding override: 5vw already lands on 16px here, and keeping the
     shared gutter is what stops the wordmark drifting off the content edge. */
  .site-header .wordmark, .catalog-header .wordmark { gap: 3px; }
  .site-header .wordmark > span, .catalog-header .wordmark > span { font-size: 9px; }
  .site-header .brand-monogram, .catalog-header .brand-monogram { width: 32px; }
}