/* ═══ יערת הדבש — constitution tokens (CONSTITUTION.md) ═══ */
@font-face{font-family:FRL;src:url("/wp-content/themes/yaara-awwwards/assets/fonts/frl-300-sub.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:FRL;src:url("/wp-content/themes/yaara-awwwards/assets/fonts/frl-900-sub.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:Assistant;src:url("/wp-content/themes/yaara-awwwards/assets/fonts/assistant-400-sub.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Assistant;src:url("/wp-content/themes/yaara-awwwards/assets/fonts/assistant-600-sub.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Heebo;src:url("/wp-content/themes/yaara-awwwards/assets/fonts/heebo-vf-sub.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"Google Sans";src:url("/wp-content/themes/yaara-awwwards/assets/fonts/google-sans-400-sub.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Google Sans";src:url("/wp-content/themes/yaara-awwwards/assets/fonts/google-sans-500-sub.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Google Sans";src:url("/wp-content/themes/yaara-awwwards/assets/fonts/google-sans-700-sub.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* LUMINOUS PORCELAIN — a near-white ground that is LIT, not painted:
     golden light washes on clean porcelain; warmth is light, never pigment */
  --bg:#FAF7F2; --card:#FFFFFF; --dark:#14100B;
  --ink:#33291D; --ink-2:#6E5C48; --ink-3:#A29076; --on-dark:#F6F0E4;
  --honey:#B28B52; --honey-deep:#8E6B39; --champagne:#D9BE93;
  --line:rgba(84,64,40,.14);
  --glow-soft:0 14px 44px rgba(178,139,82,.13);
  --glow-gold:0 0 30px rgba(201,164,104,.35);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-mask:cubic-bezier(.19,1,.22,1);
  --t-ui:.3s; --t-reveal:.65s; --t-editorial:1.4s;
  --disp:FRL,serif; --tick:"Google Sans",Heebo,sans-serif;
  --f:"Google Sans",Heebo,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;color:var(--ink);
     background:
       radial-gradient(1100px 720px at 88% -8%, rgba(233,201,143,.34), transparent 62%),
       radial-gradient(900px 680px at -8% 34%, rgba(228,196,150,.17), transparent 56%),
       radial-gradient(1300px 900px at 50% 118%, rgba(233,201,143,.20), transparent 60%),
       var(--bg);
     font:400 16px/1.75 var(--f);-webkit-font-smoothing:antialiased}
img,video,canvas{max-width:100%;display:block}
a{color:var(--honey);text-decoration:none}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--honey-deep);outline-offset:3px;border-radius:2px}

h1,h2,.disp{font-family:var(--disp);font-weight:300;margin:0;
  line-height:1.08;letter-spacing:.005em;text-wrap:balance}
h1{font-size:clamp(52px,7.2vw,104px)}
h2{font-size:clamp(34px,4.2vw,60px)}
h1 b,h2 b{font-weight:900;color:var(--honey)}
.eyebrow{display:block;font:600 11.5px/1 var(--f);letter-spacing:.2em;
  color:var(--ink-3);margin:0 0 18px}
.lede{font-size:17px;line-height:1.8;color:var(--ink-2);max-width:34em}
.tick{font-family:var(--tick);font-weight:300;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;color:var(--honey-deep)}
.btn{display:inline-block;background:var(--ink);color:var(--bg);
  font:600 15px/1 var(--f);letter-spacing:.04em;padding:14px 26px;border:0;
  border-radius:3px;cursor:pointer;
  transition:transform var(--t-ui) var(--ease-out),background var(--t-ui) var(--ease-out)}
.btn:hover{background:#2A241E}
.btn:active{transform:scale(.98)}
.link{font:600 15px/1 var(--f);color:var(--honey-deep)}

/* masked line reveals (yline) */
.yline{display:block;overflow:hidden}
.yline>.yinner{display:block;transform:translateY(0)}
[data-reveal] .yinner{will-change:transform}

/* motion is a privilege, not a default */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

::selection{background:rgba(201,158,98,.4)}
.btn-gold{color:#241705 !important;box-shadow:var(--glow-gold)}

/* inline wiki-style link + kit-membership note (Yaara review 2026-08-24) */
.ulink{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ulink:hover{text-decoration-thickness:2px}
.pkg-line{margin-top:12px;font-size:15px;color:var(--ink-2,#6b6257)}

/* reveal-safe: show reveal WRAPPERS only; never touch .ba slider clip/transform */
.rv,[data-rv],.wipe,.figw{opacity:1!important;visibility:visible!important}
.rv,[data-rv]{transform:none!important}
.wipe:not(.ba):not(.ba *){clip-path:none!important}

.pr s.was{text-decoration:line-through;opacity:.42;font-weight:400;margin-inline-end:.4em}

/* ── the buy options: quick buy + subscribe (operator 2026-09-02/03) ─────────
   Built from the page's own vocabulary: the quick-buy IS the site's .btn in its
   quiet outline form, and the subscribe panel is one honey-ruled surface with a
   hairline between its two plans — no boxed chips, no borders around every line. */
.buyopts{margin-top:16px;display:grid;gap:12px}

/* quick buy — the site's button, outlined */
.buyopt--now{display:inline-flex;align-items:center;justify-content:center;width:100%;
  min-height:50px;padding:14px 26px;border:1px solid var(--ink);border-radius:3px;
  background:transparent;color:var(--ink);cursor:pointer;
  font:600 15px/1 var(--f);letter-spacing:.04em;
  transition:background var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out),
    transform var(--t-ui) var(--ease-out)}
.buyopt--now:hover{background:var(--ink);color:var(--bg)}
.buyopt--now:active{transform:scale(.98)}

/* the subscription panel: one surface, two rows, a hairline between */
.buyopt--sub,.buyopt--year{position:relative;display:grid;
  grid-template-columns:1fr auto;align-items:baseline;column-gap:16px;row-gap:2px;
  width:100%;text-align:start;cursor:pointer;border:0;background:transparent;
  padding:16px 18px;color:var(--ink);
  transition:background var(--t-ui) var(--ease-out)}
.buyopt--sub{border:1px solid var(--honey);border-radius:3px 3px 0 0;
  background:linear-gradient(0deg,rgba(217,190,147,.14),rgba(217,190,147,.14)),var(--card)}
.buyopt--year{border:1px solid var(--honey);border-top:0;border-radius:0 0 3px 3px;
  background:var(--card)}
.buyopt--sub:hover,.buyopt--year:hover{background:linear-gradient(0deg,rgba(217,190,147,.24),rgba(217,190,147,.24)),var(--card)}
.buyopt--sub::after{content:"";position:absolute;inset-inline:18px;bottom:-1px;height:1px;
  background:rgba(178,139,82,.35)}
.buyopt .l{grid-column:1;font:600 16px/1.3 var(--f);letter-spacing:.01em}
.buyopt .s{grid-column:1;font:400 14px/1.5 var(--f);color:var(--ink-3)}
.buyopt .p{grid-column:2;grid-row:1;align-self:baseline;white-space:nowrap;text-align:end;
  font:600 19px/1.15 var(--f);color:var(--honey-deep);font-variant-numeric:tabular-nums}
.buyopt--year .p{font-size:17px;color:var(--ink-2)}
/* What one delivery costs under the plan, under the amount charged. Set heavier and a step larger
   than the sub-label beside it: on the prepaid plans this is the number that is actually lower than
   the one-time price, and it was reading as small print. */
.buyopt .u{grid-column:2;grid-row:2;white-space:nowrap;text-align:end;
  font:600 14.5px/1.35 var(--f);color:var(--honey-deep);font-variant-numeric:tabular-nums}
.buyopt--year .u{color:var(--honey-deep)}
@media(max-width:520px){
  .buyopt--sub,.buyopt--year{grid-template-columns:1fr;row-gap:6px}
  .buyopt .p,.buyopt .u{grid-column:1;grid-row:auto;justify-self:start;text-align:start}
  .buyopt .u{margin-top:-4px}
}
.cart-items .ci .meta.plan{color:var(--honey-deep);font-weight:600}

/* the PDP hero's struck regular: it rendered flush against the sale price ("219209") */
.pdp__price .pdp__was{margin-inline-start:.5em;font-weight:400;opacity:.45;
  text-decoration:line-through}

/* add-to-cart and quick-buy share one row; the subscription panel sits under them */
.buyrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch;margin-top:6px}
/* the row's children are an <a> and a <button> with their own widths - the row owns
   the geometry so the pair reads as one control, not two odd sizes */
.buyrow>.pdp__cart,.buyrow>.pkg__cart,.buyrow>.buyopt--now,.buyrow>*{
  margin:0!important;width:100%!important;min-width:0;box-sizing:border-box;
  display:inline-flex!important;align-items:center;justify-content:center;
  min-height:50px;padding:14px 20px;text-align:center}
@media(max-width:520px){.buyrow{grid-template-columns:1fr}}

/* ── the ingredients block on a PDP (inc/ingredients.php, 2026-09-05) ─────────────────
   One closed disclosure under the usage act: the word the live site uses, a hairline, and
   the INCI list in Latin, left to right. No box, no chip. */
.inci{padding:clamp(28px,4vw,56px) var(--pad,24px) clamp(20px,3vw,40px)}
.inci__wrap{max-width:760px;margin:0 auto}
.inci__d{border-top:1px solid var(--line,rgba(60,40,20,.14));border-bottom:1px solid var(--line,rgba(60,40,20,.14))}
.inci__s{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;
  padding:18px 0;font:600 17px/1.3 var(--f);color:var(--ink,#241705);-webkit-tap-highlight-color:transparent}
.inci__s::-webkit-details-marker{display:none}
.inci__s i{position:relative;width:18px;height:18px;flex:none}
.inci__s i::before,.inci__s i::after{content:"";position:absolute;inset:50% auto auto 50%;background:currentColor;
  width:14px;height:1.5px;transform:translate(-50%,-50%);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.inci__s i::after{transform:translate(-50%,-50%) rotate(90deg)}
.inci__d[open] .inci__s i::after{transform:translate(-50%,-50%) rotate(0)}
.inci__list{margin:0 0 14px;font:400 15px/1.8 var(--f);color:var(--ink-2,#3d2e1e);text-align:left}
.inci__note{margin:0 0 20px;font:400 14px/1.7 var(--f);color:var(--ink-3,#6b5a48)}
@media(max-width:760px){.inci__s{padding:16px 0;font-size:16px}.inci__list{font-size:14.5px}}

/* ── the questionnaire button in the bar, on EVERY surface (2026-09-05, screenshot 187) ──────
   The base rule lived in shell.css only; the landing and the bespoke PDPs load yaara.css +
   their own sheet and never shell.css, so there the link rendered as bare text that wrapped
   into three floating lines beside the logo on a phone. yaara.css is the one sheet every
   surface loads. Below 760px the phone menu carries it (menu.js .phm-cta). */
.navcta{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;
  border:1px solid var(--honey-deep,#8e6b39);color:var(--honey-deep,#8e6b39);background:transparent;
  font:600 15px/1 var(--f);white-space:nowrap;text-decoration:none;
  transition:background .3s cubic-bezier(.22,1,.36,1),color .3s cubic-bezier(.22,1,.36,1)}
/* The bar's order, every surface: brand at the start, the nav CENTRED in the free space, the
   questionnaire button and the cart together at the end. The build's header was three children spaced
   apart (brand / nav / cart) with the nav in the middle; a fourth child broke that, so the nav sits in
   the middle again by its own auto margins and the button joins the cart (operator, 2026-09-05). */
header nav,header.shell nav,header#hdr nav{margin-inline:auto}
.navcta{margin-inline-start:0}
header .cartpill{margin-inline-start:14px}
.navcta:hover,.navcta:focus-visible{background:var(--honey-deep,#8e6b39);color:var(--card,#fff)}
@media(max-width:980px){.navcta{padding:0 12px;font-size:13.5px;min-height:36px}}
@media(max-width:760px){.navcta{display:none}}

/* ── the usage film on a PDP (mist-2b-fixed is the one page that has it) ─────────────────────
   product.css lets the portrait how-to film fill its grid column at height:auto, which on a desktop
   is an 800 x 1400 px video (operator, screenshot 189). Cap it to the viewport and centre it. */
.usage--film .usage__film{display:flex;justify-content:center;align-items:center;box-shadow:none;background:transparent}
.usage--film .usage__film video{width:auto;max-width:100%;height:auto;max-height:min(68vh,620px);border-radius:4px;
  box-shadow:0 14px 44px rgba(178,139,82,.16)}
@media(max-width:880px){.usage--film .usage__film video{max-height:min(60vh,520px)}}