/* Packages PDP — the shelf.
   A package has no photograph. It is built at runtime from the individual
   products: each one a real turn, matted, standing at its true size on one
   ground under one light. */

@font-face{font-family:FiraGO;src:url("/wp-content/themes/yaara-awwwards/assets/packages/assets/fonts/FiraGO-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:FiraGO;src:url("/wp-content/themes/yaara-awwwards/assets/packages/assets/fonts/FiraGO-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:FiraGO;src:url("/wp-content/themes/yaara-awwwards/assets/packages/assets/fonts/FiraGO-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Frank Ruhl Libre";src:url("/wp-content/themes/yaara-awwwards/assets/packages/assets/fonts/FrankRuhlLibre-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Frank Ruhl Libre";src:url("/wp-content/themes/yaara-awwwards/assets/packages/assets/fonts/FrankRuhlLibre-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Assistant";src:url("/wp-content/themes/yaara-awwwards/assets/packages/assets/fonts/Assistant-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Assistant";src:url("/wp-content/themes/yaara-awwwards/assets/packages/assets/fonts/Assistant-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Assistant";src:url("/wp-content/themes/yaara-awwwards/assets/packages/assets/fonts/Assistant-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Gveret Levin";src:url("/wp-content/themes/yaara-awwwards/assets/packages/assets/fonts/GveretLevin-400.woff2") format("woff2");font-weight:400;font-display:swap}

/* ══════════════════════════════════════════════════════════════════════
   BRAND TOKENS — identical block in atelier_replica/yaara.css and
   yaara_hero_spin/product.css. KEEP IN SYNC. These pages are served from
   separate directories, so the block is duplicated rather than imported; it is
   the single definition of what the site looks like and no copy may drift.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#0E0C0A;
  --charcoal:#3D3A34;
  --ivory:#F5F0E6;
  --taupe:#DED8CE;
  /* one light register per act, warmest in the middle */
  --g1:#F3EDE1;  --g1b:#EAE0CE;
  --g2:#EDE4D4;  --g2b:#E0D2BC;
  --g3:#F7F5F1;
  --g4:#F5F1EA;  --g4b:#EFE8DB;

  /* GOLD — her logo ramps #8C6B47 → #FAC68C at hue 31-33°. The old tokens
     were that ramp's mean and 5th percentile, which is what made them brown.
     These carry the ramp and take the hue up to where gold reads. */
  --gold:#D9A94D;  --gold-hi:#FBE7B4;  --gold-lo:#9A7126;
  --gold-light:#E8C173;
  --gold-deep:#7E5B1C;      /* solid, small text on paper — 5.4:1 on ivory */
  --metal:linear-gradient(104deg,#9A7126 0%,#D9A94D 18%,#FBE7B4 38%,#E2B45E 54%,#A87C2C 74%,#F2D28E 100%);
  --metal-ink:linear-gradient(104deg,#6E4F16 0%,#9A7126 20%,#C9993C 42%,#8A6420 60%,#B98F35 80%,#7E5B1C 100%);

  --disp:FiraGO,Assistant,"Segoe UI",sans-serif;
  --serif:FiraGO,Assistant,"Segoe UI",sans-serif;
  --hand:"Gveret Levin","Frank Ruhl Libre",cursive;
  --ease:cubic-bezier(.62,0,.18,1);
}
/* ════════════════════ end shared block ════════════════════ */

:root{
  --ink-soft:#6B5F57; --ink-faint:#9C8F84;
  --sans:FiraGO,Assistant,"Segoe UI",system-ui,sans-serif;
  --pad:clamp(22px,4.03vw,58px);
  --line:rgba(125,105,75,.20);
  --buybar-h:0px;

  /* ── 2026-08-15 · PLAIN GROUND ──────────────────────────────────────────
     The act-by-act warm register (almond #EDE4D4 / #E0D2BC, "warmest in the
     middle") read as an amber cast over the whole page. Every ground token is
     collapsed to the site's one near-white, so the act gradients above still
     compute but resolve flat — nothing else has to be hunted down, and the
     shared BRAND TOKENS block stays byte-identical to its two other copies.
     Warmth now lives only inside imagery and the gold accents. */
  --g1:#F7F5F1;  --g1b:#F7F5F1;
  --g2:#F7F5F1;  --g2b:#F7F5F1;
  --g3:#F7F5F1;
  --g4:#F7F5F1;  --g4b:#F7F5F1;
  --ivory:#F7F5F1;
  --line:rgba(25,21,18,.14);
}

/* The hero ground is her studio backdrop — a real, warm photograph of a dried
   flower field. It was dropped for a while so the products would stand on the
   same plain ground as the store shelf; it is back, because the product PDPs
   kept theirs and a pack arriving on flat white read as a different site than
   the singles it is made of. Only the buybar override survives: the .pkg::after
   washes are what hold contrast against a photograph, so they come back with
   the field. */
.buybar{background:rgba(247,245,241,.93)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--g4);color:var(--charcoal);
     font-family:var(--sans);-webkit-font-smoothing:antialiased;
     padding-bottom:var(--buybar-h)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:400}
ol,ul{margin:0;padding:0;list-style:none}

/* -------------------------------------------------- Hebrew text only ---
   The document is NOT dir="rtl". Setting it there mirrors every flex/grid row,
   which moves the OBJECTS — including the shelf. Only the text runs rtl. */
.rtl{direction:rtl;text-align:right}
.rtl-c{direction:rtl;text-align:center}

/* fine tileable noise: kills banding on the big soft washes and stops flat
   areas reading as dead colour */
body::after{
  content:"";position:fixed;inset:0;z-index:400;pointer-events:none;
  background:url("/wp-content/themes/yaara-awwwards/assets/packages/assets/grain.png") repeat;background-size:160px 160px;
  opacity:.05;mix-blend-mode:soft-light;
}

/* ------------------------------------------------------------------ nav */
.nav{position:absolute;inset:0 0 auto;z-index:30;display:grid;
     grid-template-columns:1fr auto 1fr;align-items:center;padding:30px var(--pad) 0}
.nav__links{display:flex;gap:clamp(20px,3vw,44px)}
.nav__links a,.nav__end a{font-size:clamp(13px,1.15vw,16px);opacity:.86;transition:opacity .25s}
.nav__links a:hover,.nav__end a:hover{opacity:1}
.nav__mark{display:block;line-height:0}
.nav__mark img{display:block;width:auto;height:clamp(26px,2.59vw,37px)}
.nav__end{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.nav__bag{width:22px;height:22px;opacity:.86}

/* ============================================================ ACT 1: the ring ---
   Every product on a circle; the pressed one takes the middle. Plain page
   surface underneath — nothing is composited into anything. */
/* The ground is her own professional studio backdrop (Rosh Hashana shoot,
   _raw/Rosh Hashana), cropped above the props so it carries no products, then
   softened so ten cutouts read on top. Candidates that lost, and why:
     clinic / clinic_warm  her treatment room — the wall sconces sit exactly
                           where the products do and the struck price went
                           illegible
     whisper / botanic     leaf shadows dominated and darkened the buy column
     dappled / bands       the crop band ran into the props; a blurred soap
                           bottle bled across the frame
   Built by _scrape/bg_candidates.py. */
.pkg{position:relative;min-height:100svh;display:grid;
     grid-template-columns:minmax(0,1fr) minmax(330px,38%);
     align-items:center;overflow:hidden;isolation:isolate}
.field{position:absolute;inset:0;z-index:0;overflow:hidden}
.field__vid{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
/* The room is a real photograph, so the page has to hold its own contrast:
   a soft pool behind the ring, and a stronger wash under the buy column, where
   a struck-through price is the first thing to become illegible. */
.pkg::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(64% 74% at 30% 48%, rgba(252,249,243,.62) 0%, rgba(252,249,243,0) 72%),
    linear-gradient(270deg, rgba(251,248,242,.90) 0%, rgba(251,248,242,.72) 22%,
                    rgba(251,248,242,0) 46%),
    linear-gradient(180deg, rgba(250,247,240,.34) 0%, rgba(250,247,240,0) 30%,
                    rgba(250,247,240,.40) 100%)}
/* the field is the ground, not a column — it must keep its own
   absolute positioning against this rule */
.pkg > *:not(.field){position:relative;z-index:1}

.pkg__stage{position:relative;height:100svh;min-height:640px;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,4vh,48px) 0}

.ring{position:relative;width:min(62vh,78%);aspect-ratio:1;flex:0 0 auto}
.ring__line{position:absolute;inset:0;width:100%;height:100%;color:var(--gold);
  opacity:.55}
.ring__orbs{position:absolute;inset:0}

/* a product on the circumference */
.orb{position:absolute;transform:translate(-50%,-50%);cursor:pointer;
  width:var(--orb,104px);height:var(--orb,104px);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .45s var(--ease),filter .45s var(--ease),
             transform .55s cubic-bezier(.22,1,.36,1)}
.orb img{max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(86,66,42,.22))}
.orb:hover{transform:translate(-50%,-50%) scale(1.10)}
.orb.is-mid{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.5)}
.ring.is-picked .orb:not(.is-mid){opacity:.52}
.ring.is-picked .orb:not(.is-mid):hover{opacity:1}

/* the middle */
.ring__mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:38%;height:44%;display:flex;align-items:center;justify-content:center;
  pointer-events:none}
.ring__still{position:absolute;max-width:100%;max-height:100%;
  width:auto;height:100%;object-fit:contain;
  filter:drop-shadow(0 26px 40px rgba(86,66,42,.26));
  /* the product pages' own bob: 3.8% over 5.6s, and nothing else */
  animation:bob 5.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(-1.9%)}50%{transform:translateY(1.9%)}}
@media (prefers-reduced-motion:reduce){.ring__still{animation:none}}

/* seated INSIDE the ring's opening: below the middle product (which ends at
   72% of the ring) and above the arc's bottom, where the gap means no product */
.ring__info{position:absolute;left:50%;top:76%;transform:translateX(-50%);
  width:min(46%,34ch);text-align:center;z-index:4;pointer-events:none}
.ring__info h2{font-family:var(--disp);font-weight:300;
  font-size:clamp(17px,1.7vw,25px);color:var(--ink);line-height:1.18}
.ring__info p{margin:7px 0 0;font-size:clamp(12.5px,1vw,14.5px);line-height:1.55;
  color:var(--ink-soft)}
.ring__price{margin-top:10px !important;color:var(--gold-deep) !important;
  font-size:15px !important}

/* ---- the buy column: matches the product pages ---- */
.pkg__buy{position:relative;z-index:6;justify-self:end;text-align:right;
  padding:0 var(--pad) 0 clamp(12px,2vw,36px);max-width:560px;width:100%}
.pkg__name{margin:0;font-family:var(--disp);font-weight:300;
  font-size:clamp(32px,3.9vw,58px);line-height:1.04;letter-spacing:-.008em;color:var(--ink)}
.pkg__he{margin:13px 0 0;font-family:var(--disp);font-weight:300;
  font-size:clamp(17px,1.6vw,23px);line-height:1.35;color:var(--charcoal);direction:rtl}
.pkg__price{margin:clamp(20px,2.6vw,34px) 0 10px;font-size:clamp(24px,2.3vw,33px);
  font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.pkg__price .cur{font-size:.68em;color:var(--gold-deep)}
.pkg__price .was{font-size:.55em;font-weight:400;color:var(--ink-faint);
  text-decoration:line-through;margin-inline-start:12px}
.pkg__save{display:inline-block;font-size:13px;color:var(--gold-deep);
  border:1px solid var(--gold-light);border-radius:999px;padding:6px 14px;margin-bottom:22px}
.pkg__cart{display:block;width:min(100%,330px);height:clamp(52px,3.9vw,60px);margin-left:auto;
  border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(168deg,#F0CD86 0%, var(--gold) 46%, #9A7126 100%);
  color:#241B08;font-family:var(--sans);font-size:clamp(15px,1.2vw,17.5px);
  font-weight:700;letter-spacing:.01em;
  box-shadow:0 10px 26px -12px rgba(142,107,57,.85), inset 0 1px 0 rgba(255,255,255,.42);
  transition:transform .3s cubic-bezier(.22,1,.36,1),filter .3s,box-shadow .3s}
.pkg__cart:hover{transform:translateY(-2px);filter:brightness(1.04)}

@media (max-width:1080px){
  .pkg{grid-template-columns:1fr;min-height:auto;padding-bottom:40px}
  .pkg__stage{height:auto;min-height:0}
  .ring{width:min(84vw,520px)}
  .pkg__buy{padding:0 var(--pad);max-width:none;text-align:right}
  .pkg__cart{margin-left:0;margin-right:auto;width:100%}
}

/* ==================================================== the acts, shared shell */
.act{position:relative;padding:clamp(84px,9vw,150px) var(--pad);overflow:hidden;
  isolation:isolate}
.act--contents{background:linear-gradient(180deg,var(--g4) 0%,var(--g2) 42%,var(--g2b) 100%)}
.act--ritual{background:var(--g1);padding:0 0 clamp(84px,9vw,140px)}
.act--value{background:linear-gradient(180deg,var(--g2b) 0%,var(--g3) 46%,var(--g3) 100%)}
.act--use{background:var(--g4)}

.act__wash{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(64% 44% at 22% 8%, rgba(255,253,248,.9) 0%, rgba(255,253,248,0) 70%)}

.act__head{max-width:1280px;margin:0 auto clamp(52px,6vw,96px)}
.act__head--c{text-align:center}
/* Frank Ruhl Libre 300 — the brand display face, from yaara_scroll/index.html.
   NOT FiraGO and NOT Drugulin: both are substitutions that were made and
   rejected before. Other Yaara files carry the wrong one, so they are not a
   source. See feedback_yaara_brand_font. */
.act__title{font-family:var(--disp);font-weight:300;letter-spacing:-.004em;
  font-size:clamp(30px,3.6vw,54px);color:var(--ink);line-height:1.08}
.act__lede{font-size:clamp(15px,1.3vw,18px);line-height:1.68;color:var(--ink-soft);
  max-width:60ch;margin:16px 0 0}

/* --------------------------------------------- ACT 2: products in their light */
.stand{max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(28px,3.4vw,58px) clamp(18px,2.2vw,34px)}
.item{position:relative;text-align:center;cursor:pointer;padding-top:22px;
  transition:transform .45s var(--ease)}
.item:nth-child(even){transform:translateY(clamp(18px,2.4vw,40px))}
.item:hover{transform:translateY(-8px)}
.item:nth-child(even):hover{transform:translateY(clamp(10px,2.4vw,32px))}
/* An object reads as placed by what happens where it MEETS the ground. This has
   to sit at the base of the PRODUCT, not the base of the card — anchored to the
   item it floated far below the bottle and everything looked pasted on. */
.item__pool{display:none}
.item__shot{position:relative}
.item__shot::after{content:"";position:absolute;left:50%;bottom:-3px;
  width:62%;height:15px;transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side, rgba(92,72,46,.40), rgba(92,72,46,0))}
/* a second, wider pool: the soft ambient the tight contact patch cannot give */
.item__shot::before{content:"";position:absolute;left:50%;bottom:-9px;
  width:104%;height:34px;transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side, rgba(104,84,58,.20), rgba(104,84,58,0))}
.item__shot{position:relative;z-index:1;height:clamp(150px,15vw,232px);
  display:flex;align-items:flex-end;justify-content:center;isolation:isolate}
.item__shot img{max-height:100%;width:auto;object-fit:contain;position:relative;z-index:1;
  filter:drop-shadow(0 10px 15px rgba(86,66,42,.20))}
.item__refl{position:relative;z-index:0;height:clamp(26px,3vw,44px);margin-top:0;
  opacity:.17;overflow:hidden}
.item__refl img{max-height:none;height:clamp(150px,15vw,232px);width:auto;margin:0 auto;
  transform:scaleY(-1);transform-origin:top;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 72%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 72%)}
.item__name{font-family:var(--disp);font-weight:400;
  font-size:clamp(15px,1.25vw,18px);color:var(--ink);line-height:1.34;direction:rtl}
.item__role{margin:7px auto 0;max-width:26ch;font-size:13.5px;line-height:1.58;
  color:var(--ink-soft);direction:rtl}
.item__price{margin-top:10px;font-size:14px;color:var(--gold-deep)}

/* ------------------------------------------------------- ACT 3: the ritual ---
   No plate: the one available was a tight crop of an eye and a finger, with a
   5-second loop of her washing her face cycling in a circle on top. Her steps
   each name a product, so the step shows the product. */
.act--ritual{background:linear-gradient(180deg,var(--g2b) 0%,var(--g1) 30%,var(--g1) 100%)}
.ritual__panel{max-width:1280px;margin:0 auto}
.rit{display:grid;gap:clamp(30px,3.4vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(292px,1fr))}
.rit__grp h3{font-family:var(--disp);font-weight:400;font-size:19px;color:var(--ink);
  margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.rit__step{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:11px 0}
.rit__step+.rit__step{border-top:1px solid rgba(125,105,75,.10)}
/* the product this step is about, matted, no frame */
.rit__pic{width:52px;height:64px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center}
.rit__pic img{max-width:100%;max-height:100%;object-fit:contain;object-position:50% 100%;
  filter:drop-shadow(0 6px 9px rgba(86,66,42,.26))}
/* same 52px gutter as the product, so a numbered row and a product row line up */
.rit__n{width:52px;height:64px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;color:var(--gold-deep);font-size:12px;direction:ltr}
.rit__t{font-size:14.5px;line-height:1.68;color:var(--ink-soft);align-self:center}

/* --------------------------------------------------- ACT 4: the arithmetic */
.tally{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;
  justify-content:center;gap:clamp(12px,1.7vw,28px)}
.tally__i{text-align:center;width:clamp(52px,5.4vw,82px)}
.tally__i img{width:100%;height:clamp(72px,7.4vw,112px);object-fit:contain;
  object-position:50% 100%;filter:drop-shadow(0 10px 14px rgba(86,66,42,.24))}
.sums{max-width:620px;margin:clamp(52px,6vw,88px) auto 0}
.sums__row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:14px 0;direction:rtl}
.sums__row+.sums__row{border-top:1px solid var(--line)}
.sums__lbl{font-size:15px;color:var(--ink-soft)}
.sums__parts{font-size:clamp(24px,2.4vw,34px);color:var(--ink-faint);position:relative;
  direction:ltr}
.sums__parts::after{content:"";position:absolute;left:-3%;right:-3%;top:54%;height:1px;
  background:var(--ink-faint);transform:scaleX(0);transform-origin:right;
  transition:transform .55s var(--ease)}
.sums__parts.on::after{transform:scaleX(1)}
.sums__final{font-family:var(--disp);font-weight:300;
  font-size:clamp(38px,4.6vw,68px);letter-spacing:-.015em;direction:ltr;
  background:var(--metal-ink);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold-deep)}
.sums__note{margin:26px 0 0;font-size:15px;line-height:1.6;color:var(--gold-deep);
  text-align:center;direction:rtl}

/* ------------------------------------------------- ACT 5: usage + notices */
.use{max-width:900px;margin:0 auto}
.use details{border-top:1px solid var(--line)}
.use details:last-child{border-bottom:1px solid var(--line)}
.use summary{cursor:pointer;padding:20px 4px;font-family:var(--disp);
  font-weight:400;font-size:17px;
  color:var(--ink);list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:16px;direction:rtl;text-align:right;
  transition:color .25s var(--ease)}
.use summary:hover{color:var(--gold-deep)}
.use summary::-webkit-details-marker{display:none}
.use summary::after{content:"";width:11px;height:11px;flex:0 0 auto;
  border-right:1px solid var(--gold-deep);border-bottom:1px solid var(--gold-deep);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease)}
.use details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.use .body{padding:0 4px 24px;font-size:14.5px;line-height:1.72;color:var(--ink-soft);
  max-width:70ch}

.notices{max-width:900px;margin:clamp(56px,6vw,92px) auto 0}

/* ------------------------------------------------------------ buy bar ---
   always reachable: the page never holds the buy action hostage to a scroll */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;gap:18px;justify-content:space-between;
  padding:12px var(--pad);background:rgba(250,247,240,.93);
  backdrop-filter:blur(14px);border-top:1px solid var(--line);
  transform:translateY(100%);transition:transform .4s var(--ease)}
.buybar.on{transform:none}
.buybar__l{display:flex;align-items:baseline;gap:12px;flex-direction:row-reverse}
.buybar__name{font-family:var(--disp);font-weight:400;font-size:16px;
  color:var(--ink);direction:rtl}
.buybar__price{font-size:19px;color:var(--ink)}
.buybar__was{font-size:13px;color:var(--ink-faint);text-decoration:line-through}
.buybar__cta{border:0;cursor:pointer;background:var(--metal);color:#241B08;
  font-family:var(--sans);font-size:14.5px;font-weight:500;padding:12px 30px;border-radius:2px}

/* ---------------------------------------------------------- review tools */
.tools{position:fixed;bottom:8px;left:8px;z-index:80;display:flex;gap:1px;
  background:rgba(20,16,10,.62);font-size:11px;border-radius:999px;overflow:hidden;
  opacity:.30;transition:opacity .25s var(--ease)}
.tools:hover{opacity:1}
.tools button{background:transparent;border:0;color:#E9DFC8;padding:7px 11px;
  cursor:pointer;font-family:var(--sans);font-size:11px;letter-spacing:.02em}
.tools button:hover{background:rgba(217,169,77,.22)}
.tools button.on{background:var(--gold);color:#241B08}
.tools .grp{display:flex;gap:1px;border-inline-end:1px solid rgba(255,255,255,.14)}
.tools select{background:transparent;color:#E9DFC8;border:0;font-size:11px;padding:7px 8px;
  font-family:var(--sans);cursor:pointer;max-width:210px}
.tools select option{background:#1a1610;color:#E9DFC8}

/* --------------------------------------------------------------- motion */
.rise{opacity:0;transform:translateY(22px)}

@media (max-width:1080px){
  .pkg{grid-template-columns:1fr;min-height:auto;padding-bottom:40px}
  .pkg__stage{height:64svh;min-height:430px}
  .pkg__buy{padding:0 var(--pad);max-width:none;margin-top:8px}
  .pkg__price{justify-content:flex-end}
}
@media (max-width:680px){
  .comp{grid-template-columns:64px 1fr;gap:14px;padding:14px 16px}
  .comp__fig{width:64px;height:78px}
  .comp__price{grid-column:2;text-align:right;direction:rtl}
  .buybar__name{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ═══════════════ R28 · landing DNA (loads after yaara.css + shell.css) ═══════════════ */
:root{--disp:var(--f);--sans:var(--f);--serif:var(--f);--hand:var(--f);
  --g1:var(--bg);--g1b:var(--bg);--g2:var(--bg);--g2b:var(--bg);--g3:var(--bg);--g4:var(--bg);--g4b:var(--bg);
  --ink:#33291D;--ivory:var(--bg);--charcoal:#33291D;--ink-soft:var(--ink-2);--ink-faint:var(--ink-3);
  --gold:#B28B52;--gold-deep:#8E6B39;--line:rgba(84,64,40,.14)}
html{scroll-behavior:auto}
body{background:transparent;color:var(--ink);font:400 16px/1.75 var(--f)}
body::after{display:none}
.nav,.tools{display:none}
.act{padding:var(--act) var(--gutter)}
.act--contents,.act--ritual,.act--value,.act--use{background:transparent}
.act__title{font:600 clamp(36px,4.6vw,72px)/1.08 var(--f);letter-spacing:-.015em;color:transparent;
  background:linear-gradient(100deg,var(--ink) 34%,var(--honey) 50%,var(--ink) 66%);
  background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text}
.act__lede{font-size:clamp(16.5px,1.32vw,19px);line-height:1.75;color:var(--ink-2)}
.pkg__name{font-weight:600;letter-spacing:-.02em}
.pkg__he{font-weight:500;color:var(--ink-2)}
.ring__info h2{font-weight:600}
.buybar{background:rgba(253,250,245,.93);border-top:1px solid var(--line)}
.use summary{font-weight:600}

/* the homepage band: nine sets, each a mini shelf of its own components */
.pkgs{padding-top:calc(64px + var(--act))}
.pkgs .pgrid{grid-template-columns:repeat(3,1fr);gap:18px}
/* CLS: the nine cards are rendered from packages.json after first paint.
   Until they arrive the grid holds a screen of height, so the footer never
   paints inside the viewport only to be pushed out of it - that one move was
   0.24 of the 0.3233 score. :empty stops matching the moment the cards land,
   so no reserved space survives into the finished layout. */
.pkgs .pgrid:empty{min-height:100vh}
@media(max-width:900px){.pkgs .pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pkgs .pgrid{grid-template-columns:1fr}}
.pkcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:18px 18px 16px;
  box-shadow:var(--glow-soft);color:var(--ink);direction:rtl;text-align:right;
  transition:transform var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out)}
.pkcard:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(178,139,82,.22);border-color:rgba(178,139,82,.45)}
.pkcard.is-on{border-color:var(--honey);box-shadow:var(--glow-gold)}
.pk-shelf{display:flex;justify-content:center;align-items:flex-end;gap:8px;height:150px;margin-bottom:14px;direction:ltr}
.pk-shelf img{height:100%;width:auto;max-width:calc((100% - (var(--per,4) - 1) * 8px) / var(--per,4));object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 10px 14px rgba(96,66,32,.18))}
/* six products and more: two rows, so every item in the kit is on its card (2026-09-05) */
.pk-shelf[data-rows="2"]{flex-wrap:wrap;align-content:flex-end;row-gap:6px}
.pk-shelf[data-rows="2"] img{height:calc(50% - 3px)}
.pk-n{display:block;font:600 17px/1.35 var(--f);color:var(--ink)}
.pk-pr{display:block;font:500 20px/1 var(--f);color:var(--honey-deep);margin-top:10px;font-variant-numeric:tabular-nums}
.pk-pr s{font-size:14px;color:var(--ink-3);margin-inline-start:8px}
.pkcard{position:relative}
/* the homepage features ALL sets; one set's detail lives behind ?p=<id> */
body.is-home .pkg,body.is-home .act--contents,body.is-home .act--ritual,body.is-home .act--value,body.is-home .act--use,body.is-home .buybar{display:none}
body.is-detail .pkgs{padding-bottom:0}
body.is-detail .pkgs .pgrid,body.is-detail .pkgs .sub{display:none}
.pk-back{display:none;font:600 14px/1 var(--f);color:var(--honey-deep);margin-top:14px}
body.is-detail .pk-back{display:inline-block}

/* R39 - tell purge: no chips, no pills, no eyebrows, no micro labels */
.pk-pr em{font-style:normal;font-weight:500;font-size:15px;color:var(--honey-deep);margin-inline-start:12px}
/* the saving on a set card: the same square chip the store grid uses, so the two grids read alike */
.pkcard .off{position:absolute;top:12px;inset-inline-start:12px;z-index:2;
  display:grid;place-items:center;min-width:40px;height:25px;padding:0 7px;
  border:1px solid var(--honey-deep);background:var(--card);color:var(--honey-deep);
  font:600 12.5px/1 var(--f);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.pkg__save{border:0;border-radius:0;padding:0;font-size:15px;color:var(--honey-deep);margin-bottom:22px}
.pkg__cart{width:min(100%,330px);height:auto;padding:18px 26px;border-radius:3px;
  background:linear-gradient(105deg,#A57C42,#C9A468 55%,#A57C42);background-size:200% 100%;
  color:var(--ink);font:600 15px/1 var(--f);letter-spacing:.04em;box-shadow:none;
  transition:background-position .5s var(--ease-out),transform var(--t-ui) var(--ease-out)}
.pkg__cart:hover{background-position:100% 0;transform:none;filter:none}
.pkg__cart:active{transform:scale(.98)}
.buybar__cta{border-radius:3px;padding:14px 26px;
  background:linear-gradient(105deg,#A57C42,#C9A468 55%,#A57C42);background-size:200% 100%;
  color:var(--ink);font:600 15px/1 var(--f);letter-spacing:.04em;box-shadow:none;
  transition:background-position .5s var(--ease-out)}
.buybar__cta:hover{background-position:100% 0}
.buybar__was{font-size:14px}
.buybar__name{font-size:15px}
.pkg__price .was{font-size:14px}
.ring__info p{font-size:clamp(14px,1vw,15px)}
.item__role{font-size:15px}
.notices p{font-size:16px;line-height:1.78;color:var(--ink-2);max-width:72ch;margin:0}
.notices p+p{margin-top:18px}

/* ═══════════════ R44 · phone. Adapt, never hide ═══════════════════════════════
   Three things were wrong in a hand. The buy bar deleted the set's NAME under
   680, so the bar read "2,085 ₪ · הוספה לסל" with no idea what for. The ring's
   floating caption sat on top of the pack art, because it is placed at 76% of a
   circle that is nearly the whole screen. And the fixed bar covered the last
   line of the footer, because --buybar-h was never given a value. Everything
   below returns an element or gives it room; nothing here is display:none. */
@media(max-width:760px){
  /* the band already sits inside .wrap, so the act's own gutter doubled it and
     the shelf was inset 40px where the store's is inset 20 */
  .pkgs{padding-top:calc(58px + var(--act));padding-inline:0}
  .pkgs .pk-shelf{height:172px}
  .pk-n{font-size:18px}

  /* the hero: the circle keeps its orbs INSIDE the screen, and its caption
     stands under it instead of across the jar in the middle */
  .pkg{padding-bottom:22px}
  .pkg__stage{height:auto;min-height:0;flex-direction:column;justify-content:flex-start;
    gap:8px;padding:16px 0 0}
  .ring{width:min(70vw,340px)}
  .orb{width:min(var(--orb,104px),20vw);height:min(var(--orb,104px),20vw)}
  .ring__info{position:static;transform:none;width:min(94%,42ch);margin:0 auto;
    padding:2px var(--gutter) 0}
  .pkg__buy{margin-top:10px;padding:0 var(--gutter)}
  .pkg__name{font-size:clamp(28px,8.4vw,40px)}
  .pkg__he{font-size:19px}
  .pkg__cart{height:auto;min-height:52px;padding:16px 24px;font-size:16px}

  /* the acts read as one shelf, two abreast, instead of one tall column */
  .stand{grid-template-columns:1fr 1fr;gap:26px 14px}
  .item{padding-top:10px}
  .item:nth-child(even){transform:translateY(16px)}
  .item:nth-child(even):hover{transform:translateY(16px)}
  .item__shot{height:132px}
  .item__refl img{height:132px}
  .item__role{max-width:22ch}
  .rit{grid-template-columns:1fr;gap:28px}
  .use summary{padding:18px 4px;min-height:52px}
  .sums__row{gap:12px}

  /* the buy bar: the name comes back, the bar clears the home indicator, and
     the page finally reserves the room the bar has always been standing in */
  body.is-detail{--buybar-h:calc(74px + env(safe-area-inset-bottom,0px))}
  .buybar{gap:12px;padding:10px var(--gutter);
    padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
  .buybar__l{flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:1px;min-width:0}
  .buybar__name{display:block;flex:1 0 100%;order:-1;font-size:15px;max-width:46vw;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .buybar__price{font-size:18px}
  .buybar__cta{min-height:46px;padding:13px 20px;font-size:14.5px;white-space:nowrap}

  .pk-back{padding-block:14px}
  body.is-detail .pk-back{display:inline-flex;align-items:center;min-height:44px}
}
@media(max-width:400px){
  .buybar__cta{padding:13px 16px}
  .buybar__name{max-width:40vw}
}