/* =============================================================
   MATCHA BY CONCEPT SPOT — style.css
   -------------------------------------------------------------
   Colour comes from the Concept Spot interior (Pantone), not from
   the café website. Four colours, plus tints derived from them:
     Kombu Green #3A4132 · Sceptre Red #840016
     4625 C #4F2E22 · Mother of Pearl #E9D4C3
   Type is still the Concept Spot trio:
     Barlow Condensed (display) · Oswald (numerals) · Montserrat (UI)

   Order:  1 tokens  2 base  3 type  4 layout  5 header  6 buttons
           7 hero  8 marquee  9 story  10 grade  11 products
           12 features  13 ritual  14 recipes  15 wholesale/forms
           16 faq  17 newsletter  18 instagram  19 contact
           20 footer  21 cart  22 toast  23 motion  24 print
   ============================================================= */

/* ---------- 1. Tokens ------------------------------------- */
/* ------------------------------------------------------------
   CONCEPT SPOT INTERIOR PALETTE (Pantone)

     Kombu Green      19-0417 TCX   #3A4132
     Sceptre Red      20-0076 TPM   #840016
     PANTONE 4625 C                 #4F2E22   - TODO: confirm
     Mother of Pearl  12-1006 TCX   #E9D4C3

   Every value below is one of those four or a tint derived from
   one of them. No fifth hue is introduced anywhere in this file.
   - */
:root{
  /* the four, by name */
  --pearl:#E9D4C3;
  --kombu:#3A4132;
  --brown:#4F2E22;          /* - 4625 C — verify against the book */
  --red:#840016;

  /* tints derived from them (no new hues) */
  --pearl-band:#DFC7B3;
  --pearl-card:#F3E6DB;
  --pearl-input:#FAF2EB;
  --kombu-light:#4B5442;
  --kombu-deep:#242A1E;
  --brown-light:#653B2B;

  /* semantic names used by the rest of the file */
  --cream:var(--pearl); --cream-2:var(--pearl-band); --cream-3:var(--pearl-card);
  --olive:var(--kombu); --olive-2:var(--kombu-light); --olive-deep:var(--kombu-deep);
  --ink:var(--kombu-deep);
  /* Warm greys mixed from 4625 C + Mother of Pearl. --muted is set at
     the darkest of the two so secondary text clears 4.5:1 on BOTH the
     page (#E9D4C3) and the card surface (#F3E6DB). A lighter value
     failed at 2.9:1 / 3.4:1. */
  --muted:#675549;
  --faint:#54453B;

  --accent:var(--red);
  --accent-bright:#A3001C;  /* derived: Sceptre Red, lifted for hover */
  --accent-dim:rgba(132,0,22,.30);

  --line:rgba(36,42,30,.15);
  --line-light:rgba(233,212,195,.16);

  /* action ramp — built from Kombu Green, not a separate green */
  --matcha-50:#EDEFE8;  --matcha-100:#DCE0D4; --matcha-200:#C3CAB8;
  --matcha-300:#9AA48D; --matcha-400:#6E7A61; --matcha-500:#4B5442;
  --matcha-600:#3A4132; --matcha-700:#2F3529; --matcha-800:#242A1E;
  --matcha-900:#1A1F15;

  --disp:'Barlow Condensed','Oswald',Impact,sans-serif;
  --num:'Oswald',sans-serif;
  --ui:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --header-h:4rem;

  /* One spacing scale. Sections and grids read from these only. */
  --gap:1.25rem;
  --section-y:clamp(4rem,13vw,8.5rem);
  --section-y-sm:clamp(3rem,9vw,6rem);
  --card-pad:1.5rem;   /* one value drives card padding AND badge offset */
}
@media (min-width:768px){ :root{ --header-h:5rem; --gap:1.5rem; --card-pad:1.75rem; } }

/* Sceptre Red is a DARK colour: it reads beautifully on Mother of Pearl
   (7.4:1) and not at all on Kombu-deep (1.4:1). So on dark surfaces the
   accent role is played by the pearl band instead — still one of the
   four, 9.2:1, and distinct from the pure-pearl body text beside it.
   Scoping the variable means no rule below needs to know about this. */
.site-footer, .section-dark{
  --accent:var(--pearl-band);
  --accent-bright:var(--pearl);
  --accent-dim:rgba(233,212,195,.28);
}

/* ---------- 2. Base --------------------------------------- */
*{ -webkit-tap-highlight-color:transparent; }
html{ scroll-padding-top:calc(var(--header-h) + 1rem); -webkit-text-size-adjust:100%; }

body{
  font-family:var(--ui);
  background:var(--cream); color:var(--olive);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; }

img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }

::selection{ background:var(--matcha-200); color:var(--ink); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--cream-2); }
::-webkit-scrollbar-thumb{ background:var(--olive); }
::-webkit-scrollbar-thumb:hover{ background:var(--matcha-600); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; top:.75rem; left:.75rem; z-index:100;
  transform:translateY(-200%); transition:transform .25s var(--ease);
  background:var(--ink); color:var(--cream); padding:.75rem 1.25rem;
  font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
}
.skip-link:focus{ transform:translateY(0); }

.focus-ring:focus-visible,
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

/* ---------- 3. Type --------------------------------------- */
.h2{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.5rem,10vw,5.25rem); line-height:.85;
  letter-spacing:-.005em; color:var(--ink); text-wrap:balance;
}
.h2 em{ font-style:normal; color:var(--matcha-600); }
.h3{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.375rem,3.2vw,1.875rem); line-height:.98; color:var(--ink);
}
.lead{ font-size:clamp(1rem,2.4vw,1.125rem); line-height:1.72; color:var(--olive); max-width:52ch; }
.body{ font-size:.9375rem; line-height:1.85; color:var(--olive); max-width:56ch; }

.eyebrow{
  display:flex; align-items:baseline;
  font-size:.6875rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.26em; color:var(--accent);
}
.eyebrow-light{
  font-size:.625rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.26em; color:var(--accent);
}
.section-no{
  font-family:var(--num); font-weight:400; font-size:.75rem;
  letter-spacing:.16em; color:var(--accent); margin-right:.85rem;
  opacity:.8;
}

/* ---------- 4. Layout ------------------------------------- */
.section{ padding-block:var(--section-y); }
.section-sm{ padding-block:var(--section-y-sm); }
/* hairline between adjacent tonal bands */
.section-edge{ border-block:1px solid var(--line); }
.section-dark{ background:var(--olive); color:var(--cream); }
.section-dark .h2{ color:var(--cream); }
.section-dark .h3{ color:var(--cream); }
.section-dark .lead{ color:rgba(233,212,195,.66); }

.table-wrap{ overflow-x:auto; border:1px solid var(--line); background:var(--cream-3); -webkit-overflow-scrolling:touch; }

/* ---------- 5. Header ------------------------------------- */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:50;
  transition:transform .45s var(--ease), background-color .45s, border-color .45s;
  border-bottom:1px solid transparent;
}
.site-header a,.site-header button{ color:var(--cream); }
.site-header .cart-badge{ background:var(--accent); color:var(--cream); }

.site-header.is-stuck{
  background:rgba(233,212,195,.92);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom-color:var(--line);
}
.site-header.is-stuck a,.site-header.is-stuck button{ color:var(--ink); }
.site-header.is-stuck .brandmark-sub{ color:var(--muted); }
.site-header.is-stuck .cart-badge{ background:var(--matcha-600); color:var(--cream); }
.site-header.is-hidden{ transform:translateY(-105%); }

.brandmark{ display:flex; flex-direction:column; justify-content:center; line-height:1; min-height:2.75rem; }
.brandmark-main{
  font-family:var(--disp); font-weight:900; text-transform:uppercase;
  font-size:1.5rem; letter-spacing:.02em;
}
.brandmark-sub{
  font-size:.5rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.24em; margin-top:.2rem; color:rgba(233,212,195,.7);
  transition:color .45s;
}
@media (min-width:768px){
  .brandmark-main{ font-size:1.75rem; }
  .brandmark-sub{ font-size:.5625rem; letter-spacing:.28em; }
}

.nav-link{
  position:relative; display:inline-flex; align-items:center; min-height:2.75rem;
  font-size:.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; opacity:.82;
  transition:opacity .25s var(--ease);
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:.5rem; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav-link:hover{ opacity:1; }
.nav-link:hover::after{ transform:scaleX(1); transform-origin:left; }

.cart-btn{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  height:2.75rem; padding-inline:1rem; border:1px solid currentColor;
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  transition:background-color .3s,border-color .3s,color .3s;
}
.cart-btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--cream)!important; }

.cart-badge{
  position:absolute; top:-8px; right:-8px; min-width:19px; height:19px;
  border-radius:999px; font-family:var(--num); font-size:10px;
  display:grid; place-items:center; padding-inline:5px;
  animation:pop .3s var(--ease);
}

.burger-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; border:1px solid currentColor;
}
.burger{ display:block; width:18px; }
.burger i{ display:block; height:1.5px; background:currentColor; transition:transform .35s var(--ease); }
.burger i+i{ margin-top:5px; }
[aria-expanded="true"] .burger i:first-child{ transform:translateY(3.25px) rotate(45deg); }
[aria-expanded="true"] .burger i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.mobile-menu{
  background:rgba(233,212,195,.98);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  animation:menuIn .35s var(--ease);
  max-height:calc(100dvh - var(--header-h)); overflow-y:auto;
}
.mobile-link{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:1.75rem; line-height:1; color:var(--ink)!important;
  padding-block:1rem; border-bottom:1px solid var(--line);
}
.mobile-link:last-child{ border-bottom:0; }
.mobile-link span{ font-family:var(--num); font-size:.6875rem; color:var(--accent); }
@keyframes menuIn{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:none;} }

/* ---------- 6. Buttons ------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:3.25rem; padding:.9rem 1.9rem;
  font-size:.75rem; font-weight:600; line-height:1;
  text-transform:uppercase; letter-spacing:.14em; text-align:center;
  transition:transform .25s var(--ease), background-color .3s, color .3s, border-color .3s, opacity .3s;
}
.btn:active{ transform:scale(.98); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn.is-busy{ opacity:.6; pointer-events:none; }
.btn-sm{ min-height:2.875rem; padding:.75rem 1.35rem; font-size:.6875rem; }

.btn-primary{ background:var(--matcha-600); color:var(--cream); }
.btn-primary:hover{ background:var(--ink); }
.btn-dark{ background:var(--ink); color:var(--cream); }
.btn-dark:hover{ background:var(--matcha-600); }
.btn-accent{ background:var(--accent); color:var(--cream); }
.btn-accent:hover{ background:var(--accent-bright); }
.btn-ghost-light{ border:1px solid rgba(233,212,195,.45); color:var(--cream); }
.btn-ghost-light:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.6875rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; color:var(--matcha-600); min-height:2.75rem;
}
.link-arrow::after{ content:'→'; transition:transform .35s var(--ease); }
.link-arrow:hover::after{ transform:translateX(6px); }
.section-dark .link-arrow{ color:var(--accent); }

/* ---------- 7. Hero --------------------------------------- */
.hero{
  position:relative; display:flex; align-items:flex-end;
  min-height:100svh; overflow:hidden; background:var(--olive-deep);
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation:kenburns 26s var(--ease) forwards;
}
@keyframes kenburns{ from{ transform:scale(1.1);} to{ transform:scale(1);} }

.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(36,42,30,.88) 0%,rgba(36,42,30,.45) 42%,rgba(36,42,30,.34) 100%);
}
.hero-inner{ position:relative; padding-block:8rem 3.5rem; }
@media (min-width:768px){ .hero-inner{ padding-block:9rem 5rem; } }

.hero-title{
  margin-top:1.5rem;
  font-family:var(--disp); font-weight:900; text-transform:uppercase;
  font-size:clamp(3rem,15vw,8.5rem); line-height:.84; letter-spacing:-.012em;
  color:var(--cream);
  /* Optical alignment: heavy condensed caps carry ~.015em of left side
     bearing, so the box edge sits right of the body text below it.
     Measured at 136px: T=2px, W=1px, E=3px of ink inset. */
  margin-left:-.015em;
}
.hero-title em{ font-style:normal; color:var(--accent); }

.hero-sub{
  margin-top:1.75rem; max-width:34ch;
  font-size:clamp(.9375rem,3.4vw,1.125rem); line-height:1.65;
  color:rgba(233,212,195,.82);
}

.hero-cta{ margin-top:2.25rem; display:flex; flex-direction:column; gap:.75rem; }
.hero-cta .btn{ width:100%; }
@media (min-width:480px){
  .hero-cta{ flex-direction:row; gap:.875rem; }
  .hero-cta .btn{ width:auto; }
}

.hero-stats{
  margin-top:3rem; padding-top:1.5rem;
  border-top:1px solid rgba(233,212,195,.2);
  display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; max-width:34rem;
}
.hero-stats dt{
  font-size:.5rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.22em; color:rgba(233,212,195,.5);
}
.hero-stats dd{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(.875rem,3vw,1.125rem); line-height:1.1;
  margin-top:.5rem; color:var(--cream);
}

.hero-scroll{
  display:none; position:absolute; bottom:2rem; right:2rem;
  align-items:center; gap:.75rem;
  font-size:.625rem; font-weight:600; text-transform:uppercase; letter-spacing:.26em;
  color:rgba(233,212,195,.55); transition:color .3s;
}
.hero-scroll:hover{ color:var(--cream); }
@media (min-width:1024px){ .hero-scroll{ display:flex; } }
.scroll-line{ display:block; width:44px; height:1px; background:currentColor; position:relative; overflow:hidden; }
.scroll-line::after{
  content:''; position:absolute; inset:0; background:var(--accent);
  animation:scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{ transform:translateX(-100%);} 60%,100%{ transform:translateX(100%);} }

/* ---------- 8. Marquee ------------------------------------ */
.marquee-band{ border-bottom:1px solid var(--line); background:var(--cream-2); overflow:hidden; }
.marquee{ display:flex; gap:2.5rem; width:max-content; padding-block:1rem; animation:marquee 38s linear infinite; }
.marquee:hover{ animation-play-state:paused; }
.marquee-track{
  display:flex; gap:2.5rem; align-items:center;
  font-size:.625rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.22em; color:var(--olive); white-space:nowrap;
}
.marquee-track li[aria-hidden]{ color:var(--accent); }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(calc(-50% - 1.25rem));} }

/* ---------- 9. Story -------------------------------------- */
.story-grid{ display:grid; gap:2.5rem; }
@media (min-width:1024px){
  .story-grid{ grid-template-columns:5fr 6fr; gap:5rem; align-items:start; }
  .story-head{ position:sticky; top:calc(var(--header-h) + 3rem); }
}
.story-body .body strong{ color:var(--ink); font-weight:600; }

.pull-quote{
  margin-top:2.75rem; padding:1.75rem 0 0; border-top:1px solid var(--accent-dim);
}
.pull-quote blockquote{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.25rem,4.5vw,1.75rem); line-height:1.12; color:var(--ink);
  text-wrap:balance;
}
.pull-quote figcaption{
  margin-top:.9rem; font-size:.625rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.2em; color:var(--accent);
}

/* ---------- 10. Grade scale ------------------------------- */
.panel{ background:var(--cream-3); border:1px solid var(--line); }

.grade-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:.4rem; }
@media (min-width:640px){ .grade-grid{ grid-template-columns:repeat(10,1fr); gap:.4rem; } }

.grade{
  min-height:2.875rem; border:1px solid var(--line); background:transparent;
  font-family:var(--num); font-size:.8125rem; color:var(--muted);
  transition:background-color .3s var(--ease), border-color .3s, color .3s;
}
.grade:hover{ border-color:var(--accent); color:var(--ink); }
.grade.is-selected{ background:var(--matcha-600); border-color:var(--matcha-600); color:var(--cream); }

.grade-note{
  margin-top:1.5rem; min-height:3.25rem;
  font-size:.875rem; line-height:1.75; color:var(--muted);
}
.grade-note strong{ color:var(--matcha-700); font-weight:600; }

.cmp{ width:100%; border-collapse:collapse; font-size:.875rem; min-width:34rem; }
.cmp thead th{
  font-size:.5625rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em;
  color:var(--muted); padding:1rem; text-align:left; background:var(--cream-2);
}
.cmp thead th:last-child{ color:var(--matcha-700); }
.cmp tbody tr{ border-top:1px solid var(--line); }
.cmp th[scope=row]{ font-weight:400; color:var(--muted); padding:1rem; text-align:left; white-space:nowrap; }
.cmp td{ padding:1rem; }
.cmp td:last-child{ color:var(--matcha-700); font-weight:500; }

/* ---------- 11. Products ---------------------------------- */
.shop-kicker{
  font-size:.625rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.26em; color:var(--accent);
}

.product-grid{ display:grid; gap:var(--gap); }
@media (min-width:640px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
/* 1280, not 1024: Tailwind's container is capped at 1024px until the
   xl breakpoint, so a 3-column grid below 1280 leaves only ~18px between
   the price and the "250g сагсанд" button. Three columns start where the
   container actually widens. */
@media (min-width:1280px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }

/* Three cards in two columns leaves the third stranded on the left.
   Centre it on its own row at the same width as its siblings. */
@media (min-width:640px) and (max-width:1279px){
  .product-card:last-child{
    grid-column:1 / -1; justify-self:center;
    width:calc(50% - var(--gap) / 2);
  }
}

.product-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--cream-3); border:1px solid var(--line);
  transition:transform .5s var(--ease), border-color .35s;
}
@media (hover:hover){
  .product-card:hover{ transform:translateY(-6px); border-color:var(--accent); }
  .product-card:hover .product-media img{ transform:scale(1.045); }
}
.product-card.is-featured{ border-color:var(--matcha-300); }
.product-card.is-soldout{ opacity:.55; }

.product-media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--cream-2); }
.product-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }

/* Badge sits on the same optical line as the product name below it. */
.product-badge{
  position:absolute; top:var(--card-pad); left:var(--card-pad); z-index:1;
  font-size:.5625rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em;
  background:var(--cream); padding:.45rem .75rem; color:var(--olive);
}
.product-badge.is-accent{ background:var(--accent); color:var(--cream); }

.product-body{ display:flex; flex-direction:column; flex:1; padding:var(--card-pad); }

.product-kicker{
  font-size:.5625rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; color:var(--accent); margin-bottom:.7rem;
}
.product-name{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:1.5rem; line-height:.95; color:var(--ink);
}
/* flex:1 keeps every card's price row on the same line even if one
   description wraps to two lines at a narrower width. */
.product-desc{ margin-top:.85rem; font-size:.8125rem; line-height:1.85; color:var(--muted); flex:1; }

.product-meta{
  margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:.4rem; flex:1; align-content:flex-start;
}
.product-meta li{
  font-size:.5625rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  color:var(--olive); border:1px solid var(--line); padding:.35rem .6rem;
}

/* Scarcity line — only rendered when stock is genuinely low. */
.product-stock{
  margin-top:.85rem; font-family:var(--num); font-size:.75rem;
  letter-spacing:.08em; color:var(--accent);
}
.product-card.is-soldout .product-stock{ color:var(--muted); }

.product-foot{
  margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.product-price{ font-family:var(--num); font-size:1.5rem; color:var(--ink); }
.currency{ font-size:.7em; margin-left:.1em; color:var(--accent); }

.assurance{
  display:flex; flex-wrap:wrap; gap:.5rem 2rem;
  font-size:.625rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; color:var(--muted);
}
.assurance li{ display:flex; align-items:center; gap:.6rem; }
.assurance li::before{ content:'◆'; color:var(--accent); font-size:.5rem; }

/* ---------- 12. Features ---------------------------------- */
.feature-grid{
  display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
}
@media (min-width:640px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .feature-grid{ grid-template-columns:repeat(3,1fr); } }

.feature{ background:var(--cream-2); padding:2rem 1.5rem; transition:background-color .4s var(--ease); }
@media (min-width:768px){ .feature{ padding:2.25rem 2rem; } }
.feature:hover{ background:var(--cream-3); }
.feature-icon{
  display:grid; place-items:center; width:2.75rem; height:2.75rem;
  border:1px solid var(--accent-dim); color:var(--matcha-600); margin-bottom:1.4rem;
  transition:border-color .3s,color .3s;
}
.feature-icon svg{ width:1.375rem; height:1.375rem; }
.feature:hover .feature-icon{ border-color:var(--accent); color:var(--accent); }
.feature-title{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:1.1875rem; line-height:1.02; color:var(--ink);
}
.feature-text{ margin-top:.75rem; font-size:.8125rem; line-height:1.85; color:var(--muted); }

/* ---------- 13. Ritual ------------------------------------ */
.step-grid{ display:grid; gap:2.75rem; }
@media (min-width:768px){ .step-grid{ grid-template-columns:repeat(3,1fr); gap:2.5rem; } }

.step-art{ color:var(--accent); width:100%; max-width:120px; opacity:.85; }
.step-num{ display:block; margin-top:1.5rem; font-family:var(--num); font-size:.75rem; letter-spacing:.24em; color:var(--accent); }
.step-title{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:1.625rem; line-height:.98; margin-top:.6rem; color:var(--cream);
}
.step-text{ margin-top:.9rem; font-size:.875rem; line-height:1.85; color:rgba(233,212,195,.62); max-width:36ch; }
.step-text strong{ color:var(--accent); font-weight:600; }

.serving{ border:1px solid var(--line-light); padding:1.75rem 1.5rem; }
@media (min-width:768px){ .serving{ padding:2.5rem; } }
.serving-text{ font-size:.875rem; line-height:1.85; color:rgba(233,212,195,.7); max-width:56ch; }

.tab{
  min-height:2.75rem; padding-inline:1.15rem;
  font-size:.625rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  border:1px solid var(--line-light); color:rgba(233,212,195,.7);
  transition:background-color .3s,border-color .3s,color .3s;
}
.tab:hover{ border-color:var(--accent); color:var(--cream); }
.tab.is-active{ background:var(--accent); color:var(--cream); border-color:var(--accent); }
.tab-panel{ animation:fadeUp .45s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* ---------- 14. Recipes ----------------------------------- */
.recipe-grid{ display:grid; gap:var(--gap); }
@media (min-width:640px){ .recipe-grid{ grid-template-columns:repeat(3,1fr); } }

.recipe-card{
  position:relative; border:1px solid var(--line); background:var(--cream-3);
  padding:1.75rem 1.5rem 3.25rem; transition:border-color .35s;
}
.recipe-card:hover{ border-color:var(--accent); }
.recipe-tag{
  font-size:.5625rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; color:var(--accent);
}
.recipe-title{
  margin-top:.85rem; font-family:var(--disp); font-weight:700;
  text-transform:uppercase; font-size:1.375rem; line-height:1; color:var(--ink);
}
.recipe-text{ margin-top:.7rem; font-size:.8125rem; line-height:1.8; color:var(--muted); }
.recipe-soon{
  position:absolute; left:1.5rem; bottom:1.5rem;
  font-size:.5625rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; color:var(--muted); border-bottom:1px solid var(--accent-dim);
  padding-bottom:.25rem;
}

/* ---------- 15. Wholesale & forms ------------------------- */
.wholesale-grid{ display:grid; gap:3rem; }
@media (min-width:1024px){ .wholesale-grid{ grid-template-columns:1fr 1fr; gap:5rem; align-items:center; } }

.wholesale-points{ display:grid; gap:.9rem; }
.wholesale-points li{
  display:flex; gap:.85rem; align-items:baseline;
  font-size:.875rem; color:var(--olive);
}
.wholesale-points li::before{ content:'◆'; color:var(--accent); font-size:.5rem; }

.wholesale-form{ background:var(--cream-3); border:1px solid var(--line); padding:1.75rem 1.5rem; }
@media (min-width:768px){ .wholesale-form{ padding:2.5rem; } }

/* Volume tiers — no login, price follows quantity. */
.tiers-block{ margin-top:2.5rem; }
.tiers-title{
  font-size:.5625rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.22em; color:var(--accent); margin-bottom:1rem;
}
.tiers{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:520px){ .tiers{ grid-template-columns:repeat(3,1fr); } }

.tier{ background:var(--cream-3); padding:1.25rem 1rem; }
.tier-range{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:1.125rem; line-height:1; color:var(--ink);
}
.tier-figure{
  margin-top:.6rem; font-family:var(--num); font-size:1.5rem;
  line-height:1; color:var(--matcha-600);
}
.tier-sub{ margin-top:.35rem; font-family:var(--num); font-size:.75rem; color:var(--muted); }
.tier-note{ margin-top:.6rem; font-size:.6875rem; line-height:1.5; color:var(--muted); }
/* Until real numbers are configured the tiers show volume bands only. */
.tiers.is-bands-only .tier-range{ font-size:1rem; }
.tiers-foot{ margin-top:.9rem; font-size:.6875rem; line-height:1.6; color:var(--muted); }

/* Loyalty ladder — cumulative volume, no account. */
.loyalty{ margin-top:2.5rem; }

.ladder{ display:flex; gap:3px; align-items:flex-end; margin-bottom:2.25rem; }
.rung{
  flex:1; position:relative; background:var(--pearl-band);
  /* each rung is taller than the last: a ladder you can read at a glance */
  height:calc(0.75rem + var(--i) * 0.22rem);
  transition:background-color .3s var(--ease);
}
.rung.is-marked{ background:var(--kombu); }
.rung.is-marked:last-child{ background:var(--accent); }
.rung-kg,.rung-pct{
  position:absolute; left:0; white-space:nowrap;
  font-size:.5625rem; font-weight:600; letter-spacing:.1em;
}
.rung-kg{ bottom:calc(100% + .45rem); color:var(--muted); }
.rung-pct{ top:calc(100% + .4rem); font-family:var(--num); color:var(--accent); letter-spacing:.06em; }
.rung:last-child .rung-kg,.rung:last-child .rung-pct{ left:auto; right:0; }

.calc{ border-top:1px solid var(--line); padding-top:1.5rem; }
.calc label{
  display:block; font-size:.5625rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; color:var(--muted); margin-bottom:.6rem;
}
.calc-row{ display:flex; align-items:center; gap:.6rem; max-width:11rem; }
.calc-row input{
  flex:1; min-height:2.875rem; padding:.6rem .85rem; text-align:right;
  background:var(--pearl-input); border:1px solid var(--line); color:var(--ink);
  font-family:var(--num); font-size:1.125rem;
}
.calc-row input:focus{ border-color:var(--kombu); }
.calc-unit{ font-family:var(--num); font-size:.875rem; color:var(--muted); }

.calc-out{ margin-top:1rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem; min-height:2rem; }
.calc-hint{ font-size:.75rem; color:var(--muted); }
.calc-level{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:1.375rem; line-height:1; color:var(--ink);
}
.calc-pct{ font-family:var(--num); font-size:1.375rem; line-height:1; color:var(--accent); }
.calc-next{ font-size:.6875rem; color:var(--muted); }

/* No opacity here: 70% of --muted blends to 3.1:1 on the form surface. */
.field-opt{ text-transform:none; letter-spacing:0; }

.wholesale-note{
  margin-top:2.5rem; padding-top:1.75rem; border-top:1px solid var(--accent-dim);
  font-size:.875rem; line-height:1.85; color:var(--muted); max-width:52ch;
}
.wholesale-note-title{
  font-size:.5625rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.22em; color:var(--accent); margin-bottom:.75rem;
}

/* Inner pages sit below the fixed header instead of under it. */
.page-offset{ padding-top:var(--header-h); }

.form-title{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:1.5rem; line-height:1; color:var(--ink); margin-bottom:1.5rem;
}
.field{ margin-bottom:1.1rem; }
.field label{
  display:block; font-size:.5625rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; color:var(--muted); margin-bottom:.5rem;
}
.field input,.field select{
  width:100%; min-height:3rem; padding:.75rem 1rem;
  background:var(--cream); border:1px solid var(--line); color:var(--ink);
  font-size:.9375rem; transition:border-color .25s;
}
.field input:focus,.field select:focus{ border-color:var(--matcha-500); outline-offset:1px; }
.field input:user-invalid{ border-color:#B4342A; }

.field-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status{ margin-top:.9rem; font-size:.75rem; color:var(--matcha-700); min-height:1.1rem; }
.form-status.is-error{ color:#B4342A; }
.form-note{ margin-top:1rem; font-size:.75rem; color:var(--muted); }
.form-note a{ color:var(--matcha-700); text-decoration:underline; text-underline-offset:3px; }

/* ---------- 16. FAQ --------------------------------------- */
.faq-grid{ display:grid; gap:2.5rem; }
@media (min-width:1024px){ .faq-grid{ grid-template-columns:4fr 7fr; gap:5rem; align-items:start; } }

.faq-list{ border-top:1px solid var(--line); }
.faq{ border-bottom:1px solid var(--line); }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:1.35rem; cursor:pointer; list-style:none; min-height:3.25rem;
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:1.0625rem; line-height:1.15; color:var(--ink); transition:color .25s;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q:hover{ color:var(--matcha-600); }
.faq-mark{ position:relative; flex:none; width:14px; height:14px; color:var(--accent); }
.faq-mark::before,.faq-mark::after{
  content:''; position:absolute; inset:50% 0 auto 0; height:1.5px;
  background:currentColor; transition:transform .35s var(--ease);
}
.faq-mark::after{ transform:rotate(90deg); }
.faq[open] .faq-mark::after{ transform:rotate(0); }
.faq[open] .faq-q{ color:var(--matcha-600); }
.faq-a{ padding-bottom:1.5rem; font-size:.875rem; line-height:1.9; color:var(--muted); max-width:62ch; }
.faq-a a{ color:var(--matcha-700); text-decoration:underline; text-underline-offset:3px; }
.faq[open] .faq-a{ animation:fadeUp .4s var(--ease); }

/* ---------- 17. Newsletter -------------------------------- */
.news-grid{ display:grid; gap:2.5rem; }
@media (min-width:1024px){ .news-grid{ grid-template-columns:1fr 1fr; gap:5rem; align-items:center; } }

.news-row{ display:flex; flex-direction:column; gap:.75rem; }
@media (min-width:480px){ .news-row{ flex-direction:row; } }
.news-input{
  flex:1; min-height:3.25rem; padding:.9rem 1.1rem;
  background:transparent; border:1px solid var(--line-light); color:var(--cream);
  font-size:.9375rem; transition:border-color .25s;
}
.news-input::placeholder{ color:rgba(233,212,195,.35); }
.news-input:focus{ border-color:var(--accent); }
.news-form .btn{ flex:none; }

/* ---------- 18. Instagram --------------------------------- */
.ig-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
@media (min-width:640px){ .ig-grid{ grid-template-columns:repeat(3,1fr); gap:.75rem; } }
@media (min-width:1024px){ .ig-grid{ grid-template-columns:repeat(6,1fr); } }

.ig-tile{ overflow:hidden; aspect-ratio:1/1; background:var(--cream-3); }
.ig-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), opacity .3s; }
@media (hover:hover){ .ig-tile:hover img{ transform:scale(1.06); opacity:.88; } }

/* ---------- 19. Contact ----------------------------------- */
.contact-grid{ display:grid; gap:3rem; }
@media (min-width:1024px){ .contact-grid{ grid-template-columns:5fr 7fr; gap:5rem; align-items:start; } }

.hours{ display:grid; gap:.85rem; }
.hours > div{ display:flex; gap:1.5rem; align-items:baseline; }
.hours dt{
  width:6.5rem; flex:none; font-size:.5625rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.2em; color:var(--accent);
}
.hours dd{ font-family:var(--num); font-size:1.0625rem; color:var(--ink); }

.contact-cards{
  display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
}
@media (min-width:640px){ .contact-cards{ grid-template-columns:repeat(2,1fr); } }

.contact-card{
  display:flex; flex-direction:column; gap:.55rem;
  background:var(--cream); padding:1.5rem; min-height:7.5rem;
  transition:background-color .35s var(--ease);
}
@media (min-width:768px){ .contact-card{ padding:1.85rem; } }
.contact-card:hover{ background:var(--cream-3); }
.contact-label{ font-size:.5625rem; font-weight:600; text-transform:uppercase; letter-spacing:.22em; color:var(--accent); }
.contact-value{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:1.125rem; line-height:1.05; color:var(--ink); overflow-wrap:anywhere;
}
.contact-note{ font-size:.6875rem; line-height:1.6; color:var(--muted); margin-top:auto; }

/* ---------- 20. Footer ------------------------------------ */
.site-footer{ background:var(--ink); color:var(--cream); }
.footer-top{ display:flex; flex-direction:column; gap:3rem; }
@media (min-width:768px){ .footer-top{ flex-direction:row; justify-content:space-between; align-items:flex-start; gap:4rem; } }

.footer-info{ display:grid; gap:1.5rem; }
@media (min-width:640px){ .footer-info{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem 3rem; } }
.footer-info dt{
  font-size:.5625rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.22em; color:var(--accent); margin-bottom:.45rem;
}
.footer-info dd{ font-size:.8125rem; line-height:1.65; color:rgba(233,212,195,.72); }
.footer-info a{
  display:inline-flex; align-items:center; min-height:2.75rem;
  transition:color .25s;
}
.footer-info a:hover{ color:var(--accent); }

.footer-mark{
  font-family:var(--disp); font-weight:900; text-transform:uppercase;
  font-size:3.25rem; line-height:.85; color:var(--cream);
}
.footer-mark-sub{
  font-size:.625rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.28em; color:var(--accent); margin-top:.5rem;
}
.footer-trust{
  margin-top:1.25rem; font-size:.75rem; line-height:1.6;
  color:rgba(233,212,195,.55); max-width:22ch;
}
.footer-nav{ display:flex; flex-wrap:wrap; gap:.85rem 1.75rem; }
.footer-link{
  font-size:.6875rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; color:rgba(233,212,195,.6); transition:color .25s;
  min-height:2.75rem; display:inline-flex; align-items:center;
}
.footer-link:hover{ color:var(--accent); }

/* Restock notify row */
.restock{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line-light); max-width:30rem; }
.restock-label{
  display:block; font-size:.5625rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.22em; color:var(--accent); margin-bottom:.9rem;
}
.restock-row{ display:flex; flex-direction:column; gap:.6rem; }
@media (min-width:480px){ .restock-row{ flex-direction:row; } }
.restock-input{
  flex:1; min-height:2.875rem; padding:.75rem 1rem;
  background:transparent; border:1px solid var(--line-light); color:var(--cream);
  font-size:.875rem; transition:border-color .25s;
}
.restock-input::placeholder{ color:rgba(233,212,195,.32); }
.restock-input:focus{ border-color:var(--accent); }
.restock .btn{ flex:none; }
.form-status-light{ color:var(--accent); }

.footer-bottom{
  margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid var(--line-light);
  display:flex; flex-direction:column; gap:.6rem;
  font-size:.5625rem; text-transform:uppercase; letter-spacing:.18em; color:rgba(233,212,195,.4);
}
@media (min-width:640px){ .footer-bottom{ flex-direction:row; justify-content:space-between; } }

/* ---------- 21. Cart drawer ------------------------------- */
.cart-backdrop{
  position:fixed; inset:0; z-index:60; background:rgba(36,42,30,.55);
  backdrop-filter:blur(3px); opacity:0; transition:opacity .4s var(--ease);
}
.cart-backdrop.is-open{ opacity:1; }

.cart{
  position:fixed; top:0; right:0; z-index:70;
  width:min(26.25rem,100%); height:100dvh;
  display:flex; flex-direction:column; background:var(--cream);
  border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .45s var(--ease);
}
.cart.is-open{ transform:none; }

.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 1.5rem; border-bottom:1px solid var(--line);
}
.cart-title{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:1.375rem; color:var(--ink); }
.cart-close{
  width:2.75rem; height:2.75rem; display:grid; place-items:center;
  border:1px solid var(--line); transition:border-color .25s;
}
.cart-close:hover{ border-color:var(--ink); }

.cart-items{ flex:1; overflow-y:auto; padding-inline:1.5rem; }
.cart-foot{ border-top:1px solid var(--line); padding:1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom)); display:grid; gap:1rem; }
.cart-note{ font-size:.6875rem; line-height:1.7; color:var(--muted); }

.cart-line{ display:flex; gap:1rem; padding-block:1.25rem; border-bottom:1px solid var(--line); }
.cart-line img{ width:64px; height:64px; object-fit:cover; background:var(--cream-2); flex:none; }
.cart-line-name{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:1rem; line-height:1; color:var(--ink); }
.cart-line-price{ font-size:.6875rem; color:var(--muted); margin-top:.35rem; }
.cart-line-sum{ font-family:var(--num); font-size:.9375rem; white-space:nowrap; color:var(--ink); }

.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); }
.qty button{ width:2.25rem; height:2.25rem; display:grid; place-items:center; font-size:.9375rem; color:var(--muted); transition:background-color .2s,color .2s; }
.qty button:hover{ background:var(--matcha-600); color:var(--cream); }
.qty span{ min-width:2rem; text-align:center; font-family:var(--num); font-size:.8125rem; }

.cart-remove{
  font-size:.5625rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); text-decoration:underline; text-underline-offset:3px; padding-block:.5rem;
}
.cart-remove:hover{ color:#B4342A; }

.cart-empty{ padding-block:4rem; text-align:center; color:var(--muted); font-size:.875rem; display:grid; justify-items:center; }
.cart-total-label{ font-size:.5625rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); }
.cart-total{ font-family:var(--num); font-size:1.75rem; color:var(--ink); }

/* ---------- 22. Toast ------------------------------------- */
.toast{
  position:fixed; left:50%; bottom:1.25rem; z-index:80;
  transform:translate(-50%,150%); opacity:0; pointer-events:none;
  background:var(--ink); color:var(--cream);
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  padding:.95rem 1.4rem; text-align:center;
  transition:transform .45s var(--ease), opacity .3s;
  max-width:calc(100vw - 2rem);
}
.toast.is-visible{ transform:translate(-50%,0); opacity:1; }

/* ---------- 23. Motion ------------------------------------ */
.hero-el{
  opacity:0; transform:translateY(20px);
  animation:heroIn .9s var(--ease) forwards; animation-delay:var(--d,0ms);
}
@keyframes heroIn{ to{ opacity:1; transform:none;} }

.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.is-visible{ opacity:1; transform:none; }

@keyframes pop{ 0%{ transform:scale(0);} 70%{ transform:scale(1.25);} 100%{ transform:scale(1);} }

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

/* ---------- 24. Print ------------------------------------- */
@media print{
  .site-header,.cart,.cart-backdrop,.toast,#instagram,#newsletter,.hero-scroll{ display:none !important; }
  body{ color:#000; background:#fff; }
  .section,.section-sm{ padding-block:1.5rem; }
}


/* Сагсны захиалагчийн талбар — 2026-07-28 (серверт захиалга бүртгэх) */
.cart-form{ display:grid; gap:.5rem; margin:.875rem 0 .25rem; }
.cart-field{ display:grid; gap:.25rem; }
.cart-field>span{ font-size:.5625rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); }
.cart-field input{ width:100%; min-height:44px; padding:.5rem .75rem; font:inherit; font-size:.875rem;
  color:inherit; background:transparent; border:1px solid var(--rule, rgba(0,0,0,.18)); border-radius:0; }
.cart-field input:focus{ outline:2px solid currentColor; outline-offset:1px; }
.cart-err{ font-size:.6875rem; line-height:1.6; color:#b3261e; }