/* ============================================================================
   ARJEEV — storefront styles
   Palette is derived from the brand logo: rgb(15,0,67) indigo, white marks,
   with a champagne gold pulled in for the ethnic-premium register that the
   Manyavar reference sets. Layout density and controls follow Myntra.
   The site deliberately commits to one light, ivory look — no dark mode.
   ========================================================================= */

:root {
  --ink: #0f0043;
  --ink-deep: #080026;
  --ink-soft: #2a1f5c;
  --ink-wash: #f2effa;

  --gold: #c9a227;
  --gold-soft: #dfc175;
  --gold-wash: #fbf5e6;

  --paper: #fbf9f6;
  --surface: #ffffff;
  --line: #e7e3ef;
  --line-strong: #d3ccdf;
  --muted: #6b6685;
  --text: #1a1533;

  --ok: #1f7a4d;
  --warn: #9a6b00;
  --danger: #b3261e;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(15, 0, 67, 0.06), 0 2px 8px rgba(15, 0, 67, 0.04);
  --shadow-md: 0 8px 30px rgba(15, 0, 67, 0.1);
  --shadow-lg: 0 24px 60px rgba(15, 0, 67, 0.16);

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --header-h: 68px;
  --wrap: 1280px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Tapping controls should feel instant, not show the grey flash. */
  -webkit-tap-highlight-color: transparent;
}

/* Momentum scrolling + no accidental horizontal rubber-banding on iOS. */
body { overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; }

/* On phones, any text-entry control must render at >=16px or iOS Safari zooms
   the whole page the moment it is focused. Scoped so it never disturbs the
   deliberately smaller desktop control typography. */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 8px;
  transition: top .18s ease;
}
.skip-link:focus { top: 0; }

/* ---------------------------------------------------------------------------
   Curtain — first-paint animation
   Its RESTING state is hidden, and the animation is what makes it briefly
   appear. That ordering is the safety property: this element is opaque and
   covers the whole viewport, so it must never be able to persist. If the
   animation never advances, or JS never loads, the curtain simply does not
   show and the shop is visible immediately — instead of a blank indigo screen.
   JS still cancels it early via .is-done for a snappier feel.
   ------------------------------------------------------------------------ */
.curtain {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center;
  background: var(--ink);
  opacity: 0; visibility: hidden; pointer-events: none;
  /* CSS-only safety path: appear, hold through the whole intro (mark ~1s, gold
     rule ~1.25s, tag ~1.3s), then fade out. If JS runs it takes over at the
     same moment with the same kind of fade — see dismissCurtain() in app.js. */
  animation: curtainShow 2s cubic-bezier(.4, 0, .2, 1);
}
@keyframes curtainShow {
  0%,
  66%  { opacity: 1; visibility: visible; }   /* hold 0 → ~1.32s */
  100% { opacity: 0; visibility: visible; }   /* fade ~1.32 → 2s */
}
.curtain__inner { text-align: center; transform: translateY(-6px); }
.curtain__mark {
  width: min(46vw, 260px); color: #fff;
  opacity: 0; animation: markIn 1s cubic-bezier(.22, .8, .3, 1) forwards;
}
.curtain__rule {
  height: 1px; margin: 22px auto 0; width: 0;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
  animation: ruleOut .9s .35s cubic-bezier(.22, .8, .3, 1) forwards;
}
.curtain__tag {
  margin-top: 14px; font-size: 10px; letter-spacing: .42em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5);
  opacity: 0; animation: fadeIn .6s .7s forwards;
}
@keyframes markIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes ruleOut { to { width: min(52vw, 300px); } }
@keyframes fadeIn { to { opacity: 1; } }

/* Content settles in as it arrives.
   The element's RESTING state is visible — no opacity:0 base, no fill mode
   holding a hidden start frame, no delay. That is deliberate and is the whole
   point of this block: anything that needs an animation to *complete* before
   the content can be seen fails exactly like content that needs JavaScript.
   An animation that never advances (throttled renderer, unusual engine, an
   overridden motion preference) would leave a shop full of invisible products.
   Here the worst case is simply no animation. */
.reveal { animation: revealUp .7s cubic-bezier(.22, .8, .3, 1); }
@keyframes revealUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------ */
.announce {
  background: var(--ink-deep); color: rgba(255, 255, 255, .82);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  text-align: center; padding: 8px 16px;
}
.announce b { color: var(--gold-soft); font-weight: 600; }

.header {
  position: sticky; top: 0; z-index: 60;
  background: var(--ink); color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
.header__bar {
  display: flex; align-items: center; gap: 18px;
  min-height: var(--header-h);
  /* Full-bleed: overrides the shared .wrap max-width so the logo hugs the left
     edge and the icons the right edge, with a symmetric gutter, instead of
     sitting inset against the 1280px content column on wide screens. */
  width: 100%; max-width: none; margin: 0;
  padding-inline: clamp(20px, 3vw, 48px);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 6px 0; flex: 0 0 auto; }
.brand__mark { width: 94px; color: #fff; }
.brand__by {
  font-size: 8.5px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255, 255, 255, .48); border-left: 1px solid rgba(255, 255, 255, .2);
  padding-left: 11px; line-height: 1.35; white-space: nowrap;
}

.nav { display: flex; gap: 4px; margin-left: 8px; flex: 1 1 auto; }
.nav a {
  position: relative; padding: 10px 13px; border-radius: 8px;
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82); white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}
.nav a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 1.5px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.22, .8, .3, 1);
}
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* -11px cancels the last icon button's right padding so its glyph lines up
   with the gutter edge, matching the logo's flush-left edge on the other side. */
.header__tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-right: -11px; }

.search {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px; padding: 7px 14px; min-width: 210px;
  transition: background .2s ease, border-color .2s ease, min-width .25s ease;
}
.search:focus-within { background: rgba(255, 255, 255, .16); border-color: var(--gold-soft); min-width: 280px; }
.search input {
  border: 0; background: transparent; color: #fff; font-size: 13.5px; width: 100%; outline: none;
}
.search input::placeholder { color: rgba(255, 255, 255, .5); }
.search svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: .7; }

.icon-btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 11px; border: 0; background: transparent; cursor: pointer;
  border-radius: 10px; color: rgba(255, 255, 255, .85);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  transition: color .18s ease, background .18s ease;
  position: relative; text-decoration: none;
}
.icon-btn:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.icon-btn svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute; top: 2px; right: 4px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: var(--gold); color: var(--ink-deep);
  font-size: 10px; font-weight: 700; letter-spacing: 0;
  display: grid; place-items: center;
}
.cart-count[hidden] { display: none; }

/* -11px cancels the hamburger's own left padding so, when it is the leftmost
   element (phone/tablet), its glyph lines up with the gutter — mirroring the
   -11px on .header__tools for the right side. No effect on desktop (hidden). */
.menu-toggle { display: none; margin-left: -11px; }

/* ---------------------------------------------------------------------------
   Buttons + form controls
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px; border: 1px solid transparent;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--ink-soft); box-shadow: var(--shadow-md); }
.btn--gold { background: var(--gold); color: var(--ink-deep); }
.btn--gold:hover:not(:disabled) { background: var(--gold-soft); box-shadow: var(--shadow-md); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover:not(:disabled) { border-color: var(--ink); background: var(--ink-wash); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover:not(:disabled) { box-shadow: var(--shadow-md); }
.btn--sm { padding: 9px 18px; font-size: 11px; }
.btn--block { width: 100%; }
.btn--danger { background: transparent; border-color: #e6c9c7; color: var(--danger); }
.btn--danger:hover:not(:disabled) { background: #fdf3f2; border-color: var(--danger); }

.field { display: block; margin-bottom: 16px; }
.field > span {
  display: block; margin-bottom: 6px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: #fff; font: inherit; color: var(--text);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(15, 0, 67, .1);
}
.field textarea { min-height: 108px; resize: vertical; }
/* Half-width fields pair up. `display:inline-block` alone never worked: the
   newline between two <label>s in the markup collapses to a text space, so
   50% + 50% + space always exceeded the line and each wrapped. A flex row on
   the parent sidesteps whitespace entirely. */
.field-row { display: flex; flex-wrap: wrap; gap: 0 14px; }
.field-row > .field--half { flex: 1 1 calc(50% - 7px); min-width: 0; }
.field--half { width: 100%; }
.hint { font-size: 12.5px; color: var(--muted); margin: -8px 0 16px; }

.alert {
  padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px;
  border: 1px solid; margin-bottom: 18px;
}
.alert--error { background: #fdf3f2; border-color: #f0d4d1; color: var(--danger); }
.alert--ok { background: #f0f8f3; border-color: #cfe6da; color: var(--ok); }
.alert--info { background: var(--gold-wash); border-color: #ecdcb4; color: var(--warn); }

/* ---------------------------------------------------------------------------
   Hero + home sections
   ------------------------------------------------------------------------ */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(201, 162, 39, .2), transparent 58%),
    radial-gradient(90% 80% at 12% 92%, rgba(255, 255, 255, .09), transparent 55%),
    linear-gradient(155deg, var(--ink) 0%, #1a0b5e 52%, var(--ink-deep) 100%);
  color: #fff;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
  padding: 84px 0 92px;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 22px;
}
.hero__eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
.hero h1 {
  color: #fff; font-size: clamp(2.5rem, 5.2vw, 4.1rem); letter-spacing: -0.02em; margin-bottom: 20px;
}
.hero h1 em { font-style: italic; color: var(--gold-soft); }
.hero p { font-size: 17px; color: rgba(255, 255, 255, .74); max-width: 46ch; margin: 0 0 32px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__stats { display: flex; gap: 36px; margin-top: 46px; }
.hero__stats div strong {
  display: block; font-family: var(--serif); font-size: 28px; color: #fff;
}
.hero__stats div span {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.hero__art {
  aspect-ratio: 4 / 5; border-radius: 200px 200px 22px 22px;
  border: 1px solid rgba(255, 255, 255, .18); overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02));
  display: grid; place-items: center; position: relative;
}
.hero__art img { width: 100%; height: 100%; object-fit: cover; }
.hero__art--empty { color: rgba(255, 255, 255, .3); }
.hero__art--empty svg { width: 40%; opacity: .28; }

.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 34px; flex-wrap: wrap;
}
.section__head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.section__head p { margin: 8px 0 0; color: var(--muted); max-width: 56ch; }
.section__link {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 3px; font-weight: 600;
  white-space: nowrap;
}
.eyebrow {
  font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 10px;
}

/* Category rail */
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.cat {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--ink-wash); border: 1px solid var(--line);
  display: flex; align-items: flex-end; isolation: isolate;
  transition: transform .3s cubic-bezier(.22, .8, .3, 1), box-shadow .3s ease;
}
.cat:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cat::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8, 0, 38, .88) 6%, rgba(8, 0, 38, .28) 48%, transparent 74%);
}
.cat__body { padding: 20px; color: #fff; width: 100%; }
.cat__body h3 { color: #fff; font-size: 20px; }
.cat__body span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); }

/* ---------------------------------------------------------------------------
   Product grid + card
   ------------------------------------------------------------------------ */
.grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.card {
  position: relative; /* containing block for .card__badges */
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.22, .8, .3, 1), box-shadow .28s ease, border-color .28s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.card__media {
  position: relative; aspect-ratio: 3 / 4; background: var(--ink-wash); overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, .8, .3, 1); }
.card:hover .card__media img { transform: scale(1.05); }
.card__media--empty { display: grid; place-items: center; color: var(--line-strong); }
.card__media--empty svg { width: 44px; height: 44px; }
.card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; }
.badge {
  padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(6px);
}
.badge--sale { background: var(--gold); color: var(--ink-deep); }
.badge--new { background: rgba(255, 255, 255, .92); color: var(--ink); }
.badge--out { background: rgba(26, 21, 51, .84); color: #fff; }
.badge--low { background: #fff3d6; color: var(--warn); }

.card__body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__cat { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.card__name {
  font-family: var(--serif); font-size: 16.5px; color: var(--ink); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.price { display: flex; align-items: baseline; gap: 9px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.price__now { font-size: 17px; font-weight: 700; color: var(--ink); }
.price__was { font-size: 13px; color: var(--muted); text-decoration: line-through; }
.price__off { font-size: 12px; font-weight: 700; color: var(--ok); }

/* ---------------------------------------------------------------------------
   Listing layout (filters rail + results)
   ------------------------------------------------------------------------ */
.listing { display: grid; grid-template-columns: 246px 1fr; gap: 34px; align-items: start; }
.filters {
  position: sticky; top: calc(var(--header-h) + 16px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.filters-toggle { display: none; }
.filters h3 {
  font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px; font-weight: 700;
}
.filters__group { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.filters__group:last-of-type { border-bottom: 0; margin-bottom: 8px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-block; padding: 7px 13px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line-strong); font-size: 12.5px; color: var(--text);
  background: #fff; cursor: pointer; transition: all .16s ease;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"], .chip[aria-current="true"], .chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.filters__link { display: block; padding: 6px 0; font-size: 14px; color: var(--text); }
.filters__link:hover { color: var(--gold); }
.filters__link[aria-current="true"] { color: var(--ink); font-weight: 700; }

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.toolbar__count { color: var(--muted); font-size: 14px; }
.toolbar select {
  padding: 9px 13px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: #fff; font: inherit; font-size: 13px; cursor: pointer;
}

.empty {
  text-align: center; padding: 72px 24px; border: 1px dashed var(--line-strong);
  border-radius: var(--radius); background: var(--surface); color: var(--muted);
}
.empty h3 { margin-bottom: 8px; }
.empty p { margin: 0 auto 20px; max-width: 44ch; }

.pager { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.pager a, .pager span {
  min-width: 40px; padding: 9px 12px; text-align: center; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: #fff; font-size: 14px;
}
.pager .is-current { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.pager .is-disabled { opacity: .4; pointer-events: none; }

.crumbs { font-size: 12.5px; color: var(--muted); padding: 20px 0 4px; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 7px; opacity: .5; }

/* ---------------------------------------------------------------------------
   Product detail
   ------------------------------------------------------------------------ */
.pdp { display: grid; grid-template-columns: 1.08fr .92fr; gap: 52px; align-items: start; padding: 16px 0 40px; }
.gallery { display: grid; gap: 12px; }
.gallery__main {
  aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden;
  background: var(--ink-wash); border: 1px solid var(--line);
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.gallery__thumbs button {
  aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; padding: 0;
  border: 2px solid transparent; background: var(--ink-wash); cursor: pointer;
  transition: border-color .18s ease;
}
.gallery__thumbs button[aria-current="true"] { border-color: var(--ink); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp__info { position: sticky; top: calc(var(--header-h) + 20px); }
.pdp__info h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 6px 0 10px; }
.pdp__price { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 6px; flex-wrap: wrap; }
.pdp__price .price__now { font-size: 28px; }
.pdp__tax { font-size: 12.5px; color: var(--muted); margin-bottom: 24px; }
.pdp__desc { color: var(--muted); font-size: 15.5px; line-height: 1.75; }

.sizes { margin: 24px 0; }
.sizes__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.sizes__head span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.size-btn {
  min-width: 52px; padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: #fff; cursor: pointer;
  font-size: 13.5px; font-weight: 600; transition: all .16s ease;
}
.size-btn:hover { border-color: var(--ink); }
.size-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.pdp__actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.pdp__actions .btn { flex: 1 1 190px; }

.specs { margin-top: 34px; border-top: 1px solid var(--line); }
.specs__row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.specs__row dt { color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.specs__row dd { margin: 0; }

.assurance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.assurance div {
  text-align: center; padding: 16px 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface);
}
.assurance svg { width: 22px; height: 22px; color: var(--gold); margin: 0 auto 8px; }
.assurance strong { display: block; font-size: 12.5px; color: var(--ink); }
.assurance span { font-size: 11.5px; color: var(--muted); }

/* ---------------------------------------------------------------------------
   Cart + checkout
   ------------------------------------------------------------------------ */
.page-head { padding: 40px 0 26px; }
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.page-head p { color: var(--muted); margin: 10px 0 0; }

.cart-layout { display: grid; grid-template-columns: 1fr 372px; gap: 30px; align-items: start; padding-bottom: 72px; }
.cart-lines { display: grid; gap: 14px; }
.cart-line {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
}
.cart-line__img { aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; background: var(--ink-wash); }
.cart-line__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line h3 { font-size: 16.5px; margin-bottom: 3px; }
.cart-line__meta { font-size: 13px; color: var(--muted); }
.cart-line__right { text-align: right; display: grid; gap: 10px; justify-items: end; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.qty button {
  width: 32px; height: 32px; border: 0; background: #fff; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--ink); transition: background .16s ease;
}
.qty button:hover:not(:disabled) { background: var(--ink-wash); }
.qty button:disabled { opacity: .35; cursor: not-allowed; }
.qty span { min-width: 34px; text-align: center; font-weight: 600; font-size: 14px; }
.link-danger { background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); font-size: 12.5px; text-decoration: underline; }
.link-danger:hover { color: var(--danger); }

.summary {
  position: sticky; top: calc(var(--header-h) + 16px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
}
.summary h2 { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.summary__row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 14.5px; }
.summary__row--total {
  border-top: 2px solid var(--ink); margin-top: 10px; padding-top: 14px;
  font-size: 18px; font-weight: 700; color: var(--ink);
}
.summary__note { font-size: 12.5px; color: var(--muted); margin-top: 14px; line-height: 1.55; }
.progress { height: 5px; border-radius: 999px; background: var(--ink-wash); overflow: hidden; margin: 6px 0 14px; }
/* width:0 default matters — the width is set from an inline style, and if that
   is ever dropped a block-level <i> would render FULL, telling the shopper they
   qualify for free shipping when they do not. */
.progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); transition: width .4s ease; }

.checkout-layout { display: grid; grid-template-columns: 1fr 372px; gap: 30px; align-items: start; padding-bottom: 72px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.panel + .panel { margin-top: 18px; }
.panel h2 { font-size: 20px; margin-bottom: 4px; }
.panel > p.hint { margin-top: 0; margin-bottom: 20px; }

.mini-line { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mini-line:last-of-type { border-bottom: 0; }
.mini-line__img { width: 52px; aspect-ratio: 3/4; border-radius: 6px; overflow: hidden; background: var(--ink-wash); flex: 0 0 auto; }
.mini-line__img img { width: 100%; height: 100%; object-fit: cover; }
.mini-line__body { flex: 1; min-width: 0; }
.mini-line__body strong { display: block; font-size: 14px; font-weight: 600; }
.mini-line__body span { font-size: 12.5px; color: var(--muted); }

/* Auth pages */
.auth-shell { display: grid; place-items: center; padding: 60px 20px 90px; }
.auth-card { width: min(100%, 440px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-sm); }
.auth-card h1 { font-size: 27px; margin-bottom: 6px; }
.auth-card > p { color: var(--muted); margin: 0 0 24px; }
.auth-alt { text-align: center; margin-top: 20px; font-size: 14px; color: var(--muted); }
.auth-alt a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--gold); }

/* Account */
.account-layout { display: grid; grid-template-columns: 232px 1fr; gap: 30px; align-items: start; padding-bottom: 72px; }
.side-nav { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; position: sticky; top: calc(var(--header-h) + 16px); }
.side-nav a {
  display: block; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 14px;
  color: var(--text); transition: background .16s ease, color .16s ease;
}
.side-nav a:hover { background: var(--ink-wash); }
.side-nav a[aria-current="page"] { background: var(--ink); color: #fff; font-weight: 600; }

.order-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 14px; }
.order-card__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.order-card__head strong { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.order-card__head span { font-size: 13px; color: var(--muted); display: block; }
.status {
  padding: 5px 12px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.status--placed { background: var(--gold-wash); color: var(--warn); }
.status--confirmed { background: #e8f0fd; color: #1f4b99; }
.status--shipped { background: #ecf6ff; color: #0b5c8a; }
.status--delivered { background: #f0f8f3; color: var(--ok); }
.status--cancelled { background: #f6f5f8; color: var(--muted); }

/* ---------------------------------------------------------------------------
   Admin
   ------------------------------------------------------------------------ */
.admin-bar {
  background: var(--ink-deep); color: rgba(255, 255, 255, .78);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.admin-bar .wrap { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 7px 0; }
.admin-bar a { padding: 6px 12px; border-radius: 7px; transition: background .16s ease, color .16s ease; }
.admin-bar a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.admin-bar a[aria-current="page"] { background: var(--gold); color: var(--ink-deep); font-weight: 700; }
.admin-bar__spacer { flex: 1; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 30px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.stat span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.stat strong { display: block; font-family: var(--serif); font-size: 30px; color: var(--ink); margin-top: 6px; }

.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
table.data th, table.data td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data th {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  font-weight: 700; background: var(--ink-wash); white-space: nowrap;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: #fcfbfe; }
.thumb-xs { width: 42px; aspect-ratio: 3/4; border-radius: 5px; object-fit: cover; background: var(--ink-wash); }
.mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 12.5px; }

.img-manager { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.img-tile { position: relative; width: 84px; aspect-ratio: 3/4; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line-strong); background: var(--ink-wash); }
.img-tile img { width: 100%; height: 100%; object-fit: cover; }
.img-tile button {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
  border: 0; background: rgba(8, 0, 38, .78); color: #fff; cursor: pointer;
  font-size: 13px; line-height: 1; display: grid; place-items: center;
}
.img-move {
  position: absolute; bottom: 18px; width: 20px; height: 20px; border-radius: 50%;
  border: 0; background: rgba(8, 0, 38, .78); color: #fff; cursor: pointer;
  font-size: 13px; line-height: 1; display: grid; place-items: center; padding: 0;
}
.img-move--left { left: 3px; }
.img-move--right { right: 3px; }
.img-tile:first-child::after {
  content: "Main"; position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--gold); color: var(--ink-deep); font-size: 9px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 2px;
}
.dropzone {
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm);
  padding: 20px; text-align: center; color: var(--muted); font-size: 13.5px;
  cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--ink); background: var(--ink-wash); }

/* ---------------------------------------------------------------------------
   Footer + toast
   ------------------------------------------------------------------------ */
.footer { background: var(--ink); color: rgba(255, 255, 255, .68); margin-top: 40px; }
.footer__grid {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; padding: 58px 0 40px;
}
.footer h4 {
  color: #fff; font-family: var(--sans); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 14px;
}
.footer a { display: block; padding: 5px 0; font-size: 14px; transition: color .16s ease; }
.footer a:hover { color: var(--gold-soft); }
.footer__mark { width: 132px; color: #fff; margin-bottom: 16px; }
.footer__blurb { font-size: 14px; line-height: 1.7; max-width: 34ch; }
.footer__base {
  border-top: 1px solid rgba(255, 255, 255, .1); padding: 18px 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px;
}

.toast-host { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: grid; gap: 10px; justify-items: end; }
.toast {
  background: var(--ink); color: #fff; padding: 13px 18px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); font-size: 14px; max-width: 340px;
  display: flex; align-items: center; gap: 10px;
  animation: toastIn .32s cubic-bezier(.22, .8, .3, 1);
}
.toast--error { background: var(--danger); }
.toast svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--gold-soft); }
.toast--error svg { color: #fff; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.toast.is-out { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }

.spin { animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------ */
@media (max-width: 1080px) {
  /* Stacked hero (tablet + phone): show the IMAGE first, then the copy. On
     desktop the two sit side by side and this order rule does not apply. */
  .hero__grid { grid-template-columns: 1fr; padding: 56px 0 64px; }
  .hero__art { max-width: 380px; order: -1; justify-self: center; }
  .pdp { grid-template-columns: 1fr; gap: 34px; }
  .pdp__info { position: static; }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 900px) {
  /* Phone header: hamburger + brand on row 1, a full-width search on row 2.
     The account and bag icons are dropped here because the bottom tab bar
     already carries them — this also keeps row 1 from ever overflowing.
     The search is a direct child of the bar, so `flex: 1 1 100%` genuinely
     wraps it onto its own line instead of overflowing the icon row. */
  .header__bar { flex-wrap: wrap; padding-bottom: 10px; row-gap: 8px; }
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header__tools { margin-left: auto; }
  .search { order: 10; flex: 1 1 100%; min-width: 0; width: 100%; }
  .search:focus-within { min-width: 0; }
  .listing { grid-template-columns: 1fr; }
  .filters { position: static; display: none; margin-bottom: 16px; }
  .filters.is-open { display: block; }
  .filters-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 12px 16px; margin-bottom: 12px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: #fff; font-weight: 600; color: var(--ink); cursor: pointer;
  }
  .account-layout { grid-template-columns: 1fr; }
  .side-nav { position: static; display: flex; overflow-x: auto; gap: 4px; }
  .side-nav a { white-space: nowrap; }
}

/* Very narrow phones: drop the icon captions so the top row cannot overflow. */
@media (max-width: 400px) {
  .icon-btn { padding: 7px 8px; }
  .icon-btn span { display: none; }
  .brand__mark { width: 78px; }
}

@media (max-width: 640px) {
  .wrap { width: calc(100% - 28px); }
  .section { padding: 48px 0; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 13px; }
  .card__body { padding: 12px 12px 14px; }
  .card__name { font-size: 14.5px; }
  .price__now { font-size: 15.5px; }
  .hero__stats { gap: 22px; }
  .cart-line { grid-template-columns: 72px 1fr; }
  .cart-line__right { grid-column: 1 / -1; justify-items: stretch; text-align: left; }
  .field--half { width: 100%; }
  .field--half + .field--half { margin-left: 0; }
  .assurance { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
  .brand__by { display: none; }
}

/* Mobile drawer for the primary nav */
.drawer {
  position: fixed; inset: 0; z-index: 90; background: rgba(8, 0, 38, .5);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__panel {
  position: absolute; inset: 0 auto 0 0; width: min(82vw, 320px);
  background: var(--ink); padding: 22px; overflow-y: auto;
  transform: translateX(-100%); transition: transform .3s cubic-bezier(.22, .8, .3, 1);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__panel a {
  display: block; padding: 13px 4px; color: rgba(255, 255, 255, .85);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
}
.drawer__panel a:hover { color: var(--gold-soft); }

/* ---------------------------------------------------------------------------
   Social sign-in
   ------------------------------------------------------------------------ */
.oauth-list { display: grid; gap: 10px; margin-bottom: 16px; }
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; padding: 12px 18px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: #fff; color: #1f1f24;
  font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: box-shadow .18s ease, border-color .18s ease, transform .12s ease;
}
.oauth-btn:hover { box-shadow: var(--shadow-md); border-color: var(--line); }
.oauth-btn:active { transform: translateY(1px); }
.oauth-btn__icon { flex: 0 0 auto; }
.oauth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted); font-size: 12px; margin-bottom: 16px;
}
.oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------------------------------------------------------------------------
   Home — "Shop for Her / Him" band
   Desktop: one bar split 50/50. Phone: two stacked eye-band strips.
   The illustration is set per-half as --img and shows only its eye/nose band
   (background: cover). Until the artwork is dropped in at /assets/shop-*.jpg the
   image layer simply 404s and the brand gradient beneath shows through, so the
   band always looks intentional rather than broken.
   ------------------------------------------------------------------------ */
/* Funky handwritten display face for the "Her / Him" word — self-hosted so it
   works under CSP font-src 'self' (Permanent Marker, SIL OFL). */
@font-face {
  font-family: "Permanent Marker";
  src: url("/assets/permanent-marker.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Gen-Z marker headline for the "For Her / For Him" section pages. */
.trend-heading {
  font-family: "Permanent Marker", var(--serif); font-weight: 400;
  color: var(--ink); line-height: 1.06;
  font-size: clamp(30px, 6vw, 58px); letter-spacing: .01em;
}

.himher { display: flex; width: 100%; }
.himher__half {
  position: relative; flex: 1 1 50%; min-width: 0; isolation: isolate;
  min-height: 210px; display: flex; align-items: center; gap: clamp(12px, 2vw, 18px);
  padding: clamp(20px, 4vw, 46px); color: #fff; text-decoration: none; overflow: hidden;
  background-image: var(--img), linear-gradient(120deg, var(--ink-deep), var(--ink) 55%, var(--ink-soft));
  background-size: cover, cover;
  background-position: center 42%, center;
  background-repeat: no-repeat;
}
/* Him mirrors Her: content (label + icon) pinned to the RIGHT edge at every
   width. row-reverse puts the icon on the outer (right) side; with row-reverse,
   justify-content: flex-start packs the group toward that right edge. */
.himher__half--him { flex-direction: row-reverse; justify-content: flex-start; text-align: right; }
/* Legibility scrim over whatever illustration is used, weighted to the icon side. */
.himher__half::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8, 0, 38, .58), rgba(8, 0, 38, .06) 58%);
}
.himher__half--him::after { background: linear-gradient(270deg, rgba(8, 0, 38, .58), rgba(8, 0, 38, .06) 58%); }
.himher__label { display: flex; flex-direction: column; line-height: 1.05; }
.himher__half--him .himher__label { align-items: flex-end; }
.himher__label em {
  font-style: normal; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; opacity: .82;
}
.himher__label strong {
  font-family: "Permanent Marker", var(--serif); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 46px); letter-spacing: .01em;
}

/* White gender-icon card — the "pop" entrance + drop shadow. */
.himher__icon {
  flex: 0 0 auto; width: clamp(52px, 8vw, 66px); height: clamp(52px, 8vw, 66px);
  display: grid; place-items: center; color: var(--ink);
  background: #fff; border-radius: 16px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .36), 0 3px 8px rgba(0, 0, 0, .26);
  animation: iconPop .6s cubic-bezier(.2, .8, .3, 1.35) both;
  transition: transform .25s ease, box-shadow .25s ease;
}
.himher__icon svg { width: 56%; height: 56%; }
.himher__half:hover .himher__icon,
.himher__half:focus-visible .himher__icon {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .44), 0 4px 10px rgba(0, 0, 0, .3);
}
@keyframes iconPop {
  0% { opacity: 0; transform: scale(.4); }
  60% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------------------------------------------------------------------------
   Home — auto-scrolling notification ticker
   ------------------------------------------------------------------------ */
.ticker {
  overflow: hidden; background: var(--ink); color: #fff;
  border-block: 1px solid rgba(255, 255, 255, .09);
}
.ticker__track { display: flex; width: max-content; animation: tickerScroll 42s linear infinite; }
.ticker__group { display: flex; flex: 0 0 auto; }
.ticker__item {
  flex: 0 0 auto; padding: 11px clamp(18px, 3vw, 38px); white-space: nowrap;
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .9);
}
.ticker__item::after { content: "✦"; margin-left: clamp(18px, 3vw, 38px); color: var(--gold-soft); opacity: .85; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------------
   Home — top-deals slider
   ------------------------------------------------------------------------ */
.deals__nav { display: flex; gap: 8px; }
.deals__arrow {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.deals__arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.deals__arrow:active { transform: scale(.94); }
.deals__viewport {
  overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.deals__viewport::-webkit-scrollbar { display: none; }
.deals__track { display: flex; gap: 16px; padding: 4px; }
.deals__slide { flex: 0 0 auto; width: 258px; scroll-snap-align: start; }
.deals__slide .card { height: 100%; }
.deals__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.deals__dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--line-strong); transition: background .2s ease, transform .2s ease;
}
.deals__dot.is-on { background: var(--gold); transform: scale(1.35); }

/* ---------------------------------------------------------------------------
   Checkout — promo code + discount line
   ------------------------------------------------------------------------ */
.promo__row { display: flex; gap: 10px; align-items: stretch; }
.promo__row input {
  flex: 1 1 auto; min-width: 0; padding: 12px 14px; font: inherit;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  text-transform: uppercase; letter-spacing: .05em;
}
.promo__row .btn { flex: 0 0 auto; }
.promo__msg { margin: 10px 0 0; font-size: 13.5px; }
.promo__msg.is-ok { color: var(--ok); font-weight: 600; }
.promo__msg.is-err { color: var(--danger); }
.summary__row--discount, .summary__row--discount span { color: var(--ok); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Admin — top-deals product picker
   ------------------------------------------------------------------------ */
.deal-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
  max-height: 380px; overflow-y: auto; padding: 8px; margin-top: 6px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper);
}
.deal-pick {
  display: flex; align-items: center; gap: 10px; padding: 8px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.deal-pick.is-on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.deal-pick input { flex: 0 0 auto; }
.deal-pick__thumb {
  flex: 0 0 auto; width: 40px; height: 52px; border-radius: 6px; overflow: hidden;
  background: var(--ink-wash); display: grid; place-items: center;
}
.deal-pick__thumb img { width: 100%; height: 100%; object-fit: cover; }
.deal-pick__name { font-size: 12.5px; line-height: 1.25; display: flex; flex-direction: column; min-width: 0; }
.deal-pick__name em { font-style: normal; color: var(--muted); font-size: 11.5px; margin-top: 2px; }

/* Phones: stack the Her/Him band into two short eye-band strips. Her at the left
   edge, Him at the right edge — the right-alignment is handled by the base
   .himher__half--him rule, so it holds at every width. */
@media (max-width: 760px) {
  .himher { flex-direction: column; }
  .himher__half { min-height: 116px; padding: 15px 18px; }
  .himher__label strong { font-size: 23px; }
}
@media (max-width: 640px) {
  .deals__slide { width: 72vw; max-width: 280px; }
}

/* Motion-sensitive users: freeze the pop, the ticker and the icon entrance. */
@media (prefers-reduced-motion: reduce) {
  .himher__icon { animation: none; }
  .ticker__track { animation: none; }
  .ticker { text-align: center; }
  .ticker__group:nth-child(2) { display: none; }
}

/* ---------------------------------------------------------------------------
   Home hero cinematic intro (home only, JS-driven enhancement).
   After the curtain: fullscreen image → borders shrink to the arch → a
   marker-font line fades in → the first scroll fades it all out to the real
   page. RESTING STATE IS HIDDEN, so a no-JS / failed-script / non-home visit
   never sees it and the page is never trapped behind it.
   ------------------------------------------------------------------------ */
.hero-intro {
  /* Above the toast host (300) and skip-link (200), below the curtain (999). */
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  background: var(--ink-deep);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.hero-intro.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.hero-intro__frame {
  position: relative; overflow: hidden;
  width: 100vw; height: 100vh; height: 100dvh; border-radius: 0;
  transition: width 1.05s cubic-bezier(.65, 0, .2, 1),
              height 1.05s cubic-bezier(.65, 0, .2, 1),
              border-radius 1.05s ease;
  will-change: width, height;
}
.hero-intro.is-arch .hero-intro__frame {
  width: min(82vw, 470px); height: min(78vh, 620px); height: min(78dvh, 620px);
  border-radius: 220px 220px 26px 26px;
}
.hero-intro__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-intro__title {
  position: absolute; left: 50%; top: 50%; z-index: 2; margin: 0; padding: 0 24px;
  width: min(92vw, 720px); text-align: center;
  transform: translate(-50%, -50%) translateY(18px);
  font-family: "Permanent Marker", var(--serif); color: #fff;
  font-size: clamp(30px, 6vw, 62px); line-height: 1.08;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .7s ease, transform .7s ease;
}
.hero-intro.is-titled .hero-intro__title { opacity: 1; transform: translate(-50%, -50%); }
.hero-intro__hint {
  position: absolute; left: 50%; bottom: clamp(20px, 5vh, 46px); transform: translateX(-50%);
  z-index: 2; font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6); opacity: 0; transition: opacity .6s ease;
  animation: introHintBob 1.7s ease-in-out infinite;
}
.hero-intro.is-titled .hero-intro__hint { opacity: 1; }
/* "Scroll" for mouse/trackpad, "Touch" on touch devices. */
.hero-intro__hint .hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hero-intro__hint .hint-scroll { display: none; }
  .hero-intro__hint .hint-touch { display: inline; }
}
@keyframes introHintBob { 0%, 100% { padding-bottom: 0; } 50% { padding-bottom: 8px; } }
.hero-intro.is-exiting {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .6s ease, visibility .6s ease;
}
.hero-intro.is-exiting .hero-intro__title,
.hero-intro.is-exiting .hero-intro__hint { opacity: 0; transition: opacity .3s ease; }
/* While the intro is on screen the page beneath must not scroll. */
body.intro-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .hero-intro__frame { transition: none; }
  .hero-intro__title, .hero-intro__hint { transition: opacity .3s ease; }
  .hero-intro__hint { animation: none; }
}

/* ---------------------------------------------------------------------------
   Mobile: bottom tab bar + sticky product action bar
   These are the two things that make the site feel like an app on a phone.
   Both use env(safe-area-inset-bottom) so they clear the iPhone home indicator.
   ------------------------------------------------------------------------ */
.tabbar, .pdp-bar { display: none; }

@media (max-width: 900px) {
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 4px 7px; color: var(--muted);
    font-size: 9.5px; letter-spacing: .04em; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar__item.is-on { color: var(--ink); }
  .tabbar__icon { position: relative; display: grid; place-items: center; }
  .tabbar__icon svg { width: 23px; height: 23px; }
  .tabbar__label { font-weight: 600; text-transform: uppercase; }
  .tabbar__badge {
    position: absolute; top: -6px; right: -9px; min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 999px; background: var(--gold); color: var(--ink-deep);
    font-size: 9px; font-weight: 700; font-style: normal; display: grid; place-items: center;
  }
  body.has-tabbar { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

  .pdp-bar {
    display: flex; align-items: center; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 72;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(15, 0, 67, .08);
  }
  .pdp-bar__price { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
  .pdp-bar__price .price__now { font-size: 19px; font-weight: 700; color: var(--ink); }
  .pdp-bar__price .price__was { font-size: 12px; color: var(--muted); text-decoration: line-through; }
  .pdp-bar .btn { flex: 1; padding: 14px 20px; }
  body.has-pdp-bar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* On a product page the sticky bar carries the primary action, so the inline
     desktop button pair can relax into a lighter secondary row. */
  .pdp__actions .btn[type="submit"] { display: none; }
  .pdp__actions .btn--ghost { flex: 1; }

  /* Comfortable touch targets. */
  .size-btn { min-height: 44px; }
  .qty button { width: 38px; height: 38px; }
  .gallery__thumbs button { min-height: 0; }
}

/* Header respects the notch on landscape / punch-hole phones. */
@supports (padding: max(0px)) {
  .header__bar {
    padding-left: max(clamp(20px, 3vw, 48px), env(safe-area-inset-left));
    padding-right: max(clamp(20px, 3vw, 48px), env(safe-area-inset-right));
  }
}

/* When installed as a PWA (standalone), reclaim the space the browser chrome
   used to take and let the sticky header sit under the status bar cleanly. */
@media (display-mode: standalone) {
  .announce { padding-top: max(8px, env(safe-area-inset-top)); }
}