/* פאר הנחל shop theme: draft B "כחול מלכותי" (apps/mor-nes/drafts/b/assets/site.css, Mor's pick 3.11), ported to the shop core.
   Everything down to "THE CORE'S PIECES" is the draft's own CSS, with the draft-only parts changed: no style switch bar
   (--sw 0), the cart badge counts with the core's --cart-n, and the buy box is the core's. Draft B: the light, airy skeleton of the shop Mor liked (rikmat.com: white ground, a warm sand
   band, centred wordmark, full-screen product slideshow, 2-up tiles, a popular row with small gold badges, trust icons),
   with the royal navy and glowing gold of HIS logo as the accent: the announcement bar, the opening's first beat, the
   "האש שלי" band and the footer are navy; the name is gold. Products stand on the ivory of their own photos.
   Motion is livelier than theirs (the owner's taste); transform and opacity only, except one gloss sweep on the real
   gold name (a short background-position run). */
:root{
  --navy:#0c1830; --deep:#070f22; --navy-2:#16294d;
  --gold-1:#f0cf7a; --gold-2:#c9952f; --gold-3:#a8761f;
  --gold-text:#e8c56f;                       /* small gold text on navy */
  --gold-ink:#7a5713;                        /* small gold text on light grounds */
  --gold-grad:linear-gradient(172deg, #f6dc8f 0%, var(--gold-1) 22%, var(--gold-2) 62%, var(--gold-3) 100%);       /* on navy */
  --gold-deep:linear-gradient(172deg, #b8892c 0%, #9b711f 48%, #6e4e11 100%);                                       /* on light */
  --paper:#fffdfa; --ivory:#f8efe5; --sand:#d8cfc5; --cream:#f6f0e4;
  --ink:#1b2233; --soft:#4d5366; --line:#e8dfd2;
  --display:"Frank Ruhl Libre", "Times New Roman", serif;
  --body:"Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.76,0,.24,1); --e-in:cubic-bezier(.55,.085,.68,.53);
  --ann:34px; --hh:62px; --sw:0px;
  --r-lg:22px; --r-md:16px;
  --dr-bg:var(--paper); --dr-scrim:rgba(7,15,34,.5);
  --fly-toast-bg:var(--navy); --fly-toast-fg:#fbf3e2; --fly-toast-bottom:calc(var(--sw) + 14px);
  --tz-scale:2.2;
}
@media (min-width:900px){ :root{ --hh:78px; --sw:0px; --fly-toast-bottom:24px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; counter-reset:cartn var(--cart-n, 0)}
/* anchors land below the sticky header (scroll-margin on the targets, not scroll-padding on html: that made the
   browser scroll the page when the sticky header's own menu button took focus) */
[id]{scroll-margin-top:calc(var(--hh) + 12px)}
body{margin:0; background:var(--paper); color:var(--ink); font:400 1.03rem/1.7 var(--body); overflow-x:clip}
img{max-width:100%; display:block}
a{color:inherit}
button,input{font:inherit; color:inherit}
h1,h2,h3,p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--gold-2); outline-offset:3px; border-radius:6px}
[hidden]{display:none!important}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:fixed; top:8px; right:8px; z-index:100; background:var(--paper); color:var(--ink); padding:10px 14px; border-radius:10px; transform:translateY(-200%)}
.skip:focus{transform:none}
.wrap{width:min(1240px, 100% - 32px); margin-inline:auto}
.tag{display:inline-block; font:500 .76rem/1.3 var(--body); color:var(--gold-ink); background:#f3e6c9; border-radius:99px; padding:2px 9px; vertical-align:.1em}
.on-navy .tag{color:var(--deep); background:var(--gold-1)}
.gold{background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}
.gold-deep{background:var(--gold-deep); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}

/* the sparkle (our own four-point star) */
@keyframes twinkle{0%,100%{transform:scale(.55) rotate(0deg); opacity:.45} 50%{transform:scale(1) rotate(45deg); opacity:1}}
@keyframes spark{0%,100%{transform:scale(0) rotate(0deg); opacity:0} 22%{transform:scale(1.1) rotate(40deg); opacity:1} 40%{transform:scale(.8) rotate(80deg); opacity:.9} 60%{transform:scale(0) rotate(120deg); opacity:0}}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 30px; border-radius:99px;
  font:500 1rem/1.15 var(--body); text-decoration:none; border:0; cursor:pointer; text-align:center; max-width:100%;
  transition:transform .45s var(--e-out), box-shadow .45s var(--e-out), background-color .3s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:20px; height:20px; flex:none}
.btn--navy{background:var(--navy); color:#fbf3e2; box-shadow:0 12px 26px -16px rgba(12,24,48,.8)}
.btn--navy:hover{background:var(--navy-2)}
.btn--gold{background:var(--gold-grad); color:var(--deep); box-shadow:0 10px 30px -12px rgba(232,186,90,.55), inset 0 1px 0 rgba(255,245,214,.7)}
.btn--ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px #bfb3a0}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn--block{width:100%; border-radius:12px; min-height:54px; font-size:1.08rem}
.ulink{position:relative; display:inline-block; padding:6px 0; text-decoration:none; font-weight:500; color:var(--ink)}
.ulink::after{content:""; position:absolute; inset:auto 0 2px; height:1.5px; background:currentColor; transform-origin:100% 50%; transition:transform .6s var(--e-out)}
.ulink:hover::after{transform:scaleX(.35)}

/* ---------- announcement bar + header (wordmark centred, menu on one side, search and cart on the other) ---------- */
.ann{position:relative; z-index:41; height:var(--ann); background:var(--navy); color:#efe3c8; display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:.86rem; padding-inline:12px; white-space:nowrap; overflow:hidden}
.ann svg{width:11px; height:11px; color:var(--gold-1); flex:none; animation:twinkle 3.6s ease-in-out infinite}
.ann .tag{font-size:.74rem}
.head{position:sticky; top:0; z-index:40; height:var(--hh); color:var(--ink)}
.head::before{content:""; position:absolute; inset:0; background:rgba(255,253,250,.97); box-shadow:0 1px 0 var(--line), 0 10px 30px -24px rgba(12,24,48,.5);
  opacity:1; transition:opacity .5s var(--e-out)}
.head.is-top::before{opacity:0}
.head__in{position:relative; height:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:min(1320px, 100% - 16px); margin-inline:auto}
.head__side{display:flex; align-items:center; gap:2px}
.head__side--end{justify-content:flex-end}
.head__mark{display:flex; align-items:center; gap:8px; text-decoration:none; font:900 min(clamp(1.55rem, 6.4vw, 2.05rem), 7.2vw)/1 var(--display); white-space:nowrap; padding:6px 4px; justify-self:center}
.head__mark svg{width:13px; height:13px; color:var(--gold-2); flex:none; animation:twinkle 4.2s ease-in-out infinite}
.head__mark span{padding-bottom:.1em}
.icon-btn{position:relative; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:0; background:transparent; cursor:pointer; color:var(--ink); text-decoration:none; flex:none;
  transition:background-color .3s}
.icon-btn:hover{background:rgba(12,24,48,.06)}
.icon-btn svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round}
.badge{position:absolute; top:3px; left:1px; min-width:20px; height:20px; padding:0 5px; border-radius:99px; background:var(--navy); color:var(--gold-1);
  font:600 .74rem/20px var(--body); text-align:center}
.badge::before{content:counter(cartn)}
html[data-cart="0"] .badge, html:not([data-cart]) .badge{display:none}
.badge.is-bump{animation:badge-bump .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes badge-bump{40%{transform:scale(1.35)}}
.head__menu span{position:absolute; width:22px; height:1.5px; background:currentColor; border-radius:2px; transition:transform .45s var(--e-out), opacity .2s}
.head__menu span:nth-child(1){transform:translateY(-7px)}
.head__menu span:nth-child(3){transform:translateY(7px)}
.head__menu[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.head__menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.head__menu[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}
/* the menu: a calm drop under the header */
.nav{position:absolute; top:100%; inset-inline:0; background:var(--paper); box-shadow:0 1px 0 var(--line), 0 30px 40px -30px rgba(12,24,48,.45); padding:8px 0 26px;
  visibility:hidden; opacity:0; transform:translate3d(0,-12px,0); transition:opacity .3s, transform .5s var(--e-out), visibility 0s .5s}
.nav.is-open{visibility:visible; opacity:1; transform:none; transition:opacity .3s, transform .5s var(--e-out)}
.nav ul{width:min(760px, 100% - 32px); margin-inline:auto; display:grid}
@media (min-width:900px){ .nav ul{grid-template-columns:repeat(4, 1fr); gap:12px} }
.nav li{opacity:0; transform:translate3d(0,12px,0); transition:opacity .4s, transform .55s var(--e-out)}
.nav.is-open li{opacity:1; transform:none}
.nav.is-open li:nth-child(2){transition-delay:.05s} .nav.is-open li:nth-child(3){transition-delay:.1s} .nav.is-open li:nth-child(4){transition-delay:.15s}
.nav a{display:block; padding:14px 6px; text-decoration:none; font:400 1.3rem/1.3 var(--body); border-bottom:1px solid var(--line)}
.nav a:hover{color:var(--gold-ink)}

/* =====================================================================================================================
   THE OPENING. Beat 1 (navy, ~1.2s): his emblem in a gold ring, sparkles twinkling on the arc above it, as in his logo.
   Then the navy lifts away with a gold edge into a full-screen slideshow of his products on their own ivory (crossfade +
   a slow ambient zoom), a small line, the big gold name rising word by word, and two thin underlined links.
   The first beats are CSS keyframes; the cover comes first in the HTML.
   ===================================================================================================================== */
.cover{position:fixed; inset:0; z-index:90; pointer-events:none; display:grid; place-items:center;
  background:radial-gradient(120% 70% at 50% 44%, #15305c 0%, var(--navy) 55%, var(--deep) 100%);
  animation:cover-lift .75s var(--e-io) .82s both}
.cover::after{content:""; position:absolute; inset:auto 0 0; height:2px; background:linear-gradient(90deg, transparent, var(--gold-1) 30%, #fff3cf 50%, var(--gold-1) 70%, transparent)}
.cover.is-gone{display:none}
@keyframes cover-lift{to{transform:translate3d(0,-101%,0)}}
.cover__seal{position:relative; width:min(62vw, 42svh, 380px); aspect-ratio:1; animation:seal-out .4s var(--e-in) .74s both}
@keyframes seal-out{to{transform:translate3d(0,-28px,0) scale(.93); opacity:0}}
.cover__emb{position:absolute; inset:0; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1.5px var(--gold-1), 0 0 0 7px rgba(240,207,122,.08), 0 30px 80px -20px rgba(0,0,0,.7);
  animation:emb-in .7s var(--e-out) .02s both}
.cover__emb img{width:100%; height:100%; object-fit:cover; animation:emb-img 1.4s var(--e-out) .04s both}
@keyframes emb-in{from{opacity:0; transform:scale(.84)}}
@keyframes emb-img{from{transform:scale(1.14)}}
.cover__ring{position:absolute; inset:-14px; border-radius:50%; border:1px dashed rgba(240,207,122,.5); animation:ring-in 1.3s var(--e-out) .15s both}
@keyframes ring-in{from{opacity:0; transform:scale(.9) rotate(-40deg)}}
.cover__sparks{position:absolute; inset:0}
.cover__sparks svg{position:absolute; left:var(--x); top:var(--y); width:var(--s,16px); height:var(--s,16px); margin:calc(var(--s,16px) / -2); color:var(--gold-1);
  animation:spark .8s ease-in-out both; animation-delay:var(--d)}

.op{position:relative; isolation:isolate; overflow:clip; margin-top:calc(-1 * var(--hh)); background:var(--ivory);
  /* a minimum, not a fixed height: with big text the words get their room and nothing is clipped */
  min-height:min(1100px, max(560px, calc(100svh - var(--ann) - var(--sw))));
  display:grid; grid-template-rows:minmax(300px,1fr) auto}
.op__stage{position:relative; min-height:0; margin-top:calc(var(--hh) - 6px); animation:ambient 22s ease-in-out 2s infinite alternate}
@keyframes ambient{to{transform:scale(1.06)}}
.op__slide{position:absolute; inset:0; display:flex; justify-content:center; align-items:flex-end; gap:0}
.op__slide:nth-child(n+2){opacity:0; animation:slide-cycle 18s linear infinite}
.op__slide:nth-child(2){animation-delay:6.5s}
.op__slide:nth-child(3){animation-delay:12.5s}
@keyframes slide-cycle{0%{opacity:0} 6%{opacity:1} 33.3%{opacity:1} 39.3%{opacity:0} 100%{opacity:0}}
.op__ph{position:relative; height:min(100%, 150vw); aspect-ratio:2/3; flex:none; margin:0}
.op__ph img{width:100%; height:100%; object-fit:cover;
  /* all four edges melt into the ivory (the photos' grounds differ a shade) */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite:intersect}
.op__slide:first-child .op__ph img{animation:settle 1.8s var(--e-out) .85s both}
.op__slide:first-child .op__ph:nth-child(1) img{animation-delay:.95s}
.op__slide:first-child .op__ph:nth-child(3) img{animation-delay:1.05s}
@keyframes settle{from{transform:scale(1.12)}}
@media (max-width:759px){ .op__ph:not(:nth-child(2)){display:none} }
@media (min-width:760px){ .op__ph{height:min(100%, 48vw)} .op__ph + .op__ph{margin-inline-start:-2.5vw} }

.op__copy{position:relative; z-index:2; text-align:center; padding:0 16px clamp(16px, 3.2svh, 34px); margin-top:-26px}
.op__line{font:400 clamp(.9rem, 3.7vw, 1.05rem)/1.4 var(--body); word-spacing:.18em; color:var(--soft); animation:fade-up .9s var(--e-out) 1.2s both}
.op__line i{font-style:normal; color:var(--gold-2); margin-inline:.35em}
/* capped by the width too, so 200% text at 320 wide still fits both words */
.op__name{font:900 min(clamp(3.4rem, 17vw, 7.2rem), 19vw)/1 var(--display); margin-top:2px; display:flex; flex-wrap:wrap; justify-content:center; gap:0 .24em}
.op__name .w{display:block; overflow:clip; padding:.06em .04em .16em; margin-block:-.06em -.16em}
.op__name .w > span{display:block; background-image:linear-gradient(100deg, transparent 38%, rgba(255,251,236,.95) 50%, transparent 62%), var(--gold-deep);
  background-size:280% 100%, 100% 100%; background-repeat:no-repeat; background-position:130% 0, 0 0;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  animation:word-rise 1.1s var(--e-out) 1.3s both, gloss 1.4s cubic-bezier(.45,0,.25,1) 2.4s both}
.op__name .w:nth-child(2) > span{animation-delay:1.4s, 2.65s}
@keyframes word-rise{from{transform:translate3d(0,110%,0)}}
@keyframes gloss{from{background-position:130% 0, 0 0} to{background-position:-30% 0, 0 0}}
.op__links{display:flex; justify-content:center; flex-wrap:wrap; gap:6px 26px; margin-top:clamp(8px, 1.8svh, 18px); animation:fade-up .9s var(--e-out) 1.65s both}
.op__links .ulink{font-size:1.08rem}
.op__links .ulink:first-child{font-weight:600}
.op__glints{position:absolute; inset:-30% 0 0; pointer-events:none}
.op__glints svg{position:absolute; width:var(--s,14px); height:var(--s,14px); color:var(--gold-2); opacity:0; animation:spark 3.8s ease-in-out infinite; animation-delay:var(--d)}
@keyframes fade-up{from{transform:translate3d(0,16px,0); opacity:0}}

/* =====================================================================================================================
   LIGHT SECTIONS
   ===================================================================================================================== */
.sec,.band{overflow-x:clip}
.sec{padding:clamp(56px, 8.5vw, 108px) 0}
.sec--tight{padding-top:0}
.sec__head{text-align:center; margin-bottom:clamp(24px, 3.6vw, 40px)}
.arc{display:block; width:96px; height:24px; margin:0 auto 8px; color:var(--gold-2)}
.on-navy .arc{color:var(--gold-1)}
.h2{font:400 clamp(1.7rem, 6vw, 2.5rem)/1.25 var(--body); color:var(--ink)}
.sec__lead{color:var(--soft); margin:8px auto 0; max-width:36em; font-weight:300; font-size:1.06rem}

/* categories: tall photo tiles, the label under; each reveals with a sliding frame while the photo settles */
.cats{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
@media (min-width:900px){ .cats{grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px} }
.cat{display:block; text-decoration:none; text-align:center}
.cat__ph{position:relative; display:block; aspect-ratio:3/4; border-radius:var(--r-md); overflow:hidden; background:var(--ivory)}
.cat__ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--e-out)}
.cat__ph::after{content:""; position:absolute; inset:0; background:var(--sand); transform-origin:50% 0}
.cat__name{display:block; font:400 1.02rem/1.35 var(--body); margin-top:9px}
.cat__name b{font-weight:500}
.cat__name small{display:block; color:var(--soft); font-size:.82rem; font-weight:300}
@media (hover:hover){ .cat:hover .cat__ph img{transform:scale(1.05)} }
.js .cats .cat__ph::after{transition:transform 1s var(--e-io); transition-delay:calc(var(--i, 0) * 90ms)}
.js .cats .cat__ph img{transform:scale(1.12); transition:transform 1.5s var(--e-out); transition-delay:calc(.25s + var(--i, 0) * 90ms)}
.js .cats.is-in .cat__ph::after{transform:translate3d(0,-101%,0)}
.js .cats.is-in .cat__ph img{transform:scale(1)}
.js .cats .cat__name{opacity:0; transform:translate3d(0,10px,0); transition:opacity .7s, transform .8s var(--e-out); transition-delay:calc(.45s + var(--i, 0) * 90ms)}
.js .cats.is-in .cat__name{opacity:1; transform:none}
@media (hover:hover){ .js .cats.is-in .cat:hover .cat__ph img{transform:scale(1.05); transition-delay:0s} }

/* the sand band */
.band{background:var(--sand); padding:clamp(56px, 8vw, 100px) 0}
.band__in{display:grid; gap:clamp(28px, 4vw, 56px); align-items:center}
@media (min-width:900px){ .band__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.band__txt{text-align:center; max-width:30em; margin-inline:auto}
.band__t{font:400 clamp(2rem, 7vw, 3rem)/1.2 var(--body)}
.band__txt p{margin-top:14px; font-size:1.1rem; line-height:1.85; color:#262c3c}
.band__txt .btn{margin-top:26px}
.band__ph{position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--ivory); aspect-ratio:4/5; max-height:640px; margin:0}
.band__ph img{width:100%; height:100%; object-fit:cover}

/* product cards */
.card{position:relative; display:flex; flex-direction:column; min-width:0}
.card__link{position:absolute; inset:0; z-index:1; border-radius:var(--r-md)}
.card__ph{position:relative; aspect-ratio:2/3; border-radius:var(--r-md); overflow:hidden; background:var(--ivory);
  transition:transform .6s var(--e-out), box-shadow .6s var(--e-out)}
.card__ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .7s var(--e-out), transform 1.1s var(--e-out)}
.card__ph img + img{opacity:0}
@media (hover:hover){
  .card:hover .card__ph{transform:translateY(-6px); box-shadow:0 26px 40px -30px rgba(12,24,48,.55)}
  .card:hover .card__ph img{transform:scale(1.03)}
  .card:hover .card__ph img + img{opacity:1}
  .card:hover .card__ph img:first-child:not(:only-child){opacity:0}
}
.card__badge{position:absolute; z-index:2; top:10px; right:10px; overflow:hidden; padding:3px 11px; border-radius:7px; background:#e9cf8c; color:var(--deep); font:500 .8rem/1.5 var(--body); pointer-events:none}
.card__badge::after{content:""; position:absolute; inset:0 auto 0 0; width:60%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform:translateX(-120%) skewX(-18deg); animation:badge-shine 4.8s cubic-bezier(.65,0,.35,1) infinite; animation-delay:calc(1s + var(--i, 0) * .35s)}
@keyframes badge-shine{0%{transform:translateX(260%) skewX(-18deg)} 30%,100%{transform:translateX(-120%) skewX(-18deg)}}
.card__body{padding:11px 4px 0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; align-items:start; text-align:start}
.card__name{font:400 1rem/1.4 var(--body); grid-column:1 / -1}
.card__price{font:500 1rem/1.5 var(--body)}
.card__deal{display:inline-block; margin-inline-start:8px; font:500 .78rem/1 var(--body); color:var(--navy,#0b1a3a); background:#f1e3bf; border-radius:99px; padding:4px 8px; vertical-align:2px}
.card__angles{display:flex; align-items:center; gap:4px; font-size:.8rem; color:var(--soft); justify-self:end}
.card__angles i{width:5px; height:5px; border-radius:50%; background:var(--gold-2)}
.card__add{position:absolute; z-index:2; top:10px; left:10px; width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; background:rgba(255,253,250,.94); color:var(--navy); box-shadow:0 6px 18px -8px rgba(12,24,48,.45);
  transition:transform .4s var(--e-out), background-color .3s, color .3s}
.card__add:hover{transform:scale(1.08); background:var(--navy); color:var(--gold-1)}
.card__add svg{width:19px; height:19px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round}

/* popular: a swipe row that drifts by itself until touched */
.row{display:grid; grid-auto-flow:column; grid-auto-columns:min(66vw, 300px); gap:14px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:4px 16px 16px; margin-inline:-16px; scrollbar-width:none; overscroll-behavior-x:contain}
.row.is-drifting{scroll-snap-type:none}
.row::-webkit-scrollbar{display:none}
.row > *{scroll-snap-align:start}
.row-nav{display:flex; justify-content:center; align-items:center; gap:14px; margin-top:4px}
.row-nav button{width:44px; height:44px; border-radius:50%; border:0; background:transparent; box-shadow:inset 0 0 0 1px #c8bca8; color:var(--ink); cursor:pointer; display:grid; place-items:center; transition:transform .4s var(--e-out), background-color .3s}
.row-nav button:hover{transform:scale(1.07); background:var(--navy); color:var(--gold-1); box-shadow:none}
.row-nav svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
@media (min-width:900px){ .row{grid-auto-columns:290px; padding-inline:max(16px, (100vw - 1240px) / 2); margin-inline:calc((100vw - 100%) / -2)} }

/* the shop */
.search{display:flex; align-items:center; gap:8px; max-width:420px; margin:0 auto 18px; padding:0 16px; height:48px; border-radius:99px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line)}
.search:focus-within{box-shadow:inset 0 0 0 1.5px var(--navy)}
.search svg{width:20px; height:20px; stroke:var(--soft); fill:none; stroke-width:1.6; stroke-linecap:round; flex:none}
.search input{flex:1; min-width:0; border:0; background:none; outline:none; height:100%; font-size:1rem}
.chips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:4px 16px; margin:0 -16px 24px; justify-content:safe center}
.chips::-webkit-scrollbar{display:none}
.fchip{flex:none; min-height:42px; padding:0 18px; border-radius:99px; border:0; cursor:pointer; background:var(--paper); color:var(--ink); font-weight:400;
  box-shadow:inset 0 0 0 1px #d8ccba; transition:background-color .3s, color .3s, box-shadow .3s}
.fchip:hover{box-shadow:inset 0 0 0 1px var(--navy)}
.fchip[aria-pressed="true"]{background:var(--navy); color:#fbf3e2; box-shadow:none}
.grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px 12px}
@media (min-width:760px){ .grid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px 18px} }
@media (min-width:1100px){ .grid{grid-template-columns:repeat(4, minmax(0,1fr))} }
.grid .card.is-new{animation:card-in .75s var(--e-out) both; animation-delay:calc(var(--i, 0) * 55ms)}
@keyframes card-in{from{opacity:0; transform:translate3d(0,24px,0) scale(.97)}}
.shop__count{text-align:center; color:var(--soft); margin:-10px 0 22px; font-size:.92rem; font-weight:300}
.shop__empty{text-align:center; color:var(--soft); padding:30px 0}

/* trust row: thin line icons */
.trust{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px 14px; text-align:center; padding:clamp(40px, 6vw, 64px) 0; border-block:1px solid var(--line)}
@media (min-width:900px){ .trust{grid-template-columns:repeat(4, minmax(0,1fr))} }
.trust li{display:grid; justify-items:center; gap:8px}
.trust svg{width:38px; height:38px; fill:none; stroke:var(--navy); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round}
.trust svg .g{stroke:var(--gold-2)}
.trust b{font-weight:500; font-size:1rem; line-height:1.35}
.trust .tag{font-size:.74rem}
.trust--compact{border:0; padding:22px 0 0; gap:18px 10px; grid-template-columns:repeat(2, minmax(0,1fr))}
.trust--compact svg{width:30px; height:30px}
.trust--compact b{font-size:.9rem}

/* =====================================================================================================================
   NAVY BAND: האש שלי
   ===================================================================================================================== */
.esh__card{position:relative; overflow:clip; max-width:980px; margin:0 auto clamp(30px, 5vw, 52px); padding:clamp(30px, 6vw, 52px) 20px; border-radius:var(--r-lg); text-align:center;
  background:radial-gradient(90% 80% at 50% 0%, #17305c 0%, var(--navy) 65%, var(--deep) 100%); color:#efe3c8; box-shadow:0 30px 60px -40px rgba(12,24,48,.7)}
.flame{width:46px; height:60px; margin:0 auto 10px; display:block; transform-origin:50% 100%; animation:sway 3.8s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-3deg) scaleY(1)} 50%{transform:rotate(3deg) scaleY(1.05)}}
.esh__line{font:900 min(clamp(1.9rem, 7.6vw, 3.6rem), 11vw)/1.15 var(--display); padding-bottom:.08em}
.esh__na{font:500 clamp(1.02rem, 3.8vw, 1.25rem)/1.4 var(--display); color:var(--gold-text); margin-top:10px}
.esh__items{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px 12px; max-width:820px; margin-inline:auto}
.esh__extras{margin-top:clamp(36px, 5vw, 56px); text-align:center}
.esh__extras h3{font:400 1.3rem/1.3 var(--body)}
.esh__extras p{color:var(--soft); font-size:.92rem; margin-top:2px; font-weight:300}
.extras{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:18px; max-width:860px; margin-inline:auto}
@media (min-width:760px){ .extras{grid-template-columns:repeat(5, minmax(0,1fr))} }
.extra{margin:0; padding:8px; border-radius:var(--r-md); background:#fff; box-shadow:0 0 0 1px var(--line)}
.extra img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:calc(var(--r-md) - 8px)}
.extra figcaption{color:var(--ink); font-size:.85rem; padding:6px 2px 2px}
.esh__card .sparks{position:absolute; inset:0; pointer-events:none}
.esh__card .sparks svg{position:absolute; width:var(--s,14px); height:var(--s,14px); color:var(--gold-1); opacity:0; animation:spark 4.2s ease-in-out infinite; animation-delay:var(--d)}

/* about */
.about{display:grid; gap:clamp(28px, 5vw, 64px); align-items:center}
@media (min-width:900px){ .about{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.about__seal{position:relative; width:min(82vw, 440px); aspect-ratio:1; margin-inline:auto}
.about__seal img{width:100%; height:100%; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1.5px var(--gold-2), 0 0 0 10px var(--paper), 0 0 0 11px rgba(201,149,47,.4), 0 40px 70px -40px rgba(12,24,48,.7)}
.about__seal .spin{position:absolute; inset:-22px; border-radius:50%; border:1px dashed rgba(201,149,47,.55); animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.about__txt{text-align:center}
@media (min-width:900px){ .about__txt{text-align:start} .about__txt .arc{margin-inline:0} }
.about__txt p{font-size:1.1rem; line-height:1.85; max-width:34em; margin:14px auto 0; font-weight:300}
@media (min-width:900px){ .about__txt p{margin-inline:0} }
.about__txt .btn{margin-top:22px}

/* questions */
.acc{max-width:760px; margin-inline:auto; border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__item h3,.acc__item h2{font:inherit}
.acc__btn{width:100%; display:flex; align-items:center; gap:12px; padding:19px 2px; background:none; border:0; cursor:pointer; text-align:start; font:400 1.08rem/1.4 var(--body); color:var(--ink)}
.acc__btn .ico{width:22px; height:22px; flex:none; fill:none; stroke:var(--gold-ink); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.acc__btn i{position:relative; flex:none; width:28px; height:28px; margin-inline-start:auto; border-radius:50%; box-shadow:inset 0 0 0 1px #d6c9b5; transition:background-color .3s, transform .5s var(--e-out)}
.acc__btn i::before,.acc__btn i::after{content:""; position:absolute; left:50%; top:50%; width:11px; height:1.5px; margin:-.75px 0 0 -5.5px; background:var(--navy); border-radius:2px; transition:transform .5s var(--e-out)}
.acc__btn i::after{transform:rotate(90deg)}
.acc__btn[aria-expanded="true"] i{background:var(--navy); box-shadow:none; transform:rotate(180deg)}
.acc__btn[aria-expanded="true"] i::before,.acc__btn[aria-expanded="true"] i::after{background:var(--gold-1)}
.acc__btn[aria-expanded="true"] i::after{transform:rotate(0)}
.acc__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--e-out)}
.acc__panel > div{overflow:hidden}
.acc__panel > div > *{opacity:0; transform:translate3d(0,-6px,0); transition:opacity .3s, transform .5s var(--e-out)}
.acc__panel.is-open{grid-template-rows:1fr}
.acc__panel.is-open > div > *{opacity:1; transform:none; transition-delay:.08s}
.acc__panel p{padding:0 2px 18px; color:var(--soft); max-width:60ch; font-weight:300}
.acc__panel p + p{margin-top:-8px}

/* footer */
.foot{position:relative; background:var(--cream); color:var(--ink); padding:clamp(44px, 6vw, 72px) 0 calc(26px + var(--sw))}
.foot::before{content:""; position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg, transparent, var(--gold-2) 25%, #e9c46a 50%, var(--gold-2) 75%, transparent)}
.foot__in{display:grid; gap:28px; text-align:center}
.foot__in > *{min-width:0}
@media (min-width:900px){ .foot__in{grid-template-columns:1.3fr 1fr 1fr; text-align:start; align-items:start} }
.foot__brand{display:grid; justify-items:center; gap:10px}
@media (min-width:900px){ .foot__brand{grid-template-columns:auto 1fr; justify-items:start; align-items:center; gap:16px} }
.foot__seal{width:84px; height:84px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1.5px var(--gold-2), 0 0 0 5px var(--cream), 0 0 0 6px rgba(201,149,47,.35)}
.foot__mark{font:900 min(2.2rem, 11vw)/1.05 var(--display); padding-bottom:.06em}
.foot__tag{color:var(--gold-ink); margin-top:4px}
.foot__links ul{display:flex; flex-wrap:wrap; justify-content:center; gap:2px 18px}
@media (min-width:900px){ .foot__links ul{flex-direction:column; justify-content:start} }
.foot__links a{display:inline-block; padding:6px 0; text-decoration:none; color:var(--ink); font-weight:400}
.foot__links a:hover{color:var(--gold-ink)}
.foot__contact{display:grid; gap:10px; justify-items:center}
@media (min-width:900px){ .foot__contact{justify-items:start} }
.foot__contact a.tel{color:var(--ink); text-decoration:none; font-weight:500}
.foot__copy{grid-column:1 / -1; border-top:1px solid var(--line); padding-top:16px; font-size:.88rem; color:var(--soft)}

/* floating WhatsApp with a pulsing ring */
.wa{position:fixed; z-index:30; left:22px; bottom:calc(var(--sw) + 16px + env(safe-area-inset-bottom)); width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; background:var(--navy); color:var(--gold-1); box-shadow:0 0 0 1.5px var(--gold-1), 0 14px 30px -12px rgba(7,15,34,.8);
  transition:opacity .4s, transform .6s var(--e-out), visibility 0s}
.wa:hover{transform:scale(1.07)}
.wa svg{width:27px; height:27px}
/* the pulse: a thin border on its own layer (a box-shadow ring cost frames on a 4x slower phone), two quick rings
   then a rest. It stays inside the screen: in an RTL page anything past the left edge widens the page. */
.wa::before,.wa::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--gold-2); opacity:0; will-change:transform, opacity;
  animation:wa-ring 4.2s cubic-bezier(.16,1,.3,1) 3s infinite}
.wa::after{animation-delay:3.5s}
@keyframes wa-ring{0%{transform:scale(1); opacity:.75} 45%{transform:scale(1.6); opacity:0} 100%{transform:scale(1.6); opacity:0}}
.wa.is-wait{opacity:0; transform:translate3d(0,16px,0) scale(.8); pointer-events:none; visibility:hidden; transition:opacity .3s, transform .4s var(--e-out), visibility 0s .4s}
@media (min-width:900px){ .wa{left:auto; right:24px; bottom:24px} }

/* scroll reveals (only with JS; site.js shows them) */
.js [data-r]{opacity:0; transform:translate3d(0,26px,0); transition:opacity .9s var(--e-out), transform 1.1s var(--e-out)}
.js [data-r="zoom"]{transform:scale(.94)}
.js [data-r].is-in{opacity:1; transform:none}
.js [data-r="stagger"],.js [data-r="tiles"]{opacity:1; transform:none}
.js [data-r="stagger"] > *{opacity:0; transform:translate3d(0,22px,0); transition:opacity .8s var(--e-out), transform 1s var(--e-out); transition-delay:calc(var(--i, 0) * 80ms)}
.js [data-r="stagger"].is-in > *{opacity:1; transform:none}

/* =====================================================================================================================
   PRODUCT PAGE
   ===================================================================================================================== */
.pdp{padding:14px 0 clamp(56px, 8vw, 96px)}
.crumbs ol{display:flex; flex-wrap:wrap; gap:4px 8px; font-size:.9rem; color:var(--soft); font-weight:300}
.crumbs li + li::before{content:"‹"; margin-inline-end:8px; color:var(--gold-2)}
.crumbs a{text-decoration:none; color:var(--soft)}
.crumbs a:hover{color:var(--ink); text-decoration:underline}
.pdp__grid{display:grid; gap:18px; margin-top:12px}
@media (min-width:900px){ .pdp__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:56px; align-items:start; margin-top:20px} }

.gal{min-width:0; scroll-margin-top:calc(var(--hh) + 8px)}
@media (max-width:899px){ .gal{margin-inline:-16px} }
.gal__view{position:relative}
.gal__track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; background:var(--ivory)}
@media (min-width:900px){ .gal__track{border-radius:var(--r-lg)} }
.gal__track::-webkit-scrollbar{display:none}
.gal__slide{flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; aspect-ratio:2/3; max-height:calc(100svh - var(--hh) - 40px); margin:0}
/* phones: the photo leaves room for the arrows and counter above the sticky buy bar */
@media (max-width:899px){ .gal__slide{max-height:max(380px, calc(100svh - 312px))} }
.gal__slide img{width:100%; height:100%; object-fit:contain}
.gal__hint{position:absolute; bottom:14px; right:14px; z-index:2; padding:5px 12px; border-radius:99px; background:rgba(12,24,48,.8); color:#f7ecd4; font-size:.82rem}
.gal__bar{display:flex; align-items:center; justify-content:center; gap:14px; padding:12px 0 2px}
.gal__arrow{width:42px; height:42px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px #cfc2ad;
  transition:transform .4s var(--e-out), opacity .3s, background-color .3s, color .3s}
.gal__arrow:hover{transform:scale(1.07); background:var(--navy); color:var(--gold-1); box-shadow:none}
.gal__arrow[disabled]{opacity:.3; pointer-events:none}
.gal__arrow svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.gal__count{min-width:52px; text-align:center; font-size:.95rem; color:var(--soft)}
.dots{display:flex; justify-content:center; gap:6px; padding:4px 0}
.dots button{width:26px; height:26px; border:0; padding:0; background:none; cursor:pointer; display:grid; place-items:center}
.dots button::before{content:""; width:7px; height:7px; border-radius:99px; background:#cbbb9b; transition:transform .5s var(--e-out), background-color .3s}
.dots button[aria-current="true"]::before{transform:scale(1.45); background:var(--navy)}
@media (min-width:900px){ .dots{display:none} }
.thumbs{display:flex; gap:12px; padding:8px 16px 4px; overflow-x:auto; scrollbar-width:none; justify-content:safe center}
@media (min-width:900px){ .thumbs{padding-inline:0} }
.thumb{flex:none; width:64px; aspect-ratio:2/3; border-radius:10px; overflow:hidden; border:0; padding:0; cursor:pointer; background:var(--ivory);
  box-shadow:inset 0 0 0 1px var(--line); opacity:.65; transition:opacity .3s, box-shadow .3s, transform .4s var(--e-out)}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb:hover{opacity:1; transform:translateY(-2px)}
.thumb[aria-current="true"]{opacity:1; outline:2px solid var(--navy); outline-offset:2px}
@media (min-width:900px){ .thumb{width:80px} }

.buy{min-width:0}
.buy__cat{font-weight:500; color:var(--gold-ink); font-size:.92rem; text-decoration:none}
.buy__name{font:500 clamp(1.7rem, 6.2vw, 2.4rem)/1.25 var(--body); margin-top:4px}
.buy__price{font:500 1.5rem/1.3 var(--body); margin-top:8px}
.buy__price small{font-size:.82rem; font-weight:300; color:var(--soft); margin-inline-start:8px}
.buy__desc{color:var(--soft); margin-top:10px; max-width:52ch; font-weight:300}
.rule{display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--gold-2)}
.rule::before,.rule::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, #d9c49a)}
.rule::after{background:linear-gradient(270deg, transparent, #d9c49a)}
.rule svg{width:13px; height:13px; animation:twinkle 4s ease-in-out infinite}
.vars{border:0; padding:0; margin:0 0 20px}
.vars legend{font-weight:400; margin-bottom:10px; padding:0}
.vars legend b{font-weight:500}
.vrow{display:flex; gap:12px; align-items:flex-start}
.vthumb{flex:none; width:56px; aspect-ratio:2/3; border-radius:10px; overflow:hidden; background:var(--ivory); box-shadow:inset 0 0 0 1px var(--line)}
.vthumb img{width:100%; height:100%; object-fit:cover}
.vchips{display:flex; flex-wrap:wrap; gap:8px; min-width:0}
.vchip{position:relative}
.vchip input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.vchip span{display:flex; align-items:center; min-height:44px; padding:0 18px; border-radius:99px; background:var(--paper); box-shadow:inset 0 0 0 1px #d8ccba;
  transition:background-color .3s, color .3s, box-shadow .3s}
.vchip input:hover + span{box-shadow:inset 0 0 0 1px var(--navy)}
.vchip input:checked + span{background:var(--navy); color:#fbf3e2; box-shadow:none}
.vchip input:focus-visible + span{outline:2px solid var(--gold-2); outline-offset:3px}
.buy__qty{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.buy__qty > span{color:var(--soft)}
.qty{display:inline-flex; align-items:center; border-radius:99px; background:var(--paper); box-shadow:inset 0 0 0 1px #d8ccba; flex:none}
.qty button{width:44px; height:46px; border:0; background:none; cursor:pointer; font-size:1.25rem; border-radius:99px}
.qty button:hover{color:var(--gold-ink)}
.qty output{min-width:26px; text-align:center; font-weight:500}
.buy__wa{width:100%; margin-top:10px; border-radius:12px}
.buy .acc{margin-top:24px}
.buy .acc__btn{padding:15px 2px}
.more{margin-top:clamp(56px, 8vw, 96px)}
.more .grid{margin-top:8px}

/* phone: the sticky buy bar above the demo switch */
.buybar{position:fixed; z-index:35; inset-inline:0; bottom:var(--sw); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,253,250,.98); color:var(--ink);
  box-shadow:0 -1px 0 var(--line), 0 -12px 30px -20px rgba(12,24,48,.6); transform:translate3d(0,calc(100% + var(--sw) + 24px),0); visibility:hidden;
  transition:transform .5s var(--e-out), visibility 0s .5s}
.buybar.is-on{transform:none; visibility:visible; transition:transform .5s var(--e-out)}
.buybar__in{display:flex; align-items:center; gap:14px; max-width:640px; margin-inline:auto}
.buybar__t{flex:1; min-width:0; display:grid; line-height:1.3}
.buybar__t span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.88rem; color:var(--soft)}
.buybar__t b{font-weight:500; font-size:1.1rem}
.buybar .btn{min-height:46px; border-radius:12px}
.buybar__wa{flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--paper); color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--gold-2)}
.buybar__wa svg{width:24px; height:24px}
@media (min-width:900px){ .buybar{display:none} }
/* phones: the floating WhatsApp steps aside while the buy bar shows, and while the page scrolls down (site.js),
   so it never sits on card names or accordion toggles while reading */
@media (max-width:899px){
  .page-product.bar-on .wa,.wa.is-tucked{opacity:0; transform:translate3d(0,16px,0) scale(.85); pointer-events:none; visibility:hidden;
    transition:opacity .25s, transform .35s var(--e-out), visibility 0s .35s}
}

/* Performance: the draft skipped the layout of far blocks with content-visibility:auto (#about, #faq, the footer, "more"). Not in the shop: in WebKit the first question moved under the tap as #faq scrolled in, and in Chrome (4x CPU) the cart drawer's close dropped a frame while the page behind it was skipped (motion 3.11). */
/* While the visitor is tapping (site.js sets html.is-busy for 1.6s), the decorative loops rest, so a slow phone gives
   its frames to what was just touched; they start again afterwards. */
.is-busy .wa::before,.is-busy .wa::after,.is-busy .card__badge::after{animation:none}
/* Loops rest where nobody sees them: site.js marks a [data-loops] section .is-off while it's off screen, and the whole
   page .is-busy for a moment after a tap (that one only touches the ring and the badges: a broad selector restyled
   whole sections at the moment of the tap). Paused, not removed, so the hero's crossfade carries on where it was. */
.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}