/* ============================================================================
   DC Kids — storefront. Editorial layout in the DC Kids brand colours
   (forest green, blush, sage, ivory). Geometric sans (Jost), generous
   whitespace, scroll reveals. Also the base for account.html; the admin
   sign-in screens use auth.css, and the dashboard keeps its own stylesheets.
   ============================================================================ */

/* Jost, self-hosted (SIL OFL). Variable fonts: one file spans every weight.
   latin-ext carries the cedi sign (U+20B5). Same-origin, so it loads offline
   and without a third-party round trip on slow networks. */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: italic; font-weight: 300 400; font-display: swap;
  src: url('fonts/jost-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: italic; font-weight: 300 400; font-display: swap;
  src: url('fonts/jost-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --font: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* DC Kids brand */
  --green:      #0F4C3A;  /* primary — logo, prices, CTAs */
  --green-deep: #0A3A2C;
  --blush:      #F2D1D1;
  --blush-soft: #FBF0EF;  /* product/image panels */
  --sage:       #CDE4D6;
  --sage-soft:  #EEF5F0;  /* alternate sections */
  /* Deep enough for small text: 4.6:1 or better on every light ground here
     (WCAG AA). The earlier #5E9C7E gave about 3:1, so labels read faint. */
  --sage-dark:  #44705B;

  --bg:        #FAFAF8;   /* ivory page */
  --panel:     var(--blush-soft);
  --panel-2:   #F6E4E2;
  --ink:       #1A1A1A;   /* charcoal text */
  --ink-soft:  #4B5563;   /* body copy */
  --muted:     #63676D;   /* secondary text: 4.6:1 or better on every light ground (was #8A8F98, about 3:1) */
  --label:     var(--sage-dark); /* UPPERCASE small labels */
  --line:      #ECE4E2;   /* hairline dividers */
  --dark:      var(--green); /* dark button / Buy Now */
  --sale:      #B3263E;   /* % off badges and sale prices — a deep rose from the blush family */

  --maxw: 1320px;
  --gutter: clamp(18px, 4vw, 56px);
  --nav-h: 66px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-slow: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
/* buttons/links here set their own display; the hidden attribute must still win */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

.container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* hide-scrollbar utility */
.no-bar::-webkit-scrollbar { display: none; }
.no-bar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------------------------------------------------------------- NAV ----- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  height: var(--nav-h);
  display: grid;
  /* The links sit dead centre while the sides have room; when the buttons
     outgrow their half, that side widens instead of running into the links. */
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  column-gap: 32px;
  align-items: center;
  padding: 0 var(--gutter);
  background: rgba(250,250,248,0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--line); }
/* Over the hero photo: no bar, white type. The solid
   ivory bar with the green wordmark returns once the page covers the hero. */
.nav.nav--clear { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
.nav--clear .nav__logo, .nav--clear .nav__links a, .nav--clear .nav__search, .nav--clear .nav__account, .nav--clear .nav__cart, .nav--clear .nav__menu { color: #fff; }
.nav__saved { white-space: nowrap; }
.nav--clear .nav__links a::after { background: #fff; }
.nav--clear .nav__mark { filter: drop-shadow(0 1px 8px rgba(0,0,0,.3)); }
.nav__logo {
  font-weight: 600; font-size: 20px; letter-spacing: .34em;
  text-transform: uppercase; white-space: nowrap; color: var(--green);
}
.nav__links { display: flex; gap: 34px; justify-self: center; }
.nav__links a { font-size: 15px; color: var(--ink); position: relative; padding: 4px 0; }
.nav__logo, .nav__links a, .nav__search, .nav__account, .nav__cart, .nav__menu { transition: color .35s var(--ease); }
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--green); transition: width .35s var(--ease);
}
.nav__links a:hover::after { width: 100%; }
.nav__right { display: flex; gap: 26px; align-items: center; justify-self: end; }
.nav__cart { font-size: 15px; background: none; border: 0; color: var(--ink); display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 4px; }
.nav__cart b { font-weight: 500; }
/* magnifier + word on desktop; just the magnifier on phones, where the bar is tight */
.nav__search { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 4px; font-size: 15px; background: none; border: 0; color: var(--ink); }
.nav__search svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.nav__account { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 4px; font-size: 15px; color: var(--ink); white-space: nowrap; }
.nav__account svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.nav__menu { display: none; font-size: 15px; background: none; border: 0; color: var(--ink); min-height: 44px; padding: 0 4px; }
.nav__logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; justify-self: start; }
.nav__mark { height: 40px; width: auto; flex: 0 0 auto; }

/* inner pages (product, account, track, support…): solid bar, logo left, text links right */
.nav--page { grid-template-columns: 1fr auto; }
.nav__text-link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 4px;
  font: inherit; font-size: 15px; color: var(--ink); background: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: color .3s var(--ease);
}
.nav__text-link:hover { color: var(--green); }
.nav__text-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.page-footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 26px var(--gutter); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted);
}
.page-footer a { color: var(--ink-soft); }
.page-footer a:hover { color: var(--green); }

/* mobile menu overlay */
.m-menu {
  position: fixed; inset: 0; z-index: 96; background: var(--bg);
  transform: translateY(-100%);
  /* hidden once slid away, so its links leave the tab order */
  visibility: hidden; transition: transform .5s var(--ease-slow), visibility 0s linear .5s;
  display: flex; flex-direction: column; padding: calc(var(--nav-h) + 20px) var(--gutter) 40px;
}
.m-menu.open { transform: translateY(0); visibility: visible; transition: transform .5s var(--ease-slow), visibility 0s; }
.m-menu__close { position: absolute; top: 7px; right: var(--gutter); background: none; border: 0; font-size: 15px; min-height: 44px; padding: 0 4px; color: var(--ink); }
.m-menu a { font-size: 34px; font-weight: 300; padding: 14px 0; border-bottom: 1px solid var(--line); }

/* search panel — covers the page (and the nav) while open */
.search {
  position: fixed; inset: 0; z-index: 97; background: var(--bg);
  overflow-y: auto; overscroll-behavior: contain; padding-bottom: 60px;
  opacity: 0; transform: translateY(-18px);
  visibility: hidden; transition: opacity .35s var(--ease), transform .5s var(--ease-slow), visibility 0s linear .5s;
}
.search.open { opacity: 1; transform: none; visibility: visible; transition: opacity .35s var(--ease), transform .5s var(--ease-slow), visibility 0s; }
.search__bar { display: flex; align-items: flex-end; gap: 20px; padding-top: clamp(28px, 9vh, 96px); border-bottom: 1px solid var(--green); }
.search__bar:focus-within { box-shadow: 0 1px 0 var(--green); }
.search__field { flex: 1; min-width: 0; }
.search__field input {
  width: 100%; padding: 8px 0 14px; border: 0; background: none; border-radius: 0; -webkit-appearance: none; appearance: none;
  font-family: inherit; font-weight: 300; font-size: clamp(32px, 5vw, 64px); line-height: 1.1; color: var(--ink);
}
.search__field input::placeholder { color: #C9BEBC; }
.search__field input:focus { outline: none; }
.search__close { flex: 0 0 auto; min-height: 44px; padding: 0 4px; margin-bottom: 10px; background: none; border: 0; font-size: 15px; color: var(--ink); }
.search__status { margin: 20px 0 22px; min-height: 21px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.search__suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.search__grid { grid-template-columns: repeat(4, 1fr); }
.search__grid:empty { display: none; }
/* results swap on every keystroke — no reveal animation here */
.search__grid .reveal-card { opacity: 1; transform: none; transition: none; }
.search__more { display: flex; justify-content: center; margin-top: 30px; }
.search__more .btn { width: auto; min-width: 240px; }

/* ---------------------------------------------------------------- HERO ---- */
/* Full-bleed cover under a transparent nav. It's sticky, so the page (.cover)
   slides up over it — a curtain reveal. */
.hero {
  position: sticky; top: 0; z-index: 0;
  height: 88vh; height: 88svh; min-height: 540px; max-height: 960px;
  overflow: hidden; color: #fff; background: #23241f;
}
.hero__slides { position: absolute; inset: 0; will-change: transform; }
.hero__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.4s var(--ease-slow), transform 7s linear;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }
/* portrait photos in a wide cover: keep the owner's face inside the visible band */
.hero__slide--shop { object-position: 55% 42%; }
.hero__slide--owner { object-position: 50% 52%; }
/* top fade keeps the white nav legible; bottom fade carries the headline */
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.36) 0%, rgba(0,0,0,0) 22%),
    linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,.14) 42%, rgba(0,0,0,0) 62%);
}
.hero__content {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding-bottom: clamp(24px, 5vw, 60px); will-change: transform, opacity;
}
.hero__title {
  color: #fff; font-weight: 400; font-size: clamp(24px, 3.4vw, 52px); line-height: 1.12;
  letter-spacing: -0.005em; max-width: 15ch; margin: 0 0 16px; text-shadow: 0 1px 20px rgba(0,0,0,.2);
}
.hero__cta {
  display: inline-block; color: #fff; font-size: 16px; padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.85); transition: letter-spacing .35s var(--ease);
}
.hero__cta:hover { letter-spacing: .04em; }
.hero__tools { display: flex; align-items: center; gap: 2px; }
.hero__down, .hero__pause { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; background: none; border: 0; padding: 0; }
.hero__down svg, .hero__pause svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hero__pause svg { width: 15px; height: 15px; opacity: .8; }
.hero__pause .i-play { display: none; }
.hero__pause[aria-pressed="true"] .i-pause { display: none; }
.hero__pause[aria-pressed="true"] .i-play { display: inline; fill: currentColor; stroke: none; }
.hero__down svg { animation: hero-bob 2.4s var(--ease) infinite; }
@keyframes hero-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.hero a:focus-visible, .hero button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The page sheet that slides over the pinned hero. Solid background so nothing
   shows through; the soft top shadow sells the "sheet coming up" depth. */
.cover { position: relative; z-index: 1; background: var(--bg); box-shadow: 0 -18px 40px rgba(0,0,0,.12); }
.link-underline {
  display: inline-block; font-size: 15px; padding-bottom: 4px; color: var(--green);
  border-bottom: 1px solid var(--green); transition: letter-spacing .35s var(--ease), opacity .3s;
}
.link-underline:hover { letter-spacing: .04em; }
button.link-underline { background: none; border: 0; border-bottom: 1px solid var(--green); padding: 0 0 4px; }

/* ------------------------------------------------------------- SECTIONS --- */
.section { padding: clamp(56px, 9vw, 130px) 0; }
.section--panel { background: var(--panel); }
.section--sage { background: var(--sage-soft); }
.section__ghost {
  font-weight: 300; font-size: clamp(44px, 9vw, 130px); line-height: 1;
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 clamp(30px, 5vw, 64px);
}
.section__label { font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--label); margin: 0 0 18px; }

/* --------------------------------------------------------- PRODUCT GRID --- */
/* Thin gutters between cards; on phones the grid runs edge to edge (below). */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.card {
  position: relative; background: var(--bg); border: 0; text-align: left;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.card__media { position: relative; aspect-ratio: 1/1; background: var(--panel); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-slow); }
.card:hover .card__media img { transform: scale(1.045); }
.card__badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.card__badge {
  font-size: 11px; letter-spacing: .08em; line-height: 1.3;
  text-transform: uppercase; background: var(--dark); color: #fff; padding: 5px 10px;
}
.card__badge--soft { background: #fff; color: var(--ink); box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.card__badge--sale { background: var(--sale); font-weight: 500; }
.card__body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 20px; }
.card__name { font-size: 17px; color: var(--ink); }
.card__price { font-size: 15px; color: var(--green); }
.card__price--sale { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
/* Sale prices: the new price in the sale colour, the old one struck through. */
.price-now { color: var(--sale); font-weight: 500; }
.price-was { color: var(--muted); font-size: .87em; }
.price-off { margin-left: 10px; padding: 3px 8px; vertical-align: middle; background: var(--sale); color: #fff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.card:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; z-index: 1; }

/* A product cell holds the card link and, beside it, the wishlist heart. */
.card-cell { position: relative; display: flex; flex-direction: column; }
.card-cell > .card { flex: 1 1 auto; }
.card__save {
  position: absolute; top: 8px; right: 8px; z-index: 4; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.card__save svg, .pdp__save svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.card__save:active { transform: scale(.92); }
.card__save.is-on, .pdp__save.is-on { color: var(--sale); }
.card__save.is-on svg, .pdp__save.is-on svg { fill: currentColor; }
.card__save:focus-visible, .pdp__save:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.pdp__save { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; padding: 0; background: none; border: 0; font-size: 14px; color: var(--ink); }
.citem__links { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.citem__links .citem__rm { margin-top: 0; min-height: 44px; }
.m-menu__count { font-size: .55em; color: var(--muted); vertical-align: middle; }

/* lifestyle card variant: full-bleed image with name/price overlaid.
   ::before gives the tile an intrinsic height so a row of only lifestyle
   tiles still has size; mixed rows stretch it to match the plain cards. */
.card--life::before { content: ''; display: block; padding-top: 116%; }
.card--life .card__media { position: absolute; inset: 0; aspect-ratio: auto; }
.card--life .card__body { position: absolute; left: 0; right: 0; bottom: 0; color: #fff; padding: 22px; }
.card--life .card__name,
.card--life .card__price { color: #fff; }
.card--life .card__media::after { content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0) 55%); }
.card--life .card__name, .card--life .card__price { position: relative; z-index: 1; }

.card--edit .card__name { font-size: clamp(22px, 2.2vw, 30px); font-weight: 300; }
.card--edit .card__price { font-size: 14px; letter-spacing: .04em; }

.card__soldout { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.55); z-index: 3; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }

/* ------------------------------------------------------- NEW ARRIVALS ----- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(26px, 5vw, 80px); }
.split__img { aspect-ratio: 3/4; overflow: hidden; background: var(--panel); }
.split__img img { width:100%; height:100%; object-fit: cover; }
.split__title { font-weight: 300; font-size: clamp(30px, 4.4vw, 52px); margin: 0 0 18px; line-height: 1.05; }
.split__text { font-style: italic; color: var(--ink-soft); font-size: 18px; max-width: 40ch; margin: 0 0 26px; }
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }

/* ---------------------------------------------------- CHINA PRE-ORDERS ---- */
.pre__head { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(20px, 4vw, 60px); align-items: end; margin-bottom: clamp(28px, 4vw, 52px); }
.pre__head .section__ghost { margin-bottom: 0; }
.pre__intro { color: var(--ink-soft); font-size: 17px; max-width: 42ch; margin: 0 0 8px; }
.pre__steps { list-style: none; margin: 0 0 clamp(30px, 4vw, 48px); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 40px); }
.pre__steps li { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.pre__steps b { font-weight: 500; font-size: 17px; }
.pre__steps li > span:last-child { color: var(--ink-soft); font-size: 15px; }
.pre__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; border-radius: 50%; background: var(--sage-soft); color: var(--green); }
.pre__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* the three ways to pre-order: DC Kids picks, personal, bulk */
.pre__kinds { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: clamp(34px, 5vw, 60px); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pre__kind { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(22px, 3vw, 34px); background: var(--bg); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pre__kind-label { margin: 0 0 10px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.pre__kind h3 { margin: 0 0 8px; font-weight: 300; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; }
.pre__kind p:not(.pre__kind-label) { flex: 1; margin: 0 0 18px; color: var(--ink-soft); font-size: 15px; }

/* DC Sourcing & Logistics: the open window, what is sourced, the picks. */
.pre__window { justify-self: end; text-align: right; }
.pre__window p { margin: 0; }
.pre__window-label { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--green); }
.pre__window-label::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
.pre__window .pre__window-dates { margin-top: 6px; font-weight: 300; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; }
.pre__window .pre__window-left { margin-top: 4px; font-size: 15px; color: var(--sale); }
.sourcing .pre__intro { max-width: 60ch; margin-bottom: clamp(30px, 4vw, 48px); }
.pre__subhead { margin: 0 0 18px; font-weight: 400; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
/* Photo tiles, laid out like the product grid: thin gaps, picture on top. */
.pre__source { list-style: none; margin: 0 0 clamp(34px, 5vw, 60px); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pre__source li { display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
.pre__source img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; background: var(--panel); transition: transform 1.1s var(--ease-slow); }
.pre__source li:hover img { transform: scale(1.04); }
.pre__source b { padding: 14px 16px 0; font-weight: 500; font-size: 17px; }
.pre__source span { padding: 4px 16px 18px; color: var(--ink-soft); font-size: 14px; }
.pre__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.pre__cta .btn { width: auto; min-width: 240px; }
/* This window's pieces: the shop's own cards, with category filters above. */
.pre__finds { margin: 0 0 clamp(40px, 6vw, 72px); }
.pre__finds-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 24px; }
.pre__finds-head .pre__subhead { margin-bottom: 8px; }
.pre__finds-note { margin: 0 0 16px; color: var(--ink-soft); font-size: 15px; }
/* Retail / Wholesale inside the tab, the same pills as the tabs above it. */
.pre__prices { display: inline-flex; gap: 2px; padding: 4px; margin-bottom: 16px; border-radius: 999px; background: var(--bg); }
.pre__prices button {
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: none;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: all .3s;
}
.pre__prices button.on { background: var(--green); color: #fff; }
.pre__kind-links { display: flex; flex-wrap: wrap; gap: 24px 22px; }
/* The links read as text but take a full-size tap. */
.pre__kind .link-underline { position: relative; }
.pre__kind .link-underline::after { content: ''; position: absolute; inset: -12px -6px; }
.pre__filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px; }
.pre__filters:empty { display: none; }
.pre__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* -------------------------------------------------------------- STATS ----- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px); }
.stat__num { font-weight: 300; font-size: clamp(30px, 3.6vw, 46px); margin: 0 0 8px; color: var(--green); }
.stat__cap { color: var(--ink-soft); font-size: 15px; max-width: 24ch; }

/* --------------------------------------------------------- COLLECTIONS ---- */
.collections { position: relative; }
.collections__list { display: flex; flex-direction: column; }
.coll {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: clamp(10px, 1.6vw, 20px) 0; border-top: 1px solid var(--line);
  font-weight: 300; font-size: clamp(32px, 6.5vw, 86px); line-height: 1.05;
  color: #D6C9C7; transition: color .4s var(--ease), padding-left .4s var(--ease);
}
.collections__list .coll:last-child { border-bottom: 1px solid var(--line); }
.coll:hover { color: var(--green); padding-left: 18px; }
.coll__idx { font-size: 14px; color: var(--label); letter-spacing: .1em; }
.coll__peek {
  position: fixed; width: 240px; height: 300px; object-fit: cover; pointer-events: none;
  opacity: 0; transform: translate(32px, -50%) scale(.96); transition: opacity .3s var(--ease), transform .4s var(--ease);
  z-index: 40; box-shadow: 0 30px 60px rgba(0,0,0,.18);
}
/* sits right of the cursor so the hovered word stays visible */
.coll__peek.show { opacity: 1; transform: translate(32px, -50%) scale(1); }

/* --------------------------------------------------------------- ABOUT ---- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 5vw, 80px); align-items: center; }
.about__img { aspect-ratio: 4/3; overflow: hidden; background: var(--panel); }
.about__img img { width:100%;height:100%;object-fit:cover; }
.about__title { font-weight: 300; font-size: clamp(36px, 5vw, 64px); margin: 0 0 22px; }
.about__text { color: var(--ink-soft); font-size: 17px; max-width: 48ch; }

/* -------------------------------------------------------------- VALUES ---- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.values > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.value { background: var(--bg); padding: 30px 26px 34px; }
.value__media { aspect-ratio: 1/1; background: var(--panel); margin-bottom: 20px; display: grid; place-items: center; overflow: hidden; }
.value__media img { width: 100%; height: 100%; object-fit: cover; }
.value__media svg { width: 42px; height: 42px; stroke: var(--ink); stroke-width: 1.4; fill: none; }
.value__name { font-size: 18px; margin: 0 0 4px; }
.value__role { font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------- FOOTER ----- */
.footer { background: var(--bg); border-top: 1px solid var(--line); padding: clamp(50px, 7vw, 90px) 0 36px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(26px, 4vw, 60px); }
.footer__logo { font-weight: 600; letter-spacing: .34em; text-transform: uppercase; font-size: 22px; color: var(--green); }
.footer__col h3 { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--label); margin: 0 0 18px; font-weight: 500; }
.footer__col a { display: block; font-size: 15px; color: var(--ink-soft); padding: 6px 0; transition: color .25s; }
.footer__col a:hover { color: var(--ink); }
.footer__news { margin-top: 26px; max-width: 420px; }
.footer__news p { font-size: 15px; color: var(--ink-soft); margin: 0 0 14px; }
.news-form { display: flex; border-bottom: 1px solid var(--green); }
.news-form input { flex: 1; border: 0; background: none; padding: 10px 2px; font-family: inherit; font-size: 15px; color: var(--ink); }
.news-form input:focus { outline: none; }
.news-form button { background: none; border: 0; font-size: 14px; letter-spacing: .06em; padding: 0 6px 0 16px; }
.footer__bottom { margin-top: clamp(40px, 6vw, 70px); padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--muted); }
.footer__bottom a { color: var(--muted); }
.footer__bottom a:hover { color: var(--ink); }
/* Legal links stay small — that is the right weight for them — but the tap
   area does not have to be. Vertical padding on an inline element grows the
   hit box without moving the line it sits on, taking 19px to about 41px. */
.footer__bottom a { padding-block: 11px; }

/* --------------------------------------------------------- CART DRAWER ---- */
.scrim { position: fixed; inset: 0; background: rgba(20,20,18,.34); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease); z-index: 98; }
.scrim.show { opacity: 1; visibility: visible; }
.cart {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 99;
  background: var(--bg); transform: translateX(100%);
  visibility: hidden; transition: transform .5s var(--ease-slow), visibility 0s linear .5s;
  display: flex; flex-direction: column;
}
.cart.open { transform: translateX(0); visibility: visible; transition: transform .5s var(--ease-slow), visibility 0s; }
.cart__head { display: flex; justify-content: space-between; align-items: center; padding: 24px 26px; border-bottom: 1px solid var(--line); }
.cart__head h3 { margin: 0; font-weight: 400; font-size: 18px; }
.cart__head span { color: var(--muted); }
.cart__close { background: none; border: 0; font-size: 22px; line-height: 1; }
.cart__items { flex: 1; overflow-y: auto; padding: 8px 26px; }
.cart__empty { padding: 60px 20px; text-align: center; color: var(--muted); font-size: 15px; }
.citem { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.citem__img { width: 64px; height: 64px; object-fit: cover; background: var(--panel); }
.citem__name { font-size: 15px; }
.citem__meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.citem__qty { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; border: 1px solid var(--line); padding: 2px 6px; }
.citem__qty button { background: none; border: 0; font-size: 15px; color: var(--ink); padding: 2px 6px; }
.citem__price { font-size: 15px; white-space: nowrap; }
.citem__rm { background: none; border: 0; color: var(--muted); font-size: 12px; margin-top: 8px; text-decoration: underline; }
/* A line checkout would refuse, with the reason under its size and price. */
.citem--issue .citem__img { opacity: .55; }
.citem__issue { margin-top: 6px; font-size: 13px; line-height: 1.4; color: #B42318; }
/* A wholesale line under the minimum: fine, at the retail price, and it says so. */
.citem__note { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.cart__fix { display: inline; padding: 0; background: none; border: 0; font: inherit; color: var(--green); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cart__foot { padding: 22px 26px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.cart__sub { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 16px; }
.cart__sub b { font-weight: 500; }
.cart__welcome { margin-bottom: 8px; font-size: 14px; color: var(--sale); }
.cart__hint--offer { margin: -8px 0 16px; color: var(--sale); }

/* ------------------------------------------------ WHATSAPP LIST POP-UP --- */
.welcome { width: min(780px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; background: var(--bg); color: var(--ink); overflow: auto; box-shadow: 0 24px 60px rgba(0,0,0,.22); }
.welcome[open] { display: grid; grid-template-columns: 5fr 6fr; animation: welcome-in .55s var(--ease); }
.welcome::backdrop { background: rgba(10, 58, 44, .5); }
.welcome__media { background: var(--panel); min-height: 100%; }
.welcome__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.welcome__body { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 48px 38px 26px; }
.welcome__x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; background: none; border: 0; font-size: 28px; line-height: 1; color: var(--ink); }
.welcome__kicker { margin: 0; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--label); }
.welcome__title { margin: 0; font-weight: 300; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.04; letter-spacing: -.01em; }
.welcome__title b { display: block; font-weight: 500; color: var(--sale); }
.welcome__text { margin: 0; font-size: 15px; color: var(--ink-soft); }
.welcome__form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.welcome__form .field { margin-bottom: 0; }
.welcome__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); cursor: pointer; }
.welcome__consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--green); }
.welcome__consent a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.welcome__error { margin: 0; font-size: 13px; color: var(--sale); }
.welcome__skip { align-self: center; min-height: 44px; padding: 0 12px; background: none; border: 0; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.welcome a:focus-visible, .welcome button:focus-visible, .welcome input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@keyframes welcome-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .welcome[open] { grid-template-columns: 1fr; }
  .welcome__media { display: none; }
  .welcome__body { padding: 44px 22px 18px; }
}

/* -------------------------------------------------------------- BUTTONS --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; letter-spacing: .02em; padding: 15px 22px; border: 1px solid var(--green); background: none; color: var(--green); width: 100%; transition: background .3s var(--ease), color .3s var(--ease), opacity .3s; }
.btn:hover { background: var(--green); color: #fff; }
.btn--wa { background: #25D366; border-color: #25D366; color: #fff; }
.btn--wa:hover { background: #1ebe5b; border-color: #1ebe5b; color: #fff; }
.btn--dark { background: var(--dark); color: #fff; border-color: var(--dark); }
.btn--dark:hover { opacity: .88; background: var(--dark); color: #fff; }
.btn--light { background: var(--panel); border-color: var(--panel); color: var(--ink); }
.btn--light:hover { background: var(--panel-2); color: var(--ink); }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ----------------------------------------------------------------- PDP ---- */
/* Sits under the nav so Cart stays reachable. Open state
   uses transform:none — a transformed parent would trap the fixed close button. */
.pdp { position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 92; background: var(--bg); transform: translateY(100%); visibility: hidden; transition: transform .55s var(--ease-slow), visibility 0s linear .55s; overflow-y: auto; }
.pdp.open { transform: none; visibility: visible; transition: transform .55s var(--ease-slow), visibility 0s; }
.pdp__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--nav-h)); }
.pdp__media { background: var(--panel); position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(30px,6vw,90px); }
.pdp__media img { max-height: 70vh; width: auto; object-fit: contain; }
.pdp__thumbs { position: absolute; left: clamp(20px,4vw,40px); bottom: clamp(20px,4vw,40px); display: flex; gap: 10px; }
.pdp__thumbs img { width: 56px; height: 56px; object-fit: cover; background: #fff; border: 1px solid var(--line); cursor: pointer; }
.pdp__info { padding: clamp(40px,6vw,96px) clamp(26px,5vw,80px); display: flex; flex-direction: column; justify-content: center; max-width: 620px; }
.pdp__close { position: fixed; top: calc(var(--nav-h) + 14px); right: var(--gutter); z-index: 2; background: none; border: 0; font-size: 28px; line-height: 1; color: var(--ink); width: 44px; height: 44px; }
.pdp__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pdp__name { font-weight: 300; font-size: clamp(30px,3.4vw,44px); margin: 0; line-height: 1.05; }
.pdp__price { font-size: 22px; color: var(--green); white-space: nowrap; }
.pdp__price.is-sale { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pdp__price.is-sale .price-off { margin-left: 0; }
.pdp__sizes { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 8px; }
.size-chip { border: 1px solid var(--line); background: none; padding: 10px 16px; font-size: 14px; color: var(--ink); transition: all .25s var(--ease); }
.size-chip:hover { border-color: var(--ink); }
.size-chip.sel { background: var(--dark); color: #fff; border-color: var(--dark); }
.pdp__desc { color: var(--ink-soft); font-size: 16px; margin: 22px 0 10px; max-width: 48ch; }
.pdp__stock { font-size: 14px; color: var(--muted); margin-bottom: 20px; }
/* The reason a piece can't be bought (is-block), or why the quantity stopped. */
.pdp__note { margin: -8px 0 18px; padding: 11px 14px; font-size: 14px; line-height: 1.45; color: var(--ink); background: var(--sage-soft); border-left: 2px solid var(--green); }
.pdp__note.is-block { background: var(--blush-soft); border-left-color: var(--sale); }
.pdp__buy { display: grid; grid-template-columns: 120px 1fr; gap: 12px; margin-bottom: 12px; }
.qty { display: inline-flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); padding: 0 6px; }
.qty button { background: none; border: 0; font-size: 18px; padding: 12px 10px; color: var(--ink); }
.qty span { font-size: 15px; min-width: 20px; text-align: center; }

/* -------------------------------------------------------------- POPUP ----- */
.promo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 93; background: var(--dark); color: #fff; transform: translateY(100%); transition: transform .5s var(--ease-slow); }
.promo.show { transform: translateY(0); }
.promo__in { display: flex; align-items: center; gap: 20px; justify-content: center; padding: 16px var(--gutter); flex-wrap: wrap; }
.promo p { margin: 0; font-size: clamp(16px,2vw,22px); font-weight: 300; }
.promo .promo__dates { margin-top: 4px; font-size: 13px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.promo .btn { width: auto; background: #fff; color: var(--dark); border-color: #fff; padding: 11px 22px; }
.promo__x { position: absolute; top: 10px; right: var(--gutter); background: none; border: 0; color: #fff; font-size: 20px; opacity: .8; }

/* ------------------------------------------------------- SHOP TOOLS ------ */
.nowrap { white-space: nowrap; }
.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; }
.shop-tools { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.shop-search input {
  width: 100%; max-width: 420px; font-family: inherit; font-size: 16px; color: var(--ink);
  background: none; border: 0; border-bottom: 1px solid var(--green); padding: 10px 2px;
}
.shop-search input:focus { outline: none; border-bottom-width: 2px; }
.shop-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.cat-chip, .search__chip, .pre__filter {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--bg); color: var(--ink-soft);
  font-size: 14px; padding: 9px 16px; border-radius: 999px; transition: all .25s var(--ease); text-transform: capitalize;
}
.cat-chip:hover, .search__chip:hover, .pre__filter:hover { border-color: var(--green); color: var(--green); }
.cat-chip.on, .pre__filter.on { background: var(--green); border-color: var(--green); color: #fff; }
.shop-more { display: flex; justify-content: center; margin-top: 36px; }
.shop-more .btn { width: auto; min-width: 220px; }
.shop-empty { grid-column: 1 / -1; background: var(--bg); padding: 60px 20px; text-align: center; color: var(--muted); }

/* ------------------------------------------------------ CHECKOUT STEPS --- */
.cart__view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cart__view[hidden] { display: none; }
.cart__back { background: none; border: 0; padding: 18px 0 6px; font-size: 14px; color: var(--green); }
.cart__hint { font-size: 14px; color: var(--muted); margin: 10px 0 18px; }
.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); margin-bottom: 6px; }
.field em { text-transform: none; letter-spacing: 0; font-style: normal; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 0; padding: 12px 14px; transition: border-color .25s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--green); }
.field input[readonly] { color: var(--ink-soft); background: var(--sage-soft); }
.field textarea { resize: vertical; }
.field.err input { border-color: #DC2626; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cart__foot .btn + .btn { margin-top: 10px; }
.cart__error { margin: 0 0 16px; padding: 11px 14px; font-size: 14px; color: #B42318; background: var(--blush-soft); border-left: 2px solid #B42318; }

/* install pill — sits under every drawer/overlay (nav is 90) */
.pwa-fab { position: fixed; left: 16px; bottom: 18px; z-index: 85; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; font-size: 14px; letter-spacing: .02em; color: #fff; background: var(--green); border: 0; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.pwa-fab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pwa-fab:hover { opacity: .9; }
.cart__done { text-align: center; padding-top: 50px; }
.done__tick { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 20px; display: grid; place-items: center; background: var(--sage-soft); color: var(--green); font-size: 28px; }
.cart__done h4 { font-weight: 400; font-size: 24px; margin: 0 0 10px; }
.cart__done p { margin: 0 0 6px; }

.pdp__links { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 20px; }
.pdp__ask { display: inline-block; font-size: 14px; color: var(--green); border-bottom: 1px solid var(--green); padding-bottom: 2px; }

/* store-mode (wholesale) pill */
.mode-bar { display: flex; justify-content: center; gap: 2px; padding: 10px; background: var(--panel); }
.mode-bar button { background: none; border: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 20px; border-radius: 999px; transition: all .3s; }
.mode-bar button.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.mode-bar button[data-mode="preorder"].on { color: var(--sale); }
/* The China Pre-Order tab: its view replaces the page below the tabs. */
body.is-preorder-view .cover > section:not(#preorders) { display: none; }

/* toast */
.toast-wrap { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast { background: var(--dark); color: #fff; padding: 13px 22px; font-size: 14px; border-radius: 2px; opacity: 0; transform: translateY(14px); transition: all .35s var(--ease); max-width: 90vw; }
.toast.show { opacity: 1; transform: translateY(0); }

/* ------------------------------------------------------------ RECEIPT ----- */
/* receipt.js — the customer's copy of the receipt the admin prints */
.receipt-dialog {
  width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0;
  color: var(--ink); background: var(--bg); border: 0; border-radius: 0; box-shadow: 0 30px 80px rgba(0,0,0,.25);
}
.receipt-dialog::backdrop { background: rgba(20,20,18,.5); }
.receipt-dialog__bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 10px 22px; background: var(--bg); border-bottom: 1px solid var(--line); }
.receipt-dialog__bar h2 { margin: 0; font-weight: 400; font-size: 18px; }
.receipt-dialog__close { min-height: 44px; padding: 0 4px; font: inherit; font-size: 15px; color: var(--ink); background: none; border: 0; cursor: pointer; }
.receipt-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 6px; border-top: 1px solid var(--line); }
.receipt-dialog__actions .btn { width: auto; }
.receipt-dialog__msg { margin: 0; padding: 0 22px 16px; min-height: 22px; font-size: 13px; color: var(--green); text-align: right; }

.receipt { display: flex; flex-direction: column; gap: 22px; padding: clamp(20px, 4vw, 34px); background: #fff; }
.receipt__id { display: flex; align-items: flex-start; gap: 14px; }
.receipt__logo { width: 46px; height: auto; flex: none; }
.receipt__brand { font-size: 17px; font-weight: 500; letter-spacing: .02em; }
.receipt__muted { font-size: 13px; color: var(--muted); }
.receipt__kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); }
.receipt__headline { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.receipt__amount { margin-top: 6px; font-weight: 300; font-size: clamp(34px, 6vw, 46px); line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.receipt__paidnote { margin-top: 4px; font-size: 14px; color: var(--ink-soft); }
.receipt__stamp {
  flex: none; width: 104px; height: 104px; display: grid; place-content: center; gap: 2px; text-align: center;
  border: 1.5px solid var(--line); border-radius: 50%; color: var(--muted); transform: rotate(-8deg);
}
.receipt__stamp b { font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.receipt__stamp span { font-size: 10px; }
.receipt__stamp.is-settled { border-color: var(--green); color: var(--green); }
.receipt__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.receipt__facts dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.receipt__facts dd { margin: 3px 0 0; font-size: 14px; text-transform: capitalize; overflow-wrap: anywhere; }
.receipt__facts .receipt__mono { font-family: ui-monospace, Menlo, Consolas, monospace; text-transform: none; }
.receipt__from { padding-top: 18px; border-top: 1px solid var(--line); }
.receipt__name { margin: 4px 0 2px; font-size: 19px; }
.receipt__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.receipt__table th { padding-bottom: 8px; font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: left; border-bottom: 1px solid var(--line); }
.receipt__table td { padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.receipt__table .num { text-align: right; white-space: nowrap; padding-left: 14px; font-variant-numeric: tabular-nums; }
.receipt__desc { display: block; }
.receipt__size { display: block; font-size: 12px; color: var(--muted); }
.receipt__sum { display: flex; flex-direction: column; gap: 6px; }
.receipt__sum > div:not(.receipt__sum-total) { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.receipt__sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 4px; font-size: 16px; }
.receipt__sum-total b { font-weight: 400; font-size: 22px; color: var(--green); }
.receipt__note { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }

@media (max-width: 640px) {
  .receipt__headline { flex-direction: column; }
  .receipt__stamp { align-self: flex-end; width: 88px; height: 88px; }
  .receipt__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receipt-dialog__actions .btn { flex: 1; }
}
@media print {
  body.is-printing-receipt > *:not(.receipt-dialog) { display: none !important; }
  body.is-printing-receipt .receipt-dialog { position: static; width: 100%; max-height: none; box-shadow: none; }
  body.is-printing-receipt .receipt-dialog::backdrop { background: none; }
  body.is-printing-receipt .receipt-dialog__bar,
  body.is-printing-receipt .receipt-dialog__actions,
  body.is-printing-receipt .receipt-dialog__msg { display: none; }
  body.is-printing-receipt .receipt { padding: 0; }
}

/* ----------------------------------------------------------- REVEALS ------ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease-slow), transform 1s var(--ease-slow); }
.reveal.in { opacity: 1; transform: none; }
/* Image wipes clip the inner <img>, never the observed wrapper — Chrome's
   IntersectionObserver honours the target's own clip-path, so a fully clipped
   wrapper reads as 0% visible and would never reveal. */
.reveal-img > *,
.reveal-img--diag > * { transform: scale(1.08); transition: clip-path 1.25s var(--ease-slow), transform 1.8s var(--ease-slow); }
.reveal-img > * { clip-path: inset(0 100% 0 0); }
.reveal-img.in > * { clip-path: inset(0 0 0 0); transform: none; }
.reveal-img--diag > * { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
.reveal-img--diag.in > * { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-slow), transform .9s var(--ease-slow); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .08s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .16s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .24s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .32s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .40s; }

/* grid cards reveal one by one as they scroll in (delay set inline per column) */
.reveal-card { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-slow), transform .9s var(--ease-slow); }
.reveal-card.in { opacity: 1; transform: none; }

/* loading skeletons */
.card--skel .card__media { background: linear-gradient(90deg, var(--panel) 0%, #F8EAE8 50%, var(--panel) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.card--skel .card__body { flex-direction: column; align-items: flex-start; gap: 8px; }
.sk-line { display: block; height: 12px; width: 60%; background: var(--panel); }
.sk-line--short { width: 32%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* anchor targets clear the fixed nav */
section[id] { scroll-margin-top: var(--nav-h); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-img > *, .reveal-img--diag > *, .reveal-stagger > *, .reveal-card { transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero__slide { transition: none !important; transform: none !important; }
  .hero__down svg { animation: none; }
  .search, .search.open { transform: none; }
  .welcome[open] { animation: none; }
  .card--skel .card__media { animation: none; }
  html { scroll-behavior: auto; }
}

/* ========================================================== RESPONSIVE ==== */
@media (max-width: 1024px) {
  /* The bar needs about 1,000px for the logo, the four section links and the
     shop's buttons; narrower, the links ran under the logo and pushed Cart off
     the edge. Below that they live in the Menu, as on phones. */
  .nav { grid-template-columns: 1fr auto; column-gap: 0; }
  .nav__links { display: none; }
  .nav__menu { display: inline-block; }

  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .pre__steps { grid-template-columns: repeat(2, 1fr); }
  .pre__head { grid-template-columns: 1fr; }
  .pre__window { justify-self: start; text-align: left; }
  .pre__source { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pre__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --nav-h: 58px; }
  .nav__logo { font-size: 17px; letter-spacing: .26em; gap: 9px; }
  .nav__mark { height: 34px; }
  .nav__right { gap: 12px; }
  .nav__search svg, .nav__account svg { width: 20px; height: 20px; }
  .nav__search-label, .nav__account-label { display: none; }
  .nav__saved { display: none; } /* lives in the menu on phones */
  .nav__text-link--wide { display: none; }

  .search__bar { gap: 12px; }
  .search__grid { grid-template-columns: repeat(2, 1fr); }
  .search__more .btn { width: 100%; min-width: 0; }

  /* the photos are portrait, so on phones the cover can stand almost full screen */
  .hero { height: 86vh; height: 86svh; min-height: 520px; }
  .hero__title { font-size: 24px; max-width: 14ch; margin-bottom: 12px; }
  .hero__cta { font-size: 15px; }

  /* Edge to edge: the grid steps out of the page gutter, with hairline gaps. */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 3px; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .product-grid--shop { grid-template-columns: repeat(2, 1fr); }
  .card__badges { top: 8px; left: 8px; }
  .card__save { top: 6px; right: 6px; }
  .card__body { padding: 10px 12px 16px; gap: 2px; }
  .card__name { font-size: 15px; }
  .card__price { font-size: 13px; }

  .split, .about { grid-template-columns: 1fr; gap: 24px; }
  .split--reverse { direction: ltr; }
  .split__img, .about__img { order: -1; }

  .stats { grid-template-columns: 1fr; row-gap: 30px; }
  .pre__steps { grid-template-columns: 1fr; gap: 0; }
  .pre__steps li { padding: 16px 0; }
  .pre__kinds { grid-template-columns: 1fr; }
  /* Edge to edge on phones, like the product grid. */
  .pre__source { gap: 3px; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .pre__source b { padding: 10px 12px 0; font-size: 15px; }
  .pre__source span { padding: 2px 12px 14px; font-size: 13px; }
  .pre__cta .btn { width: 100%; min-width: 0; }
  .values { grid-template-columns: 1fr 1fr; }
  .value { padding: 20px 16px 24px; }

  /* minmax(0, 1fr): the sign-up form must not force its column wider than the
     phone. The brand and sign-up block gets the full width above the links. */
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid > :first-child { grid-column: 1 / -1; }
  .coll { font-size: clamp(30px, 11vw, 54px); }
  .coll:hover { padding-left: 0; }
  .coll__peek { display: none; }

  .pdp__grid { grid-template-columns: 1fr; }
  .pdp__media { min-height: 54vh; }
  .pdp__info { padding: 34px 24px 60px; }
  .pdp__buy { grid-template-columns: 110px 1fr; }

  .cart { width: 100vw; }
  .promo__in { justify-content: flex-start; padding-right: 44px; }
}

@media (max-width: 400px) {
  .values { grid-template-columns: 1fr; }
  /* Three tabs on a 320px phone: tighter pills, and "Pre-Order" without "China". */
  .mode-bar button { padding: 8px 12px; letter-spacing: .04em; }
  .mode-bar__long { display: none; }
  /* logo + Search + Account + Cart + Menu must share a 320px phone without overlapping */
  .nav__logo { font-size: 15px; letter-spacing: .22em; gap: 8px; }
  .nav__right { gap: 2px; }
}

@media (max-width: 340px) {
  /* The wordmark no longer fits beside the account icon; the mark alone carries the brand. */
  .nav__logo span { display: none; }
}