/* Design tokens — extracted from DESIGN.md (kashyapi-shopify-design-system),
   cross-checked against the live kashyapi.store storefront. */
:root {
  --color-ink: #030302;
  --color-ink-muted: rgba(3, 3, 2, 0.76);
  --color-paper: #ffffff;
  --color-milk-tea: #d3cec5;
  --color-milk-tea-fill: rgba(211, 206, 197, 0.09);
  --color-stone: #edebe7;
  --color-wine: #713f50;
  --color-powder-blue: #cbdee8;
  --color-ink-black: #000000;
  --color-success: #006400;
  --color-error: #8b0000;
  --color-in-stock: #3ed660;
  --color-low-stock: #ee9441;
  --color-out-of-stock: #c8c8c8;
  /* Near-invisible line for flat, single-stroke option boxes (size/color)
     — faint enough to nearly blend into the paper background at rest. */
  --color-option-line: rgba(3, 3, 2, 0.14);

  /* Bebas Neue is reserved for the KASHYAPI wordmark only (nav logo + hero).
     Everything else that reads as "display" type — headings, buttons, nav
     links, the search field — uses Assistant at a light weight instead, so
     the wordmark is the one bold, chunky mark on the page and the rest of
     the type stays thin and quiet around it. */
  --font-display: "Bebas Neue", "Assistant", sans-serif;
  --font-heading: "Assistant", sans-serif;
  --font-body: "Assistant", sans-serif;
  --font-label: "Maven Pro", sans-serif;

  --display-tracking: 0.01em;
  --heading-weight: 300;

  --radius-none: 0px;
  --radius-button-primary: 6px;
  --radius-card: 2px;
  --radius-badge: 2px;
  --radius-input: 8px;
  --radius-pill: 100px;

  --space-xs: 0.5rem;
  --space-sm: 0.7rem;
  --space-md: 0.9rem;
  --space-lg: 1rem;
  --space-xl: 1.25rem;
  --space-2xl: 1.5rem;
  --space-3xl: 1.75rem;
  --space-4xl: 2rem;
  --space-5xl: 3rem;
  --space-6xl: 5rem;

  --page-width: 90rem;
  --shadow-drawer: 0px 4px 20px rgb(3 3 2 / 15%);
  --nav-height: 68px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-ink-muted);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  /* Safety net: one oversized element must never widen the page, because a
     phone answers that by zooming the whole site out. clip (not hidden)
     creates no scroll container, so sticky elements keep working. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

::selection {
  background: var(--color-ink);
  color: var(--color-paper);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.08;
  color: var(--color-ink);
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
}

.test-banner {
  background: var(--color-ink);
  color: var(--color-paper);
  text-align: center;
  font-size: 13px;
  padding: 8px 16px;
  letter-spacing: 0.02em;
}

/* Nav — left links / centered wordmark / right icons.
   Over the homepage hero it floats transparently in white with the wordmark
   hidden (the hero carries the giant one). Past the hero, and on every other
   route, it settles into a solid white bar with the wordmark revealed. */
.nav {
  position: fixed;
  top: var(--announcement-h, 0px);
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-lg);
  height: var(--nav-height);
  padding: 0 var(--space-2xl);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.28s ease, border-color 0.28s ease, color 0.28s ease;
}

/* Optional bar, editable (and toggleable) from the POS Website → Homepage →
   Header editor. Sits fixed above the nav; --announcement-h (set in
   nav.js, since the text can wrap) pushes both the nav bar and the page's
   top padding down to make room for it. */
.announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 41;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: 8px var(--space-2xl);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: 13px;
  text-align: center;
}
.announcement-bar a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.announcement-bar__close {
  position: absolute;
  right: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.announcement-bar__close:hover { opacity: 1; }
.announcement-bar__close svg { width: 14px; height: 14px; }

/* Transparent state: everything reads white over the image. */
.nav--over .nav__links a,
.nav--over .nav__currency,
.nav--over .nav__icon-link,
.nav--over .nav__mobile-toggle {
  color: var(--color-paper);
}

.nav--over .nav__logo {
  opacity: 0;
  pointer-events: none;
}

.nav--over .nav__cart-count {
  background: var(--color-paper);
  color: var(--color-ink);
}

.nav--solid {
  background: var(--color-paper);
  border-bottom-color: var(--color-milk-tea);
}

.nav--solid .nav__logo {
  opacity: 1;
}

/* Routes without a hero start below the bar; the hero pages slide under it. */
.app--offset {
  padding-top: calc(var(--nav-height) + var(--announcement-h, 0px));
}

.nav__links {
  justify-self: start;
  display: flex;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: normal;
  color: var(--color-ink);
  transition: opacity 0.125s ease-in-out;
}

.nav__links a:hover {
  opacity: 0.6;
}

.nav__logo {
  justify-self: center;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--color-ink);
}

.nav__actions {
  justify-self: end;
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

.nav__icon-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  color: var(--color-ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.nav__icon-link svg {
  width: 20px;
  height: 20px;
}

.nav__cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-pill);
  font-size: 10px;
  position: absolute;
  top: -6px;
  right: -8px;
}

.nav__currency {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-ink);
  letter-spacing: 0.02em;
}

.nav__currency-btn {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  letter-spacing: inherit;
}

.nav__currency-menu {
  position: fixed;
  z-index: 100;
  min-width: 220px;
  background: var(--color-paper);
  border: 1px solid var(--color-option-line);
  border-radius: var(--radius-button-primary);
  box-shadow: 0 12px 32px rgba(3, 3, 2, 0.14);
  padding: var(--space-sm);
}

.nav__currency-opt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius-badge);
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
}

.nav__currency-opt:hover {
  background: var(--color-stone);
}

.nav__currency-opt.active {
  color: var(--color-ink);
  background: var(--color-milk-tea);
}

.nav__currency-opt-label {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: normal;
  color: var(--color-ink-muted);
}

.nav__currency-note {
  margin: 6px 10px 2px;
  font-family: var(--font-heading);
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-ink-muted);
  max-width: 190px;
}

.nav__icon-link--muted {
  opacity: 0.9;
}

.nav__mobile-toggle {
  display: none;
}

@media screen and (max-width: 749px) {
  .nav__currency {
    display: none;
  }
}

@media screen and (max-width: 749px) {
  .nav {
    grid-template-columns: auto 1fr auto;
  }
  .nav__links {
    display: none;
  }
  .nav__logo {
    font-size: 17px;
    justify-self: start;
  }
  .nav {
    padding: 0 max(var(--space-sm), env(safe-area-inset-right)) 0 max(var(--space-lg), env(safe-area-inset-left));
    gap: var(--space-xs);
  }
  .nav__actions {
    gap: 0;
  }
  /* 44px touch targets; the 20px glyph sits centred inside. */
  .nav__icon-link {
    width: 44px;
    height: 44px;
    justify-content: center;
  }
  .nav__cart-count {
    top: 4px;
    right: 2px;
  }
  .nav__mobile-toggle {
    display: inline-flex;
  }
  .nav__mobile-toggle svg {
    width: 22px;
    height: 22px;
  }
}

/* Phone menu drawer — slides in from the right, where its button lives. */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.42s;
}

.nav-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}

.nav-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgb(3 3 2 / 42%);
  opacity: 0;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-drawer.is-open .nav-drawer__scrim {
  opacity: 1;
}

.nav-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 380px);
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: -12px 0 40px rgb(3 3 2 / 18%);
  padding:
    max(var(--space-sm), env(safe-area-inset-top))
    max(var(--space-2xl), env(safe-area-inset-right))
    max(var(--space-2xl), env(safe-area-inset-bottom))
    var(--space-2xl);
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-drawer.is-open .nav-drawer__panel {
  transform: translateX(0);
}

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-height);
  margin-right: -10px;
}

.nav-drawer__logo {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--color-ink);
}

.nav-drawer__close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--color-ink);
  cursor: pointer;
}

.nav-drawer__close svg {
  width: 20px;
  height: 20px;
}

.nav-drawer__links {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
}

.nav-drawer__links li {
  border-top: 1px solid var(--color-milk-tea);
}

.nav-drawer__links li:last-child {
  border-bottom: 1px solid var(--color-milk-tea);
}

.nav-drawer__links a {
  display: block;
  padding: 16px 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1), transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-drawer.is-open .nav-drawer__links a {
  opacity: 1;
  transform: none;
}

.nav-drawer.is-open .nav-drawer__links li:nth-child(2) a { transition-delay: 0.04s; }
.nav-drawer.is-open .nav-drawer__links li:nth-child(3) a { transition-delay: 0.08s; }
.nav-drawer.is-open .nav-drawer__links li:nth-child(4) a { transition-delay: 0.12s; }
.nav-drawer.is-open .nav-drawer__links li:nth-child(n+5) a { transition-delay: 0.16s; }

.nav-drawer__links a:active {
  opacity: 0.55;
}

.nav-drawer__foot {
  margin-top: auto;
  padding-top: var(--space-5xl);
  display: grid;
  gap: var(--space-lg);
}

.nav-drawer__account {
  font-size: 16px;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  justify-self: start;
  padding: 10px 0;
}

.nav-drawer__currency {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.nav-drawer__cur {
  min-width: 56px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-option-line);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.nav-drawer__cur.active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

.nav-drawer__note {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-muted);
}

.nav-drawer :focus-visible,
.nav__mobile-toggle:focus-visible {
  outline: 1.5px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

html.drawer-locked,
html.drawer-locked body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer__panel,
  .nav-drawer__scrim,
  .nav-drawer__links a {
    transition: none;
  }
}

@media screen and (min-width: 750px) {
  .nav-drawer {
    display: none;
  }
}

/* Layout helpers */
.container {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--space-2xl);
}

.section-divider {
  max-width: var(--page-width);
  margin: var(--space-2xl) auto;
  border-top: 1px solid var(--color-line, rgba(0, 0, 0, 0.1));
}

.home-video {
  width: 100%;
  display: block;
  border-radius: 2px;
}

.eyebrow {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-md);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 17px 26px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.125s ease-in-out, color 0.125s ease-in-out, opacity 0.125s ease-in-out,
    box-shadow 0.125s ease-in-out, transform 0.1s ease-out;
}

.btn-primary {
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-button-primary);
  box-shadow: 0 0 0 1px var(--color-ink) inset;
}

/* Hover inverts to paper with an ink outline, per the reference (icon/text
   inherit via currentColor, so they flip color automatically). */
.btn-primary:hover:not(:disabled) {
  background: var(--color-paper);
  color: var(--color-ink);
}

.btn-primary:disabled {
  background: var(--color-out-of-stock);
  box-shadow: 0 0 0 1px var(--color-out-of-stock) inset;
  cursor: not-allowed;
}

.btn__icon {
  width: 17px;
  height: 17px;
  flex: none;
}

.btn--no-icon .btn__icon {
  display: none;
}

.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border-radius: var(--radius-none);
  box-shadow: 0 0 0 1px var(--color-milk-tea) inset;
}

.btn-secondary:hover {
  box-shadow: 0 0 0 1px var(--color-ink) inset;
}

/* Hero — full-bleed photo, giant overlapping wordmark, scroll cue */
.hero {
  position: relative;
  /* vh first as the fallback; svh wins where supported so the CTA sits
     above the phone browser's toolbar instead of behind it. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--color-stone);
  overflow: hidden;
}

/* Scoped to .hero__photo (not a bare "img" selector) on purpose: the
   wordmark below is also an <img> now, and a generic ".hero img" rule
   would out-specificity its own sizing/position rule and stretch it to
   fill the whole hero — which is exactly the "giant cropped letters"
   bug this comment is here to stop someone from reintroducing. */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 3, 2, 0.08) 0%, rgba(3, 3, 2, 0.28) 55%, rgba(3, 3, 2, 0.6) 100%);
}

/* This is the brand's actual logo file (same asset the real site uses for
   its hero), not styled text, so spacing/letterforms match exactly and we
   only need to size and center it. Width matches the real site's ~51% of
   hero width, which is also what keeps it clear of the model's face. */
.hero__wordmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: min(51%, 900px);
  height: auto;
  margin: 0;
}

.hero__cta {
  position: relative;
  z-index: 1;
  color: var(--color-paper);
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.1em;
  padding-bottom: var(--space-4xl);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hero__cta::after {
  content: "";
  width: 1px;
  height: 28px;
  background: var(--color-paper);
  opacity: 0.7;
}

/* Season spotlight — heading + copy left, horizontal scroll strip right */
.spotlight {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-4xl);
  padding: var(--space-6xl) var(--space-2xl);
  align-items: center;
}

.spotlight__heading {
  font-size: 42px;
  margin-bottom: var(--space-lg);
}

.spotlight__text {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: var(--space-2xl);
  max-width: 34ch;
}

/* Real, clickable products drifting right-to-left in a slow, seamless
   loop — the list is duplicated in the markup and the track animates
   exactly one copy's width (-50%) so the seam is invisible. */
.spotlight-marquee {
  overflow: hidden;
}

.spotlight-marquee__track {
  display: flex;
  gap: var(--space-sm);
  width: max-content;
  animation: spotlight-marquee 55s linear infinite;
}

.spotlight-marquee:hover .spotlight-marquee__track {
  animation-play-state: paused;
}

.spotlight-marquee__item {
  display: block;
  flex: 0 0 auto;
  height: 420px;
  width: 300px;
}

.spotlight-marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.spotlight-marquee__item:hover img {
  transform: scale(1.03);
}

@keyframes spotlight-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spotlight-marquee__track {
    animation: none;
    overflow-x: auto;
  }
}

@media screen and (max-width: 900px) {
  .spotlight {
    grid-template-columns: 1fr;
  }
  .spotlight-marquee__item {
    height: 300px;
    width: 220px;
  }
}

/* Collection banner tiles — 2-up full-bleed images with label pill */
.banner-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.banner-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-stone);
}

.banner-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.banner-tile:hover img {
  transform: scale(1.03);
}

.banner-tile__label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: 13px;
  padding: 7px 14px;
  border-radius: var(--radius-badge);
}

@media screen and (max-width: 749px) {
  .banner-tiles {
    grid-template-columns: 1fr;
  }

  /* Phones crop the landscape banner to a tall slice: sky above, the model
     filling the middle. The wordmark moves up into the sky so it frames the
     model instead of sitting across his chest, and the CTA becomes a real
     44px tap target above the home indicator. */
  .hero__photo {
    object-position: var(--hero-focus-mobile, 50% 50%);
  }

  .hero__wordmark {
    top: calc(var(--nav-height) + 12svh);
    transform: translate(-50%, 0);
    width: 86%;
  }

  .hero__scrim {
    background: linear-gradient(180deg, rgba(3, 3, 2, 0.22) 0%, rgba(3, 3, 2, 0.04) 30%, rgba(3, 3, 2, 0.18) 62%, rgba(3, 3, 2, 0.62) 100%);
  }

  .hero__cta {
    min-height: 44px;
    padding: 12px 28px max(var(--space-4xl), calc(env(safe-area-inset-bottom) + var(--space-2xl)));
    font-size: 16px;
    font-weight: 400;
  }
}

/* Marquee ticker */
.marquee {
  background: var(--color-ink);
  color: var(--color-paper);
  overflow: hidden;
  white-space: nowrap;
  padding: 15px 0;
}

.marquee__track {
  display: inline-flex;
  width: max-content;
  animation: marquee 24s linear infinite;
}

.marquee__item {
  padding: 0 28px;
  font-size: 14px;
  letter-spacing: 0.02em;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* ---------------------------------------------------------------------- */
/* Motion system: route transitions, scroll reveal, and micro-interactions */
/* ---------------------------------------------------------------------- */

#app {
  opacity: 1;
  transition: opacity 0.16s ease-out;
}

.app--leaving {
  opacity: 0;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal--in {
  opacity: 1;
  transform: none;
}

.hero__wordmark.reveal,
.hero__cta.reveal {
  transition-delay: 0.05s;
}

.nav__cart-count--bump {
  animation: cart-bump 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cart-bump {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}

.btn-primary.btn--added {
  background: var(--color-ink);
  animation: btn-added-pop 0.28s ease-out;
}

@keyframes btn-added-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
  }
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  #app,
  .reveal,
  .nav__cart-count--bump,
  .btn-primary.btn--added,
  .card,
  .card__media img,
  .btn,
  .swatch {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Section heading */
.section {
  padding: var(--space-5xl) 0;
}

.section__heading {
  font-size: 44px;
  margin-bottom: var(--space-2xl);
}

.section__heading--center {
  text-align: center;
  margin-bottom: var(--space-4xl);
}

/* Brand story — black editorial panel left, full-bleed image right */
.story {
  display: grid;
  grid-template-columns: 2fr 3fr;
  background: var(--color-ink-black);
  color: var(--color-paper);
  min-height: 520px;
}

.story__panel {
  padding: var(--space-6xl) var(--space-5xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story__panel .eyebrow {
  color: var(--color-paper);
  opacity: 0.85;
  margin-bottom: var(--space-2xl);
}

.story__heading {
  font-size: clamp(34px, 3.6vw, 54px);
  color: var(--color-paper);
  margin: 0 0 var(--space-2xl);
  max-width: 18ch;
}

.story__text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-paper);
  opacity: 0.88;
  margin: 0 0 var(--space-lg);
  max-width: 40ch;
}

.story__link {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--color-paper);
  margin-top: var(--space-xl);
  align-self: flex-start;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  transition: border-color 0.15s ease-in-out;
}

.story__link:hover {
  border-color: var(--color-paper);
}

.story__media {
  position: relative;
  overflow: hidden;
  background: var(--color-ink-black);
  min-height: 420px;
}

.story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 900px) {
  .story {
    grid-template-columns: 1fr;
  }
  .story__panel {
    padding: var(--space-5xl) var(--space-2xl);
  }
  /* aspect-ratio alone sets the height from the width. A min-height next to
     it runs the ratio backwards (340px tall × 4/3 = 453px wide) and pushes
     the whole page wider than a phone, which makes the browser zoom out. */
  .story__media {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* Product grid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
}

.grid--flush {
  gap: 0;
}

@media screen and (max-width: 749px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
  .grid--flush {
    gap: 0;
  }
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media screen and (max-width: 749px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card {
  display: block;
  color: inherit;
  transition: transform 0.2s ease-out;
}

.card:hover {
  transform: translateY(-3px);
}

.card__media {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-stone);
  position: relative;
}

.grid:not(.grid--flush) .card__media {
  border-radius: var(--radius-card);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover .card__media img {
  transform: scale(1.035);
}

.card__media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-muted);
  font-size: 12px;
}

.card__body {
  padding: 10px 12px;
}

.grid--flush .card__body {
  padding-left: 0;
  padding-right: 0;
}

@media screen and (max-width: 749px) {
  /* Homepage rows sit in .section.container, whose padding shorthand drops
     the side padding: images bleed to the screen edge, which reads well on a
     phone, but names and prices were touching it. Give the text its margin. */
  .section .grid--flush .card__body {
    padding-inline: var(--space-lg);
  }
  .section > .section__heading {
    padding-inline: var(--space-2xl);
  }
  .section__heading {
    font-size: clamp(30px, 8.5vw, 38px);
  }
  .card__title,
  .card__price {
    font-size: 14px;
  }
  .card__body {
    padding-top: 10px;
    padding-bottom: 14px;
  }
}

.card__title {
  font-size: 14px;
  color: var(--color-ink-muted);
  margin: 0 0 2px;
}

.card__price {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0;
}

.card__price--was,
.price--was {
  font-weight: 400;
  color: var(--color-out-of-stock);
  text-decoration: line-through;
  margin-left: 6px;
}

/* Collection hero — full-bleed banner with the collection name over it */
.collection-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 5;
  min-height: 300px;
  overflow: hidden;
  background: var(--color-stone);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2xl);
}

/* Darken enough for the floating white nav to stay readable. */
.collection-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 3, 2, 0.42) 0%, rgba(3, 3, 2, 0.12) 45%, rgba(3, 3, 2, 0.28) 100%);
}

.collection-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collection-hero__title {
  position: relative;
  z-index: 2;
  color: var(--color-paper);
  font-size: clamp(34px, 6vw, 72px);
  text-shadow: 0 2px 24px rgba(3, 3, 2, 0.4);
}

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: var(--radius-badge);
}

/* Shop toolbar (filter / sort / count) */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-milk-tea);
  margin-bottom: var(--space-2xl);
}

.toolbar__left,
.toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  font-size: 14px;
}

.toolbar select {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-ink);
  background: transparent;
  border: none;
  padding: 6px 0;
  cursor: pointer;
}

.toolbar__count {
  color: var(--color-ink-muted);
  font-size: 13px;
}

/* Filter pills */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

.filter-pill {
  font-size: 13px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 1px var(--color-milk-tea) inset;
  background: transparent;
  color: var(--color-ink-muted);
  transition: box-shadow 0.125s ease-in-out, color 0.125s ease-in-out;
}

.filter-pill.active,
.filter-pill:hover {
  box-shadow: 0 0 0 1px var(--color-ink) inset;
  color: var(--color-ink);
}

@media screen and (max-width: 749px) {
  /* Collection banner: a phone-shaped band instead of a 16:5 letterbox. */
  .collection-hero {
    aspect-ratio: auto;
    min-height: 0;
    height: clamp(240px, 42svh, 360px);
    padding: 0 var(--space-2xl);
    margin-bottom: var(--space-xl);
  }
  .collection-hero__title {
    font-size: clamp(32px, 9vw, 44px);
    text-align: center;
    text-wrap: balance;
  }

  /* Eleven pills wrapped into five rows pushed the products below the fold.
     On phones they become one swipeable row that runs to the screen edges. */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin: 0 calc(var(--space-2xl) * -1) var(--space-xl);
    padding: 2px var(--space-2xl);
    scroll-padding-inline: var(--space-2xl);
  }
  .filters::-webkit-scrollbar {
    display: none;
  }
  .filter-pill {
    flex: none;
    scroll-snap-align: start;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    white-space: nowrap;
  }

  .toolbar {
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-lg);
  }
  .toolbar select {
    min-height: 40px;
    font-size: 16px;
  }
}

/* Product detail */
.product-detail {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-4xl);
  padding: var(--space-2xl) 0 var(--space-4xl);
}

@media screen and (max-width: 900px) {
  /* .product-detail's padding shorthand zeroes the .container side padding,
     so on a single column the photos run edge to edge (good) but the title,
     options and buttons did too. The info column gets its own margins. */
  .product-detail__info {
    position: static;
    padding-inline: var(--space-2xl);
  }
  .product-detail {
    grid-template-columns: 1fr;
    padding-top: 0;
  }
}

.product-detail__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  align-content: start;
}

.product-detail__gallery img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  background: var(--color-stone);
}

.product-detail__gallery img:only-child {
  grid-column: 1 / -1;
}

.product-detail__info {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-2xl));
  align-self: start;
  padding-right: var(--space-2xl);
}

.product-detail__title {
  font-size: 40px;
  margin-bottom: 10px;
}

.product-detail__price {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  margin-bottom: var(--space-4xl);
}

/* Colour swatches — circular, ringed when selected (per reference) */
.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.swatch {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  border: none;
  padding: 0;
  background-clip: padding-box;
  box-shadow: 0 0 0 1px rgba(3, 3, 2, 0.18);
  position: relative;
  transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-out;
}

.swatch:hover {
  box-shadow: 0 0 0 1px rgba(3, 3, 2, 0.4);
  transform: scale(1.12);
}

.swatch.selected {
  box-shadow: 0 0 0 1.5px var(--color-ink), 0 0 0 4px var(--color-paper) inset;
}

.swatch img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.option-group__label--inline {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.option-group__value {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
}

/* ==========================================================================
   COMING SOON — unreleased pieces have no photography, so the name is set in
   type on stone, inside a hairline frame like a garment's hang tag.
   ========================================================================== */
.card__media--teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--space-xl);
  text-align: center;
  background: var(--color-stone);
}

.card__media--teaser::before,
.teaser-panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--color-milk-tea);
  pointer-events: none;
}

.teaser-tile__name {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-wrap: balance;
  max-width: 11ch;
}

.teaser-tile__season,
.teaser-panel__meta {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.badge--soon {
  top: 18px;
  left: 18px;
}

.card--teaser:hover .teaser-tile__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.card__price--soon {
  font-weight: 400;
  color: var(--color-ink-muted);
}

.teaser-panel {
  position: relative;
  grid-column: 1 / -1;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-4xl);
  text-align: center;
  background: var(--color-stone);
}

.teaser-panel__name {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(40px, 5.5vw, 84px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-wrap: balance;
}

.teaser-panel__meta {
  font-size: 11px;
}

.product-detail__price--soon {
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
}

.notify-form {
  margin-top: var(--space-2xl);
  display: grid;
  gap: var(--space-lg);
}

.notify-form__lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-ink-muted);
  max-width: 44ch;
}

.notify-form__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.notify-form__fields .field {
  margin: 0;
}

.notify-form .btn {
  width: 100%;
}

/* .btn and the fields grid set their own display, which beats [hidden]. */
.notify-form [hidden] {
  display: none !important;
}

.notify-form__status {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  min-height: 1.5em;
}

.notify-form__status.is-error {
  color: var(--color-error);
}

.notify-form__status.is-ok {
  color: var(--color-ink);
  padding: 14px 16px;
  background: var(--color-milk-tea-fill);
  box-shadow: 0 0 0 1px var(--color-milk-tea) inset;
  border-radius: var(--radius-input);
}

@media screen and (max-width: 900px) {
  /* On a phone the form matters more than the poster: keep it near the fold. */
  .teaser-panel {
    aspect-ratio: 4 / 3;
  }
  .notify-form__fields {
    grid-template-columns: 1fr;
  }
}

/* Add to cart / Buy it now pair */
.buy-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
}

.buy-row .btn {
  width: 100%;
}

@media screen and (max-width: 480px) {
  .buy-row {
    grid-template-columns: 1fr;
  }
}

.product-detail__description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2xl);
  max-width: 46ch;
}

.option-group {
  margin-bottom: var(--space-2xl);
}

.option-group__label {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-sm);
  display: block;
}

.option-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.option-buttons--sizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

/* Flat, single-stroke boxes: a real 1px border (not an inset box-shadow,
   which reads as embossed/beveled), background matching the page, and a
   border colour faint enough to nearly disappear until hovered/selected. */
.option-btn {
  position: relative;
  min-width: 48px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: var(--radius-button-primary);
  border: 1px solid var(--color-option-line);
  box-shadow: none;
  transition: border-color 0.125s ease-in-out;
  overflow: hidden;
}

.option-btn:hover {
  border-color: var(--color-ink);
}

/* Minimal, single-stroke selection: an outline only, never a filled box. */
.option-btn.selected {
  border-color: var(--color-ink);
}

.option-btn:disabled {
  color: var(--color-out-of-stock);
  border-color: var(--color-option-line);
  cursor: not-allowed;
}

.option-btn:disabled::after {
  content: "";
  position: absolute;
  left: -10%;
  top: 50%;
  width: 130%;
  border-top: 1px solid var(--color-milk-tea);
  transform: rotate(-18deg);
}

.stock-note {
  font-size: 13px;
  margin-top: var(--space-lg);
}

.stock-note--low {
  color: var(--color-low-stock);
}

.stock-note--out {
  color: var(--color-out-of-stock);
}

.stock-note--in {
  color: var(--color-ink-muted);
}

/* Accordion (Product info) */
.accordion {
  border-top: 1px solid var(--color-milk-tea);
  margin-top: var(--space-2xl);
}

.accordion__row {
  border-bottom: 1px solid var(--color-milk-tea);
}

.accordion__trigger {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) 0;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink);
}

.accordion__panel {
  display: none;
  padding: 0 0 var(--space-lg);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink-muted);
}

.accordion__row.open .accordion__panel {
  display: block;
}

.accordion__row.open .accordion__trigger span {
  transform: rotate(45deg);
}

.accordion__trigger span {
  display: inline-block;
  transition: transform 0.15s ease-in-out;
  font-weight: 400;
}

/* Related items */
.related {
  border-top: 1px solid var(--color-milk-tea);
  padding: var(--space-5xl) 0;
}

/* Cart */
.cart-line {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-2xl) 0;
  border-bottom: 1px solid var(--color-milk-tea);
}

.cart-line img {
  width: 90px;
  height: 112px;
  object-fit: cover;
  background: var(--color-stone);
}

.cart-line__meta {
  font-size: 14px;
}

.cart-line__title {
  color: var(--color-ink);
  margin-bottom: 4px;
}

.cart-line__variant {
  color: var(--color-ink-muted);
  font-size: 13px;
}

.qty-control {
  display: inline-flex;
  align-items: center;
  box-shadow: 0 0 0 1px var(--color-milk-tea) inset;
  border-radius: var(--radius-button-primary);
  margin-top: var(--space-sm);
}

.qty-control button {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  font-size: 16px;
  color: var(--color-ink);
}

.qty-control span {
  min-width: 24px;
  text-align: center;
  font-size: 14px;
}

.cart-summary {
  padding: var(--space-2xl) 0;
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: var(--space-md);
}

.cart-summary__total {
  font-size: 18px;
  color: var(--color-ink);
}

.empty-state {
  text-align: center;
  padding: var(--space-6xl) var(--space-2xl);
  color: var(--color-ink-muted);
}

/* Inputs */
.field {
  margin-bottom: var(--space-lg);
}

.field label {
  display: block;
  font-size: 13px;
  color: var(--color-ink-muted);
  margin-bottom: 6px;
}

.field input,
.field textarea {
  width: 100%;
  background: var(--color-milk-tea-fill);
  border: none;
  box-shadow: 0 0 0 1px var(--color-milk-tea) inset;
  border-radius: var(--radius-input);
  padding: 11px 13px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-ink);
}

@media screen and (max-width: 749px) {
  /* iOS Safari zooms the whole page into any field under 16px on focus and
     leaves it zoomed. 16px on phones keeps checkout and sign-in steady. */
  .field input,
  .field textarea,
  input,
  select,
  textarea {
    font-size: 16px;
  }
  .field input,
  .field textarea {
    padding: 12px 14px;
  }
  .related {
    padding-inline: var(--space-2xl);
  }
}

.field input:focus,
.field textarea:focus {
  box-shadow: 0 0 0 1.5px var(--color-milk-tea) inset;
  outline: none;
}

/* Footer */
.footer {
  border-top: 1px solid var(--color-milk-tea);
  padding: var(--space-5xl) 0 var(--space-2xl);
  margin-top: var(--space-6xl);
  font-size: 13px;
  color: var(--color-ink-muted);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-4xl);
  margin-bottom: var(--space-4xl);
}

@media screen and (max-width: 749px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__bottom {
  border-top: 1px solid var(--color-milk-tea);
  padding-top: var(--space-2xl);
}

/* Search overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(3, 3, 2, 0.45);
  display: none;
}

.search-overlay.open {
  display: block;
}

.search-panel {
  background: var(--color-paper);
  padding: var(--space-2xl) var(--space-2xl) var(--space-4xl);
  max-height: 86vh;
  overflow-y: auto;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  max-width: var(--page-width);
  margin: 0 auto var(--space-2xl);
}

.search-bar input {
  flex: 1;
  border: none;
  border-bottom: 1px solid var(--color-milk-tea);
  background: transparent;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 28px;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  padding: 8px 0;
}

.search-bar input:focus {
  outline: none;
  border-bottom-color: var(--color-ink);
}

.search-bar input::placeholder {
  color: var(--color-milk-tea);
}

.search-close {
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}

.search-results {
  max-width: var(--page-width);
  margin: 0 auto;
}

.search-hint {
  color: var(--color-ink-muted);
  font-size: 14px;
  text-align: center;
  padding: var(--space-4xl) 0;
}

/* Auth + form pages */
.narrow {
  max-width: 460px;
  margin: 0 auto;
  padding: var(--space-6xl) var(--space-2xl);
}

.page-heading {
  font-size: 44px;
  margin-bottom: var(--space-sm);
}

.page-sub {
  font-size: 14px;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-4xl);
}

.form-error {
  background: rgba(139, 0, 0, 0.07);
  color: var(--color-error);
  font-size: 13px;
  padding: 11px 13px;
  border-radius: var(--radius-input);
  margin-bottom: var(--space-lg);
}

.form-success {
  background: rgba(0, 100, 0, 0.07);
  color: var(--color-success);
  font-size: 13px;
  padding: 11px 13px;
  border-radius: var(--radius-input);
  margin-bottom: var(--space-lg);
}

.form-switch {
  font-size: 13px;
  color: var(--color-ink-muted);
  margin-top: var(--space-2xl);
  text-align: center;
}

.form-switch a {
  color: var(--color-ink);
  text-decoration: underline;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: var(--space-xl) 0;
  color: var(--color-ink-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-option-line);
}

/* Checkout */
.checkout-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--space-6xl);
  align-items: start;
}

@media screen and (max-width: 900px) {
  .checkout-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4xl);
  }
}

.checkout-section {
  margin-bottom: var(--space-4xl);
}

.checkout-section__title {
  font-size: 26px;
  margin-bottom: var(--space-lg);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

@media screen and (max-width: 560px) {
  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Payment method selector */
.pay-methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pay-method {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  box-shadow: 0 0 0 1px var(--color-milk-tea) inset;
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;
}

.pay-method:hover:not(.pay-method--disabled) {
  box-shadow: 0 0 0 1px var(--color-ink) inset;
}

.pay-method.selected {
  box-shadow: 0 0 0 1.5px var(--color-ink) inset;
  background: var(--color-milk-tea-fill);
}

.pay-method--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.pay-method input {
  accent-color: var(--color-ink);
  width: 16px;
  height: 16px;
}

.pay-method__body {
  flex: 1;
}

.pay-method__name {
  font-size: 14px;
  color: var(--color-ink);
  margin: 0;
}

.pay-method__note {
  font-size: 12px;
  color: var(--color-ink-muted);
  margin: 2px 0 0;
}

.pay-method__tag {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-muted);
  box-shadow: 0 0 0 1px var(--color-milk-tea) inset;
  padding: 4px 8px;
  border-radius: var(--radius-badge);
  white-space: nowrap;
}

/* Order summary rail */
.summary {
  box-shadow: 0 0 0 1px var(--color-milk-tea) inset;
  border-radius: var(--radius-input);
  padding: var(--space-2xl);
  position: sticky;
  top: calc(var(--nav-height) + var(--space-2xl));
}

.summary__line {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-milk-tea);
  font-size: 13px;
}

.summary__line img {
  width: 54px;
  height: 68px;
  object-fit: cover;
  background: var(--color-stone);
  flex: 0 0 auto;
}

.summary__line-body {
  flex: 1;
}

.summary__line-title {
  color: var(--color-ink);
  margin: 0 0 2px;
}

.summary__line-meta {
  color: var(--color-ink-muted);
  margin: 0;
}

/* Order confirmation */
.confirm {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
  padding: var(--space-6xl) var(--space-2xl);
}

.confirm__number {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 30px;
  letter-spacing: 0.03em;
  color: var(--color-ink);
  margin: var(--space-lg) 0;
}

/* Manual payment proof (Fonepay/eSewa) on the confirmation page */
.payment-proof {
  text-align: left;
  border: 1px solid var(--color-milk-tea);
  border-radius: var(--radius-button-primary);
  padding: var(--space-2xl);
  margin-top: var(--space-xl);
}

.payment-proof--done {
  text-align: center;
}

.payment-proof__qr {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin: var(--space-lg) auto;
  border: 1px solid var(--color-option-line);
  border-radius: var(--radius-button-primary);
  padding: var(--space-md);
}

.payment-proof__account {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  margin-bottom: var(--space-xl);
  font-size: 14px;
}

.payment-proof__account strong {
  font-size: 18px;
  letter-spacing: 0.02em;
}

/* Account order history */
.order-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--color-milk-tea);
  font-size: 14px;
}

.status-chip {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 9px;
  border-radius: var(--radius-badge);
  background: var(--color-stone);
  color: var(--color-ink);
}

/* Loading / skeleton */
.skeleton {
  background: var(--color-stone);
  border-radius: var(--radius-card);
}

.loading-text {
  color: var(--color-ink-muted);
  font-size: 14px;
  padding: var(--space-4xl) 0;
  text-align: center;
}

/* ==========================================================================
   EDITOR PREVIEW
   Only active when the storefront is rendered inside the POS's Website
   editor (html.is-preview, set by preview.js). A normal visitor never gets
   these rules because the class is never added outside an iframe.
   ========================================================================== */

/* display:contents so the wrapper contributes no box — the sections lay out
   exactly as they did before they were wrapped for tagging. */
.preview-section {
  display: contents;
}

/* Product and checkout pages tag #app itself (not a wrapper). display:contents
   there would throw away #app's own box — including the .app--offset padding
   that keeps the page clear of the fixed nav — and slide the top of the
   gallery under the header. #app keeps its box. */
#app.preview-section {
  display: block;
}

/* Once we're in preview mode the wrapper needs to be a real box again so it
   can carry an outline. `position:relative` on the child keeps stacking
   contexts (hero scrim, sticky bits) behaving as before. */
.is-preview .preview-section {
  display: block;
  position: relative;
  cursor: pointer;
}

.is-preview .preview-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color 120ms ease, background-color 120ms ease;
  z-index: 5;
}

.is-preview .preview-section:hover::after {
  outline-color: rgb(59 130 246 / 70%);
  background: rgb(59 130 246 / 6%);
}

.is-preview .preview-section--active::after {
  outline-color: rgb(59 130 246);
  background: rgb(59 130 246 / 10%);
}

/* The section label that appears on hover, mirroring Shopify's editor. */
.is-preview .preview-section::before {
  content: attr(data-section-type);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  padding: 2px 8px;
  font: 500 11px/1.6 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  color: #fff;
  background: rgb(59 130 246);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.is-preview .preview-section:hover::before,
.is-preview .preview-section--active::before {
  opacity: 1;
}

/* Inside the editor the page is a canvas, not a document: kill the smooth
   scroll-jacking and any fixed overlays that would fight the outline. */
.is-preview {
  scroll-behavior: auto;
}

/* ---------------------------------------------------------------------------
   Direct-on-canvas editing (html.is-preview only).

   Every rule here is scoped under .is-preview, which preview.js sets only
   when the page is framed AND ?preview=1. A normal visitor never matches
   these selectors, so none of this can leak onto the live shop.
   --------------------------------------------------------------------------- */

/* Editable text: quiet until you go looking for it. A permanent outline on
   every heading would make the preview unusable as a preview — you could no
   longer see what the page actually looks like. */
.is-preview [data-edit] {
  cursor: text;
  border-radius: 3px;
  transition: box-shadow .12s ease, background-color .12s ease;
}
.is-preview [data-edit]:hover {
  box-shadow: 0 0 0 1px rgba(64, 132, 255, .5);
  background-color: rgba(64, 132, 255, .05);
}
.is-preview [data-edit].pv-editing {
  outline: none;
  box-shadow: 0 0 0 2px rgba(64, 132, 255, .9);
  background-color: rgba(64, 132, 255, .07);
  cursor: text;
}
.is-preview [data-edit].pv-saving { opacity: .55; }

@keyframes pv-flash-ok {
  from { box-shadow: 0 0 0 2px rgba(40, 180, 120, .9); }
  to   { box-shadow: 0 0 0 2px rgba(40, 180, 120, 0); }
}
@keyframes pv-flash-error {
  from { box-shadow: 0 0 0 2px rgba(220, 70, 70, .95); }
  to   { box-shadow: 0 0 0 2px rgba(220, 70, 70, 0); }
}
.is-preview .pv-flash-ok    { animation: pv-flash-ok .9s ease-out; }
.is-preview .pv-flash-error { animation: pv-flash-error .9s ease-out; }

/* Replaceable media. The badge lives on the parent because <img> and <video>
   are void/replaced elements and cannot carry ::after content of their own. */
.is-preview .pv-media-host { position: relative; }
.is-preview [data-edit-img] {
  cursor: pointer;
  transition: filter .15s ease, box-shadow .15s ease;
}
.is-preview [data-edit-img]:hover {
  filter: brightness(.82);
  box-shadow: inset 0 0 0 2px rgba(64, 132, 255, .9);
}
.is-preview .pv-media-host::after {
  content: "Replace image";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(16, 18, 22, .88);
  color: #fff;
  font-family: var(--font-body, system-ui), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 5;
}
.is-preview .pv-media-host:hover::after { opacity: 1; }

/* The hero stacks its wordmark and CTA over the photo; the badge would sit
   on top of both and read as part of the design. Nudge it clear. */
.is-preview .hero.pv-media-host::after,
.is-preview .hero .pv-media-host::after { top: 22%; }

/* ---------------------------------------------------------------------------
   Content block — the general-purpose section.

   Built from the same tokens as the hand-written sections so a block added
   from the POS sits beside the Editorial and Spotlight rows without looking
   like it came from somewhere else.
   --------------------------------------------------------------------------- */
.content-block__heading {
  font-family: var(--font-display, "Bebas Neue"), sans-serif;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: .01em;
  margin: 0 0 var(--space-md, 1rem);
}
.content-block__body {
  margin: 0 0 var(--space-md, 1rem);
  max-width: 62ch;
  line-height: 1.7;
  color: var(--color-ink-muted, #55565a);
}
.content-block__cta { margin-top: var(--space-sm, .5rem); }
.content-block__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Split */
.content-block--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
}
.content-block--split .content-block__media { min-height: 420px; height: 100%; overflow: hidden; }
.content-block--split .content-block__text { padding: clamp(2rem, 5vw, 4.5rem); }
/* Image-left is the DOM order; image-right flips visually rather than in
   markup, so the heading still comes first for screen readers either way. */
.content-block--right .content-block__media { order: 2; }

/* Stacked / full width */
.content-block--stacked { padding-block: clamp(3rem, 7vw, 6rem); }
.content-block--stacked .content-block__media {
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  max-height: 560px; overflow: hidden;
}

/* Banner: words over a photo */
.content-block--banner {
  position: relative;
  min-height: clamp(340px, 46vw, 560px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}
.content-block--banner .content-block__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.content-block--banner .content-block__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.5));
}
.content-block--banner .content-block__text {
  position: relative;
  padding: clamp(1.5rem, 5vw, 3rem);
  color: #fff;
  max-width: 46rem;
}
.content-block--banner .content-block__body { color: rgba(255,255,255,.9); margin-inline: auto; }
.content-block--banner .eyebrow { color: rgba(255,255,255,.75); }

/* Unconfigured block — only ever seen inside the editor. */
.content-block--empty { padding-block: clamp(2rem, 5vw, 3.5rem); }
.content-block__placeholder {
  margin: 0; padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px dashed var(--color-line, #d9d9dc);
  border-radius: 4px;
  text-align: center;
  color: var(--color-ink-muted, #55565a);
  font-size: .875rem;
}

@media (max-width: 860px) {
  .content-block--split { grid-template-columns: 1fr; }
  .content-block--split .content-block__media { min-height: 280px; order: 0 !important; }
  .content-block--split .content-block__text { padding: clamp(1.75rem, 7vw, 2.5rem); }
}

/* ---------------------------------------------------------------------------
   SEO / info pages
   --------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Server-rendered fallback (netlify/edge-functions/prerender.js). It is the
   same content the app renders, for crawlers that don't run JavaScript. When
   JS is running the app replaces it within moments, so keep it from flashing. */
.js .ssr { display: none; }
.ssr { padding: var(--space-3xl) var(--space-2xl); max-width: var(--page-width); margin: 0 auto; }
.ssr img { max-width: 240px; height: auto; }

.info-page { padding-top: var(--space-4xl); padding-bottom: var(--space-5xl); max-width: 760px; }
.info-prose p, .info-section p, .info-faq__item p { font-size: 16px; line-height: 1.7; margin: 0 0 var(--space-md); }
.info-section { margin-top: var(--space-3xl); }
.info-h2 { font-size: 28px; margin: 0 0 var(--space-md); }
.info-faq__item { padding: var(--space-xl) 0; border-top: 1px solid var(--color-border, rgba(0,0,0,.12)); }
.info-faq__q { font-family: inherit; font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; margin: 0 0 var(--space-sm); }
.info-list, .info-contact { margin: 0; padding-left: 1.2em; line-height: 1.9; font-size: 16px; }
.info-page a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.info-cta { margin-top: var(--space-3xl); }
@media (max-width: 749px) {
  .info-page { padding-top: var(--space-2xl); padding-inline: var(--space-lg); }
  .info-h2 { font-size: 24px; }
}
.footer__store { margin: 0 0 var(--space-sm); }

/* ---------------------------------------------------------------------------
   Customer accounts
   --------------------------------------------------------------------------- */
.check-field { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--color-ink-muted); margin: var(--space-sm) 0 0; cursor: pointer; }
.check-field input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--color-ink, #111); }
.field__optional { color: var(--color-ink-muted); font-size: 12px; }
.form-aside { font-size: 13px; margin: 0; }
.form-aside a, .form-switch a { text-decoration: underline; text-underline-offset: 3px; }
.account-page { padding-top: var(--space-4xl); padding-bottom: var(--space-5xl); max-width: 1040px; }
.account-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-5xl); align-items: start; }
.account-details { background: var(--color-milk-tea-fill, #f6f3ee); padding: var(--space-2xl); }
@media (max-width: 749px) {
  .account-page { padding-inline: var(--space-lg); padding-top: var(--space-2xl); }
  .account-grid { grid-template-columns: 1fr; gap: var(--space-3xl); }
  .account-details { padding: var(--space-lg); }
  .narrow { padding: var(--space-3xl) var(--space-lg); }
}

.join-band { padding: var(--space-5xl) var(--space-2xl); text-align: center; border-top: 1px solid rgba(0,0,0,.08); }
.join-band__inner { max-width: 560px; margin: 0 auto; }
.join-band__heading { font-size: 40px; margin: 0 0 var(--space-md); }
.join-band__text { color: var(--color-ink-muted); line-height: 1.6; margin: 0 0 var(--space-2xl); }
.join-band__actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }
.join-band__actions .btn { min-width: 160px; }
@media (max-width: 749px) {
  .join-band { padding: var(--space-4xl) var(--space-lg); }
  .join-band__heading { font-size: 30px; }
  .join-band__actions .btn { flex: 1 1 100%; }
}

/* Colour swatches on products with a colour option (not just sibling links) */
button.swatch { cursor: pointer; appearance: none; -webkit-appearance: none; }
/* Sold out: keep the true colour (fading black makes it look grey) and
   strike it through, with a light edge so the line reads on dark swatches. */
button.swatch:disabled { cursor: not-allowed; }
button.swatch:disabled::after {
  content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px;
  background: var(--color-ink); box-shadow: 0 0 0 1px #fff; transform: rotate(45deg); transform-origin: center;
}
button.swatch:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
.product-detail__gallery img { animation: pd-fade .25s ease-out; }
@keyframes pd-fade { from { opacity: .4; } to { opacity: 1; } }