/* ===========================================================================
   Shuddhy — shared stylesheet
   ---------------------------------------------------------------------------
   PALETTE IS MEASURED, NOT CHOSEN. The four literals below were extracted from
   the client's own logo (assets/logos/logo-dark.png, 5009x1277) by pixel
   frequency. They are a binding contract — do not substitute approximations.

   Every other colour is derived with oklch() from those four, and every text
   pair was computed rather than eyeballed. Verified ratios are in the comments.

   HARD BAN: gold (#bc9f66) as text on a light ground measures 2.53:1 and fails
   AA. Gold is structural here — rules, borders, accents on dark. Never type.
=========================================================================== */

:root{
  /* --- measured, verbatim --- */
  --forest:  #27391e;   /* 508,321 px — dominant. ink, dark grounds, primary  */
  --gold:    #bc9f66;   /* 168,162 px — STRUCTURAL ONLY                       */
  --offwhite:#faf7f0;   /* page ground                                       */
  --white:   #ffffff;

  /* --- derived, all computed --- */
  --forest-hi:   oklch(24.0% 0.045 133);  /* CTA hover  15.22:1 — DARKER than rest,
                                             because a state change must never
                                             reduce contrast (rest is 11.61:1) */
  --forest-soft: oklch(45.0% 0.022 133);  /* secondary copy  6.89:1 on offwhite */
  --forest-mid:  oklch(33.0% 0.038 133);  /* dark-section panels                */
  --gold-hi:     oklch(75.0% 0.070  87);  /* gold CTA hover on dark  5.58:1     */
  --line:        oklch(90.0% 0.014  87);  /* decorative hairline                */
  --line-ui:     oklch(58.0% 0.035  87);  /* MEANINGFUL border  4.28:1 on white */
  --dark-body:   oklch(82.0% 0.020 120);  /* body on forest  7.15:1             */
  --dark-line:   oklch(45.0% 0.020 133);

  /* state colours — pinned, kept inside the brand's tonal world.
     Chroma capped so nothing reads neon against a heritage green ground. */
  --ok:   oklch(52.0% 0.110 150);
  --warn: oklch(56.0% 0.120  70);
  --err:  oklch(50.0% 0.150  25);

  /* type — display serif / body sans, deliberately different families */
  --display:"Newsreader", Georgia, "Times New Roman", serif;
  --body:"Karla", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --measure: 64ch;
  --rule: 1px;
  --radius: 0px;         /* square throughout — matches the mark's own posture */
  --shadow: 0 1px 2px oklch(30% 0.01 133 / .06), 0 8px 24px oklch(30% 0.01 133 / .07);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }          /* Lenis drives scroll in JS */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  margin:0;
  background:var(--offwhite);
  color:var(--forest);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{ font-family:var(--display); font-weight:400; margin:0; line-height:1.1; }
a{ color:inherit; }
img{ max-width:100%; display:block; }

:focus-visible{ outline:2px solid var(--forest); outline-offset:3px; }
.sec--dark :focus-visible,.foot :focus-visible{ outline-color:var(--gold); }

.sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--forest); color:var(--offwhite); padding:.75rem 1.25rem;
}
.skip:focus{ left:0; }

/* ============================ buttons ==================================== */
.btn{
  font-family:var(--body); font-weight:600; font-size:.9375rem;
  letter-spacing:.02em;
  min-height:48px; padding:.875rem 1.75rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:var(--rule) solid transparent; border-radius:var(--radius);
  cursor:pointer; text-decoration:none; text-align:center;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* solid: inverts BOTH fg and bg in one rule so contrast cannot drop */
.btn--primary{ background:var(--forest); color:var(--offwhite); }
.btn--primary:hover,.btn--primary:focus-visible{ background:var(--forest-hi); color:var(--white); }

.btn--ghost{ background:transparent; color:var(--forest); border-color:var(--line-ui); }
.btn--ghost:hover,.btn--ghost:focus-visible{ background:var(--white); border-color:var(--forest); }

.btn--gold{ background:var(--gold); color:var(--forest); }   /* 4.90:1 */
.btn--gold:hover,.btn--gold:focus-visible{ background:var(--gold-hi); color:var(--forest); } /* 5.58:1 */

.btn--sm{ min-height:44px; padding:.625rem 1.125rem; font-size:.875rem; }
.btn--full{ width:100%; }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }

.tlink{
  font-weight:500; text-decoration:none;
  border-bottom:var(--rule) solid var(--line-ui); padding-bottom:2px;
  transition:border-color .18s ease;
}
.tlink:hover,.tlink:focus-visible{ border-color:var(--forest); }

/* ============================ masthead =================================== */
.mast{
  position:sticky; top:0; z-index:60;
  background:var(--offwhite);
  border-bottom:var(--rule) solid var(--line);
}
.mast--overlay{ position:absolute; inset:0 0 auto 0; background:transparent; border:0; }
.mast__in{
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding:.875rem var(--gutter);
}
.mast__logo{ display:block; flex:0 0 auto; }
.mast__logo img{ height:38px; width:auto; }
.mast__nav{ display:flex; gap:1.5rem; font-size:.9375rem; font-weight:500; margin-left:auto; }
.mast__nav a{ text-decoration:none; padding:.35rem 0; border-bottom:2px solid transparent; }
.mast__nav a:hover,.mast__nav a:focus-visible,.mast__nav a[aria-current="page"]{ border-color:var(--gold); }
.mast__tools{ display:flex; align-items:center; gap:.25rem; }
.icobtn{
  width:44px; height:44px; display:grid; place-items:center;
  background:transparent; border:0; cursor:pointer; color:inherit;
  border-radius:var(--radius); position:relative;
  transition:background-color .18s ease;
}
.icobtn:hover,.icobtn:focus-visible{ background:var(--white); }
.icobtn svg{ width:20px; height:20px; }
.pill{
  position:absolute; top:5px; right:3px;
  min-width:18px; height:18px; padding:0 4px;
  background:var(--forest); color:var(--offwhite);
  font-size:.6875rem; font-weight:600; font-family:var(--body);
  display:grid; place-items:center; border-radius:9px;
}
.pill[hidden]{ display:none; }
@media (max-width:860px){ .mast__nav{ display:none; } }

/* burger + mobile drawer */
.burger{ display:none; }
@media (max-width:860px){ .burger{ display:grid; } }
.mnav{
  position:fixed; inset:0; z-index:80;
  background:var(--forest); color:var(--offwhite);
  padding:5rem var(--gutter) 2rem;
  display:none; flex-direction:column; gap:.25rem;
}
.mnav[data-open="true"]{ display:flex; }
.mnav a{
  font-family:var(--display); font-size:1.75rem; text-decoration:none;
  padding:.75rem 0; border-bottom:var(--rule) solid var(--dark-line);
}
.mnav__x{ position:absolute; top:1rem; right:var(--gutter); color:inherit; }

/* ============================ sections =================================== */
.sec{ padding:clamp(4rem,10vh,8rem) var(--gutter); }
.sec--white{ background:var(--white); }
.sec--dark{ background:var(--forest); color:var(--dark-body); }
.sec--dark h1,.sec--dark h2,.sec--dark h3{ color:var(--offwhite); }
.sec--tight{ padding-top:clamp(2rem,5vh,3.5rem); padding-bottom:clamp(2rem,5vh,3.5rem); }

.wrap{ max-width:1320px; margin-inline:auto; }
.eyebrow{
  display:block; margin-bottom:1rem;
  font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--forest-soft);
}
.sec--dark .eyebrow{ color:var(--gold); }   /* gold on dark = fine, 4.90:1+ */
.sec__head{ max-width:38ch; margin-bottom:clamp(2rem,5vh,3.5rem); }
.sec__title{ font-size:clamp(1.875rem,4.4vw,3.25rem); letter-spacing:-.015em; }
.lede{ max-width:var(--measure); }
.sec--dark .lede{ color:var(--dark-body); }

.flexbox_insides{ display:flex; flex-direction:row; gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.flexbox_insides > :first-child{ flex:0 0 55%; min-width:0; }
.flexbox_insides > :last-child{ flex:0 0 45%; min-width:0; }
.flexbox_insides--flip{ flex-direction:row-reverse; }
@media (max-width:860px){
  .flexbox_insides,.flexbox_insides--flip{ flex-direction:column; }
  .flexbox_insides > *{ flex:1 1 auto !important; width:100%; }
}

.grid{ display:grid; gap:clamp(1.25rem,3vw,2.5rem); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); }

/* ============================ product card =============================== */
.pcard{
  background:var(--white); border:var(--rule) solid var(--line);
  display:flex; flex-direction:column; position:relative;
}
.pcard__media{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--offwhite); display:grid; place-items:center;
}
.pcard__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
.pcard:hover .pcard__media img{ transform:scale(1.04); }
.pcard__tag{
  position:absolute; top:12px; left:12px;
  background:var(--forest); color:var(--offwhite);
  font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.35rem .6rem;
}
.pcard__body{ padding:1.25rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
/* save-to-wishlist heart. Mirrors .pcard__tag's 12px inset on the opposite corner so
   the two overlays read as one system. Solid ground, not translucent — it sits over
   photography and must stay legible whatever the image behind it is doing. */
.pcard__wish{
  position:absolute; top:12px; right:12px; z-index:2;
  width:40px; height:40px; display:grid; place-items:center;
  background:var(--white); color:var(--forest);
  border:1px solid var(--line-ui); cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.pcard__wish svg{ width:20px; height:20px; }
/* hover darkens the ground and keeps the mark light — contrast rises, never falls */
.pcard__wish:hover,.pcard__wish:focus-visible{ background:var(--forest); color:var(--white); }
.pcard__wish.is-on{ background:var(--forest); color:var(--white); border-color:var(--forest); }
.pcard__wish.is-on svg{ fill:currentColor; }
.pcard__wish.is-on:hover{ background:var(--forest-hi); }
/* inline count inside a filter chip — base .pill is display:grid, which would
   break out of the chip's text line, so it becomes inline-grid here. */
.pill--inline{ position:static; margin-left:.35rem; display:inline-grid; vertical-align:middle; }
.pcard__size{ font-size:.75rem; font-weight:600; letter-spacing:.1em; color:var(--forest-soft); text-transform:uppercase; }
.pcard__name{ font-family:var(--display); font-size:1.25rem; line-height:1.2; }
.pcard__name a{ text-decoration:none; }
.pcard__name a:hover,.pcard__name a:focus-visible{ text-decoration:underline; text-underline-offset:3px; }
.pcard__what{ font-size:.875rem; color:var(--forest-soft); }
.pcard__herbs{
  font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--forest); border-top:2px solid var(--gold); padding-top:.5rem; margin-top:auto;
}
.price{ display:flex; align-items:baseline; gap:.6rem; font-family:var(--display); font-size:1.375rem; }
.price s{ font-family:var(--body); font-size:.875rem; color:var(--forest-soft); }
.price__save{
  font-family:var(--body); font-size:.75rem; font-weight:600;
  color:var(--white); background:var(--forest-mid); padding:.15rem .45rem;
}

/* ============================ empty slot ================================ */
.slot{
  border:var(--rule) dashed var(--line-ui); background:var(--white);
  padding:1.5rem; display:flex; flex-direction:column; gap:.5rem;
}
.sec--dark .slot{ background:transparent; border-color:var(--dark-line); }
.slot__tag{
  font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--forest-soft);
}
.sec--dark .slot__tag{ color:var(--gold); }
.slot__what{ font-family:var(--display); font-size:1.1875rem; }
.slot__why{ margin:0; font-size:.875rem; color:var(--forest-soft); max-width:52ch; }
.sec--dark .slot__why{ color:var(--dark-body); }

.note{
  border-left:3px solid var(--gold); padding:.25rem 0 .25rem 1.125rem;
  font-size:.875rem; color:var(--forest-soft); max-width:58ch;
}
.sec--dark .note{ color:var(--dark-body); }

/* ============================ spec list ================================= */
.spec{ list-style:none; margin:1.5rem 0 0; padding:0; }
.spec li{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.75rem 0; border-bottom:var(--rule) solid var(--line); font-size:.9375rem;
}
.sec--dark .spec li{ border-color:var(--dark-line); }
.spec b{ font-weight:600; }
.spec span:last-child{ color:var(--forest-soft); text-align:right; }
.sec--dark .spec span:last-child{ color:var(--dark-body); }

/* ============================ trust strip =============================== */
.trust{ background:var(--forest); color:var(--dark-body); padding:2rem var(--gutter); }
.trust__grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); max-width:1320px; margin-inline:auto; }
.trust__i{ display:flex; gap:.875rem; align-items:flex-start; }
.trust__i svg{ width:24px; height:24px; flex:0 0 auto; color:var(--gold); }
.trust__i b{ display:block; color:var(--offwhite); font-weight:600; font-size:.9375rem; }
.trust__i span{ font-size:.8125rem; }

/* free-from chips — the client's own claim list */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.chip{
  font-size:.75rem; font-weight:600; letter-spacing:.04em;
  padding:.4rem .7rem; border:var(--rule) solid var(--line-ui); color:var(--forest);
  background:var(--white);
}
.sec--dark .chip{ border-color:var(--dark-line); color:var(--dark-body); background:transparent; }

/* ============================ drawer (cart) ============================= */
.scrim{
  position:fixed; inset:0; z-index:90;
  background:oklch(20% .02 133 / .55);
  opacity:0; pointer-events:none; transition:opacity .28s ease;
}
.scrim[data-open="true"]{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:95;
  width:min(420px,100vw);
  background:var(--offwhite);
  display:flex; flex-direction:column;
  transform:translateX(101%); transition:transform .32s cubic-bezier(.2,.7,.2,1);
  box-shadow:var(--shadow);
}
.drawer[data-open="true"]{ transform:translateX(0); }
.drawer__top{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.125rem 1.25rem; border-bottom:var(--rule) solid var(--line);
}
.drawer__title{ font-family:var(--display); font-size:1.375rem; }
.drawer__body{ flex:1; overflow-y:auto; padding:1.25rem; }
.drawer__foot{ border-top:var(--rule) solid var(--line); padding:1.25rem; background:var(--white); }

.li{ display:flex; gap:.875rem; padding-bottom:1rem; margin-bottom:1rem; border-bottom:var(--rule) solid var(--line); }
.li:last-child{ border-bottom:0; margin-bottom:0; }
.li__img{ width:72px; height:90px; object-fit:cover; flex:0 0 auto; background:var(--white); }
.li__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.35rem; }
.li__name{ font-family:var(--display); font-size:1rem; line-height:1.25; }
.li__meta{ font-size:.8125rem; color:var(--forest-soft); }
.li__row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:auto; }

.qty{ display:inline-flex; align-items:center; border:var(--rule) solid var(--line-ui); }
.qty button{
  width:36px; height:36px; display:grid; place-items:center;
  background:transparent; border:0; cursor:pointer; font-size:1rem; color:inherit;
  transition:background-color .18s ease;
}
.qty button:hover,.qty button:focus-visible{ background:var(--white); }
.qty output{ min-width:36px; text-align:center; font-weight:600; font-size:.9375rem; }

.remove{
  background:none; border:0; cursor:pointer; padding:.25rem;
  font-size:.8125rem; color:var(--forest-soft);
  border-bottom:var(--rule) solid transparent;
}
.remove:hover,.remove:focus-visible{ color:var(--forest); border-color:var(--forest); }

.total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.35rem; font-size:.9375rem; }
.total--grand{ font-family:var(--display); font-size:1.375rem; margin-top:.75rem; padding-top:.75rem; border-top:var(--rule) solid var(--line); }

.empty{ text-align:center; padding:3rem 1rem; color:var(--forest-soft); }
.empty svg{ width:44px; height:44px; margin-bottom:1rem; color:var(--line-ui); }

/* ============================ checkout upsell ============================ */
.upsell{ border-top:var(--rule) solid var(--line); margin-top:1.25rem; padding-top:1.25rem; }
.upsell__t{ font-size:.8125rem; font-weight:600; letter-spacing:.04em; margin-bottom:.75rem; }
.upsell__list{ display:flex; flex-direction:column; gap:.75rem; }
.upsell__row{ display:flex; gap:.75rem; align-items:center; }
.upsell__img{ width:52px; height:65px; object-fit:cover; flex:0 0 auto; background:var(--offwhite); }
.upsell__main{ flex:1; min-width:0; }
.upsell__name{ font-family:var(--display); font-size:.9375rem; line-height:1.25; }
.upsell__meta{ font-size:.75rem; color:var(--forest-soft); margin-top:.15rem; }
.upsell__add{
  flex:0 0 auto; min-height:36px; padding:.5rem .875rem; font-size:.8125rem;
  font-weight:600; background:transparent; color:var(--forest);
  border:var(--rule) solid var(--line-ui); cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.upsell__add:hover,.upsell__add:focus-visible{ background:var(--forest); color:var(--offwhite); border-color:var(--forest); }
.upsell__add[data-added="true"]{ background:var(--forest); color:var(--offwhite); border-color:var(--forest); }

/* ============================ forms ==================================== */
.field{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:1.125rem; }
.field label{ font-size:.8125rem; font-weight:600; letter-spacing:.04em; }
.field input,.field textarea,.field select{
  font-family:var(--body); font-size:1rem;
  min-height:48px; padding:.75rem .875rem;
  background:var(--white); color:var(--forest);
  border:var(--rule) solid var(--line-ui); border-radius:var(--radius);
}
.field textarea{ min-height:96px; resize:vertical; }
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:2px solid var(--forest); outline-offset:1px; border-color:var(--forest);
}
.field__err{ font-size:.8125rem; color:var(--err); font-weight:600; min-height:1.2em; }
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea{ border-color:var(--err); border-width:2px; }
.field__hint{ font-size:.8125rem; color:var(--forest-soft); }
.row2{ display:grid; gap:1.125rem; grid-template-columns:1fr 1fr; }
@media (max-width:600px){ .row2{ grid-template-columns:1fr; } }

.radio{
  display:flex; gap:.75rem; align-items:flex-start;
  padding:1rem; border:var(--rule) solid var(--line-ui); background:var(--white);
  cursor:pointer; margin-bottom:.75rem;
}
.radio:has(input:checked){ border-color:var(--forest); border-width:2px; padding:calc(1rem - 1px); }
.radio input{ margin-top:.2rem; width:20px; height:20px; accent-color:var(--forest); flex:0 0 auto; }
.radio b{ display:block; font-size:.9375rem; }
.radio span{ font-size:.8125rem; color:var(--forest-soft); }
.radio[data-disabled="true"]{ opacity:.55; cursor:not-allowed; }

/* ============================ tabs ===================================== */
.tabs{ display:flex; gap:.25rem; border-bottom:var(--rule) solid var(--line); margin-bottom:1.75rem; flex-wrap:wrap; }
.tab{
  font-family:var(--body); font-size:.9375rem; font-weight:600;
  min-height:44px; padding:.625rem 1.125rem;
  background:transparent; border:0; border-bottom:2px solid transparent;
  cursor:pointer; color:var(--forest-soft);
}
.tab[aria-selected="true"]{ color:var(--forest); border-bottom-color:var(--forest); }
.tab:hover,.tab:focus-visible{ color:var(--forest); background:var(--white); }
.panel[hidden]{ display:none; }

/* ============================ table ==================================== */
.tbl{ width:100%; border-collapse:collapse; font-size:.9375rem; }
.tbl th,.tbl td{ text-align:left; padding:.875rem 1rem; border-bottom:var(--rule) solid var(--line); vertical-align:middle; }
.tbl th{ font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--forest-soft); white-space:nowrap; }
.tbl tbody tr:hover{ background:var(--offwhite); }
.tbl td:last-child,.tbl th:last-child{ text-align:right; }
.tblwrap{ overflow-x:auto; border:var(--rule) solid var(--line); background:var(--white); }

.badge{
  display:inline-block; font-size:.6875rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; padding:.25rem .5rem;
  border:var(--rule) solid currentColor;
}
.badge--ok{ color:var(--ok); }
.badge--warn{ color:var(--warn); }
.badge--err{ color:var(--err); }
.badge--mute{ color:var(--forest-soft); }

/* ============================ footer =================================== */
.foot{ background:var(--forest); color:var(--dark-body); padding:clamp(3rem,8vh,5rem) var(--gutter) 1.75rem; }
.foot__grid{ display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); max-width:1320px; margin-inline:auto; }
.foot h4{ color:var(--offwhite); font-size:1.0625rem; margin-bottom:1rem; }
.foot img{ height:56px; width:auto; margin-bottom:1rem; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; font-size:.875rem; }
.foot a{ text-decoration:none; border-bottom:var(--rule) solid transparent; }
.foot a:hover,.foot a:focus-visible{ border-color:var(--gold); color:var(--offwhite); }
.foot__rule{ height:var(--rule); background:var(--dark-line); margin:2.5rem auto 1.25rem; max-width:1320px; }
.foot__base{
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
  font-size:.8125rem; max-width:1320px; margin-inline:auto;
}

/* ============================ toast =================================== */
.toast{
  position:fixed; left:50%; bottom:1.5rem; z-index:120;
  transform:translate(-50%,140%);
  background:var(--forest); color:var(--offwhite);
  padding:.875rem 1.25rem; font-size:.9375rem; font-weight:500;
  box-shadow:var(--shadow); max-width:calc(100vw - 2rem);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.toast[data-show="true"]{ transform:translate(-50%,0); }

/* ============================ misc ==================================== */
.crumbs{ font-size:.8125rem; color:var(--forest-soft); padding:1.25rem var(--gutter) 0; max-width:1320px; margin-inline:auto; }
.crumbs a{ text-decoration:none; border-bottom:var(--rule) solid var(--line-ui); }
.crumbs a:hover{ border-color:var(--forest); }

.ph{
  display:grid; place-items:center; gap:.5rem; text-align:center;
  min-height:120px; padding:1.5rem;
  border:var(--rule) dashed var(--line-ui); background:var(--white);
  font-size:.875rem; color:var(--forest-soft);
}
.ph b{ font-family:var(--display); font-size:1.0625rem; color:var(--forest); font-weight:400; }

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  .pcard:hover .pcard__media img{ transform:none; }
}

@media print{
  .mast,.foot,.drawer,.scrim,.toast,.btn{ display:none !important; }
  body{ background:#fff; font-size:12pt; }
}