/* ===========================================================================
   Zamaanah — Soft Luxe Classics
   Portrait-first storefront. The grid follows the clothes: shraras and maxis
   are floor-length, so everything is tall rather than square.
   =========================================================================== */

:root {
  /* ground */
  --bone: #f6f2ec;
  --bone-deep: #efe9e0;
  --paper: #ffffff;

  /* ink */
  --ink: #241e1a;
  --ink-soft: #443a33;
  --muted: #776b61;
  --faint: #9c9089;

  /* accent */
  --clay: #b9a08c;
  --clay-deep: #8f7761;
  --rose: #c9a9a0;

  --line: #e2dad0;
  --line-soft: #ece5dc;

  --ok: #4a6b4f;
  --bad: #9a3b34;

  /* ── type ────────────────────────────────────────────────────────────────
     One geometric sans, Poppins, for everything. It echoes the logo's own
     wide-tracked ZAMAANAH wordmark; hierarchy comes from size and weight
     rather than a second family. Swap these two lines to re-skin the site. */
  --display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Poppins is wide and dark for its point size: headings sit at 500 and a
     size step below where a serif would, with slight negative tracking. */
  --display-weight: 500;

  /* Portrait ratio, matched to the source photography. */
  --portrait: 3 / 4;

  /* Full-bleed layout: sections run the width of the screen at every size,
     and the side gutter grows with it so wide monitors still get air at the
     edges. --max stays a length (not `none`) because the hero's copy
     alignment does arithmetic with it. */
  --gutter: clamp(28px, 3.2vw, 64px);
  --max: 100vw;
  --r: 3px;
  --r-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(36, 30, 26, .04), 0 2px 8px rgba(36, 30, 26, .04);
  --shadow-md: 0 4px 12px rgba(36, 30, 26, .06), 0 12px 32px rgba(36, 30, 26, .07);
  --shadow-lg: 0 18px 50px rgba(36, 30, 26, .14);

  --ease: cubic-bezier(.22, .78, .28, 1);

  /* Set once, read by the sticky filter rail and the mobile filter sheet. */
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
/* width/height attributes reserve space (no layout shift) — but without this
   the height attribute would also *set* the height, stretching any image
   whose rule only sizes the width. */
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--clay-deep); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ─── type scale ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  line-height: 1.15;
  letter-spacing: -.015em;
}

/* Large sans headings tighten as they grow. */
.display-xl { font-size: clamp(2.3rem, 4.8vw, 3.9rem); line-height: 1.08; letter-spacing: -.03em; }
.display-l  { font-size: clamp(1.85rem, 3.3vw, 2.6rem); line-height: 1.12; letter-spacing: -.025em; }
.display-m  { font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.18; letter-spacing: -.02em; }
.display-s  { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.3; letter-spacing: -.01em; }

/* The eyebrow above a section heading. Tracked to echo the logo wordmark. */
.eyebrow {
  font-family: var(--body);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--clay-deep);
  margin-bottom: 10px;
}

.lede { font-size: 1.08rem; color: var(--ink-soft); max-width: 62ch; line-height: 1.72; }
.meta { font-size: .82rem; color: var(--muted); letter-spacing: 0; }
.fabric { font-size: .76rem; color: var(--clay-deep); letter-spacing: .02em; font-weight: 500; }

/* Prices, stock counts and size tables line up column-wise. */
.card-price, .pdp-price, .line-total, .sum-row, table.sizes td, .data-table td, .stat b {
  font-variant-numeric: tabular-nums;
}

/* ─── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 32px;
  background: var(--ink); color: var(--bone);
  font-size: .78rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  border-radius: var(--r);
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--clay-deep); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled='true'] { background: var(--faint); cursor: not-allowed; }

.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--bone); }

.btn-clay { background: var(--clay-deep); color: #fff; }
.btn-clay:hover { background: var(--ink); }

.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: .7rem; letter-spacing: .1em; }

/* A quiet text link that reads as a link without an arrow glyph. */
.link-rule {
  display: inline-block;
  max-width: 100%; overflow-wrap: anywhere;
  border-bottom: 1px solid var(--clay);
  padding-bottom: 2px;
  font-size: .92rem;
  transition: border-color .2s ease, color .2s ease;
}
.link-rule:hover { border-color: var(--ink); color: var(--clay-deep); }

/* ─── announcement + header ──────────────────────────────────────────────── */

.announce {
  background: var(--ink); color: var(--bone);
  font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  text-align: center;
  padding: 10px 16px;
  /* Store switch on the left, message centred; the empty third column keeps
     the message optically centred on the page. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.announce-msg { grid-column: 2; }
.store-switch { grid-column: 1; justify-self: start; display: flex; gap: 4px; padding-left: calc(var(--gutter) - 16px); }
.store-switch a {
  border: 0; padding: 4px 10px; border-radius: 99px;
  color: rgba(246, 242, 236, .62); letter-spacing: .1em;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.store-switch a span { opacity: .7; font-weight: 400; }
.store-switch a:hover { color: var(--bone); }
.store-switch a.on { color: var(--ink); background: var(--bone); }
@media (max-width: 900px) {
  .announce { display: block; }
  .store-switch { display: none; }  /* the drawer carries it on small screens */
}
.announce a { border-bottom: 1px solid rgba(246, 242, 236, .4); }

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
}
.masthead-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: clamp(12px, 2vw, 24px); min-height: var(--header-h);
}

/* ─── brandmark ──────────────────────────────────────────────────────────
   The Urdu calligraphy is the logo; ZAMAANAH is set live rather than shipped
   as bitmap text so it stays crisp and selectable at every size. Tracking is
   matched to the wordmark baked into the supplied artwork. `text-indent`
   cancels the trailing letter-space so the lockup stays optically centred. */

.brandmark {
  display: inline-flex; align-items: center; gap: 11px;
  line-height: 1;
  justify-self: center;
  white-space: nowrap;
}
.brandmark-mark {
  height: var(--mark-h, 38px); width: auto;
  flex: none;
  transition: opacity .2s var(--ease);
}
.brandmark:hover .brandmark-mark { opacity: .72; }
.brandmark b {
  display: block;
  font-family: var(--body);
  font-size: var(--mark-name, 1.02rem); font-weight: 600;
  letter-spacing: .3em; text-indent: .3em;
  text-transform: uppercase;
}
.brandmark em {
  display: block; font-style: normal;
  font-size: var(--mark-tag, .54rem); font-weight: 500;
  letter-spacing: .26em; text-indent: .26em;
  text-transform: uppercase;
  color: var(--clay-deep);
  margin-top: 6px;
}

/* Stacked — centred placements with vertical room. */
.brandmark-stack { flex-direction: column; gap: 14px; text-align: center; }
.brandmark-stack em { margin-top: 7px; }

/* On ink: the calligraphy switches to its white colourway in the markup, the
   tagline to the lighter clay so it does not go muddy. */
.brandmark-invert em { color: var(--clay); }

.nav { display: flex; align-items: center; gap: clamp(14px, 1.5vw, 24px); }
.nav a {
  font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
  /* A two-word category must never break across lines in the masthead. */
  white-space: nowrap;
  padding: 4px 0; border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
/* Sale gets the one accent in the bar; it is the highest-intent link there. */
.nav a.sale { color: var(--clay-deep); font-weight: 600; }
.nav a.sale:hover { color: var(--bad); border-bottom-color: var(--bad); }
.nav a:hover, .nav a.on { color: var(--ink); border-bottom-color: var(--clay); }

.masthead-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

.icon-btn {
  position: relative;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background .18s ease;
}
.icon-btn:hover { background: var(--bone-deep); }
.bag-count {
  position: absolute; top: 3px; right: 1px;
  min-width: 17px; padding: 1px 5px;
  background: var(--clay-deep); color: #fff;
  font-size: .68rem; font-weight: 600; line-height: 1.4;
  border-radius: 99px; text-align: center;
}

.burger { display: none; width: 40px; height: 40px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.burger span { width: 20px; height: 1.5px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }

/* ─── search panel ───────────────────────────────────────────────────────── */

.search-panel {
  position: fixed; inset: 0 0 auto 0; z-index: 95;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  padding: 28px var(--gutter) 34px;
  transform: translateY(-101%);
  transition: transform .34s cubic-bezier(.22, .78, .28, 1);
}
.search-panel.open { transform: translateY(0); }
.search-panel form { max-width: 720px; margin: 0 auto; display: flex; align-items: center; border-bottom: 1px solid var(--ink); }
.search-panel input {
  flex: 1; border: none; background: none; outline: none;
  font-family: var(--display); font-size: clamp(1.25rem, 2.6vw, 1.8rem); font-weight: 400;
  padding: 10px 4px;
}
.search-panel input::placeholder { color: var(--faint); }
.search-hint { max-width: 720px; margin: 16px auto 0; display: flex; gap: 8px; flex-wrap: wrap; }
.search-hint a { font-size: .82rem; color: var(--muted); padding: 5px 13px; border: 1px solid var(--line); border-radius: 99px; transition: .18s ease; }
.search-hint a:hover { border-color: var(--clay); color: var(--ink); }

/* ─── mobile drawer ──────────────────────────────────────────────────────── */

.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(36, 30, 26, .4); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; inset: 0 auto 0 0; z-index: 100;
  width: min(86%, 350px);
  background: var(--bone);
  transform: translateX(-101%);
  transition: transform .3s cubic-bezier(.22, .78, .28, 1);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.drawer-body { flex: 1; overflow-y: auto; padding: 22px; }
.drawer-group + .drawer-group { margin-top: 26px; }
.drawer-group h3 { font-family: var(--body); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--clay-deep); margin-bottom: 8px; }
.drawer-body a { display: block; padding: 11px 0; font-size: 1.02rem; border-bottom: 1px solid var(--line-soft); }
.drawer-body a:last-child { border-bottom: none; }

/* ─── flash ──────────────────────────────────────────────────────────────── */

.flash { padding: 12px var(--gutter); font-size: .9rem; text-align: center; }
.flash-success { background: #eaf0e9; color: var(--ok); }
.flash-error { background: #f6e9e8; color: var(--bad); }

/* ═════════════════════ BANNER CAROUSEL ═════════════════════

   A scroll-snap track, not a transform carousel: swipe comes free from the
   platform, it keeps working with JavaScript off, and the browser handles
   momentum better than anything hand-rolled.

   Desktop is an editorial spread: copy on the left, the look on the right in
   an arch frame (portrait, so the garment and the face both survive), with a
   second photograph of the same piece pinned over the corner and a shoppable
   price tag. Under 900px the photograph goes full-bleed and the copy sits on
   a bottom-weighted ink gradient, so the heading and the CTA are on the
   first screen instead of below a cropped photo. */

.hero {
  position: relative;
  /* Near-white with a faint cool-grey pool behind the arch — lighter than the
     bone used elsewhere, so the photograph carries the colour. */
  background:
    radial-gradient(ellipse 55% 70% at 76% 48%, #f1f0ee 0%, rgba(241, 240, 238, 0) 72%),
    #fcfcfb;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* Default (and no-JS) mode: a real scroll container with snapping, so the
   banner is swipeable before a line of JavaScript runs. */
.hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  outline: none;
}
.hero-track::-webkit-scrollbar { display: none; }

/* Enhanced mode, switched on by main.js once it takes over.
   Native scroll-snap is a poor target for programmatic control: slide widths
   land on fractions (1424.8px at 1440), and resolving a scrollTo against
   mandatory snap points is inconsistent across engines — it can even land on
   the wrong slide. Translating a clipped track is exact, so the dots, the
   arrows and what is on screen can never disagree. Swipe is re-added by hand. */
.hero-track.is-enhanced {
  /* `visible`, NOT `hidden`. Clipping the same element that carries the
     transform makes the clip window travel with its content, so translating
     the track changes nothing and eventually shows an empty frame. The clip
     belongs to the parent — `.hero` already has overflow: hidden. */
  overflow: visible;
  scroll-snap-type: none;
  transition: transform .62s var(--ease);
}

.hero-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  /* No `scroll-snap-stop: always` here. It stops a scroll from passing any
     snap point, which silently clamps scrollTo() to one slide and desyncs
     the arrows and dots from the track. Snapping alone already lands
     cleanly on a slide. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 50%);
  /* `min-height`, not `height`: on a short laptop screen the copy can need
     more room than the viewport offers, and a fixed height pushed the CTA
     down into the controls. Slides are flex items, so they all stretch to
     the tallest one and the banner never jumps between slides. */
  min-height: clamp(560px, calc(100vh - 150px), 820px);
}

/* ── copy ───────────────────────────────────────────────── */

.hero-copy {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px clamp(28px, 4vw, 64px) 110px;
  /* Aligns the copy with the site's content column rather than the viewport. */
  padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}
.hero-kicker { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.hero-kicker .eyebrow { margin: 0; }
.hero-count {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding-right: 16px; border-right: 1px solid var(--line);
  font-family: var(--display); font-size: 1.05rem; font-weight: 500; line-height: 1; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.hero-count i { font-style: normal; font-size: .8rem; color: var(--faint); }
.hero-copy h1, .hero-copy h2 { max-width: 13ch; text-wrap: balance; }
/* Scales with viewport height too, so a short screen shrinks the heading
   before it has to grow the banner. */
.hero-copy .display-xl { font-size: clamp(2.2rem, min(4.4vw, 7.6vh), 3.9rem); }
.hero-body {
  margin-top: 22px; max-width: 40ch;
  font-size: 1.04rem; line-height: 1.7; color: var(--ink-soft);
}
.hero-actions { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }

.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bone); }

/* ── visual ─────────────────────────────────────────────── */

.hero-visual {
  grid-column: 2; grid-row: 1;
  position: relative;
}
/* Out of flow on purpose: the copy alone decides the slide's height, and the
   arch then fills whatever height that is, width following from 3:4. */
.hero-frame {
  position: absolute; top: 46px; bottom: 0; left: 52.5%;
  aspect-ratio: 3 / 4;
  max-width: 81%;
  transform: translateX(-50%);
}
/* A hairline arch echoing the frame, offset up and right. */
.hero-frame::before {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid var(--clay);
  border-radius: 999px 999px 0 0;
  transform: translate(22px, -22px);
  pointer-events: none;
}
.hero-figure {
  position: absolute; inset: 0;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: var(--bone-deep);
}
.hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* object-position comes from each slide's `focus` in config.home.slides. */
}

.hero-inset {
  position: absolute; z-index: 2;
  left: -26%; bottom: 9%;
  width: 40%; aspect-ratio: 3 / 4;
  border: 6px solid var(--paper);
  border-radius: 3px;
  overflow: hidden;
  background: var(--bone-deep);
  box-shadow: 0 18px 40px -12px rgba(36, 30, 26, .35);
}
.hero-inset img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

.hero-tag {
  position: absolute; z-index: 2;
  right: -7%; top: 34%;
  display: grid; gap: 3px;
  max-width: 200px;
  padding: 11px 16px 12px;
  background: rgba(255, 255, 255, .92);
  border-radius: 3px;
  box-shadow: 0 10px 28px -10px rgba(36, 30, 26, .3);
  backdrop-filter: blur(6px);
  font-size: .78rem; line-height: 1.35; color: var(--ink-soft);
  transition: transform .25s var(--ease), background .2s var(--ease);
}
.hero-tag b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero-tag b::after { content: ' \2192'; font-weight: 400; color: var(--clay-deep); }
.hero-tag:hover { background: var(--paper); transform: translateY(-2px); }

/* ── entrance, only once main.js owns the carousel ─────────
   Without JavaScript nothing is hidden. With it, the slide coming in lifts
   its copy line by line, the photo settles from a slow zoom, and the inset
   rises into place. */
.hero-track.is-enhanced .hero-copy > *,
.hero-track.is-enhanced .hero-inset,
.hero-track.is-enhanced .hero-tag {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.hero-track.is-enhanced .hero-img { transform: scale(1.08); transition: transform 7s cubic-bezier(.2, .6, .3, 1); }

.hero-track.is-enhanced .is-active .hero-copy > *,
.hero-track.is-enhanced .is-active .hero-inset,
.hero-track.is-enhanced .is-active .hero-tag { opacity: 1; transform: none; }
.hero-track.is-enhanced .is-active .hero-img { transform: scale(1); }

.hero-track.is-enhanced .is-active .hero-copy > :nth-child(1) { transition-delay: .25s; }
.hero-track.is-enhanced .is-active .hero-copy > :nth-child(2) { transition-delay: .34s; }
.hero-track.is-enhanced .is-active .hero-copy > :nth-child(3) { transition-delay: .43s; }
.hero-track.is-enhanced .is-active .hero-copy > :nth-child(4) { transition-delay: .52s; }
.hero-track.is-enhanced .is-active .hero-inset { transition-delay: .45s; }
.hero-track.is-enhanced .is-active .hero-tag { transition-delay: .7s; }
.hero-track.is-enhanced .is-active .hero-tag:hover { transform: translateY(-2px); transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .hero-track.is-enhanced { transition: none; }
  .hero-track.is-enhanced .hero-copy > *,
  .hero-track.is-enhanced .hero-inset,
  .hero-track.is-enhanced .hero-tag,
  .hero-track.is-enhanced .hero-img { opacity: 1; transform: none; transition: none; }
}

/* ── controls ───────────────────────────────────────────── */

.hero-controls {
  position: absolute; z-index: 3;
  left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  bottom: clamp(26px, 3.4vw, 44px);
  display: flex; align-items: center; gap: 22px;
}
.hero-arrows { display: flex; gap: 8px; }
.hero-arrow {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.hero-arrow:hover { background: var(--ink); border-color: var(--ink); color: var(--bone); }

.hero-dots { display: flex; gap: 6px; }
.hero-dots button { width: 40px; height: 32px; display: inline-flex; align-items: center; }
.hero-dots i {
  position: relative; overflow: hidden;
  display: block; width: 100%; height: 2px;
  background: var(--line);
}
.hero-dots i::after {
  content: ''; position: absolute; inset: 0;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
}
.hero-dots button[aria-selected='true'] i::after { transform: scaleX(1); }
.hero-dots button:hover i { background: var(--clay); }
/* While autoplay runs, the active bar fills over the slide's hold time. */
.hero.is-playing .hero-dots button[aria-selected='true'] i::after {
  animation: hero-progress var(--hero-interval, 6000ms) linear both;
}
@keyframes hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ─── section furniture ──────────────────────────────────────────────────── */

.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-tight { padding: clamp(36px, 5vw, 64px) 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.section-head p { margin-top: 10px; color: var(--muted); font-size: .95rem; max-width: 52ch; }

/* ─── product grid ───────────────────────────────────────────────────────── */

.grid {
  display: grid;
  /* 210px keeps three columns beside the filter rail at 1024px. */
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(20px, 2.4vw, 34px) clamp(14px, 1.6vw, 24px);
}
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Full width on a big monitor would otherwise pack in 7+ narrow cards. */
@media (min-width: 1500px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card { display: block; }
.card-media {
  position: relative;
  aspect-ratio: var(--portrait);
  background: var(--paper);
  overflow: hidden;
  border-radius: var(--r);
}
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .4s ease;
}
.card-media .alt {
  position: absolute; inset: 0;
  opacity: 0;
}
.card:hover .card-media .alt { opacity: 1; }

.card-flag {
  position: absolute; top: 10px; left: 10px;
  background: var(--bone); color: var(--ink);
  font-size: .72rem; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 99px;
}
.card-flag.sold { background: var(--ink); color: var(--bone); }

.card-body { padding-top: 13px; }
.card-name { font-family: var(--display); font-size: .95rem; font-weight: 500; line-height: 1.35; letter-spacing: 0; overflow-wrap: anywhere; }
/* Wraps as whole units: a 210px card must never break "Rs 3,999" in half, so
   the price is nowrap and the fabric drops to its own line instead. */
.card-line { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-top: 6px; flex-wrap: wrap; }
/* Wraps between its parts (From / was / now) on a narrow card, never inside an amount. */
.card-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; max-width: 100%; font-size: .95rem; font-weight: 500; letter-spacing: .01em; white-space: nowrap; }
.card-was { color: var(--faint); text-decoration: line-through; font-size: .84rem; font-weight: 400; margin-right: 6px; }
.card-line .fabric { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sizes shown as a quiet availability strip, not as buttons — this is a card. */
.card-sizes { margin-top: 7px; display: flex; gap: 7px; font-size: .72rem; color: var(--faint); }
.card-sizes .out { text-decoration: line-through; opacity: .5; }
.card-sizes .in { color: var(--muted); }

/* ─── category tiles ─────────────────────────────────────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--bone-deep); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, .78, .28, 1); }
.tile:hover img { transform: scale(1.04); }
.tile-label {
  position: absolute; inset: auto 0 0 0;
  padding: 44px 18px 16px;
  background: linear-gradient(to top, rgba(28, 23, 20, .66), rgba(28, 23, 20, 0));
  color: #fff;
}
.tile-label strong { display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.tile-label em { font-style: normal; font-size: .76rem; color: rgba(255, 255, 255, .72); }

/* ─── editorial band ─────────────────────────────────────────────────────── */

.band { background: var(--bone-deep); }

/* ═══════════════════ TWO STORES: landing + Rosa Juniors ═══════════════════
   Rosa palette. --rosa-ink is the deep rose used for text and buttons (it
   clears 4.5:1 with white); the brighter tones are for fills and confetti. */
:root {
  /* Taken from the Rosa Juniors logo: --rosa is its exact dusty rose (fills
     only — 3:1 on white); --rosa-ink is the deeper rose for text and buttons
     (5.2:1 with white). Confetti is pastel to sit with the soft bow mark. */
  --rosa: #b88880; --rosa-ink: #935f57; --rosa-deep: #7d4f48; --rosa-blush: #f8eeeb;
  --sun: #f3cf8e; --sky: #bcd7e6; --mint: #c5e2cf; --lilac: #dccbe8;
}

/* ── header bits shared by both stores ─────────────────── */
.nav a.nav-cross { color: var(--muted); }
.nav a.nav-cross-rosa {
  color: var(--rosa-ink); font-weight: 600;
  padding: 3px 12px; border-radius: 99px; background: var(--rosa-blush); border: 0;
}
.nav a.nav-cross-rosa:hover { background: var(--rosa); color: #fff; }
.drawer-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawer-stores a {
  display: grid; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-weight: 600; font-size: .92rem;
}
.drawer-stores a span { font-weight: 400; font-size: .76rem; color: var(--muted); }
.drawer-stores a.on { border-color: var(--ink); background: var(--paper); }

.rosa-mark { justify-self: center; display: block; line-height: 0; }
.rosa-mark img { height: 58px; width: auto; }
@media (max-width: 900px) { .rosa-mark img { height: 46px; } }

/* Landing panel and Rosa hero carry the logo artwork itself. */
.split-r-logo img { width: clamp(220px, 26vw, 360px); height: auto; filter: drop-shadow(0 6px 18px rgba(60, 30, 25, .18)); }
.rosa-logo-hero { margin: 0 auto 22px; line-height: 0; }
.rosa-logo-hero img { width: clamp(240px, 38vw, 440px); height: auto; margin: 0 auto; }

/* Rosa Juniors pages re-tint the shared chrome. */
.brand-rosa .announce { background: var(--rosa-ink); }
.brand-rosa .store-switch a { color: rgba(255, 255, 255, .9); }
.brand-rosa .store-switch a.on { color: var(--rosa-ink); background: #fff; }
.brand-rosa .card-flag { background: var(--rosa-blush); color: var(--rosa-ink); }
.status-pill.rosa-pill { background: var(--rosa-blush); color: var(--rosa-ink); }

/* ── "/" split landing ─────────────────────────────────── */
.landing { background: var(--ink); }
.split { position: relative; display: flex; min-height: 100vh; min-height: 100svh; }
.split-panel {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1 1 0; display: grid; place-items: center;
  padding: 90px 28px 60px;
  transition: flex-grow .8s var(--ease);
}
.split-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); transition: transform 1.6s var(--ease);
}
.split-panel::after { content: ''; position: absolute; inset: 0; z-index: -1; transition: opacity .6s var(--ease); }

.split-zamaanah { color: var(--bone); background: var(--ink); }
.split-zamaanah::after { background: linear-gradient(180deg, rgba(24, 19, 16, .55) 0%, rgba(24, 19, 16, .72) 55%, rgba(24, 19, 16, .9) 100%); }

.split-rosa { color: #fff; background: linear-gradient(160deg, #a8766e 0%, var(--rosa-ink) 55%, var(--rosa-deep) 100%); }
.split-rosa::after { background: linear-gradient(180deg, rgba(147, 95, 87, .74), rgba(125, 79, 72, .9)); opacity: 0; }
.split-rosa .split-bg ~ .split-confetti { opacity: .7; }
.split-rosa:has(.split-bg)::after { opacity: 1; }

.split-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  animation: split-rise 1s var(--ease) both;
}
.split-rosa .split-inner { animation-delay: .12s; }
@keyframes split-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.split-kicker {
  padding: 5px 14px; border: 1px solid currentColor; border-radius: 99px;
  font-size: .7rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  opacity: .9; margin-bottom: 14px;
}
.split-z-mark { height: clamp(78px, 9vw, 124px); width: auto; }
.split-z-name {
  font-size: clamp(1.6rem, 3.1vw, 2.6rem); font-weight: 600;
  letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; line-height: 1.1;
}
.split-line { font-size: 1rem; font-weight: 500; opacity: .92; }
.split-cta {
  margin-top: 22px; padding: 14px 28px;
  border: 1.5px solid currentColor; border-radius: 99px;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.split-cta i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }

.split-title {
  position: absolute; z-index: 5; top: 22px; left: 50%; transform: translateX(-50%);
  margin: 0; pointer-events: none; text-align: center;
}
.split-title-text {
  display: inline-block; padding: 8px 18px; border-radius: 99px;
  background: rgba(255, 255, 255, .94); color: var(--ink);
  font-family: var(--body); font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .4);
}

/* Confetti — pure CSS, no images. */
.split-confetti { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.split-confetti i { position: absolute; display: block; border-radius: 50%; animation: confetti-float 6s ease-in-out infinite alternate; }
.split-confetti i:nth-child(1) { width: 26px; height: 26px; background: var(--sun); top: 14%; left: 12%; }
.split-confetti i:nth-child(2) { width: 14px; height: 14px; background: var(--sky); top: 24%; right: 16%; animation-delay: -2s; }
.split-confetti i:nth-child(3) { width: 40px; height: 40px; background: rgba(255, 255, 255, .18); bottom: 18%; left: 9%; animation-delay: -1s; }
.split-confetti i:nth-child(4) { width: 18px; height: 18px; background: var(--mint); bottom: 26%; right: 11%; border-radius: 4px; transform: rotate(20deg); animation-delay: -3s; }
.split-confetti i:nth-child(5) { width: 12px; height: 12px; background: var(--lilac); top: 42%; left: 22%; animation-delay: -4s; }
.split-confetti i:nth-child(6) { width: 22px; height: 22px; background: var(--sun); bottom: 12%; right: 30%; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); border-radius: 0; animation-delay: -1.5s; }
.split-confetti i:nth-child(7) { width: 16px; height: 16px; background: #fff; top: 10%; right: 34%; opacity: .7; animation-delay: -2.5s; }
.split-confetti i:nth-child(8) { width: 60px; height: 60px; background: rgba(243, 207, 142, .3); top: 58%; right: 6%; animation-delay: -3.5s; }
.split-confetti i:nth-child(9) { width: 20px; height: 20px; background: var(--sky); bottom: 8%; left: 34%; clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; animation-delay: -.5s; }
@keyframes confetti-float { from { translate: 0 0; } to { translate: 0 -16px; } }

@media (hover: hover) and (min-width: 901px) {
  .split-panel:hover { flex-grow: 1.3; }
  .split-panel:hover .split-bg { transform: scale(1); }
  .split:hover .split-panel:not(:hover) .split-inner { opacity: .72; transition: opacity .5s var(--ease); }
  .split-zamaanah:hover .split-cta { background: var(--bone); color: var(--ink); border-color: var(--bone); }
  .split-rosa:hover .split-cta { background: #fff; color: var(--rosa-ink); border-color: #fff; }
  .split-panel:hover .split-cta i { transform: translateX(4px); }
}
.split-panel:focus-visible { outline: 3px solid #fff; outline-offset: -8px; }

@media (max-width: 900px) {
  .split { flex-direction: column; }
  .split-panel { min-height: 50vh; min-height: 50svh; padding: 64px 22px 40px; }
  .split-title { top: 14px; }
  .split-kicker { margin-bottom: 6px; }
  .split-cta { margin-top: 12px; padding: 12px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .split-inner, .split-confetti i { animation: none; }
  .split-panel, .split-bg, .split-cta, .split-cta i { transition: none; }
}

/* ── Rosa Juniors landing ──────────────────────────────── */
.rosa-hero {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding: clamp(64px, 9vw, 128px) 0 clamp(56px, 8vw, 104px);
  background:
    radial-gradient(circle at 12% 20%, rgba(243, 207, 142, .38), transparent 26%),
    radial-gradient(circle at 88% 30%, rgba(188, 215, 230, .45), transparent 24%),
    radial-gradient(circle at 70% 90%, rgba(197, 226, 207, .45), transparent 26%),
    var(--rosa-blush);
}
.rosa-hero-inner { position: relative; z-index: 1; }
.rosa-confetti i:nth-child(3) { background: rgba(184, 136, 128, .16); }
.rosa-confetti i:nth-child(7) { background: var(--rosa); opacity: .5; }
.rosa-kicker { font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--rosa-ink); }
.rosa-lede { max-width: 46ch; margin: 0 auto; font-size: 1.05rem; color: var(--ink-soft); }
.rosa-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn.rosa-btn { background: var(--rosa-ink); color: #fff; border-radius: 99px; }
.btn.rosa-btn:hover { background: var(--rosa-deep); }
.btn.rosa-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--rosa-ink); border: 2px solid var(--rosa-ink); border-radius: 99px;
}
.btn.rosa-btn-ghost:hover { background: var(--rosa-ink); color: #fff; }

.rosa-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 28px; }
.rosa-chips a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px;
  background: #fff; border: 1.5px solid var(--line); font-weight: 500; font-size: .9rem;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.rosa-chips a span { font-size: .74rem; color: var(--muted); }
.rosa-chips a:hover { border-color: var(--rosa-ink); color: var(--rosa-ink); }

.rosa-soon {
  position: relative; text-align: center; max-width: 720px; margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) clamp(22px, 5vw, 56px);
  background: #fff; border: 2px dashed #e3c9c3; border-radius: 28px;
}
.rosa-soon-badge {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--rosa-blush); color: var(--rosa-ink); font-size: 1.8rem;
}
.rosa-soon h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 600; letter-spacing: -.01em; }
.rosa-soon p { margin: 10px auto 0; max-width: 48ch; color: var(--muted); }

.rosa-promises { padding-top: 0; }
.rosa-perk { border-radius: 22px; }
.rosa-perk-1 .perk-icon { background: var(--rosa-blush); color: var(--rosa-ink); }
.rosa-perk-2 .perk-icon { background: #fbf0dc; color: #8a6420; }
.rosa-perk-3 .perk-icon { background: #e6f0f5; color: #3f6478; }
.rosa-perk .perk-figure small { color: var(--rosa-ink); }
.rosa-perk::before { background: radial-gradient(circle, rgba(184, 136, 128, .2), rgba(184, 136, 128, 0) 70%); }

.rosa-insta { background: var(--rosa-ink); color: #fff; padding: clamp(40px, 6vw, 72px) 0; }
.rosa-insta-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.rosa-insta .rosa-kicker { color: rgba(255, 255, 255, .8); margin-bottom: 8px; }
.rosa-insta h2 { color: #fff; max-width: 20ch; }
.rosa-insta .btn.rosa-btn { background: #fff; color: var(--rosa-ink); }
.rosa-insta .btn.rosa-btn:hover { background: var(--rosa-blush); }


/* ── store promises (homepage) ─────────────────────────────
   Three cards, each led by the one number that matters — 30%, Rs 5,000,
   XS–XL — so the offer reads at a glance before the sentence explains it. */
.perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.perk {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* A soft clay glow in the corner, echoing the hero's arch. */
.perk::before {
  content: ''; position: absolute; top: -70px; right: -70px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(185, 160, 140, .2), rgba(185, 160, 140, 0) 70%);
  pointer-events: none;
}
.perk:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--clay); }
.perk-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--bone-deep); color: var(--clay-deep);
  margin-bottom: 22px;
}
.perk-figure {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  font-size: clamp(1.9rem, 2.6vw, 2.4rem); font-weight: 600; line-height: 1; letter-spacing: -.03em;
  color: var(--ink); font-variant-numeric: lining-nums;
}
.perk-figure small {
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--clay-deep);
}
.perk h3 { margin-top: 16px; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.perk p:not(.perk-figure) { margin-top: 6px; font-size: .9rem; line-height: 1.65; color: var(--muted); }
.perk-link {
  margin-top: auto; padding-top: 20px;
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.perk-link span { transition: transform .25s var(--ease); }
.perk:hover .perk-link span, .perk-link:hover span { transform: translateX(4px); }
@media (max-width: 640px) {
  .perk { padding: 20px 20px 18px; }
  .perk-icon { width: 40px; height: 40px; margin-bottom: 14px; }
  .perk-figure { font-size: 1.75rem; }
  .perk h3 { margin-top: 10px; }
  .perk-link { padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .perk, .perk-link span { transition: none; }
  .perk:hover { transform: none; }
}
.band-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 5vw, 72px); }
.band-split img { aspect-ratio: var(--portrait); object-fit: cover; width: 100%; border-radius: var(--r); }
.band-copy h2 { max-width: 16ch; }

/* ── sets story band ───────────────────────────────────────
   Three different sets as a collage (one tall, two stacked) instead of a
   single close crop, capped so it never outgrows the screen. The copy
   column carries the pieces as a numbered list and a live count/price. */
.sets-band-inner {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(32px, 5vw, 88px);
}
.sets-collage {
  display: grid; gap: clamp(10px, 1.2vw, 16px);
  grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr;
  height: clamp(460px, 72vh, 700px);
}
.sets-collage-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; max-width: 520px; }
.sets-collage-2 { grid-template-rows: 1fr; }
.sets-shot {
  position: relative; overflow: hidden; display: block;
  border-radius: var(--r-lg); background: var(--paper);
}
.sets-shot-1 { grid-row: 1 / -1; }
.sets-shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  transition: transform .8s var(--ease);
}
.sets-shot:hover img { transform: scale(1.04); }
.sets-shot-label {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: 6px;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(6px);
  font-size: .78rem; color: var(--ink-soft);
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.sets-shot-label b { font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sets-shot:hover .sets-shot-label, .sets-shot:focus-visible .sets-shot-label { opacity: 1; transform: none; }

.sets-copy .eyebrow { margin-bottom: 14px; }
.sets-pieces { list-style: none; counter-reset: piece; margin-top: 26px; border-top: 1px solid var(--line); }
.sets-pieces li {
  counter-increment: piece;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.sets-pieces li::before {
  content: counter(piece, decimal-leading-zero);
  grid-row: 1 / span 2; padding-top: 1px;
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; color: var(--clay-deep);
}
.sets-pieces b { font-weight: 600; font-size: .98rem; }
.sets-pieces span { font-size: .88rem; color: var(--muted); }
.sets-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 28px; }
.sets-copy .sets-cta .btn { margin: 0; }

@media (hover: none) {
  .sets-shot-label { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sets-shot img, .sets-shot-label { transition: none; }
  .sets-shot:hover img { transform: none; }
}
@media (max-width: 900px) {
  .sets-band-inner { grid-template-columns: minmax(0, 1fr); }
  .sets-collage { height: clamp(380px, 92vw, 560px); }
}
@media (max-width: 480px) {
  .sets-collage { height: 118vw; }
  .sets-shot-label { left: 6px; right: 6px; bottom: 6px; padding: 6px 8px; font-size: .7rem; }
  .sets-shot-2 .sets-shot-label, .sets-shot-3 .sets-shot-label { flex-direction: column; gap: 0; }
}
.band-copy p { margin-top: 16px; }
.band-copy .btn { margin-top: 26px; }

/* ─── product page ───────────────────────────────────────────────────────── */

.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 68px); align-items: start; padding-top: clamp(28px, 4vw, 56px); }

.gallery { display: grid; gap: 10px; }
.gallery-main { position: relative; aspect-ratio: var(--portrait); background: var(--paper); border-radius: var(--r); overflow: hidden; outline: none; }
.gallery-main:focus-visible { box-shadow: 0 0 0 2px var(--clay-deep); }
.gallery-second { display: none; }

/* Wide screens: a full-width gallery column would make one 3:4 photo taller
   than the screen, so it shows two side by side (current + next) instead —
   the chevrons still step one photo at a time. */
@media (min-width: 1440px) {
  .pdp-multi { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .pdp-multi .gallery-main {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    aspect-ratio: auto; background: none; border-radius: 0; overflow: visible;
  }
  .pdp-multi .gallery-main > img {
    width: 100%; aspect-ratio: var(--portrait); object-fit: cover;
    border-radius: var(--r); background: var(--paper);
  }
  .pdp-multi .gallery-second { display: block; }
}
/* A single photo keeps one column, capped so it never outgrows the screen. */
@media (min-width: 1440px) {
  .pdp-single .gallery-main { max-width: calc((100vh - 140px) * .75); }
}

/* Chevrons stay visible — a hover-only control is invisible on touch and
   easy to miss with a mouse. */
.gallery-arrow {
  position: absolute; top: 50%; z-index: 2;
  width: 44px; height: 44px; margin-top: -22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  background: rgba(255, 255, 255, .88);
  border-radius: 50%;
  box-shadow: 0 4px 14px -4px rgba(36, 30, 26, .28);
  backdrop-filter: blur(6px);
  transition: opacity .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.gallery-arrow.prev { left: 14px; }
.gallery-arrow.next { right: 14px; }
.gallery-arrow:hover { background: var(--ink); color: var(--bone); }
.gallery-arrow:active { transform: scale(.94); }
.gallery-count {
  position: absolute; z-index: 2; right: 14px; bottom: 14px;
  padding: 4px 11px; border-radius: 99px;
  background: rgba(36, 30, 26, .62); color: var(--bone);
  font-size: .74rem; font-weight: 500; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.gallery-thumbs button { width: 72px; aspect-ratio: var(--portrait); border-radius: var(--r); overflow: hidden; border: 1px solid transparent; transition: border-color .2s ease; }
.gallery-thumbs button[aria-current='true'] { border-color: var(--clay-deep); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp-info { position: sticky; top: 100px; }
.pdp-crumbs { font-size: .8rem; color: var(--muted); margin-bottom: 14px; }
.pdp-crumbs a:hover { color: var(--ink); }
.pdp-tagline { font-family: var(--display); font-size: 1rem; font-weight: 400; color: var(--clay-deep); margin-bottom: 4px; }
.pdp-price { margin-top: 14px; font-size: 1.45rem; font-weight: 500; }
.pdp-price .was { color: var(--faint); text-decoration: line-through; font-size: 1rem; margin-right: 8px; }
.pdp-price .was[hidden] { display: none; }
.card-from { font-size: .8rem; font-weight: 400; color: var(--muted); margin-right: 4px; }
.pdp-desc { margin-top: 20px; color: var(--ink-soft); max-width: 54ch; }

.pdp-note {
  margin-top: 18px; padding: 12px 15px;
  background: var(--bone-deep); border-left: 2px solid var(--clay);
  font-size: .88rem; color: var(--ink-soft); border-radius: 0 var(--r) var(--r) 0;
}

/* Size selector — real radios, styled. Sold-out sizes stay visible but struck. */
.size-head { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 10px; }
.size-head h2 { font-family: var(--body); font-size: .88rem; font-weight: 400; letter-spacing: .02em; }
.size-row { display: flex; gap: 8px; flex-wrap: wrap; }
.size-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.size-opt span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); font-size: .88rem;
  cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.size-opt input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bone); }
.size-opt input:focus-visible + span { outline: 2px solid var(--clay-deep); outline-offset: 2px; }
.size-opt.sold span { color: var(--faint); text-decoration: line-through; cursor: not-allowed; background: transparent; }
.size-opt.sold input:checked + span { background: transparent; color: var(--faint); border-color: var(--line); }

.stock-note { margin-top: 10px; font-size: .82rem; color: var(--bad); min-height: 1.2em; }

.pdp-actions { margin-top: 22px; display: grid; gap: 10px; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.qty button { width: 40px; height: 44px; font-size: 1.1rem; color: var(--muted); }
.qty button:hover { color: var(--ink); }
.qty input { width: 44px; height: 44px; text-align: center; border: none; background: none; outline: none; font-size: .95rem; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input[type='number'] { -moz-appearance: textfield; }

.buy-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; }

/* Spec list — the brand talks in fabric, so fabric leads. */
.specs { margin-top: 30px; border-top: 1px solid var(--line); }
.spec { display: grid; grid-template-columns: 116px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.spec dt { color: var(--muted); }
.spec dd { color: var(--ink-soft); }

/* A set is a composition of pieces, not a sequence — list, don't number. */
.pieces { display: flex; flex-wrap: wrap; gap: 6px; }
.pieces li { list-style: none; font-size: .84rem; padding: 4px 11px; background: var(--bone-deep); border-radius: 99px; }

.pdp-help { margin-top: 24px; display: flex; gap: 18px; flex-wrap: wrap; font-size: .86rem; color: var(--muted); }
.pdp-help a { border-bottom: 1px solid var(--line); }
.pdp-help a:hover { color: var(--ink); border-color: var(--clay); }

/* ═══════════════════════ FILTERING ═══════════════════════
   One set of markup, two presentations: a sticky rail from 900px up, and a
   bottom sheet below it. Every control is an <a> carrying a fully-formed
   href, so filtering works with JavaScript disabled — the JS only animates
   the sheet. */

.page-head { padding-block: clamp(30px, 4.5vw, 54px) 24px; }
.page-head h1 { max-width: 20ch; }
.page-head p { margin-top: 12px; color: var(--muted); max-width: 56ch; font-size: .98rem; }

.crumbs { display: flex; gap: 9px; font-size: .74rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }

.shop-layout { display: grid; grid-template-columns: 246px minmax(0, 1fr); gap: clamp(28px, 3.4vw, 54px); align-items: start; padding-bottom: 20px; }
.shop-layout-bare { grid-template-columns: minmax(0, 1fr); }

/* ── the rail ─────────────────────────────────────────────────── */

.filter-rail {
  position: sticky; top: calc(var(--header-h) + 14px);
  max-height: calc(100vh - var(--header-h) - 34px);
  display: flex; flex-direction: column;
}
.filter-rail-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 13px; border-bottom: 1px solid var(--ink);
}
.filter-rail-head h2 {
  font-family: var(--body); font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; margin-right: auto;
}
.filter-clear { font-size: .78rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.filter-clear:hover { color: var(--bad); border-color: var(--bad); }
.filter-sheet-close { display: none; margin: -8px -8px -8px 0; }
.filter-rail-body {
  overflow-y: auto; overscroll-behavior: contain;
  padding-right: 10px; margin-right: -10px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.filter-rail-body::-webkit-scrollbar { width: 4px; }
.filter-rail-body::-webkit-scrollbar-track { background: transparent; }
.filter-rail-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.filter-rail-body:hover::-webkit-scrollbar-thumb { background: var(--clay); }
.filter-sheet-foot { display: none; }

/* ── one facet group ──────────────────────────────────────────── */

.facet { border-bottom: 1px solid var(--line-soft); }
.facet > summary {
  display: flex; align-items: center; gap: 9px;
  padding: 15px 0;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  cursor: pointer; list-style: none;
}
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary span { margin-right: auto; }
.facet > summary:hover { color: var(--clay-deep); }
.facet-chev { color: var(--faint); transition: transform .22s var(--ease); flex: none; }
.facet[open] > summary .facet-chev { transform: rotate(180deg); }

.facet-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px;
  background: var(--ink); color: var(--bone);
  font-style: normal; font-size: .7rem; font-weight: 700;
  border-radius: 99px;
}

/* ── list + swatch options ────────────────────────────────────── */

.facet-list { list-style: none; padding: 0 0 15px; margin: 0; }
.facet-list a, .facet-swatches a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  font-size: .89rem; color: var(--ink-soft);
  transition: color .15s var(--ease);
}
.facet-list a span, .facet-swatches a span { margin-right: auto; }
.facet-list a em, .facet-swatches a em {
  font-style: normal; font-size: .74rem; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.facet-list a:hover, .facet-swatches a:hover { color: var(--ink); }
.facet-list a.on, .facet-swatches a.on { color: var(--ink); font-weight: 600; }

/* A zero-count option stays clickable — it is the only way back out of a
   filter combination that found nothing. */
.facet-list a.empty, .facet-swatches a.empty, .size-chip.empty { opacity: .38; }

.tick {
  flex: none; width: 15px; height: 15px;
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--paper);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.facet-list a:hover .tick { border-color: var(--clay); }
.facet-list a.on .tick {
  background: var(--ink) no-repeat center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 3.9 7.6 8.5 2.6' fill='none' stroke='%23f6f2ec' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-color: var(--ink);
}

.facet-swatches { padding-bottom: 15px; }
.swatch-dot {
  flex: none; width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid rgba(36, 30, 26, .18);
  box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 0 var(--ink);
  transition: box-shadow .18s var(--ease);
}
.swatch.on .swatch-dot { box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 1.5px var(--ink); }
/* Prints have no single colour, so the chip reads as a pattern, not a lie. */
.swatch-dot.is-print {
  background: repeating-linear-gradient(45deg, var(--ink) 0 2px, var(--bone) 2px 4px);
}

/* ── size chips ───────────────────────────────────────────────── */

.facet-sizes { display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 16px; }
.size-chip {
  min-width: 42px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper);
  font-size: .81rem; font-weight: 500; text-align: center;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.size-chip:hover { border-color: var(--clay); }
.size-chip.on { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ── in-stock / on-sale switches ───────────────────────────────── */

.facet-toggles { border-bottom: none; padding: 16px 0 6px; display: grid; gap: 12px; }
.switch { display: flex; align-items: center; gap: 11px; font-size: .88rem; color: var(--ink-soft); }
.switch:hover { color: var(--ink); }
.switch-track {
  flex: none; width: 34px; height: 19px; border-radius: 99px;
  background: var(--line); position: relative;
  transition: background .2s var(--ease);
}
.switch-track b {
  position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--paper); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease);
}
.switch.on { color: var(--ink); font-weight: 600; }
.switch.on .switch-track { background: var(--ink); }
.switch.on .switch-track b { transform: translateX(15px); }

/* ── results bar ─────────────────────────────────────────────── */

.shop-bar {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--ink);
  margin-bottom: 18px;
}
.shop-count { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-right: auto; }

.btn-filter {
  display: none; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--ink); border-radius: var(--r);
  font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}

.sortmenu { position: relative; }
.sortmenu > summary {
  display: flex; align-items: center; gap: 7px;
  font-size: .82rem; color: var(--muted);
  cursor: pointer; list-style: none; white-space: nowrap;
}
.sortmenu > summary::-webkit-details-marker { display: none; }
.sortmenu > summary b { font-weight: 600; color: var(--ink); }
.sortmenu > summary svg { color: var(--faint); transition: transform .2s var(--ease); }
.sortmenu[open] > summary svg { transform: rotate(180deg); }
.sortmenu-pop {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 40;
  min-width: 208px; padding: 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-md);
}
.sortmenu-pop a { display: block; padding: 9px 12px; font-size: .86rem; border-radius: 2px; }
.sortmenu-pop a:hover { background: var(--bone); }
.sortmenu-pop a.on { font-weight: 600; background: var(--bone-deep); }

/* ── active filter chips ──────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.chip-active {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 13px;
  background: var(--bone-deep); border-radius: 99px;
  font-size: .79rem; font-weight: 500;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.chip-active svg { color: var(--faint); }
.chip-active:hover { background: var(--ink); color: var(--bone); }
.chip-active:hover svg { color: var(--bone); }
.chip-clear { align-self: center; font-size: .79rem; color: var(--muted); border-bottom: 1px solid var(--line); margin-left: 5px; }
.chip-clear:hover { color: var(--bad); border-color: var(--bad); }

/* Still used by the search-panel hint links. */
.chip { font-size: .8rem; padding: 6px 13px; border: 1px solid var(--line); border-radius: 99px; transition: .18s ease; }
.chip:hover { border-color: var(--clay); }
.chip.on { background: var(--ink); color: var(--bone); border-color: var(--ink); }

.select {
  appearance: none; -webkit-appearance: none;
  padding: 8px 34px 8px 13px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%23776b61' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-size: .85rem; cursor: pointer;
}

.pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 56px; }
.pager a, .pager span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: .88rem; border: 1px solid var(--line); border-radius: var(--r); }
.pager .on { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.pager a:hover { border-color: var(--clay); }

.empty { text-align: center; padding: clamp(56px, 9vw, 96px) 0; }
.empty h2 { margin-bottom: 10px; font-weight: 600; }
.empty p { color: var(--muted); margin-bottom: 26px; }
.empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ─── cart & checkout ────────────────────────────────────────────────────── */

.two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
/* Grid items are min-width:auto by default, so a wide table or a select inside
   a column sets a floor the column cannot shrink past, and the page scrolls
   sideways on a phone instead of .table-wrap scrolling inside it. */
.two-col > * { min-width: 0; }

.line-item { display: grid; grid-template-columns: 92px 1fr auto; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.line-item-img { aspect-ratio: var(--portrait); background: var(--paper); border-radius: var(--r); overflow: hidden; }
.line-item-img img { width: 100%; height: 100%; object-fit: cover; }
.line-item h3 { font-family: var(--display); font-size: .98rem; font-weight: 500; line-height: 1.35; letter-spacing: 0; }
.line-item .meta { margin-top: 3px; }
.line-item-controls { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.line-remove { display: inline-block; padding: 4px 0 2px; font-size: .82rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.line-remove:hover { color: var(--bad); border-color: var(--bad); }
.line-total { text-align: right; font-size: .98rem; white-space: nowrap; }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; }
.panel h2 { font-family: var(--display); font-size: 1.25rem; font-weight: 500; margin-bottom: 18px; }
.sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: .93rem; }
.sum-row.total { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 16px; font-size: 1.15rem; font-family: var(--display); font-weight: 600; }
.sum-note { margin-top: 14px; font-size: .82rem; color: var(--muted); }

.ship-meter { margin-top: 16px; }
.ship-meter-track { height: 3px; background: var(--line); border-radius: 99px; overflow: hidden; }
.ship-meter-fill { height: 100%; background: var(--clay); transition: width .4s ease; }
.ship-meter p { margin-top: 8px; font-size: .8rem; color: var(--muted); }

/* ─── forms ──────────────────────────────────────────────────────────────── */

.field { margin-bottom: 16px; }
.field label { display: block; font-size: .84rem; color: var(--muted); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; min-width: 0; padding: 12px 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  outline: none; font-size: .95rem;
  transition: border-color .18s ease;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--clay-deep); }
.field textarea { min-height: 110px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-hint { margin-top: 5px; font-size: .78rem; color: var(--faint); }

.errors { background: #f6e9e8; border-left: 2px solid var(--bad); padding: 13px 16px; margin-bottom: 20px; border-radius: 0 var(--r) var(--r) 0; }
.errors li { list-style: none; font-size: .88rem; color: var(--bad); }

/* Payment method — a real choice, so it gets real weight. */
.pay-opt { display: block; margin-bottom: 12px; cursor: pointer; }
.pay-opt input { position: absolute; opacity: 0; }
.pay-opt > div {
  padding: 16px 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pay-opt input:checked + div { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pay-opt input:focus-visible + div { outline: 2px solid var(--clay-deep); outline-offset: 2px; }
.pay-opt-fixed { cursor: default; }
.pay-opt-fixed > div { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pay-opt strong { font-weight: 500; font-size: .96rem; }
.pay-opt p { font-size: .84rem; color: var(--muted); margin-top: 4px; }
.pay-split { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; gap: 24px; font-size: .86rem; }
.pay-split b { display: block; font-family: var(--display); font-size: 1.12rem; font-weight: 600; }

/* ─── order confirmation ─────────────────────────────────────────────────── */

.confirm-head { text-align: center; padding-block: clamp(44px, 7vw, 80px) 34px; }
.confirm-head .order-no { display: inline-block; margin-top: 14px; padding: 8px 18px; background: var(--bone-deep); border-radius: 99px; font-size: .88rem; font-weight: 600; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.status-pill { display: inline-block; padding: 3px 11px; border-radius: 99px; font-size: .76rem; letter-spacing: .03em; background: var(--bone-deep); color: var(--ink-soft); }
.status-pill.pending { background: #f5efe2; color: #7a5c22; }
.status-pill.confirmed { background: #e8f0ea; color: var(--ok); }
.status-pill.shipped { background: #e7eef4; color: #2f5877; }
.status-pill.delivered { background: var(--ink); color: var(--bone); }
.status-pill.cancelled { background: #f6e9e8; color: var(--bad); }

.bank-card { background: var(--bone-deep); border-radius: var(--r); padding: 20px 22px; margin-top: 18px; }
.bank-card dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; font-size: .9rem; margin-top: 12px; }
.bank-card dt { color: var(--muted); }

/* ─── content pages ──────────────────────────────────────────────────────── */

.prose { max-width: 66ch; }
.prose h2 { font-size: 1.4rem; font-weight: 500; margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 14px; color: var(--ink-soft); }
.prose ul { margin: 0 0 16px 20px; color: var(--ink-soft); }
.prose li { margin-bottom: 6px; }

/* position: relative so absolutely-positioned children (e.g. .sr-only header
   labels) are clipped by the scroller instead of widening the whole page. */
.table-wrap { position: relative; overflow-x: auto; margin: 18px 0 32px; }
table.sizes { width: 100%; border-collapse: collapse; min-width: 440px; background: var(--paper); border-radius: var(--r); overflow: hidden; }
table.sizes th, table.sizes td { padding: 12px 16px; text-align: left; font-size: .9rem; border-bottom: 1px solid var(--line-soft); }
table.sizes th { background: var(--bone-deep); font-weight: 500; font-size: .84rem; }
table.sizes tr:last-child td { border-bottom: none; }

/* ─── footer ─────────────────────────────────────────────────────────────── */

.footer { background: var(--ink); color: var(--bone); margin-top: clamp(60px, 9vw, 120px); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; padding-block: clamp(46px, 6vw, 76px) 44px; }
.footer h3 { font-family: var(--body); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--clay); margin-bottom: 16px; }
.footer a { color: rgba(246, 242, 236, .76); font-size: .9rem; display: block; padding: 5px 0; transition: color .18s ease; }
.footer a:hover { color: var(--bone); }
.footer-brand .brandmark { justify-self: start; --mark-h: 46px; --mark-name: 1.1rem; --mark-tag: .58rem; }
.footer-brand p { margin-top: 14px; font-size: .9rem; color: rgba(246, 242, 236, .66); max-width: 34ch; }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(246, 242, 236, .22); border-radius: 50%; padding: 0; }
.footer-social a:hover { background: rgba(246, 242, 236, .1); }

.subscribe { display: flex; gap: 8px; margin-top: 14px; }
.subscribe input { flex: 1; min-width: 0; padding: 11px 13px; background: rgba(246, 242, 236, .08); border: 1px solid rgba(246, 242, 236, .2); border-radius: var(--r); color: var(--bone); outline: none; font-size: .88rem; }
.subscribe input::placeholder { color: rgba(246, 242, 236, .45); }
.subscribe input:focus { border-color: var(--clay); }
.subscribe button { padding: 11px 18px; background: var(--bone); color: var(--ink); border-radius: var(--r); font-size: .85rem; transition: background .18s ease; }
.subscribe button:hover { background: var(--clay); }

.footer-bottom { border-top: 1px solid rgba(246, 242, 236, .14); padding-block: 18px 26px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .82rem; color: rgba(246, 242, 236, .55); }
.footer-bottom a { display: inline; font-size: .82rem; }
.footer-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ─── floating WhatsApp ──────────────────────────────────────────────────── */

.wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  width: 52px; height: 52px; border-radius: 50%;
  background: #1f8a5b; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(31, 138, 91, .34);
  transition: transform .2s ease;
}
.wa:hover { transform: translateY(-2px); }

/* ─── bag toast ──────────────────────────────────────────────────────────── */

.toast {
  position: fixed; right: 20px; top: 92px; z-index: 110;
  width: min(330px, calc(100vw - 40px));
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 14px 40px rgba(36, 30, 26, .14);
  padding: 16px;
  display: grid; grid-template-columns: 58px 1fr; gap: 14px;
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast img { aspect-ratio: var(--portrait); object-fit: cover; border-radius: 2px; width: 100%; }
.toast strong { font-family: var(--display); font-size: .95rem; font-weight: 600; display: block; line-height: 1.35; }
.toast .meta { margin-top: 2px; }
.toast .btn { margin-top: 10px; width: 100%; padding: 9px; font-size: .84rem; }

/* ─── customer account ───────────────────────────────────────────────────────
   Same idea as the admin: a sticky rail on the left, the page on the right.
   Under 900px the profile card stays on top and the links become a
   horizontally scrolling tab row. */

.account-shell {
  display: grid; grid-template-columns: 272px minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px); align-items: start;
  padding-block: clamp(28px, 4vw, 52px) 64px;
}
.account-side {
  position: sticky; top: calc(var(--header-h) + 20px);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 12px 12px;
}
.account-card { display: flex; align-items: center; gap: 12px; padding: 0 8px 16px; border-bottom: 1px solid var(--line-soft); margin-bottom: 10px; }
.account-avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--bone);
  font-size: .95rem; font-weight: 600; letter-spacing: .04em;
}
.account-who { display: grid; gap: 1px; min-width: 0; }
.account-who b { font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-who span { font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account-nav { display: grid; gap: 2px; }
.account-nav a, .account-nav button {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border-radius: 8px;
  font-size: .88rem; font-weight: 500; color: var(--ink-soft); text-align: left;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.account-nav svg { flex: none; color: var(--muted); }
.account-nav a:hover, .account-nav button:hover { background: var(--bone); color: var(--ink); }
.account-nav a.on { background: var(--bone-deep); color: var(--ink); font-weight: 600; }
.account-nav a.on svg { color: var(--ink); }
.account-nav em {
  margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 10px;
  background: var(--bone-deep); color: var(--ink-soft);
  font-style: normal; font-size: .72rem; font-weight: 600; text-align: center;
}
.account-nav a.on em { background: var(--ink); color: var(--bone); }
.account-nav-help, .account-nav form { border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 6px; }
.account-nav form + * { border-top: 0; }
.account-nav-help + form { border-top: 0; margin-top: 0; padding-top: 0; }

.account-main { min-width: 0; display: grid; gap: 20px; align-content: start; }
.account-head h1 { margin-bottom: 6px; }
.account-head p { color: var(--muted); font-size: .92rem; }

.account-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.account-stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; }
.account-stat b { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.account-stat span { font-size: .8rem; color: var(--muted); }

.account-panel { border-radius: var(--r-lg); }
.account-panel h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 14px; }
.account-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.account-panel-head h2 { margin: 0; }
.account-panel-head a { font-size: .84rem; }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.account-form { max-width: 760px; }

.account-orders { list-style: none; }
.account-orders li + li { border-top: 1px solid var(--line-soft); }
.account-orders a {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 6px 16px;
  padding: 13px 4px;
}
.account-orders a:hover .account-order-no { text-decoration: underline; text-underline-offset: 3px; }
.account-order-no { font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; }
.account-order-total { font-weight: 500; font-variant-numeric: tabular-nums; }

.account-address { font-style: normal; line-height: 1.7; color: var(--ink-soft); font-size: .92rem; }
.account-address b { color: var(--ink); font-weight: 600; }
.account-dl { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px 14px; font-size: .9rem; }
.account-dl dt { color: var(--muted); }
.account-dl dd { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .account-shell { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .account-side { position: static; padding: 14px 10px 8px; }
  .account-nav {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -10px; padding: 0 10px 6px;
  }
  .account-nav::-webkit-scrollbar { display: none; }
  .account-nav a, .account-nav button { width: auto; flex: none; white-space: nowrap; padding: 8px 12px; border: 1px solid var(--line); }
  .account-nav-help, .account-nav form { border-top: 0; margin-top: 0; padding-top: 0; }
  .account-nav form { flex: none; }
}
@media (max-width: 640px) {
  .account-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .account-stats .account-stat:last-child { grid-column: 1 / -1; }
  .account-grid { grid-template-columns: minmax(0, 1fr); }
  .account-orders a { grid-template-columns: 1fr auto; }
  .account-orders .meta { grid-column: 1; grid-row: 2; }
  .account-orders .status-pill { grid-column: 2; grid-row: 2; justify-self: end; }
}

/* ─── admin ──────────────────────────────────────────────────────────────── */

.admin { background: #f4f1ec; min-height: 100vh; --side-w: 240px; }

/* Shopify-style shell: fixed rail on the left, content scrolls on the right.
   Under 900px the rail becomes an off-canvas drawer opened from the top bar. */
.admin-side {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: var(--side-w);
  display: flex; flex-direction: column;
  background: var(--bone-deep); border-right: 1px solid var(--line);
  padding: 18px 12px 14px;
  overflow-y: auto;
}
.admin-side-brand { justify-self: start; --mark-h: 30px; --mark-name: .8rem; gap: 10px; padding: 4px 10px 20px; }

.admin-nav { display: grid; gap: 2px; }
.admin-nav a, .admin-side-foot a, .admin-side-foot button {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 10px; border-radius: 8px;
  font-size: .88rem; font-weight: 500; color: var(--ink-soft);
  text-align: left;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.admin-nav a svg, .admin-side-foot svg { flex: none; color: var(--muted); }
.admin-nav a:hover, .admin-side-foot a:hover, .admin-side-foot button:hover { background: rgba(36, 30, 26, .06); color: var(--ink); }
.admin-nav a.on { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(36, 30, 26, .08); }
.admin-nav a.on svg { color: var(--ink); }
.admin-nav a.admin-subnav { padding: 6px 10px 6px 39px; font-size: .84rem; font-weight: 400; color: var(--muted); background: none; box-shadow: none; }
.admin-nav a.admin-subnav:hover, .admin-nav a.admin-subnav.on { color: var(--ink); }
.admin-nav a.admin-subnav.on { font-weight: 600; }
.admin-badge {
  margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 10px;
  background: var(--ink); color: var(--bone);
  font-style: normal; font-size: .72rem; font-weight: 600; text-align: center; line-height: 1.5;
}
.admin-side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.admin-side-foot small { display: block; font-size: .74rem; font-weight: 400; color: var(--faint); }

.admin-body { margin-left: var(--side-w); min-width: 0; }
.admin-body .flash { text-align: left; padding: 12px 32px; }
.admin-content { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

.admin-topbar { display: none; }
.admin-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(36, 30, 26, .38); }

@media (max-width: 900px) {
  .admin-topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 8px;
    height: 56px; padding: 0 10px;
    background: var(--bone-deep); border-bottom: 1px solid var(--line);
  }
  .admin-topbar .brandmark { justify-self: start; --mark-h: 26px; --mark-name: .76rem; gap: 9px; }
  .admin-menu-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; color: var(--ink); }
  .admin-menu-btn:hover { background: rgba(36, 30, 26, .06); }
  .admin-side { transform: translateX(-100%); visibility: hidden; transition: transform .25s var(--ease), visibility 0s .25s; }
  .admin-side.open { transform: none; visibility: visible; transition: transform .25s var(--ease); box-shadow: 8px 0 30px rgba(36, 30, 26, .18); }
  .admin-body { margin-left: 0; }
  .admin-content { padding: 0 var(--gutter); }
  .admin-body .flash { padding: 12px var(--gutter); }
}
@media (prefers-reduced-motion: reduce) { .admin-side, .admin-side.open { transition: none; } }

.admin-main { padding: 34px 0 70px; }
.admin-main h1 { font-size: 1.7rem; font-weight: 600; margin-bottom: 22px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 34px; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.stat b { display: block; font-family: var(--display); font-size: 1.75rem; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.stat span { font-size: .8rem; color: var(--muted); }
.stat.alert b { color: var(--bad); }

.data-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.data-table th, .data-table td { padding: 12px 14px; text-align: left; font-size: .88rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.data-table th { background: var(--bone-deep); font-weight: 500; font-size: .8rem; color: var(--ink-soft); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #fdfcfa; }
.data-table img { width: 40px; aspect-ratio: var(--portrait); object-fit: cover; border-radius: 2px; }

.admin-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; margin-bottom: 20px; }
.admin-card h2 { font-size: 1.12rem; font-weight: 600; margin-bottom: 16px; }

.admin-warn {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 12px 32px; background: #f6e9e8; color: var(--bad); font-size: .88rem;
  border-bottom: 1px solid #ecd3d0;
}
.admin-warn b { font-weight: 600; }
.admin-warn-link { margin-left: auto; font-weight: 600; color: var(--bad); border-bottom: 1px solid currentColor; }
.admin-side-foot a.on { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(36, 30, 26, .08); }
.admin-side-foot a.on svg { color: var(--ink); }
.settings-body { display: grid; gap: 0; max-width: 820px; }
.settings-dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px 18px; font-size: .92rem; }
.settings-dl dt { color: var(--muted); }
.settings-form { max-width: 640px; }
.settings-show { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 4px 0 18px; font-size: .86rem; cursor: pointer; }
.settings-show input { accent-color: var(--ink); }
@media (max-width: 900px) { .admin-warn { padding: 12px var(--gutter); } }
@media (max-width: 640px) { .settings-dl { grid-template-columns: 1fr; gap: 2px; } .settings-dl dd { margin-bottom: 10px; } }

/* Admin list pages: heading row, search + filter toolbar, row actions */
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-head h1 { margin: 0; }
.admin-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px; margin-bottom: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.admin-search { position: relative; flex: 1 1 280px; min-width: 0; }
.admin-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.admin-search input {
  width: 100%; padding: 10px 12px 10px 38px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bone); font: inherit; font-size: .9rem; outline: none;
}
.admin-search input:focus { border-color: var(--ink); background: var(--paper); }
.admin-toolbar select {
  flex: 0 1 auto; padding: 10px 30px 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); font: inherit; font-size: .86rem; max-width: 100%;
}
.admin-toolbar .btn { flex: none; }
.admin-clear { font-size: .84rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.admin-clear:hover { color: var(--ink); }
.admin-count { margin: 0 0 12px; min-height: 1.2em; }
.admin-empty { text-align: center; padding: 48px 24px; }
.admin-noimg { display: block; width: 40px; aspect-ratio: var(--portrait); background: var(--bone-deep); border-radius: 2px; }
/* On a phone the table scrolls inside its box rather than crushing columns. */
.admin-products { min-width: 760px; }
.admin-products td:nth-child(2) { min-width: 200px; }
.admin-products td:first-child { width: 56px; min-width: 56px; }
.admin-products td:first-child a, .admin-products td:first-child img { display: block; width: 40px; }
.admin-products .status-pill { white-space: nowrap; }
.admin-products .link-rule { overflow-wrap: normal; }
.admin-actions { white-space: nowrap; text-align: right; }
.admin-actions form { display: inline; }
.admin-actions > * + * { margin-left: 12px; }
.admin-edit { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; }
.admin-link { font-size: .84rem; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.admin-link:hover { color: var(--ink); border-color: var(--ink); }
.admin-link-bad:hover { color: var(--bad); border-color: var(--bad); }
.admin-pager { margin-top: 24px; }
.admin-pager .gap { border: 0; color: var(--muted); }
@media (max-width: 640px) {
  .admin-toolbar select { flex: 1 1 calc(50% - 5px); }
  .admin-toolbar .btn { flex: 1 1 100%; }
  .admin-actions > * + * { margin-left: 8px; }
}

/* ── Customer order page: advance payment ─────────────────
   The slip is the one bold element: a paper deposit slip with a perforated
   top edge, the amount set large, account numbers in tabular figures with a
   copy button each. Everything around it stays quiet. */
.pay-steps {
  list-style: none; counter-reset: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  max-width: 760px; margin: 0 auto 36px;
}
.pay-steps li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; font-size: .86rem; color: var(--muted);
}
.pay-steps li + li::before {
  content: ''; position: absolute; top: 15px; right: calc(50% + 22px); width: calc(100% - 44px);
  height: 2px; background: var(--line);
}
.pay-steps li.done + li::before, .pay-steps li.done::before { background: var(--ok); }
.pay-step-dot {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--paper); font-weight: 600; font-size: .86rem; color: var(--muted);
}
.pay-steps li.current { color: var(--ink); font-weight: 500; }
.pay-steps li.current .pay-step-dot { border-color: var(--ink); background: var(--ink); color: var(--bone); }
.pay-steps li.done { color: var(--ok); }
.pay-steps li.done .pay-step-dot { border-color: var(--ok); background: var(--ok); color: #fff; }

.pay-panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px); margin-bottom: 20px;
}
.pay-panel h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 14px; }
.pay-panel h2:not(:first-child) { margin-top: 30px; }
.pay-panel-ok { border-color: #c9dccb; background: #f3f8f3; }
.pay-panel-quiet p { margin-bottom: 10px; }

.pay-slip {
  position: relative; background: var(--bone); border-radius: 0 0 12px 12px;
  padding: 22px 22px 18px; margin-top: 10px;
}
/* perforation */
.pay-slip::before {
  content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
  background: radial-gradient(circle at 6px 8px, transparent 5px, var(--bone) 5.5px) 0 0 / 12px 8px repeat-x;
}
.pay-slip-amount { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding-bottom: 16px; border-bottom: 1px dashed #d6cbbd; }
.pay-slip-amount span { font-size: .88rem; color: var(--ink-soft); }
.pay-slip-amount b { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; line-height: 1; }
.pay-slip-rows { display: grid; margin-top: 6px; }
.pay-slip-rows > div {
  display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid #e6ddd2; font-size: .92rem;
}
.pay-slip-rows > div:last-child { border-bottom: 0; }
.pay-slip-rows dt { color: var(--muted); font-size: .84rem; }
.pay-slip-rows dd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 500; }
.pay-slip-rows dd small { display: block; width: 100%; font-weight: 400; font-size: .8rem; color: var(--muted); }
.pay-mono { font-variant-numeric: tabular-nums; letter-spacing: .04em; overflow-wrap: anywhere; }
.pay-copy {
  flex: none; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--ink);
  font-size: .76rem; font-weight: 600; color: var(--ink); background: var(--paper);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.pay-copy:hover { background: var(--ink); color: var(--bone); }
.pay-copy.is-copied { background: var(--ok); border-color: var(--ok); color: #fff; }
.pay-slip-note { margin-top: 12px; font-size: .82rem; color: var(--muted); }

.pay-upload .pay-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px 16px; border: 2px dashed var(--line); border-radius: 12px; background: var(--bone);
  text-align: center; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.pay-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pay-drop:hover, .pay-drop:focus-within { border-color: var(--ink); background: var(--paper); }
.pay-drop.has-file { border-style: solid; border-color: var(--ok); background: #f3f8f3; }
.pay-drop-text { font-weight: 500; font-size: .94rem; overflow-wrap: anywhere; }
.pay-drop-hint { font-size: .78rem; color: var(--muted); }
.pay-drop-small { padding: 16px; margin: 12px 0; }
.pay-upload .btn-block { margin-top: 4px; }
.pay-alt { margin-top: 14px; font-size: .86rem; color: var(--muted); text-align: center; }
.pay-alert { margin-bottom: 20px; padding: 14px 16px; border-radius: 10px; background: #f6e9e8; color: var(--bad); }
.pay-alert b { display: block; margin-bottom: 4px; }
.pay-alert p { color: var(--ink-soft); }
.pay-replace summary { cursor: pointer; font-size: .88rem; color: var(--ink-soft); }
.pay-link { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.pay-link .meta { margin-bottom: 6px; }

@media (max-width: 640px) {
  .pay-steps li { font-size: .76rem; }
  .pay-slip { padding: 18px 16px 14px; }
  .pay-slip-rows > div { grid-template-columns: 1fr; gap: 4px; }
}

.order-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.order-tabs a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px;
  background: var(--paper); border: 1px solid var(--line); font-size: .86rem; color: var(--ink-soft);
}
.order-tabs a span { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.order-tabs a:hover { border-color: var(--ink); color: var(--ink); }
.order-tabs a.on { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.order-tabs a.on span { color: rgba(246, 242, 236, .7); }
.order-tabs a.attention:not(.on) { border-color: #9dbad0; background: #e7eef4; color: #2f5877; font-weight: 600; }

/* Admin order page: advance payment panel */
.pay-admin { border-width: 1px; }
.pay-admin-review { border-color: #9dbad0; box-shadow: 0 0 0 3px #e7eef4; }
.pay-admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pay-admin-head h2 { margin: 0; }
.pay-admin-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.pay-admin-figures > div { padding: 12px 14px; border-radius: 8px; background: var(--bone); }
.pay-admin-figures span { display: block; font-size: .76rem; color: var(--muted); }
.pay-admin-figures b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pay-admin-proof { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 18px; }
.pay-admin-proof p { font-size: .9rem; margin-bottom: 6px; }
.pay-admin-thumb { display: block; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bone); }
.pay-admin-thumb img { width: 100%; max-height: 260px; object-fit: contain; object-position: top; }
.pay-admin-pdf { display: grid; place-items: center; height: 120px; font-weight: 700; color: var(--bad); }
.pay-admin-rejected { margin-top: 8px; color: var(--bad); }
.pay-admin-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.btn.pay-verify { background: var(--ok); }
.btn.pay-verify:hover { background: #3a5840; }
.pay-admin-reject { flex: 1 1 280px; }
.pay-admin-reject summary { cursor: pointer; font-size: .86rem; color: var(--bad); padding: 8px 0; }
.pay-admin-reject form { display: grid; gap: 8px; margin-top: 8px; }
.pay-admin-reject label { font-size: .8rem; color: var(--muted); }
.pay-admin-reject input { padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: .88rem; }
.pay-admin-reject .btn { justify-self: start; }
.pay-admin-link { margin-top: 14px; }
@media (max-width: 640px) {
  .pay-admin-figures { grid-template-columns: 1fr 1fr; }
  .pay-admin-proof { grid-template-columns: 1fr; }
}

/* Order page: WhatsApp message to the customer */
.wa-send { display: flex; align-items: center; justify-content: center; gap: 8px; }
.wa-preview { margin-top: 12px; font-size: .84rem; }
.wa-preview > summary { cursor: pointer; color: var(--ink-soft); }
.wa-preview pre {
  margin: 10px 0 8px; padding: 12px 14px; max-height: 360px; overflow: auto;
  background: #e7f6e3; border-radius: 8px 8px 8px 2px;
  font-family: var(--body); font-size: .8rem; line-height: 1.55; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Search engine listing editor */
.seo-preview {
  display: grid; gap: 3px; margin-bottom: 18px; padding: 14px 16px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  font-family: Arial, sans-serif;
}
.seo-preview-url { font-size: .78rem; color: #4d5156; overflow-wrap: anywhere; }
.seo-preview-title { font-size: 1.1rem; line-height: 1.3; color: #1a0dab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-preview-desc { font-size: .84rem; line-height: 1.5; color: #4d5156; }
.seo-count { float: right; font-size: .74rem; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.seo-count.over { color: var(--bad); font-weight: 600; }
.seo-box textarea { min-height: 84px; }
.seo-details { margin: 6px 0 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.seo-details > summary { cursor: pointer; font-weight: 600; font-size: .92rem; margin-bottom: 14px; }
.seo-page { padding-top: 18px; padding-bottom: 18px; }
.seo-page > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.seo-page > summary::-webkit-details-marker { display: none; }
.seo-page[open] > summary { margin-bottom: 18px; }
.seo-page-name { font-weight: 600; }
.seo-page-name .meta { font-weight: 400; margin-left: 6px; }
.settings-crumb { font-size: .84rem; color: var(--muted); margin-bottom: 6px; }
.settings-crumb a { color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.settings-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: border-color .2s var(--ease); }
.settings-link b { display: block; font-weight: 600; margin-bottom: 2px; }
.settings-link:hover { border-color: var(--clay); }

.login-remember { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 20px; font-size: .88rem; cursor: pointer; }
.login-remember input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--ink); flex: none; }
.login-remember small { display: block; margin-top: 2px; font-size: .76rem; color: var(--muted); line-height: 1.45; }

.cat-move {
  width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink-soft); font-size: .9rem; line-height: 1;
}
.cat-move:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.cat-move:disabled { opacity: .3; cursor: default; }

.variant-rows { display: grid; gap: 8px; }
.variant-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 34px; gap: 8px; align-items: center; }
.variant-row input { min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); outline: none; font-size: .88rem; }
.variant-row button { color: var(--muted); font-size: 1.2rem; width: 34px; height: 34px; }
.variant-row button:hover { color: var(--bad); }

.img-manage { display: flex; gap: 10px; flex-wrap: wrap; }
.img-manage label { position: relative; width: 82px; }
.img-manage img { width: 100%; aspect-ratio: var(--portrait); object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); }
.img-manage input { position: absolute; top: 5px; left: 5px; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; background: var(--bone); }
.login-box { width: 100%; max-width: 380px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 34px; }
.login-box .brandmark { display: flex; margin: 0 auto 18px; --mark-h: 62px; --mark-name: 1rem; }
.login-box h1 { font-size: 1.35rem; font-weight: 600; text-align: center; margin-bottom: 22px; }

/* ── mobile: the rail becomes a bottom sheet ────────────────────────
   Same markup, repositioned. The sheet is kept in the DOM and translated
   rather than toggled with `display`, so it animates and so the browser
   restores its scroll position between filter clicks. */

.scrim-filter { z-index: 88; }

@media (max-width: 900px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .btn-filter { display: inline-flex; }

  .filter-rail {
    position: fixed; inset: auto 0 0 0; z-index: 92;
    max-height: 86vh; max-height: 86dvh;
    background: var(--bone);
    border-radius: 14px 14px 0 0;
    box-shadow: var(--shadow-lg);
    transform: translateY(101%);
    transition: transform .34s var(--ease);
    padding: 0 var(--gutter);
  }
  .filter-rail.open { transform: translateY(0); }

  /* The grab handle. */
  .filter-rail-head {
    position: relative;
    padding: 26px 0 14px;
    border-bottom: 1px solid var(--line);
  }
  .filter-rail-head::before {
    content: ''; position: absolute; top: 10px; left: 50%;
    width: 38px; height: 4px; margin-left: -19px;
    background: var(--line); border-radius: 99px;
  }
  .filter-rail-head h2 { font-size: .8rem; }
  .filter-sheet-close { display: inline-flex; }

  .filter-rail-body { padding-bottom: 8px; -webkit-overflow-scrolling: touch; }

  .filter-sheet-foot {
    display: block;
    padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--bone);
  }

  /* Bigger hit targets once this is a thumb interface. */
  .facet-list a, .facet-swatches a { padding: 11px 0; font-size: .95rem; }
  .size-chip { min-width: 52px; padding: 11px 14px; font-size: .88rem; }
  .switch { padding: 5px 0; font-size: .95rem; }
}

/* ─── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1140px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* The inline nav needs ~1140px to sit on one line beside a centred logo.
     Below that it hands over to the burger rather than wrapping. */
  .nav { display: none; }
  .burger { display: flex; }
  .masthead-inner { grid-template-columns: auto 1fr auto; }
}

@media (max-width: 900px) {
  :root { --gutter: 18px; }
  .nav { display: none; }
  .burger { display: flex; }
  .masthead-inner { grid-template-columns: auto 1fr auto; min-height: 64px; }
  .brandmark { --mark-h: 32px; --mark-name: .86rem; gap: 9px; }
  .brandmark em { display: none; }
  .pdp { grid-template-columns: 1fr; }
  .pdp-info { position: static; }
  .two-col { grid-template-columns: 1fr; }
  .band-split { grid-template-columns: 1fr; }
  .band-split img { max-height: 420px; }
  /* Full-bleed: photo fills the first screen, copy rides a bottom-weighted
     ink gradient so the heading and CTA are visible without scrolling. The
     gradient is strong enough to hold bone text over any photograph. */
  .hero-slide {
    grid-template-columns: 1fr;
    min-height: clamp(500px, calc(100svh - 130px), 760px);
  }
  .hero-visual { grid-column: 1; grid-row: 1; }
  .hero-frame { inset: 0; width: auto; max-width: none; aspect-ratio: auto; transform: none; }
  .hero-frame::before, .hero-inset { display: none; }
  .hero-figure { border-radius: 0; }
  .hero-figure::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(24, 19, 16, .86) 0%, rgba(24, 19, 16, .6) 40%, rgba(24, 19, 16, 0) 76%);
  }
  .hero-tag { top: 18px; right: var(--gutter); max-width: 180px; padding: 9px 13px 10px; font-size: .74rem; }

  .hero-copy {
    grid-column: 1; grid-row: 1; z-index: 1;
    justify-content: flex-end;
    padding: 0 var(--gutter) 78px;
    color: var(--bone);
  }
  .hero-copy h1, .hero-copy h2 { max-width: 15ch; color: var(--bone); }
  .hero-copy .display-xl { font-size: clamp(1.9rem, 7.4vw, 2.6rem); }
  .hero-kicker { margin-bottom: 14px; }
  .hero-kicker .eyebrow { color: rgba(246, 242, 236, .82); }
  .hero-count { color: var(--bone); border-color: rgba(246, 242, 236, .3); font-size: .95rem; }
  .hero-count i { color: rgba(246, 242, 236, .6); }
  .hero-body { color: rgba(246, 242, 236, .86); margin-top: 14px; }
  .hero-actions { margin-top: 24px; }
  .hero-copy .btn { background: var(--bone); color: var(--ink); }
  .hero-copy .btn:hover { background: var(--paper); }
  .hero-copy .btn-ghost { background: transparent; color: var(--bone); border-color: rgba(246, 242, 236, .7); }
  .hero-copy .btn-ghost:hover { background: var(--bone); color: var(--ink); }

  .hero-controls { left: var(--gutter); right: var(--gutter); bottom: 26px; justify-content: space-between; }
  .hero-dots i { background: rgba(246, 242, 236, .3); }
  .hero-dots i::after { background: var(--bone); }
  .hero-arrows { display: none; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  :root { --header-h: 64px; }
}

@media (max-width: 640px) {
  body { font-size: 14.5px; }

  /* admin */
  .admin-main { padding: 24px 0 56px; }
  .admin-main h1 { font-size: 1.4rem; }
  .admin-card { padding: 18px 16px; }
  .admin-card h2 { font-size: 1.02rem; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 14px; }
  .stat b { font-size: 1.4rem; }
  .data-table th, .data-table td { padding: 10px; font-size: .82rem; }
  .table-wrap { margin: 14px 0 22px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-name { font-size: .86rem; }
  .card-sizes { display: none; }
  /* Body copy would push the CTA off the first screen; the heading carries it. */
  .hero-body { display: none; }
  .hero-actions { margin-top: 20px; gap: 9px; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; padding-left: 18px; padding-right: 18px; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .line-item { grid-template-columns: 72px 1fr; }
  .line-total { grid-column: 2; text-align: left; margin-top: 6px; }
  .buy-row { grid-template-columns: 1fr; }
  /* Size / price / stock is a table, and the header row above it is the only
     thing naming the columns. Wrapping it to two columns puts stock under
     "Size" and the remove button under "Price", so the row stays four-up and
     the cells tighten instead — the inputs hold four digits at this size. */
  .variant-row { grid-template-columns: 1fr 1fr 1fr 1fr 28px; gap: 6px; }
  .variant-row input { padding: 9px 7px; font-size: .84rem; }
  .variant-row button { width: 28px; height: 28px; font-size: 1.05rem; }
  .toast { right: 12px; left: 12px; width: auto; top: 80px; }
  .wa { right: 14px; bottom: 14px; }

  .shop-bar { gap: 10px; }
  .sortmenu > summary .sortmenu-label { display: none; }
  .sortmenu > summary b { font-size: .8rem; }
  .shop-count { font-size: .78rem; }
  .crumbs { font-size: .72rem; }
  /* The floating WhatsApp button would sit on top of the sheet's CTA. */
  body.filters-open .wa { opacity: 0; pointer-events: none; }
}

/* ─── very small phones (Galaxy Fold cover, iPhone SE 1st gen) ─────────────
   The masthead carries a burger, three 40px tap targets and a nowrap
   wordmark. At 320px those do not fit, and the grid gap is the right thing
   to give way — shrinking the tap targets below 40px is the worse trade. */

@media (max-width: 380px) {
  .masthead-inner { gap: 8px; }
  .brandmark { --mark-name: .76rem; gap: 7px; }
  .brandmark b { letter-spacing: .2em; text-indent: .2em; }
}