/* ==========================================================================
   NUUDELCHIN AGRO FARM — premium single-page site
   Palette: forest green / warm cream / charcoal / metallic gold
   Type: Cormorant Garamond (serif display) + Fira Sans (body) — Latin + Cyrillic (incl. Mongolian ө/ү)
   ========================================================================== */

:root{
  --green:       #1a5e2a;
  --green-deep:  #0a2e16;
  --cream:       #fbf6ed;
  --cream-dark:  #f2e8d6;
  --charcoal:    #2c2c2c;
  --gold:        #d4a54a;
  --gold-soft:   #e8c882;
  /* Text-safe gold: --gold itself is ~2.1:1 on cream/white (fails WCAG AA
     even at the large-text 3:1 threshold) and --gold-soft is ~1.5:1 there —
     both were designed for gold-on-dark use. This darker value is ~5:1 on
     cream, for gold text that sits on light backgrounds (timeline year
     numbers, the About badge number). */
  --gold-text:   #86641f;
  --ink-soft:    rgba(44,44,44,.72);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Fira Sans", -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(.22,1,.36,1);       /* long deceleration */
  --radius: 8px;
  --gutter: clamp(1.25rem, 5vw, 6rem);
  /* Shop pages (/shop, categories, items, checkout): as wide as the header's
     content on a laptop, capped on very wide screens. */
  --shop-max: 1440px;
  /* Only surfaces that float over the page (the cart drawer) carry a
     shadow; resting cards separate from the background by tone alone. */
  --shadow-overlay: 0 2px 6px rgba(44,44,44,.05), 0 26px 52px -24px rgba(44,44,44,.32);
}

*{ margin:0; padding:0; box-sizing:border-box; }
/* Smooth anchor scrolling where supported; older Android browsers that ignore
   this simply jump — acceptable fallback, and the FAB uses JS scrollTo anyway */
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  color:var(--charcoal);
  background:var(--cream);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.1; }
/* Two-line headlines need a touch more leading so the serif's long
   descenders (g, p, y) never collide with the line below. The second line
   (<em>) is set apart by colour only, never italic. */
h2{ font-size:clamp(2.6rem, 5.6vw, 4.7rem); letter-spacing:-.022em; line-height:1.14; }
h1 em, h2 em{ font-style:normal; color:var(--green); }
section{ position:relative; }

/* Reduced motion: kill transforms/animations, keep content visible */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

/* High contrast: reinforce boundaries so stacked surfaces separate clearly. */
@media (prefers-contrast: more){
  .svc, .tl__card, .mv, .news__card, .news__post, .prod, .contact__list li{ border:1px solid rgba(44,44,44,.4); }
  .farm{ border:1px solid rgba(251,246,237,.55); }
}

/* Focus-visible: a charcoal ring + cream halo, not just the browser default.
   This page has no single background tone — dark green, charcoal, cream and
   white sections all sit side by side — so one flat outline color would
   disappear against at least half of them. The two rings together mean one
   of the two always has strong contrast, wherever the focused element is. */
:focus-visible{
  outline:3px solid var(--charcoal);
  outline-offset:2px;
  box-shadow:0 0 0 5px rgba(251,246,237,.85);
}
/* <main> receives focus from the skip link only; no ring around the page. */
main:focus{ outline:none; box-shadow:none; }

/* Skip link: off-screen until a keyboard user tabs to it. */
/* Text for screen readers only (e.g. "opens in a new window"). */
.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; left:1rem; top:-4rem; z-index:2000;
  padding:.7rem 1.1rem; border-radius:var(--radius);
  background:var(--green); color:var(--cream); font-weight:600; text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{ top:1rem; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; gap:2rem;
  padding:1.1rem var(--gutter);
  transition:box-shadow .45s, padding .45s;
  color:var(--cream);
}
/* The solid background lives on a ::before so it can fade in when the nav
   turns solid on scroll. Never put backdrop-filter/transform/filter on .nav
   itself: that makes it the containing block for the fixed full-screen
   mobile menu (.nav__links) nested inside it, collapsing the menu. */
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  opacity:0; transition:opacity .45s var(--ease-out);
  background:var(--cream);
}
/* JS adds .nav--solid after 60px of scroll: cream panel, charcoal text */
.nav--solid{
  box-shadow:0 1px 0 rgba(44,44,44,.08), 0 12px 32px -24px rgba(44,44,44,.25);
  color:var(--charcoal);
  padding-top:.7rem; padding-bottom:.7rem;
}
.nav--solid::before{ opacity:1; }
.nav__brand{ display:flex; align-items:center; margin-right:auto; }
/* Logo mark alone now carries the full brand identity — sized up a bit
   since there's no accompanying wordmark text, and object-fit:contain
   guarantees the whole icon shows (never cropped). */
.nav__mark{ width:160px; height:80px; }
.nav__mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.nav__links{ display:flex; gap:1.8rem; font-size:.92rem; font-weight:500; }
.nav__links a{ position:relative; padding:.2rem 0; }
/* Underline grows from left on hover */
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s var(--ease-out);
}
.nav__links a:hover::after, .nav__links a.is-active::after{ transform:scaleX(1); }
.nav__burger{ display:none; }

/* Buttons — instant press feedback (respond on pointer-down, not on release). */
.btn{
  display:inline-block; padding:.85rem 1.9rem; border-radius:var(--radius);
  font-weight:600; font-size:.95rem; letter-spacing:.02em;
  /* font-family/border/cursor are reset explicitly because .btn is used on
     both <a> and <button>. Form controls don't inherit the body font and
     carry a UA "outset" border, so on a <button> the same class rendered in
     Arial inside a 3D box — visibly a different component from the identical
     <a class="btn"> on the homepage. (.btn--ghost and .nav__cta re-declare
     their own border below and still win, being later in the file.) */
  font-family:inherit; border:0; cursor:pointer;
  transition:background .3s, color .3s, border-color .3s;
}
.btn:active{ transform:translateY(1px) scale(.96); transition:transform .08s ease-out; }
.btn--gold{
  /* Charcoal text, not white: white on gold measures ~2.3:1 (fails WCAG
     AA's 4.5:1); charcoal gets ~6:1. */
  background:var(--gold); color:var(--charcoal);
}
.btn--gold:hover{ background:var(--gold-soft); }
.btn--ghost{ border:1.5px solid rgba(251,246,237,.55); color:var(--cream); }
.btn--ghost:hover{ background:rgba(251,246,237,.12); }
/* Nav CTA is now an outline button (was solid gold). In the first viewport
   the hero's "Our journey" is the single solid-gold primary — two solid-gold
   CTAs (nav + hero) were competing. currentColor keeps this legible in both
   nav states: cream border/text on the dark hero, charcoal once the nav goes
   solid on scroll. */
.nav__cta{
  padding:.6rem 1.4rem; font-size:.85rem;
  border:1.5px solid currentColor; color:inherit; background:transparent;
}
.nav__cta:hover{ border-color:var(--gold); background:rgba(212,165,74,.12); }

/* Cart icon + badge — sits right before the language toggle */
.cart-toggle{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; }
.cart-toggle__badge{
  position:absolute; top:2px; right:0; min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background:var(--gold); color:var(--charcoal);
  font-size:.68rem; font-weight:700; line-height:18px; text-align:center;
}

/* Language toggle — small pill next to the CTA; inherits nav color state */
.lang-toggle{
  min-width:44px; min-height:44px; padding:.4rem .9rem;
  border-radius:var(--radius); border:1.5px solid currentColor;
  background:transparent; color:inherit; cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:.8rem; letter-spacing:.08em;
  transition:background .3s, color .3s;
}
.lang-toggle:hover{ background:var(--gold); border-color:var(--gold); color:var(--charcoal); }
.lang-toggle:active{ transform:scale(.93); transition:transform .1s ease-out; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  min-height:100svh; display:flex; align-items:center;
  color:var(--cream); overflow:hidden;
  background:var(--green-deep);
}
/* The deep green shows through if the photo is missing. */
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:url("/img/hero-cattle-arrival.jpg") center/cover no-repeat var(--green-deep);
}
.hero__veil{
  position:absolute; inset:0; z-index:1;
  /* One neutral shade behind the words only, so the photo itself stays clear */
  background:linear-gradient(90deg, rgba(12,20,15,.8) 0%, rgba(12,20,15,.55) 38%, rgba(12,20,15,.12) 70%);
}
.hero__inner{ position:relative; z-index:2; padding:clamp(7rem, 15vh, 11rem) var(--gutter) 6.5rem; max-width:1200px; }
.hero__kicker{
  font-size:1rem; font-weight:500;
  color:var(--gold-soft); margin-bottom:1.8rem;
}
.hero__title{
  font-size:clamp(3.4rem, 8.6vw, 7.4rem); font-weight:600; letter-spacing:-.022em;
  margin-bottom:1.6rem; line-height:1.08;
}
/* One line of the headline per span */
.hero__title .line{ display:block; }
.gold-ink{ color:var(--gold-soft); }
.hero__slogan{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem, 2.2vw, 1.5rem);
  color:var(--gold-soft); margin-bottom:1rem;
}
.hero__lede{ max-width:37rem; font-weight:300; font-size:1.1rem; line-height:1.75; color:rgba(251,246,237,.85); margin-bottom:2.6rem; }
.hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero__scroll{
  position:absolute; left:50%; bottom:2rem; z-index:2; width:38px; height:38px;
  color:rgba(251,246,237,.75); transform:translateX(-50%);
}

/* ==========================================================================
   STATS BAND
   ========================================================================== */
.stats{ padding:clamp(4rem, 8vw, 6.5rem) var(--gutter); }
.stats__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:2.6rem 2rem; max-width:1200px; margin:0 auto; text-align:center;
}
.stat__num{
  display:block; font-family:var(--serif); font-weight:700;
  font-size:clamp(3rem, 5.2vw, 4.6rem); letter-spacing:-.01em; color:var(--green);
  font-variant-numeric:tabular-nums;
}
.stat__label{ display:block; margin-top:.8rem; font-size:.88rem; color:var(--ink-soft); max-width:15rem; margin-inline:auto; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{ padding:clamp(5.5rem, 11vw, 8.5rem) var(--gutter); }
.about__grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:2.4rem 4.5rem;
  max-width:1240px; margin:0 auto; align-items:stretch;
}
/* The headline spans both columns. Keeping them inside the left
   column made that column much taller than the photo — badly so in Mongolian,
   where the headline runs to three lines — and left a large void beside the
   photo. Spanning the head evens the two columns out in both languages. */
.about__head{ grid-column:1 / -1; }
.about__head h2{ margin-bottom:0; }
.about__text > p{ max-width:36rem; color:var(--ink-soft); margin-bottom:2.2rem; }
.about__mv{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-bottom:2rem; }
.mv{
  background:#fff; border-radius:var(--radius); padding:1.8rem 1.9rem;
}
.mv h3{ font-size:1.35rem; color:var(--green); margin-bottom:.5rem; }
.mv p{ font-size:.9rem; color:var(--ink-soft); }

/* The photo grows to whatever height the text column needs, so the two columns
   always end on the same line. With a fixed 4:5 photo the section is tuned to
   one language only: at 1440px the text column runs 631px in English, 734px in
   Mongolian and 457px in Chinese, so the photo hung 180px below the copy in
   Chinese and 100px above it in Mongolian. It is a background-image with
   center/cover, so the resulting ratio crops rather than distorts. */
.about__media{ position:relative; display:flex; flex-direction:column; }
.about__photo{
  flex:1 1 auto; min-height:20rem;
  border-radius:var(--radius); overflow:hidden;
  background:url("/img/opening-ceremony.jpg") center/cover no-repeat var(--green);
}
.about__media figcaption{ margin-top:.8rem; font-size:.8rem; color:var(--ink-soft); font-style:italic; }
.about__badge{
  position:absolute; left:-1.6rem; bottom:3.2rem;
  background:var(--cream); border-radius:var(--radius); padding:1rem 1.3rem;
  display:flex; align-items:center; gap:.9rem; max-width:15rem;
  font-size:.8rem; line-height:1.35; color:var(--ink-soft);
}
.about__badge-num{ font-family:var(--serif); font-size:2.3rem; font-weight:700; color:var(--gold-text); }

/* ==========================================================================
   JOURNEY — one row, left to right, on a gold line. The row scrolls
   sideways on its own (slider, swipe, trackpad); the page scrolls past it.
   ========================================================================== */
.journey{ background:var(--cream-dark); }
.journey__pin{ padding:clamp(5.5rem, 11vw, 8.5rem) 0 clamp(5rem, 10vw, 7.5rem); overflow:hidden; }
.journey__head{ text-align:center; max-width:calc(960px + 2 * var(--gutter)); margin:0 auto 3.2rem; padding:0 var(--gutter); }
.timeline{
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:thin;
  padding:0 var(--gutter) 1.2rem; scroll-padding-inline:var(--gutter);
}
.timeline__track{ display:flex; width:max-content; }
.tl{ flex:0 0 clamp(260px, 25vw, 340px); display:flex; flex-direction:column; padding-right:1.6rem; scroll-snap-align:start; }
.tl:last-child{ padding-right:0; }
/* The year sits on the line; its bottom border runs on under the gap to the
   next card, so the line is unbroken from 2013 to 2030. */
.tl__year{
  position:relative; display:block; margin:0 -1.6rem 1.4rem 0; padding-bottom:1rem;
  border-bottom:2px solid rgba(212,165,74,.55);
  font-family:var(--serif); font-weight:700; line-height:1;
  font-size:clamp(1.85rem, 3vw, 2.6rem); color:var(--gold-text);
}
.tl:last-child .tl__year{ margin-right:0; }
.tl__year::after{ content:""; position:absolute; left:0; bottom:-7px; width:12px; height:12px; border-radius:50%; background:var(--gold); }
.tl__card{ flex:1; background:#fff; border-radius:var(--radius); padding:1.5rem 1.6rem; }
.tl__card h3{ font-size:1.3rem; color:var(--green); margin-bottom:.4rem; }
.tl__card p{ font-size:.92rem; color:var(--ink-soft); }
.tl__card--major{ border-top:4px solid var(--gold); }
.tl__card--future{ background:var(--green-deep); border:none; }
.tl__card--future h3{ color:var(--gold-soft); }
.tl__card--future p{ color:rgba(251,246,237,.85); }
/* The slider replaces the browser's scrollbar under the row (script.js);
   cards don't snap into place while it is being dragged. */
.journey.has-slider .timeline{ scrollbar-width:none; }
.journey.is-dragging .timeline{ scroll-snap-type:none; }
/* The cards can be grabbed and pulled sideways with the mouse (script.js). */
@media (hover:hover) and (pointer:fine){
  .journey.has-slider .timeline{ cursor:grab; }
  .journey.is-grabbing .timeline{ cursor:grabbing; user-select:none; -webkit-user-select:none; }
}
.journey.has-slider .timeline::-webkit-scrollbar{ display:none; }
.tl-slider{ display:flex; align-items:center; gap:1rem; width:min(560px, calc(100% - 2 * var(--gutter)));
  margin:clamp(1.4rem, 3vh, 2.2rem) auto 0; font-family:var(--serif); font-weight:700; font-size:1.05rem;
  line-height:1; color:var(--gold-text); user-select:none; -webkit-user-select:none; }
.tl-slider[hidden]{ display:none; }
.tl-slider__rail{ position:relative; flex:1; height:28px; cursor:pointer; touch-action:none; }
.tl-slider__rail::before{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px;
  border-radius:2px; background:rgba(212,165,74,.32); }
.tl-slider__thumb{ position:absolute; left:0; top:50%; height:8px; transform:translateY(-50%); border-radius:8px;
  background:var(--gold); box-shadow:0 1px 6px rgba(150,110,30,.28); cursor:grab; transition:box-shadow .2s; }
.tl-slider__rail:hover .tl-slider__thumb, .tl-slider.is-dragging .tl-slider__thumb{
  box-shadow:0 0 0 4px rgba(212,165,74,.22), 0 2px 10px rgba(150,110,30,.35); }
.tl-slider.is-dragging .tl-slider__thumb{ cursor:grabbing; }
@media (max-width:600px){
  .tl{ flex-basis:min(300px, 80vw); }
}

/* ==========================================================================
   FARMS — dark green band
   ========================================================================== */
.farms{
  padding:clamp(5.5rem, 11vw, 8.5rem) var(--gutter);
  background:var(--green);
  color:var(--cream);
}
.farms h2 em{ color:var(--gold-soft); }
/* The four cluster cards run full width across the top; the headline and the
   intro paragraph sit beneath them as a two-column row. (Earlier the copy was
   a left column beside a 2×2 card grid — the cards were cramped and the
   headline column ran much longer than the cards in Mongolian.) */
.farms__layout{ max-width:1240px; margin:0 auto; }
.farms__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.4rem; }
.farms__head{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.6rem, 4vw, 4rem); align-items:center;
  max-width:none; margin:clamp(2.6rem, 5vw, 3.6rem) 0 0;
}
.farms__lede{ color:rgba(251,246,237,.8); }
/* Solid cards one tone darker than the band */
.farm{
  background:rgba(10,46,22,.3);
  border-radius:var(--radius); padding:2.3rem 1.9rem;
}
.farm__count{
  font-family:var(--serif); font-weight:700; font-size:3.6rem; letter-spacing:-.01em;
  color:var(--gold-soft);
  display:block;
}
.farm h3{ font-size:1.45rem; margin:.4rem 0 .5rem; }
.farm__meta{ font-size:.82rem; color:rgba(251,246,237,.72); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services{ padding:clamp(5.5rem, 11vw, 8.5rem) var(--gutter); }
.services__head{ max-width:600px; margin:0 auto 3.5rem; text-align:center; }
/* Explicit 3×2 — six services divide evenly into three columns. The old
   auto-fit landed on 4 columns, orphaning the last two on a second row. */
.services__grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1.4rem; max-width:1140px; margin:0 auto;
}
.svc{
  background:#fff; border-radius:var(--radius); padding:2.3rem;
}
.svc--training{
  background:linear-gradient(105deg, rgba(255,255,255,.94), rgba(255,255,255,.8)) center/cover no-repeat;
}
.svc__icon{
  width:46px; height:46px; color:var(--gold); margin-bottom:1.2rem;
}
.svc h3{ font-size:1.4rem; margin-bottom:.5rem; color:var(--charcoal); }
.svc p{ font-size:.92rem; color:var(--ink-soft); }

/* ==========================================================================
   PRODUCTS — editorial photo cards
   ========================================================================== */
.products{ padding:clamp(5.5rem, 11vw, 8.5rem) var(--gutter); background:var(--cream-dark); }
.products__head{ max-width:600px; margin:0 auto 3.5rem; text-align:center; }
.products__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr));
  gap:1.6rem; max-width:1240px; margin:0 auto;
}
.prod{
  border-radius:var(--radius); overflow:hidden; background:#fff;
}
/* Cards that link somewhere underline their title on hover */
.prod a:hover h3{ text-decoration:underline; text-underline-offset:.18em; }
.prod__media{
  aspect-ratio:16/10; background-size:cover; background-position:center;
}
/* Real photos with a light brand-tinted veil — subtle enough that the
   photography reads clearly (heavy blend modes flattened the images) */
.prod__media--equipment{ background-image:linear-gradient(rgba(44,44,44,.22), rgba(44,44,44,.38)), url("/img/proj-farm.jpg"); background-size:cover; background-position:center; }
.prod__media--milk{ background-image:linear-gradient(rgba(212,165,74,.14), rgba(184,134,47,.26)), url("/img/cow-holstein.jpg"); background-size:cover; background-position:center; }
.prod__media--livestock{ background-image:linear-gradient(rgba(26,94,42,.16), rgba(14,61,26,.34)), url("/img/cows-feeding.jpg"); background-size:cover; background-position:center; }
.prod__body{ padding:1.6rem 1.8rem 1.9rem; }
.prod__body h3{ font-size:1.4rem; color:var(--green); margin-bottom:.4rem; }
.prod__body p{ font-size:.92rem; color:var(--ink-soft); }

/* ==========================================================================
   RECOGNITION — charcoal editorial block
   ========================================================================== */
.recognition{ padding:clamp(5.5rem, 11vw, 9rem) var(--gutter); background:var(--charcoal); color:var(--cream); }
.recognition h2 em{ color:var(--gold-soft); }
.recognition__inner{ max-width:1000px; margin:0 auto; }
/* Full container width: capped at 44rem this paragraph stopped well short
   of the visit photo, the quotes and the partner cards, which all run the
   full 1000px — the ragged right edge read as a mistake. It is a short lead
   paragraph, so the wider measure is comfortable enough. */
.recognition__body{ max-width:none; margin:1.6rem 0 2.6rem; color:rgba(251,246,237,.85); line-height:1.75; }
.quotes{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-bottom:3rem; }
.director-badge{
  display:flex; align-items:center; gap:1.2rem;
  background:rgba(212,165,74,.12);
  border-radius:var(--radius); padding:1.1rem 1.5rem; margin-bottom:2rem; max-width:fit-content;
}
.director-badge__photo{ border-radius:50%; object-fit:cover; border:2px solid var(--gold); }
.director-badge strong{ display:block; color:var(--gold-soft); font-size:.95rem; }
.director-badge span{ font-size:.78rem; color:rgba(251,246,237,.65); }
.quote{
  padding:1.6rem 1.8rem;
  background:rgba(251,246,237,.06); border-radius:var(--radius);
}
.quote p{ font-family:var(--serif); font-style:italic; font-size:1.22rem; line-height:1.5; margin-bottom:.9rem; }
.quote footer{ font-size:.82rem; color:rgba(251,246,237,.65); }
.story{ background:rgba(212,165,74,.1); border-radius:var(--radius); padding:1.8rem 2rem; margin-bottom:3rem; }
.story h3{ color:var(--gold-soft); font-size:1.3rem; margin-bottom:.6rem; }
.story p{ font-size:.94rem; color:rgba(251,246,237,.88); }
.story__src{ margin-top:.7rem; font-size:.75rem !important; color:rgba(251,246,237,.5) !important; letter-spacing:.06em; }
/* Top padding separates "Partners" from the herder testimonial above it, so
   the densest section on the page gets a clear internal break. */
.partners{ margin-top:1rem; padding-top:2.6rem; }
.partners h3{ font-size:1.25rem; color:var(--gold-soft); margin-bottom:1rem; }
/* Centered flex so 5 partners land as a deliberate 3 + 2 (the old auto-fit
   grid left one lonely card on a 4 + 1 second row). */
.partners ul{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.partners li{
  flex:1 1 260px; max-width:320px;
  padding:1rem 1.2rem; background:rgba(251,246,237,.05); border-radius:var(--radius);
  font-size:.85rem;
}
.partners li strong{ display:block; margin-bottom:.2rem; }
.partners li span{ color:rgba(251,246,237,.6); }

/* ==========================================================================
   NEWS — homepage feed section
   ========================================================================== */
.news{
  padding:clamp(5.5rem, 11vw, 8.5rem) var(--gutter);
  background:var(--cream-dark);
}
.news__head{ text-align:center; max-width:600px; margin:0 auto 3.5rem; }
.news__head h2 em{ color:var(--green); }
.news__grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1.6rem; max-width:1140px; margin:0 auto;
}
.news__card{
  background:#fff; border-radius:var(--radius); overflow:hidden;
}
.news__card-img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
}
.news__card-body{ padding:1.4rem 1.6rem 1.8rem; }
.news__date{
  display:inline-block; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; color:var(--gold-text);
  margin-bottom:.4rem;
}
.news__card-title{
  font-size:1.25rem; font-family:var(--serif); font-weight:600;
  color:var(--green); margin-bottom:.5rem; line-height:1.25;
}
.news__card-excerpt{ font-size:.88rem; color:var(--ink-soft); line-height:1.55; }
.news__empty{
  grid-column:1 / -1; text-align:center; color:var(--ink-soft);
  font-family:var(--serif); font-style:italic; font-size:1.15rem;
  display:none; padding:2rem 0;
}
.news__loader{
  grid-column:1 / -1; text-align:center; color:var(--ink-soft);
  padding:2rem 0; font-size:.9rem;
}
.news__footer{ text-align:center; margin-top:2.8rem; }
.news__footer .btn--ghost{
  border-color:var(--green); color:var(--green); display:inline-block;
}
.news__footer .btn--ghost:hover{
  background:var(--green); color:var(--cream);
}

/* ==========================================================================
   NEWS ARCHIVE PAGE
   ========================================================================== */
.news-archive{
  padding:8rem var(--gutter) 5rem;
  background:var(--cream);
  min-height:60vh;
}
.news-archive__head{ text-align:center; max-width:600px; margin:0 auto 3.5rem; padding-top:2rem; }
.news-archive__head h1 em{ color:var(--green); }
.news-archive__head h1{ font-size:clamp(2.4rem, 5.1vw, 4.1rem); font-family:var(--serif); font-weight:600; line-height:1.12; }
.news-archive__list{
  max-width:800px; margin:0 auto;
  display:flex; flex-direction:column; gap:2.5rem;
}
.news-archive__empty{
  text-align:center; color:var(--ink-soft);
  font-family:var(--serif); font-style:italic; font-size:1.15rem;
  display:none; padding:2rem 0;
}
.news__post{
  background:#fff; border-radius:var(--radius); padding:2rem 2.4rem;
}
.news__post-img{
  width:100%; max-height:400px; object-fit:cover; border-radius:var(--radius);
  margin-bottom:1.2rem;
}
.news__post-title{
  font-size:1.8rem; font-family:var(--serif); font-weight:600;
  color:var(--green); line-height:1.2; margin:.6rem 0 1rem;
}
.news__post-body{
  font-size:.98rem; color:var(--charcoal); line-height:1.7;
}

/* Archive responsive */
@media (max-width: 820px){
  .news-archive{ padding-top:6rem; }
  .news__post{ padding:1.4rem 1.5rem; }
  .news__post-title{ font-size:1.45rem; }
}

/* ==========================================================================
   CONTACT + FOOTER
   ========================================================================== */
.contact{ padding:clamp(5.5rem, 11vw, 8.5rem) var(--gutter) 0; }
.contact__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:4rem;
  max-width:1140px; margin:0 auto 5rem;
}
.contact__intro p[lang="mn"]{ margin-top:1.2rem; font-family:var(--serif); font-style:italic; font-size:clamp(1.35rem, 2.7vw, 1.85rem); color:var(--charcoal); }
.contact__list{ list-style:none; display:flex; flex-direction:column; gap:1.1rem; }
.contact__list li{
  display:flex; gap:1.1rem; align-items:center;
  background:#fff; border-radius:var(--radius);
  padding:1.15rem 1.45rem;
}
.contact__list svg{ width:26px; height:26px; color:var(--gold); flex-shrink:0; }
.contact__list span{ display:block; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); }
.contact__list a, .contact__list p{ font-weight:600; font-size:.98rem; }
.contact__list a:hover{ color:var(--green); }
.footer{
  border-top:1px solid rgba(44,44,44,.1); padding:2rem var(--gutter) 5.5rem;
  text-align:center; font-size:.82rem; color:var(--ink-soft);
}

/* ==========================================================================
   FAB — scroll-to-top with bounce-in
   ========================================================================== */
.fab{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:850;
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:var(--green); color:var(--cream);
  box-shadow:0 14px 30px -10px rgba(14,61,26,.6);
  display:grid; place-items:center;
  opacity:0; transform:translateY(20px) scale(.6); pointer-events:none;
  transition:opacity .4s, transform .45s var(--ease-out), background .3s;
}
.fab svg{ width:22px; height:22px; transition:transform .35s var(--ease-out); }
.fab.show{ opacity:1; transform:none; pointer-events:auto; }
.fab:hover{ background:var(--gold); }
.fab:hover svg{ transform:translateY(-3px) rotate(-8deg); }
.fab:active{ transform:scale(.9); transition:transform .12s ease-out; }

/* ==========================================================================
   STICKY MOBILE ACTION BAR
   ========================================================================== */
.mobilebar{
  position:fixed; left:0; right:0; bottom:0; z-index:860;
  display:none; grid-template-columns:1fr 1fr; align-items:center;
  background:var(--cream);
  border-top:1px solid rgba(44,44,44,.1);
  padding:.5rem .7rem calc(.5rem + env(safe-area-inset-bottom));
  gap:.6rem;
}
.mobilebar a{
  text-align:center; padding:.6rem .9rem; border-radius:var(--radius);
  font-weight:600; font-size:.9rem; white-space:nowrap;
  transition:transform .15s var(--ease-out), background .25s;
}
.mobilebar a:active{ transform:scale(.96); }
.mobilebar__call{ border:1.5px solid var(--green); color:var(--green); }
.mobilebar__call:active{ background:rgba(26,94,42,.08); }
.mobilebar__quote{ background:var(--gold); color:var(--charcoal); }
.mobilebar__quote:active{ background:#c99a4e; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
  .about__grid{ grid-template-columns:1fr; gap:3rem; }
  /* Single column: nothing to align to, so the photo goes back to its 4:5 crop. */
  .about__photo{ flex:none; aspect-ratio:4/5; }
  .about__badge{ left:1rem; }
}
@media (max-width: 820px){
  .nav__links{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; align-items:center; justify-content:center; gap:2rem;
    background:var(--cream);
    color:var(--charcoal); font-size:1.4rem;
    /* Same typeface + weight as the desktop nav (--sans, 500) — this used to
       switch to the serif display font here, so mobile and desktop nav
       links looked like two different fonts. */
    font-family:var(--sans); font-weight:500;
    /* Reveals via transform+opacity, not clip-path circle(). A clip-path
       shape-function transition (closed 0% -> open 150% radius) verified
       reliably stuck at the closed value and never animated to open — a
       known fragility of animating basic-shape() properties. transform
       and opacity are the two properties every engine animates correctly,
       so the burger's click handler and aria-state now have a reveal that
       actually renders instead of silently doing nothing. */
    transform-origin: calc(100% - 2.4rem) 2rem;
    transform: scale(0.05);
    opacity: 0;
    pointer-events: none;
    transition: transform .5s var(--ease-out), opacity .3s ease;
  }
  .nav.menu-open .nav__links{ transform: scale(1); opacity: 1; pointer-events: auto; }
  .nav__cta{ display:none; }
  .nav__burger{
    display:flex; flex-direction:column; gap:5px; background:none; border:none;
    cursor:pointer; padding:.4rem; z-index:2;
  }
  .nav__burger span{
    width:26px; height:2px; background:currentColor; border-radius:2px;
    transition:transform .35s var(--ease-out), opacity .25s;
  }
  /* Burger → X */
  .menu-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-open .nav__burger span:nth-child(2){ opacity:0; }
  .menu-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .menu-open{ color:var(--charcoal) !important; }

  .about__mv, .quotes, .contact__grid{ grid-template-columns:1fr; }
  .mobilebar{ display:grid; transform:translateY(120%); transition:transform .35s cubic-bezier(.22,1,.36,1); }
  .mobilebar.mobilebar--show{ transform:translateY(0); }
  /* FAB sits above the sticky action bar (bar height + safe area) */
  .fab{ bottom:calc(5.4rem + env(safe-area-inset-bottom)); }
  .footer{ padding-bottom:calc(7rem + env(safe-area-inset-bottom)); }
  /* ≥16px body copy on phones so iOS Safari never auto-zooms text */
  body{ font-size:16px; }
}

/* ==========================================================================
   MOBILE / TOUCH ENHANCEMENTS
   ========================================================================== */

/* Comfortable tap targets (Apple HIG: 44×44px minimum).
   .nav__cta is excluded: it's unconditional here but a mobile media query
   (above) sets it to display:none, and same-specificity + later-in-file
   was letting this rule win on phones, making the header CTA reappear and
   crowd the burger/lang-toggle. */
.btn:not(.nav__cta), .mobilebar a{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.nav__links a{ min-height:44px; display:inline-flex; align-items:center; }
.contact__list a{ padding:.4rem 0; display:inline-block; }
.hero__scroll{ min-width:44px; min-height:44px; display:grid; place-items:center; }
.nav__burger{ min-width:44px; min-height:44px; align-items:center; justify-content:center; }

/* Forms (none today, but any future input keeps 16px so iOS doesn't zoom) */
input, textarea, select{ font-size:16px !important; }

/* ==========================================================================
   MOBILE POLISH — phone-first sizing (placed last so it wins the cascade)
   ========================================================================== */
@media (max-width: 820px){
  :root{ --gutter:1.25rem; }

  /* Header: tighter gaps so the logo, toggle and burger fit 375px */
  .nav{ gap:.75rem; padding:.75rem 1rem; }
  .nav__mark{ width:100px; height:36px; }
  .lang-toggle{ padding:.3rem .75rem; font-size:.75rem; }

  /* Hero: scale the display type to the viewport instead of desktop minimums */
  .hero__inner{ padding:6.5rem var(--gutter) 5.5rem; }
  .hero__kicker{ font-size:.9rem; }
  /* Words run the full width on phones, so the shade rises from the bottom */
  .hero__veil{ background:linear-gradient(to top, rgba(12,20,15,.86) 0%, rgba(12,20,15,.55) 55%, rgba(12,20,15,.25) 100%); }
  .hero__title{ font-size:clamp(2.6rem, 12vw, 4.1rem); letter-spacing:-.018em; }
  /* Mongolian's longest line («айл бүрийн ширээнд.») needs a touch less on phones to stay on one line */
  html[lang="mn"] .hero__title{ font-size:clamp(2.4rem, 10.5vw, 4.1rem); }
  .hero__slogan{ font-size:1rem; }
  .hero__lede{ font-size:.98rem; line-height:1.65; }

  /* Section headings + vertical rhythm: desktop air reads as empty on phones */
  h2{ font-size:clamp(2.2rem, 8.6vw, 3.2rem); }
  .about, .journey__pin, .farms, .services, .products, .news{ padding-top:4.5rem; padding-bottom:4.5rem; }
  .recognition{ padding-top:4.5rem; padding-bottom:4.5rem; }
  .contact{ padding-top:4.5rem; }
  .journey__head, .services__head, .products__head{ margin-bottom:2.6rem; }
  .farms__head{ margin-bottom:2.4rem; }

  /* Stats: 2-up grid (last stat spans full width) instead of one long column */
  .stats{ padding:3.5rem var(--gutter); }
  .stats__grid{ grid-template-columns:repeat(2, 1fr); gap:1.8rem 1rem; }
  .stat:last-child{ grid-column:1 / -1; }
  .stat__num{ font-size:2.6rem; }
  .stat__label{ font-size:.8rem; }

  /* About: tighter photo block. The badge is absolutely positioned
     over the photo — on narrow screens the 4:5 photo is shorter, so
     we pull the badge higher and give the figcaption extra top margin
     so the caption text never sits underneath it. */
  .about__grid{ gap:2.4rem; }
  .about__badge{ left:.9rem; bottom:3.8rem; padding:.8rem 1rem; max-width:12rem; }
  .about__badge-num{ font-size:1.7rem; }
  .about__media figcaption{ margin-top:1.8rem; }

  .tl__card{ padding:1.3rem 1.4rem; }

  /* Cards: reduce desktop padding so content leads */
  .svc{ padding:1.7rem 1.5rem; }
  .farm{ padding:1.8rem 1.5rem; }
  .farm__count{ font-size:2.7rem; }
  .quote p{ font-size:1rem; }
  .quotes{ gap:1rem; margin-bottom:2.2rem; }
  .story{ padding:1.4rem 1.5rem; }
  /* Hero scroll arrow hides on phones — the sticky action bar covers it */
  .hero__scroll{ display:none; }
  /* Director badge: compact on phones */
  .director-badge{ padding:.9rem 1rem; gap:.9rem; }
  .director-badge__photo{ width:56px; height:56px; }
  .contact__grid{ gap:2.4rem; margin-bottom:3.4rem; }
}

/* Very small phones (≤380px): calmer buttons.
   (Partners now use centered flex — no grid override needed; the cards wrap
   to a single column on their own at this width.) */
@media (max-width: 380px){
  .btn{ padding:.75rem 1.4rem; font-size:.9rem; }
  .hero__actions{ gap:.7rem; }
}

/* ==========================================================================
   NEW LAYOUT RESPONSIVE — farms two-column + services 3-up (placed last)
   ========================================================================== */
@media (max-width: 1024px){
  /* Four cluster cards across is too tight below ~1024 — drop to two rows */
  .farms__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 820px){
  /* Headline and intro stack instead of sitting side by side */
  .farms__head{ grid-template-columns:1fr; gap:1.2rem; }
  /* Services: 3 columns is too tight on tablets — drop to 2 (→ 3 rows of 2) */
  .services__grid{ grid-template-columns:1fr 1fr; }
  .news__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 520px){
  /* ====================================================================
     MOBILE HORIZONTAL SWIPE CARDS
     Farms, Services, and Products cards scroll left→right instead of
     stacking vertically. Each card is ~82% viewport width so the next
     card peeks from the right edge — a natural "swipe me" affordance.
     scroll-snap gives a native-feeling stop at each card.
     ==================================================================== */
  .farms__grid,
  .services__grid,
  .products__grid{
    display:flex; flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:1rem;
    /* Let the first/last card breathe inside the viewport */
    scroll-padding:0 var(--gutter);
    padding:.5rem var(--gutter) 1.75rem;
    /* Kill the desktop grid-template-columns overrides */
    grid-template-columns:none;
  }
  /* Hide scrollbar across all engines */
  .farms__grid::-webkit-scrollbar,
  .services__grid::-webkit-scrollbar,
  .products__grid::-webkit-scrollbar{ display:none; }
  .farms__grid, .services__grid, .products__grid{
    -ms-overflow-style:none; scrollbar-width:none;
  }

  /* Each card snaps into place */
  .farms__grid  > *,
  .services__grid > *,
  .products__grid > *{
    flex:0 0 82%; min-width:0;
    scroll-snap-align:start;
  }

  /* Let the last card snap fully into view */
  .farms__grid  > *:last-child,
  .services__grid > *:last-child,
  .products__grid > *:last-child{
    margin-right:var(--gutter);
  }

  /* News: horizontal swipe on phones */
  .news__grid{
    display:flex; flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:1rem;
    scroll-padding:0 var(--gutter);
    padding:.5rem var(--gutter) 1.75rem;
    grid-template-columns:none;
  }
  .news__grid::-webkit-scrollbar{ display:none; }
  .news__grid{ -ms-overflow-style:none; scrollbar-width:none; }
  .news__grid > *{
    flex:0 0 82%; min-width:0;
    scroll-snap-align:start;
  }
  .news__grid > *:last-child{ margin-right:var(--gutter); }
}

/* ==========================================================================
   SHOP PAGE — product grid + product detail with variant switcher
   ========================================================================== */
.shop{ padding:8rem var(--gutter) 6rem; background:var(--cream); min-height:60vh; }
.shop__head{ text-align:center; max-width:600px; margin:0 auto 3.5rem; padding-top:2rem; }
.shop__head h1{ font-size:clamp(2.4rem, 5.1vw, 4.1rem); font-family:var(--serif); font-weight:600; line-height:1.12; }
.shop__head h1 em{ color:var(--green); }
.shop__empty{
  text-align:center; color:var(--ink-soft);
  font-family:var(--serif); font-style:italic; font-size:1.15rem;
  padding:2rem 0;
}

/* Home: the "Дэлгүүр орох" button under the products grid (index.php). */
.products__cta{ text-align:center; margin-top:2.6rem; }
.eq-card__add.is-added{ background:var(--green-deep); }

/* ---------- /shop: heading, category buttons, sections (shop.php) ---------- */
.shop-page{ padding-top:7.5rem; }
.shop-head{ max-width:var(--shop-max); margin:0 auto 1.4rem; }
.shop-head h1{ font-size:clamp(2.2rem, 4.4vw, 3.2rem); }
.shop-head__lead{ max-width:46rem; margin-top:.6rem; color:var(--ink-soft); line-height:1.7; }
.shop-page [id]{ scroll-margin-top:6.5rem; }

/* Product detail */
.shop-product{ max-width:1240px; margin:0 auto; padding:0 0 6rem; }
.shop-product__back{
  display:inline-block; margin-bottom:1.6rem; font-size:.9rem; font-weight:600;
  color:var(--ink-soft); transition:color .25s;
}
.shop-product__back:hover{ color:var(--green); }
.shop-product__title{ font-family:var(--serif); font-size:clamp(2rem, 4vw, 2.8rem); color:var(--charcoal); margin-bottom:1.6rem; }
.shop-product__switcher-label{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-text); font-weight:600; margin-bottom:.9rem;
}
.shop-product__switcher{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.8rem; }
.variant-pill{
  min-width:44px; min-height:44px; padding:.6rem 1.5rem;
  border-radius:var(--radius); border:1.5px solid var(--green); background:transparent; color:var(--green);
  font-family:var(--sans); font-weight:700; font-size:.92rem; cursor:pointer;
  transition:background .3s, color .3s;
}
.variant-pill:hover{ background:rgba(26,94,42,.08); }
.variant-pill.is-active{ background:var(--gold); border-color:var(--gold); color:var(--charcoal); }

.shop-variant{
  display:grid; grid-template-columns:1fr; gap:2.8rem;
  background:#fff; border-radius:var(--radius); padding:2.5rem;
}
.shop-variant__img{ width:100%; border-radius:var(--radius); max-height:420px; object-fit:cover; }
.shop-variant__name{ font-family:var(--serif); font-size:2.2rem; color:var(--green); margin-bottom:.5rem; }
.shop-variant__price{ font-size:1.5rem; font-weight:700; color:var(--charcoal); margin-bottom:.4rem; }
.shop-variant__weight{ font-size:.9rem; font-weight:400; color:var(--ink-soft); }
.shop-variant__stock{ font-size:.85rem; color:var(--ink-soft); margin-bottom:1.4rem; }
.shop-variant__benefits{ color:var(--ink-soft); font-size:1rem; line-height:1.75; margin-bottom:1.6rem; max-width:52rem; }
.shop-variant__qty{ display:flex; align-items:center; gap:1rem; margin-bottom:.5rem; }
.shop-variant__qty label{ font-weight:600; font-size:.9rem; }
.shop-variant__qty input{ width:70px; padding:.6rem; border-radius:8px; border:1px solid rgba(44,44,44,.2); font-size:1rem; font-family:inherit; }
.shop-variant__section{ margin-top:1.8rem; padding-top:1.6rem; border-top:1px solid rgba(44,44,44,.08); }
.shop-variant__section h3{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-text); font-weight:600; margin-bottom:.7rem;
}
.shop-variant__section p{ color:var(--ink-soft); font-size:.98rem; line-height:1.75; max-width:52rem; }
.ingredient-table__row{ display:flex; justify-content:space-between; padding:.6rem 0; font-size:.92rem; }
.ingredient-table__row + .ingredient-table__row{ border-top:1px solid rgba(212,165,74,.25); }

@media (min-width: 720px){
  /* Only split into image + text columns when there IS an image. Applied
     unconditionally, a variant with no photo put its lone text column in the
     340px image track and left the rest of the card empty. */
  .shop-variant--with-img{ grid-template-columns:340px 1fr; }
}

/* ============ Cart drawer ============ */
.cart-drawer{ position:fixed; inset:0; z-index:1500; pointer-events:none; }
.cart-drawer__backdrop{ position:absolute; inset:0; background:rgba(10,46,22,.35); opacity:0; transition:opacity .35s; }
.cart-drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(420px,90vw);
  background:var(--cream);
  transform:translateX(100%); transition:transform .45s var(--ease-out);
  display:flex; flex-direction:column; padding:1.5rem;
}
.cart-drawer.is-open{ pointer-events:auto; }
.cart-drawer.is-open .cart-drawer__backdrop{ opacity:1; }
/* Shadow only while open: on the closed panel it bled onto the page edge. */
.cart-drawer.is-open .cart-drawer__panel{ transform:translateX(0); box-shadow:var(--shadow-overlay); }
.cart-drawer__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; }
.cart-drawer__head h2{ font-family:var(--sans); font-size:1.15rem; font-weight:700; color:var(--green); }
.cart-drawer__head button{ background:none; border:none; font-size:1.2rem; cursor:pointer; min-width:44px; min-height:44px; }
.cart-drawer__items{ flex:1; overflow-y:auto; }
.cart-drawer__empty{ color:var(--ink-soft); text-align:center; padding:2rem 0; }
.cart-drawer__item{ padding:.9rem 0; border-bottom:1px solid rgba(44,44,44,.08); }
.cart-drawer__item-name{ font-weight:600; margin-bottom:.4rem; }
.cart-drawer__muted{ font-weight:400; color:var(--ink-soft); }
.cart-drawer__line-total{ margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums; }
.cart-drawer__item-row{ display:flex; align-items:center; gap:.8rem; }
.cart-drawer__item--unavailable .cart-drawer__item-name{ color:var(--ink-soft); font-style:italic; font-weight:500; }
.cart-drawer__qty{ width:56px; padding:.3rem; border-radius:6px; border:1px solid rgba(44,44,44,.2); font-family:inherit; }
.cart-drawer__remove{ margin-left:auto; background:none; border:none; color:var(--ink-soft); cursor:pointer; min-width:44px; min-height:44px; }
.cart-drawer__line-total + .cart-drawer__remove{ margin-left:0; }
.cart-drawer .sp__qty button{ width:40px; height:40px; }
.cart-drawer .sp__qty input{ width:2.6rem; height:40px; padding:0; }
.cart-drawer__footer{ padding-top:1rem; border-top:1px solid rgba(44,44,44,.1); }
.cart-drawer__total{ font-weight:700; margin-bottom:1rem; }

/* ============ Checkout page — /shop/checkout (shop-checkout.php, js/checkout.js) ============
   Form on the left, order summary on the right; on phones the summary comes
   first (folded open). Choices are real radio buttons inside labels, so
   keyboard and screen readers work; the radio itself is visually hidden and
   its focus ring is drawn on the card. */
.checkout-page{ padding-top:7.5rem; }
.checkout-page__head{ max-width:1240px; margin:0 auto 2rem; }
.checkout-page__head h1{ font-size:clamp(2rem, 4vw, 3rem); margin-top:.6rem; }
.checkout-page__back{ font-size:.88rem; color:var(--ink-soft); text-decoration:none; }
.checkout-page__back:hover{ color:var(--green); }
.checkout-page__fail{ max-width:1240px; margin:0 auto; color:#b3261e; }

/* The page shows one of three blocks at a time (js/checkout.js show()); the
   display values below would otherwise override the hidden attribute. */
.checkout[hidden], .checkout-pay[hidden], .checkout-empty[hidden]{ display:none; }
.checkout{ max-width:1240px; margin:0 auto; display:grid; gap:1.5rem; grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:900px){ .checkout{ grid-template-columns:minmax(0,1fr) 380px; gap:2.5rem; } }

.checkout__form{ display:flex; flex-direction:column; gap:1.25rem; }
.checkout-step{ border:0; margin:0; padding:1.5rem; background:#fff; border-radius:var(--radius);min-width:0; }
.checkout-step[hidden]{ display:none; }
/* A <legend> normally sits ON the fieldset's top edge; floating it puts it
   inside the card like any heading. */
.checkout-step__title{ float:left; width:100%; display:flex; align-items:center; gap:.7rem; padding:0; margin-bottom:1rem; font-family:var(--serif); font-size:1.45rem; font-weight:600; color:var(--charcoal); }
.checkout-step__title + *{ clear:both; }
.checkout-step__no{ display:inline-grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:50%; background:var(--green); color:#fff; font-family:var(--sans); font-size:.85rem; font-weight:700; flex:none; }

.checkout-choices{ display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.checkout-choice, .checkout-day{ position:relative; display:block; cursor:pointer; }
.checkout-choice input, .checkout-day input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.checkout-choice__body{ display:grid; grid-template-columns:auto 1fr; column-gap:.85rem; row-gap:.15rem; align-items:center; height:100%; padding:1rem 1.1rem; border:1.5px solid rgba(44,44,44,.14); border-radius:var(--radius); background:var(--cream); transition:border-color .2s, background .2s, box-shadow .2s; }
.checkout-choice__icon{ grid-row:span 2; display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:var(--radius); background:#fff; color:var(--green); }
.checkout-choice__icon svg{ width:1.4rem; height:1.4rem; }
.checkout-choice__name{ font-weight:700; font-size:1.02rem; }
.checkout-choice__meta{ font-size:.85rem; color:var(--ink-soft); line-height:1.35; }
@media (hover:hover){ .checkout-choice:hover .checkout-choice__body{ border-color:rgba(26,94,42,.45); } }
.checkout-choice input:checked + .checkout-choice__body{ border-color:var(--green); background:#fff; box-shadow:0 0 0 3px rgba(26,94,42,.12); }
.checkout-choice input:checked + .checkout-choice__body .checkout-choice__icon{ background:var(--green); color:#fff; }
.checkout-choice input:focus-visible + .checkout-choice__body,
.checkout-day input:focus-visible + .checkout-day__body{ outline:2px solid var(--green); outline-offset:3px; }
.checkout-map{ margin-top:.4rem; font-size:.85rem; color:var(--green); }

.checkout-days{ display:grid; gap:.6rem; grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.checkout-day__body{ display:flex; flex-direction:column; gap:.1rem; padding:.85rem 1rem; border:1.5px solid rgba(44,44,44,.14); border-radius:var(--radius); background:var(--cream); transition:border-color .2s, background .2s, box-shadow .2s; }
.checkout-day__word{ font-weight:700; font-size:1.05rem; }
.checkout-day__date{ font-size:.82rem; color:var(--ink-soft); }
@media (hover:hover){ .checkout-day:hover .checkout-day__body{ border-color:rgba(26,94,42,.45); } }
.checkout-day input:checked + .checkout-day__body{ border-color:var(--green); background:#fff; box-shadow:0 0 0 3px rgba(26,94,42,.12); }
.checkout-day input:checked + .checkout-day__body .checkout-day__word{ color:var(--green); }
.checkout-hint{ font-size:.85rem; color:var(--ink-soft); margin-top:.9rem; }
.checkout-hint--center{ text-align:center; margin-top:-.4rem; }

.checkout-field{ display:flex; flex-direction:column; gap:.35rem; }
.checkout-field + .checkout-field{ margin-top:1rem; }
.checkout-field[hidden]{ display:none; }
.checkout-field label{ font-size:.88rem; font-weight:600; }
.checkout-field__opt{ font-weight:400; color:var(--ink-soft); }
.checkout-field__hint{ font-size:.8rem; color:var(--ink-soft); }
.checkout-field input, .checkout-field textarea{ width:100%; padding:.75rem .9rem; border-radius:var(--radius); border:1.5px solid rgba(44,44,44,.16); background:var(--cream); font:inherit; font-size:1rem; color:var(--charcoal); transition:border-color .2s, box-shadow .2s, background .2s; }
.checkout-field textarea{ resize:vertical; min-height:3.2rem; }
.checkout-field input:focus, .checkout-field textarea:focus{ outline:none; border-color:var(--green); background:#fff; box-shadow:0 0 0 3px rgba(26,94,42,.14); }

.checkout-error{ padding:.8rem 1rem; border-radius:var(--radius); background:#fbe8e6; color:#a3231a; font-weight:600; font-size:.92rem; }
.checkout-error[hidden]{ display:none; }
.checkout-field input[aria-invalid="true"], .checkout-field textarea[aria-invalid="true"]{ border-color:#a3231a; }
/* Small text links get a 44px-tall tap area (WCAG 2.5.5). */
.checkout-page__back, .checkout-map, .checkout-summary__edit{ display:inline-flex; align-items:center; min-height:44px; }
.link-copy{ display:inline-flex; align-items:center; min-height:44px; padding:0 .9rem; margin-left:.4rem; border:1.5px solid var(--green); border-radius:var(--radius); background:transparent; color:var(--green); font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; }
.link-copy:hover{ background:var(--green); color:#fff; }
.checkout-submit{ width:100%; padding:1.05rem 1.5rem; font-size:1.02rem; text-align:center; }
.checkout-submit:disabled{ opacity:.6; cursor:default; transform:none; }

.checkout-summary{ position:sticky; top:6.5rem; }
.checkout-summary__box{ background:#fff; border-radius:var(--radius);padding:1.4rem 1.5rem; }
.checkout-summary__toggle{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; list-style:none; font-family:var(--serif); font-size:1.35rem; font-weight:600; }
.checkout-summary__toggle::-webkit-details-marker{ display:none; }
.checkout-summary__mini{ font-family:var(--sans); font-size:.95rem; font-weight:700; color:var(--green); }
.checkout-summary__lines{ list-style:none; margin:1rem 0 0; padding:0; }
.checkout-summary__line{ display:grid; grid-template-columns:1fr auto; column-gap:.8rem; padding:.7rem 0; border-top:1px solid rgba(44,44,44,.08); font-size:.9rem; }
.checkout-summary__name{ grid-column:1; }
.checkout-summary__qty{ grid-column:1; font-size:.8rem; color:var(--ink-soft); }
.checkout-summary__price{ grid-column:2; grid-row:1 / span 2; align-self:center; font-weight:600; font-variant-numeric:tabular-nums; }
.checkout-summary__muted{ color:var(--ink-soft); }
.checkout-summary__warn{ padding:.7rem 0; font-size:.85rem; color:#a3231a; }
.checkout-summary__totals{ margin:.4rem 0 0; padding-top:.8rem; border-top:1px solid rgba(44,44,44,.12); }
.checkout-summary__totals > div{ display:flex; justify-content:space-between; padding:.25rem 0; font-size:.92rem; }
.checkout-summary__totals > div[hidden]{ display:none; }
.checkout-summary__totals dd{ margin:0; font-variant-numeric:tabular-nums; }
.checkout-summary__total{ margin-top:.4rem; padding-top:.6rem !important; border-top:1px solid rgba(44,44,44,.12); font-weight:700; font-size:1.05rem !important; }
.checkout-summary__total dd{ color:var(--green); }
.checkout-summary__edit{ margin-top:.5rem; font-size:.85rem; color:var(--green); }
/* Phones: the summary comes first and can be folded; on wide screens it's a
   fixed side panel that can't be folded. */
@media (max-width:899px){
  .checkout-summary{ position:static; order:-1; }
  .checkout-summary__toggle{ cursor:pointer; }
  .checkout-summary__toggle::after{ content:"▾"; font-family:var(--sans); font-size:.9rem; color:var(--ink-soft); margin-left:.4rem; }
  .checkout-summary__box:not([open]) .checkout-summary__toggle::after{ content:"▸"; }
}
@media (min-width:900px){
  .checkout-summary__toggle{ pointer-events:none; }
  .checkout-summary__mini{ display:none; }
}

.checkout-pay{ max-width:520px; margin:0 auto; background:#fff; border-radius:var(--radius);padding:1rem 1.5rem 1.5rem; }
.checkout-pay__title{ font-size:1.7rem; margin-bottom:.6rem; }
.order-confirmation__plan{ margin:1rem 0; padding:1rem; border-radius:var(--radius); background:var(--cream); text-align:left; font-size:.95rem; }
.order-confirmation__plan p + p{ margin-top:.35rem; }
.order-confirmation__plan a{ color:var(--green); }
.order-confirmation__back{ margin-top:1rem; border:1.5px solid rgba(44,44,44,.18); color:var(--charcoal); }
.checkout-empty{ max-width:520px; margin:0 auto; text-align:center; padding:3rem 1.5rem; background:#fff; border-radius:var(--radius);}
.checkout-empty p{ font-size:1.1rem; margin-bottom:1.2rem; }

/* ============ QR payment + confirmation (checkout page) ============ */
.qr-screen{ text-align:center; padding:1.5rem 0; }
.qr-screen__img{ width:220px; height:220px; margin:0 auto 1.2rem; border-radius:var(--radius); }
.qr-screen__total{ font-size:1.8rem; font-weight:700; color:var(--green); margin-bottom:.8rem; font-variant-numeric:tabular-nums; }
.qr-screen__waiting{ color:var(--ink-soft); }
.qr-screen__link{ font-size:.85rem; color:var(--ink-soft); margin-top:1rem; }
.qr-screen__link a, .order-confirmation__link a, .checkout-help a{ color:var(--green); font-weight:600; }
.checkout-help{ font-size:.85rem; color:var(--ink-soft); margin-top:.6rem; }
.qr-screen__check{ margin-top:1rem; }
.qr-screen__no{ font-size:.85rem; color:var(--ink-soft); margin:-.4rem 0 .4rem; letter-spacing:.02em; }
/* Countdown to the end of the order's 20 minutes; turns red in the last two. */
.qr-screen__timer{ font-size:.9rem; font-weight:600; color:var(--green); margin-bottom:1rem; font-variant-numeric:tabular-nums; }
.qr-screen__timer.is-low{ color:#b3261e; }
.qr-screen.is-expired .qr-screen__waiting{ color:var(--charcoal); margin:1rem 0; }
.qr-screen__again{ margin-top:.4rem; }
.order-confirmation__no{ margin-bottom:.6rem; }
.qr-screen__check:disabled{ opacity:.55; cursor:default; }
/* Bank-app buttons — phones/tablets only (a desktop buyer scans the QR). */
.qr-screen__banks-title,
.qr-screen__banks,
.qr-screen__or{ display:none; }
@media (max-width:768px), (pointer:coarse){
  .qr-screen.has-banks .qr-screen__banks-title{ display:block; font-weight:700; color:var(--green); margin-bottom:.7rem; }
  .qr-screen.has-banks .qr-screen__banks{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.5rem; margin-bottom:1rem; }
  .qr-screen.has-banks .qr-screen__or{ display:block; font-size:.8rem; color:var(--ink-soft); margin-bottom:.8rem; }
  .qr-screen.has-banks .qr-screen__img{ width:160px; height:160px; }
}
.qr-bank{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; min-height:4.6rem; padding:.5rem .2rem; border:1px solid rgba(0,0,0,.08); border-radius:var(--radius); background:#fff; color:var(--charcoal); text-decoration:none; font-size:.8rem; line-height:1.25; }
.qr-bank:active{ background:rgba(0,0,0,.04); }
.qr-bank img{ width:38px; height:38px; border-radius:9px; object-fit:cover; flex:none; }
.qr-bank span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.order-confirmation{ text-align:center; padding:1.5rem 0; }
.order-confirmation__check{ width:56px; height:56px; margin-bottom:1rem; }
.order-confirmation__total{ font-size:1.6rem; font-weight:700; color:var(--green); margin-bottom:.8rem; font-variant-numeric:tabular-nums; }
.order-confirmation__link{ font-size:.85rem; color:var(--ink-soft); margin-top:1rem; }


/* ==========================================================================
   2026 CONTENT UPDATE — photo farm cards, the Ugtaaltsaidam feature block,
   the green-energy band, and the timeline's tag + photo.
   Placed last so these win over the earlier mobile padding overrides.
   ========================================================================== */

/* --- About: the vision headline above the vision sentence.
   ".mv p" is (0,1,1); a bare ".mv__lead" class would lose to it, so the
   lead is qualified with the element + parent to take the cascade. --- */
.mv p.mv__lead{
  font-family:var(--serif); font-style:italic; line-height:1.35;
  font-size:1.12rem; color:var(--green); margin-bottom:.55rem;
}

/* --- Timeline: "before the company" tag --- */
.tl__tag{
  display:inline-block; margin-bottom:.7rem;
  font-size:.8rem; font-weight:600;
  color:var(--gold-text); background:rgba(212,165,74,.14);
  border-radius:var(--radius); padding:.24rem .75rem;
}
/* --- Farm cards lead with a photo, which clips its own top corners. --- */
.farm{ padding:0; }
.farm__photo{
  border-radius:var(--radius) var(--radius) 0 0;
  overflow:hidden; background:rgba(10,46,22,.45); aspect-ratio:16/10;
}
.farm__photo img{ width:100%; height:100%; object-fit:cover; }
.farm__body{ padding:1.35rem 1.45rem 1.6rem; }
.farm__body .farm__count{ font-size:2.6rem; }

/* --- Ugtaaltsaidam: a single integrated complex rather than a ten-household
   cluster, so it sits apart from the four cluster cards as a full-width
   feature. --- */
.ugtaal{
  max-width:1240px; margin:clamp(2.6rem, 5vw, 4.2rem) auto 0;
  display:grid; grid-template-columns:1.1fr .9fr; align-items:stretch;
  gap:clamp(1.4rem, 3.5vw, 2.8rem);
  padding:clamp(1rem, 1.8vw, 1.35rem);
  background:rgba(10,46,22,.3);
  border-radius:var(--radius);
}
/* The text column is the taller of the two, so the render fills its column
   height and crops at the sides rather than sitting centred with dead space
   above and below it. */
.ugtaal__media{ position:relative; border-radius:var(--radius); overflow:hidden; }
.ugtaal__media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* The render is a visualization, not a photograph — the badge says so. */
.ugtaal__media figcaption{
  position:absolute; left:.85rem; bottom:.85rem;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(251,246,237,.92); background:rgba(10,46,22,.58);
  padding:.34rem .8rem; border-radius:var(--radius);
}
.ugtaal__text{
  padding:.4rem clamp(.4rem, 1.6vw, 1.2rem);
  display:flex; flex-direction:column; justify-content:center;
}
.ugtaal__text h3{ font-size:clamp(2rem, 3.4vw, 2.9rem); color:var(--cream); margin:.15rem 0 .85rem; }
.ugtaal__text > p{ font-size:.98rem; color:rgba(251,246,237,.82); }
.ugtaal__facts{ list-style:none; display:flex; flex-wrap:wrap; gap:1.7rem; }
.ugtaal__facts li{ display:flex; flex-direction:column; gap:.2rem; }
.ugtaal__facts b{ font-family:var(--serif); font-weight:700; font-size:1.85rem; line-height:1; color:var(--gold-soft); }
.ugtaal__facts span{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,246,237,.6); }
/* The participant invitation follows the project description in the same
   column, so it is spaced as a sibling paragraph rather than as a new block. */
.ugtaal__text > p + p{ margin-top:1.15rem; }
/* Facts and CTA share one band across the full card width, ruled off from the
   two columns above it. */
.ugtaal__foot{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.2rem 2rem;
  padding:1.5rem clamp(.4rem, 1.6vw, 1.2rem) .3rem;
  border-top:1px solid rgba(251,246,237,.16);
}
.ugtaal__cta{ display:flex; justify-content:flex-end; }

/* --- Green energy: plain cream between the darker timeline band and the
   dark green farms, so it reads as its own surface. --- */
.green{
  padding:clamp(5rem, 10vw, 7.5rem) var(--gutter);
  background:var(--cream);
}
.green__inner{ max-width:1140px; margin:0 auto; }
.green__head{ max-width:660px; margin:0 auto 3.2rem; text-align:center; }
.green__lede{ margin-top:1.3rem; color:var(--ink-soft); }
.green__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem; }
.gcard{
  background:#fff; border-radius:var(--radius); padding:2.1rem 2rem;
}
.gcard__icon{ width:44px; height:44px; color:var(--green); margin-bottom:1.1rem; }
.gcard h3{ font-size:1.3rem; color:var(--charcoal); margin-bottom:.5rem; }
.gcard p{ font-size:.92rem; color:var(--ink-soft); }

/* --- Recognition: the presidential visit photo, sitting between the account
   of the visit and the quotes drawn from it. --- */
.recognition__photo{ margin:0 0 3rem; }
.recognition__photo img{
  width:100%; border-radius:var(--radius);
}
.recognition__photo figcaption{
  margin-top:.85rem; font-size:.82rem; font-style:italic;
  color:rgba(251,246,237,.62);
}

/* --- Stats: the milk tile now carries a range plus a unit ("4–5 M",
   "4–5 сая"). The Mongolian unit is long enough to wrap onto a second line,
   which pushed that tile's label out of line with the other four. --- */
.stat__num{ white-space:nowrap; }

@media (max-width: 900px){
  .ugtaal{ grid-template-columns:1fr; }
  .ugtaal__media img{ height:auto; }
  .ugtaal__text{ padding:0 .5rem .8rem; }
}
@media (max-width: 820px){
  .green{ padding-top:4.5rem; padding-bottom:4.5rem; }
  .green__head{ margin-bottom:2.6rem; }
  .green__grid{ grid-template-columns:1fr 1fr; }
  .farm__body{ padding:1.3rem 1.4rem 1.6rem; }
  .farm__body .farm__count{ font-size:2.5rem; }
  .ugtaal__facts{ gap:1.2rem; }
}
@media (max-width: 640px){
  .green__grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   EQUIPMENT CATALOGUE  (/equipment)
   Server-rendered pages, so these styles describe markup that arrives in the
   HTML rather than markup built by JS. Reuses the existing tokens, .btn
   and .cart-drawer — only what is genuinely new lives here.
   ========================================================================== */

.eq-hero{ padding:9rem var(--gutter) 2.5rem; background:var(--cream); text-align:center; }
.eq-hero h1{ font-family:var(--serif); font-weight:600; line-height:1.12;
  font-size:clamp(2.4rem,5.1vw,4.1rem); color:var(--charcoal); }
.eq-hero h1 em{ color:var(--green); }
.eq-hero__lead{ max-width:46rem; margin:1.4rem auto 0; color:var(--ink-soft); line-height:1.8; }

/* 8rem clears the fixed header — the catalogue index gets less, because
   .eq-hero above it already supplies the clearance. */
.eq-wrap{ background:var(--cream); padding:8rem var(--gutter) 6rem; min-height:60vh; }
.eq-wrap--full{ padding-top:1rem; }
.eq-404{ font-family:var(--serif); font-size:2.2rem; margin:4rem 0 1.5rem; }

/* ---------- breadcrumbs ---------- */
.crumbs{ max-width:var(--shop-max); margin:0 auto 1.8rem; font-size:.85rem; color:var(--ink-soft); }
.crumbs a{ color:var(--ink-soft); text-decoration:none; }
.crumbs a:hover{ color:var(--green); }
.crumbs__sep{ margin:0 .5rem; opacity:.5; }
.crumbs [aria-current]{ color:var(--charcoal); font-weight:600; }

/* ---------- two-column shell ---------- */
.eq-layout{ max-width:var(--shop-max); margin:0 auto; display:grid; gap:2.5rem;
  grid-template-columns:260px minmax(0,1fr); align-items:start; }

.cat-side{ position:sticky; top:96px; }
.cat-side__list, .cat-side__sub{ list-style:none; margin:0; padding:0; }
.cat-side__item > a{ display:block; padding:.75rem .9rem; border-radius:var(--radius);
  text-decoration:none; color:var(--charcoal); font-weight:600; font-size:.95rem;
  transition:background .18s var(--ease-out), color .18s var(--ease-out); }
.cat-side__item > a:hover{ background:rgba(26,94,42,.07); color:var(--green); }
.cat-side__item.is-open > a{ background:var(--green); color:var(--cream); }
.cat-side__sub{ margin:.35rem 0 .9rem; padding-left:.9rem;
  border-left:2px solid rgba(26,94,42,.18); }
.cat-side__sub a{ display:block; padding:.42rem .6rem; font-size:.88rem;
  color:var(--ink-soft); text-decoration:none; border-radius:8px; }
.cat-side__sub a:hover{ color:var(--green); background:rgba(26,94,42,.05); }
.cat-side__sub a.is-current{ color:var(--green); font-weight:600; }

.eq-main__title{ font-family:var(--serif); font-size:clamp(1.9rem,3.6vw,2.7rem);
  color:var(--charcoal); margin-bottom:.35rem; }
.eq-main__count{ color:var(--ink-soft); font-size:.9rem; margin-bottom:2.2rem; }

/* ---------- product grid ---------- */
.eq-grid{ display:grid; gap:1.6rem;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); }
.eq-grid--3{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }

.eq-card{ display:flex; flex-direction:column; background:#fff; border-radius:var(--radius); overflow:hidden; }
/* No lift on hover: a gold outline marks the card under the pointer */
.eq-card:hover{ outline:2px solid var(--gold); outline-offset:-2px; }
.eq-card__link{ display:block; flex:1; text-decoration:none; color:inherit; }
.eq-card__media{ aspect-ratio:4/3; background:var(--cream-dark);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
/* Product photos are shot on white: a white tile, not a white box on beige. */
.eq-card__media:has(img){ background:#fff; }
.eq-card__media img{ width:100%; height:100%; object-fit:contain; padding:.8rem; }
.eq-card__noimg{ width:46%; aspect-ratio:2/1; background:url("/img/naf_logo_full.svg") center/contain no-repeat; opacity:.3; filter:grayscale(.4); }
.eq-card__body{ padding:1.1rem 1.2rem 1.4rem; }
.eq-card__body h3{ font-family:var(--sans); font-size:1rem; font-weight:600; line-height:1.35; margin-bottom:.4rem; }
.eq-card__body p{ font-size:.85rem; color:var(--ink-soft); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* The card's bottom line — the only place a QPay item and an equipment item
   differ: a price + basket button, or "Үнийн санал авах". */
.eq-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  min-height:3.4rem; padding:.7rem 1.2rem .9rem; border-top:1px solid rgba(44,44,44,.07); }
.eq-card__price{ font-weight:700; color:var(--green); font-variant-numeric:tabular-nums; white-space:nowrap; }
.eq-card__price--quote{ font-weight:600; font-size:.85rem; color:var(--gold-text); }
.eq-card__price--out{ color:var(--ink-soft); font-weight:600; }
.eq-card__add, .eq-card__choose{ flex:none; padding:.45rem .85rem; border-radius:var(--radius); font:600 .8rem/1.2 var(--sans);
  cursor:pointer; text-decoration:none; transition:background .2s, color .2s, border-color .2s; }
.eq-card__add{ border:0; background:var(--green); color:#fff; }
.eq-card__add:hover{ background:var(--green-deep); }
.eq-card__choose{ border:1.5px solid rgba(26,94,42,.35); color:var(--green); background:#fff; }
.eq-card__choose:hover{ border-color:var(--green); }
.eq-card__add:focus-visible, .eq-card__choose:focus-visible, .eq-card__link:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
/* Phones: two cards per row, like any shop app — one full-width card per row
   made /shop ten screens long. The bottom line stacks: price, then button. */
@media (max-width:520px){
  .eq-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.75rem; }
  .eq-card__media img{ padding:.5rem; }
  .eq-card__body{ padding:.75rem .8rem .6rem; }
  .eq-card__body h3{ font-size:.9rem; }
  .eq-card__body p{ font-size:.78rem; line-height:1.5; }
  .eq-card__foot{ flex-direction:column; align-items:stretch; gap:.45rem; min-height:0; padding:.6rem .8rem .8rem; }
  .eq-card__price{ font-size:.92rem; }
  .eq-card__price--quote{ font-size:.78rem; }
  .eq-card__add, .eq-card__choose{ text-align:center; padding:.55rem .5rem; }
}

/* ---------- landing sections ---------- */
.eq-section{ max-width:var(--shop-max); margin:0 auto 3.2rem; }
.eq-section__head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.eq-section__head h2{ font-family:var(--serif); font-size:1.75rem; color:var(--charcoal); }
.eq-section__more{ font-size:.88rem; color:var(--green); text-decoration:none; font-weight:600; }
.eq-section__more:hover{ text-decoration:underline; }

/* ---------- detail ---------- */
.eq-detail__top{ display:grid; gap:2.6rem; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  margin-bottom:3.5rem; }
.eq-gallery__main{ width:100%; aspect-ratio:1/1; object-fit:contain;
  background:#fff; border-radius:var(--radius); padding:1.5rem; }
.eq-gallery__empty{ width:100%; aspect-ratio:1/1; border-radius:var(--radius);
  background:var(--cream-dark); }
.eq-gallery__thumbs{ display:flex; gap:.6rem; margin-top:.9rem; flex-wrap:wrap; }
.eq-gallery__thumb{ width:66px; height:66px; padding:4px; border-radius:var(--radius); cursor:pointer;
  background:#fff; border:2px solid transparent; }
.eq-gallery__thumb img{ width:100%; height:100%; object-fit:contain; }
.eq-gallery__thumb.is-active{ border-color:var(--gold); }

.eq-detail__intro h1{ font-family:var(--serif); font-size:clamp(1.8rem,3.4vw,2.5rem);
  color:var(--charcoal); line-height:1.2; }
.eq-detail__sku{ font-size:.82rem; color:var(--ink-soft); letter-spacing:.04em;
  margin:.6rem 0 1.3rem; }
.eq-detail__lead{ color:var(--ink-soft); line-height:1.8; margin-bottom:2rem; }
.eq-detail__actions{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.eq-detail__ask{ color:var(--green); font-weight:600; font-size:.9rem; }
.eq-detail__note{ font-size:.82rem; color:var(--ink-soft); line-height:1.65; margin-top:1.2rem; }

.eq-block{ margin-bottom:3.5rem; }
.eq-block > h2{ font-family:var(--serif); font-size:1.6rem; color:var(--charcoal);
  margin-bottom:1.2rem; }

/* Wide spec tables scroll inside their own box — the page never scrolls sideways. */
.eq-table-wrap{ overflow-x:auto; border-radius:var(--radius); background:#fff; }
.eq-table{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:520px; }
.eq-table th{ background:var(--green); color:var(--cream); text-align:left;
  padding:.85rem 1rem; font-weight:600; white-space:nowrap; }
.eq-table td{ padding:.72rem 1rem; border-top:1px solid rgba(44,44,44,.08); vertical-align:top; }
.eq-table tbody tr:nth-child(even){ background:rgba(26,94,42,.03); }

.eq-features{ list-style:none; padding:0; margin:0; display:grid; gap:.75rem; }
.eq-features li{ position:relative; padding-left:1.6rem; color:var(--ink-soft); line-height:1.7; }
.eq-features li::before{ content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--gold); }

/* ---------- form ---------- */
.eq-inquiry{ background:#fff; border-radius:var(--radius); padding:2.2rem; }
.eq-inquiry__lead{ color:var(--ink-soft); margin-bottom:1.6rem; }
.eq-form__grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.eq-form label{ display:block; font-size:.85rem; font-weight:600; color:var(--charcoal); }
.eq-form label span{ color:#a33; }
.eq-form input, .eq-form textarea{ width:100%; margin-top:.4rem; padding:.7rem .85rem;
  border:1px solid rgba(44,44,44,.2); border-radius:var(--radius); font:inherit; font-size:.95rem;
  font-weight:400; background:var(--cream); }
.eq-form input:focus, .eq-form textarea:focus{ outline:2px solid var(--green); outline-offset:1px; }
.eq-form__msg{ margin-top:1rem; }
.eq-form button{ margin-top:1.4rem; }
.eq-form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.eq-form--drawer{ display:grid; gap:.7rem; }
.eq-form--drawer button{ margin-top:.6rem; width:100%; }

/* ---------- drawer extras (the shell itself is .cart-drawer, already styled) ---------- */
.cart-drawer__sku{ font-size:.78rem; color:var(--ink-soft); letter-spacing:.03em; }
.cart-drawer__empty{ color:var(--ink-soft); text-align:center; padding:2.5rem 1rem; }
/* Equipment quote lines, below any priced lines in the same basket. */
.cart-drawer__item + .cart-drawer__quotes{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid rgba(44,44,44,.14); }
.cart-drawer__group{ font-size:.95rem; font-weight:700; color:var(--charcoal); margin-bottom:.2rem; }
.cart-drawer__quotes .eq-form--drawer{ margin-top:1.2rem; }

/* ---------- flash ---------- */
.eq-flash{ margin:0; padding:1rem var(--gutter); text-align:center; font-weight:600;
  font-size:.92rem; }
.eq-flash.is-ok{ background:var(--green); color:var(--cream); }
.eq-flash.is-err{ background:#8c2f2f; color:#fff; }

@media (max-width:900px){
  /* minmax(0,…), not plain 1fr: a 1fr track grows to its widest child, so
     the spec table pushed every equipment product page wider than a phone
     screen. With a 0 minimum the table scrolls inside .eq-table-wrap. */
  .eq-layout{ grid-template-columns:minmax(0,1fr); gap:2rem; }
  .cat-side{ position:static; }
  .eq-detail__top{ grid-template-columns:minmax(0,1fr); gap:1.8rem; }
  .eq-hero{ padding-top:7rem; }
}

/* ---------- quote half of the shared basket drawer ---------- */
.inq-block{ margin-top:1.6rem; padding-top:1.4rem; border-top:2px solid rgba(26,94,42,.18); }
.inq-block__title{ font-family:var(--serif); font-size:1.15rem; color:var(--green);
  margin-bottom:.2rem; }
.inq-block__note{ font-size:.8rem; color:var(--ink-soft); margin-bottom:1rem; }
.inq-qty{ width:60px; padding:.45rem; border:1px solid rgba(44,44,44,.2); border-radius:8px;
  font:inherit; font-size:.9rem; }
.inq-remove{ background:none; border:0; cursor:pointer; font-size:1rem; color:var(--ink-soft);
  padding:.3rem .5rem; line-height:1; }
.inq-remove:hover{ color:#8c2f2f; }

/* ==========================================================================
   CHINESE (中文)
   Cormorant Garamond and Fira Sans carry no CJK glyphs. Rather than load a CJK
   webfont — megabytes, and fonts.googleapis.com is unreachable from mainland
   China anyway — we append the system Chinese faces to both stacks. Latin and
   Cyrillic keep rendering in the site's own fonts; only Chinese characters
   fall through to the reader's installed face.
   ========================================================================== */
html[lang="zh"]{
  --serif: "Cormorant Garamond", Georgia, "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", SimSun, serif;
  --sans:  "Fira Sans", -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
/* Chinese has no italic form — browsers fake one by slanting the glyphs, which
   reads as a rendering fault. The green/gold colour on <em> carries the accent
   on its own. Matching on :lang(zh) rather than a descendant selector leaves
   the Mongolian slogan (lang="mn") italic on a Chinese page. */
html[lang="zh"] :lang(zh){ font-style:normal; }
/* Negative tracking is tuned for the serif's Latin forms; it crowds CJK. */
html[lang="zh"] h1:lang(zh), html[lang="zh"] h2:lang(zh){ letter-spacing:0; }
/* The contact slogan is marked lang="mn" for its italic serif treatment, but
   its text is swapped like any other translatable element — so on a Chinese
   page :lang(zh) doesn't reach it and the browser would fake an oblique. */
html[lang="zh"] .contact__intro p[lang="mn"]{ font-style:normal; }

/* One line per headline in Chinese. Every CJK glyph is a full em, so a 9–13
   character headline needs far more horizontal room than the English one it
   replaces; the centred section heads are sized for English measure (600–660px)
   and would break the Chinese line at an arbitrary point. Widening them for
   Chinese only keeps every headline on one line at full display size. */
html[lang="zh"] :is(.journey__head, .services__head, .products__head, .green__head){ max-width:56rem; }
html[lang="zh"] .green__lede{ max-width:42rem; margin-left:auto; margin-right:auto; }
/* Two-column heads: the extra room goes to the headline column instead.
   Gated on min-width because both collapse to one column at 820px, and an
   html[lang] selector outweighs the bare class inside that media query —
   without the gate these two stayed two-up on phones in Chinese only. */
@media (min-width: 821px){
  html[lang="zh"] .farms__head{ grid-template-columns:1.2fr .8fr; }
  html[lang="zh"] .contact__grid{ grid-template-columns:1.15fr .85fr; }
}

/* ==========================================================================
   PAGE TRANSITIONS
   Moving between pages cross-fades instead of flashing white. The header has
   its own transition name, so it is carried across as one piece while only
   the content below it fades. Browsers without cross-document view
   transitions (and visitors who ask for reduced motion) simply change pages
   as before.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
  .nav{ view-transition-name:site-header; }
}

/* ============ Shop refresh (2026-10-14) ============
   /shop: one column grid shared by every section, so cards line up from
   section to section. A big category is one row that scrolls sideways (all
   its items, arrows on wide screens); a category with one or two items takes
   only that many columns, so small ones sit side by side instead of leaving
   the rest of the row empty. */
.shop-page{ --cols:5; --gap:1.25rem; }
@media (max-width:1180px){ .shop-page{ --cols:4; } }
@media (max-width:880px){ .shop-page{ --cols:3; } }
@media (max-width:600px){ .shop-page{ --cols:2; --gap:.75rem; } }

/* Category buttons: one row of equal tiles (name + how many items); when the
   row doesn't fit, it scrolls instead of wrapping into an uneven second line. */
.shop-cats{ max-width:var(--shop-max); margin:0 auto 2.6rem; display:grid; gap:.6rem;
  grid-template-columns:repeat(var(--n), minmax(150px, 1fr)); overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x proximity; padding-bottom:2px; }
.shop-cats::-webkit-scrollbar{ display:none; }
/* More categories than fit: arrows beside the heading, and the edge with more fades out. */
.shop-head--rows{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.shop-cats{ scroll-behavior:smooth; }
.shop-cats.is-clipped-end{ -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 56px), transparent);
  mask-image:linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.shop-cats.is-clipped-start{ -webkit-mask-image:linear-gradient(to right, transparent, #000 56px);
  mask-image:linear-gradient(to right, transparent, #000 56px); }
.shop-cats.is-clipped-start.is-clipped-end{
  -webkit-mask-image:linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image:linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
@media (prefers-reduced-motion:reduce){ .shop-cats{ scroll-behavior:auto; } }
.shop-cats a{ display:flex; flex-direction:column; justify-content:center; gap:.2rem; min-height:4.2rem;
  padding:.7rem 1rem; border-radius:var(--radius); border:1.5px solid rgba(44,44,44,.1); background:#fff;
  color:var(--charcoal); text-decoration:none; scroll-snap-align:start; transition:border-color .2s, color .2s; }
.shop-cats strong{ font-size:.9rem; font-weight:600; line-height:1.3; }
.shop-cats span{ font-size:.8rem; color:var(--ink-soft); }
.shop-cats a:hover{ border-color:var(--green); color:var(--green); }
.shop-cats a:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
@media (max-width:600px){
  .shop-cats{ grid-template-columns:repeat(var(--n), 46%); margin-left:calc(-1 * var(--gutter));
    margin-right:calc(-1 * var(--gutter)); padding:0 var(--gutter) 2px; scroll-padding:0 var(--gutter); }
}

.shop-sections{ max-width:var(--shop-max); margin:0 auto; display:grid; column-gap:var(--gap); row-gap:3rem;
  grid-template-columns:repeat(var(--cols), minmax(0, 1fr)); }
.shop-sections .eq-section{ grid-column:1 / -1; margin:0; min-width:0; }
/* A category with fewer items than fit in a row takes only its own columns
   (and its cards are exactly one column wide), so the next small category
   can sit beside it. data-n = how many items it has. */
.shop-sections .eq-section[data-n="1"]{ grid-column:span 1; --rowcols:1; }
.shop-sections .eq-section[data-n="2"]{ grid-column:span 2; --rowcols:2; }
.shop-sections .eq-section[data-n="3"]{ grid-column:span 3; --rowcols:3; }
.shop-sections .eq-section[data-n="4"]{ grid-column:span 4; --rowcols:4; }
@media (max-width:1180px){ .shop-sections .eq-section[data-n="4"]{ grid-column:1 / -1; --rowcols:4; } }
@media (max-width:880px){ .shop-sections .eq-section[data-n="3"], .shop-sections .eq-section[data-n="4"]{ grid-column:1 / -1; --rowcols:var(--cols); } }
.eq-section__head{ align-items:center; margin-bottom:1.1rem; }
.eq-section__title{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; min-width:0; }
.eq-section__head h2{ font-size:1.6rem; line-height:1.2; }
.eq-section__count{ font-size:.85rem; color:var(--ink-soft); white-space:nowrap; }
.eq-section__tools{ display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.eq-row__btn{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  border:1.5px solid rgba(44,44,44,.14); background:#fff; color:var(--charcoal); cursor:pointer;
  transition:border-color .2s, color .2s, opacity .2s; }
.eq-row__btn:hover:not(:disabled){ border-color:var(--green); color:var(--green); }
.eq-row__btn:disabled{ opacity:.35; cursor:default; }
.eq-row__btn:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.eq-row__btn[hidden]{ display:none; }
.eq-row__btn svg{ width:18px; height:18px; }

/* The row: cards exactly one page column wide; the shadow needs a little room. */
.eq-row{ display:grid; gap:var(--gap); grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--rowcols, var(--cols)) - 1) * var(--gap)) / var(--rowcols, var(--cols)));
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:6px 4px 18px; margin:-6px -4px -18px; scroll-padding-inline:4px;
  scrollbar-width:thin; scrollbar-color:rgba(26,94,42,.35) transparent; }
.eq-row > *{ scroll-snap-align:start; }
.eq-row::-webkit-scrollbar{ height:6px; }
.eq-row::-webkit-scrollbar-thumb{ background:rgba(26,94,42,.3); border-radius:3px; }
/* Phones: two cards and a peek of the third, so it's clear the row scrolls. */
@media (max-width:600px){
  .eq-row{ grid-auto-columns:44%; margin-left:calc(-1 * var(--gutter)); margin-right:calc(-1 * var(--gutter));
    padding-left:var(--gutter); padding-right:var(--gutter); scroll-padding:0 var(--gutter); scrollbar-width:none; }
  .eq-row::-webkit-scrollbar{ display:none; }
  .eq-row__btn{ display:none; }
  .shop-sections .eq-section[data-n]{ grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce){ .eq-row{ scroll-behavior:auto; } }

/* Cards: the basket button is a round icon; the quote line is centred. */
.eq-card__foot{ min-height:3.6rem; }
.eq-card--quote .eq-card__foot{ justify-content:center; }
.eq-card__price--quote{ text-align:center; white-space:nowrap; }
.eq-card__add{ position:relative; display:grid; place-items:center; width:42px; height:42px; padding:0;
  border-radius:50%; flex:none; }
.eq-card__add svg{ width:20px; height:20px; grid-area:1 / 1; transition:opacity .2s, transform .2s; }
.eq-card__add .eq-card__done{ opacity:0; transform:scale(.6); }
.eq-card__add.is-added .eq-card__cart{ opacity:0; transform:scale(.6); }
.eq-card__add.is-added .eq-card__done{ opacity:1; transform:none; }
.eq-card__price{ font-size:1.02rem; }
@media (max-width:520px){
  .eq-card__foot{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem; }
  .eq-card__choose{ flex:1 0 100%; }
  .eq-card--quote .eq-card__foot{ justify-content:center; }
  .eq-card__add{ width:38px; height:38px; padding:0; }
  .eq-card__price{ font-size:.92rem; }
}

/* Category page: the item grid uses the wider page; the sidebar keeps to the
   screen height and scrolls on its own, so a long list (21 milking parts)
   never pushes the other categories off the page. */
.eq-layout .eq-grid{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:1.25rem; }
@media (min-width:901px){
  .cat-side{ max-height:calc(100vh - 116px); overflow-y:auto; overscroll-behavior:contain;
    padding-right:.4rem; scrollbar-width:thin; scrollbar-color:rgba(26,94,42,.3) transparent; }
}
.eq-gallery__empty{ display:grid; place-items:center; }
.eq-gallery__empty::before{ content:""; width:42%; aspect-ratio:2/1; background:url("/img/naf_logo_full.svg") center/contain no-repeat;
  opacity:.3; filter:grayscale(.4); }

/* Product page (/shop/<slug>): photo on the left, everything to buy on the right. */
.sp{ display:grid; gap:2.5rem; grid-template-columns:minmax(0, 1fr); align-items:start; }
@media (min-width:820px){ .sp{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:3.5rem; } .sp__media{ position:sticky; top:110px; } }
.sp__photo{ aspect-ratio:1/1; display:grid; place-items:center; background:#fff; border-radius:var(--radius);
overflow:hidden; }
.sp__photo img{ width:100%; height:100%; object-fit:contain; padding:1.5rem; }
.sp__photo[hidden]{ display:none; }
.sp__photo--empty{ background:var(--cream-dark); box-shadow:none; }
.sp__photo--empty::before{ content:""; width:42%; aspect-ratio:2/1; background:url("/img/naf_logo_full.svg") center/contain no-repeat;
  opacity:.32; filter:grayscale(.4); }
.sp__title{ font-family:var(--serif); font-size:clamp(2rem, 3.6vw, 2.8rem); line-height:1.1; color:var(--charcoal); margin-bottom:.8rem; }
.sp__desc{ color:var(--ink-soft); line-height:1.75; max-width:40rem; margin-bottom:1.6rem; }
.sp__label{ font-size:.85rem; font-weight:600; color:var(--charcoal); margin-bottom:.6rem; }
.sp .shop-product__switcher{ margin-bottom:1.6rem; }
.sp__buy{ background:#fff; border-radius:var(--radius);padding:1.4rem 1.5rem; margin-bottom:1.8rem; }
.sp__price{ font-size:1.9rem; font-weight:700; color:var(--green); font-variant-numeric:tabular-nums; }
.sp__price small{ font-size:.95rem; font-weight:500; color:var(--ink-soft); margin-left:.4rem; }
.sp__stock{ font-size:.88rem; color:var(--ink-soft); margin:.2rem 0 1.1rem; }
.sp__stock--out{ color:#a3231a; font-weight:600; }
.sp__row{ display:flex; gap:.75rem; align-items:stretch; flex-wrap:wrap; }
.sp__qty{ display:flex; align-items:center; border:1.5px solid rgba(44,44,44,.16); border-radius:var(--radius); overflow:hidden; background:var(--cream); }
.sp__qty button{ width:44px; height:48px; border:0; background:none; font-size:1.2rem; cursor:pointer; color:var(--charcoal); }
.sp__qty button:hover:not(:disabled){ color:var(--green); }
.sp__qty button:disabled{ opacity:.35; cursor:default; }
.sp__qty input{ width:3rem; height:48px; border:0; background:none; text-align:center; font:600 1rem var(--sans);
  -moz-appearance:textfield; appearance:textfield; }
.sp__qty input::-webkit-outer-spin-button, .sp__qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.sp .shop-add{ flex:1 1 200px; min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; }
.sp .shop-add svg{ width:20px; height:20px; }
.sp__facts{ border-top:1px solid rgba(44,44,44,.1); }
.sp__fact{ padding:1.1rem 0; border-bottom:1px solid rgba(44,44,44,.1); }
.sp__fact h3{ font-family:var(--sans); font-size:.85rem; font-weight:700; color:var(--charcoal); margin-bottom:.4rem; }
.sp__fact p{ color:var(--ink-soft); font-size:.95rem; line-height:1.7; }

/* ==========================================================================
   SHOP ON PHONES AND TABLETS (2026-10)
   On a phone the catalogue's sidebar came first: every category and every
   item of the open one, two screens of links before a single product. The
   rules below put the product first and keep everything reachable:
   - the sidebar becomes one row of category buttons that scrolls sideways
     (the open category's item list goes: the items are right below);
   - item grids are two cards per row;
   - spec tables become one block per model, every value labelled;
   - photos take less height, so the name and the main button show at once;
   - every tap target is at least 44px.
   ========================================================================== */
.eq-section__more{ display:inline-flex; align-items:center; min-height:44px; }
.eq-row__btn{ width:44px; height:44px; }

@media (max-width:900px){
  .cat-side{ margin:0 calc(-1 * var(--gutter)); }
  .cat-side__list{ display:flex; gap:.5rem; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
    padding:0 var(--gutter) 2px; scroll-padding:0 var(--gutter); scroll-snap-type:x proximity; }
  .cat-side__list::-webkit-scrollbar{ display:none; }
  .cat-side__item{ flex:none; scroll-snap-align:start; }
  .cat-side__item > a{ display:flex; align-items:center; min-height:44px; padding:0 1rem; white-space:nowrap;
    background:#fff; border:1.5px solid rgba(44,44,44,.12); font-size:.9rem; }
  .cat-side__item.is-open > a{ border-color:var(--green); }
  .cat-side__sub{ display:none; }
  .eq-layout{ gap:1.4rem; }
  .eq-wrap{ padding-top:6.5rem; }
  .crumbs{ margin-bottom:1rem; }
}

@media (max-width:600px){
  /* Two cards per row. ".eq-layout .eq-grid" above set one auto-fill track of
     at least 200px, which on a phone meant one huge card per row. */
  .eq-layout .eq-grid, .eq-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.75rem; }
  .eq-main__count{ margin-bottom:1.2rem; }

  /* Photos: 4:3 instead of square, so the name and button are on the first screen. */
  .eq-gallery__main, .eq-gallery__empty, .sp__photo{ aspect-ratio:4/3; }
  .eq-gallery__main{ padding:1rem; }
  .eq-gallery__thumb{ width:56px; height:56px; }
  .eq-detail__top{ gap:1.2rem; margin-bottom:2.4rem; }
  .eq-detail__actions{ flex-direction:column; align-items:stretch; gap:.4rem; }
  .eq-detail__actions .btn{ width:100%; justify-content:center; }
  .eq-detail__ask{ display:flex; align-items:center; justify-content:center; min-height:44px; }

  /* Spec table: one block per model. The code heads the block, the name is
     the title, every other value carries its column name (data-label). */
  .eq-table-wrap{ overflow:visible; background:none; }
  .eq-table{ min-width:0; display:block; font-size:.92rem; }
  .eq-table thead{ display:none; }
  .eq-table tbody{ display:grid; gap:.6rem; }
  .eq-table tr{ display:block; padding:.85rem 1rem; background:#fff; border-radius:var(--radius); }
  .eq-table tbody tr:nth-child(even){ background:#fff; }
  .eq-table td{ display:flex; gap:.6rem; justify-content:space-between; padding:.18rem 0; border:0; text-align:right; }
  .eq-table td::before{ content:attr(data-label); color:var(--ink-soft); text-align:left; flex:none; max-width:45%; }
  .eq-table td:first-child{ display:block; padding:0 0 .1rem; font-size:.8rem; color:var(--ink-soft); text-align:left; font-variant-numeric:tabular-nums; }
  .eq-table td:first-child::before{ content:none; }
  .eq-table td:nth-child(2){ display:block; padding:0 0 .35rem; font-weight:600; color:var(--charcoal); text-align:left; }
  .eq-table td:nth-child(2)::before{ content:none; }
  .eq-table td:empty, .eq-table td.is-blank{ display:none; }
  .eq-inquiry{ padding:1.4rem 1.2rem; }
  .eq-form button{ width:100%; }
}

/* Tablets (portrait): photo and details side by side, as on a computer —
   a full-width square photo pushed the button below the first screen. */
@media (min-width:601px) and (max-width:900px){
  .eq-detail__top{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:1.6rem; }
  .sp{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:1.6rem; }
  .sp__media{ position:sticky; top:96px; }
}

/* Checkout on phones: the folded order summary opens with a full-size tap. */
@media (max-width:899px){ .checkout-summary__toggle{ min-height:44px; align-items:center; } }

/* Touch screens: card buttons at full finger size. */
@media (pointer:coarse){
  .eq-card__add{ width:44px; height:44px; }
  .eq-card__choose{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
}