/* ============================================================================
   Panasva — the INNER PAGES' theme sheet.

   Loaded after pv.css by every page except the homepage. It carries the
   Rajwada x Kitchen theme that home-rajwada-kitchen.html works out in its own
   inline <style>, so the rest of the site reads as the same site.

   WHY IT IS A COPY AND NOT AN EXTRACTION. The homepage's inline block is four
   rounds of client feedback deep and every number in it was argued for; lifting
   rules out of it to share them here would mean editing the one page that has
   already been reviewed. The chrome below (the ticker, the cart, the bands, the
   kilim drift, the fact bar, the benefit card, the process arches, the reel,
   the Instagram grid, the phone rails) is therefore copied VERBATIM from it.
   If you change one of those here, change it there too — or the two halves of
   the site drift apart. Everything after "---- pages ----" is new and belongs
   only to the inner pages.

   Palette note, because it is the thing most easily got wrong: THERE IS NO
   SATURATED GREEN FILL ANYWHERE. Dark grounds are the foliage SHADOW colour,
   which is nearly black; where a band should read green it carries an actual
   darkened photograph of the estate (.bgShot). See the long note in the
   homepage's stylesheet for the measurements behind that.
   ========================================================================= */

/* ---- tokens (see the homepage stylesheet for how these were measured) ---- */
:root{
  --display:'Yeseva One',Georgia,serif;
  --num:'Yeseva One',Georgia,serif;

  --for-x:#1B2215;   /* foliage shadow, a shade under the measured #242C1C */
  --for-d:#242C1C;   /* the measured shadow itself */
  --for:#344424;     /* canopy body — rules, hairlines */
  --for-l:#646C4C;   /* sunlit leaf */
  --pod:#B9C39C;     /* eyebrows on a dark ground */
  --pod-l:#D3DBBE;   /* body copy on a dark ground */
  --pist:#B9C39C;    --pist-d:#8A9670;
  --leaf:#3A4A28;    --leaf-d:#242C1C;
}
/* Yeseva ships in one weight — declare 400 wherever the display face is used,
   or the browser synthesises a smeared faux-bold */
h1,h2,h3,h4,.facts b,.pcard .price,.big,.pnum{font-weight:400}
body{background:var(--off);color:var(--ink)}
::selection{background:var(--mus);color:#26170a}
.num,.pcard .price,.pcard .per,.facts b{font-family:var(--num)}

/* ---- bands --------------------------------------------------------------- */
section{position:relative}
.band{padding:64px 0}
.band-off{background:var(--off);color:var(--ink)}
.band-mar{background:var(--maroon);color:#F2E3D0}
.band-dk{background:var(--maroon-x);color:#F2E3D0}
.band-cream{background:#FFF8EC;color:var(--ink)}
.arch{border-radius:999px 999px 4px 4px;overflow:hidden}

/* A dark band's green is a PHOTOGRAPH, never a fill. Base treatment is
   saturate(.50) brightness(.62): saturation is what makes a green shout,
   lightness is what lets the farm be seen, and they move in opposite
   directions. Short strips go darker still or they turn into texture noise. */
.bgShot{position:absolute;left:0;right:0;top:-9%;height:118%;z-index:0;
  pointer-events:none}
.bgShot img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.50) brightness(.62);will-change:transform}
.bgShot::after{content:'';position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(27,34,21,.88) 0%,rgba(27,34,21,.50) 45%,
    rgba(27,34,21,.90) 100%),
  radial-gradient(118% 88% at 50% 46%,rgba(62,2,12,.16),rgba(52,2,10,.52))}

.band-for{position:relative;overflow:hidden;background:var(--for-x);color:#E7EBDD}
.band-for > .wrap{position:relative;z-index:1}
.band-for h2,.band-for h3,.band-for h4{color:#FFF6E9}
.band-for .eyebrow,.band-for .rule{color:var(--pod)}

.facts,.reel,.insta,.phead{position:relative;overflow:hidden}
.facts > .wrap,.reel > .mask,.insta > .wrap,.phead > .wrap{position:relative;z-index:1}
.facts .bgShot img{filter:saturate(.42) brightness(.50)}
.reel .bgShot img{filter:saturate(.42) brightness(.46)}
.insta .bgShot img{filter:saturate(.48) brightness(.56)}
.phead .bgShot img{filter:saturate(.46) brightness(.54)}

/* ---- the ticker ---------------------------------------------------------- */
.strip{background:#1E0106;overflow:hidden}
.tickClip{overflow:hidden;padding-block:8px}
.tick{display:flex;width:max-content;align-items:center;
  animation:tickroll 38s linear infinite}
/* NOT display:flex on the span — a flex container drops the whitespace text
   nodes between its items, so "<b>Free delivery</b> on orders" collapsed to
   "Free deliveryon orders". Inline layout inside the span keeps the space. */
.tick > span{white-space:nowrap;padding:0 26px;
  border-right:1px solid rgba(200,145,43,.28);line-height:1.5}
.tick > span::before{content:'';display:inline-block;width:5px;height:5px;
  border-radius:50%;background:var(--mus);margin-right:11px;vertical-align:middle}
.tick a{color:var(--amber)}
@keyframes tickroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* it carries the phone number, so it PAUSES rather than slows — you cannot ask
   somebody to tap a moving target */
.strip:hover .tick,.strip:focus-within .tick{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .tick{animation:none} }

/* ---- nav + the cart ------------------------------------------------------ */
.nav{background:rgba(42,2,9,.94);backdrop-filter:blur(9px);
  border-bottom:1px solid rgba(200,145,43,.28)}
.nav menu a,.nav .cart{color:#F2E3D0}
.nav .logo img.mk{height:44px}
.nav .logo img.wd{height:30px}
.nav .bar{padding-block:5px}
@media (max-width:600px){
  .nav .logo img.mk{height:36px}
  .nav .logo img.wd{height:25px}
}
/* the cart is drawn from the page's own motifs — a cusped Mughal arch for the
   handle, a cardamom pod inside the bag, a gold gradient for the stroke */
.cartIc{position:relative;display:inline-flex;flex:0 0 auto}
.cartIc svg{width:23px;height:23px;display:block;fill:none;
  stroke:url(#cgold);stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),filter .3s ease}
.cartIc .cPod{fill:var(--mus);stroke:none;opacity:.9;
  transition:fill .3s ease,opacity .3s ease}
@media (hover:hover) and (pointer:fine){
  .nav .cart:hover .cartIc svg{transform:translateY(-2px);
    filter:drop-shadow(0 3px 7px rgba(255,174,0,.45))}
  .nav .cart:hover .cPod{fill:var(--amber);opacity:1}
}
.nav .cart i{position:absolute;top:-6px;right:-10px;width:15px;height:15px;
  font-size:9.5px;box-shadow:0 0 0 2px #2A0209;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .25s ease}
.nav .cart i[data-empty]{opacity:0;transform:scale(.4)}
@media (max-width:420px){ .cartTx{display:none} }

/* ---- the kilim band drifts by exactly one tile, so the loop has no seam --- */
.kilim{animation:weave 46s linear infinite}
@keyframes weave{from{background-position:0 center}to{background-position:253px center}}
@media (prefers-reduced-motion:reduce){ .kilim{animation:none} }

/* ---- the fact bar -------------------------------------------------------- */
.facts{background:var(--for-x);border-top:1px solid rgba(200,145,43,.3);
  border-bottom:1px solid rgba(200,145,43,.3)}
.facts ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.facts li{padding:18px 22px;border-right:1px solid rgba(200,145,43,.22)}
.facts li:last-child{border-right:0}
.facts b{display:block;font-family:var(--display);font-weight:700;font-size:27px;
  color:var(--amber);line-height:1.1}
.facts span{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--pod);
  font-weight:700}

/* ---- "why" — a claim over the photograph that proves it ------------------ */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:26px}
.why figure{margin:0;position:relative}
.why .fr{position:relative;aspect-ratio:4/3;overflow:hidden;margin-bottom:15px;
  border-radius:3px;border:1px solid rgba(200,145,43,.45);
  box-shadow:0 16px 30px -20px rgba(0,0,0,.8);
  transition:box-shadow .5s ease,border-color .5s ease}
/* over-tall so the scroll drift (data-par) never exposes an edge */
.why .fr img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;
  will-change:transform}
.why .fr::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(27,34,21,0) 46%,rgba(27,34,21,.78) 100%)}
.why h3{color:#FFF6E9;font-size:19.5px;margin-bottom:6px;line-height:1.22}
.why p{color:var(--pod-l);font-size:15px;margin:0;opacity:.9}
.why h3::after{content:'';display:block;width:26px;height:2px;background:var(--pod);
  margin:9px 0 0;transition:width .45s cubic-bezier(.2,.7,.3,1)}
@media (hover:hover) and (pointer:fine){
  .why figure:hover .fr{border-color:var(--mus);
    box-shadow:0 22px 40px -18px rgba(0,0,0,.9)}
  .why figure:hover h3::after{width:64px}
}

/* ---- the process arches -------------------------------------------------- */
.proc{background:var(--maroon);color:#F2E3D0;
  border-top:1px solid rgba(200,145,43,.3);border-bottom:1px solid rgba(200,145,43,.3)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:20px}
.steps figure{margin:0}
.steps .arch{position:relative;aspect-ratio:.82;margin-bottom:13px;
  border:1px solid rgba(200,145,43,.45);
  box-shadow:0 14px 26px -18px rgba(0,0,0,.75);transition:border-color .45s ease}
.steps .arch img{position:absolute;left:0;top:-8%;width:100%;height:116%;
  object-fit:cover;will-change:transform}
.steps h4{color:var(--amber);margin-bottom:5px}
.steps p{font-size:14px;color:#E4CDB1;margin:0}
.steps .st{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--pod)}
@media (hover:hover) and (pointer:fine){
  .steps figure:hover .arch{border-color:var(--pod)}
}

/* ---- the benefit card: an arch cap of photography over a light body ------ */
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(282px,1fr));gap:22px;
  perspective:1500px;perspective-origin:50% 24%}
.bcard{position:relative;background:#FFF8EC;border:1px solid rgba(93,5,18,.2);
  border-radius:4px;padding:0 0 24px;overflow:hidden;
  box-shadow:0 2px 4px rgba(42,2,9,.07),0 14px 24px -18px rgba(42,2,9,.45);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s ease}
/* fixed cap height, or a title that wraps to two lines leaves the row's kilim
   rules at different heights */
.bcard .top{position:relative;padding:22px 22px 17px;overflow:hidden;
  text-align:center;color:#F2E3D0;min-height:196px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;isolation:isolate}
.bcard .top img{position:absolute;left:0;top:-8%;width:100%;height:116%;z-index:-2;
  object-fit:cover;will-change:transform;filter:saturate(1.08) contrast(1.03)}
/* the scrim only has to carry the title, so it is weighted to the BOTTOM of the
   frame — darkening the cap evenly turned the photographs muddy */
.bcard .top::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,rgba(27,34,21,.20) 0%,rgba(42,2,9,.12) 34%,
    rgba(52,2,10,.62) 72%,rgba(40,2,8,.9) 100%)}
.bcard .top::after{content:'';position:absolute;left:0;right:0;bottom:0;height:9px;
  background:url('assets/kilim-tile.png') repeat-x center/auto 9px;opacity:.55}
.bcard .ic{position:absolute;top:14px;left:14px;width:34px;height:34px;
  border-radius:999px 999px 3px 3px;
  border:1px solid rgba(200,145,43,.85);display:grid;place-items:center;font-size:14px;
  color:var(--amber);margin:0;background:rgba(30,1,6,.5);backdrop-filter:blur(3px)}
.bcard h3{color:var(--amber);font-size:21px;text-shadow:0 2px 12px rgba(30,1,6,.75)}
.bcard .top p{margin:7px 0 0;font-size:11.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pod);line-height:1.5}
.bcard ul{list-style:none;margin:0;padding:22px 24px 0;display:grid;gap:14px;
  font-size:14.5px;line-height:1.6;color:#4B382F}
.bcard li{padding-left:15px}
.bcard li b{display:flex;gap:9px;align-items:baseline;margin:0 0 2px -15px;
  font-size:15.5px;font-weight:800;color:var(--maroon)}
.bcard li b::before{content:'';flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--for);transform:translateY(-2px)}
.bcard .sheen{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden;
  border-radius:inherit;opacity:0;transition:opacity .3s ease}
.bcard .sheen::before{content:'';position:absolute;top:-60%;bottom:-60%;width:42%;
  left:-55%;transform:skewX(-19deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,246,233,.5),rgba(255,255,255,0))}
@media (hover:hover) and (pointer:fine){
  .bcard:hover{transform:translate3d(0,-11px,58px) rotateX(3.6deg);
    box-shadow:0 3px 6px rgba(42,2,9,.09),0 40px 54px -26px rgba(42,2,9,.62)}
  .bcard:hover .sheen{opacity:1}
  .bcard:hover .sheen::before{animation:sweep 1.05s cubic-bezier(.3,.5,.2,1)}
  .bcard .top img{transition:transform .7s cubic-bezier(.2,.7,.3,1)}
  .bcard:hover .top img{transform:scale(1.07)}
}
@keyframes sweep{from{left:-55%}to{left:118%}}
/* a reveal that arrives in 3D, tipping up from its bottom edge */
.rv3{transform:perspective(1100px) rotateX(12deg) translateY(26px);
  transform-origin:50% 100%}
.rv3.in{transform:none}
@media (prefers-reduced-motion:reduce){
  .bcard{transition:none} .bcard:hover{transform:none}
  .bcard .sheen{display:none}
  .rv3,.rv3.in{transform:none}
  .reel .track{animation:none}
}

/* ---- the reel ------------------------------------------------------------
   The track prints the same run TWICE and travels exactly -50%; that is what
   makes the loop seamless, so ADD OR REMOVE A PHOTOGRAPH IN BOTH HALVES. */
.reel{background:var(--for-x);padding:20px 0;overflow:hidden;
  border-top:1px solid rgba(200,145,43,.3);border-bottom:1px solid rgba(200,145,43,.3)}
.reel .mask{overflow:hidden}
.reel .track{display:flex;gap:14px;width:max-content;
  animation:roll 64s linear infinite}
.reel:hover .track{animation-duration:150s}   /* slows, never stops */
.reel figure{margin:0;flex:0 0 auto;width:clamp(150px,17vw,236px)}
.reel .fr{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:3px;
  border:1px solid rgba(200,145,43,.34);background:rgba(255,246,233,.05)}
.reel img{width:100%;height:100%;object-fit:cover}
/* the packshots are shot on paper white — contained, not covered, or they
   punch a lit rectangle through the dark band */
.reel .pk img{object-fit:contain;padding:12px}
@keyframes roll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---- instagram ----------------------------------------------------------- */
.insta{background:var(--for-x);padding:52px 0 56px;
  border-top:1px solid rgba(200,145,43,.24)}
.insta .ihead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:22px}
.insta h2{color:#FFF6E9;font-size:clamp(26px,2.6vw,34px)}
.igrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.igrid a{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:3px;
  border:1px solid rgba(200,145,43,.3)}
.igrid img{width:100%;height:100%;object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.igrid a:hover img{transform:scale(1.06)}
.igrid .ig{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  background:rgba(30,1,6,.5);transition:opacity .25s}
.igrid a:hover .ig,.igrid a:focus-visible .ig{opacity:1}
.igrid .ig::after{content:'';width:26px;height:26px;border:2px solid var(--amber);
  border-radius:8px;box-shadow:inset 0 0 0 2px rgba(30,1,6,.9),0 0 0 0 var(--amber)}
@media (max-width:900px){ .igrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:420px){ .igrid{grid-template-columns:repeat(3,1fr);gap:7px} }

/* without the explicit size an inline <svg> carrying only a viewBox falls back
   to the CSS default of 300x150 and the footer icons render as huge blocks */
.foot .social a{gap:8px}
.foot .social svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}
.foot .fnote{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:#C8B49B}

/* ---- faq accordion -------------------------------------------------------
   TWO FIXES OVER pv.css's VERSION, both found at 320px (2026-08-19).

   minmax(min(320px,100%),1fr), not minmax(320px,1fr): a 320px minimum track
   inside a 288px content box cannot shrink, so the whole grid overflowed the
   viewport on the smallest phone still in use. min() lets the track collapse to
   the column it actually has, and changes nothing at any wider size.

   And the summary WRAPS. It is a flex row, and a flex item will not shrink
   below its own min-content width — so one nowrap category chip beside a long
   question pushed the row wider than the screen with no way to give. */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:0 40px}
.faq details{border-bottom:1px solid rgba(200,145,43,.28);padding:15px 0}
.faq summary{cursor:pointer;font-weight:800;font-size:16px;list-style:none;
  display:flex;gap:12px;align-items:flex-start;color:#FFF1DE;flex-wrap:wrap}
.faq summary > *{min-width:0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';color:var(--mus);font-family:var(--display);font-size:19px;
  line-height:1.2}
.faq details[open] summary::before{content:'–'}
.faq p{margin:10px 0 2px 24px;font-size:15px;color:#D2B695}
/* the same accordion on a light ground */
.faq-light summary{color:var(--maroon)}
.faq-light details{border-bottom-color:rgba(93,5,18,.18)}
.faq-light p{color:#4B382F}
.faq details[hidden]{display:none}

/* ---- range card extras (shared with the homepage) ----------------------- */
.pswipe,.railp{display:none}
.pcard-bulk .bgrades{margin:4px 0 2px}
.pcard-bulk .bgrades li{background:rgba(255,246,233,.1);color:#F2E3D0;
  border:1px solid rgba(200,145,43,.42);font-size:11.5px;padding:4px 9px}

/* ==========================================================================
   ---- pages ---- everything below belongs only to the inner pages
   ========================================================================== */

/* ---- the page header ----------------------------------------------------
   Every inner page opens on the same device: a darkened estate photograph, a
   breadcrumb, an eyebrow, the h1 and one line of lede, closed by a kilim
   strip. Only the photograph changes, which is what makes twelve different
   pages read as one site. It is deliberately NOT full-screen — a 100vh title
   card is the single most AI-looking thing a page can do, and this brand has
   already told us its site looked generated. */
.phead{background:var(--for-x);color:#F2E3D0;
  border-bottom:1px solid rgba(200,145,43,.3)}
.phead > .wrap{padding-block:clamp(30px,5vw,58px) clamp(34px,5.4vw,62px)}
.phead h1{color:#FFF6E9;max-width:20ch;font-size:clamp(33px,4.6vw,58px)}
.phead .eyebrow{color:var(--mus)}
.phead .lede{margin-top:15px;max-width:62ch;color:var(--pod-l)}
.phead .pmeta{display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:22px;
  padding-top:17px;border-top:1px solid rgba(200,145,43,.26);
  font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:var(--pod)}
.phead .pmeta b{color:var(--amber);font-weight:800}
.phead::after{content:'';position:absolute;left:0;right:0;bottom:0;height:9px;z-index:2;
  background:url('assets/kilim-tile.png') repeat-x center/auto 9px;opacity:.6}

/* breadcrumb — real chrome, and it is what stops an inner page floating */
.crumb{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 15px;padding:0;
  list-style:none;font-size:12px;letter-spacing:.06em;color:var(--pod)}
.crumb a{text-decoration:none;opacity:.86}
.crumb a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.crumb li+li::before{content:'/';margin-right:7px;opacity:.45}
.crumb [aria-current]{color:var(--amber);font-weight:700}

/* ---- section furniture --------------------------------------------------- */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 30px;
  flex-wrap:wrap;margin-bottom:28px}
.shead .eyebrow{color:var(--maroon);margin-bottom:9px}
.band-for .shead .eyebrow,.band-mar .shead .eyebrow,.band-dk .shead .eyebrow,
.proc .shead .eyebrow{color:var(--mus)}
.shead .sub{margin:11px 0 0;max-width:58ch;color:var(--ink-2);font-size:16px}
.band-for .shead .sub,.band-mar .shead .sub,.band-dk .shead .sub,
.proc .shead .sub{color:var(--pod-l)}

/* long-form copy: the story, about, the policy pages. Measure is capped at
   68ch — past that the eye loses the line. */
.prose{max-width:68ch;font-size:17.5px;line-height:1.78}
.prose > *+*{margin-top:1.15em}
.prose h2{margin-top:1.7em;font-size:clamp(24px,2.6vw,33px)}
.prose h3{margin-top:1.5em;font-size:20px;color:var(--maroon)}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:.5em}
.prose li{padding-left:3px}
.prose a{color:var(--maroon);text-underline-offset:3px}
.prose strong{color:var(--maroon)}
.prose .lead{font-size:19.5px;line-height:1.65;color:#4B382F}
.band-for .prose,.band-dk .prose{color:#E7E0D2}
.band-for .prose h3,.band-dk .prose h3{color:var(--amber)}
.band-for .prose a,.band-dk .prose a{color:var(--amber)}
.band-for .prose strong,.band-dk .prose strong{color:#FFF6E9}

/* a pull quote — an editorial device, and the one place the accent face runs */
.pull{margin:34px 0;padding:0 0 0 24px;border-left:3px solid var(--mus);
  font-family:'Rozha One',Georgia,serif;font-weight:400;font-style:normal;
  font-size:clamp(23px,2.9vw,35px);line-height:1.25;color:var(--maroon)}
.band-for .pull,.band-dk .pull{color:var(--amber)}
.pull cite{display:block;margin-top:11px;font-family:var(--body);font-style:normal;
  font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2)}
.band-for .pull cite,.band-dk .pull cite{color:var(--pod)}

/* a marginal note — text set beside the main column rather than under it.
   Density that reads as hand-set rather than as another full-width row. */
.marg{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.9fr);gap:34px 46px;
  align-items:start}
.marg .side{font-size:14.5px;line-height:1.66;color:var(--ink-2);
  border-top:2px solid var(--mus);padding-top:14px}
.band-for .marg .side,.band-dk .marg .side{color:var(--pod-l)}
.marg .side b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--maroon);margin-bottom:7px}
.band-for .marg .side b,.band-dk .marg .side b{color:var(--mus)}
.marg .side + .side{margin-top:22px}
@media (max-width:820px){ .marg{grid-template-columns:1fr;gap:26px} }

/* a framed photograph with a caption under it */
.shotf{margin:0}
.shotf .fr{position:relative;overflow:hidden;border-radius:3px;
  border:1px solid rgba(200,145,43,.45);box-shadow:0 18px 34px -22px rgba(0,0,0,.7)}
.shotf .fr img{width:100%;height:100%;object-fit:cover;display:block}
.shotf figcaption{margin-top:10px;font-size:12.5px;letter-spacing:.06em;
  color:var(--ink-2)}
.band-for .shotf figcaption,.band-dk .shotf figcaption,
.proc .shotf figcaption{color:var(--pod)}

/* ---- the shop: filters --------------------------------------------------- */
.filt{display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  padding:0 0 18px;margin-bottom:22px;border-bottom:1px solid rgba(42,2,9,.15)}
.filt button{background:none;border:1px solid rgba(42,2,9,.24);border-radius:99px;
  padding:8px 17px;font-size:12.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;color:var(--ink-2);
  transition:background .18s,color .18s,border-color .18s}
.filt button:hover{border-color:var(--maroon);color:var(--maroon)}
.filt button[aria-pressed="true"]{background:var(--maroon);border-color:var(--maroon);
  color:#FFF6E9}
.filt .count{margin-left:auto;font-size:13px;color:var(--ink-2)}
.pgrid [hidden]{display:none}

/* ---- the comparison table -----------------------------------------------
   Seven sizes at one price per gram is the fact that sells the range, and a
   grid of cards cannot show it. Scrolls inside its own box on a phone rather
   than making the page scroll sideways. */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--pg) * -1);padding-inline:var(--pg)}
table.dt{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
table.dt caption{text-align:left;font-size:13px;color:var(--ink-2);padding-bottom:11px}
table.dt th,table.dt td{text-align:left;padding:12px 14px;
  border-bottom:1px solid rgba(42,2,9,.14);vertical-align:top}
table.dt thead th{font-family:var(--body);font-size:11px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--maroon);
  border-bottom:2px solid rgba(93,5,18,.3);white-space:nowrap}
table.dt tbody tr:hover{background:rgba(200,145,43,.09)}
table.dt td b{font-weight:800}
table.dt .r{text-align:right;white-space:nowrap}
table.dt .hi{background:rgba(200,145,43,.13)}
.band-for table.dt,.band-dk table.dt,.proc table.dt{color:#E7E0D2}
.band-for table.dt thead th,.band-dk table.dt thead th,.proc table.dt thead th{
  color:var(--mus);border-bottom-color:rgba(200,145,43,.4)}
.band-for table.dt td,.band-dk table.dt td,.proc table.dt td{
  border-bottom-color:rgba(200,145,43,.2)}
.band-for table.dt caption,.band-dk table.dt caption,.proc table.dt caption{color:var(--pod)}
.band-for table.dt tbody tr:hover,.band-dk table.dt tbody tr:hover,
.proc table.dt tbody tr:hover{background:rgba(255,246,233,.06)}

/* ---- the product detail page --------------------------------------------- */
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:34px 48px;
  align-items:start}
@media (max-width:900px){ .pdp{grid-template-columns:1fr;gap:26px} }

.gal{position:sticky;top:96px}
@media (max-width:900px){ .gal{position:static} }
.gal .main{position:relative;aspect-ratio:53/60;overflow:hidden;border-radius:4px;
  background:#EFE6DA;border:1px solid rgba(42,2,9,.16)}
.gal .main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .4s ease}
.gal .main img.on{opacity:1}
/* a cut-out frame is the pack alone on no ground — it must be CONTAINED, or
   object-fit:cover crops the pack to the frame's 53:60 and takes the lid off */
.gal .main img.ct{object-fit:contain;padding:7%}
/* product zoom, asked for in the brief: the frame stays put and the picture
   scales inside it, driven from the pointer's position so the reader magnifies
   what they are actually looking at. Pointer-fine only — on a touch screen a
   held finger is a scroll, not a magnifier. */
@media (hover:hover) and (pointer:fine){
  .gal .main{cursor:zoom-in}
  .gal .main img{transition:opacity .4s ease,transform .25s ease-out}
  .gal .main.zoom img.on{transform:scale(2.1)}
}
.gal .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 16px 12px;
  font-size:12px;letter-spacing:.07em;color:#FFF1DE;
  background:linear-gradient(180deg,rgba(30,1,6,0),rgba(30,1,6,.78))}
.gal .thumbs{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap}
.gal .thumbs button{width:66px;height:74px;padding:0;border-radius:3px;overflow:hidden;
  border:1px solid rgba(42,2,9,.2);background:#EFE6DA;cursor:pointer;
  transition:border-color .2s,transform .2s}
.gal .thumbs button img{width:100%;height:100%;object-fit:cover}
.gal .thumbs button[aria-pressed="true"]{border-color:var(--maroon);border-width:2px}
.gal .thumbs button:hover{transform:translateY(-2px)}

.pbuy .kind{font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-2)}
.pbuy h1{font-size:clamp(30px,3.4vw,44px);margin:7px 0 10px}
.pbuy .stars{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);
  margin-bottom:16px}
.pbuy .stars b{color:var(--mus-d);letter-spacing:.06em;font-size:15px}
.pbuy .prow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:15px 0;border-block:1px solid rgba(42,2,9,.15)}
.pbuy .pnum{font-family:var(--num);font-size:38px;line-height:1;letter-spacing:-.02em;
  color:var(--maroon)}
.pbuy .per{font-size:14px;color:var(--ink-2)}
.pbuy .tax{width:100%;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.pbuy .short{margin:18px 0 0;font-size:16px;line-height:1.7;color:#4B382F}

.psizes{margin:22px 0 0}
.psizes .lbl{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--maroon);margin:0 0 10px}
.psizes ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.psizes a{display:grid;gap:1px;min-width:74px;padding:9px 12px;text-decoration:none;
  border:1px solid rgba(42,2,9,.24);border-radius:3px;text-align:center;
  transition:border-color .18s,background .18s}
.psizes a:hover{border-color:var(--maroon);background:rgba(200,145,43,.1)}
.psizes a b{font-size:14.5px;font-weight:800}
.psizes a span{font-size:11.5px;color:var(--ink-2)}
.psizes a[aria-current]{border-color:var(--maroon);border-width:2px;
  background:var(--maroon);color:#FFF6E9}
.psizes a[aria-current] span{color:#DDC4A8}

.pact{display:flex;gap:11px;flex-wrap:wrap;align-items:stretch;margin:22px 0 0}
.qty{display:flex;align-items:center;border:1.5px solid rgba(42,2,9,.24);border-radius:2px;
  overflow:hidden;flex:0 0 auto}
.qty button{width:42px;min-height:48px;background:none;border:0;cursor:pointer;
  font-size:19px;line-height:1;color:var(--maroon)}
.qty button:hover{background:rgba(200,145,43,.16)}
.qty input{width:44px;min-height:48px;border:0;text-align:center;background:none;
  font-weight:800;font-size:16px;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.pact .btn{flex:1 1 190px}

/* the trust row: four short facts, not four icons in a symmetrical grid */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;
  margin:22px 0 0;background:rgba(42,2,9,.14);border:1px solid rgba(42,2,9,.14)}
.trust div{background:var(--off);padding:13px 15px}
.trust b{display:block;font-size:13px;font-weight:800;color:var(--maroon);
  letter-spacing:.02em}
.trust span{font-size:12.5px;color:var(--ink-2);line-height:1.45}

.pnote{display:flex;gap:11px;align-items:flex-start;margin-top:18px;padding:12px 15px;
  border-left:3px solid var(--mus);background:rgba(200,145,43,.11);font-size:13.5px;
  line-height:1.55}
.pnote a{font-weight:800;color:var(--maroon)}

/* specification table — the pairs a buyer of a graded agricultural product
   looks for, and the same fields the WooCommerce listing already carries */
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th,.spec td{text-align:left;padding:11px 0;border-bottom:1px solid rgba(42,2,9,.13);
  vertical-align:top}
.spec th{font-family:var(--body);font-weight:800;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--maroon);width:38%;white-space:nowrap;
  padding-right:18px}

/* the empty review state. There are no reviews yet and we do not invent them. */
.rev0{display:grid;gap:14px;justify-items:start;padding:30px 26px;border-radius:4px;
  border:1px dashed rgba(93,5,18,.3);background:rgba(255,255,255,.5)}
.rev0 .big{font-family:var(--display);font-size:34px;color:var(--maroon);line-height:1}
.rev0 p{margin:0;max-width:54ch;color:var(--ink-2);font-size:15px}

/* ---- the trade page ------------------------------------------------------ */
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:14px;
  list-style:none;margin:0;padding:0}
.who li{padding:20px 20px 18px;border-radius:4px;
  border:1px solid rgba(200,145,43,.34);background:rgba(255,246,233,.05)}
.who b{display:block;font-family:var(--display);font-weight:400;font-size:20px;
  color:var(--amber);margin-bottom:7px}
.who span{font-size:14.5px;line-height:1.6;color:var(--pod-l)}

/* how a trade order runs. The 01/02/03 counter is gone (client, 2026-10-11:
   no numbering anywhere); the order reads left to right, and each step is
   marked with a short gold rule instead. */
.flow{counter-reset:f;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:2px;background:rgba(42,2,9,.14);border:1px solid rgba(42,2,9,.14);
  list-style:none;margin:0;padding:0}
.flow li{background:var(--off);padding:20px 20px 18px}
.flow li::before{content:'';display:block;width:26px;height:2px;background:var(--mus);margin-bottom:12px}
.flow b{display:block;font-size:15.5px;font-weight:800;color:var(--maroon);margin-bottom:5px}
.flow span{font-size:14px;line-height:1.6;color:var(--ink-2)}

/* ---- forms --------------------------------------------------------------- */
.form{display:grid;gap:15px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.fgrid .full{grid-column:1/-1}
@media (max-width:640px){ .fgrid{grid-template-columns:1fr} }
.field textarea{min-height:118px;resize:vertical}
.field .hint{font-size:12px;color:var(--ink-2);font-weight:500;letter-spacing:0;
  text-transform:none}
.band-for .field label,.band-dk .field label{color:var(--pod)}
.band-for .field .hint,.band-dk .field .hint{color:var(--pod-l)}
.band-for .field input,.band-for .field select,.band-for .field textarea,
.band-dk .field input,.band-dk .field select,.band-dk .field textarea{
  background:rgba(255,246,233,.07);border-color:rgba(200,145,43,.4);color:#FFF6E9}
.fdone{display:none;padding:15px 17px;border-left:3px solid var(--mus);
  background:rgba(200,145,43,.14);font-size:15px;line-height:1.6}
.fdone.on{display:block}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.55}
.consent input{width:17px;height:17px;margin-top:3px;flex:0 0 auto;accent-color:var(--maroon)}

/* ---- contact ------------------------------------------------------------- */
.ccards{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:2px;
  background:rgba(200,145,43,.3);border:1px solid rgba(200,145,43,.3)}
.ccards > *{background:var(--for-x);padding:22px 22px 20px;text-decoration:none;
  transition:background .2s}
a.cc:hover{background:#232B1C}
.ccards .k{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mus);display:block;margin-bottom:9px}
.ccards b{display:block;font-family:var(--display);font-weight:400;font-size:21px;
  color:#FFF6E9;line-height:1.25;letter-spacing:-.01em}
.ccards .s{display:block;margin-top:7px;font-size:13.5px;line-height:1.6;
  color:var(--pod-l);font-style:normal}
.mapf{margin:0;border:1px solid rgba(200,145,43,.34);border-radius:3px;overflow:hidden;
  background:#1B2215}
.mapf iframe{display:block;width:100%;height:340px;border:0;filter:saturate(.72) brightness(.9)}

/* ---- newsletter ---------------------------------------------------------- */
.news{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 40px;
  align-items:center}
@media (max-width:820px){ .news{grid-template-columns:1fr} }
.news form{display:flex;gap:9px;flex-wrap:wrap}
.news input{flex:1 1 200px;padding:13px 15px;border-radius:2px;font-size:16px;
  border:1.5px solid rgba(200,145,43,.42);background:rgba(255,246,233,.08);color:#FFF6E9}
.news input::placeholder{color:rgba(211,219,190,.7)}
.news input:focus{outline:2px solid var(--mus);outline-offset:1px;border-color:transparent}
.news .fine{margin:11px 0 0;font-size:12.5px;color:var(--pod)}

/* ---- the WhatsApp button ------------------------------------------------
   The brief asks for click-to-chat, and for this buyer it is the channel they
   will actually use. It sits above the page but under the sticky nav, and it
   carries a label on a wide screen and only the glyph on a phone. */
.wa{position:fixed;right:16px;bottom:16px;z-index:55;display:inline-flex;
  align-items:center;gap:9px;padding:11px 15px;border-radius:99px;
  background:#1E7B4E;color:#fff;text-decoration:none;font-size:13px;font-weight:800;
  letter-spacing:.06em;box-shadow:0 10px 24px -8px rgba(0,0,0,.6);
  transition:transform .2s ease,background .2s ease}
.wa:hover{background:#219159;transform:translateY(-2px)}
.wa svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto}
@media (max-width:620px){ .wa{padding:12px;right:12px;bottom:12px} .wa span{display:none} }
@media print{ .wa{display:none} }

/* ---- a draft banner for the policy pages -------------------------------- */
.draft{background:rgba(200,145,43,.16);border:1px solid rgba(200,145,43,.5);
  border-left-width:4px;border-radius:3px;padding:16px 19px;margin-bottom:32px;
  font-size:14.5px;line-height:1.62}
.draft b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--maroon);margin-bottom:6px}

/* ---- utility ------------------------------------------------------------- */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px 46px;
  align-items:center}
.tight{padding:44px 0}
.mt0{margin-top:0}

/* ---- THE CHAI MOMENT ----------------------------------------------------
   Copied from the homepage, where every number in it was fought for. It closes
   the benefits page because the health copy above it ends on aroma and mood,
   and a hot cup with the भाप coming off it is the payoff to that.

   THE PHOTOGRAPH IS LICENSED STOCK — assets/stock/chai-steam.webp, Unsplash,
   Masaaki Komori (@gaspanik), unsplash.com/photos/p8roxdB6whM. It lives in
   assets/stock/ and not assets/life/ on purpose: everything in life/ is cropped
   from the client's own creatives and this is the one asset that is neither
   theirs nor ours. Raise it with them before launch — see assets/stock/CREDITS.txt.

   The top padding is deliberately deep: the plate sets the row height, so every
   pixel above it is sky for the steam to rise into before the band clips it. */
.chai{position:relative;overflow:hidden;padding:clamp(96px,11vw,164px) 0 88px;color:#F2E3D0;
  border-top:1px solid rgba(200,145,43,.3);
  background:
    radial-gradient(70% 58% at 30% 42%,rgba(150,74,16,.40),rgba(30,3,8,0) 70%),
    linear-gradient(180deg,#150207 0%,#1E0308 40%,#3B040F 78%,#52040F 100%)}
/* NOT ".in" — pv.js adds the class "in" to every .rv element when its reveal
   fires, so a grid rule keyed on .in inside this section also matched the two
   revealing children and turned each of them into a two-column grid. */
.chai .chaiIn{display:grid;grid-template-columns:.8fr 1.2fr;
  gap:clamp(30px,5vw,66px);align-items:center}
.chai .cupWrap{max-width:460px}

/* margin-inline:auto on a grid item turns OFF its stretch, and this figure's
   only contents are absolutely positioned — it collapsed to 2px, its plate's
   two 1px borders. Hence the explicit width. */
.cupWrap{position:relative;perspective:1300px;width:100%}
.cupWrap::after{content:'';position:absolute;left:6%;right:6%;bottom:-30px;height:30px;
  pointer-events:none;
  background:radial-gradient(58% 100% at 50% 0,rgba(200,145,43,.26),rgba(0,0,0,0) 74%)}
/* ONE gold hairline and a small radius — the hero's double rule and 8px ring
   made a dark landscape photograph read as a television set. */
.cupPlate{position:relative;margin:0;aspect-ratio:892/1100;overflow:hidden;border-radius:3px;
  border:1px solid rgba(200,145,43,.5);
  box-shadow:0 30px 56px -26px rgba(0,0,0,.85);
  transform:rotateY(3deg) rotateX(1.2deg);
  transition:transform .85s cubic-bezier(.2,.7,.3,1),box-shadow .85s ease}
.cupPlate img{position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;
  object-position:50% 54%;will-change:transform}
@media (hover:hover) and (pointer:fine){
  .cupWrap:hover .cupPlate{transform:rotateY(0deg) rotateX(0deg) translateY(-7px);
    border-color:var(--mus);box-shadow:0 42px 68px -26px rgba(0,0,0,.9)}
}
/* The photograph carries a REAL backlit plume, which is why it was licensed. So
   the CSS column does not invent steam over the cup; it PICKS UP where the
   photographed plume fades near the top of the frame and carries it on out. */
.steam{position:absolute;left:52%;bottom:84%;width:130px;height:250px;margin-left:-65px;
  pointer-events:none;z-index:3;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 72%,rgba(0,0,0,0) 98%);
  mask-image:linear-gradient(to top,#000 0%,#000 72%,rgba(0,0,0,0) 98%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
/* TWO elements per wisp, and it needs both. The <i> only climbs and fades; the
   ::before inside sways on its own clock. One element doing both travels in a
   straight line, and five straight lines read as a lens flare, not vapour. The
   sway period is a deliberately un-round fraction of the rise so they never sync. */
.steam i{position:absolute;bottom:0;display:block;width:var(--w);height:var(--h);
  margin-left:calc(var(--w) / -2);opacity:0;
  animation:steamUp var(--d) linear infinite var(--dl)}
.steam i::before{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(255,246,233,0) 0%,rgba(255,249,240,.72) 22%,
    rgba(255,247,235,.44) 55%,rgba(255,246,233,0) 100%);
  border-radius:50% 50% 46% 46% / 62% 62% 38% 38%;
  filter:blur(var(--b));
  animation:steamSway calc(var(--d) / 2.3) ease-in-out infinite alternate var(--dl)}
@keyframes steamSway{
  from{transform:translateX(-24%) rotate(-8deg) scaleX(.84)}
  to  {transform:translateX(28%) rotate(9deg) scaleX(1.18)}
}
/* Brightest at 55% of the climb, NOT at the source. Directly above the glass
   the backdrop is the lit panel of the pack, where a pale vapour has nothing to
   register against; by mid-climb it has cleared the frame and is over the dark
   band. Thin at the mouth and gathering as it rises is also how steam behaves. */
@keyframes steamUp{
  0%  {opacity:0;   transform:translate3d(0,14px,0) scale(.58) rotate(0deg)}
  14% {opacity:.5}
  55% {opacity:.92; transform:translate3d(var(--x1),var(--y1,-124px),0) scale(1.14) rotate(-6deg)}
  100%{opacity:0;   transform:translate3d(var(--x2),var(--y2,-252px),0) scale(1.72) rotate(7deg)}
}
@media (prefers-reduced-motion:reduce){
  /* two wisps held still, the rest hidden — the plume still reads, nothing moves */
  .steam i{animation:none;opacity:.5}
  .steam i::before{animation:none}
  .steam i:nth-child(n+3){display:none}
  .cupPlate{transform:none;transition:none}
}
.chai .cop .rule{color:var(--mus)}
.chai h2{color:#FFF6E9;font-size:clamp(27px,3.4vw,42px);line-height:1.16;
  letter-spacing:-.015em;margin-bottom:14px}
.chai h2 em{font-style:normal;font-family:'Rozha One',Georgia,serif;color:var(--amber)}
.chai .lede{color:#E3CDB4;max-width:50ch;margin:0}
.chai .notes{list-style:none;margin:24px 0 28px;padding:0;display:grid;gap:12px}
/* NOT display:flex on the li — the bold lead-in would become its own flex item
   with its own shrinkable column and wrap into a narrow stack beside its
   sentence. An absolutely positioned marker keeps the line as one inline run. */
.chai .notes li{position:relative;padding-left:20px;font-size:14.5px;
  line-height:1.62;color:#E4D0B6}
.chai .notes li::before{content:'';position:absolute;left:0;top:.66em;
  width:6px;height:6px;border-radius:50%;background:var(--mus)}
.chai .notes b{color:var(--amber);font-weight:800}
.chai .cta{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:820px){
  .chai .chaiIn{grid-template-columns:1fr;gap:34px}
  .chai .cupWrap{max-width:340px;margin-inline:auto}
}

/* ==========================================================================
   THE PHONE IS ITS OWN LAYOUT, NOT A FALLBACK.
   Same finding as the homepage: every grid collapsing to one column below
   ~620px is the browser's fallback, and a fallback is not a layout. A set to
   COMPARE goes to two columns; a set to PAGE THROUGH becomes a horizontal snap
   rail, which is the one thing a phone does better than a desktop.

   THE RAILS MUST BLEED TO THE SCREEN EDGES — the negative inline margin is
   exactly the wrap's own gutter, so the rail spans the viewport while its own
   padding keeps the first card on the gutter line. That is what lets the next
   card PEEK, and a rail with nothing showing past the right edge reads as a
   single card that nobody swipes. Cards are 72-82%, never 100%.

   THIS BLOCK STAYS AT THE END OF THE FILE. A media query carries no extra
   specificity, so it wins by position, not by weight.
   ========================================================================== */
@media (max-width:620px){
  .facts ul{grid-template-columns:1fr 1fr}
  .facts li{padding:13px 15px;border-right:1px solid rgba(200,145,43,.22);
    border-bottom:1px solid rgba(200,145,43,.18)}
  .facts li:nth-child(2n){border-right:0}
  .facts li:last-child{grid-column:1/-1;text-align:center;border-bottom:0}
  .facts b{font-size:23px}
  .facts span{font-size:11px;letter-spacing:.08em}

  [data-rail]{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--pg);
    margin-inline:calc(var(--pg) * -1);padding:2px var(--pg) 4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  [data-rail]::-webkit-scrollbar{display:none}
  [data-rail] > *{flex:0 0 auto;scroll-snap-align:center}
  /* the thumb's WIDTH is the fraction of the rail on screen and its OFFSET is
     scrollLeft, so the bar is a map of the set rather than a decoration */
  .railp{display:block;position:relative;width:132px;height:3px;margin:12px auto 0;
    border-radius:2px;overflow:hidden;background:rgba(42,2,9,.15)}
  .railp i{position:absolute;top:0;bottom:0;left:0;width:30%;border-radius:2px;
    background:var(--mus-d)}
  .proc .railp,.band-for .railp,.band-dk .railp{background:rgba(255,246,233,.2)}
  .proc .railp i,.band-for .railp i,.band-dk .railp i{background:var(--mus)}
  .pswipe{display:block;margin:-4px 0 13px;font-size:12px;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:var(--maroon);opacity:.72}
  .band-for .pswipe,.band-dk .pswipe,.proc .pswipe{color:var(--pod)}

  .pgrid[data-rail]{background:none;border:0}
  .pgrid[data-rail] > *{flex-basis:78%;border:1px solid rgba(42,2,9,.16);border-radius:4px}
  .pcard{padding:16px 15px 15px}
  .pcard h3{font-size:17.5px}
  .pcard-bulk{padding:22px 18px;justify-content:flex-start}

  .bgrid{perspective:900px}
  .bgrid[data-rail] > *{flex-basis:82%}
  .bcard .top{min-height:142px;padding:18px 18px 14px}
  .bcard h3{font-size:19px}
  .bcard ul{padding:16px 18px 0;gap:11px}

  .why[data-rail] > *{flex-basis:72%}
  .why .fr{margin-bottom:11px}
  .why h3{font-size:17.5px}
  .why p{font-size:14px}

  .steps[data-rail] > *{flex-basis:62%}
  .steps .arch{aspect-ratio:.88;margin-bottom:10px}
  .steps p{font-size:13.5px}

  .who[data-rail] > *{flex-basis:76%}
  .flow[data-rail]{background:none;border:0}
  .flow[data-rail] > *{flex-basis:72%;border:1px solid rgba(42,2,9,.16);border-radius:4px}

  /* the chai band gives back its BOTTOM padding only. Its top padding is the
     sky the plume rises into and must not come down with it. */
  .chai{padding-bottom:52px}
  .chai .notes{margin:18px 0 22px}
  .band{padding:46px 0}
  .prose{font-size:16.5px}
  .pdp{gap:22px}
  .gal .thumbs button{width:56px;height:63px}
  .pbuy .pnum{font-size:32px}

  .foot{padding-top:40px}
  .foot .cols{grid-template-columns:1fr 1fr;gap:26px 20px}
  .foot .cols > :first-child{grid-column:1/-1}
  .foot ul{gap:7px;font-size:14px}
  .foot .base{gap:4px;padding:14px 0}
}

/* ---- "added to your cart" — the page stays put, this says so ------------
   pvsite.js builds it on the first Add to cart. Bottom-centre on a phone,
   bottom-left on a desktop so it never sits on the WhatsApp button. */
.cartToast{position:fixed;z-index:80;left:50%;bottom:18px;width:min(440px,calc(100% - 32px));
  transform:translate(-50%,140%);opacity:0;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s;
  background:var(--maroon-x);color:#F2E3D0;border:1px solid rgba(200,145,43,.45);border-radius:2px;
  box-shadow:0 14px 40px rgba(20,4,6,.35);padding:16px 18px;display:grid;gap:12px}
.cartToast.on{transform:translate(-50%,0);opacity:1}
.cartToast p{margin:0;font-size:15px;line-height:1.45}
.cartToast b{color:var(--amber);font-weight:800}
.cartToast > div{display:flex;gap:10px;flex-wrap:wrap}
.cartToast .btn{flex:1 1 140px}
.cartToast .btn-line{color:#F2E3D0}
@media (min-width:900px){ .cartToast{left:24px;transform:translate(0,140%)} .cartToast.on{transform:none} }
@media (prefers-reduced-motion:reduce){ .cartToast{transition:none} }