/* VITALIA TAIEB, "הבוטיק של ויטליה טייב" (9.11.2026): Yair's umbrella boutique, drawn from his own mockup of the
   entrance (his words: "כך אני רוצה את הכניסה לחנות ואז כניסה לכל קטגוריה"). A warm blush-ivory ground, ink text, thin
   gold outlines and hairlines, white card faces, dark ink only for buttons. Frank Ruhl Libre's Latin capitals for the
   wordmark (a classic serif), Assistant bold for the Hebrew titles (a strong sans, as in his mockup), Cormorant
   Garamond for the perfumes' English names. Bordeaux stays a small accent inside the perfumes (his AMUVEL number seals
   and chips). Soft rounded corners, no dark sections. Motion: the entrance rises card by card from the first paint (CSS
   keyframes), the gold rule draws, a slow gloss crosses the cards' images; reveals and staggered cards elsewhere;
   transform and opacity only. Mobile first, RTL. core.css (loaded after) styles the core's pieces on these tokens. */
:root{
  --ground:#fdf7ef; --paper:#fffcf7; --face:#fffdf9; --sand:#f1e6d8; --cream:#f8efe4; --blush:#f8ebe3;
  --wine:#5c1a2b; --wine-2:#74253a; --wine-soft:#8a3a4e;
  --gold:#b88a4a; --gold-2:#c9a46a; --gold-ink:#7a5a24; --gold-line:#cfa974; --hair:#e3d3bb;
  --ink:#1b1613; --soft:#5b524c; --line:#ecdfcd;
  --btn:var(--ink); --on-btn:#fbf4e8;
  --gold-grad:linear-gradient(100deg, #8a6532 0%, #b48d52 22%, #e2c58e 42%, #b28a4e 58%, #8a6532 78%, #b48d52 100%);
  --latin:"Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --serif:"Frank Ruhl Libre", "Times New Roman", serif;
  --display:"Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --body:"Assistant", 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:30px; --hh:52px; --sw:0px;
  --r-lg:16px; --r-md:12px; --r-sm:10px; --r-card:7px; --ivory:var(--cream);
  --dr-bg:var(--paper); --dr-scrim:rgba(27,22,19,.42);
  --fly-toast-bg:var(--ink); --fly-toast-fg:var(--on-btn); --fly-toast-bottom:14px;
  --tz-scale:2.2;
}
@media (min-width:900px){ :root{ --hh:72px; --fly-toast-bottom:24px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; counter-reset:cartn var(--cart-n, 0)}
[id]{scroll-margin-top:calc(var(--hh) + 12px)}
body{margin:0; background:var(--ground); color:var(--ink); font:400 1.05rem/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,figure{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--gold-ink); 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}
.defs{position:absolute; width:0; height:0; overflow:hidden}
.wrap{width:min(1240px, 100% - 32px); margin-inline:auto}
/* one-column grids take the screen's width, never their longest word's (200% text at 320 wide); wider layouts set their own columns further down */
:is(.ent__head,.ecard,.ecard__txt,.cathead,.cathead__txt,.cat-soon,.sec__head,.card__body,.foot__in,.foot__brand,.foot__contact,.pdp__grid,.buy__head){grid-template-columns:minmax(0,1fr)}
.en{font-family:var(--latin)}
/* Cormorant's figures are old-style by default: numbers stand on the line here */
.card__no,.pp__seal,.buybar__en,.crumbs [dir="ltr"]{font-variant-numeric:lining-nums}
/* this Cormorant subset has no lining figures, so the numbers themselves are set in Frank Ruhl Libre's Latin */
.num{font-family:var(--serif); font-weight:500; letter-spacing:.02em}
.tag{display:inline-block; font:600 .76rem/1.3 var(--body); color:var(--gold-ink); background:var(--blush); border-radius:99px; padding:3px 10px}

/* ---------- type: the eyebrow (a gold hairline, then gold-ink words), headings ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:10px; font:600 .84rem/1.4 var(--body); color:var(--gold-ink)}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold)}
.h1{font:700 clamp(2.1rem, 8.6vw, 3.4rem)/1.12 var(--display); overflow-wrap:break-word}
.h2{font:700 clamp(1.6rem, 6.4vw, 2.5rem)/1.2 var(--display); overflow-wrap:break-word; max-width:100%}

/* ---------- the wordmark: VITALIA TAIEB in spaced serif capitals (Latin, so letter-spacing is fine) ---------- */
.wm{display:inline-block; direction:ltr; white-space:nowrap; font:400 1.1rem/1 var(--serif); letter-spacing:.3em; margin-inline-end:-.3em; color:var(--ink)}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 30px; border-radius:99px;
  font:600 1.02rem/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, color .3s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:20px; height:20px; flex:none}
.btn--ink{background:var(--ink); color:var(--on-btn); box-shadow:0 14px 28px -18px rgba(27,22,19,.75), inset 0 0 0 1px rgba(201,164,106,.3)}
.btn--ink:hover{background:#3a2c22}
.btn--ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--gold-line)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--gold); color:var(--gold-ink)}
.btn--block{width:100%; border-radius:12px; min-height:56px; font-size:1.08rem}
.ulink{position:relative; display:inline-block; padding:6px 0; text-decoration:none; font-weight:600; color:var(--ink)}
.ulink::after{content:""; position:absolute; inset:auto 0 3px; height:1px; background:var(--gold); transform-origin:100% 50%; transition:transform .6s var(--e-out)}
.ulink:hover{color:var(--gold-ink)}
.ulink:hover::after{transform:scaleX(.35)}

/* ---------- announcement bar (not on the home: his entrance starts with the header) + header: the menu on the right,
   VITALIA TAIEB centred, the bag on the left, a thin gold rule under it, as in his mockup ---------- */
.ann{position:relative; z-index:41; height:var(--ann); background:var(--blush); color:var(--soft); display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:.8rem; font-weight:600; padding-inline:12px; white-space:nowrap; overflow:hidden; border-bottom:1px solid var(--line)}
.ann span{overflow:hidden; text-overflow:ellipsis}
.ann i{width:4px; height:4px; flex:none; transform:rotate(45deg); background:var(--gold-2)}
[data-page="home"] .ann{display:none}
.head{position:sticky; top:0; z-index:40; height:var(--hh); color:var(--ink); background:var(--ground)}
.head::before{content:""; position:absolute; inset:0; background:var(--ground); box-shadow:0 12px 26px -24px rgba(27,22,19,.45); opacity:0; transition:opacity .5s var(--e-out)}
.head.is-scrolled::before{opacity:1}
.head__in{position:relative; height:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:min(1240px, 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; padding:8px 4px; text-decoration:none; justify-self:center; color:var(--ink)}
/* capped by the screen too, so 200% text at 320 wide never widens the page */
.head__mark .wm{font-size:min(1.1rem, 4.7vw)}
@media (min-width:900px){ .head__mark .wm{font-size:1.45rem} }
.head__rule{position:absolute; inset:auto 8px 0; height:1.5px; background:linear-gradient(90deg, rgba(184,138,74,.55), var(--gold) 12%, var(--gold) 88%, rgba(184,138,74,.55));
  transform-origin:50% 50%; animation:rule-draw 1.1s var(--e-out) .1s both}
@media (min-width:900px){ .head__rule{inset-inline:0} }
@keyframes rule-draw{from{transform:scaleX(0)}}
.icon-btn{position:relative; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:0; background:transparent; cursor:pointer; color:var(--gold-ink); text-decoration:none; flex:none;
  transition:background-color .3s, color .3s, transform .4s var(--e-out)}
.icon-btn:hover{background:rgba(184,138,74,.1)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round}
.head__bag svg{width:27px; height:27px}
.badge{position:absolute; top:3px; left:1px; min-width:19px; height:19px; padding:0 5px; border-radius:99px; background:var(--ink); color:#f6e7cf;
  font:700 .72rem/19px 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:24px; 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)}
.nav{position:absolute; top:100%; inset-inline:0; background:var(--paper); box-shadow:0 1px 0 var(--line), 0 30px 40px -30px rgba(27,22,19,.4); padding:8px 0 26px;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  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(3, 1fr); gap:0 18px} }
.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:.04s} .nav.is-open li:nth-child(3){transition-delay:.08s} .nav.is-open li:nth-child(4){transition-delay:.12s}
.nav.is-open li:nth-child(5){transition-delay:.16s} .nav.is-open li:nth-child(6){transition-delay:.2s}
.nav a{display:block; padding:14px 6px; text-decoration:none; font:600 1.2rem/1.3 var(--display); border-bottom:1px solid var(--line)}
.nav a:hover{color:var(--gold-ink)}
.nav a [lang="en"]{font:500 1.1em/1 var(--serif)}

/* =====================================================================================================================
   THE ENTRANCE (home), his mockup as drawn: the big bold title, the lighter line, then the bags and the perfumes side by
   side and the candles wide below. Each card: a thin gold outline, rounded corners, a white face, the image on top, the
   name (and a grey line) under it, a gold rule and a strip with the arrow. On a wide screen the same 2 + 1, at a max
   width. The words rise and the cards come in one by one from the first paint (CSS keyframes); nothing waits for a
   script, nothing is pinned.
   ===================================================================================================================== */
.ent{width:min(780px, 100% - 16px); margin-inline:auto; padding:26px 0 clamp(36px, 7vw, 72px)}
@media (min-width:900px){ .ent{padding-top:clamp(40px, 5vw, 64px)} }
.ent__head{display:grid; justify-items:center; text-align:center; gap:4px; margin-bottom:22px; padding-inline:12px; text-wrap:balance}
@media (min-width:900px){ .ent__head{gap:10px; margin-bottom:40px} }
.ent__t{font:700 clamp(1.6rem, 9.6vw, 2.35rem)/1.15 var(--display); color:var(--ink); overflow-wrap:break-word; max-width:100%; animation:op-rise .9s var(--e-out) .15s both}
.ent__sub{font:400 clamp(1.05rem, 5.8vw, 1.42rem)/1.35 var(--display); color:#2c2521; overflow-wrap:break-word; max-width:100%; animation:op-rise .9s var(--e-out) .28s both}
@media (min-width:900px){ .ent__t{font-size:3.6rem} .ent__sub{font-size:1.75rem} }
.ents{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
@media (min-width:900px){ .ents{gap:22px} }
.ents > li{display:grid; min-width:0; animation:card-rise 1s var(--e-out) both; animation-delay:calc(.2s + var(--i, 0) * .1s)}
.ents__wide{grid-column:1 / -1}
@keyframes card-rise{from{opacity:0; transform:translate3d(0,26px,0)}}
@keyframes op-rise{from{opacity:0; transform:translate3d(0,18px,0)}}

.ecard{position:relative; display:flex; flex-direction:column; text-decoration:none; color:var(--ink); background:var(--face);
  border-radius:var(--r-card); box-shadow:inset 0 0 0 1px var(--gold-line), 0 1px 0 rgba(184,138,74,.08); overflow:hidden; isolation:isolate;
  transition:transform .55s var(--e-out), box-shadow .55s var(--e-out)}
/* the outline over the image too (the image sits under it) */
.ecard::after{content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--gold-line); pointer-events:none}
.ecard__ph{position:relative; display:block; aspect-ratio:435/476; overflow:hidden; background:var(--sand)}
.ecard--wide .ecard__ph{aspect-ratio:893/367; background:#fff}
.ecard__ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:img-settle 1.6s var(--e-out) both; animation-delay:calc(.2s + var(--i, 0) * .1s)}
@keyframes img-settle{from{transform:scale(1.08)}}
.ecard__txt{flex:1; display:grid; align-content:center; justify-items:center; gap:2px; text-align:center; padding:10px 8px 12px; min-height:84px}
.ecard__t{font:700 clamp(1rem, 5.3vw, 1.3rem)/1.25 var(--display); color:var(--ink); overflow-wrap:break-word; max-width:100%}
.ecard__brand{display:block; font:600 clamp(1.05rem, 5.3vw, 1.28rem)/1.2 var(--serif); color:var(--gold-ink); margin-top:3px}
.ecard__sub{font:400 clamp(.86rem, 4.3vw, 1.05rem)/1.3 var(--display); color:#2c2521; overflow-wrap:break-word; max-width:100%}
.ecard__bar{position:relative; display:flex; align-items:center; gap:8px; min-height:30px; padding:0 14px; border-top:1px solid var(--gold-line)}
.ecard__arrow{width:20px; height:20px; flex:none; margin-inline-start:auto; fill:none; stroke:var(--gold-ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .5s var(--e-out)}
.ecard__soon{font:700 .72rem/1 var(--body); color:var(--gold-ink); padding:4px 8px 3px; border-radius:99px; box-shadow:inset 0 0 0 1px var(--gold-line); background:var(--paper)}
/* the candles' strip: the title centred, "בקרוב" before it and the arrow after it, never over each other */
.ecard--wide .ecard__bar{min-height:40px; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; padding-block:4px}
.ecard--wide .ecard__t{grid-column:2; text-align:center; font-size:clamp(1rem, 5.2vw, 1.25rem)}
.ecard--wide .ecard__soon{grid-column:1; grid-row:1; justify-self:start}
.ecard--wide .ecard__arrow{grid-column:3; grid-row:1; justify-self:end}
@media (min-width:900px){
  .ecard__txt{min-height:120px; padding:16px 18px 18px; gap:6px}
  .ecard__t{font-size:1.6rem} .ecard__brand{font-size:1.6rem} .ecard__sub{font-size:1.15rem}
  .ecard__bar{min-height:48px; padding:0 22px}
  .ecard__soon{font-size:.8rem}
  .ecard__arrow{width:24px; height:24px}
  .ecard--wide .ecard__bar{min-height:56px}
  .ecard--wide .ecard__t{font-size:1.6rem}
}
@media (hover:hover){
  .ecard:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--gold-line), 0 24px 40px -30px rgba(122,90,36,.55)}
  .ecard:hover .ecard__arrow{transform:translate3d(-5px,0,0)}
  .ecard:hover .ecard__ph img{transform:scale(1.035); transition:transform 1.2s var(--e-out)}
}
.ecard:active{transform:scale(.985)}
/* the gloss: a slow band of light across a card's image (and a product's photo) */
.gloss{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.gloss::before{content:""; position:absolute; top:-10%; bottom:-10%; left:0; width:46%;
  background:linear-gradient(100deg, rgba(255,250,240,0) 0%, rgba(255,250,240,.32) 46%, rgba(255,255,255,.5) 50%, rgba(255,250,240,.32) 54%, rgba(255,250,240,0) 100%);
  transform:translate3d(-120%,0,0) skewX(-14deg); animation:gloss 8s var(--e-io) 1.8s infinite}
.gloss--late::before{animation-delay:2.6s}
@keyframes gloss{0%{transform:translate3d(-120%,0,0) skewX(-14deg)} 28%,100%{transform:translate3d(330%,0,0) skewX(-14deg)}}

/* =====================================================================================================================
   A CATEGORY'S ENTRANCE (/shop, /bags, /candles): the crumbs, its card's image in the same gold outline beside its name
   (the wide candles logo above it), then its products, or an honest "בקרוב"
   ===================================================================================================================== */
.cathead{display:grid; grid-template-columns:minmax(0,40%) minmax(0,1fr); gap:16px; align-items:center; margin:14px 0 22px}
.cathead__ph{position:relative; aspect-ratio:435/476; border-radius:var(--r-card); overflow:hidden; background:var(--sand); box-shadow:0 18px 34px -28px rgba(122,90,36,.6)}
.cathead__ph::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--gold-line); pointer-events:none}
.cathead__ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:img-settle 1.4s var(--e-out) both}
.cathead__txt{display:grid; gap:6px; justify-items:start; animation:op-rise .9s var(--e-out) .12s both}
.cathead__t{font:700 clamp(1.4rem, 7.4vw, 1.9rem)/1.15 var(--display); overflow-wrap:break-word; max-width:100%}
.cathead__brand{display:block; font:600 1.05em/1.15 var(--serif); color:var(--gold-ink)}
.cathead__sub{color:var(--soft); font-size:1rem; line-height:1.45}
.cathead--wide{grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center}
.cathead--wide .cathead__ph{width:100%; max-width:620px; aspect-ratio:893/367; background:#fff}
.cathead--wide .cathead__txt{justify-items:center}
@media (min-width:900px){
  .cathead{grid-template-columns:240px minmax(0,1fr); gap:40px; margin:22px 0 34px}
  .cathead--wide{grid-template-columns:minmax(0,560px) minmax(0,1fr); justify-items:stretch; text-align:start}
  .cathead--wide .cathead__txt{justify-items:start}
  .cathead__t{font-size:2.9rem}
  .cathead__sub{font-size:1.15rem}
}
.cat-soon{display:grid; justify-items:center; gap:10px; text-align:center; padding:34px 20px 30px; border-radius:var(--r-lg); background:var(--face); box-shadow:inset 0 0 0 1px var(--gold-line); max-width:640px; margin-inline:auto}
.cat-soon__tag{font:700 .8rem/1 var(--body); color:var(--gold-ink); padding:6px 12px 5px; border-radius:99px; box-shadow:inset 0 0 0 1px var(--gold-line)}
.cat-soon__t{font:700 clamp(1.15rem, 6vw, 1.45rem)/1.3 var(--display); overflow-wrap:break-word; max-width:100%}
.cat-soon__p{color:var(--soft); max-width:30em}
.cat-soon__ways{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 22px; margin-top:8px}
@keyframes op-settle{from{transform:scale(1.14)}}

/* sections (the product page's "more"), heads */
.sec{padding:clamp(60px, 9vw, 112px) 0}
.sec--tight{padding-block:clamp(36px, 6vw, 72px)}
.sec__head{display:grid; justify-items:center; gap:8px; text-align:center; margin-bottom:clamp(26px, 4vw, 44px)}
.sec__head--row{grid-template-columns:minmax(0,1fr) auto; justify-items:start; align-items:end; text-align:start}
.sec__head--row > div{display:grid; gap:6px; justify-items:start}

/* =====================================================================================================================
   THE SCENT CARD (home's row, the catalogue, "more")
   ===================================================================================================================== */
.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:4/5; border-radius:var(--r-md); overflow:hidden; background:var(--sand);
  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; object-position:50% 42%; transition:transform 1.1s var(--e-out)}
.card__ph::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,252,245,.45) 50%, transparent 70%);
  transform:translate3d(-110%,0,0); transition:transform 1.1s var(--e-io); pointer-events:none}
@media (hover:hover){
  .card:hover .card__ph{transform:translateY(-5px); box-shadow:0 26px 40px -30px rgba(35,26,27,.55)}
  .card:hover .card__ph img{transform:scale(1.04)}
  .card:hover .card__ph::after{transform:translate3d(110%,0,0)}
}
/* the number on a bordeaux seal (his catalogue's badges), with a gold ring */
.card__no{position:absolute; z-index:2; top:10px; right:10px; display:grid; place-items:center; align-content:center; width:52px; height:52px; border-radius:50%;
  background:var(--wine); color:#f6e8d0; font:500 1.05rem/1 var(--serif); box-shadow:inset 0 0 0 1px rgba(233,207,155,.55), 0 0 0 3px rgba(245,238,228,.75), 0 8px 18px -10px rgba(35,26,27,.6); pointer-events:none}
.card__no small{font:500 .58rem/1 var(--latin); letter-spacing:.12em; opacity:.8; margin-bottom:2px}
.card__body{display:grid; gap:1px; padding:12px 4px 0; text-align:start}
.card__insp{font-size:.76rem; font-weight:600; color:var(--gold-ink)}
.card__en{font:500 1.3rem/1.12 var(--latin); color:var(--ink); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:break-word; padding-bottom:.08em}
.card__en .en{direction:ltr; unicode-bidi:isolate}
.card__he{font-size:.9rem; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.card__name{font:700 1.08rem/1.35 var(--display); overflow-wrap:break-word; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
/* a bag or a candle (his own photos later): framed from the top, never a cut head */
.card--plain .card__ph img{object-position:50% 15%}
/* one product alone in a category stands in the middle */
.cat .grid:has(> li:only-child){grid-template-columns:minmax(0,340px); justify-content:center}
.card__foot{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; margin-top:6px}
.card__price{font:700 1rem/1.4 var(--body)}
.card__soon{font-size:.78rem; color:var(--soft)}
.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(252,248,242,.94); color:var(--ink); box-shadow:0 6px 18px -8px rgba(35,26,27,.45);
  transition:transform .4s var(--e-out), background-color .3s, color .3s}
.card__add:hover{transform:scale(1.08); background:var(--ink); color:var(--on-btn)}
.card__add svg{width:19px; height:19px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round}
/* cards the catalogue's filter, search or "עוד ריחות" brings in */
.card.is-new{animation:card-in .7s var(--e-out) both; animation-delay:calc(var(--i, 0) * 40ms)}
@keyframes card-in{from{opacity:0; transform:translate3d(0,18px,0)}}
.grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 12px}
@media (min-width:760px){ .grid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:36px 18px} }
@media (min-width:1100px){ .grid{grid-template-columns:repeat(4, minmax(0,1fr)); gap:40px 22px} }
/* until the catalogue's script takes over, only the first page shows (without JavaScript every card shows) */
.js .grid:not(.is-live) > [data-later]{display:none}

/* =====================================================================================================================
   THE CATALOGUE (/shop)
   ===================================================================================================================== */
.pg{padding:clamp(28px, 5vw, 56px) 0 clamp(56px, 8vw, 96px)}
.cat{padding-bottom:0}
.cat__lead{color:var(--soft); font-size:.95rem; line-height:1.5; max-width:34em}
.cat__tools{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-bottom:22px}
@media (min-width:900px){ .cat__tools{grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px 24px} .cat__tools .chips{grid-column:1 / -1; grid-row:2} .cat__count{grid-row:1; grid-column:2} }
.search{position:relative; display:flex; align-items:center; gap:10px; min-height:56px; padding:0 18px; border-radius:99px; background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--hair), 0 14px 30px -26px rgba(35,26,27,.5); transition:box-shadow .3s}
.search:focus-within{box-shadow:inset 0 0 0 1.5px var(--gold), 0 0 0 4px rgba(184,138,74,.2)}
.search > svg{width:22px; height:22px; flex:none; fill:none; stroke:var(--gold-ink); stroke-width:1.6; stroke-linecap:round}
.search input{flex:1; min-width:0; height:54px; border:0; background:none; outline:none; font-size:1.05rem}
.search input::placeholder{color:#8d7b76}
.search input::-webkit-search-cancel-button{display:none}
.search__x{flex:none; width:36px; height:36px; border-radius:50%; border:0; background:var(--sand); cursor:pointer; display:grid; place-items:center}
.search__x svg{width:16px; height:16px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round}
.chips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 16px 4px; margin-inline:-16px; overscroll-behavior-x:contain}
.chips::-webkit-scrollbar{display:none}
@media (min-width:900px){ .chips{flex-wrap:wrap; padding:2px 0; margin:0} }
.fchip{flex:none; display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 18px; border-radius:99px; border:0; cursor:pointer; background:var(--paper);
  color:var(--ink); box-shadow:inset 0 0 0 1px var(--hair); font-weight:600; font-size:.98rem; text-decoration:none; white-space:nowrap;
  transition:background-color .35s, color .35s, box-shadow .35s, transform .4s var(--e-out)}
.fchip small{font-weight:600; font-size:.78rem; color:var(--soft); transition:color .35s}
.fchip:hover{box-shadow:inset 0 0 0 1px var(--wine)}
.fchip:active{transform:scale(.97)}
.fchip[aria-pressed="true"]{background:var(--wine); color:var(--on-btn); box-shadow:none}
.fchip[aria-pressed="true"] small{color:#e9cf9b}
.fchip--soon{background:transparent; box-shadow:inset 0 0 0 1px var(--hair); color:var(--soft); border:1px dashed transparent}
.cat__count{font-size:.95rem; font-weight:600; color:var(--soft)}
.cat__empty{text-align:center; padding:40px 0; color:var(--soft)}
.cat__empty-t{font:700 1.4rem/1.3 var(--display); color:var(--ink); margin-bottom:6px}
.cat__more{display:flex; justify-content:center; margin-top:36px}
.more-btn small{font-weight:500; color:inherit; opacity:.75}
/* phones: back to the search, once it is far above */
.totop{position:fixed; z-index:29; left:22px; bottom:calc(86px + env(safe-area-inset-bottom)); width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); color:var(--gold-ink); box-shadow:inset 0 0 0 1px var(--gold-line), 0 12px 24px -12px rgba(27,22,19,.5);
  opacity:0; transform:translate3d(0,14px,0) scale(.85); pointer-events:none; transition:opacity .3s, transform .45s var(--e-out)}
.totop.is-on{opacity:1; transform:none; pointer-events:auto}
.totop svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round}
@media (min-width:900px){ .totop{left:auto; right:24px; bottom:96px} }

/* =====================================================================================================================
   FOOTER, the floating WhatsApp, reveals
   ===================================================================================================================== */
.foot{position:relative; background:var(--cream); color:var(--ink); padding:clamp(36px, 5vw, 60px) 0 22px; margin-top:clamp(24px, 5vw, 56px)}
.foot::before{content:""; position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold-2) 50%, var(--gold) 75%, transparent)}
.foot__in{display:grid; gap:30px; 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:12px}
@media (min-width:900px){ .foot__brand{justify-items:start} }
.foot__mark .wm{font-size:min(1.2rem, 5.2vw)}
.foot__tag{color:var(--soft); font:400 1rem/1.4 var(--display)}
.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)}
.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:600}
.foot__city{color:var(--soft); font-size:.92rem}
.foot__copy{grid-column:1 / -1; display:grid; gap:6px; border-top:1px solid var(--hair); padding-top:16px; font-size:.86rem; color:var(--soft)}
.foot__note{font-size:.8rem; line-height:1.55; max-width:56em}
@media (min-width:900px){ .foot__copy{grid-template-columns:auto 1fr; gap:24px; align-items:baseline} .foot__note{justify-self:end; text-align:end} }

.wa{position:fixed; z-index:30; left:22px; bottom:calc(16px + env(safe-area-inset-bottom)); width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; background:var(--ink); color:#f1dfb9; box-shadow:0 0 0 1.5px var(--gold-2), 0 14px 30px -12px rgba(35,26,27,.7);
  transition:opacity .4s, transform .6s var(--e-out), visibility 0s}
.wa:hover{transform:scale(1.07)}
.wa svg{width:27px; height:27px}
.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; chrome.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}

/* =====================================================================================================================
   THE 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)}
.crumbs li + li::before{content:"‹"; margin-inline-end:8px; color:var(--gold)}
.crumbs a{text-decoration:none; color:var(--soft)}
.crumbs a:hover{color:var(--gold-ink); text-decoration:underline}
.pdp__grid{display:grid; gap:20px; margin-top:12px}
@media (min-width:900px){ .pdp__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:64px; align-items:start; margin-top:22px} }

.gal{min-width:0; scroll-margin-top:calc(var(--hh) + 8px)}
@media (max-width:899px){ .gal{margin-inline:-16px} }
@media (min-width:900px){ .gal{position:sticky; top:calc(var(--hh) + 20px)} }
.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(--sand)}
@media (min-width:900px){ .gal__track{border-radius:var(--r-lg)} }
.gal__track::-webkit-scrollbar{display:none}
.gal__slide{position:relative; 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; overflow:hidden}
@media (max-width:899px){ .gal__slide{aspect-ratio:4/5; max-height:max(400px, calc(100svh - 300px))} }
.gal__slide img{width:100%; height:100%; object-fit:cover; object-position:50% 45%; animation:op-settle 1.8s var(--e-out) both}
.gal__hint{position:absolute; bottom:14px; right:14px; z-index:2; padding:5px 12px; border-radius:99px; background:rgba(35,26,27,.72); color:#f6ead6; 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 var(--hair);
  transition:transform .4s var(--e-out), opacity .3s, background-color .3s, color .3s}
.gal__arrow:hover{transform:scale(1.07); background:var(--ink); color:var(--on-btn); 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:var(--hair); transition:transform .5s var(--e-out), background-color .3s}
.dots button[aria-current="true"]::before{transform:scale(1.45); background:var(--gold-ink)}
@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(--sand);
  box-shadow:inset 0 0 0 1px var(--line); opacity:.65; transition:opacity .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(--gold); outline-offset:2px}

.buy{min-width:0}
.buy__head{display:grid; gap:6px; justify-items:start; animation:op-rise .9s var(--e-out) .1s both}
.pp__seal{display:inline-flex; align-items:stretch; border-radius:99px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(176,138,79,.6); margin-bottom:8px}
.pp__seal > span{padding:7px 12px 6px 14px; font:500 .78rem/1.3 var(--latin); letter-spacing:.3em; color:var(--gold-ink)}
.pp__seal b{padding:6px 16px 5px; background:var(--wine); color:#f6e8d0; font:500 1.12rem/1.3 var(--latin); letter-spacing:.04em}
.pp__insp{font-weight:600; color:var(--gold-ink); font-size:.95rem}
.pp__en{font:500 clamp(2.4rem, 10.5vw, 3.9rem)/1.02 var(--latin); color:var(--ink); overflow-wrap:break-word; max-width:100%}
.pp__en .en{direction:ltr; unicode-bidi:isolate}
.pp__he{font:400 1.25rem/1.4 var(--display); color:var(--soft)}
.pp__g{display:inline-flex; align-items:center; gap:4px; margin-top:6px; padding:6px 12px 6px 8px; border-radius:99px; background:var(--blush); color:var(--wine); text-decoration:none; font-weight:600; font-size:.92rem;
  transition:background-color .3s, color .3s}
.pp__g:hover{background:var(--wine); color:var(--on-btn)}
.pp__g svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.buy__plain{font:700 clamp(1.8rem, 7vw, 2.6rem)/1.2 var(--display); overflow-wrap:break-word}
.buy__desc{color:var(--soft); margin-top:8px; max-width:52ch}
.rule{display:flex; align-items:center; gap:12px; margin:22px 0 14px; color:var(--gold)}
.rule::before,.rule::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--hair))}
.rule::after{background:linear-gradient(270deg, transparent, var(--hair))}
.rule svg{width:12px; height:12px}
.buy__wa{width:100%; margin-top:10px; border-radius:14px}
.buy .acc{margin-top:24px; max-width:none; width:100%}
.buy .acc__btn{padding:15px 2px}
.more{margin-top:clamp(56px, 8vw, 104px)}
.more__all{text-align:center; margin-top:26px}

/* the accordions (product page) */
.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:600 1.04rem/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 var(--hair); 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(--ink); border-radius:2px; transition:transform .5s var(--e-out)}
.acc__btn i::after{transform:rotate(90deg)}
.acc__btn[aria-expanded="true"] i{background:var(--ink); box-shadow:none; transform:rotate(180deg)}
.acc__btn[aria-expanded="true"] i::before,.acc__btn[aria-expanded="true"] i::after{background:var(--on-btn)}
.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}

/* phone: the sticky buy bar */
.buybar{position:fixed; z-index:35; inset-inline:0; bottom:0; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(252,248,242,.98); color:var(--ink);
  box-shadow:0 -1px 0 var(--line), 0 -12px 30px -20px rgba(35,26,27,.55); transform:translate3d(0,calc(100% + 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__en{font-family:var(--latin); font-size:1rem!important; text-align:right}
.buybar__t b{font-weight:700; font-size:1.1rem}
.buybar .btn{min-height:46px; border-radius:12px; padding:0 22px}
.buybar__wa{flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--paper); color:var(--gold-ink); 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} }
@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}
}

/* pages of their own: the small drop over a title */
.pg__drop{display:inline-grid; place-items:center; width:30px; height:30px; margin-bottom:6px; color:var(--gold)}
.pg__drop svg{width:16px; height:16px}

/* While the visitor taps (chrome.js: html.is-busy for 1.6s), the endless loops rest; they rest off screen too (.is-off). */
.is-busy .wa::before,.is-busy .wa::after,.is-busy .gloss::before{animation-play-state:paused}
.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}
/* Reduce motion: the entrances still play (the owner's decision, motion: 'always'), the endless loops don't */
@media (prefers-reduced-motion:reduce){
  .gloss::before,.wa::before,.wa::after{animation:none}
}