/* ============================================
   Nashé — Brand Style System v2
   Палитра + типографика + компоненты
   ============================================ */

/* ---------- FONTS (self-hosted Geist via @fontsource) ---------- */
/* Latin subset */
@font-face{font-family:'Geist';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/geist-latin-300-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/geist-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/geist-latin-500-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/geist-latin-600-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/geist-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Cyrillic subset */
@font-face{font-family:'Geist';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/geist-cyrillic-300-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/geist-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/geist-cyrillic-500-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/geist-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/geist-cyrillic-700-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ---------- TOKENS ---------- */
:root{
  /* Brand colors */
  --bg:           #F5F3ED;   /* молочный, база */
  --bg-2:         #FBF9F2;   /* осветлённый молочный — карточки/CTA в футере */
  --ink:          #1E1D1D;   /* графит, текст и тёмные секции */
  --ink-2:        #3A372F;
  --muted:        #6E6960;
  --line:         #1E1D1D;

  /* Accents */
  --c-pink:       #E36888;
  --c-yellow:     #F2D88F;
  --c-orange:     #F08C21;
  --c-lime:       #B4B534;
  --c-blue:       #6698CC;

  /* Semantic accent → секции */
  --accent-hero:        var(--c-pink);
  --accent-newdrop:     var(--c-orange);
  --accent-about:       var(--c-yellow);
  --accent-catalog:     var(--c-lime);
  --accent-values:      var(--c-blue);
  --accent-partners:    var(--c-orange);
  --accent-trust:       var(--c-pink);
  --accent-find:        var(--c-blue);
  --accent-faq:         var(--c-lime);

  /* Single hover color across all buttons */
  --accent-cta:         var(--c-orange);

  /* Geometry */
  --radius:       18px;
  --radius-lg:    24px;
  --maxw:         1240px;

  /* TG WebApp adaptive tokens — written by src/tg-ui.mjs applyTheme().
     Distinct namespace from brand tokens (D-03) so brand identity stays
     static regardless of TG client theme. Brand surfaces use --ink/--bg-2/
     etc.; TG-adaptive surfaces use --tg-text/--tg-bg/etc.
     See .planning/quick/20260512-tg-palette-architecture/CONTEXT.md */
  --tg-bg:           var(--bg);             /* fallback = brand-milk if TG sends nothing */
  --tg-text:         var(--ink);            /* fallback = brand-graphite */
  --tg-text-muted:   var(--muted);          /* fallback = brand-muted */
  --tg-bg-secondary: var(--bg-secondary);   /* fallback = brand bg-secondary */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"TT Norms","TT Norms Pro","Geist","General Sans","Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Sticky footer: short pages (checkout, order-success, 404) must still push
     the footer to the bottom of the viewport. Flex column + `.footer{margin-top:auto}`
     pins it without depending on the content element type. Tall pages (landing)
     overflow naturally — min-height allows growth, margin-top:auto collapses. */
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;font-family:inherit}

/* ---------- TYPOGRAPHY ----------
   Все заголовки = TT Norms Bold, КАПС, единый ритм
   Body = TT Norms Regular, 16px единого кегля
------------------------------------------------- */
.h-display{
  font-weight:700;
  font-size:clamp(2rem, 4.4vw, 3.8rem);
  line-height:1.05;
  letter-spacing:-0.01em;
  text-transform:uppercase;
  margin:0 0 .6em;
}
.hero .h-display{font-size:clamp(2.4rem,5.2vw,4.8rem)}

h3, h4, h5{
  font-weight:700;
  letter-spacing:0;
  text-transform:uppercase;
  margin:0;
}
h3{font-size:1.15rem;letter-spacing:.02em}
h4{font-size:1rem;letter-spacing:.04em}
h5{font-size:.74rem;letter-spacing:.18em;font-weight:500}

p{margin:0 0 1rem}
.lead{font-size:1rem;line-height:1.55;color:var(--ink-2);max-width:52ch}

.eyebrow{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.4rem;
}
.eyebrow--accent{color:var(--accent-newdrop)}
.eyebrow--light{color:rgba(245,243,237,.7)}

/* Section number plate — HIDDEN by designer request 2026-05-06 (DESIGN-06).
   Markup retained in templates for future use; reversible by changing display:none ->
   display:inline-flex and restoring the original rule body below. */
.section-num{display:none}

/* Original styles — kept here as comment for the reversal path:
.section-num{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.2rem;
}
.section-num::before{content:"";width:24px;height:1px;background:currentColor}
*/

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.4rem;
  border-radius:999px;
  font-weight:600;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
  cursor:pointer;
}
.btn:hover{background:var(--accent-cta);color:var(--bg);border-color:var(--accent-cta)}

.btn--primary{background:var(--ink);color:var(--bg-2)}
.btn--ghost  {border-color:var(--ink);color:var(--ink)}
.btn--ghost.btn--light{border-color:var(--bg-2);color:var(--bg-2)}
.btn--ghost.btn--light:hover{background:var(--accent-cta);color:var(--bg-2);border-color:var(--accent-cta)}
.btn--dark   {background:var(--ink);color:var(--bg-2);padding:.7rem 1.2rem;font-size:.78rem}
.btn--milk   {background:var(--bg-2);color:var(--ink);border-color:var(--bg-2)}
.btn--milk:hover{background:var(--accent-cta);color:var(--bg-2);border-color:var(--accent-cta)}
.btn--lg     {padding:1.05rem 1.7rem;font-size:.9rem}
.btn--block  {width:100%}

/* Round icon button (Hero arrows etc) */
.icon-btn{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--ink);
  display:inline-grid;place-items:center;
  background:transparent;color:var(--ink);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
  cursor:pointer;
}
.icon-btn:hover{background:var(--accent-cta);color:var(--bg-2);border-color:var(--accent-cta)}
.icon-btn svg{width:18px;height:18px}
.icon-btn--light{border-color:var(--bg-2);color:var(--bg-2)}

/* ---------- NAV (HEADER) ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;
  padding:1rem clamp(1rem,4vw,2.5rem);
  background:rgba(245,243,237,.9);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(30,29,29,.08);
}
.nav__logo{
  display:inline-flex;align-items:center;
  /* TODO(DESIGN-07b): drop dark-version logo asset; remove .nav__logo img filter:invert(1) hack. */
}
.nav__logo img{
  height:32px;width:auto;display:block;
  filter:invert(1);
}
.nav__right{display:flex;align-items:center;gap:2.2rem}
.nav__menu{display:flex;gap:1.6rem;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.nav__menu a{color:var(--ink);transition:color .2s ease}
.nav__menu a:hover{color:var(--accent-cta)}
.nav__actions{display:flex;gap:.6rem}
.nav__burger{display:none;font-size:1.4rem}

@media (max-width:980px){
  .nav__menu,.nav__actions{display:none}
  .nav__burger{display:block}
}

/* ---------- LAYOUT: sections min 100dvh ---------- */
section{
  display:flex;flex-direction:column;
  padding:clamp(3rem,6vw,5rem) clamp(1rem,4vw,2.5rem);
}
/* `[hidden]` override — author `section{display:flex}` above wins over
 * UA `[hidden]{display:none}` (author > UA, same/lower specificity is
 * irrelevant cross-origin-of-stylesheet). Without this, [hidden] sections
 * stay laid out + visible — breaking the JS [hidden]-toggled step-machine
 * in checkout-ui.mjs (and any other `section[hidden]` pattern). */
section[hidden]{display:none !important}
/* По дефолту дети секции тянутся к maxw, центрируются */
section > *{max-width:var(--maxw);margin-left:auto;margin-right:auto;width:100%}

/* Hero — единственный блок, который растягиваем под высоту экрана,
   чтобы лендинг визуально «открывался» полным первым экраном. */
.hero{min-height:88vh;min-height:88dvh;justify-content:flex-start}

/* .highlight содержит две полосы разного цвета (тёмная шапка + светлый каталог).
   Отключаем default max-width у .highlight__inner, чтобы каждая полоса
   тянула свой фон во всю ширину viewport, а контент центрировался изнутри. */
.highlight{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}
.highlight > *{max-width:none;margin:0}

/* ---------- 1. HERO ---------- */
.hero{
  position:relative;
  padding-bottom:clamp(3rem,8vw,6rem);
}
.hero__slides{
  display:grid;grid-template-areas:"stack";
  width:100%;
}
.hero__slide{
  grid-area:stack;
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,5rem);
  align-items:center;
  opacity:0;visibility:hidden;
  transition:opacity .5s ease;
  pointer-events:none;
}
.hero__slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.hero__lead{font-size:1.05rem;color:var(--ink-2);max-width:46ch;margin:0 0 2rem}
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap}

.hero__visual{
  /* aspect-ratio 4:5 matches the slide-0 portrait source (800×1000) exactly,
     and slide-1 (2:3 / 800×1200) crops only ~12% top/bottom vs 33% at 1:1.
     UI-Review-2 (2026-05-11): hero photo content was getting clipped at 1:1. */
  position:relative;aspect-ratio:4/5;
  display:grid;place-items:center;
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg,var(--bg-2),var(--bg) 70%);
}
.hero__product{width:58%;aspect-ratio:.55/1;position:relative}

/* DESIGN-08b followup: hero slide 0 now uses a real photo (IMG_1747) instead
   of the Phase 1 CSS-generated bottle. <picture> wraps the img so WebP can
   serve when supported.

   IMPORTANT: override base .hero__visual's `display:grid;place-items:center`
   inheritance — that rule expects an in-flow child (the bottle div). The
   <picture> here is position:absolute (out of grid flow), so on mobile the
   grid container has no in-flow children → collapses to 0×0 even with
   aspect-ratio. Force display:block + width:100% so the container fills its
   parent track and aspect-ratio computes correctly. */
.hero__visual--photo{
  display:block;width:100%;
  background:linear-gradient(160deg,var(--bg-2),var(--bg) 70%);
  overflow:hidden;
}
.hero__photo-wrap{
  position:absolute;inset:0;display:block;
}
.hero__photo{
  width:100%;height:100%;object-fit:cover;display:block;
}
.bottle{
  width:100%;height:100%;
  background:linear-gradient(180deg,#2A2622 0%,#1B1916 100%);
  border-radius:46% 46% 18% 18% / 18% 18% 6% 6%;
  position:relative;overflow:hidden;
  box-shadow:inset -30px 0 60px rgba(0,0,0,.35), inset 30px 0 60px rgba(255,255,255,.05);
}
.bottle::before{
  content:"";position:absolute;left:50%;top:-8%;transform:translateX(-50%);
  width:42%;height:14%;background:var(--ink);border-radius:10px 10px 4px 4px;
}
.bottle__label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-weight:700;font-size:1.4rem;line-height:1;color:var(--bg-2);
  text-align:center;letter-spacing:.04em;text-transform:uppercase;
}
.bottle__label small{display:block;font-size:.55rem;letter-spacing:.3em;margin-top:.4rem;opacity:.75;font-weight:500}
.bottle--cacao  {background:linear-gradient(180deg,#3E2A20,#1B1916)}
.bottle--matcha {background:linear-gradient(180deg,#A7B878,#5E7C43)}
.bottle--berry  {background:linear-gradient(180deg,#C26E82,#6E2638)}
.bottle--vanilla{background:linear-gradient(180deg,#F1E0B9,#C5A15E);color:var(--ink)}
.bottle--vanilla .bottle__label{color:var(--ink)}

.hero__tag{
  position:absolute;padding:.45rem .9rem;border-radius:999px;background:var(--bg-2);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}
/* D-01 (extended 2026-05-12 R2): pills positioned INSIDE image bounds at all
   breakpoints. Previously --1/--2 used negative offsets (left:-2% / right:-4%)
   for a 'peek-out edge' decorative effect, but this caused the long «БЕЗ
   ЛАКТОЗИ» label to clip on both mobile AND desktop (designer feedback
   2026-05-12 — '«И» missing' on desktop too). Universal positive offsets
   make labels readable regardless of viewport; mobile additionally shrinks
   font/padding via the media query below. */
.hero__tag--1{top:14%;left:6%}
.hero__tag--2{top:48%;right:6%;background:var(--c-pink);color:var(--bg-2)}
.hero__tag--3{bottom:10%;left:8%}

/* D-01 sizing: Mobile (≤768px) — shrink type + padding so all three corners
   read clearly on ~375-400px viewports. Positions are universal (above);
   only sizing differs per breakpoint. */
@media (max-width: 768px) {
  .hero__tag {
    font-size: .62rem;
    padding: .35rem .7rem;
    letter-spacing: .14em;
  }
  /* .hero__tag--3 already at left:8% (positive) — inherits sizing only */
}

/* Hero — slide 2: photo + stats badges.
   Same grid-collapse override as .hero__visual--photo above — see comment there. */
.hero__visual--shakes{
  display:block;width:100%;
  background:linear-gradient(160deg,var(--bg-2),var(--bg) 70%);
  position:relative;overflow:hidden;
}
.hero__shakes-img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
.hero__stats{
  position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);
  display:flex;gap:.6rem;
  background:rgba(245,243,237,.9);
  backdrop-filter:blur(8px);
  border-radius:999px;padding:.6rem 1rem;
}
.hero__stat{
  display:flex;flex-direction:column;align-items:center;gap:.1rem;
  padding:0 .8rem;border-right:1px solid rgba(30,29,29,.15);
}
.hero__stat:last-child{border-right:0}
.hero__stat strong{font-size:1.05rem;font-weight:700;line-height:1;color:var(--ink)}
.hero__stat span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* Hero — controls */
.hero__controls{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin-top:2rem;
}
.hero__dots{display:flex;gap:.5rem}
.hero__dots button{
  width:8px;height:8px;border-radius:50%;background:rgba(30,29,29,.25);
  border:0;padding:0;cursor:pointer;transition:background .2s, width .2s;
}
.hero__dots button.is-active{background:var(--ink);width:22px;border-radius:999px}

@media (max-width:900px){
  .hero__slide{grid-template-columns:1fr}
  .hero__visual{max-width:420px;margin:0 auto}
}

/* ---------- 2. NEW DROP (Product Highlight) ---------- */
.highlight{
  background:var(--ink);color:var(--bg-2);
  padding-top:0;padding-bottom:0;
}
.highlight__inner{
  max-width:none;width:100%;margin:0;
  display:flex;flex-direction:column;
}
.highlight__hero{
  padding-block:clamp(3rem,7vw,6rem);
  padding-inline:max(clamp(1rem,4vw,2.5rem), calc((100% - var(--maxw)) / 2));
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.highlight__hero-text{max-width:560px;justify-self:end}
.highlight__hero-text .eyebrow{color:var(--accent-newdrop)}
.highlight__hero-text .lead{color:rgba(245,243,237,.78)}
/* DESIGN-08b followup (Phase 13 post-ship asset drop): real brand-guideline
   photo replaces the Phase 1 CSS placeholder. <picture> with WebP+JPEG fallback. */
.highlight__hero-img{
  aspect-ratio:16/9;border-radius:var(--radius-lg);
  position:relative;overflow:hidden;display:block;
}
.highlight__hero-img img{
  width:100%;height:100%;object-fit:cover;display:block;
}

.highlight__catalog{
  background:var(--bg);color:var(--ink);
  padding-block:clamp(3rem,7vw,6rem);
  padding-inline:max(clamp(1rem,4vw,2.5rem), calc((100% - var(--maxw)) / 2));
}
.highlight__catalog-head{
  max-width:var(--maxw);margin:0 auto 2.5rem;
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;
}
.highlight__catalog-head h3{font-size:1.6rem;letter-spacing:0}

/* Horizontal-scroll catalog (Apple-style) */
.shake-rail{
  display:flex;gap:1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 clamp(1rem,4vw,2.5rem) 1.5rem;
  margin:0 calc(-1 * clamp(1rem,4vw,2.5rem));
  scrollbar-width:none;
}
.shake-rail::-webkit-scrollbar{display:none}
.shake-rail__item{
  flex:0 0 clamp(240px, 28vw, 320px);scroll-snap-align:start;
  background:var(--bg-2);border-radius:var(--radius-lg);
  padding:1rem;
  display:flex;flex-direction:column;gap:.6rem;
}
.shake-rail__img{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--bg)}
/* Shake catalog rail — Chocolate / Vanilla / Strawberry / Peanut (CONTENT-06; photos integrated DESIGN-01a) */
.shake-rail__img--chocolate {background-image:image-set(url('/assets/products/shake_chocolate.webp') type('image/webp'), url('/assets/products/shake_chocolate.jpg') type('image/jpeg'));background-size:cover;background-position:center}
.shake-rail__img--vanilla   {background-image:image-set(url('/assets/products/shake_vanilla.webp') type('image/webp'), url('/assets/products/shake_vanilla.jpg') type('image/jpeg'));background-size:cover;background-position:center}
.shake-rail__img--strawberry{background-image:image-set(url('/assets/products/shake_strawberry.webp') type('image/webp'), url('/assets/products/shake_strawberry.jpg') type('image/jpeg'));background-size:cover;background-position:center}
.shake-rail__img--peanut    {background-image:image-set(url('/assets/products/shake_peanut.webp') type('image/webp'), url('/assets/products/shake_peanut.jpg') type('image/jpeg'));background-size:cover;background-position:center}
.shake-rail__name{font-size:1rem;letter-spacing:.04em}
.shake-rail__desc{margin:0;font-size:.85rem;color:var(--ink-2);line-height:1.5;flex:1}
.shake-rail__meta {margin:0;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.shake-rail__price{font-weight:700;font-size:.95rem}
.shake-rail__cta{margin-top:auto}

@media (max-width:900px){
  .highlight__hero{grid-template-columns:1fr}
  .highlight__hero-text{justify-self:stretch}
}

/* ---------- 3. ABOUT ---------- */
.about{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;
}
.about__text{max-width:520px}
.about__text p{color:var(--ink-2);margin:0 0 1rem;max-width:48ch}
.about__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.about__media{position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-2)}
/* DESIGN-08b followup: real product line-up photo replaces Phase 1 CSS placeholder. */
.about__photo{
  position:absolute;inset:0;display:block;
}
.about__photo img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.about__sticker{
  position:absolute;right:1.4rem;top:1.4rem;
  width:96px;height:96px;border-radius:50%;
  background:var(--c-yellow);display:grid;place-items:center;
  font-weight:700;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
}
@media (max-width:900px){.about{grid-template-columns:1fr}}

/* ---------- 4. CATALOG (photo-grid) ---------- */
.catalog__head{max-width:720px;margin:0 auto 3rem;text-align:center;width:100%}
.catalog__head .lead{margin:0 auto}

.cats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;
  max-width:var(--maxw);width:100%;margin:0 auto;
}
.cat-card{
  position:relative;display:block;
  aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--bg-2);
}
.cat-card__img{
  position:absolute;inset:0;
  background-position:center;background-size:60% auto;background-repeat:no-repeat;
}
/* Cat-cards: real campaign photos (DESIGN-10 3/4). yogurts deferred (DESIGN-01b — Silpo dump). background-size:cover overrides base 60% auto. */
.cat-card--yogurts .cat-card__img{background-image:url(/assets/categories/yogurts.webp);background-size:cover}
.cat-card--cheese  .cat-card__img{background-image:image-set(url(/assets/categories/cheese.webp) type('image/webp'), url(/assets/categories/cheese.jpg) type('image/jpeg'));background-size:cover}
.cat-card--halumi  .cat-card__img{background-image:image-set(url(/assets/categories/halumi.webp) type('image/webp'), url(/assets/categories/halumi.jpg) type('image/jpeg'));background-size:cover}
.cat-card--shakes  .cat-card__img{background-image:image-set(url(/assets/categories/shakes.webp) type('image/webp'), url(/assets/categories/shakes.jpg) type('image/jpeg'));background-size:cover}

.cat-card__plate{
  position:absolute;left:1.2rem;right:1.2rem;bottom:1.2rem;
  background:var(--bg-2);border-radius:14px;
  padding:.85rem 1.1rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  transition:background .2s ease, color .2s ease;
}
.cat-card:hover .cat-card__plate{background:var(--accent-cta);color:var(--bg-2)}
.cat-card__name{font-weight:700;font-size:1rem;letter-spacing:.06em;text-transform:uppercase}
.cat-card__num{font-size:.72rem;letter-spacing:.18em;color:var(--muted);font-weight:600}
.cat-card:hover .cat-card__num{color:var(--bg-2)}
.cat-card__arrow{width:32px;height:32px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center}
.cat-card__arrow svg{width:14px;height:14px}

@media (max-width:680px){.cats{grid-template-columns:1fr}}

/* ---------- 5. VALUES (Переваги) ---------- */
.values{
  background:var(--bg-2);
  position:relative;overflow:hidden;
}
.values__bg{
  position:absolute;inset:0;z-index:0;
  /* override .section > * max-width — фон тянется на всю ширину viewport */
  max-width:none;width:100%;margin:0;
  background:
    linear-gradient(rgba(245,243,237,.85),rgba(245,243,237,.85)),
    linear-gradient(135deg,#DCC9A4 0%,#B89C6F 100%);
}
.values__inner{position:relative;z-index:1;text-align:center;max-width:var(--maxw);width:100%;margin:0 auto}
.values .h-display{max-width:24ch;margin-left:auto;margin-right:auto}
.values__track{
  margin:3rem auto 0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;
}
.val{
  background:var(--bg);border-radius:var(--radius-lg);
  padding:1.6rem 1.2rem;
  display:flex;flex-direction:column;gap:.7rem;text-align:left;
  min-height:230px;
}
.val__icon{width:36px;height:36px;line-height:1;display:block}
.val__icon svg{width:100%;height:100%}
.val--1 .val__icon{color:var(--c-pink)}
.val--2 .val__icon{color:var(--c-yellow)}
.val--3 .val__icon{color:var(--c-orange)}
.val--4 .val__icon{color:var(--c-lime)}
.val--5 .val__icon{color:var(--c-blue)}
.val h3{font-size:.95rem;letter-spacing:.04em}
.val p{margin:0;color:var(--ink-2);font-size:.88rem;line-height:1.55}

@media (max-width:1100px){.values__track{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.values__track{grid-template-columns:1fr}}

/* ---------- 6. PARTNERSHIPS (B2B) ---------- */
.partnerships{
  background:var(--ink);color:var(--bg-2);
}
.partnerships__inner{
  max-width:var(--maxw);width:100%;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);
}
.partnerships__text{justify-self:end;max-width:520px}
.partnerships__text .eyebrow{color:var(--accent-partners)}
.partnerships__text p{color:rgba(245,243,237,.78);margin:0 0 1.2rem}
.partnerships__tags{list-style:none;padding:0;margin:1rem 0 0;display:flex;gap:.5rem;flex-wrap:wrap}
.partnerships__tags li{
  padding:.5rem 1rem;border:1px solid rgba(245,243,237,.3);border-radius:999px;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
}

.partnerships__form{
  background:#262422;border-radius:var(--radius-lg);padding:2rem;
  display:flex;flex-direction:column;gap:1rem;
  max-width:520px;width:100%;
}
/* `[hidden]` guard — author `display:flex` above wins over UA
 * `[hidden]{display:none}`, so swapToSuccess()'s `form.hidden = true` left
 * the form visible (success card then wrapped into the grid's next row).
 * Mirrors the .partnerships__success[hidden] guard below. */
.partnerships__form[hidden]{display:none}
.partnerships__form label{display:flex;flex-direction:column;gap:.35rem}
.partnerships__form label span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,243,237,.6);font-weight:600}
.partnerships__form input,
.partnerships__form select{
  background:transparent;border:0;border-bottom:1px solid rgba(245,243,237,.25);
  padding:.6rem 0;color:var(--bg-2);font:inherit;
}
.partnerships__form input:focus,
.partnerships__form select:focus{outline:none;border-color:var(--accent-cta)}
.partnerships__form select option{color:var(--ink)}

/* ---------- B2B FORM SUCCESS CARD (D-04) ---------- */
.partnerships__success{
  background:#262422;
  border-radius:var(--radius-lg);
  padding:2.4rem 2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  text-align:center;
  max-width:520px;
  width:100%;
  color:var(--bg-2);
  min-height:200px;
}
.partnerships__success[hidden]{display:none}
.partnerships__success-icon{
  color:var(--accent-cta);
  flex:none;
}
.partnerships__success h3{
  font-size:1.6rem;
  margin:.2rem 0 0;
  font-weight:600;
  outline:none;
}
.partnerships__success p{
  margin:0;
  color:rgba(245,243,237,.85);
  font-size:1rem;
  line-height:1.45;
}

/* Turnstile widget container — CLS guard. flexible mode = 65px tall;
   reserve 70px to absorb iframe-load shift (RESEARCH Topic 2). */
.cf-turnstile{
  min-height:70px;
}

.partnerships__partners{
  grid-column:1/-1;margin-top:3rem;text-align:center;
}
.partnerships__logos{
  display:flex;justify-content:center;gap:3rem;flex-wrap:wrap;margin-top:1.4rem;
}
/* DESIGN-09b partner wall (resolved 2026-05-11):
   Each logo lives in a fixed 180×64 slot so wildly different intrinsic aspect
   ratios (silpo wide ribbon vs winetime narrow fox) align to the same visual
   weight. The <img> scales inside via max-width/max-height + object-fit:contain,
   preserving brand proportions without forcing the same height (which would
   make the fox tiny next to the goodwine wordmark). */
.partner-logo-slot{
  width:180px;height:64px;
  display:inline-flex;align-items:center;justify-content:center;
  opacity:.85;
  transition:opacity .25s ease;
}
.partner-logo-slot:hover{opacity:1}
/* width/height 100% (not max-*) so object-fit:contain ACTUALLY upscales tiny
   intrinsic SVG viewBoxes (silpo 96×40) to fill the slot consistently. With
   max-* + auto, SVGs render at intrinsic size and partner wall feels uneven. */
.partner-logo{
  width:100%;height:100%;
  object-fit:contain;display:block;
}

@media (max-width:600px){
  .partner-logo-slot{width:140px;height:52px;}
}

@media (max-width:900px){
  .partnerships__inner{grid-template-columns:1fr}
  .partnerships__text,.partnerships__form,.partnerships__success{justify-self:stretch;max-width:none}
}

/* ---------- 7. TRUST («Ми в Instagram») [CONTENT-01a] ---------- */
.trust{text-align:center}
.trust__inner{max-width:var(--maxw);width:100%;margin:0 auto}
.trust__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.4rem;text-align:left;
}
.tpost{margin:0;display:block}
.tpost__img{
  aspect-ratio:1/1;border-radius:var(--radius);background:var(--bg-2);
  background-size:cover;background-position:center;
}
.tpost--1 .tpost__img{background-image:image-set(url(/assets/instagram/post_1.webp) type('image/webp'), url(/assets/instagram/post_1.jpg) type('image/jpeg'))}
.tpost--2 .tpost__img{background-image:image-set(url(/assets/instagram/post_2.webp) type('image/webp'), url(/assets/instagram/post_2.jpg) type('image/jpeg'))}
.tpost--3 .tpost__img{background-image:image-set(url(/assets/instagram/post_3.webp) type('image/webp'), url(/assets/instagram/post_3.jpg) type('image/jpeg'))}
.tpost--4 .tpost__img{background-image:image-set(url(/assets/instagram/post_4.webp) type('image/webp'), url(/assets/instagram/post_4.jpg) type('image/jpeg'))}
.trust__cta{display:inline-flex;margin-top:1.6rem}
@media (max-width:900px){.trust__grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- 8. FIND OFFLINE ---------- */
.find{
  background:var(--bg-2);
}
.find__inner{
  max-width:var(--maxw);width:100%;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:center;
}
.find__text p{color:var(--ink-2)}
.find__micro{margin:0 0 1.4rem;max-width:42ch}
.find__map{
  position:relative;aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(180deg,#EDE5D6 0%,#D9CBA8 100%);
}
/* DESIGN-08b (resolved 2026-05-11): client-delivered Google My Maps iframe.
   The Phase 1 pointer-events:none hack is gone — the iframe owns its own
   interactivity (drag, zoom, pin clicks) now that there are no overlay
   buttons to "pass through" to.
   `top: -60px; height: calc(100% + 60px)` crops the dark Maps title bar
   ("Nashé є тут" / share / fullscreen icons / Описание link) — Google
   doesn't expose a URL param to hide it. .find__map already has
   overflow:hidden so the cropped region is invisible. 60px includes the
   sub-row with "Описание" link that 45px left visible on retina screens. */
.find__map-frame{
  position:absolute;
  top:-60px;
  left:0;
  border:0;
  width:100%;
  height:calc(100% + 60px);
}
/* UI-Review-warning (2026-05-11): on narrow viewports the 60px crop eats ~28%
   of map height (map at 16:10 = ~214px tall on 375px-wide phones) and shifts
   the pin cluster centroid upward. Reduce crop + relax aspect-ratio on mobile. */
@media (max-width:600px){
  .find__map{aspect-ratio:4/3}
  .find__map-frame{top:-44px;height:calc(100% + 44px)}
}

@media (max-width:900px){.find__inner{grid-template-columns:1fr}}

/* ---------- 9. FAQ ---------- */
.faq__inner{
  max-width:var(--maxw);width:100%;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(2rem,5vw,5rem);align-items:start;
}
.faq__list{display:flex;flex-direction:column;gap:0}
.faq details{border-top:1px solid var(--line);padding:1.2rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-weight:700;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{font-size:1.4rem;font-weight:300;transition:transform .2s ease}
.faq details[open] summary span{transform:rotate(45deg)}
.faq p{margin:.8rem 0 0;color:var(--ink-2);max-width:60ch;font-size:.9rem;text-transform:none;font-weight:400;letter-spacing:0;line-height:1.5}
@media (max-width:900px){.faq__inner{grid-template-columns:1fr}}

/* ---------- FOOTER ---------- */
.footer{
  background:var(--ink);color:var(--bg-2);
  padding:clamp(3rem,7vw,5rem) clamp(1rem,4vw,2.5rem) 1.5rem;
  min-height:auto;
  display:block;
  /* Sticky footer (see body{display:flex}) — push to viewport bottom on short
     pages; on tall pages free space is 0 so this is a no-op. */
  margin-top:auto;
}
.footer__top{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.3fr 2fr;gap:clamp(2rem,5vw,5rem);
  padding-bottom:2.5rem;border-bottom:1px solid rgba(245,243,237,.12);
}
.footer__logo{
  font-weight:700;font-size:2rem;margin:0 0 .6rem;letter-spacing:-.02em;
  background:none;border:0;padding:0;color:inherit;cursor:pointer;
  font-family:inherit;
}
.footer__slogan{color:rgba(245,243,237,.7);max-width:38ch;margin:0 0 1.5rem}
.footer__ctas{display:flex;gap:.6rem;flex-wrap:wrap}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.footer__cols h5{font-size:.72rem;letter-spacing:.22em;color:rgba(245,243,237,.5);margin:0 0 1rem;font-weight:600}
.footer__cols a{display:flex;align-items:center;gap:.6rem;padding:.3rem 0;color:rgba(245,243,237,.85);font-size:.88rem;transition:color .2s ease}
.footer__cols a:hover{color:var(--accent-cta)}
.footer__social{display:flex;align-items:center;gap:.5rem}
.footer__social-icon{width:18px;height:18px}
.footer__social-name{font-weight:600}
.footer__social-desc{color:rgba(245,243,237,.5);font-weight:400;margin-left:auto;font-size:.78rem;letter-spacing:.04em}
.footer__bottom{
  max-width:var(--maxw);margin:1.5rem auto 0;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  font-size:.78rem;color:rgba(245,243,237,.5);letter-spacing:.06em;
}
.footer__bottom a{margin-left:1.2rem;transition:color .2s ease}
.footer__bottom a:hover{color:var(--bg-2)}
@media (max-width:900px){
  .footer__top{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:repeat(2,1fr)}
}

/* ---------- LOADER (видео-прелоадер 1 раз в сессию) ----------
   D-01 (260513-o13) — smart-defer: default state is hidden so the loader
   contributes ZERO LCP cost on cold paint. JS opts in via `.loader--visible`
   only when the hero hasn't painted within 200ms. If hero wins the race
   (common case on fast/cached connections), the loader stays display:none. */
.loader{
  position:fixed;inset:0;z-index:200;
  background:var(--ink);color:var(--bg-2);
  display:none;opacity:0;pointer-events:none;place-items:center;
  transition:opacity .8s ease;
}
.loader--visible{display:grid;opacity:1;pointer-events:auto}
.loader.is-hidden{opacity:0;pointer-events:none}
.loader__brand{font-weight:700;font-size:clamp(2.5rem,8vw,5rem);letter-spacing:-.02em}
.loader__video{width:100%;height:100%;object-fit:contain;max-width:min(80vw,800px);max-height:min(80vh,600px)}
.loader__brand--reduced{display:none}

/* prefers-reduced-motion: hide autoplay video, show wordmark span instead (DESIGN-02 / ROADMAP Phase 2 SC #1) */
@media (prefers-reduced-motion: reduce){
  .loader__video{display:none}
  .loader__brand--reduced{display:block}
}

/* ---------- POPUP (карта точек продаж) ---------- */
.popup{
  position:fixed;inset:0;z-index:100;
  background:rgba(30,29,29,.6);
  display:none;place-items:center;padding:1.5rem;
}
.popup.is-open{display:grid}
.popup__card{
  background:var(--bg);color:var(--ink);
  border-radius:var(--radius-lg);
  padding:2rem;
  max-width:480px;width:100%;
  max-height:80vh;overflow-y:auto;
}
.popup__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}
.popup__close{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--ink);
  display:grid;place-items:center;background:transparent;cursor:pointer;
}
.popup__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}
.popup__list li{padding:.8rem 0;border-bottom:1px solid rgba(30,29,29,.1)}
.popup__list li:last-child{border-bottom:0}
.popup__addr{font-weight:600;margin-bottom:.3rem}
.popup__hours{font-size:.85rem;color:var(--muted);margin-bottom:.5rem}
.popup__gmaps{font-size:.78rem;color:var(--accent-cta);font-weight:600;letter-spacing:.1em;text-transform:uppercase}


/* ---------- CATEGORY PAGES ---------- */
.cat-page{padding-top:0}
.cat-page__hero{
  padding:clamp(3rem,7vw,5rem) clamp(1rem,4vw,2.5rem) clamp(2rem,5vw,3rem);
  max-width:var(--maxw);margin:0 auto;width:100%;
}
.cat-page__hero .h-display{margin:.4rem 0 .6em}
.cat-page__hero .lead{max-width:60ch}
.cat-page__back{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-bottom:1.5rem;
}
.cat-page__back:hover{color:var(--accent-cta)}
.cat-page__back svg{width:14px;height:14px}

.cat-page__grid{
  max-width:var(--maxw);margin:0 auto;width:100%;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
  padding:0 clamp(1rem,4vw,2.5rem);
}
.product{
  background:var(--bg-2);border-radius:var(--radius-lg);
  padding:1rem;display:flex;flex-direction:column;gap:.6rem;
}
.product__img{
  aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  background-color:var(--bg);background-position:center;background-size:contain;background-repeat:no-repeat;
}
/* D-28-30 — uid-keyed card presentation is generated by scripts/generate-card-css.mjs. */
.product__name{font-size:1rem;letter-spacing:.04em;margin:.3rem 0 0}
.product__desc{margin:0;font-size:.85rem;color:var(--ink-2);line-height:1.5;flex:1}
.product__meta{margin:0;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.product__badge,.shake-rail__badge{background:var(--accent-cta);color:var(--bg-2);font-size:.65rem;padding:.15rem .5rem;border-radius:999px;letter-spacing:.1em;text-transform:uppercase;align-self:flex-start}
/* Out-of-stock. The modifier reuses the badge shape above and only re-colours it,
   so a sold-out chip cannot drift from a promo chip. Muted rather than alarming:
   the product is coming back, this is not an error state. */
.product__badge--oos,.shake-rail__badge--oos{background:transparent;color:var(--muted);border:1px solid var(--muted)}
/* The sold-out CTA is `disabled`, never `hidden` — `.btn{display:inline-flex}`
   outranks `[hidden]{display:none}` (see the Phase 20 guard further down this
   file), so `hidden` would leave the button visible AND clickable.
   `.btn:hover` (line ~155) must be neutralised too, or the dead button still
   lights up under the cursor and reads as clickable. */
.product__cta:disabled,.shake-rail__cta:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.product__cta:disabled:hover,.shake-rail__cta:disabled:hover{background:var(--ink);color:var(--bg-2);border-color:transparent}
.product__tags{list-style:none;padding:0;margin:.5rem 0 .25rem;display:flex;gap:.4rem;flex-wrap:wrap}
.product__tag{background:transparent;color:var(--muted);border:1px solid var(--muted);font-size:.6rem;padding:.15rem .5rem;border-radius:999px;letter-spacing:.1em;text-transform:uppercase;line-height:1.4}
/* KБЖУ — Variant B: hero kcal + macro ribbon (Phase 16-post). */
.product__kbzh{margin:.6rem 0 0;display:flex;align-items:center;gap:1rem;padding:.65rem .85rem;background:rgba(30,29,29,.04);border-radius:12px}
.product__kbzh-cal{display:flex;flex-direction:column;align-items:center;line-height:1;padding-right:1rem;border-right:1px solid rgba(30,29,29,.12);flex-shrink:0}
.product__kbzh-cal-num{font-size:1.55rem;font-weight:700;color:var(--ink)}
.product__kbzh-cal-unit{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
.product__kbzh-macros{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;flex:1;min-width:0}
.product__kbzh-macros > div{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;min-width:0}
.product__kbzh-macros dt{margin:0;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);order:2}
.product__kbzh-macros dd{margin:0;color:var(--ink);font-weight:600;font-size:.95rem;line-height:1.1;order:1}
.product__kbzh-per{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:.35rem 0 0;text-align:right}
.product__price{font-weight:700;font-size:.95rem;margin:.2rem 0 0}
.product__cta{margin-top:auto}

/* ---------- PRODUCT CARD SKLAD OVERLAY (Phase 17-02 + tg gap-closure 2026-06-07) ----------
   Scoped to `.product` (the <article class="product"> wrapper emitted by
   partials/product-card.njk) so the overlay works on every surface that
   includes the partial: web catalog pages (.cat-page__grid) AND the
   Telegram Mini App catalog (.tg-catalog__grid). Cart drawer line thumbs
   (the cart thumbnail plus its generated uid modifier — no `.product` ancestor)
   and index shake-rail (`.shake-rail__img--*` — no `.product` ancestor)
   are NOT affected because they reuse only the generated image modifier and
   never sit inside a `.product` article.
   CSS sibling-combinator drives the touch / keyboard open state via
   aria-expanded; desktop hover is gated by (hover: hover) and
   (pointer: fine). prefers-reduced-motion swaps the slide for an opacity
   fade and kills the photo scale. */
.product .product__img{position:relative}
.product .product__sklad-trigger{
  position:absolute;top:12px;right:12px;z-index:4;
  font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  border:1px solid rgba(28,26,23,.08);border-radius:999px;
  padding:6px 10px;
  color:var(--ink,#1c1a17);
  cursor:pointer;font-family:inherit;
}
.product .product__sklad-trigger:hover{background:rgba(255,255,255,.92)}
.product .product__sklad {
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;
  padding:18px;
  background:var(--bg-2,#f4ede2);
  color:var(--ink,#1c1a17);
  border-top:1px solid rgba(28,26,23,.08);
  box-shadow:0 -14px 30px rgba(28,26,23,.08);
  transform:translateY(101%);
  transition:transform .42s cubic-bezier(.22,.61,.27,1);
  overflow-y:auto;
}
.product .product__sklad-eyebrow{
  margin:0 0 .5rem;
  font-size:.625rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  opacity:.55;
}
.product .product__sklad-list{
  margin:0;
  font-size:.78rem;line-height:1.5;
  color:var(--ink-2,#4a4642);
}
/* Open state — driven by button aria-expanded (touch / keyboard, post-17-03). */
.product .product__sklad-trigger[aria-expanded="true"] ~ .product__sklad{
  transform:translateY(0);
}
/* Open state — driven by desktop hover (CSS-only, works pre-17-03). */
@media (hover: hover) and (pointer: fine){
  .product .product__img{
    transition:transform .42s cubic-bezier(.22,.61,.27,1), filter .42s cubic-bezier(.22,.61,.27,1);
  }
  .product .product__img:hover .product__sklad{transform:translateY(0)}
  .product .product__img:hover{transform:scale(1.04);filter:saturate(.9)}
}
/* Reduced motion — opacity fade instead of slide, no photo scale. */
@media (prefers-reduced-motion: reduce){
  .product .product__sklad{
    transform:none;opacity:0;pointer-events:none;
    transition:opacity .15s linear;
  }
  .product .product__sklad-trigger[aria-expanded="true"] ~ .product__sklad,
  .product .product__img:hover .product__sklad{
    opacity:1;pointer-events:auto;
  }
  .product .product__img:hover{transform:none;filter:none}
}

.cat-page__footer{
  max-width:var(--maxw);margin:clamp(3rem,5vw,4rem) auto 0;width:100%;
  padding:clamp(2rem,4vw,3rem) clamp(1rem,4vw,2.5rem) clamp(3rem,5vw,4rem);
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  border-top:1px solid rgba(30,29,29,.1);
}

@media (max-width:980px){.cat-page__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cat-page__grid{grid-template-columns:1fr}}

/* ---------- ABOUT PAGE (story) ---------- */
.story{max-width:760px;margin:0 auto;padding:clamp(3rem,7vw,6rem) clamp(1rem,4vw,2.5rem)}
.story h2{font-weight:700;font-size:1.4rem;letter-spacing:.02em;text-transform:uppercase;margin:3rem 0 1rem}
.story p{font-size:1.05rem;line-height:1.7;color:var(--ink-2);margin:0 0 1.2rem}
.story p strong{color:var(--ink)}
.story__lead{font-size:1.2rem;line-height:1.6;color:var(--ink);margin-bottom:2rem}
.story__stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  margin:3rem 0;
  padding:2rem 1rem;
  background:var(--bg-2);border-radius:var(--radius-lg);
  text-align:center;
}
.story__stat strong{display:block;font-size:2.4rem;font-weight:700;color:var(--c-orange);margin-bottom:.3rem}
.story__stat span{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
@media(max-width:680px){.story__stats{grid-template-columns:1fr;gap:1.5rem}}

/* ---------- ACCESSIBILITY ---------- */
.skip-link{
  position:absolute;left:0;top:-44px;
  background:var(--ink);color:var(--bg);
  padding:.6rem 1rem;font-size:.85rem;font-weight:600;
  text-decoration:none;z-index:100;
  border-radius:0 0 var(--radius) 0;
  transition:top .15s ease;
}
.skip-link:focus{top:0;outline:none}

*:focus-visible{outline:2px solid var(--accent-cta);outline-offset:2px;border-radius:2px}
.btn:focus-visible{outline-offset:3px}

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

/* ---------- BURGER MENU (mobile nav overlay, ≤980px) [UX-04] ---------- */
/* Stacking ladder reference:
     .nav (sticky)              z-index:50
     .popup                     z-index:100
     .skip-link                 z-index:100
     .loader                    z-index:200  (removed from DOM after first session)
     .nav__right                z-index:200  (overlay panel — only when fixed at ≤980px)
     .nav__burger               z-index:201  (close affordance — above overlay)
     .cart-drawer__overlay      z-index:299  (Phase 6 cart MVP — backdrop)
     .cart-drawer (panel)       z-index:300  (Phase 6 cart MVP — slide-in panel)
   Animation: opacity + transform only (GPU-cheap, no layout/paint).
   Reduced-motion: handled by the global rule at styles.css:798-805 — DO NOT
   override per-component. */
.nav__burger{position:relative;z-index:201}

@media (max-width:980px){
  .nav{flex-wrap:wrap;align-items:center}
  /* CRITICAL: backdrop-filter on .nav creates a containing block for fixed
     descendants per CSS spec — that traps .nav__right inside .nav (68px tall)
     instead of letting it escape to the viewport. Drop backdrop-filter when
     overlay is open so position:fixed; inset:0 reaches full viewport. */
  .nav.is-open{backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent}
  .nav__burger{order:1;margin-left:auto}
  .nav__right{
    /* Always in the tree as fixed; toggle visibility via opacity/pointer-events
       so the transition can animate (display can't be transitioned — Pitfall #2). */
    order:2;
    position:fixed;inset:0;
    z-index:200;
    background:rgba(245,243,237,.97);
    display:flex;flex-direction:column;
    justify-content:center;align-items:center;
    gap:1.6rem;
    padding:clamp(2rem,8vw,4rem);
    opacity:0;transform:translateY(-12px);
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
  }
  .nav.is-open .nav__right{opacity:1;transform:translateY(0);pointer-events:auto}
  .nav.is-open .nav__menu{
    display:flex;flex-direction:column;gap:1.2rem;align-items:center;
    font-size:1.1rem;letter-spacing:.06em;
  }
  .nav.is-open .nav__actions{
    display:flex;flex-direction:column;gap:.6rem;
    width:min(280px,80vw);
  }
  .nav.is-open .nav__actions .btn{justify-content:center;text-align:center}
  .nav.is-open .nav__logo{display:none}      /* D-01: hide logo inside overlay */
  .nav__burger{transition:transform .2s ease}
  .nav.is-open .nav__burger{transform:rotate(90deg)}
}

/* Body scroll lock for full-screen overlays (D-06).
   Toggled by JS in the burger IIFE (Plan 03-03). touch-action:none is the
   iOS Safari fix — overflow:hidden alone is not enough on mobile WebKit. */
.no-scroll{
  overflow:hidden;
  touch-action:none;
}

/* ---------- CART (drawer + lines + trigger + discount + progress) [Phase 6] ---------- */
/* CONTEXT D-01: right-side slide-in drawer, 400px desktop / 100vw mobile.
   D-09: empty-state copy/CTA. D-10: cart line thumb reuses generated card imagery.
   D-14: progressive discounts (drawer renders discount line + native <progress>).
   D-15: 2-CTA footer (Оформити замовлення primary + Продовжити покупки close).
   RESEARCH Topic 2: ARIA dialog pattern (.cart-drawer = container, .cart-drawer__overlay = backdrop, .cart-drawer__panel = sliding panel).
   RESEARCH Topic 6: native <progress> element pseudo-element styling for cross-browser fill color.
   RESEARCH Topic 11 P10: drawer z=300, overlay z=299 — above .nav__burger (201) so opening cart from inside burger menu visually elevates.

   Default state: .cart-drawer has [hidden] attribute → display:none (browser default).
   Plan 07 JS: removeAttribute('hidden') → wait 1 rAF → add .cart-drawer--open class
   → transform:translateX(0) triggers via transition. Reverse on close. */

.cart-drawer{
  position:fixed; inset:0;
  z-index:300;
  display:flex; justify-content:flex-end;
  pointer-events:none;  /* overlay/panel re-enable pointer events themselves */
}
.cart-drawer[hidden]{ display:none; }

.cart-drawer__overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.5);
  z-index:299;
  opacity:0;
  transition:opacity .25s ease-out;
  pointer-events:auto;
}

.cart-drawer__panel{
  position:relative;
  width:400px; max-width:100vw;
  height:100%;
  background:var(--bg-2);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .25s ease-out;
  z-index:300;
  pointer-events:auto;
  overflow-y:auto;
}

.cart-drawer.cart-drawer--open .cart-drawer__overlay{ opacity:1; }
.cart-drawer.cart-drawer--open .cart-drawer__panel{ transform:translateX(0); }

@media (max-width:768px){
  .cart-drawer__panel{ width:100vw; }
}

.cart-drawer__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 1.4rem;
  border-bottom:1px solid rgba(30,29,29,.1);
  flex-shrink:0;
}
.cart-drawer__title{
  margin:0;
  font-size:1.05rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:700;
}
.cart-drawer__close{
  width:36px; height:36px;
  border-radius:50%;
  background:transparent;
  border:1px solid var(--ink);
  color:var(--ink);
  display:inline-grid; place-items:center;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.cart-drawer__close:hover{
  background:var(--accent-cta);
  color:var(--bg-2);
  border-color:var(--accent-cta);
}

.cart-drawer__lines{
  flex:1;
  display:flex; flex-direction:column; gap:1rem;
  padding:1.2rem 1.4rem;
}

/* Per cart line — D-10 thumbnail reuses the generated uid modifier; the
   composing class is added at render-time by JS. */
.cart-line{
  display:grid;
  grid-template-columns: 64px 1fr auto auto;
  align-items:center;
  gap:.8rem;
}
.cart-line__thumb{
  width:64px; height:64px;
  border-radius:var(--radius);
  flex-shrink:0;
}
/* D-28-33 — weight 0,2,0 on purpose. The per-product rules now arrive from
   card-images.css, which loads AFTER this file, so at equal weight they would
   start winning here and give every cart thumbnail the catalogue card's tint
   and cover fit. The doubled class states that intent instead of inheriting
   it from line order. */
.cart-line__thumb.cart-line__thumb{
  background-color:var(--bg);
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
}
.cart-line__body{
  min-width:0;
  display:flex; flex-direction:column; gap:.15rem;
}
.cart-line__name{
  margin:0;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cart-line__meta{
  margin:0;
  font-size:.8rem;
  color:var(--ink-2);
  font-weight:500;
}

/* Sold-out cart line. Kept visible and struck through rather than removed —
   the total already excludes it, so without a visible reason the customer
   would see the sum change for no apparent cause at the payment step.
   Only name and price are struck; the note itself stays legible. */
.cart-line--unavailable .cart-line__name,
.cart-line--unavailable .cart-line__meta{text-decoration:line-through;opacity:.5}
.cart-line--unavailable .cart-line__thumb{opacity:.4}
.cart-line__note{
  margin:.2rem 0 0;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Qty controls — D-08: min=3 / max=50, 44×44px touch target.
   :disabled state visually communicates qty=3 (− disabled) / qty=50 (+ disabled). */
.cart-line__qty{
  display:inline-flex; align-items:center; gap:.4rem;
}
.cart-line__qty-btn{
  width:44px; height:44px;
  border-radius:50%;
  background:var(--bg);
  border:1px solid var(--ink);
  color:var(--ink);
  display:inline-grid; place-items:center;
  cursor:pointer;
  font-size:1.1rem; line-height:1;
  font-weight:600;
  transition:background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.cart-line__qty-btn:hover{
  background:var(--accent-cta);
  color:var(--bg-2);
  border-color:var(--accent-cta);
}
.cart-line__qty-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
  background:var(--bg);
  color:var(--ink);
  border-color:var(--ink);
}
.cart-line__qty-value{
  min-width:1.5em;
  text-align:center;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  font-size:.95rem;
}
.cart-line__remove{
  width:36px; height:36px;
  border-radius:50%;
  background:transparent;
  border:none;
  color:var(--muted);
  cursor:pointer;
  font-size:1.2rem; line-height:1;
  transition:color .15s ease;
}
.cart-line__remove:hover{ color:var(--accent-cta); }

/* Cart visibility guard. Each block below declares its own display layout,
   which otherwise wins over the browser's UA `[hidden] { display:none }`.
   Keep hidden semantics authoritative so an empty cart cannot retain the
   previous order's discount, progress or footer totals/actions. */
.cart-drawer__empty[hidden],
.cart-drawer__discount[hidden],
.cart-drawer__progress[hidden],
.cart-drawer__footer[hidden] {
  display: none !important;
}

/* Empty state — D-09: «Кошик порожній» / «Час куштувати Nashé» / CTA → /#catalog. */
.cart-drawer__empty{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.8rem;
  padding:2rem 1.4rem;
  text-align:center;
}
.cart-empty__heading{
  margin:0;
  font-size:1.2rem; font-weight:700;
  letter-spacing:.02em;
}
.cart-empty__body{
  margin:0;
  font-size:.95rem; color:var(--ink-2);
}

/* Discount line — D-14: appears when discountPercent > 0; uses --accent-cta color. */
.cart-drawer__discount{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.8rem 1.4rem;
  background:rgba(180,181,52,.12);  /* --accent-cta @ 12% (matches existing form-status pattern at styles.css:911-914) */
  border-top:1px solid rgba(30,29,29,.1);
  font-weight:600;
  color:var(--accent-cta);
}
.cart-discount__label{ font-size:.85rem; }
.cart-discount__amount{ font-size:.95rem; font-variant-numeric:tabular-nums; }

/* Progress block — D-14 + RESEARCH Topic 6: native <progress> element with pseudo-element
   cross-browser styling. Track = --bg; fill = --accent-cta. */
.cart-drawer__progress{
  display:flex; flex-direction:column; gap:.5rem;
  padding:.8rem 1.4rem;
  border-top:1px solid rgba(30,29,29,.1);
}
.cart-drawer__progress-text{
  margin:0;
  font-size:.85rem;
  color:var(--ink-2);
  font-weight:500;
}
.cart-drawer__progress-bar{
  appearance:none; -webkit-appearance:none;
  width:100%; height:8px;
  border:none;
  border-radius:var(--radius);
  background:var(--bg);  /* Firefox track fallback */
}
.cart-drawer__progress-bar::-webkit-progress-bar{
  background:var(--bg);
  border-radius:var(--radius);
}
.cart-drawer__progress-bar::-webkit-progress-value{
  background:var(--accent-cta);
  border-radius:var(--radius);
  transition:width .25s ease;
}
.cart-drawer__progress-bar::-moz-progress-bar{
  background:var(--accent-cta);
  border-radius:var(--radius);
}

/* Footer — D-15: 2 CTAs (primary checkout link + secondary close button). */
.cart-drawer__footer{
  flex-shrink:0;
  display:flex; flex-direction:column; gap:.6rem;
  padding:1.2rem 1.4rem;
  border-top:1px solid rgba(30,29,29,.1);
  background:var(--bg-2);
}
.cart-drawer__total{
  margin:0 0 .4rem;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.cart-total__crossed{
  text-decoration:line-through;
  color:var(--muted);
  font-weight:500;
  margin-right:.4rem;
}

/* Cart trigger — D-02: replaces «Замовити»; count badge appears as «Кошик (3)» when populated.
   Reuses .btn .btn--primary base styling; this block only adds count-span tabular-nums. */
.cart-trigger__count{
  font-variant-numeric:tabular-nums;
}

/* ---------- B2B FORM STATUS (success/error message) ---------- */
.partnerships__form-status{
  font-size:.85rem;line-height:1.4;
  padding:.7rem .9rem;border-radius:var(--radius);
  margin-top:.2rem;
}
.partnerships__form-status[data-state="ok"]{
  background:rgba(180,181,52,.18);
  color:var(--bg-2);
  border:1px solid rgba(180,181,52,.45);
}
.partnerships__form-status[data-state="err"]{
  background:rgba(227,104,136,.18);
  color:var(--bg-2);
  border:1px solid rgba(227,104,136,.45);
}
.partnerships__form button[disabled]{opacity:.5;cursor:not-allowed}


/* ===== Phase 7 — Web Checkout (B2C) =====
 *
 * Surfaces: /checkout.html, /order-success.html, /payment-mock.html.
 * Reuses :root tokens (--bg, --bg-2, --ink, --ink-2, --muted, --c-orange,
 * --accent-cta, --radius, --maxw) defined in Phase 1+. NO new tokens
 * introduced; --c-orange doubles as inline form-error tone (visually
 * high-contrast against the milk background, distinct from brand-yellow).
 *
 * BEM blocks: .checkout-*, .payment-mock-*, .order-success-*.
 * Modifiers via `--state` or `is-active`/`is-done` per Phase 6 convention.
 * All step-hiding handled by HTML5 [hidden] attribute (NOT display:none) —
 * see plan 07-08 markup. CSS only applies layout to non-hidden steps.
 * ============================================================== */

/* ----- Page wrappers ----- */
.checkout {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  background: var(--bg);
}

.payment-mock,
.order-success {
  max-width: 560px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.checkout__head { margin-bottom: 2rem; }

.checkout__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1.25rem;
  letter-spacing: -.005em;
}

/* ----- Step progression (numbered pills with connectors) -----
   Per .planning/quick/20260513-checkout-ux-polish CONTEXT D-03 + D-04.
   Three states (driven by data-state on .checkout-progress__item):
   - active:  filled --ink circle, label bold, button disabled (current step)
   - done:    filled --c-yellow circle with ✓, button clickable for jump-back
   - pending: outlined --muted, button disabled (can't skip forward) */
.checkout-progress {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  margin: 0 0 1.5rem;
  font-size: .85rem;
}

.checkout-progress__item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  min-width: 0;
}

.checkout-progress__item:not(:last-child)::after {
  content: "";
  flex: 1 1 0;
  height: 2px;
  background: var(--muted);
  margin: 0 .5rem;
  transition: background .2s ease;
}
/* Connector turns brand-graphite once the step on the LEFT is done. */
.checkout-progress__item[data-state="done"]:not(:last-child)::after {
  background: var(--ink);
}

.checkout-progress__btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .85rem .35rem .35rem;
  border-radius: 999px;
  border: 1px solid var(--muted);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .85rem;
  letter-spacing: .02em;
  cursor: not-allowed;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.checkout-progress__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-weight: 700;
  font-size: .9rem;
}

/* Active = current step. Filled brand-graphite, label bold. Not clickable. */
.checkout-progress__item[data-state="active"] .checkout-progress__btn {
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 700;
}
.checkout-progress__item[data-state="active"] .checkout-progress__num {
  background: var(--ink);
  color: var(--bg-2);
  border-color: var(--ink);
}

/* Done = previously visited. Filled --c-yellow with ✓. Clickable for jump-back. */
.checkout-progress__item[data-state="done"] .checkout-progress__btn {
  border-color: var(--ink);
  color: var(--ink);
  cursor: pointer;
}
.checkout-progress__item[data-state="done"] .checkout-progress__num {
  background: var(--c-yellow);
  color: var(--ink);
  border-color: var(--c-yellow);
  font-size: 0;        /* hide the digit */
}
.checkout-progress__item[data-state="done"] .checkout-progress__num::after {
  content: "✓";
  font-size: 1rem;
  font-weight: 700;
}
.checkout-progress__item[data-state="done"] .checkout-progress__btn:hover,
.checkout-progress__item[data-state="done"] .checkout-progress__btn:focus-visible {
  background: var(--bg-2);
}

/* Pending = not yet reached. Outlined muted. Not clickable. */
.checkout-progress__item[data-state="pending"] .checkout-progress__btn {
  cursor: not-allowed;
}

/* Focus-visible ring on clickable (done) buttons only. */
.checkout-progress__btn:focus-visible {
  outline: 2px solid var(--accent-cta);
  outline-offset: 2px;
}

/* ----- Step sections ----- */
.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.checkout-step {
  background: var(--bg-2);
  border: 1px solid rgba(30, 29, 29, .12);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
}

.checkout-step__heading {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  color: var(--ink);
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* `:focus-visible` (not `:focus`) — checkout-ui.mjs programmatically calls
 * `headingEls[idx].focus()` on every step transition for a11y (screen
 * reader announces the new step heading). With `:focus`, that JS-driven
 * focus draws a permanent orange ring around «КОНТАКТИ» / «ДОСТАВКА» /
 * «ОГЛЯД» on EVERY page load — operator-flagged visual bug. `:focus-
 * visible` uses browser heuristics: ring shown only on keyboard-tab
 * navigation, suppressed on programmatic .focus() and mouse clicks. */
.checkout-step__heading:focus-visible {
  outline: 2px solid var(--accent-cta);
  outline-offset: 2px;
}

.checkout-step__actions {
  display: flex;
  gap: .8rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* `.btn { display:inline-flex }` is an author rule and therefore overrides
 * the browser's default `[hidden]` rule. Preserve hidden semantics while the
 * dedicated 409 price/promo confirmation action is awaiting consent. */
.checkout-step__actions .btn[hidden] { display: none; }

/* Opt-in fade animation. JS adapter (plan 12) adds .checkout-step--enter
 * on transition; reduced-motion media query below disables it. */
.checkout-step--enter {
  animation: checkout-fade-in 220ms ease-out both;
}

@keyframes checkout-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- Form fields ----- */
.checkout-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1rem;
}

.checkout-field__label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .02em;
}

.checkout-field input[type="text"],
.checkout-field input[type="tel"],
.checkout-field input[type="email"],
.checkout-field textarea {
  width: 100%;
  padding: .75rem .9rem;
  border-radius: 10px;
  border: 1px solid rgba(30, 29, 29, .25);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.checkout-field input:focus,
.checkout-field textarea:focus {
  outline: none;
  border-color: var(--accent-cta);
  box-shadow: 0 0 0 3px rgba(240, 140, 33, .18);
}

.checkout-field input:disabled {
  opacity: .55;
  cursor: not-allowed;
  background: var(--bg-2);
}

.checkout-field textarea {
  min-height: 5rem;
  resize: vertical;
}

.checkout-field__error {
  display: block;
  font-size: .78rem;
  color: var(--c-orange);
  margin-top: .15rem;
  min-height: 1em;
}

.checkout-field__hint {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}

.checkout-promo {
  max-width: 36rem;
  margin-top: .25rem;
}

.checkout-promo__control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .6rem;
  align-items: stretch;
}

.checkout-promo__apply {
  min-width: 8.5rem;
  justify-content: center;
  white-space: nowrap;
}

.checkout-promo__status {
  display: block;
  min-height: 1em;
  margin-top: .15rem;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 600;
}

.checkout-promo__status[data-state="loading"] { color: var(--muted); }
.checkout-promo__status[hidden] { display: none; }

@media (max-width: 560px) {
  .checkout-promo__control { grid-template-columns: 1fr; }
  .checkout-promo__apply { width: 100%; }
}

.checkout-field--invalid input,
.checkout-field--invalid textarea {
  border-color: var(--c-orange);
}

/* ----- Shipping line (step 2) ----- */
.checkout-shipping {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: .75rem 0 .25rem;
  font-size: .9rem;
  color: var(--ink-2);
}

.checkout-shipping__label { color: var(--muted); }
.checkout-shipping__value { color: var(--ink); font-weight: 700; }

/* ----- Cold-chain warning (D-06) ----- */
.checkout-coldwarn {
  background: var(--c-yellow);   /* warning-yellow, NOT orange (CTA collision) */
  color: var(--ink);
  padding: 1rem 1.1rem;
  border-radius: 12px;
  font-size: .9rem;
  line-height: 1.5;
  margin: 1rem 0 0;
  border: 1px solid rgba(30, 29, 29, .15);
}

/* ----- Min-order checkout-CTA gate (260514-g60 D-01b) — <a> can't use the
   native :disabled state, so aria-disabled drives the visual + blocks clicks
   (href is also dropped in JS as the real guard; this is the visual layer). */
.btn[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
  cursor: not-allowed;
}

/* ----- Min-order hint (260514-g60 D-05) — cart drawer / TG cart / checkout ----- */
.cart-minorder-hint {
  background: var(--c-yellow);   /* mirrors .checkout-coldwarn brand treatment */
  color: var(--ink);
  padding: .7rem .9rem;
  border-radius: 10px;
  font-size: .85rem;
  line-height: 1.4;
  margin: 0 0 .6rem;
  border: 1px solid rgba(30, 29, 29, .15);
}

/* ----- Review summary (step 3) ----- */
.checkout-summary {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.checkout-summary__placeholder {
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

.checkout-summary ul,
.order-success__summary ul {
  list-style: none;
  padding: 0;
  margin: 0 0 .75rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.checkout-summary li,
.order-success__summary li {
  font-size: .92rem;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(30, 29, 29, .08);
}

.checkout-summary li:last-child,
.order-success__summary li:last-child {
  border-bottom: 0;
}

/* aria-live status region (D-15) */
.checkout-status {
  font-size: .9rem;
  color: var(--muted);
  min-height: 1.4em;
  margin: 1rem 0 0;
}

.checkout-status[data-state="error"] {
  color: var(--c-orange);
  font-weight: 600;
}

.checkout-status[data-state="loading"] { color: var(--muted); }

.checkout-status[data-state="success"] {
  color: var(--ink);
  font-weight: 600;
}

.checkout-status__action {
  display: block;
  margin-top: .7rem;
  padding: .65rem .9rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--accent-cta);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.checkout-status__action:focus-visible {
  outline: 3px solid rgba(240, 140, 33, .3);
  outline-offset: 2px;
}

/* ----- Payment-mock page ----- */
.payment-mock__banner {
  background: var(--accent-cta);
  color: var(--ink);
  padding: 1rem 1.25rem;
  border: 3px dashed var(--ink);
  border-radius: 12px;
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 2rem;
  letter-spacing: .01em;
}

.payment-mock__inner {
  background: var(--bg-2);
  border: 1px solid rgba(30, 29, 29, .12);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
}

.payment-mock__title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 1.5rem;
  color: var(--ink);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.payment-mock__order,
.payment-mock__amount {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: .5rem 0;
  font-size: .95rem;
  gap: 1rem;
}

.payment-mock__label { color: var(--muted); }

.payment-mock__value {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.payment-mock__actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 1.5rem 0 1rem;
}

.payment-mock__contract {
  margin-top: 1.5rem;
  font-size: .85rem;
}

.payment-mock__contract summary {
  cursor: pointer;
  color: var(--muted);
  padding: .35rem 0;
}

.payment-mock__contract summary:hover { color: var(--ink); }

.payment-mock__contract-body {
  margin: .5rem 0 0;
  padding: .85rem 1rem;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid rgba(30, 29, 29, .12);
  color: var(--ink-2);
}

.payment-mock__contract-body pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  background: var(--ink);
  color: var(--bg-2);
  padding: .75rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: .5rem 0;
}

.payment-mock__contract-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em;
}

/* ----- Order success page ----- */
.order-success__inner {
  background: var(--bg-2);
  border: 1px solid rgba(30, 29, 29, .12);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.order-success__heading {
  font-size: 1.65rem;
  font-weight: 700;
  margin: 0 0 .75rem;
  color: var(--ink);
  letter-spacing: .01em;
}

.order-success__lead {
  color: var(--ink-2);
  font-size: .95rem;
  margin: 0 0 1.75rem;
}

.order-success__id-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--muted);
  margin: 0 0 .35rem;
}

.order-success__id {
  display: inline-block;
  background: var(--ink);
  color: var(--accent-cta);
  font-size: 1.3rem;
  font-weight: 700;
  padding: .65rem 1rem;
  border-radius: 8px;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  margin: 0 0 1.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.order-success__id-placeholder {
  font-style: italic;
  opacity: .7;
}

.order-success__summary {
  text-align: left;
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid rgba(30, 29, 29, .08);
}

.order-success__summary h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .75rem;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.order-success__summary p {
  margin: .35rem 0;
  font-size: .9rem;
  color: var(--ink-2);
}

.order-success__summary p strong { color: var(--ink); }

.order-success__tracking-stub {
  color: var(--muted);
  font-size: .9rem;
  background: var(--bg);
  border-radius: 10px;
  padding: .85rem 1rem;
  margin: 1rem 0;
  border: 1px dashed rgba(30, 29, 29, .15);
}

.order-success__support {
  font-size: .9rem;
  color: var(--ink-2);
  margin: 1.5rem 0;
}

.order-success__support a {
  color: var(--ink);
  text-decoration: underline;
}

.order-success__support a:hover { color: var(--accent-cta); }

.order-success__cta {
  margin-top: 1.5rem;
}

/* `[hidden]` guard — author `.btn{display:inline-flex}` wins over UA
 * `[hidden]{display:none}`, so the DECLINED-only retry CTA would stay visible
 * on the checking / paid / pending screens, inviting a buyer who already paid
 * to pay again. Mirrors the section[hidden], .partnerships__form[hidden] and
 * .cart-drawer__empty[hidden] guards elsewhere in this file. */
.order-success__cta .btn[hidden] { display: none; }

/* ----- Reduced motion (a11y precedent: Phase 1 + Phase 3) ----- */
@media (prefers-reduced-motion: reduce) {
  .checkout-step--enter,
  .checkout-progress__btn,
  .checkout-progress__item::after {
    animation: none !important;
    transition: none !important;
  }
}

/* =============================================================
   Reusable combobox (WAI-ARIA combobox + listbox)
   Used by web checkout (Місто, Відділення); future TG Mini App
   reuse per .planning/quick/20260513-checkout-ux-polish CONTEXT D-06.
   Generic prefix (.combobox, NOT .checkout-combobox).
   ============================================================= */
.combobox {
  position: relative;
  width: 100%;
}

.combobox__field-wrap {
  position: relative;
}

.combobox__input {
  width: 100%;
  padding: .75rem 2.25rem .75rem .9rem;   /* right pad for × clear button */
  border-radius: 10px;
  border: 1px solid rgba(30, 29, 29, .25);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.combobox__input:focus {
  outline: none;
  border-color: var(--accent-cta);
  box-shadow: 0 0 0 3px rgba(240, 140, 33, .18);
}

.combobox__input:disabled {
  opacity: .55;
  cursor: not-allowed;
  background: var(--bg-2);
}

.combobox__clear {
  position: absolute;
  top: 50%;
  right: .55rem;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.combobox__clear:hover { background: var(--bg-2); color: var(--ink); }

.combobox__listbox {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: .25rem 0;
  max-height: 18rem;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid rgba(30, 29, 29, .25);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(30, 29, 29, .12);
}
.combobox__listbox[hidden] { display: none; }

.combobox__option {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .55rem .9rem;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.combobox__option:hover {
  background: var(--bg);
}
.combobox__option.is-focused,
.combobox__option[aria-selected="true"] {
  background: var(--bg);
  border-left-color: var(--c-yellow);
}

.combobox__option-primary {
  font-weight: 600;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.25;
}
.combobox__option-primary mark {
  background: var(--c-yellow);
  color: var(--ink);
  padding: 0 .1em;
  border-radius: .15em;
  text-decoration: none;
  font-weight: 700;
}

.combobox__option-secondary {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.combobox__state {
  padding: .65rem .9rem;
  color: var(--muted);
  font-size: .85rem;
  font-style: italic;
  cursor: default;
}
.combobox__state--error { color: var(--c-orange); font-style: normal; }

/* ----- Mobile responsive ----- */
@media (max-width: 768px) {
  .checkout { padding: 1.5rem 1rem 3rem; }
  .checkout-step { padding: 1.25rem 1rem; }
  .order-success__inner { padding: 2rem 1.1rem; }
  .payment-mock__inner { padding: 1.5rem 1.1rem; }
}

@media (max-width: 640px) {
  .checkout { padding: 1.5rem .9rem 3rem; }

  /* Mobile pills: stay horizontal, hide labels, just numbered circles
     remain. Per D-03 mobile/compact spec. */
  .checkout-progress {
    font-size: .75rem;
    gap: 0;
  }
  .checkout-progress__label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .checkout-progress__btn {
    padding: .15rem;
    border: 0;        /* circles speak for themselves on mobile */
  }
  .checkout-progress__num {
    width: 2rem;
    height: 2rem;
  }
  .checkout-progress__item:not(:last-child)::after {
    margin: 0 .3rem;
  }

  .checkout-step__actions {
    flex-direction: column-reverse;
  }
  .checkout-step__actions .btn { width: 100%; }
  .order-success__id {
    font-size: 1.1rem;
    letter-spacing: .08em;
    padding: .55rem .85rem;
  }
  .payment-mock__order,
  .payment-mock__amount {
    flex-direction: column;
    gap: .15rem;
    align-items: flex-start;
  }
}

/* ============================================================
   Phase 8 — Telegram Mini App `.tg-*` BEM
   Per UI-SPEC §Component Patterns + §Theme Adaptation Specifics.
   D-15: reuses Phase 6 .cart-line and Phase 7 .checkout-* verbatim.
   ============================================================ */

/* ----- New token: --bg-secondary -----
   UI-SPEC §Color Layer B fallback rule. Outside TG → aliased to
   existing --bg-2; inside TG → Plan 09 applyTheme writes from
   themeParams.secondary_bg_color. */
:root {
  --bg-secondary: var(--bg-2);
}

/* ----- App shell + view-state container ----- */

.tg-app {
  max-width: 480px;
  margin: 0 auto;
  min-height: var(--vh, 100vh);
  background: var(--tg-bg);      /* D-03: adaptive — TG page bg through chrome */
  color: var(--tg-text);         /* D-03: adaptive — fallback ink, TG dark = light */
}

.tg-app__main {
  display: block;
}

.tg-view {
  /* UI-SPEC §Viewport Handling §MainButton sticky bottom respect.
     Reserves space for TG MainButton (~60px) + iOS safe-area inset. */
  padding-block-start: 32px;
  padding-block-end: max(48px, calc(64px + env(safe-area-inset-bottom)));
  padding-inline: 1.25rem;     /* UI-SPEC §Spacing 'page' */
}

@media (max-width: 360px) {
  .tg-view { padding-inline: 0.75rem; }
}

/* ----- Catalog (UI-SPEC §Component Patterns §1) ----- */

.tg-catalog {
  padding-block-start: 0;       /* sticky headers handle top spacing */
}

.tg-catalog__header {
  position: sticky;
  top: 48px;                     /* 260514-ipq: sit BELOW the .tg-catnav (48px) */
  scroll-margin-top: 48px;       /* 260514-ipq: scrollIntoView lands header below nav */
  z-index: 10;
  background: var(--bg-secondary);
  padding: 12px 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  margin-inline: -1.25rem;       /* full-bleed within .tg-view padding */
}

.tg-catalog__header h2 {
  font-size: 0.875rem;           /* 14px UI-SPEC §Typography */
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}

.tg-catalog__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.tg-catalog__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 16px 0;
}

@media (min-width: 480px) {
  .tg-catalog__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.tg-catalog .product__cta {
  width: 100%;
}

/* ----- Catalog category nav (260514-ipq) ----- */

.tg-catnav {
  position: sticky;
  top: 0;
  z-index: 20;                  /* above .tg-catalog__header (z-index:10) */
  background: var(--tg-bg);     /* adaptive surface — RESEARCH §7 */
  margin-inline: -1.25rem;      /* full-bleed, matches .tg-catalog__header */
  padding: 8px 16px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tg-catnav::-webkit-scrollbar { display: none; }

.tg-catnav__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--tg-bg-secondary);
  color: var(--tg-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Active pill = brand-accent surface. Hard-coded brand-yellow + brand-ink so
   contrast holds across any TG theme — same pattern as .tg-success__id
   (styles.css:2304-2317). Do NOT use --tg-text/--ink (they flip with theme). */
.tg-catnav__pill[data-active] {
  background: #F2D88F;
  color: #1E1D1D;
}

.tg-catnav__icon {
  flex: 0 0 auto;
}

/* ----- Cart (UI-SPEC §Component Patterns §2; reuses Phase 6 .cart-line) ----- */

.tg-cart {
  /* D-01: brand-first surface — primary content lives on brand-cream card.
     Resolves dark-on-dark contrast bug architecturally — child .cart-line
     elements already use brand --ink/--ink-2/--muted, which become readable
     against this cream background regardless of TG client theme. */
  background: var(--bg-2);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 20px 16px;
  margin: 16px 0;
  padding-block-end: max(20px, calc(20px + env(safe-area-inset-bottom)));
}

.tg-cart__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 24px;
  color: var(--ink);
}

.tg-cart__empty {
  text-align: center;
  padding: 48px 16px;
}

.tg-cart__lines {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tg-cart__discount {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--c-yellow);   /* D-02: brand-yellow (savings = win) */
  color: var(--ink);             /* D-02: brand-ink for contrast on yellow */
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
}

.tg-cart__progress {
  width: 100%;
  margin-top: 8px;
  height: 8px;
  border-radius: 4px;
}

.tg-cart__footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.tg-cart__total {
  font-size: 1.125rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.cart-total__crossed {
  text-decoration: line-through;
  color: var(--muted);
  font-weight: 400;
  margin-right: 8px;
}

/* ----- Checkout (UI-SPEC §Component Patterns §3; reuses Phase 7 .checkout-*) ----- */

.tg-checkout {
  padding-block-end: max(64px, calc(64px + env(safe-area-inset-bottom)));
}

/* ----- Share-contact button (UI-SPEC §Component Patterns §4; D-10 UPDATED) ----- */

.tg-share-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--ink);
  border: 1px solid var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 8px;
  cursor: pointer;
  min-height: 44px;              /* touch target floor */
}

.tg-share-contact:hover {
  background: var(--accent-cta);
  color: var(--bg);
}

.tg-share-contact[data-state="granted"] {
  opacity: .55;
  pointer-events: none;
}

.tg-share-contact[data-state="granted"]::after {
  content: ' ✓';
}

/* ----- Order success (UI-SPEC §Component Patterns §5) ----- */

.tg-success {
  padding: 48px 20px;
  text-align: center;
}

.tg-success__icon {
  display: inline-block;
  margin-bottom: 16px;
}

.tg-success__heading {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 8px;
  /* No own color — inherits var(--tg-text) from the
     `.tg-app .tg-success` adaptive-surface convention rule below. */
}

.tg-success__lead {
  font-size: 1rem;
  /* No own color — inherits var(--tg-text-muted) from the
     `.tg-app .tg-success__lead/__id-label/__support` convention rule below
     (single source of truth — WR-02). */
  margin: 0 auto 24px;
  max-width: 32ch;
  line-height: 1.5;
}

.tg-success__id-label {
  font-size: 0.75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* No own color — inherits var(--tg-text-muted) from the convention rule
     below (single source of truth — WR-02). Confirmed sibling of (not child
     of) the hard-coded brand-yellow .tg-success__id chip in tg/index.njk, so
     --tg-text-muted is the correct adaptive-surface token. */
  margin: 0;
}

/* UI-SPEC §Theme Adaptation §Brand-yellow override rules:
   brand-yellow surfaces use HARD-CODED color (NOT var(--ink))
   so contrast holds across any TG theme. */
.tg-success__id {
  font-size: 1.75rem;
  font-weight: 700;
  background: #F2D88F;           /* hard-coded brand-yellow */
  color: #1E1D1D;                /* hard-coded brand-ink */
  padding: 8px 16px;
  border-radius: 8px;
  display: inline-block;
  margin: 8px 0 24px;
  font-variant-numeric: tabular-nums;
}

.tg-success__summary {
  background: var(--bg-secondary);
  border-radius: var(--radius, 18px);
  padding: 16px;
  margin: 0 0 24px;
  text-align: left;
}

.tg-success__summary h3 {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--ink);
}

.tg-success__summary ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink);
}

.tg-success__total {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, .1);
  font-size: 1.125rem;
  color: var(--ink);
}

.tg-success__support {
  font-size: 0.875rem;
  /* No own color — inherits var(--tg-text-muted) from the convention rule
     below (single source of truth — WR-02). */
  margin: 24px 0 0;
}

.tg-success__support a {
  color: var(--accent-cta);
  font-weight: 600;
  text-decoration: none;
}

.tg-success__support a:hover {
  text-decoration: underline;
}

/* ----- Standalone-browser fallback (UI-SPEC §Component Patterns §6) -----
   STATIC palette — user is outside TG, no themeParams to apply. */

/* BUG FIX: the [hidden] attribute is supposed to render `display: none` via
   UA stylesheet. But author-specified `display: <anything>` on the SAME
   element overrides it (author > UA cascade), making `<aside hidden>` STILL
   visible. .tg-fallback below sets `display: grid` unconditionally — which
   nullified the initial `hidden` attribute on the fallback `<aside>` and
   forced the fallback over the catalog INSIDE Telegram (where SDK is fine
   and tg-ui.mjs never had a reason to call `hidden = true` on fallback).
   Generic `[data-view][hidden]` rule below raises specificity to (0,0,2,0)
   so display:none re-wins. */
[data-view][hidden] {
  display: none !important;
}

/* TG Mini App brand-button lock. THEME_MAP (tg-ui.mjs) maps TG's
   text_color → --tg-text only — it never touches --ink (a static
   #1E1D1D brand constant). These hard-codes pin .btn--dark/.btn--primary/
   .btn--milk to brand colors as a visual-identity lock + regression guard:
   TG Mini App buttons are intentionally NOT routed through the adaptive
   surface→token convention below — they keep brand identity in every TG
   theme (light + dark). */
.tg-app .btn--dark {
  background: #1E1D1D;          /* brand-ink (hard-coded) */
  color: #F5F3ED;               /* brand-milk (hard-coded) */
}
.tg-app .btn--primary {
  background: #1E1D1D;
  color: #F5F3ED;
}
.tg-app .btn--milk {
  background: #F5F3ED;
  color: #1E1D1D;
  border-color: #F5F3ED;
}

/* ===== TG SURFACE -> TEXT-TOKEN CONVENTION (260514-hro) =====
   Every TG block sits on exactly one of two surfaces. Text color follows
   the surface automatically — a new element CANNOT be mis-categorized.
     ADAPTIVE   -> on var(--tg-bg)  (TG-controlled: black in dark theme,
                   white in light). Text MUST resolve to --tg-text /
                   --tg-text-muted.
     BRAND-CARD -> on static cream var(--bg-2)/var(--bg-secondary) or
                   yellow. Text MUST resolve to --ink / --ink-2 / --muted
                   (or hard-coded #1E1D1D on yellow).
   A surface-matched token is correct in BOTH TG themes by construction.
   Cream-card headings/titles (.checkout-step__heading, .tg-cart__title) are
   pinned to --ink by ENFORCED selectors below — not prose — so the mapping
   can't silently regress (D-01). The remaining cream/yellow surfaces
   (.tg-success__summary, .tg-catalog__header, .product, .tg-cart__discount,
   .checkout-coldwarn) already re-establish their background AND their
   children already use the --ink family at their base rules — they need no
   rule here. Buttons (.tg-app .btn--*, above) are a separate concern. */

/* ADAPTIVE surfaces — sit directly on .tg-app's --tg-bg */
.tg-app .tg-success,
.tg-app .tg-checkout > .checkout-progress {
  color: var(--tg-text);
}
.tg-app .tg-success__lead,
.tg-app .tg-success__id-label,
.tg-app .tg-success__support {
  color: var(--tg-text-muted);
}

/* BRAND-CARD surfaces — enforced, not just documented. These selectors sit
   on static cream var(--bg-2)/var(--bg-secondary) cards; pinning them to the
   brand --ink token inside .tg-app makes the surface->token mapping a
   SELECTOR-ENFORCED guard (D-01) so the dark-on-cream bug class cannot recur
   if a base rule is later changed to an adaptive --tg-* token.
   .checkout-summary additionally catches JS-injected unclassed children (TG
   renderReviewSummary injects bare <p> lines that would otherwise inherit the
   adaptive --tg-text). All .tg-app-scoped so the web /checkout/ page (no
   .tg-app ancestor) is provably untouched. */
.tg-app .checkout-step__heading,
.tg-app .tg-cart__title,
.tg-app .checkout-summary,
.tg-app .checkout-summary p,
.tg-app .checkout-summary li {
  color: var(--ink);
}

/* ADAPTIVE surface — the step indicator. .checkout-progress sits directly on
   .tg-app's --tg-bg, but its child pill states (.checkout-progress__btn /
   __num, styles.css:1358-1423) carry static brand tokens (--muted, --ink)
   designed for the cream web page — on TG dark --tg-bg (black) they go
   near-invisible. Re-route the pill TEXT to the adaptive --tg-text family.
   COLOR ONLY — spacing/gap/padding untouched (D-03: step-indicator layout is
   a separate task). */
.tg-app .tg-checkout .checkout-progress__btn {
  color: var(--tg-text-muted);
  border-color: var(--tg-text-muted);
}
.tg-app .tg-checkout .checkout-progress__item[data-state="active"] .checkout-progress__btn,
.tg-app .tg-checkout .checkout-progress__item[data-state="done"] .checkout-progress__btn {
  color: var(--tg-text);
  border-color: var(--tg-text);
}
.tg-app .tg-checkout .checkout-progress__item[data-state="active"] .checkout-progress__num {
  background: var(--tg-text);
  color: var(--tg-bg);
  border-color: var(--tg-text);
}

/* BUG FIX (tg-checkout-headings-theme): programmatic .focus() on
   [data-view-heading] (transitionView in tg-ui.mjs) fires for
   screen-reader announcement on view-switch — NOT in response to user
   keyboard navigation. The existing .checkout-step__heading:focus rule
   uses var(--accent-cta), which TG remaps via button_color — on iOS
   dark theme this becomes TG-native blue, reading as an unintended
   browser default outline. Suppress the visual indicator for
   programmatic focus inside .tg-app. */
.tg-app [data-view-heading]:focus {
  outline: none;
}

/* Defensive `:not([hidden])` gate: previously `.tg-fallback { display: grid }`
   set layout unconditionally + relied on the `[data-view][hidden]` rule
   higher in the file to suppress display when hidden. That works ONLY when
   the CSS file is fresh; clients that cached styles.css before d6dee78
   (max-age=7d without cache-bust) kept serving the old version where this
   rule forced display:grid regardless of [hidden]. Gating the entire layout
   block behind `:not([hidden])` makes the rule respect [hidden] semantics
   on its own, independent of the upper override rule. */
.tg-fallback:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #1E1D1D;           /* static brand-ink */
  color: #F5F3ED;                /* static brand-milk */
  display: grid;
  place-items: center;
  padding: 24px;
  height: var(--vh, 100vh);
}

.tg-fallback__banner {
  max-width: 360px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tg-fallback__heading {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.tg-fallback__body {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(245, 243, 237, .8);
}

/* Discrete diagnostic inside fallback — collapsed by default. Operator
   expands and taps copy when reporting iOS/Mac WebView SDK injection issues. */
.tg-fallback__diag {
  margin-top: 24px;
  text-align: left;
  width: 100%;
  max-width: 360px;
  color: rgba(245, 243, 237, .6);
  font-size: .75rem;
}

.tg-fallback__diag summary {
  cursor: pointer;
  padding: 8px;
  user-select: none;
}

.tg-fallback__diag-pre {
  background: rgba(0, 0, 0, .4);
  color: #0f0;
  padding: 12px;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 40vh;
  overflow: auto;
  margin: 8px 0;
}

/* End Phase 8 .tg-* BEM additions. */