/* ============================================================
   hai Farmer — inner pages
   ------------------------------------------------------------
   Everything that exists below the home page: the inner banner,
   the listing shell, the product detail view, the cart table,
   the auth and contact forms, the article layout.

   Loads after style.css and theme-lux.css and reads only their
   design tokens — no literal colours — so the palette declared in
   theme-lux.css §1 applies here automatically.
   ============================================================ */

/* ---------- 0. UTILITIES ---------- */

/* Several components below set their own display:grid / display:flex, which
   outranks the browser's [hidden]{display:none} on specificity alone. Every
   panel toggled by the `hidden` attribute — the cart's empty state and filled
   layout, the password meter, the reset confirmation, the full-screen image
   viewer — depends on this rule. */
[hidden]{display:none!important}

.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}

.btn--ghost{background:transparent;color:var(--ink-70);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--ghost:hover{background:var(--wash,rgba(0,0,0,.04));color:var(--green)}
.lux .btn--ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.lux .btn--ghost:hover{background:var(--wash);color:var(--green)}

.stars{display:inline-flex;gap:1px;font-size:.85rem;line-height:1;color:var(--ink-30)}
.stars i{font-style:normal}
.stars i.is-on{color:var(--star)}

.ticklist{display:grid;gap:9px;font-size:.87rem;color:var(--ink-70)}
.ticklist li{display:flex;align-items:flex-start;gap:9px}
.ticklist .ic{margin-top:4px;color:var(--green)}

/* Section "see everything" line under a grid. */
.shop__more{display:flex;justify-content:center;margin-top:clamp(20px,2.4vw,32px)}


/* ============================================================
   1. INNER BANNER
   ------------------------------------------------------------
   Two separate photographs per page — a wide 1600x380 strip for
   desktop and a 390x230 crop for mobile — swapped by <picture>
   at the same 768px breakpoint the home carousel uses.
   The scrim is built from --scrim-rgb, which every palette
   restates, so the heading stays readable in all four schemes.
   ============================================================ */
.ibanner{position:relative;display:grid;align-items:center;isolation:isolate;overflow:hidden;
  min-height:clamp(178px,22vw,350px)}
.ibanner__art{position:absolute;inset:0;z-index:-2;display:block}
.ibanner__art img{width:100%;height:100%;object-fit:cover}
/* No scrim, at any width.

   It was a dark gradient laid over the photograph so white heading text
   stayed legible on top of it. The desktop half had already been commented
   out; the mobile one in the 768px block was still painting, which is the
   dark wash down the artwork on a phone.

   Nothing needs it now: every page that shows this banner carries its title
   inside the artwork and renders the <h1> as .sr-only, so there is no text
   over the picture for a scrim to protect — it was only dimming the image.
   The ::after is kept as an empty hook rather than deleted, because
   .ibanner uses z-index layering that the rule documents. */
.ibanner::after{content:"";position:absolute;inset:0;z-index:-1}
.ibanner__in{position:relative;padding-block:clamp(26px,3.4vw,46px);color:#fff}
.ibanner h1{color:#fff;font-size:clamp(1.6rem,3.6vw,2.9rem);line-height:1.12;max-width:20ch}

.lux .ibanner h1{letter-spacing:-.02em}


/* ============================================================
   1a. PLAIN PAGE HEAD
   ------------------------------------------------------------
   Same job as the banner on task screens — cart, checkout, the
   account area, the auth pages — but with no photograph, so the
   visitor lands straight on the work. Keeps the <h1>, which the
   pages would otherwise lose entirely.
   ============================================================ */
.phead{padding-top:clamp(22px,3vw,38px)}
.phead h1{font-size:clamp(1.45rem,2.9vw,2.3rem);line-height:1.16}
.phead__sub{margin-top:8px;max-width:62ch;font-size:clamp(.86rem,1.1vw,.95rem);
  color:var(--ink-50);line-height:1.6}
.lux .phead h1{letter-spacing:-.02em}


/* ============================================================
   1b. SEARCH SUGGESTIONS
   ------------------------------------------------------------
   Anchored to the header's .search form, which style.css already
   positions; the z-index clears the sticky nav row below it.
   ============================================================ */
.search{position:relative}

.ac{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:75;
  max-height:min(70vh,460px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--card,#fff);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 30px 60px -28px rgba(var(--scrim-rgb),.55);
  animation:ac-in .18s cubic-bezier(.2,.8,.2,1)}
@keyframes ac-in{from{opacity:0;transform:translateY(-6px)}}

.ac__row{display:flex;align-items:center;gap:12px;padding:10px 14px;
  border-bottom:1px solid var(--line);transition:background .16s}
.ac__row:last-of-type{border-bottom:0}
.ac__row:hover{background:var(--wash,var(--green-soft))}
/* the arrow-key row needs to read at a glance — a 6% wash does not, so the
   keyboard state gets a stronger fill plus an accent edge */
.ac__row.is-active{background:var(--wash-2,var(--green-soft));box-shadow:inset 3px 0 0 var(--green)}
.ac__img{flex:none;width:48px;height:48px;border-radius:var(--r-sm);overflow:hidden;background:var(--tint)}
.ac__img img{width:100%;height:100%;object-fit:cover}
.ac__txt{display:grid;gap:1px;min-width:0;margin-right:auto}
.ac__txt b{font-size:.88rem;font-weight:700;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac__txt small{font-size:.74rem;color:var(--ink-50)}
.ac__txt mark{background:transparent;color:var(--green);font-weight:700}
.ac__price{flex:none;display:grid;justify-items:end;gap:1px;
  font-size:.9rem;font-weight:700;color:var(--red)}
.ac__price em{font-style:normal;font-size:.7rem;font-weight:400;color:var(--ink-30)}

.ac__none{padding:18px 16px;text-align:center;font-size:.85rem;color:var(--ink-50)}
.ac__all{display:flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 14px;border-top:1px solid var(--line);background:var(--tint);
  font-size:.82rem;font-weight:700;color:var(--green);transition:background .18s}
.ac__all:hover{background:var(--wash-2,var(--green-soft))}
.ac__all .ic{transition:transform .25s}
.ac__all:hover .ic{transform:translateX(3px)}


/* ============================================================
   2. LISTING SHELL — sidebar + results
   ============================================================ */
.listing{display:grid;grid-template-columns:264px minmax(0,1fr);gap:clamp(20px,2.6vw,38px);align-items:start}
.listing--blog{grid-template-columns:minmax(0,1fr) 300px}
.listing--blog .filters{order:2}
.results{min-width:0}

/* ---------- sidebar ---------- */
.filters{position:sticky;top:86px;display:grid;gap:20px;padding:clamp(16px,1.6vw,22px);
  background:var(--card,#fff);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm)}
.filters__head{display:none;align-items:center;justify-content:space-between}
.filters__head h3{font-size:1.05rem}
.filters__close{position:relative;width:34px;height:34px;border-radius:50%;background:var(--tint)}
.filters__close span{position:absolute;left:9px;top:16px;width:16px;height:2px;border-radius:2px;background:var(--ink)}
.filters__close span:nth-child(1){transform:rotate(45deg)}
.filters__close span:nth-child(2){transform:rotate(-45deg)}

.fgroup{display:grid;gap:11px}
.fgroup+.fgroup{padding-top:20px;border-top:1px solid var(--line)}
.fgroup h6{font-family:var(--ff-body);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-50)}
.fgroup__apply{justify-self:start;margin-top:2px}

.flist{display:grid;gap:2px}
.flist a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 11px;border-radius:var(--r-sm);font-size:.86rem;color:var(--ink-70);
  transition:background .2s,color .2s,transform .25s}
.flist a span{font-size:.72rem;color:var(--ink-30);font-weight:700}
.flist a:hover{background:var(--wash,var(--green-soft));color:var(--green);transform:translateX(3px)}
.flist a.is-on{background:var(--wash-2,var(--green-soft));color:var(--green);font-weight:700}
.flist a.is-on span{color:var(--green)}

.frange{display:flex;align-items:center;gap:8px}
.frange input{width:100%;min-width:0;padding:9px 11px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--bg);font-size:.85rem}
.frange input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--wash,rgba(0,0,0,.05))}
.frange span{color:var(--ink-30)}


/* checkbox that keeps the native input for keyboard and forms */
.fcheck{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--ink-70);cursor:pointer}
.fcheck input{position:absolute;opacity:0;width:1px;height:1px}
.fcheck__box{flex:none;display:grid;place-items:center;width:19px;height:19px;border-radius:6px;
  border:1.5px solid var(--line-2);background:var(--bg);color:transparent;transition:background .2s,border-color .2s,color .2s}

/* The multi-line variant — a sentence with links in it, rather than a short
   phrase that fits on one line.

   It cannot be a flex row. In a flex container every run of text between two
   elements becomes its own anonymous item, so "I agree to the",
   <a>Terms &amp; Conditions</a>, "and" and <a>Privacy Policy</a> were four
   separate items, each wrapping inside itself instead of the sentence
   wrapping as a whole. That is what broke it into a ragged column with each
   link stacked two words wide.

   Block with an absolutely-placed box instead: the text is then ordinary
   inline content that wraps as one sentence, and the links break mid-phrase
   like any other. The padding clears the box, which is 19px plus the 9px gap
   the flex variant used. */
.fcheck--block{display:block;position:relative;padding-left:28px;line-height:1.5}
.fcheck--block .fcheck__box{position:absolute;left:0;top:2px}
.fcheck input:checked+.fcheck__box{background:var(--green);border-color:var(--green);color:#fff}
.fcheck input:focus-visible+.fcheck__box{outline:2px solid var(--green);outline-offset:2px}
.fcheck a{color:var(--green);text-decoration:underline;text-underline-offset:2px}


/* ---------- toolbar ---------- */
.toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px;
  padding:11px 15px;background:var(--card,#fff);border:1px solid var(--line);border-radius:var(--r-md)}
.toolbar__count{font-size:.84rem;color:var(--ink-50)}
.toolbar__count b{color:var(--ink);font-weight:700}
.toolbar__right{display:flex;align-items:center;gap:10px;margin-left:auto}
.toolbar__filters{display:none;align-items:center;gap:8px;font-size:.82rem;font-weight:700;
  padding:8px 14px;border-radius:var(--r-pill);background:var(--wash,var(--green-soft));color:var(--green)}

.viewtoggle{display:flex;gap:2px;padding:3px;border-radius:var(--r-pill);background:var(--tint)}
.viewtoggle button{display:grid;place-items:center;width:32px;height:30px;border-radius:var(--r-pill);
  color:var(--ink-50);transition:background .22s,color .22s}
.viewtoggle button.is-active{background:var(--card,#fff);color:var(--green);box-shadow:var(--shadow-sm)}

.sortsel{position:relative;display:flex;align-items:center}
.sortsel select{appearance:none;-webkit-appearance:none;padding:9px 34px 9px 14px;font-size:.82rem;
  font-weight:700;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--bg);cursor:pointer}
.sortsel select:focus{outline:none;border-color:var(--green)}
.sortsel .ic{position:absolute;right:13px;transform:rotate(90deg);pointer-events:none;color:var(--ink-50)}

/* ---------- results grid ---------- */
.shopgrid--listing{grid-template-columns:repeat(4,1fr)}

/* list view — one row per product, toggled by pages.js */
.shopgrid.is-list{display:grid;grid-template-columns:1fr;gap:14px}
.shopgrid.is-list .prod{display:grid;grid-template-columns:190px minmax(0,1fr)}
.shopgrid.is-list .prod__media{aspect-ratio:1;height:100%}
.shopgrid.is-list .prod__body{align-content:center;gap:9px;padding:clamp(14px,1.6vw,22px)}
.shopgrid.is-list .prod__add{justify-self:start;padding-inline:26px}
.shopgrid.is-list .prod__qty{width:auto;min-width:168px;align-self:flex-start}

/* ---------- pagination ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:clamp(26px,3vw,40px)}
.pager__n,.pager__step{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-width:40px;height:40px;padding-inline:14px;border-radius:var(--r-pill);
  font-size:.84rem;font-weight:700;color:var(--ink-70);border:1px solid var(--line-2);
  transition:background .22s,color .22s,border-color .22s,transform .25s}
.pager__n{padding-inline:0}
.pager__n:hover,.pager__step:hover{background:var(--wash,var(--green-soft));color:var(--green);
  border-color:var(--wash-line,var(--green));transform:translateY(-1px)}
.pager__n.is-on{background:var(--green);border-color:var(--green);color:#fff}
.pager__n.is-on:hover{transform:none}
.pager__step.is-off{opacity:.4;pointer-events:none}

/* ---------- empty state ---------- */
.empty{display:grid;justify-items:center;text-align:center;gap:10px;
  padding:clamp(38px,6vw,76px) 20px;background:var(--card,#fff);
  border:1px dashed var(--line-2);border-radius:var(--r-lg)}
.empty__ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--wash,var(--green-soft));color:var(--green);margin-bottom:4px}
.empty__ic .ic{width:26px;height:26px}
.empty b,.empty h1{font-family:var(--ff-display);font-size:1.15rem}
.empty p{font-size:.88rem;color:var(--ink-50);max-width:42ch}
.empty .btn{margin-top:8px}


/* ============================================================
   3. PRODUCT DETAILS
   ============================================================ */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(22px,3vw,52px);align-items:start}

.pdp__stage{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--tint);
  border:1px solid var(--line);aspect-ratio:1}
.pdp__stage img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.pdp__stage .off{position:absolute;top:14px;left:14px;z-index:2}

/* stage controls — arrows and the zoom button rest at low opacity and
   come forward on hover, so they never fight the photograph */
.pdp__gnav,.pdp__zoom{position:absolute;z-index:2;display:grid;place-items:center;
  width:42px;height:42px;border-radius:50%;background:var(--card,#fff);color:var(--ink-70);
  box-shadow:var(--shadow-md);opacity:0;
  transition:opacity .25s,transform .25s,background .25s,color .25s}
.pdp__stage:hover .pdp__gnav,.pdp__stage:hover .pdp__zoom{opacity:1}
.pdp__gnav:hover,.pdp__zoom:hover{background:var(--green);color:#fff;transform:scale(1.06)}
.pdp__gnav:focus-visible,.pdp__zoom:focus-visible{opacity:1;outline:2px solid var(--green);outline-offset:2px}
.pdp__gnav{top:50%;margin-top:-21px}
.pdp__gnav--prev{left:12px}
.pdp__gnav--next{right:12px}
.pdp__zoom{top:12px;right:12px;width:38px;height:38px}
.pdp__zoom .ic{width:17px;height:17px}
.pdp__count{position:absolute;z-index:2;left:50%;bottom:12px;transform:translateX(-50%);
  padding:4px 12px;border-radius:var(--r-pill);background:rgba(var(--scrim-rgb),.72);
  color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.04em}
/* touch devices have no hover, so the controls must sit visible */
@media (hover:none),(pointer:coarse){
  .pdp__gnav,.pdp__zoom{opacity:1}
}

.pdp__thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pdp__thumbs button{width:74px;height:74px;border-radius:var(--r-sm);overflow:hidden;
  border:2px solid transparent;background:var(--tint);transition:border-color .22s,transform .25s}
.pdp__thumbs button:hover{transform:translateY(-2px)}
.pdp__thumbs button.is-active{border-color:var(--green)}
.pdp__thumbs button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.pdp__thumbs img{width:100%;height:100%;object-fit:cover}

/* On desktop the thumb strip stands to the LEFT of the stage as a column.
   Below 1025px the whole .pdp collapses to one column, so the strip drops
   back under the main image where it has the width to run across.
   The stage stays first in the source — only the placement is swapped. */
@media (min-width:1025px){
  .pdp__gallery--rail{display:grid;grid-template-columns:74px minmax(0,1fr);
    gap:12px;align-items:start}
  .pdp__gallery--rail .pdp__stage{grid-area:1/2}
  .pdp__gallery--rail .pdp__thumbs{grid-area:1/1;flex-direction:column;flex-wrap:nowrap;margin-top:0}
}

/* a combo's pack shot has no gallery behind it, so no zoom affordance */
.pdp__stage--static img{cursor:default}

/* ---------- full-screen viewer ---------- */
.lightbox{position:fixed;inset:0;z-index:95;display:grid;place-items:center;
  padding:clamp(16px,4vw,52px);background:rgba(var(--scrim-rgb),.94)}
.lightbox__stage{position:relative;display:grid;place-items:center;width:100%;height:100%}
.lightbox__stage img{max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:var(--r-md);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.lightbox__nav,.lightbox__close{position:absolute;display:grid;place-items:center;
  width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .22s,transform .22s}
.lightbox__nav:hover,.lightbox__close:hover{background:var(--green);transform:scale(1.06)}
.lightbox__nav:focus-visible,.lightbox__close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lightbox__nav--prev{left:0;top:50%;margin-top:-24px}
.lightbox__nav--next{right:0;top:50%;margin-top:-24px}
.lightbox__close{position:fixed;top:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px)}
.lightbox__count{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  padding:5px 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.14);
  color:#fff;font-size:.78rem;font-weight:700}

.pdp__info{display:grid;gap:14px}
.pdp__cat{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--green)}
.pdp__info h1,.pdp__info h2{font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.18}
.pdp__rating{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:.83rem;color:var(--ink-50)}
.pdp__stock{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-weight:700;
  padding:3px 10px;border-radius:var(--r-pill);background:var(--wash,var(--green-soft));color:var(--green)}
.pdp__price{align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.pdp__price b{font-size:clamp(1.5rem,2.6vw,2rem)}
.lux .pdp__price b{font-size:clamp(1.5rem,2.6vw,2rem)}
.pdp__price s{font-size:1rem}
.pdp__save{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 11px;border-radius:var(--r-pill);background:var(--green);color:#fff}
.pdp__blurb{font-size:.92rem;color:var(--ink-70);line-height:1.68}

.pdp__field h6{font-family:var(--ff-body);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-50);margin-bottom:9px}
/* size chips: boxy outlined cards, each led by a pack glyph, with the chosen
   one filled solid so the choice reads at a glance */
.pdp__vars{display:flex;gap:10px;flex-wrap:wrap}
.pdp__vars button{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:104px;padding:13px 18px;border-radius:var(--r-xs);border:1px solid var(--line-2);
  font-size:.85rem;font-weight:700;letter-spacing:.01em;color:var(--ink-70);background:var(--bg);
  transition:background .22s,color .22s,border-color .22s,transform .25s}
.pdp__vars button .ic{width:17px;height:17px;flex:none;opacity:.75}
.pdp__vars button:hover{border-color:var(--green);color:var(--green);transform:translateY(-1px)}
.pdp__vars button.is-active{background:var(--green);border-color:var(--green);color:#fff}
.pdp__vars button.is-active .ic{opacity:1}

.pdp__buy{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-pill);
  overflow:hidden;background:var(--bg)}
.qty button{width:40px;height:46px;font-size:1.1rem;font-weight:700;color:var(--ink-70);
  transition:background .2s,color .2s}
.qty button:hover{background:var(--wash,var(--green-soft));color:var(--green)}
/* buy-box stepper: two solid round keys in the theme green at the ends of a
   soft pill, with the count sitting between them. 36px keys inside 4px
   padding and a 1px border come to 46px — the same height as the Add to Cart
   button beside it, and the same 0.78 key-to-pill ratio as the reference. */
.pdp__buy .qty{gap:6px;padding:4px;background:var(--bg-2,var(--tint));
  border:1px solid var(--line-2);overflow:visible;
  box-shadow:0 6px 16px -12px rgba(0,0,0,.45)}
.pdp__buy .qty button{flex:0 0 36px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--green);color:#fff;
  font-size:1.2rem;line-height:1;transition:background .2s,transform .2s}
.pdp__buy .qty button:hover{background:var(--green-dark);color:#fff;transform:scale(1.06)}
.pdp__buy .qty button:active{transform:scale(.95)}
.pdp__buy .qty input{width:52px;height:36px;font-size:1rem;color:var(--ink)}
.qty input{width:44px;height:46px;border:0;background:none;text-align:center;font-weight:700;font-size:.95rem}
.qty input:focus{outline:none}
.pdp__add{flex:1;min-width:190px;height:46px}
.pdp__buynow{height:46px}

.pdp__meta{display:grid;gap:9px;font-size:.83rem;padding-top:14px;border-top:1px solid var(--line)}
.pdp__meta>div{display:flex;gap:10px}
.pdp__meta dt{min-width:78px;color:var(--ink-50)}
.pdp__meta dd{font-weight:700}
.pdp__meta a{color:var(--green)}

/* ---------- description / how-to-use accordion ----------
   One collapsible card in the buy column, holding both sections as tabs.
   --acc / --acc-soft carry the accent through the whole block and move
   with the active tab: green for Description, gold for How to use. */
.pacc{display:grid;margin-top:4px}
.pacc__item{--acc:var(--green);--acc-soft:var(--green-soft);
  border-radius:var(--r-md);overflow:hidden;background:var(--acc);
  box-shadow:0 16px 34px -26px rgba(0,0,0,.85);transition:background .3s}
.pacc__item.is-use{--acc:var(--gold,#D9A441);--acc-soft:#FBF0DC}

/* solid accent header bar, white type, chevron flipping on open */
.pacc__item summary{display:flex;align-items:center;gap:11px;padding:14px 15px;cursor:pointer;
  list-style:none;font-family:var(--ff-display);font-size:.95rem;font-weight:700;color:#fff;
  background:var(--acc);transition:background .3s}
.pacc__item summary::-webkit-details-marker{display:none}
.pacc__item summary:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.pacc__ic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.22);color:#fff}
.pacc__ic .ic{width:16px;height:16px}
.pacc__chev{width:16px;height:16px;flex:none;margin-left:auto;color:#fff;
  transform:rotate(90deg);transition:transform .3s}
.pacc__item[open] .pacc__chev{transform:rotate(-90deg)}

/* tinted tray holding white cards, the way the reference stacks its offers */
.pacc__body{display:grid;gap:10px;padding:10px;background:var(--acc-soft);transition:background .3s}
.pacc__body p{font-size:.88rem;color:var(--ink-70);line-height:1.72}
.pacc__body .ticklist .ic{color:var(--acc)}

/* segmented tab bar on its own white card */
.pacc__tabs{display:flex;gap:4px;padding:4px;border-radius:var(--r-sm);
  background:var(--card,#fff);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.pacc__tabs button{flex:1;padding:9px 10px;border-radius:var(--r-xs);font-size:.83rem;font-weight:700;
  white-space:nowrap;color:var(--ink-50);transition:background .22s,color .22s}
.pacc__tabs button:hover{color:var(--acc)}
.pacc__tabs button.is-active{background:var(--acc);color:#fff}

.pacc__panel{display:none}
.pacc__panel.is-active{display:grid;gap:13px;padding:14px;border-radius:var(--r-sm);
  background:var(--card,#fff);box-shadow:0 1px 3px rgba(0,0,0,.06)}

.usegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.usegrid>div{display:grid;gap:3px;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--acc-soft,var(--tint))}
.usegrid b{font-size:.84rem;color:var(--acc,var(--ink))}
.usegrid span{font-size:.8rem;color:var(--ink-50)}


/* ---------- what's inside: tinted icon discs under the product ---------- */
.inside{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,26px);
  margin-top:clamp(26px,3.4vw,46px);padding-top:clamp(22px,2.6vw,34px);
  border-top:1px solid var(--line);text-align:center}
.inside li{display:grid;justify-items:center;gap:11px}
.inside__disc{display:grid;place-items:center;width:clamp(58px,6vw,74px);aspect-ratio:1;
  border-radius:50%;background:var(--gold-soft,#FBF0DC);color:var(--gold,#D9A441);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s,color .25s}
.inside__disc .ic{width:46%;height:46%}
.inside li:hover .inside__disc{transform:translateY(-4px);background:var(--gold,#D9A441);color:#fff}
.inside b{font-size:.82rem;font-weight:700;color:var(--ink-70);line-height:1.35;max-width:14ch}


/* ---------- ratings & reviews ---------- */
.revsec__count{font-size:.84rem;font-weight:700;color:var(--ink-50)}
.pdp__revlink{color:var(--green);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}

.rev{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(18px,2.4vw,34px);align-items:start}

/* summary column */
.rev__summary{display:grid;gap:18px;padding:clamp(18px,2vw,24px);border-radius:var(--r-lg);
  background:var(--card,#fff);border:1px solid var(--line);position:sticky;top:88px}
.rev__score{display:grid;justify-items:center;gap:7px;text-align:center;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.rev__score b{font-family:var(--ff-display);font-size:2.9rem;line-height:1;color:var(--ink)}
.rev__score .stars{font-size:1.05rem}
.rev__score span{font-size:.79rem;color:var(--ink-50)}
/* a product nobody has reviewed yet: say so, rather than show an empty
   star row and a score of zero */
.rev__score--none{padding:18px 0}
.rev__score--none span{font-size:.85rem}

.rev__bars{display:grid;gap:8px}
.rev__bars li{display:grid;grid-template-columns:34px minmax(0,1fr) 40px;align-items:center;gap:10px}
.rev__bars-n{display:inline-flex;align-items:center;gap:3px;font-size:.79rem;font-weight:700;color:var(--ink-70)}
.rev__bars-n i{font-style:normal;color:var(--star)}
.rev__bars i{display:block;height:7px;border-radius:var(--r-pill);background:var(--tint);overflow:hidden}
.rev__bars em{display:block;height:100%;border-radius:var(--r-pill);background:var(--star)}
.rev__bars small{font-size:.76rem;color:var(--ink-50);text-align:right}

/* the login gate in place of a write-a-review form */
.rev__gate{display:grid;justify-items:center;gap:8px;text-align:center;
  padding:18px 16px;border-radius:var(--r-md);background:var(--wash,var(--green-soft));
  border:1px dashed var(--wash-line,var(--line-2))}
.rev__gate-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--green);color:#fff}
.rev__gate-ic .ic{width:19px;height:19px}
.rev__gate b{font-family:var(--ff-display);font-size:.92rem;line-height:1.35}
.rev__gate p{font-size:.8rem;color:var(--ink-50);line-height:1.6}
.rev__gate .btn{margin-top:4px}
.rev__gate small{font-size:.76rem;color:var(--ink-50)}
.rev__gate small a{color:var(--green);font-weight:700}

/* ---------- writing a review ----------
   The star picker is five radio buttons. They are printed 5 first so
   the "checked ~ label" rule below can colour the chosen star and every
   one after it in source order, which is every LOWER star on screen —
   which is why the row itself is reversed. No JavaScript involved. */
.revform{display:grid;gap:12px;margin-top:14px;padding:16px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--tint)}
.revform h4{font-family:var(--ff-display);font-size:.98rem}
.revform__who{font-size:.8rem;color:var(--ink-50);margin:-6px 0 0}
.revform__note{font-size:.74rem;color:var(--ink-50)}
.revform .field{display:grid;gap:5px}
.revform label{font-size:.8rem;font-weight:700}
.revform label em{font-style:normal;font-weight:400;color:var(--ink-50)}
.revform input[type=text],
.revform textarea{width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--card,#fff);font:inherit;font-size:.86rem;color:inherit}
.revform input[type=text]:focus,
.revform textarea:focus{outline:none;border-color:var(--green)}
.revform textarea{resize:vertical;min-height:86px}

.revform__stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.revform__stars input{position:absolute;opacity:0;width:1px;height:1px}
.revform__stars label{font-size:1.6rem;line-height:1;color:var(--line-2);cursor:pointer;
  transition:color .15s;padding:0 1px}
.revform__stars label:hover,
.revform__stars label:hover ~ label,
.revform__stars input:checked ~ label{color:var(--amber,#F5891F)}
.revform__stars input:focus-visible + label{outline:2px solid var(--green);outline-offset:2px;border-radius:3px}

/* the review cards */
.rev__list{display:grid;gap:12px}
.rev__card{display:grid;gap:9px;padding:clamp(16px,1.8vw,22px);border-radius:var(--r-md);
  background:var(--card,#fff);border:1px solid var(--line);
  transition:border-color .25s,box-shadow .25s}
.rev__card:hover{border-color:transparent;box-shadow:0 18px 36px -28px rgba(0,0,0,.8)}
.rev__card header{display:flex;align-items:center;gap:11px}
.rev__avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--green-soft);color:var(--green);
  font-family:var(--ff-display);font-size:1rem;font-weight:700}
.rev__card header b{display:block;font-size:.88rem;line-height:1.3}
.rev__verified{display:inline-flex;align-items:center;gap:4px;font-style:normal;
  font-size:.72rem;font-weight:700;color:var(--green)}
.rev__card time{margin-left:auto;font-size:.75rem;color:var(--ink-30);white-space:nowrap}
.rev__card h4{font-size:.92rem;line-height:1.35}
.rev__card p{font-size:.87rem;color:var(--ink-70);line-height:1.7}


/* ============================================================
   3b. COMBOS
   ------------------------------------------------------------
   A combo card carries more than a product card does: the list
   of what is inside, the saving, and its own quantity stepper.
   ============================================================ */
/* Three across. The step down runs 3 → 2 at 1024px → 1 at 860px, so a card
   never has to carry its picture, its title and its list of contents in less
   room than it needs. minmax(0,1fr), not 1fr: a grid column is min-content
   wide by default, and the pill list inside a combo refuses to shrink below
   its widest pill, which would push the row wider than the container. */
.combogrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}

.combo{display:flex;flex-direction:column;background:var(--card,#fff);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.combo:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:transparent}

.combo__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--tint)}
.combo__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.combo:hover .combo__media img{transform:scale(1.05)}
.combo__media .off{position:absolute;top:12px;left:12px;z-index:2}
.combo__count{position:absolute;right:12px;bottom:12px;z-index:2;padding:4px 12px;
  border-radius:var(--r-pill);background:rgba(var(--scrim-rgb),.78);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.04em}

.combo__body{display:flex;flex-direction:column;gap:12px;padding:clamp(15px,1.8vw,22px);flex:1}
.combo__body h4{font-size:1.08rem;line-height:1.3}
.combo__body h4 a{transition:color .22s}
.combo__body h4 a:hover{color:var(--green)}

/* ------------------------------------------------------------
   WHAT THE BOX IS FOR
   ------------------------------------------------------------
   The card carries the box's description, not a list of what is
   inside it. The chip cluster that used to sit here — one chip
   per item, capped at eight with an "and N more" — is gone, and
   its rules with it, since nothing else used them.

   Clamped to two lines. The blurbs written so far run 112 to 150
   characters, which is three lines at this width, so this does
   cut them — the tail is replaced with an ellipsis and the whole
   description stays readable on the box's own page. Shortening
   the copy in the admin to about 100 characters is what makes a
   card read as a finished sentence rather than a trimmed one.
   ------------------------------------------------------------ */
.combo__blurb{font-size:.85rem;line-height:1.6;color:var(--ink-70);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.combo__foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:auto;padding-top:4px}
.combo__save{font-size:.76rem;font-weight:700;color:var(--green)}

.combo__buy{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.combo__buy .qty button{width:34px;height:42px}
.combo__buy .qty input{width:38px;height:42px}
.combo__add{flex:1;min-width:150px;height:42px}

/* the three reassurance tiles under the grid */
.combowhy{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.combowhy>div{display:grid;gap:4px;padding:clamp(16px,1.8vw,22px);border-radius:var(--r-lg);
  background:var(--wash,var(--green-soft));border:1px solid var(--line)}
.combowhy__ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--card,#fff);color:var(--green);margin-bottom:6px}
.combowhy b{font-family:var(--ff-display);font-size:.96rem}
.combowhy span{font-size:.82rem;color:var(--ink-50);line-height:1.5}

/* ---------- what's included ---------- */
.included{margin-top:clamp(30px,4vw,54px);padding:clamp(20px,2.4vw,34px);background:var(--card,#fff);
  border:1px solid var(--line);border-radius:var(--r-lg)}
.included__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.included__head h3{font-size:1.15rem}
.included__head span{font-size:.8rem;color:var(--ink-50);font-weight:700}

.included__list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.incl{display:flex;align-items:center;gap:13px;padding:12px;border-radius:var(--r-md);
  background:var(--tint);transition:background .22s}
.incl:hover{background:var(--wash,var(--green-soft))}
.incl__img{flex:none;width:60px;height:60px;border-radius:var(--r-sm);overflow:hidden;background:var(--card,#fff)}
.incl__img img{width:100%;height:100%;object-fit:cover}
.incl__txt{display:grid;gap:2px;min-width:0;margin-right:auto}
.incl__txt b{font-size:.9rem;line-height:1.3}
.incl__txt b a{transition:color .2s}
.incl__txt b a:hover{color:var(--green)}
.incl__txt small{font-size:.78rem;color:var(--ink-50)}
.incl__qty{flex:none;font-size:.82rem;font-weight:700;color:var(--green);
  padding:4px 10px;border-radius:var(--r-pill);background:var(--card,#fff)}

.included__note{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-2);
  font-size:.86rem;color:var(--ink-70);line-height:1.6}
.included__note b{color:var(--ink)}


/* ============================================================
   4. CART PAGE
   ============================================================ */
.cartpage{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(20px,2.6vw,36px);align-items:start}

.ctable{background:var(--card,#fff);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ctable__head,.crow{display:grid;grid-template-columns:minmax(0,1fr) 110px 140px 110px 46px;
  align-items:center;gap:14px;padding:14px clamp(14px,1.6vw,20px)}
.ctable__head{background:var(--tint);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--ink-50)}
.crow{border-top:1px solid var(--line)}
.crow__prod{display:flex;align-items:center;gap:13px;min-width:0}
.crow__img{flex:none;width:70px;height:70px;border-radius:var(--r-sm);overflow:hidden;background:var(--tint)}
.crow__img img{width:100%;height:100%;object-fit:cover}
.crow__txt{display:grid;gap:3px;min-width:0}
.crow__name{font-family:var(--ff-display);font-size:.92rem;font-weight:700;line-height:1.3}
.crow__var{font-size:.76rem;color:var(--ink-50)}
.crow__price,.crow__total{font-weight:700;font-size:.92rem}
.crow__total{color:var(--red)}
.crow .qty button{width:34px;height:38px}
.crow .qty input{width:38px;height:38px}
.crow__del{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  color:var(--ink-30);transition:background .2s,color .2s}
.crow__del:hover{background:var(--wash,var(--green-soft));color:var(--red)}

.cartpage__acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

.summary{position:sticky;top:86px;display:grid;gap:11px;padding:clamp(18px,2vw,26px);
  background:var(--card,#fff);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.summary h3{font-size:1.1rem;margin-bottom:3px}
.summary__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.88rem;color:var(--ink-70)}
.summary__row b{font-weight:700;color:var(--ink)}
.summary__row--total{padding-top:11px;border-top:1px solid var(--line);font-size:1rem}
.summary__row--total b{font-family:var(--ff-display);font-size:1.3rem;color:var(--red)}
.summary__note{font-size:.76rem;color:var(--ink-50);line-height:1.45}
.summary__note b{color:var(--green)}
/* the "(2.4 kg)" beside the Delivery label, in the drawer and on the cart page */
.summary__row em,.cart__row em{font-style:normal;font-size:.78rem;color:var(--ink-30);font-weight:400}
.crow__wt{font-style:normal;color:var(--ink-30)}
.crow__wt::before{content:"· "}

/* delivery rate table, collapsed by default */
.ratecard{margin-top:4px;border-top:1px solid var(--line);padding-top:12px}
.ratecard summary{display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  font-size:.79rem;font-weight:700;color:var(--green)}
.ratecard summary::-webkit-details-marker{display:none}
.ratecard summary .ic{flex:none}
.ratecard ul{display:grid;gap:5px;margin-top:10px}
.ratecard li{display:flex;justify-content:space-between;gap:12px;font-size:.78rem;color:var(--ink-50)}
.ratecard li b{color:var(--ink);font-weight:700}
.ratecard li:last-child{padding-top:5px;border-top:1px dashed var(--line-2)}
.ratecard p{margin-top:9px;font-size:.73rem;color:var(--ink-30);line-height:1.45}
.summary__go{width:100%;margin-top:6px}
/* WhatsApp's own brand green — deliberately outside the palette tokens, the
   same way a Google or Facebook mark would be. */
/* shown under the button when the visitor is not signed in yet */
.summary__signin{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted);text-align:center}
.summary__signin a{color:var(--green);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.summary__wa{width:100%;margin-top:8px;background:#25D366;color:#0B2C18}
.summary__wa:hover{background:#1EBE5A;color:#0B2C18}
.lux .summary__wa{background:#25D366;box-shadow:0 14px 26px -16px rgba(37,211,102,.9)}
.lux .summary__wa:hover{background:#1EBE5A}
.summary__wa .ic{width:18px;height:18px}
.summary__wa:hover .ic{transform:none}
.summary__perks{display:grid;gap:8px;margin-top:6px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--ink-50)}
.summary__perks li{display:flex;align-items:center;gap:8px}
.summary__perks .ic{color:var(--green)}


/* ============================================================
   4b. CHECKOUT
   ============================================================ */
.checkout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(20px,2.6vw,36px);align-items:start}
.checkout__main{display:grid;gap:clamp(14px,1.8vw,20px)}

.cbox{padding:clamp(18px,2.2vw,28px);background:var(--card,#fff);border:1px solid var(--line);
  border-radius:var(--r-lg);display:grid;gap:14px}
.cbox__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cbox__head h3{font-size:1.05rem;margin-right:auto}
.cbox__n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--green);color:#fff;font-family:var(--ff-body);font-size:.82rem;font-weight:700}
.cbox__add{font-size:.82rem;font-weight:700;color:var(--green);padding:6px 12px;border-radius:var(--r-pill);
  background:var(--wash,var(--green-soft));transition:background .2s}
.cbox__add:hover{background:var(--wash-2,var(--green-soft))}
.cbox--confirm{gap:10px}
.cbox--confirm .form__submit{margin-top:2px}

/* radio cards — addresses, slots, payment methods */
.pickers{display:grid;gap:10px}
.picker{position:relative;display:block;cursor:pointer}
.picker input{position:absolute;opacity:0;width:1px;height:1px}
.picker__box{display:grid;gap:2px;padding:13px 15px;padding-right:40px;border-radius:var(--r-md);
  border:1.5px solid var(--line-2);background:var(--bg);transition:border-color .2s,background .2s}
.picker__box b{font-size:.9rem;display:flex;align-items:center;gap:8px}
.picker__box b em{font-style:normal;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:var(--r-pill);background:var(--green);color:#fff}
.picker__box small{font-size:.79rem;color:var(--ink-50);line-height:1.45}
.picker:hover .picker__box{border-color:var(--wash-line,var(--green))}
.picker input:checked+.picker__box{border-color:var(--green);background:var(--wash,var(--green-soft))}
.picker input:focus-visible+.picker__box{outline:2px solid var(--green);outline-offset:2px}
/* the tick that marks the chosen card */
.picker__box::after{content:"";position:absolute;right:14px;top:15px;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--line-2);background:var(--card,#fff);transition:border-color .2s,box-shadow .2s}
.picker input:checked+.picker__box::after{border-color:var(--green);box-shadow:inset 0 0 0 4px var(--green)}
.picker__del{position:absolute;right:12px;bottom:10px;width:26px;height:26px;border-radius:50%;
  font-size:1.1rem;line-height:1;color:var(--ink-30);transition:background .2s,color .2s}
.picker__del:hover{background:var(--tint);color:var(--red)}

.newaddr{display:grid;gap:14px;padding:clamp(15px,1.8vw,20px);border-radius:var(--r-md);
  background:var(--tint);border:1px dashed var(--line-2)}
.newaddr__title{font-size:.95rem}
.newaddr__acts{display:flex;gap:9px;flex-wrap:wrap;margin-top: 20px;}

/* summary line items */
.colines{display:grid;gap:10px;padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.colines li{display:flex;align-items:center;gap:11px}
.coline__img{position:relative;flex:none;width:46px;height:46px;border-radius:var(--r-sm);
  overflow:hidden;background:var(--tint)}
.coline__img img{width:100%;height:100%;object-fit:cover}
.coline__img em{position:absolute;right:-4px;top:-4px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-pill);background:var(--green);color:#fff;
  font-style:normal;font-size:.66rem;font-weight:700}
.coline__txt{display:grid;gap:1px;min-width:0;margin-right:auto}
.coline__txt b{font-size:.84rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coline__txt small{font-size:.73rem;color:var(--ink-50)}
.coline__price{flex:none;font-size:.86rem;font-weight:700}

/* coupon, compact enough for the summary column */
.coupon--slim{margin:0 0 6px;padding:13px 14px;border-radius:var(--r-md);
  border:1px dashed var(--line-2);background:var(--tint);display:grid;gap:9px}
.coupon--slim label{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700}
.coupon--slim label .ic{color:var(--green)}
.coupon--slim .coupon__row{display:flex;gap:8px}
.coupon--slim input{flex:1;min-width:0;padding:10px 13px;border:1px solid var(--line-2);
  border-radius:var(--r-pill);background:var(--card,#fff);font-size:.82rem}
.coupon--slim input:focus{outline:none;border-color:var(--green)}
.coupon__msg{font-size:.77rem;line-height:1.4}
.coupon__msg.is-ok{color:var(--green)}
.coupon__msg.is-bad{color:var(--red)}
.coupon__x{margin-left:5px;font-size:1rem;line-height:1;color:var(--ink-30)}
.coupon__x:hover{color:var(--red)}

/* the live coupons, listed under the box so nobody has to guess a code */
.coupon__offers{display:grid;gap:7px;margin-top:10px;padding-top:10px;
  border-top:1px dashed var(--line-2)}
.coupon__offers li{display:flex;align-items:center;gap:9px;font-size:.75rem;color:var(--ink-50);
  line-height:1.4}
.coupon__pick{flex:none;font-size:.72rem;font-weight:800;letter-spacing:.05em;padding:4px 9px;
  border:1px dashed var(--green);border-radius:var(--r-sm);color:var(--green);background:none;
  cursor:pointer;transition:background .2s,color .2s}
.coupon__pick:hover{background:var(--green);color:#fff}

/* the new-address form is its own <form>, so saving one cannot place an order */
.newaddr-box{margin-top:clamp(12px,1.6vw,18px)}
.cbox__hint{font-size:.85rem;color:var(--ink-50);line-height:1.55;margin:0}
.dd-empty{color:var(--ink-30);font-style:italic}
.summary__row--off b{color:var(--green)}
.summary__row--off em{font-style:normal;font-size:.72rem;color:var(--green);font-weight:700}

/* order-placed confirmation */
.placed{display:grid;justify-items:center;text-align:center;gap:11px;
  padding:clamp(38px,6vw,76px) 20px;background:var(--card,#fff);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.placed__ic{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;
  background:var(--green);color:#fff;margin-bottom:4px}
.placed__ic .ic{width:32px;height:32px}
.placed h2{font-size:clamp(1.3rem,2.2vw,1.8rem)}
.placed p{font-size:.9rem;color:var(--ink-50);max-width:52ch;line-height:1.65}
.placed__acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
/* the same panel sitting above the order it confirms */
.placed--inline{margin-bottom:clamp(14px,2vw,22px);background:var(--tint);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px)}
.placed--inline h2{margin:0}


/* ============================================================
   4c. ACCOUNT AREA
   ============================================================ */
.acctwrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(20px,2.6vw,36px);align-items:start}
.acctmain{display:grid;gap:clamp(14px,1.8vw,22px);min-width:0}

.acctnav{position:sticky;top:86px;display:grid;gap:16px;padding:clamp(16px,1.8vw,22px);
  background:var(--card,#fff);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.acctnav__who{display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.acctnav__avatar{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--green);color:#fff;font-family:var(--ff-display);font-size:1.1rem;font-weight:700}
.acctnav__who b{display:block;font-size:.9rem;line-height:1.25}
.acctnav__who small{display:block;font-size:.74rem;color:var(--ink-50);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.acctnav__links{display:grid;gap:2px}
.acctnav__links a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);
  font-size:.86rem;color:var(--ink-70);transition:background .2s,color .2s,transform .25s}
.acctnav__links a .ic{width:17px;height:17px;color:var(--ink-30);transition:color .2s}
.acctnav__links a:hover{background:var(--wash,var(--green-soft));color:var(--green);transform:translateX(3px)}
.acctnav__links a:hover .ic{color:var(--green)}
.acctnav__links a.is-on{background:var(--wash-2,var(--green-soft));color:var(--green);font-weight:700}
.acctnav__links a.is-on .ic{color:var(--green)}
.acctnav__out{margin-top:6px;padding-top:12px!important;border-top:1px solid var(--line);border-radius:0!important}
.acctnav__out:hover{color:var(--red)!important}
.acctnav__out:hover .ic{color:var(--red)!important}

.acctstats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,16px)}
.acctstats>div{display:grid;gap:2px;padding:clamp(14px,1.6vw,20px);border-radius:var(--r-lg);
  background:var(--wash,var(--green-soft));border:1px solid var(--line);text-align:center}
.acctstats b{font-family:var(--ff-display);font-size:1.25rem;color:var(--green);line-height:1.1}
.acctstats span{font-size:.74rem;color:var(--ink-50)}

.panel{padding:clamp(18px,2.2vw,28px);background:var(--card,#fff);border:1px solid var(--line);
  border-radius:var(--r-lg)}
.panel--form{max-width:560px}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.panel__head h3{font-size:1.05rem}
.panel__sub{display:block;font-size:.78rem;color:var(--ink-50);font-weight:400;margin-top:2px}

/* status pill */
.badge-st{flex:none;padding:4px 12px;border-radius:var(--r-pill);font-size:.72rem;font-weight:700;
  letter-spacing:.04em;background:var(--tint);color:var(--ink-70)}
.badge-st.is-wait{background:#FDF0D8;color:#8A5D06}
.badge-st.is-ship{background:#DFEDFB;color:#14548F}
.badge-st.is-done{background:var(--green-soft);color:var(--green-dark)}
.badge-st.is-off{background:#F6E1DD;color:#9A3520}


.profile{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.profile dt{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50);margin-bottom:3px}
.profile dd{font-size:.9rem;font-weight:700;overflow-wrap:anywhere}
.profile dd a{transition:color .2s}
.profile dd a:hover{color:var(--green)}
/* the account page's own grid — four across on a wide screen */
.profile--wide{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px 20px;
  padding-top:18px;border-top:1px solid var(--line)}

/* ---------- user information card ---------- */
/* Baseline, not centre. Centring put the two buttons on the right level with
   the middle of the whole left-hand block — which is the customer-ID line, not
   the name they belong to. Aligning baselines sets the button labels on the
   name's own baseline, and keeps doing so as the heading size clamps up and
   down. The avatar opts back out: it has no text to align, so it stays
   centred against the block as before. */
.userbox__top{display:flex;align-items:baseline;gap:clamp(13px,1.6vw,20px);flex-wrap:wrap}
.userbox__avatar{align-self:center;
  flex:none;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;
  background:var(--grad-green,var(--green));color:#fff;
  font-family:var(--ff-display);font-size:1.35rem;font-weight:700;letter-spacing:.02em}
.userbox__id{margin-right:auto;min-width:0;margin-bottom: 20px;}
.userbox__id h3{font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.2}
.userbox__id small{display:block;margin-top:3px;font-size:.79rem;color:var(--ink-50)}
.userbox__tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.tag-ok{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:.71rem;font-weight:700;
  padding:3px 10px;border-radius:var(--r-pill);background:var(--green-soft);color:var(--green-dark,var(--green))}
.tag-ok .ic{width:12px;height:12px}
.userbox__acts{flex:none;display:flex;gap:8px;flex-wrap:wrap;margin-bottom: 20px;}
/* the card already carries the profile grid, so drop the panel head rule */
.userbox .panel__head{margin-bottom:0}

/* inline edit panel — same shell as the checkout address form */
.pfform{margin-top:18px}
.pfform__reset{margin-left:auto;font-size:.78rem;font-weight:700;color:var(--ink-50);
  text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.pfform__reset:hover{color:var(--red)}
.pfform .newaddr__acts{align-items:center}
.pfform .form__note{text-align:left;margin-top:2px}

/* ---------- orders list ---------- */
.tabs--orders{flex-wrap:wrap}
.tabs--orders .tab{display:inline-flex;align-items:center;gap:7px}
.tabs--orders .tab em{font-style:normal;font-size:.7rem;padding:1px 7px;border-radius:var(--r-pill);
  background:var(--tint);color:var(--ink-50)}
.tabs--orders .tab.is-active em{background:rgba(255,255,255,.25);color:inherit}

.ocards{display:grid;gap:clamp(12px,1.6vw,18px)}
.ocard{background:var(--card,#fff);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ocard__head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px clamp(15px,1.8vw,22px);background:var(--tint);border-bottom:1px solid var(--line)}
.ocard__head b{font-size:.92rem}
.ocard__head small{display:block;font-size:.76rem;color:var(--ink-50);margin-top:2px}

.ocard__items{display:grid;gap:2px;padding:8px clamp(10px,1.4vw,16px)}
.ocard__items li{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:var(--r-sm)}
.ocard__items li:hover{background:var(--tint)}
.ocard__items--full li{padding:11px 8px;border-bottom:1px solid var(--line)}
.ocard__items--full li:last-child{border-bottom:0}
.ocard__img{flex:none;width:46px;height:46px;border-radius:var(--r-sm);overflow:hidden;background:var(--tint)}
.ocard__img img{width:100%;height:100%;object-fit:cover}
.ocard__txt{display:grid;gap:1px;min-width:0;margin-right:auto}
.ocard__txt b{font-size:.86rem;line-height:1.3}
.ocard__txt b a:hover{color:var(--green)}
.ocard__txt small{font-size:.75rem;color:var(--ink-50)}
.ocard__qty{flex:none;font-size:.82rem;font-weight:700;color:var(--ink-50)}
.ocard__line{flex:none;font-size:.86rem;font-weight:700}

.ocard__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:13px clamp(15px,1.8vw,22px);border-top:1px solid var(--line)}
.ocard__total{font-size:.85rem;color:var(--ink-50)}
.ocard__total b{font-family:var(--ff-display);font-size:1.1rem;color:var(--red);margin-left:6px}
.ocard__acts{display:flex;gap:9px;flex-wrap:wrap}

/* ---------- orders, as accordions ----------
   Built on <details>/<summary>, so open and closed is the browser's
   job and the list still works with no JavaScript at all. */
.oacc{display:grid;gap:clamp(10px,1.4vw,14px)}
.oacc__item{background:var(--card,#fff);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:border-color .25s,box-shadow .25s}
.oacc__item[open]{border-color:var(--green-20,var(--line-2));box-shadow:0 18px 40px -30px rgba(20,72,31,.55)}
.oacc__item + .oacc__item{margin-top:0}

.oacc__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px clamp(15px,1.8vw,22px);background:var(--tint);cursor:pointer;list-style:none;
  transition:background .25s}
.oacc__head::-webkit-details-marker{display:none}
.oacc__head:hover{background:var(--line)}
.oacc__item[open] .oacc__head{border-bottom:1px solid var(--line)}
.oacc__id{min-width:0}
.oacc__id b{font-size:.95rem}
.oacc__id small{display:block;font-size:.76rem;color:var(--ink-50);margin-top:2px}
.oacc__right{display:flex;align-items:center;gap:12px;margin-left:auto}
.oacc__total{font-family:var(--ff-display);font-size:1.05rem;color:var(--red)}
.oacc__chev{flex:none;width:16px;height:16px;color:var(--ink-50);transform:rotate(90deg);
  transition:transform .3s}
.oacc__item[open] .oacc__chev{transform:rotate(-90deg)}

.oacc__body{padding:6px 0 0}
.oacc__split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);
  padding:14px clamp(15px,1.8vw,22px);border-top:1px solid var(--line)}
.oacc__split h5{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-50);
  margin:0 0 7px}
.oacc__addr p{margin:0;font-size:.86rem;line-height:1.6}
.oacc__note{margin-top:8px !important;color:var(--ink-50)}
.oacc__acts{display:flex;gap:9px;flex-wrap:wrap;padding:13px clamp(15px,1.8vw,22px);
  border-top:1px solid var(--line)}

@media (max-width:720px){
  .oacc__split{grid-template-columns:1fr}
  .oacc__right{width:100%;margin-left:0;justify-content:space-between}
}

/* ---------- order details ---------- */
.ostate{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:var(--r-md);
  font-size:.87rem;line-height:1.55}
.ostate--off{background:#F6E1DD;color:#7E2A18}
/* same amber as the "Awaiting payment" badge it explains */
.ostate--wait{background:#FDF0D8;color:#7A5205}
.ostate--wait b{display:block;color:#5E3F03}
.ostate .ic{flex:none;margin-top:2px}
.ostate__act{display:inline-flex;margin-top:11px}

.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative}
.timeline li{position:relative;display:grid;gap:3px;padding-top:38px;text-align:center}
/* the rail runs behind the dots */
.timeline li::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;
  background:var(--line-2)}
.timeline li:first-child::before{display:none}
.timeline li.is-done::before{background:var(--green)}
.timeline__dot{position:absolute;top:0;left:50%;transform:translateX(-50%);
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--card,#fff);border:2px solid var(--line-2);color:transparent}
.timeline li.is-done .timeline__dot{background:var(--green);border-color:var(--green);color:#fff}
.timeline li.is-next .timeline__dot{border-color:var(--green);
  box-shadow:0 0 0 4px var(--wash,rgba(0,0,0,.05))}
.timeline b{font-size:.83rem;line-height:1.3}
.timeline li:not(.is-done) b{color:var(--ink-30)}
.timeline small{font-size:.73rem;color:var(--ink-50);line-height:1.4}
.timeline li:not(.is-done) small{color:var(--ink-30)}

.opair{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,18px)}
.oaddr{font-size:.87rem;color:var(--ink-70);line-height:1.65}
.oaddr b{color:var(--ink)}
.oaddr__ph{display:inline-flex;align-items:center;gap:6px;margin-top:8px;color:var(--ink-50)}
.oaddr__ph .ic{color:var(--green)}
.oacts{display:flex;gap:10px;flex-wrap:wrap}

.pwrules{display:grid;gap:8px;padding:14px 16px;border-radius:var(--r-md);
  background:var(--wash,var(--green-soft));font-size:.82rem;color:var(--ink-70)}
.pwrules li{display:flex;align-items:flex-start;gap:9px}
.pwrules .ic{margin-top:3px;color:var(--green)}


/* ============================================================
   5. FORMS — auth, contact, comments
   ============================================================ */
.authwrap{padding-top:clamp(30px,3.6vw,54px)}
.auth{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,2.8vw,44px);align-items:start}
.auth--narrow{grid-template-columns:minmax(0,620px);justify-content:center}

.auth__card{padding:clamp(22px,2.6vw,38px);background:var(--card,#fff);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.auth__head{margin-bottom:22px}
/* h1 on the auth pages, which dropped their page head; h2 elsewhere */
.auth__head h1,.auth__head h2{font-size:clamp(1.3rem,2.2vw,1.8rem);margin-bottom:6px}
.auth__head p{font-size:.87rem;color:var(--ink-50)}
.auth__head a{color:var(--green);font-weight:700}

.form{display:grid;gap:15px}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field{display:grid;gap:6px}
.field label{font-size:.78rem;font-weight:700;letter-spacing:.03em;color:var(--ink-70)}
.field input,.field textarea,.selwrap select{width:100%;padding:12px 15px;font-size:.9rem;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);
  transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:110px;line-height:1.6}
.field input:focus,.field textarea:focus,.selwrap select:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px var(--wash,rgba(0,0,0,.05))}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-30)}

/* error state is driven by pages.js adding .has-err */
.field.has-err input,.field.has-err textarea,.field.has-err select{border-color:var(--red);
  box-shadow:0 0 0 3px rgba(255,0,0,.06)}
.field__err{font-size:.76rem;color:var(--red);min-height:0;display:none}
.field.has-err .field__err{display:block}
.field__err[data-err-for]{display:none;margin-top:-8px}
.field__err[data-err-for].is-on{display:block}

.field__pass{position:relative;display:flex}
.field__pass input{padding-right:48px}
.pass-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--ink-30);
  transition:background .2s,color .2s}
.pass-toggle:hover{background:var(--wash,var(--green-soft));color:var(--green)}

.meter{display:flex;align-items:center;gap:9px;margin-top:2px}
.meter i{flex:1;display:block;height:5px;border-radius:var(--r-pill);background:var(--tint);overflow:hidden}
.meter em{display:block;height:100%;width:0;border-radius:var(--r-pill);background:var(--red);
  transition:width .3s,background .3s}
.meter small{font-size:.72rem;font-weight:700;color:var(--ink-50);min-width:52px;text-align:right}
.meter.is-2 em{background:var(--orange)}
.meter.is-3 em{background:var(--star)}
.meter.is-4 em{background:var(--green)}

.selwrap{position:relative;display:flex;align-items:center}
.selwrap select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.selwrap .ic{position:absolute;right:15px;transform:rotate(90deg);pointer-events:none;color:var(--ink-50)}

.form__row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.form__link{font-size:.82rem;font-weight:700;color:var(--green)}
.form__submit{width:100%;margin-top:4px;height:48px}
.form__note{font-size:.83rem;min-height:1em;text-align:center}
.form__note.is-ok{color:var(--green);font-weight:700}
.form__note.is-bad{color:var(--red)}



.auth__help{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-md);
  background:var(--card,#fff);transition:transform .28s,box-shadow .28s}
.auth__help:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.auth__help-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--green);color:#fff}
.auth__help span{display:grid;gap:1px}
.auth__help b{font-size:.88rem}
.auth__help small{font-size:.76rem;color:var(--ink-50)}

.auth__back{margin-top:18px;text-align:center;font-size:.84rem}
.auth__back a{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--green)}

.auth__done{display:grid;justify-items:center;text-align:center;gap:10px}
.auth__done-ic{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;
  background:var(--wash,var(--green-soft));color:var(--green);margin-bottom:4px}
.auth__done-ic .ic{width:28px;height:28px}
.auth__done p{font-size:.9rem;color:var(--ink-70);max-width:46ch}
.auth__done-sub{font-size:.82rem;color:var(--ink-50)}
.auth__done-sub a,.auth__done b{color:var(--green)}
.auth__done-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}


/* ============================================================
   6. VIDEOS PAGE
/* Three to a row at every width, phones included. The gap shrinks with
   the viewport so three cards still have room to breathe; the card's own
   parts are scaled down to match further below. */
.vidgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1.8vw,24px)}
.vidgrid .vid{width:auto;flex:none}
.vid__len{position:absolute;right:10px;bottom:10px;padding:3px 9px;border-radius:var(--r-pill);
  background:rgba(var(--scrim-rgb),.78);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.03em}
.vid.is-playing .vid__len{display:none}
.vid.is-hidden{display:none}


/* ============================================================
   7. BLOG
   ============================================================ */
.lead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(18px,2.4vw,34px);
  align-items:center;margin-bottom:clamp(24px,3vw,40px);padding:clamp(16px,1.8vw,24px);
  background:var(--card,#fff);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.lead__media{position:relative;display:block;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;background:var(--tint)}
.lead__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.lead:hover .lead__media img{transform:scale(1.05)}
.lead__body{display:grid;gap:10px}
.lead__body small{font-size:.76rem;color:var(--ink-50);font-weight:700}
.lead__body h2{font-size:clamp(1.25rem,2.1vw,1.8rem);line-height:1.22}
.lead__body h2 a{transition:color .22s}
.lead__body h2 a:hover{color:var(--green)}
.lead__body p{font-size:.9rem;color:var(--ink-70);line-height:1.7}
.lead__body .btn{justify-self:start;margin-top:4px}

.posts--index{grid-template-columns:repeat(2,1fr)}

/* ---------- article ---------- */
.article__hero{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/8;background:var(--tint);
  margin-bottom:clamp(18px,2.2vw,28px)}
.article__hero img{width:100%;height:100%;object-fit:cover}

/* ---------- policy pages ---------- */
.policy__updated{display:inline-flex;align-items:center;margin-bottom:18px;padding:5px 13px;
  border-radius:var(--r-pill);background:var(--wash,var(--green-soft));
  font-size:.76rem;font-weight:700;color:var(--green)}
/* rate table on the shipping page */
.ratetable{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.ratetable table{width:100%;border-collapse:collapse;font-size:.88rem}
.ratetable th,.ratetable td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line)}
.ratetable thead th{background:var(--tint);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-50)}
.ratetable tbody tr:last-child td{border-bottom:0}
.ratetable td:last-child{font-weight:700;white-space:nowrap}

.prose{max-width:74ch}
/* policy pages run edge to edge of the container rather than in a reading column */
.prose--wide{max-width:none}
.prose--wide .prose__lead{max-width:none}
.prose>*+*{margin-top:1.05em}
.prose p{font-size:.98rem;line-height:1.85;color:var(--ink-70)}
.prose__lead{font-size:1.1rem!important;line-height:1.7!important;color:var(--ink)!important;font-weight:400}
.prose h2{font-size:clamp(1.15rem,1.9vw,1.5rem);margin-top:1.7em;line-height:1.3}
.prose ul,.prose ol{display:grid;gap:9px;padding-left:1.2em}
.prose ol{list-style:decimal}
.prose ul li{list-style:none;position:relative;padding-left:4px}
.prose ul li::before{content:"";position:absolute;left:-14px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--green)}
.prose li{font-size:.95rem;line-height:1.75;color:var(--ink-70)}
.prose li b{color:var(--ink)}
.prose blockquote{margin-block:1.5em;padding:18px 22px;border-left:3px solid var(--green);
  border-radius:0 var(--r-md) var(--r-md) 0;background:var(--wash,var(--green-soft));
  font-family:var(--ff-display);font-size:1.05rem;line-height:1.6;color:var(--ink)}

.article__tags{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:clamp(24px,3vw,38px);padding-top:20px;border-top:1px solid var(--line)}
.article__tags span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50);font-weight:700}
.article__tags a{padding:6px 14px;border-radius:var(--r-pill);background:var(--tint);
  font-size:.78rem;font-weight:700;color:var(--ink-70);transition:background .22s,color .22s}
.article__tags a:hover{background:var(--green);color:#fff}
.flist--toc a{padding-left:0;font-size:.84rem}
.flist--toc a::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--ink-30);margin-right:2px}
.flist--toc a{justify-content:flex-start;gap:9px}
.flist--toc a:hover::before,.flist--toc a.is-on::before{background:var(--green)}


/* ============================================================
   8. CONTACT
   ============================================================ */
.reach{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.reach__card{display:grid;gap:5px;padding:clamp(18px,2vw,26px);border-radius:var(--r-lg);
  background:var(--card,#fff);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .3s,box-shadow .3s}
a.reach__card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.reach__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:var(--wash,var(--green-soft));color:var(--green);margin-bottom:6px;transition:background .28s,color .28s}
a.reach__card:hover .reach__ic{background:var(--green);color:#fff}
.reach__card b{font-family:var(--ff-display);font-size:1rem}
.reach__val{font-size:.95rem;font-weight:700;color:var(--green);overflow-wrap:anywhere}
.reach__card small{font-size:.8rem;color:var(--ink-50);line-height:1.5}

/* address column first, form second — the form keeps the wider share */
.contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,2.8vw,42px);align-items:start}
.contact__form{padding:clamp(22px,2.6vw,38px);background:var(--card,#fff);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.contact__side{display:grid;gap:18px}

/* Live OpenStreetMap embed. The address bar sits BELOW the map rather than
   over it, so it never swallows a drag or a pinch-zoom. */
.mapcard{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--tint);box-shadow:var(--shadow-sm)}
.mapcard iframe{display:block;width:100%;height:clamp(240px,30vw,330px);border:0}
.mapcard__pin{display:flex;align-items:center;gap:11px;padding:13px 15px;
  background:var(--card,#fff);border-top:1px solid var(--line);
  transition:background .25s}
.mapcard__pin:hover{background:var(--wash,var(--green-soft))}
.mapcard__pin .ic{flex:none;color:var(--green)}
.mapcard__pin span{display:grid;gap:1px;min-width:0;margin-right:auto}
.mapcard__pin b{font-size:.88rem}
.mapcard__pin small{font-size:.76rem;color:var(--ink-50)}
.mapcard__go{transition:transform .3s}
.mapcard__pin:hover .mapcard__go{transform:translateX(3px)}

.hours{padding:clamp(18px,2vw,24px);border-radius:var(--r-lg);background:var(--wash,var(--green-soft));
  border:1px solid var(--line)}
.hours h3{font-size:1.02rem;margin-bottom:12px}
.hours ul{display:grid;gap:8px}
.hours li{display:flex;justify-content:space-between;gap:12px;font-size:.85rem;color:var(--ink-70);
  padding-bottom:8px;border-bottom:1px dashed var(--line-2)}
.hours li:last-child{border-bottom:0;padding-bottom:0}
.hours b{font-weight:700;color:var(--ink)}
.hours__all b{color:var(--green)}


/* ============================================================
   9. RESPONSIVE
   ============================================================ */
@media (max-width:1200px){
  .shopgrid--listing{grid-template-columns:repeat(2,1fr)}
  .listing{grid-template-columns:236px minmax(0,1fr)}
  .listing--blog{grid-template-columns:minmax(0,1fr) 264px}
}

@media (max-width:1024px){
  /* the sidebar becomes a slide-in panel, opened from the toolbar */
  .listing,.listing--blog{grid-template-columns:minmax(0,1fr)}
  .filters{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:80;width:min(330px,88vw);
    border-radius:0;border:0;overflow-y:auto;align-content:start;
    transform:translateX(100%);transition:transform .38s cubic-bezier(.2,.8,.2,1);
    padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .filters.is-open{transform:translateX(0);box-shadow:-20px 0 60px -30px rgba(0,0,0,.6)}
  .filters__head{display:flex}
  .filters--blog{position:static;transform:none;width:auto;border:1px solid var(--line);
    border-radius:var(--r-lg);overflow:visible;order:2;padding-bottom:clamp(16px,1.6vw,22px)}
  .filters--blog .filters__head{display:none}
  .toolbar__filters{display:inline-flex}
  .summary{position:static}
  .filters-open-backdrop{position:fixed;inset:0;z-index:79;background:rgba(0,0,0,.45)}

  /* first step down from three: the tablet range is not wide enough for
     three combo cards, and 860px below takes it the rest of the way to one */
  .combogrid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .pdp{grid-template-columns:minmax(0,1fr)}
  /* the summary stops being a sidebar and sits above the review cards */
  .rev{grid-template-columns:minmax(0,1fr)}
  .rev__summary{position:static}
  .cartpage{grid-template-columns:minmax(0,1fr)}
  .checkout{grid-template-columns:minmax(0,1fr)}
  /* The account sidebar becomes a full-width card above the content. The links
     stay a stacked list: they used to turn into a horizontal strip that
     scrolled sideways, which left "Sign out" — and on a narrow phone half of
     "Change Password" — off the right edge with nothing on screen to say they
     were there. Stacked, every destination is visible at once, and the rows
     are full-width tap targets. Nothing to override here: the list is what
     .acctnav__links is already, so the strip rules are simply gone. */
  .acctwrap{grid-template-columns:minmax(0,1fr)}
  .acctnav{position:static}
  .contact{grid-template-columns:minmax(0,1fr)}
  .lead{grid-template-columns:minmax(0,1fr)}
  .auth{grid-template-columns:minmax(0,1fr)}
  .article__hero{aspect-ratio:16/9}
}

@media (max-width:860px){
  .shopgrid--listing{grid-template-columns:repeat(2,1fr)}
  /* .vidgrid deliberately keeps its three columns here — the video row
     stays three across at every width. Only the card's own parts get
     smaller, so three still fit. */
  .vid__play{width:38px;height:38px}
  .vid__play .ic{width:15px;height:15px}
  .vid__len{right:6px;bottom:6px;padding:2px 6px;font-size:.62rem}
  .vid__body{padding:9px 9px 11px}
  .vid__body h4{font-size:.78rem;line-height:1.32;min-height:calc(2 * 1.32em)}
  .vid__body small{font-size:.66rem}
  .combogrid{grid-template-columns:minmax(0,1fr)}
  .combowhy{grid-template-columns:minmax(0,1fr)}
  .included__list{grid-template-columns:minmax(0,1fr)}
  .reach{grid-template-columns:minmax(0,1fr)}
  .posts--index{grid-template-columns:1fr}
  .acctstats{grid-template-columns:repeat(2,1fr)}
  .opair{grid-template-columns:minmax(0,1fr)}

  /* the timeline turns into a vertical list, rail down the left */
  .timeline{grid-template-columns:minmax(0,1fr);gap:0}
  .timeline li{padding:0 0 22px 42px;text-align:left}
  .timeline li:last-child{padding-bottom:0}
  .timeline li::before{top:26px;left:13px;width:2px;height:calc(100% - 20px)}
  .timeline li:first-child::before{display:block}
  .timeline li:last-child::before{display:none}
  .timeline__dot{left:0;transform:none}

  /* the cart table collapses into stacked cards */
  .ctable__head{display:none}
  .crow{grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;padding:16px}
  .crow__prod{grid-column:1/-1}
  .crow__price{display:none}
  .crow__total{text-align:right;align-self:center}
  .crow__del{grid-row:1;grid-column:2;justify-self:end}
  /* The stepper is inline-flex, but a grid item stretches to fill its track
     unless told otherwise — so on a phone, where the row is only two columns
     wide, it grew into a pill running most of the width of the card with its
     three keys marooned at the left end. justify-self:start hands it back to
     its own content width. */
  .crow .qty{justify-self:start}
}

@media (max-width:768px){
  /* On a phone the order summary comes first and the form follows it.

     The two are already stacked from 1024px down, in source order: the form
     first, so "Your order" — what is being paid for and what it costs — was
     a full screen of typing away. Putting it on top means the total is the
     first thing seen and the form is filled in knowing it.

     `order` moves the boxes visually, not in the document, so the tab order
     and what a screen reader reads out are unchanged: still Contact, then
     the address, then the summary. That is the same sequence those users
     already had, so nothing regresses for them. */
  .checkout .summary{order:1}
  .checkout__main{order:2}

  /* Mobile artwork is a taller crop — 390x230 rather than 1600x380 — so the
     box takes that ratio and the picture is shown whole instead of being
     cropped to a desktop-shaped letterbox.

     The dark top-to-bottom scrim that used to sit here is gone with the rest
     of it; see the note beside .ibanner::after above. */
  .ibanner{min-height:0;aspect-ratio:390/400}
  .ibanner__in{padding-bottom:clamp(16px,4vw,26px)}
  .ibanner h1{max-width:none}
}

@media (max-width:620px){
  .shopgrid--listing{grid-template-columns:1fr 1fr}
  .shopgrid.is-list .prod{grid-template-columns:120px minmax(0,1fr)}
  .shopgrid.is-list .prod__add{width:100%;justify-self:stretch}
  .shopgrid.is-list .prod__qty{width:100%;min-width:0}
  /* the video row stays three across on a phone too; the card shrinks
     to suit rather than the row breaking apart */
  .vid__play{width:30px;height:30px}
  .vid__play .ic{width:12px;height:12px;margin-left:1px}
  .vid__len{right:4px;bottom:4px;padding:1px 5px;font-size:.56rem}
  .vid__body{padding:7px 7px 9px}
  .vid__body h4{font-size:.66rem;line-height:1.3;min-height:calc(2 * 1.3em)}
  .vid__body small{font-size:.58rem}
  .lux .vid__media{margin:4px 4px 0;border-radius:8px}
  .form__grid{grid-template-columns:1fr}
  .toolbar{gap:10px}
  .toolbar__count{order:3;flex-basis:100%}
  .pdp__buy{gap:8px}
  .pdp__add,.pdp__buynow{flex:1 1 100%;min-width:0}
  .combo__add{flex:1 1 100%;min-width:0}
  /* keep the thumb strip on one swipeable row rather than wrapping to three */
  .pdp__thumbs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .pdp__thumbs::-webkit-scrollbar{display:none}
  .pdp__thumbs button{flex:none;width:62px;height:62px}
  .pdp__gnav{width:36px;height:36px;margin-top:-18px}
  .lightbox__nav{width:40px;height:40px;margin-top:-20px}
  .pager__n,.pager__step{min-width:36px;height:36px;padding-inline:11px;font-size:.78rem}
  /* four discs across is too tight on a phone — pair them up instead */
  .inside{grid-template-columns:repeat(2,1fr);gap:20px 12px}
  .rev__card header{flex-wrap:wrap}
  .rev__card time{margin-left:52px;flex-basis:100%}
}

/* Panels that slide in must never animate on a reduced-motion setting. */
@media (prefers-reduced-motion:reduce){
  .filters{transition:none}
}

/* ---------- PAYMENT PAGE ----------
   One card, one number, one button. A payment page is not the place
   for anything to read or decide — the choosing is done, and the
   only job left is to be unmistakable about what is being paid. */
.paywrap{max-width:520px;margin:0 auto}
/* display:grid below would outrank the display:none a bare [hidden] gives an
   element, and this card is hidden while Razorpay's own window is opening. */
.paycard[hidden]{display:none}
.paycard{display:grid;justify-items:center;text-align:center;gap:11px;
  padding:clamp(26px,4vw,40px);border-radius:var(--r-lg);
  background:var(--card,#fff);border:1px solid var(--line);box-shadow:var(--shadow-md)}
.paycard__ic{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
  background:var(--wash,var(--green-soft));color:var(--green)}
.paycard__ic .ic{width:28px;height:28px}
.paycard h2{font-size:clamp(1.1rem,2vw,1.35rem);margin:0}
.paycard__amount{font-family:var(--ff-display);font-size:clamp(2rem,5vw,2.7rem);
  line-height:1;color:var(--green);margin:2px 0 0}
.paycard__sub{font-size:.87rem;color:var(--ink-50);line-height:1.6;max-width:40ch;margin:0}
.paycard__acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.paycard__note{font-size:.83rem;line-height:1.55;color:var(--ink-50);min-height:1.2em;margin:0;max-width:44ch}
.paycard__note.is-bad{color:var(--red)}
.paycard__perks{display:grid;gap:8px;margin-top:10px;padding-top:16px;
  border-top:1px solid var(--line);font-size:.79rem;color:var(--ink-50);text-align:left;width:100%}
.paycard__perks li{display:flex;align-items:flex-start;gap:9px;line-height:1.5}
.paycard__perks .ic{flex:none;margin-top:2px;color:var(--green)}
/* only shown on test keys, and meant to be impossible to miss */
.paycard__test{width:100%;margin:12px 0 0;padding:11px 14px;border-radius:var(--r-sm);
  background:#FFF4D6;color:#6B4E00;font-size:.79rem;line-height:1.5;text-align:left}

/* the payment choice at checkout: a second line inside the radio label */
.picker__box b em{font-style:normal;font-weight:400;font-size:.74rem;color:var(--ink-50);
  display:block;margin-top:2px;letter-spacing:0}

/* ------------------------------------------------------------
   OUT OF STOCK
   ------------------------------------------------------------
   Stock is counted per size, so a card can be half available:
   250 g on the shelf, 1 kg gone. A sold-out size is dimmed and
   struck through rather than hidden, because "the 1 kg is gone"
   is useful information and a silently missing option reads as
   a bug.

   The greying is deliberately not the only signal — the pill
   also gets a line through it and the word "sold out", so the
   state survives a screen where colour is hard to judge.
   ------------------------------------------------------------ */

/* the corner badge, in the same slot as the discount flash */
.off--sold{background:var(--ink-50,#78877c)}

/* sold-out size pills, on cards and on the product page */
.prod__vars button[disabled],
.pdp__vars button[disabled]{
  opacity:.42;cursor:not-allowed;text-decoration:line-through;
  background:transparent;
}
.prod__vars button[disabled]:hover,
.pdp__vars button[disabled]:hover{background:transparent;border-color:var(--line)}

.pdp__soldtag{font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  margin-left:6px;text-decoration:none;opacity:.8}

/* the add button when there is nothing to add */
.prod__add.is-sold,
.prod__add[disabled],
.pdp__add[disabled]{
  opacity:.55;cursor:not-allowed;background:var(--wash,#f2f5f3);
  color:var(--ink-50,#78877c);border-color:var(--line);
}
.prod__add.is-sold:hover,
.prod__add[disabled]:hover,
.pdp__add[disabled]:hover{background:var(--wash,#f2f5f3);color:var(--ink-50,#78877c)}

/* the whole card, muted just enough to read as unavailable */
.prod.is-sold .prod__media img{filter:grayscale(.55);opacity:.72}

/* "In stock" turns into "Out of stock" in the same pill */
.pdp__stock.is-out{background:var(--red-soft,#fdf0ee);color:var(--red,#c0392b)}