/* Shop stories (round 8, idea 1) on the live shop: the bar above the product tabs, the stories over the page, the four
   controls and the box card. Every rule starts from #s8bar or #s8st: an id outranks the theme's button rules (Hello's
   #c36 border, focus and hover colours), and every inner class is prefixed "s8-" so no theme class reaches inside.
   The jar drawer keeps its own stylesheet (subscription-preview.css). */
:is(#s8st,#s8bar){--s8-deep:#2c4a1d;--s8-green:#384A22;--s8-dark:#1f2c15;--s8-gold:#C9A56A;--s8-gold2:#9F814F;--s8-goldl:#E6C88E;
  --s8-cream:#F7F5E9;--s8-card:#FFFDF7;--s8-ink:#26301c;--s8-muted:#5d6950;--s8-sage:#E5ECDA;--s8-line:#E4DEC9;--s8-ok:#2f6b3a;--s8-red:#8a4b33;
  --s8-display:Fredoka,Heebo,sans-serif;--s8-body:Heebo,Arial,sans-serif;
  direction:rtl;font:400 16px/1.5 var(--s8-body);color:var(--s8-ink);-webkit-font-smoothing:antialiased;box-sizing:border-box}
:is(#s8st,#s8bar) *,:is(#s8st,#s8bar) *:before,:is(#s8st,#s8bar) *:after{box-sizing:border-box}
:is(#s8st,#s8bar) img{display:block;max-width:100%}
:is(#s8st,#s8bar) button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
:is(#s8st,#s8bar) svg.s8-i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:is(#s8st,#s8bar) h2,:is(#s8st,#s8bar) h3{margin:0;font-family:var(--s8-display);font-weight:500;letter-spacing:-.3px;line-height:1.12;text-wrap:balance}
:is(#s8st,#s8bar) p{margin:0}

/* ---------- the shop bar ---------- */
/* the container above the tabs has no side padding on phones; the shop's heading and grid use 5.682vw, so the bar does too */
#s8bar{position:relative;display:flex;align-items:center;gap:12px;width:calc(100% - 11.364vw);margin:10px auto 20px;padding:10px 12px 10px 10px;border:0;border-radius:18px;
  background:#F7F2E2;color:#2c4a1d;text-align:right;text-decoration:none;cursor:pointer;box-shadow:0 10px 22px rgba(0,0,0,.25)}
#s8bar .s8-rib{position:absolute;top:-10px;right:16px;background:#C9A56A;color:#22301a;border-radius:999px;padding:1px 10px;font:700 11.5px/1.6 var(--s8-body);box-shadow:0 3px 8px rgba(0,0,0,.18)}
/* a story ring around a jar, the sign everyone knows for "tap to watch" */
#s8bar .s8-ring{flex:none;width:52px;height:52px;border-radius:50%;padding:2.5px;background:conic-gradient(from 200deg,#C9A56A,#e9cf97,#768E5C,#2c4a1d,#C9A56A)}
#s8bar .s8-ring span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#F7F2E2;border:2px solid #F7F2E2;overflow:hidden}
#s8bar .s8-ring img{width:34px;height:42px;object-fit:contain;margin-top:6px}
#s8bar .s8-tx{flex:1;min-width:0}
#s8bar b{display:block;font:700 16.5px/1.25 var(--s8-body);white-space:nowrap}
#s8bar small{display:block;font:500 13px/1.35 var(--s8-body);color:#5f6b4f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s8bar .s8-end{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#2c4a1d;color:#fff}
#s8bar .s8-end svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#s8bar .s8-end.s8-play svg{fill:currentColor;stroke:none;width:16px;height:16px;margin-left:3px}
@media(min-width:900px){#s8bar{max-width:760px;margin:0 auto 26px;padding:12px 16px 12px 12px}#s8bar b{font-size:18px}#s8bar small{font-size:14px}}

/* ---------- stories ---------- */
#s8st{position:fixed;inset:0;z-index:9600;display:grid;place-items:center;background:rgba(14,19,9,.92);opacity:0;pointer-events:none;transition:opacity .22s}
#s8st.s8-on{opacity:1;pointer-events:auto}
#s8st .s8-card{position:relative;width:100%;height:100%;overflow:hidden;background:var(--s8-dark);transform:scale(.96);transition:transform .25s cubic-bezier(.2,.8,.2,1);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#s8st.s8-on .s8-card{transform:none}
#s8st .s8-bars{position:absolute;z-index:5;top:calc(10px + env(safe-area-inset-top,0px));left:12px;right:12px;display:flex;gap:4px}
#s8st .s8-bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.32);overflow:hidden}
#s8st .s8-bars i b{display:block;height:100%;width:0;background:#fff}
#s8st.s8-light .s8-bars i{background:rgba(44,74,29,.16)}#s8st.s8-light .s8-bars i b{background:var(--s8-deep)}
#s8st .s8-head{position:absolute;z-index:6;top:calc(22px + env(safe-area-inset-top,0px));left:10px;right:14px;display:flex;align-items:center;gap:9px;color:#fff}
#s8st.s8-light .s8-head{color:var(--s8-deep)}
#s8st .s8-head .s8-av{width:34px;height:34px;border-radius:50%;background:#F7F2E2;display:grid;place-items:center;overflow:hidden;border:2px solid var(--s8-gold)}
#s8st .s8-head .s8-av img{width:22px;height:28px;object-fit:contain;margin-top:5px}
#s8st .s8-head b{font:700 14.5px/1.2 var(--s8-body)}
#s8st .s8-head small{display:block;font:500 12px/1.2 var(--s8-body);opacity:.8}
#s8st .s8-head .s8-x{all:unset;cursor:pointer;margin-inline-start:auto;width:40px;height:40px;display:grid;place-items:center;font:300 30px/1 var(--s8-body)}
#s8st .s8-slide{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(78px + env(safe-area-inset-top,0px)) 22px calc(22px + env(safe-area-inset-bottom,0px));opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
#s8st .s8-slide.s8-on{opacity:1;visibility:visible;transition:opacity .3s}
#s8st .s8-slide.s8-g{background:radial-gradient(120% 80% at 85% 0%,rgba(230,200,142,.16),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(255,255,255,.08),transparent 60%),var(--s8-green);color:#fff}
#s8st .s8-slide.s8-c{background:var(--s8-cream);color:var(--s8-ink)}
#s8st .s8-slide.s8-s{background:var(--s8-sage);color:var(--s8-ink)}
#s8st .s8-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px;font:700 13px/1.2 var(--s8-body);background:rgba(255,255,255,.14);color:var(--s8-goldl)}
#s8st .s8-slide.s8-c .s8-tag,#s8st .s8-slide.s8-s .s8-tag{background:rgba(44,74,29,.08);color:var(--s8-gold2)}
#s8st h2{font-size:34px;margin-top:12px;color:inherit}
#s8st .s8-slide.s8-c h2,#s8st .s8-slide.s8-s h2{color:var(--s8-deep)}
#s8st .s8-lead{font:500 17px/1.5 var(--s8-body);margin-top:10px;opacity:.95}
#s8st .s8-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
#s8st .s8-stats span{display:inline-flex;align-items:center;gap:6px;border-radius:12px;padding:8px 12px;background:rgba(255,255,255,.12);font:700 15px/1.2 var(--s8-body);color:#fff}
#s8st .s8-stats svg{width:17px;height:17px;color:var(--s8-goldl);stroke-width:2.6}
#s8st .s8-jars{margin-top:auto;display:flex;justify-content:center;align-items:flex-end;direction:ltr;padding-bottom:6px}
#s8st .s8-jars img{width:26%;margin:0 -2.5%;filter:drop-shadow(0 16px 16px rgba(0,0,0,.35));transform:translateY(40px);opacity:0}
#s8st .s8-slide.s8-on .s8-jars img{animation:s8rise .7s cubic-bezier(.2,.8,.2,1) forwards}
#s8st .s8-slide.s8-on .s8-jars img:nth-child(2){animation-delay:.08s}#s8st .s8-slide.s8-on .s8-jars img:nth-child(3){animation-delay:.16s}#s8st .s8-slide.s8-on .s8-jars img:nth-child(4){animation-delay:.24s}
#s8st .s8-jars img:nth-child(2),#s8st .s8-jars img:nth-child(3){width:29%;position:relative;z-index:1}
@keyframes s8rise{to{transform:none;opacity:1}}
#s8st .s8-live{position:relative;z-index:3}
#s8st .s8-slide .s8-live{pointer-events:auto}
/* card 2: the four controls, inside the story */
#s8st .s8-qa{margin-top:18px}
/* card 3: the account screen with the cancel link */
#s8st .s8-acc{margin-top:18px;background:#fff;border-radius:20px;padding:14px;box-shadow:0 14px 30px rgba(44,74,29,.16)}
#s8st .s8-acc .s8-top{display:flex;justify-content:space-between;font:600 12px var(--s8-body);color:var(--s8-muted)}
#s8st .s8-acc .s8-nx{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:11px 12px;border-radius:14px;background:var(--s8-green);color:#fff}
#s8st .s8-acc .s8-nx small{display:block;font:500 11.5px var(--s8-body);opacity:.85}
#s8st .s8-acc .s8-nx b{font:700 15.5px/1.3 var(--s8-body)}
#s8st .s8-acc .s8-nx strong{font:800 17px var(--s8-body)}
#s8st .s8-acc .s8-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
#s8st .s8-acc .s8-row span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border-radius:12px;border:1px solid var(--s8-green);color:var(--s8-green);font:600 13px var(--s8-body)}
#s8st .s8-acc .s8-row svg{width:15px;height:15px}
#s8st .s8-acc .s8-cx{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font:500 12px var(--s8-body);color:var(--s8-muted)}
#s8st .s8-acc .s8-cx u{position:relative;color:var(--s8-red);font:700 14.5px var(--s8-body);text-underline-offset:4px;padding:4px 8px;border-radius:10px;animation:s8pulse 1.8s ease-in-out infinite}
@keyframes s8pulse{0%,100%{box-shadow:0 0 0 0 rgba(201,165,106,0)}50%{box-shadow:0 0 0 5px rgba(201,165,106,.55)}}
#s8st .s8-note{margin-top:14px;font:500 16px/1.5 var(--s8-body);color:#36412b}
#s8st .s8-note b{color:var(--s8-deep)}
/* card 5: the box */
#s8st .s8-slide.s8-box{padding-top:calc(74px + env(safe-area-inset-top,0px))}
#s8st .s8-slide.s8-box h2{font-size:27px}
#s8st .s8-slide.s8-box .s8-boxcard{margin-top:16px}
#s8st .s8-slide.s8-box .s8-more{margin-top:auto}
@media(max-height:680px){#s8st .s8-slide.s8-box{padding-top:calc(68px + env(safe-area-inset-top,0px))}#s8st .s8-slide.s8-box h2{font-size:24px}#s8st .s8-boxcard .s8-jarsrow{max-width:220px}}
@media(min-width:700px){#s8st .s8-card{width:420px;height:min(760px,94vh);border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.5)}}

/* ---------- the four controls ---------- */
:is(#s8st,#s8bar) .s8-qa .s8-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
:is(#s8st,#s8bar) .s8-qa .s8-grid button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font:600 13px/1.25 var(--s8-body);color:var(--s8-deep);-webkit-tap-highlight-color:transparent}
:is(#s8st,#s8bar) .s8-qa .s8-grid button i{width:56px;height:56px;border-radius:18px;background:#fff;border:1px solid var(--s8-line);display:grid;place-items:center;color:var(--s8-green);box-shadow:0 4px 10px rgba(56,74,34,.08);transition:background .2s,color .2s,transform .15s}
:is(#s8st,#s8bar) .s8-qa .s8-grid button i svg{width:24px;height:24px}
:is(#s8st,#s8bar) .s8-qa .s8-grid button[aria-pressed=true] i{background:var(--s8-green);color:#fff;border-color:var(--s8-green);transform:translateY(-2px)}
:is(#s8st,#s8bar) .s8-qa .s8-grid button[data-qa=cancel][aria-pressed=true] i{background:var(--s8-red);border-color:var(--s8-red)}
:is(#s8st,#s8bar) .s8-qa .s8-say{margin-top:10px;background:#fff;border:1px solid var(--s8-line);border-radius:16px;padding:11px 13px;font:500 14.5px/1.5 var(--s8-body);color:#36412b;min-height:70px}
:is(#s8st,#s8bar) .s8-qa .s8-say b{color:var(--s8-deep)}
:is(#s8st,#s8bar) .s8-qa .s8-say.s8-hint{color:var(--s8-muted);display:flex;align-items:center;gap:8px}
:is(#s8st,#s8bar) .s8-qa.s8-big .s8-grid{grid-template-columns:1fr 1fr;gap:9px}
:is(#s8st,#s8bar) .s8-qa.s8-big .s8-grid button{flex-direction:row;justify-content:flex-start;gap:10px;background:#fff;border:1px solid var(--s8-line);border-radius:18px;padding:10px 10px;font-size:15px;text-align:right;box-shadow:0 4px 12px rgba(56,74,34,.06)}
:is(#s8st,#s8bar) .s8-qa.s8-big .s8-grid button i{width:42px;height:42px;border-radius:14px;box-shadow:none;background:var(--s8-sage);border:0}
:is(#s8st,#s8bar) .s8-qa.s8-big .s8-grid button[aria-pressed=true]{border-color:var(--s8-green);box-shadow:0 0 0 1.5px var(--s8-green) inset}
:is(#s8st,#s8bar) .s8-qa.s8-big .s8-grid button[aria-pressed=true] i{background:var(--s8-green);color:#fff}
:is(#s8st,#s8bar) .s8-qa.s8-big .s8-grid button[data-qa=cancel][aria-pressed=true]{border-color:var(--s8-red);box-shadow:0 0 0 1.5px var(--s8-red) inset}
:is(#s8st,#s8bar) .s8-qa.s8-big .s8-grid button[data-qa=cancel][aria-pressed=true] i{background:var(--s8-red)}

/* ---------- the ready box ---------- */
:is(#s8st,#s8bar) .s8-boxcard{position:relative;background:var(--s8-card);border:1px solid var(--s8-line);border-radius:22px;padding:12px 14px 14px;box-shadow:0 14px 34px rgba(56,74,34,.14);color:var(--s8-ink)}
:is(#s8st,#s8bar) .s8-boxcard .s8-jarsrow{display:flex;justify-content:center;align-items:flex-end;direction:ltr;margin:4px auto 0;max-width:270px}
:is(#s8st,#s8bar) .s8-boxcard .s8-jarsrow img{width:25%;margin:0 -2%;filter:drop-shadow(0 8px 8px rgba(56,74,34,.22))}
:is(#s8st,#s8bar) .s8-boxcard .s8-what{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:8px}
:is(#s8st,#s8bar) .s8-boxcard .s8-what h3{font:700 18px/1.25 var(--s8-body);color:var(--s8-deep);letter-spacing:0}
:is(#s8st,#s8bar) .s8-boxcard .s8-what small{display:block;font:500 12.5px/1.4 var(--s8-body);color:var(--s8-muted)}
:is(#s8st,#s8bar) .s8-boxcard .s8-price{text-align:left;flex:none}
:is(#s8st,#s8bar) .s8-boxcard .s8-price b{display:block;font:800 26px/1 var(--s8-body);color:var(--s8-deep);letter-spacing:-.5px}
:is(#s8st,#s8bar) .s8-boxcard .s8-price small{display:block;font:500 12px/1.4 var(--s8-body);color:var(--s8-muted)}
:is(#s8st,#s8bar) .s8-boxcard .s8-vs{display:flex;justify-content:space-between;gap:8px;margin-top:9px;padding:8px 12px;border-radius:13px;background:#eef4e6;font:600 13.5px/1.35 var(--s8-body);color:var(--s8-deep)}
:is(#s8st,#s8bar) .s8-boxcard .s8-vs b{color:var(--s8-ok);white-space:nowrap}
:is(#s8st,#s8bar) .s8-boxcard .s8-gift{display:flex;align-items:center;gap:8px;margin-top:8px;font:600 13.5px/1.35 var(--s8-body);color:var(--s8-deep)}
:is(#s8st,#s8bar) .s8-boxcard .s8-gift img{width:24px;height:31px;object-fit:contain}
:is(#s8st,#s8bar) .s8-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;border-radius:16px;border:0;padding:0 18px;font:700 17px/1 var(--s8-body);text-decoration:none;cursor:pointer}
:is(#s8st,#s8bar) .s8-btn.s8-main{background:var(--s8-green);color:#fff;box-shadow:0 8px 18px rgba(56,74,34,.25)}
:is(#s8st,#s8bar) .s8-btn.s8-main:active{transform:translateY(1px)}
:is(#s8st,#s8bar) .s8-btn.s8-soft{background:transparent;color:var(--s8-green);min-height:44px;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
:is(#s8st,#s8bar) .s8-btn svg{width:20px;height:20px}
:is(#s8st,#s8bar) .s8-boxcard .s8-btn.s8-main{margin-top:12px}
:is(#s8st,#s8bar) .s8-terms{font:500 12.5px/1.5 var(--s8-body);color:var(--s8-muted);text-align:center;margin-top:8px}
:is(#s8st,#s8bar) .s8-norisk{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 12px;margin-top:8px;font:600 13px/1.4 var(--s8-body);color:var(--s8-muted)}
:is(#s8st,#s8bar) .s8-norisk span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
:is(#s8st,#s8bar) .s8-norisk svg{width:15px;height:15px;color:var(--s8-ok);stroke-width:2.6}

/* reviews and the product's own photos (card 4) */
#s8st .s8-rate{font:600 1em/1 var(--s8-display)}
#s8st h2 .s8-rate{color:var(--s8-gold2)}
:is(#s8st,#s8bar) svg.s8-star{fill:#E8A33D;stroke:#E8A33D}
#s8st .s8-quotes{display:grid;gap:10px;margin-top:14px}
#s8st .s8-quotes figure{margin:0;background:#fff;border:1px solid var(--s8-line);border-radius:18px;padding:12px 14px}
#s8st .s8-quotes blockquote{margin:0;font:500 15.5px/1.5 var(--s8-body);color:#36412b}
#s8st .s8-quotes figcaption{margin-top:6px;font:600 13px var(--s8-body);color:var(--s8-muted)}
/* the photos follow the quotes and take the room that is left: one large photo and two small ones */
#s8st .s8-photos{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin-top:14px;flex:0 1 250px;min-height:130px}
#s8st .s8-photos.s8-mosaic{grid-auto-flow:row;grid-template-columns:2fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr))}
#s8st .s8-photos.s8-mosaic img:first-child{grid-row:span 2}
#s8st .s8-photos img{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:14px;box-shadow:0 8px 18px rgba(44,74,29,.14)}
/* shorter screens keep two quotes, very short ones one */
@media(max-height:760px){#s8st .s8-quotes figure:nth-child(n+3){display:none}}
@media(max-height:640px){#s8st .s8-quotes figure:nth-child(n+2){display:none}}
:is(#s8st,#s8bar) .s8-status{margin:8px 0 0;min-height:1.2em;text-align:center;font:600 13.5px/1.4 var(--s8-body);color:var(--s8-red)}
:is(#s8st,#s8bar) .s8-status:empty{display:none}
:is(#s8st,#s8bar) .s8-btn[aria-busy=true]{opacity:.7}
html.s8-lock{overflow:hidden}

/* ---------- last, so these win over the rules above ---------- */
/* a card that is taller than the screen allows scrolls instead of cutting its end off */
#s8st .s8-slide{overflow-y:auto;overscroll-behavior:contain}

/* ---------- sheet: the stories over the lower part of the shop (?stories=sheet) ---------- */
#s8st.s8-sheet{place-items:end center;background:rgba(14,19,9,.55)}
#s8st.s8-sheet .s8-card{height:max(62vh,510px);height:max(62dvh,510px);max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);border-radius:24px 24px 0 0;
  transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 -14px 40px rgba(0,0,0,.35)}
#s8st.s8-sheet.s8-on .s8-card{transform:none}
#s8st.s8-sheet.s8-tall .s8-card{height:min(92vh,720px);height:min(92dvh,720px)}
#s8st.s8-sheet .s8-grab{position:absolute;z-index:7;top:7px;left:50%;width:42px;height:5px;margin-left:-21px;border-radius:3px;background:rgba(255,255,255,.5)}
#s8st.s8-sheet.s8-light .s8-grab{background:rgba(44,74,29,.22)}
#s8st.s8-sheet .s8-bars{top:18px}
#s8st.s8-sheet .s8-head{top:26px}
#s8st.s8-sheet .s8-slide,#s8st.s8-sheet .s8-slide.s8-box{padding:76px 20px calc(16px + env(safe-area-inset-bottom,0px))}
#s8st.s8-sheet :is(.s8-grab,.s8-head,.s8-bars){touch-action:none}
@media(min-width:700px){#s8st.s8-sheet .s8-card{width:440px;height:min(600px,86vh);border-radius:26px 26px 0 0}#s8st.s8-sheet.s8-tall .s8-card{height:min(720px,90vh)}}
/* shorter cards (mostly the sheet) tighten the type and keep one quote */
#s8st .s8-card{container-type:size}
@container (max-height:640px){
  #s8st h2{font-size:26px}
  #s8st .s8-slide.s8-box h2{font-size:23px}
  #s8st .s8-lead{font-size:15.5px;margin-top:6px}
  #s8st .s8-stats{margin-top:12px}
  #s8st .s8-stats span{font-size:14px;padding:7px 10px}
  #s8st .s8-quotes figure:nth-child(n+2){display:none}
  #s8st .s8-qa,#s8st .s8-acc{margin-top:12px}
  #s8st .s8-note{font-size:15px;margin-top:10px}
  #s8st .s8-boxcard .s8-jarsrow{max-width:150px}
  #s8st .s8-boxcard .s8-btn.s8-main{min-height:50px}
  #s8st .s8-slide.s8-box .s8-boxcard{margin-top:12px}
}
/* small phones: the box card drops its jar picture (the names stay) */
@container (max-height:600px){#s8st .s8-boxcard .s8-jarsrow{display:none}#s8st .s8-boxcard .s8-what{margin-top:0}}
/* the card's place, for screen readers only */
#s8st .s8-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* reduced motion: no sliding or rising, the cards wait for a tap (shop-stories.js) */
@media (prefers-reduced-motion:reduce){
  #s8st,#s8st .s8-card,#s8st .s8-slide,#s8st .s8-slide.s8-on{transition:none}
  #s8st .s8-slide.s8-on .s8-jars img{animation:none;opacity:1;transform:none}
}
/* video mode: the owner's short video in place of the four explaining cards (shop-stories.js) */
#s8st .s8-slide.s8-vcard{padding:0;background:#141a0e;color:#fff}
#s8st .s8-vcard .s8-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#141a0e}
#s8st .s8-vcard video::cue{font:500 17px/1.4 var(--s8-body);color:#fff;background:rgba(0,0,0,.62)}
#s8st .s8-vcard .s8-vtitle{position:absolute;right:20px;left:150px;top:calc(76px + env(safe-area-inset-top,0px));color:#fff;font-size:21px;text-shadow:0 2px 10px rgba(0,0,0,.55)}
#s8st .s8-vcard .s8-sound{position:absolute;left:16px;top:calc(72px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:8px;padding:10px 16px;border:0;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:600 15px var(--s8-body);cursor:pointer}
#s8st .s8-vcard .s8-sound[aria-pressed="true"]{background:rgba(44,74,29,.85)}
#s8st .s8-vcard .s8-vplay{position:absolute;inset:0;margin:auto;width:84px;height:84px;border:0;border-radius:50%;background:rgba(255,253,247,.94);color:#2c4a1d;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35)}
#s8st .s8-vcard .s8-vplay svg{width:34px;height:34px;margin-left:4px}
#s8st .s8-vcard .s8-vplay[hidden]{display:none}

/* ---------- r120: the calm cards (option bz_shop_stories_cards; the owner's pick of three, 24 Oct) ----------
   One idea per card and few words: a photo, the big box's savings with its first-order gifts, no commitment, one review,
   then one calm box card with one button and its renewal terms beside it. The sheet keeps one height. Prototype and the
   other two options: evidence/stories-r120/. */
#s8st.s8-r120 .s8-slide.s8-on .s8-up{animation:s8up .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes s8up{from{opacity:0;transform:translateY(14px)}}
#s8st.s8-r120 .s8-slide.s8-on .s8-d1{animation-delay:.12s}#s8st.s8-r120 .s8-slide.s8-on .s8-d2{animation-delay:.42s}#s8st.s8-r120 .s8-slide.s8-on .s8-d3{animation-delay:.72s}
#s8st.s8-r120 .s8-slide.s8-on .s8-d4{animation-delay:1.02s}#s8st.s8-r120 .s8-slide.s8-on .s8-d5{animation-delay:1.32s}#s8st.s8-r120 .s8-slide.s8-on .s8-d6{animation-delay:1.62s}
#s8st.s8-r120 .s8-goldt{color:var(--s8-goldl)}
#s8st.s8-r120 .s8-slide.s8-c .s8-goldt,#s8st.s8-r120 .s8-slide.s8-s .s8-goldt{color:var(--s8-gold2)}
#s8st.s8-r120 .s8-sub{margin-top:10px;font:500 15.5px/1.45 var(--s8-body)}
/* 1. the photo */
#s8st.s8-r120 .s8-slide.s8-a1{padding:0;background:var(--s8-dark);color:#fff}
#s8st.s8-r120 .s8-a1 .s8-ph{position:absolute;top:0;left:0;right:0;height:79%;overflow:hidden;background:#2a3a1c}
#s8st.s8-r120 .s8-a1 .s8-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
#s8st.s8-r120 .s8-a1.s8-on .s8-ph img{animation:s8kb 5s ease-out both}
@keyframes s8kb{from{transform:scale(1.13)}}
#s8st.s8-r120 .s8-a1 .s8-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,28,12,.62) 0,rgba(20,28,12,0) 20%,rgba(20,28,12,0) 44%,rgba(31,44,21,.9) 70%,var(--s8-dark) 79%)}
#s8st.s8-r120 .s8-a1 .s8-low{position:absolute;right:20px;left:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px))}
#s8st.s8-r120 .s8-a1 h2{margin:0;font-size:37px;line-height:1.08;color:#fff}
#s8st.s8-r120 .s8-a1 h2 span{display:block}
#s8st.s8-r120 .s8-a1 .s8-sub{font-size:15px;color:rgba(255,255,255,.88)}
/* 2. the big box's savings and its gifts */
#s8st.s8-r120 .s8-a2 h2{margin-top:2px;font-size:28px}
#s8st.s8-r120 .s8-num{margin-top:6px;font:600 64px/1 var(--s8-display);color:var(--s8-goldl);letter-spacing:-1px}
#s8st.s8-r120 .s8-num small{margin-left:3px;font-size:36px}
#s8st.s8-r120 .s8-a2 .s8-sub{margin-top:8px;color:rgba(255,255,255,.92)}
#s8st.s8-r120 .s8-a2 .s8-sub b{color:#fff}
#s8st.s8-r120 .s8-a2 .s8-sub s{text-decoration-color:rgba(255,255,255,.6)}
/* the gifts, one row each: the pistachio jar, then the book and the spoon; a gold "מתנה" and no sentence (owner, 24 Oct) */
#s8st.s8-r120 .s8-gifts{margin-top:12px}
#s8st.s8-r120 .s8-gifts ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#s8st.s8-r120 .s8-gifts li{display:flex;align-items:center;gap:10px;min-height:46px;padding:5px 10px 5px 8px;border-radius:14px;background:rgba(255,255,255,.12)}
#s8st.s8-r120 .s8-gifts li img{flex:none;width:52px;height:34px;object-fit:contain}
#s8st.s8-r120 .s8-gifts li img.s8-gjar{width:52px;height:38px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
#s8st.s8-r120 .s8-gifts li svg{width:22px;height:22px;color:var(--s8-goldl)}
#s8st.s8-r120 .s8-gifts li b{flex:1;min-width:0;font:600 15px/1.3 var(--s8-body);color:#fff}
#s8st.s8-r120 .s8-gifts li em{flex:none;padding:2px 10px;border-radius:999px;background:var(--s8-gold);color:#22301a;font:700 12px/1.5 var(--s8-body);font-style:normal}
#s8st.s8-r120 .s8-gifts small{display:block;margin-top:6px;font:500 12px/1.4 var(--s8-body);color:rgba(255,255,255,.72)}
#s8st.s8-r120 .s8-a2 .s8-jars{height:96px;padding-bottom:0}
#s8st.s8-r120 .s8-a2 .s8-jars img{width:auto;height:80px;margin:0 -9px}
#s8st.s8-r120 .s8-a2 .s8-jars img:nth-child(3),#s8st.s8-r120 .s8-a2 .s8-jars img:nth-child(4){height:94px;position:relative;z-index:1}
#s8st.s8-r120 .s8-slide.s8-on .s8-jars img:nth-child(5){animation-delay:.32s}#s8st.s8-r120 .s8-slide.s8-on .s8-jars img:nth-child(6){animation-delay:.4s}
/* 3. no commitment */
#s8st.s8-r120 .s8-a3 h2{font-size:29px}
#s8st.s8-r120 .s8-a3 h2 span{display:inline-block}
#s8st.s8-r120 .s8-rows{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
#s8st.s8-r120 .s8-rows li{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 12px;border-radius:18px;background:#fff;box-shadow:0 6px 16px rgba(56,74,34,.08)}
#s8st.s8-r120 .s8-slide.s8-on .s8-rows li{animation:s8inx .5s cubic-bezier(.2,.8,.2,1) both}
#s8st.s8-r120 .s8-slide.s8-on .s8-rows li:nth-child(1){animation-delay:.35s}#s8st.s8-r120 .s8-slide.s8-on .s8-rows li:nth-child(2){animation-delay:.65s}#s8st.s8-r120 .s8-slide.s8-on .s8-rows li:nth-child(3){animation-delay:.95s}
@keyframes s8inx{from{opacity:0;transform:translateX(30px)}}
#s8st.s8-r120 .s8-rows i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--s8-sage);color:var(--s8-green)}
#s8st.s8-r120 .s8-rows i svg{width:21px;height:21px}
#s8st.s8-r120 .s8-rows b{font:700 17px/1.25 var(--s8-body);color:var(--s8-deep)}
#s8st.s8-r120 .s8-rows small{display:block;font:500 13px/1.3 var(--s8-body);color:var(--s8-muted)}
#s8st.s8-r120 .s8-rows .s8-cxr i{background:#f3e3dc;color:var(--s8-red)}
#s8st.s8-r120 .s8-a3 .s8-note{margin-top:16px;font-size:15px}
/* card 3's demo (shop-stories.js demo()): the hand, its press ring, the jars that change, the confirm and the cancelled
   row. Everything it brings is hidden until it runs, and stays hidden under reduced motion; nothing moves the layout. */
#s8st.s8-r120 .s8-rows :is(.s8-swr,.s8-cxr){position:relative}
#s8st.s8-r120 .s8-mini{position:absolute;left:10px;bottom:6px;display:flex;align-items:flex-end;direction:ltr}
#s8st.s8-r120 .s8-mini>span{position:relative;display:grid;width:32px;margin:0 -1px;opacity:0}
#s8st.s8-r120 .s8-mini img{grid-area:1/1;width:32px;height:40px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(56,74,34,.2))}
#s8st.s8-r120 .s8-mini .s8-min,#s8st.s8-r120 .s8-mok{opacity:0}
#s8st.s8-r120 .s8-mok{position:absolute;top:-5px;right:-6px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--s8-ok);color:#fff;box-shadow:0 0 0 2px #fff}
#s8st.s8-r120 .s8-mok svg{width:11px;height:11px;stroke-width:3}
#s8st.s8-r120 .s8-cxr i svg{grid-area:1/1}
#s8st.s8-r120 .s8-cxr i svg+svg{opacity:0;stroke-width:2.6}
#s8st.s8-r120 .s8-cxs{display:grid}
#s8st.s8-r120 .s8-cxs>span{grid-area:1/1}
#s8st.s8-r120 .s8-cxd{opacity:0}
#s8st.s8-r120 .s8-yes{position:absolute;left:12px;top:50%;margin-top:-17px;padding:0 14px;border-radius:999px;background:var(--s8-red);color:#fff;font:700 14px/34px var(--s8-body);white-space:nowrap;opacity:0}
@media(max-width:340px){
  #s8st.s8-r120 .s8-mini>span{width:28px}#s8st.s8-r120 .s8-mini img{width:28px;height:35px}
  #s8st.s8-r120 .s8-yes{padding:0 10px;font-size:13px}
}
#s8st.s8-r120 .s8-demo{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
#s8st.s8-r120 .s8-hand{position:absolute;top:0;left:0;width:50px;height:50px;opacity:0;transform-origin:21px 6px;filter:drop-shadow(0 5px 7px rgba(31,44,21,.32))}
#s8st.s8-r120 .s8-hand svg{display:block;width:50px;height:50px;fill:#fff;stroke:var(--s8-deep);stroke-width:1.2;stroke-linejoin:round}
#s8st.s8-r120 .s8-tapr{position:absolute;top:0;left:0;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(44,74,29,.24);opacity:0}
/* 4. one review, and the jar it is about */
#s8st.s8-r120 .s8-rateh{display:flex;align-items:center;gap:12px;margin-top:4px;font:500 16px/1.2 var(--s8-body);letter-spacing:0}
#s8st.s8-r120 .s8-rateh .s8-rate{font:600 64px/1 var(--s8-display);color:var(--s8-deep);letter-spacing:-1px}
#s8st.s8-r120 .s8-stars{display:flex;gap:3px}
#s8st.s8-r120 .s8-stars svg{width:24px;height:24px;fill:#E8A33D;stroke:none}
#s8st.s8-r120 .s8-slide.s8-on .s8-stars svg{animation:s8pop .35s cubic-bezier(.3,1.5,.5,1) both}
#s8st.s8-r120 .s8-slide.s8-on .s8-stars svg:nth-child(1){animation-delay:.3s}#s8st.s8-r120 .s8-slide.s8-on .s8-stars svg:nth-child(2){animation-delay:.4s}#s8st.s8-r120 .s8-slide.s8-on .s8-stars svg:nth-child(3){animation-delay:.5s}
#s8st.s8-r120 .s8-slide.s8-on .s8-stars svg:nth-child(4){animation-delay:.6s}#s8st.s8-r120 .s8-slide.s8-on .s8-stars svg:nth-child(5){animation-delay:.7s}
@keyframes s8pop{from{opacity:0;transform:scale(.3)}}
#s8st.s8-r120 .s8-rateh small{display:block;margin-top:4px;font:500 14.5px/1.35 var(--s8-body);color:var(--s8-muted)}
#s8st.s8-r120 .s8-a4 figure{position:relative;z-index:1;margin:18px 0 0;padding:16px 16px 14px;border-radius:20px;background:#fff;box-shadow:0 10px 24px rgba(56,74,34,.1)}
#s8st.s8-r120 .s8-a4 figure:before{content:"”";position:absolute;top:-18px;right:14px;font:600 64px/1 var(--s8-display);color:var(--s8-gold)}
#s8st.s8-r120 .s8-a4 blockquote{margin:0;font:500 18px/1.5 var(--s8-body);color:#2f3a24}
#s8st.s8-r120 .s8-a4 figcaption{margin-top:10px;font:600 14px/1.3 var(--s8-body);color:var(--s8-muted)}
#s8st.s8-r120 .s8-pjw{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#s8st.s8-r120 .s8-pjar{position:absolute;left:-14px;bottom:-34px;width:auto;height:190px;transform:rotate(-9deg);filter:drop-shadow(0 12px 14px rgba(56,74,34,.22))}
#s8st.s8-r120 .s8-slide.s8-on .s8-pjar{animation:s8pj .7s cubic-bezier(.2,.8,.2,1) .9s both}
@keyframes s8pj{from{opacity:0;transform:translateY(60px) rotate(-9deg)}}
/* 5. the box: jars, what it is, the price and what it replaces, the gift, one button, the terms */
#s8st.s8-r120 h2.s8-tag{margin:0;font:700 12.5px/1.3 var(--s8-body);letter-spacing:0}
#s8st.s8-r120 .s8-offer{position:relative;margin-top:12px;padding:12px 16px;border:1px solid var(--s8-line);border-radius:22px;background:#fff;box-shadow:0 12px 30px rgba(56,74,34,.12);text-align:center}
#s8st.s8-r120 .s8-ojars{display:flex;justify-content:center;align-items:flex-end;height:92px;direction:ltr}
#s8st.s8-r120 .s8-ojars img{width:auto;height:92px;margin:0 -7px;filter:drop-shadow(0 8px 8px rgba(56,74,34,.2))}
#s8st.s8-r120 .s8-offer h3{margin:10px 0 0;font:700 19px/1.25 var(--s8-body);color:var(--s8-deep);letter-spacing:0}
#s8st.s8-r120 .s8-pr{display:flex;justify-content:center;align-items:baseline;gap:10px;margin-top:6px}
#s8st.s8-r120 .s8-pr b{font:800 30px/1 var(--s8-body);color:var(--s8-deep);letter-spacing:-.5px}
#s8st.s8-r120 .s8-pr span{font:500 14px/1.3 var(--s8-body);color:var(--s8-muted)}
#s8st.s8-r120 .s8-swap{margin-top:5px;font:500 12.5px/1.4 var(--s8-body);color:var(--s8-muted)}
#s8st.s8-r120 .s8-giftl{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--s8-line);font:600 13.5px/1.35 var(--s8-body);color:var(--s8-deep);text-align:right}
#s8st.s8-r120 .s8-giftl img{flex:none;width:20px;height:26px;object-fit:contain}
#s8st.s8-r120 .s8-a5 .s8-btn.s8-main{margin-top:14px;min-height:52px}
@media (prefers-reduced-motion:reduce){
  #s8st.s8-r120 .s8-slide.s8-on :is(.s8-up,.s8-rows li,.s8-stars svg,.s8-pjar),#s8st.s8-r120 .s8-a1.s8-on .s8-ph img{animation:none}
}