/* ============================== fonts ==============================
   Self-hosted rather than pulled from Google. The stylesheet link to
   fonts.googleapis.com was render-blocking, so on a distant connection the
   whole page — camera included — sat blank for seconds waiting on a DNS +
   TLS + CSS + font-file chain to a third party. These come off the same
   origin and connection as everything else, and font-display: swap paints
   text immediately instead of holding it back.

   Mongolian needs Ө (U+04E8) and Ү (U+04AE), which are in cyrillic-ext, not
   the plain cyrillic subset — both are included. unicode-range means the
   browser only downloads the subsets a page actually uses.
   Variable fonts: one file covers the whole weight range. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/inter-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: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/inter-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 600 900; font-display: swap;
  src: url("assets/fonts/montserrat-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: "Montserrat"; font-style: normal; font-weight: 600 900; font-display: swap;
  src: url("assets/fonts/montserrat-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 600 900; font-display: swap;
  src: url("assets/fonts/montserrat-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

:root {
  --bg: #fbf7f0;
  --bg-tint: #f4ebdd;
  --fg: #45241a;
  --fg-dim: rgba(69, 36, 26, 0.72);
  /* text sitting on a --fg coloured surface, such as the order button */
  --on-fg: #fbf7f0;
  /* a raised panel: image frames, gallery wells */
  --surface: #efe7d9;
  --line: rgba(69, 36, 26, 0.18);
  --sale: #c0341b;
  --ok: #3ddc84;
  --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  /* centre of the camera lens inside hero-camera.png, measured from the
     trimmed asset — the whole zoom transition pivots on this point */
  --lens-x: 52.1%;
  --lens-y: 87.5%;
  /* The lens sits 87.5% down the image and is what the scroll zooms into, so
     the offset is chosen to land it around 72% of the viewport — high enough
     to stay visible once an in-app browser's chrome takes its cut. */
  --cam-h: 92svh;
  --cam-top: -8.5svh;
}

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

html { scroll-behavior: smooth; background: var(--bg); }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

/* ============================ fixed chrome ============================ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.brand { display: flex; align-items: center; gap: 0.5rem; }
.brand__mark { height: 22px; width: auto; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--fg);
}

.topbar__icons { display: flex; gap: 0.5rem; align-items: center; }
.icon-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(69, 36, 26, 0.1);
  display: grid; place-items: center;
  font-size: 0.95rem;
  color: var(--fg);
}
.icon-btn--wide {
  width: auto; height: 34px;
  display: flex; align-items: center; gap: 0.4rem;
  border-radius: 999px;
  padding: 0 0.85rem;
  font-size: 0.86rem;
}
.icon-btn__text {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
@media (max-width: 520px) {
  .icon-btn__text { display: none; }
  .icon-btn--wide { width: 34px; padding: 0; justify-content: center; }
}

.helppop {
  position: absolute;
  top: calc(100% - 0.4rem);
  right: 1.1rem;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 190px;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(251, 247, 240, 0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(69, 36, 26, 0.18);
}
.helppop__title {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.helppop a { font-size: 1rem; font-weight: 700; }
.helppop a:hover { color: #e2a45c; }
.helppop__note { font-size: 0.68rem; color: var(--fg-dim); margin-top: 0.2rem; }

/* two-up field rows for the address block */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.7rem; }

.rail {
  position: fixed;
  top: 50%; left: 12px;
  transform: translateY(-50%);
  z-index: 60;
  display: flex; flex-direction: column; gap: 9px;
}
.rail__line {
  width: 18px; height: 2px;
  border-radius: 10px;
  background: var(--fg);
  opacity: 0.35;
  transition: width 0.4s ease, opacity 0.4s ease;
}
.rail__line.is-active { width: 44px; opacity: 1; }

.edge {
  position: fixed;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  height: 48vh;
  display: grid; place-items: center;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.edge.is-shown { opacity: 1; }
.edge span {
  writing-mode: vertical-rl;
  font-size: 0.52rem;
  letter-spacing: 0.28em;
  color: var(--fg-dim);
  white-space: nowrap;
  animation: edgeScroll 26s linear infinite;
}
@keyframes edgeScroll {
  from { transform: translateY(-50%); }
  to   { transform: translateY(50%); }
}

/* ======================= 1 · hero + lens zoom ======================= */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.hero__inner { position: absolute; inset: 0; }

.hero__word {
  position: absolute;
  left: 50%;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--fg);
  /* the fallback matters: if --chars ever goes missing the calc becomes
     invalid and the whole declaration is dropped, collapsing the type to the
     browser default */
  font-size: min(19vw, calc(92vw / (var(--chars, 6) * 0.72)));
  transform: translateX(-50%);
}
.hero__word--back  { z-index: 1; top: 39%; }
.hero__word--front { z-index: 3; top: 58%; }

.hero__cam {
  position: absolute;
  left: 0; right: 0;
  top: var(--cam-top);
  z-index: 2;
  display: flex; justify-content: center;
}
/* No filter here, deliberately. A drop-shadow makes the browser redraw the
   element at its transformed size instead of letting the GPU scale the picture
   it already has — and this one is scaled to eleven. At 622px tall on a screen
   drawing three device pixels per CSS pixel, that asks Safari for a surface
   over twenty thousand pixels tall, past what it will allocate. An iPhone 11
   Pro ran hot, stuttered, and painted only a band of the photograph across the
   middle of the screen with bare background above and below it. Measured on the
   device: the image reported a height of 1109px and a bottom edge at 609, so it
   should have covered the screen twice over; it simply was not being drawn. */
.hero__cam img {
  height: var(--cam-h);
  width: auto;
  max-width: none;
  transform-origin: var(--lens-x) var(--lens-y);
  will-change: transform;
}

.hero__veil {
  position: absolute; inset: 0;
  z-index: 5; background: var(--bg);
  opacity: 0; pointer-events: none;
}

.hero__cue {
  position: absolute;
  bottom: 1.4rem; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--fg-dim);
}

/* ==================== 2 · categories out of the dark ==================== */
/* Once the hero's pin releases it still has its own 100svh to scroll out of
   view, and its veil is fully black for all of it — a dead screenful of
   nothing before the categories creep up from below. Pulling this section up
   by exactly that height puts it right where the pin lets go, and a higher
   stacking order lets it paint over the black instead of waiting behind it. */
.cats {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  margin-top: -100svh;
  min-height: 100vh; min-height: 100svh;
  display: flex;
  padding: 5rem 1.1rem 2rem;
  background: linear-gradient(100deg, var(--bg) 52%, var(--bg-tint) 100%);
}

/* `margin: auto` rather than centred alignment: in short viewports — an
   in-app browser with its own chrome, say — centring pushes the top of the
   block off screen behind the header. Auto margins collapse to the start
   instead of overflowing upward. */
.cats__emerge {
  margin: auto;
  width: 100%; max-width: 1100px;
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem;
  will-change: transform, opacity;
}

.cats__eyebrow { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.2em; }

.cats__main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  /* hands sideways gestures to the script while leaving the page free to
     scroll down and the visitor free to pinch-zoom */
  touch-action: pan-y pinch-zoom;
  /* a drag across the giant name would otherwise select it */
  user-select: none;
  -webkit-user-select: none;
}

/* clamped so the section still fits once browser chrome eats into the view */
.cats__stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: clamp(200px, 46svh, 360px);
}

/* ---------- the standing list of every category ----------
   Phone first: a horizontal strip under the artwork, because a left-hand
   column at 390px would eat the width the giant category name needs — and
   that name is the whole point of the screen. `order` on the wide layout
   below swings it round to the left without touching the markup. */
.catrail {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 30px;
  overflow: hidden;
  /* room enough that a long name does not sit on its neighbours; the ones
     either side are faded and running into the mask anyway */
  --gap: 150px;
  /* the ends dissolve rather than being sliced off by the overflow */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

/* Fallbacks on every custom property: the list paints from CSS alone before
   the script has assigned a slot, and one missing value would otherwise
   collapse the whole transform. */
.catrail__item {
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: 50% 50%;
  transform: translate(calc(-50% + var(--off, 0) * var(--gap)), -50%) scale(var(--s, 1));
  opacity: var(--o, 0);
  font-family: var(--font-display);
  font-weight: 800;
  /* --fit is measured in the script: a name too long for its lane is set
     smaller rather than sliced off by the overflow */
  font-size: calc(0.82rem * var(--fit, 1));
  letter-spacing: 0.09em;
  white-space: nowrap;
  color: var(--fg);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s ease;
  will-change: transform, opacity;
}
.catrail__item.is-on { letter-spacing: 0.05em; }
.catrail__item:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }

/* one category is not a list — hide it rather than show a lone word that
   nothing can scroll between */
.catrail.is-solo { display: none; }

.cat {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 0.6rem;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.cat.is-active { opacity: 1; pointer-events: auto; }

.cat__side { flex: 0 0 47%; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }

.cat__name {
  display: flex; flex-direction: column;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.94;
  font-size: min(13vw, calc(46vw / (var(--chars, 6) * 0.72)));
}

.cat__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--fg); color: var(--on-fg);
  border-radius: 999px;
  padding: 0.62rem 1.05rem;
  font-weight: 700; font-size: 0.8rem;
  box-shadow: 0 10px 26px rgba(69, 36, 26, 0.14);
  transition: transform 0.25s ease;
}
.cat__cta:active { transform: scale(0.97); }
.cat__count { opacity: 0.55; }

.cat__img { flex: 1 1 53%; display: grid; place-items: center; height: 100%; }
.cat__img img {
  max-height: 100%; width: auto; max-width: 100%;
  filter: drop-shadow(0 26px 40px rgba(69, 36, 26, 0.2));
}

.cats__nav { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.cats__arrows { display: flex; gap: 1.6rem; }

.arrow {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 1.5px solid rgba(69, 36, 26, 0.5);
  display: grid; place-items: center;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.arrow svg { width: 26px; height: 26px; }
.arrow:hover { background: var(--fg); color: var(--on-fg); }
.arrow:active { transform: scale(0.94); }

.cats__hint { text-align: center; font-weight: 700; font-size: 0.95rem; line-height: 1.45; }

/* ===================== inner pages ===================== */
.page {
  min-height: 100vh; min-height: 100svh;
  max-width: 1100px;
  margin: 0 auto;
  padding: 5.2rem 1.1rem 3.5rem;
  background: linear-gradient(100deg, var(--bg) 52%, var(--bg-tint) 100%);
}

.back {
  display: inline-block;
  font-size: 0.78rem; font-weight: 600;
  color: var(--fg-dim);
  margin-bottom: 1.4rem;
  transition: color 0.25s ease;
}
.back:hover { color: var(--fg); }

.page__title {
  font-family: var(--font-display);
  font-weight: 900; line-height: 0.95;
  font-size: clamp(2.2rem, 12vw, 4.5rem);
}
.page__meta {
  display: block; margin-top: 0.6rem;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--fg-dim);
}

/* -------- product list -------- */
.plist { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }

.prow {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(69, 36, 26, 0.03);
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}
.prow:hover { border-color: rgba(69, 36, 26, 0.4); background: rgba(69, 36, 26, 0.06); }
.prow:active { transform: scale(0.995); }

/* Photos come straight from the sheet at any size or aspect, so each sits in
   a fixed frame with a cover fit and the set slides through on its own. */
.frame {
  position: relative;
  flex: 0 0 38%; max-width: 38%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}
.frame__track {
  display: flex; height: 100%; width: 100%;
  transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.24, 1);
}
.frame__track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }

.prow__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.prow__name { font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.prow__prices { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.price-now { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.price-was { font-size: 0.78rem; color: var(--fg-dim); text-decoration: line-through; }

.tag {
  align-self: flex-start;
  background: var(--sale); color: var(--on-fg);
  font-size: 0.65rem; font-weight: 700;
  padding: 0.2rem 0.5rem; border-radius: 6px;
}
.tag--soft { background: rgba(69, 36, 26, 0.12); color: var(--fg-dim); }
.tag--out {
  background: transparent;
  border: 1px solid rgba(69, 36, 26, 0.35);
  color: var(--fg-dim);
  letter-spacing: 0.08em;
}

/* a sold-out row stays readable and still opens — people want to see what it
   was — but it should not compete with what is actually buyable */
.prow.is-soldout { opacity: 0.55; }
.prow.is-soldout .frame { filter: grayscale(1); }

.stockline {
  margin: -0.9rem 0 1.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #e2a45c;
}

/* same footprint as the buy button so the layout does not shift */
.buy--out {
  background: transparent;
  border: 1px solid rgba(69, 36, 26, 0.25);
  color: var(--fg-dim);
  cursor: not-allowed;
  box-shadow: none;
}
.buy--out .buy__label { letter-spacing: 0.16em; }

/* -------- product detail -------- */
.pdp__gallery {
  position: relative; width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 22px; overflow: hidden;
  background: var(--surface);
  margin-bottom: 1.1rem;
}
.pdp__dots { display: flex; justify-content: center; gap: 0.45rem; margin-bottom: 1.4rem; }
.pdot {
  position: relative;
  width: 22px; height: 3px; border-radius: 10px;
  background: var(--fg); opacity: 0.28;
  transition: opacity 0.3s ease, width 0.3s ease;
  cursor: pointer;
}
/* a 3px bar is not something a thumb can hit, so the target is grown around
   it without changing anything that is drawn */
.pdot::after { content: ""; position: absolute; inset: -11px -4px; }
.pdot.is-active { opacity: 1; width: 38px; }

/* -------- gallery arrows --------
   The set moved on a timer and a visitor who wanted another look at a photo
   had to wait for it to come round again — or, on a product with five, give
   up. These hand the set over. They sit inside the frame rather than beside
   it so they cost no height on a phone, and they carry their own scrim
   because a photo can be light or dark underneath. */
.gnav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: rgba(251, 247, 240, 0.82);
  color: var(--fg);
  font-size: 1.5rem; line-height: 1;
  font-family: var(--font-body);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(69, 36, 26, 0.16);
  transition: background 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.gnav--prev { left: 10px; padding-right: 3px; }
.gnav--next { right: 10px; padding-left: 3px; }
.gnav:hover { background: rgba(251, 247, 240, 0.96); }
.gnav:active { transform: translateY(-50%) scale(0.92); }

/* -------- waiting for the catalogue --------
   Drawn in place of the product while the shop is still being told what it
   sells. It is the shape of the page that is coming, so nothing jumps when
   the real thing lands. */
.pending { max-width: 520px; margin: 0 auto; }
.pending__frame {
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 22px; margin-bottom: 1.4rem;
}
.pending__bar { height: 18px; border-radius: 8px; margin-bottom: 0.7rem; }
.pending__bar--wide { height: 30px; width: 72%; }
.pending__frame, .pending__bar {
  background: linear-gradient(90deg, var(--surface) 25%, var(--bg-tint) 37%, var(--surface) 63%);
  background-size: 400% 100%;
  animation: pendingSweep 1.4s ease infinite;
}
.pending__note { margin-top: 1.6rem; text-align: center; font-size: 0.85rem; color: var(--fg-dim); }
@keyframes pendingSweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* someone who asked not to see movement should not be given a shimmer */
@media (prefers-reduced-motion: reduce) {
  .pending__frame, .pending__bar { animation: none; }
}

.plist__note { padding: 2.2rem 0; text-align: center; font-size: 0.9rem; color: var(--fg-dim); }

.pdp__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  line-height: 1.05;
  margin-bottom: 0.6rem;
}
.pdp__desc { font-size: 0.9rem; line-height: 1.6; color: var(--fg-dim); margin-bottom: 1.2rem; }

/* The sheet writes a description as a heading and one selling point per line.
   Rendered as a single paragraph it was eight sentences with nowhere for the
   eye to rest, on the page where the decision to buy is actually made. */
.pdp__desc-head {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 0.7rem;
}
.pdp__desc-list {
  list-style: none;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--fg-dim);
  margin-bottom: 1.4rem;
}
.pdp__desc-list li {
  position: relative;
  padding-left: 1.05rem;
  margin-bottom: 0.6rem;
}
.pdp__desc-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--fg);
  opacity: 0.45;
}
.pdp__desc-list b { color: var(--fg); font-weight: 700; }
.pdp__prices { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 1.4rem; }
.pdp__prices .price-now { font-size: 1.6rem; }

.opt { margin-bottom: 1.3rem; }
.opt__label {
  display: block;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em; color: var(--fg-dim);
  margin-bottom: 0.6rem;
}
.opt__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip {
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem; color: var(--fg-dim);
  transition: all 0.25s ease;
}
.chip.is-active { border-color: var(--fg); background: var(--fg); color: var(--on-fg); font-weight: 600; }

/* bundle picker — the saving has to be legible at a glance or it does not
   change what people buy */
.packs { display: flex; flex-direction: column; gap: 0.55rem; }

.pack {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.8rem 0.95rem;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.pack.is-active { border-color: var(--fg); background: rgba(69, 36, 26, 0.08); }

.pack__dot {
  width: 17px; height: 17px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(69, 36, 26, 0.45);
  display: grid; place-items: center;
}
.pack.is-active .pack__dot { border-color: var(--fg); }
.pack.is-active .pack__dot::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fg);
}

.pack__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.pack__qty { font-size: 0.92rem; font-weight: 700; }
.pack__label {
  font-size: 0.72rem;
  color: #e2a45c;
  font-weight: 600;
}
.pack__per { font-size: 0.72rem; color: var(--fg-dim); }

.pack__right { text-align: right; display: flex; flex-direction: column; gap: 0.15rem; }
.pack__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
}
.pack__save {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--on-fg);
  background: #e2a45c;
  border-radius: 5px;
  padding: 0.1rem 0.35rem;
}

.sum__pack {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--on-fg);
  background: #e2a45c;
  border-radius: 5px;
  padding: 0.1rem 0.4rem;
}

.qty { display: flex; align-items: center; gap: 0.9rem; }
.qty__btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 1.1rem;
  transition: border-color 0.25s ease;
}
.qty__btn:hover { border-color: var(--fg); }
.qty__val { font-weight: 700; min-width: 1.5rem; text-align: center; }

/* two-line action button: running total above, action below */
.buy {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.15rem;
  width: 100%;
  margin-top: 1.6rem;
  background: var(--fg); color: var(--on-fg);
  border-radius: 999px;
  padding: 0.85rem 1rem;
  box-shadow: 0 14px 34px rgba(69, 36, 26, 0.16);
  transition: transform 0.2s ease;
}
.buy:active { transform: scale(0.985); }
/* The order button is a real submit control now, so it arrives carrying the
   browser's own button styling — which has to go before it looks like the
   others. */
button.buy {
  border: 0;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
}
button.buy:disabled { opacity: 0.72; cursor: progress; }
.buy__total { font-size: 0.8rem; font-weight: 600; opacity: 0.62; }
.buy__label {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.05rem; letter-spacing: 0.06em;
}

/* ordering by phone, offered under the button rather than instead of it */
.callbuy {
  display: block;
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(69, 36, 26, 0.28);
  border-radius: 999px;
  text-align: center;
  font-weight: 700; font-size: 0.86rem; letter-spacing: 0.02em;
  color: var(--fg);
}
.assure {
  margin-top: 0.7rem;
  text-align: center;
  font-size: 0.74rem; line-height: 1.5;
  color: var(--fg-dim);
}

/* Price and the order button, held at the foot of a phone screen while the
   real button is out of sight. The padding reads the home-indicator inset so
   the bar clears it on a notched phone — the viewport is viewport-fit=cover.
   No backdrop-filter: nothing here is scaled, but a blurred layer repainting
   over a scrolling page is heat this shop has been burnt by before. */
.stickybuy {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 58;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.9rem;
  padding: 0.6rem 1.1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid rgba(69, 36, 26, 0.14);
  box-shadow: 0 -10px 28px rgba(69, 36, 26, 0.08);
}
.stickybuy__price {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.15rem;
  color: var(--fg);
}
.stickybuy__go {
  flex: 0 0 auto;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  background: var(--fg); color: var(--on-fg);
  font-family: var(--font-display);
  font-weight: 800; font-size: 0.95rem; letter-spacing: 0.06em;
}
.stickybuy__go:active { transform: scale(0.985); }
/* the bar must not sit on the last lines of the footer */
body:has(.stickybuy:not([hidden])) .foot { padding-bottom: 5.5rem; }

.note { margin-top: 1rem; text-align: center; font-size: 0.74rem; line-height: 1.6; color: var(--fg-dim); }

/* -------- reviews -------- */
.reviews { margin-top: 2.6rem; }
.reviews__head {
  font-family: var(--font-display);
  font-weight: 900; font-size: 1.2rem;
  margin-bottom: 1rem;
}
.rev {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem;
  background: rgba(69, 36, 26, 0.03);
  margin-bottom: 0.8rem;
}
.rev__stars { color: #ffcf5a; font-size: 0.8rem; letter-spacing: 0.1em; margin-bottom: 0.4rem; }
.rev__text { font-size: 0.88rem; line-height: 1.6; }
.rev__name { display: block; margin-top: 0.5rem; font-size: 0.75rem; color: var(--fg-dim); }
.rev__shot { margin-top: 0.7rem; border-radius: 10px; overflow: hidden; }
.rev__shot img { width: 100%; }

/* -------- trust strip -------- */
.trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin-top: 1.6rem;
}

/* A dead link is a lost sale unless it offers a way onward, so this is given
   the same weight as a product page rather than being tucked away as an error */
.missing { max-width: 520px; margin: 3rem auto 0; text-align: center; }
.missing__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.2;
}
.missing__lead { margin-top: 0.8rem; font-size: 0.9rem; line-height: 1.6; color: var(--fg-dim); }
.missing__acts { margin-top: 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; align-items: center; }
.missing__go {
  background: var(--fg); color: var(--on-fg);
  border-radius: 999px;
  padding: 0.8rem 1.6rem;
  font-weight: 700; font-size: 0.9rem;
}
.missing__alt { font-size: 0.85rem; color: var(--fg-dim); text-decoration: underline; }
.missing__help { margin-top: 1.8rem; font-size: 0.8rem; color: var(--fg-dim); }
.missing__help a { font-weight: 700; color: var(--fg); }

.leadnote {
  margin-top: 0.7rem;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--fg-dim);
}

/* quieter than the order button on purpose — it must not compete with it */
.share {
  margin-top: 0.7rem;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.62rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg);
  opacity: 0.62;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}
.share:hover { opacity: 1; border-color: var(--fg); }
.share:active { transform: scale(0.99); }
.trust div {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--fg-dim);
}
.trust b { display: block; color: var(--fg); font-size: 0.78rem; margin-bottom: 0.15rem; }

/* ============================ order form ============================ */
.sum {
  display: flex; gap: 0.9rem; align-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0.75rem;
  margin-bottom: 1.6rem;
  background: rgba(69, 36, 26, 0.03);
}
.sum__img {
  width: 74px; height: 74px; flex-shrink: 0;
  border-radius: 12px; overflow: hidden; background: var(--surface);
}
.sum__img img { width: 100%; height: 100%; object-fit: cover; }
.sum__name { font-weight: 600; font-size: 0.9rem; }
.sum__meta { font-size: 0.75rem; color: var(--fg-dim); margin-top: 0.25rem; }

.field { margin-bottom: 1.1rem; }
.field__label {
  display: block;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; color: var(--fg-dim);
  margin-bottom: 0.45rem;
}
.input {
  width: 100%;
  background: rgba(69, 36, 26, 0.05);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  color: var(--fg);
  font: inherit;
  font-size: 0.92rem;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.input:focus { outline: none; border-color: var(--fg); background: rgba(69, 36, 26, 0.08); }
/* The field the complaint is about, so the eye lands on it rather than
   hunting the form for whatever went wrong. */
.input.is-invalid { border-color: var(--sale); background: rgba(192, 52, 27, 0.06); }
.input.is-invalid:focus { border-color: var(--sale); }

/* Reads as optional to a person and to a screen reader, without shouting. */
.field__opt { font-weight: 600; letter-spacing: 0.04em; text-transform: none; opacity: 0.75; }

/* A placeholder is not a label: it disappears the moment someone types and a
   screen reader may never announce it. These name each address box without
   changing anything on screen. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.input::placeholder { color: rgba(69, 36, 26, 0.55); }
textarea.input { resize: vertical; min-height: 74px; }

/* the written lines inside the address block carry their own small labels */
.field__label--sub { font-size: 0.62rem; letter-spacing: 0.12em; margin-bottom: 0.35rem; }
/* city or countryside, one tap */
.seg { display: flex; gap: 0.4rem; margin-bottom: 0.7rem; }
.seg__btn {
  flex: 1;
  padding: 0.72rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(69, 36, 26, 0.05);
  color: var(--fg);
  font: inherit; font-size: 0.88rem; font-weight: 600;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.seg__btn.is-active { border-color: var(--fg); background: var(--fg); color: var(--on-fg); }
/* the native control keeps its own menu, which phones render best; only the
   box is ours */
select.input {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2345241a' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 12px 8px;
}
.input:disabled { opacity: 0.5; }

.pick { display: flex; flex-direction: column; gap: 0.5rem; }
.pick__item {
  display: flex; align-items: center; gap: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.8rem 0.95rem;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.pick__item.is-active { border-color: var(--fg); background: rgba(69, 36, 26, 0.08); }
.pick__dot {
  width: 17px; height: 17px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(69, 36, 26, 0.45);
  display: grid; place-items: center;
}
.pick__item.is-active .pick__dot { border-color: var(--fg); }
.pick__item.is-active .pick__dot::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fg);
}
.pick__body { flex: 1; }
.pick__title { font-size: 0.88rem; font-weight: 600; }
.pick__sub { font-size: 0.72rem; color: var(--fg-dim); margin-top: 0.1rem; }
.pick__price { font-weight: 700; font-size: 0.88rem; }

/* an option the chosen delivery route cannot honour */
.pick__item.is-locked {
  opacity: 0.35;
  cursor: not-allowed;
  border-style: dashed;
}
.pick__item.is-locked .pick__dot { border-color: rgba(69, 36, 26, 0.25); }

.leadtime {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.8rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.leadtime b { font-size: 0.95rem; }
.leadtime span { font-size: 0.75rem; line-height: 1.5; color: var(--fg-dim); }

.pick__lock {
  margin-top: 0.6rem;
  border-left: 2px solid #e2a45c;
  padding: 0.15rem 0 0.15rem 0.7rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--fg-dim);
}

.totals {
  border-top: 1px solid var(--line);
  margin-top: 1.4rem; padding-top: 1rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.totals__row { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--fg-dim); }
.totals__row--big {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.15rem; color: var(--fg);
  margin-top: 0.3rem;
}

.err {
  color: var(--sale);
  font-size: 0.76rem;
  margin-top: 0.4rem;
  min-height: 1rem;
}

/* ========================= confirmation ========================= */
.done { text-align: center; }
.done__mark {
  width: 62px; height: 62px; margin: 0 auto 1.2rem;
  border-radius: 50%;
  border: 2px solid var(--ok);
  display: grid; place-items: center;
  color: var(--ok); font-size: 1.7rem;
}
.done__title {
  font-family: var(--font-display);
  font-weight: 900; font-size: 1.5rem; margin-bottom: 0.5rem;
}
.done__lead { font-size: 0.88rem; color: var(--fg-dim); line-height: 1.6; margin-bottom: 1.8rem; }

.code {
  border: 1px dashed rgba(69, 36, 26, 0.35);
  border-radius: 18px;
  padding: 1.3rem 1rem;
  margin-bottom: 1.6rem;
}
.code__label { font-size: 0.66rem; letter-spacing: 0.2em; color: var(--fg-dim); }
.code__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 12vw, 3rem);
  letter-spacing: 0.04em;
  margin: 0.35rem 0 0.8rem;
}
.copy {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.8rem; font-weight: 600;
  transition: all 0.25s ease;
}
.copy:hover { border-color: var(--fg); }
.copy.is-done { border-color: var(--ok); color: var(--ok); }

/* payment card — warm amber on near-black so the account numbers are the
   brightest thing on the screen without turning into a loud alert box */
.pay {
  text-align: left;
  border: 1px solid rgba(166, 92, 20, 0.32);
  border-radius: 20px;
  padding: 1.1rem;
  margin-bottom: 1.4rem;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(214, 140, 60, 0.14), transparent 62%),
    linear-gradient(160deg, rgba(69, 36, 26, 0.05), rgba(69, 36, 26, 0.015));
  box-shadow: 0 18px 44px rgba(69, 36, 26, 0.14), inset 0 1px 0 rgba(255, 240, 220, 0.14);
}

.pay__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid rgba(166, 92, 20, 0.2);
  margin-bottom: 0.95rem;
}
.pay__logo {
  width: 40px; height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(69, 36, 26, 0.13);
}
.pay__bank { font-weight: 700; font-size: 0.92rem; }
.pay__holder { font-size: 0.76rem; color: var(--fg-dim); margin-top: 0.12rem; }
.pay__amount { margin-left: auto; text-align: right; }
.pay__amount span {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
}
.pay__amount b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: #e2a45c;
}

.acct + .acct { margin-top: 0.75rem; }
.acct__label {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 0.35rem;
}
.acct__label em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.7; }
.acct__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(69, 36, 26, 0.05);
  border: 1px solid rgba(166, 92, 20, 0.22);
  border-radius: 12px;
  padding: 0.6rem 0.6rem 0.6rem 0.85rem;
}
.acct__no {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: #8a5a2b;
  overflow-wrap: anywhere;
}
.copy--sm {
  flex-shrink: 0;
  padding: 0.42rem 0.8rem;
  font-size: 0.72rem;
  border-color: rgba(166, 92, 20, 0.4);
  color: #e2a45c;
}
.copy--sm:hover { border-color: #e2a45c; }

/* order code ↔ phone, so a lost code still has a way back to the order */
.code__phone {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(69, 36, 26, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.code__phone span { font-size: 0.62rem; letter-spacing: 0.16em; color: var(--fg-dim); }
.code__phone b { font-size: 0.98rem; font-weight: 700; }

.helpline {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.95rem;
}
.helpline__k { font-size: 0.62rem; letter-spacing: 0.16em; color: var(--fg-dim); }
.helpline__v { font-size: 1rem; font-weight: 700; }
.helpline__note { font-size: 0.72rem; color: var(--fg-dim); margin-top: 0.2rem; }

.warn {
  border: 1px solid rgba(192, 52, 27, 0.45);
  background: rgba(192, 52, 27, 0.08);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  font-size: 0.82rem;
  line-height: 1.55;
  text-align: left;
  margin-bottom: 1.4rem;
}

/* =========================== policies =========================== */
.prose { max-width: 720px; }
.prose h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  margin: 1.7rem 0 0.6rem;
}
.prose p, .prose li { font-size: 0.9rem; line-height: 1.7; color: rgba(69, 36, 26, 0.75); }
.prose ul { padding-left: 1.1rem; margin: 0.5rem 0; }
.prose li { margin-bottom: 0.3rem; }

/* ============================= footer ============================= */
.foot {
  position: relative;
  z-index: 3;
  border-top: 1px solid var(--line);
  background: var(--bg-tint);
  padding: 2.6rem 1.1rem 2.2rem;
}
.foot__inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
  text-align: center;
}
.foot__brand { display: flex; align-items: center; gap: 0.5rem; }
.foot__brand img { height: 20px; }
.foot__brand span { font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; }
.foot__links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.7rem 1.3rem;
  font-size: 0.78rem;
  color: var(--fg-dim);
}
.foot__links a { transition: color 0.25s ease; }
.foot__links a:hover { color: var(--fg); }
.foot__note { font-size: 0.72rem; line-height: 1.8; color: rgba(69, 36, 26, 0.7); }

/* ============================== desktop ============================== */
@media (min-width: 860px) {
  :root { --cam-h: 104svh; --cam-top: -19svh; }

  .topbar { padding: 1.4rem 2.4rem; }
  .brand__mark { height: 26px; }
  .brand__name { font-size: 1.05rem; }
  .rail { left: 30px; gap: 12px; }
  .rail__line { width: 22px; height: 3px; }
  .rail__line.is-active { width: 64px; }
  .edge { right: 24px; }

  .hero__word { font-size: min(10.5vw, calc(76vw / (var(--chars, 6) * 0.72))); }
  .hero__word--back  { top: 33%; }
  .hero__word--front { top: 55%; }

  .cats { padding: 6rem 3rem 3rem; }
  .cats__eyebrow { font-size: 0.88rem; }
  .cats__stage { height: 58svh; }
  .cats__main { flex-direction: row; gap: 1.6rem; }

  /* wide enough for the column: it stands to the left of the artwork, names
     running top to bottom with the chosen one held in the middle */
  .catrail {
    order: -1;
    /* wide enough that a real Mongolian category name — "ХҮҮХДИЙН ХЭРЭГСЭЛ" —
       stands at close to full size rather than being shrunk to fit */
    width: 210px;
    height: auto;
    /* clears the fixed progress rail at the window edge, which reaches ~94px
       in and would otherwise draw its dashes straight through these names */
    margin-left: 60px;
    --gap: 38px;
    border-right: 1px solid rgba(69, 36, 26, 0.14);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  }
  .catrail__item {
    left: auto; right: 1.15rem;
    text-align: right;
    transform-origin: 100% 50%;
    transform: translateY(calc(-50% + var(--off, 0) * var(--gap))) scale(var(--s, 1));
    font-size: calc(0.95rem * var(--fit, 1));
  }

  .cat { gap: 2rem; }
  .cat__side { flex-basis: 44%; gap: 1.4rem; }
  /* The second term only binds for a long name: "ХҮҮХДИЙН ХЭРЭГСЭЛ" ran 486px
     wide and left the artwork 231px of an 804px stage, using barely half the
     height available to it. Lowered until the two share the room. A short name
     is capped by the first term and is not touched — ГЭР АХУЙ is the same size
     it has always been. */
  .cat__name { font-size: min(7.5vw, calc(33vw / (var(--chars, 6) * 0.72))); }
  .cat__cta { font-size: 0.92rem; padding: 0.8rem 1.4rem; }
  .cat__img { flex-basis: 56%; }
  .arrow { width: 70px; height: 70px; }
  .arrow svg { width: 30px; height: 30px; }
  .cats__hint { font-size: 1.1rem; }

  .page { padding: 6.5rem 3rem 4rem; }
  .prow { gap: 1.6rem; padding: 1rem; border-radius: 24px; }
  .frame { flex-basis: 26%; max-width: 26%; border-radius: 18px; }
  .prow__name { font-size: 1.15rem; }
  .price-now { font-size: 1.25rem; }

  .pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
  .pdp__left { position: sticky; top: 6.5rem; }
  .buy { max-width: 420px; }
  .callbuy, .assure { max-width: 420px; }
  /* beside a sticky gallery the real button is rarely far away */
  .stickybuy { display: none; }
  .trust { grid-template-columns: repeat(4, 1fr); }
  .order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
}

/* In-app browsers (Instagram, Facebook) keep their own chrome on screen, so
   the usable height can drop well below a normal phone viewport. Tighten the
   full-height sections rather than letting them overflow. */
@media (max-height: 640px) {
  .cats { padding-top: 4.4rem; padding-bottom: 1.4rem; }
  .cats__emerge { gap: 0.7rem; }
  .cats__stage { height: clamp(180px, 42svh, 300px); }
  .cats__main { gap: 0.3rem; }
  .catrail { height: 24px; }
  .catrail__item { font-size: calc(0.74rem * var(--fit, 1)); }
  .cats__nav { gap: 0.6rem; }
  .cats__hint { font-size: 0.86rem; }
  .arrow { width: 50px; height: 50px; }
  .arrow svg { width: 22px; height: 22px; }
  .cat__cta { padding: 0.5rem 0.9rem; font-size: 0.75rem; }
}

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