/* =========================================================
   פופי · בגדי ילדים — "קופסת צבעים"
   DNA: מסכים נצמדים · ילדים מול הורים · דואוטון טורקיז/חרדל
   שוליים צבעוניים כמסגרת של ספר ילדים · קווים בלבד · כרטיסים חדים, כפתורי גלולה
   ========================================================= */
:root{
  --teal:#0E5E63; --deep:#0A4649; --teal-pale:#9FD3D0;
  --mustard:#F2B33D; --mustard-pale:#FBE2A8; --mustard-deep:#D99A22; --cream:#FDF3D8;

  --f-kid:"Varela Round","Rubik","Arial Rounded MT Bold","Arial Hebrew","DejaVu Sans",system-ui,sans-serif;
  --f-par:"Frank Ruhl Libre","David","Times New Roman","FreeSerif",serif;

  /* סולם 1.2 — שקט. הגודל מגיע מהלייאאוט */
  --b:17px;
  --t0:calc(var(--b) / 1.2);
  --t1:var(--b);
  --t2:calc(var(--b) * 1.2);
  --t3:calc(var(--b) * 1.44);
  --t4:calc(var(--b) * 1.728);
  --t5:calc(var(--b) * 2.0736);
  --t6:calc(var(--b) * 2.4883);

  /* שוליים (המסגרת) */
  --mt:64px; --ms:40px; --mb:40px;
  --pad:clamp(22px, 2.6vw, 46px);
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  --wave-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 10'%3E%3Cpath d='M0 5.2C12 3.1 22 6.6 35 5.1S58 3.4 70 5.3 94 6.8 105 4.9 128 3.6 140 5.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --wave-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 140'%3E%3Cpath d='M5.2 0C3.1 12 6.6 22 5.1 35S3.4 58 5.3 70 6.8 94 4.9 105 3.6 128 5.2 140' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (max-width:760px){
  :root{ --b:16px; --mt:54px; --ms:12px; --mb:70px; --pad:16px; }
}

/* ---------- טונים: כל מסך הוא אחד משני הצבעים כרקע, והשני כדיו ---------- */
.tone-m { --pg:var(--mustard);      --mg:var(--teal);    --ink:var(--deep);         --acc:var(--teal);    --acc-ink:var(--mustard-pale); --rule:rgba(10,70,73,.42); --line:rgba(10,70,73,.12); --stk:var(--mustard-pale); --tint:#F6C665; }
.tone-mp{ --pg:var(--mustard-pale); --mg:var(--teal);    --ink:var(--deep);         --acc:var(--teal);    --acc-ink:var(--mustard-pale); --rule:rgba(10,70,73,.36); --line:rgba(10,70,73,.10); --stk:var(--mustard);      --tint:#F8D78E; }
.tone-t { --pg:var(--teal);         --mg:var(--mustard); --ink:var(--mustard-pale); --acc:var(--mustard); --acc-ink:var(--deep);         --rule:rgba(251,226,168,.45); --line:rgba(251,226,168,.12); --stk:var(--teal-pale); --tint:#13696E; }

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
html.native-snap{ scroll-snap-type:y mandatory; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
  margin:0; background:var(--teal); color:var(--deep);
  font-family:var(--f-par); font-size:var(--t1); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,canvas,video{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; padding:0; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--f-kid); font-weight:400; line-height:1.15; margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
:focus-visible{ outline:3px solid currentColor; outline-offset:3px; }
[hidden]{ display:none !important; }
.ic{ width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
[data-ic]{ display:inline-flex; }
.skip{ position:fixed; inset-inline-start:12px; top:-60px; z-index:200; background:var(--mustard); color:var(--deep); padding:10px 18px; border-radius:999px; font-family:var(--f-kid); }
.skip:focus{ top:12px; }
.muted{ opacity:.8; font-size:var(--t0); }

/* ---------- גלולות (כפתורים) — הצד העגול של ה-DNA ---------- */
.pill{
  --pb:transparent; --pc:currentColor;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:44px; padding:0 1.15em; border-radius:999px;
  border:2px solid currentColor; background:var(--pb); color:var(--pc);
  font-family:var(--f-kid); font-size:var(--t0); line-height:1; white-space:nowrap; text-decoration:none;
  transition:background-color .2s, color .2s, transform .35s var(--spring), border-color .2s;
}
.pill:hover{ background:color-mix(in srgb, currentColor 12%, transparent); }
.pill:active{ transform:translateY(1px) scale(.98); }
.pill.primary{ background:var(--acc); color:var(--acc-ink); border-color:var(--acc); }
.pill.primary:hover{ background:var(--ink); border-color:var(--ink); color:var(--pg); }
.pill.ghost{ border-style:dashed; }
.pill.icon-only{ width:44px; padding:0; }
.pill[disabled]{ opacity:.6; cursor:not-allowed; transform:none; }
.magnetic{ will-change:transform; }

/* תגיות קול: ילדים = גלולה מלאה ועגולה; הורים = מסגרת מקווקוות וסריף */
.tag{ display:inline-flex; align-items:center; gap:.4em; width:max-content; border-radius:999px; padding:.22em .9em; font-size:var(--t0); line-height:1.5; }
.kid-tag{ font-family:var(--f-kid); background:var(--ink); color:var(--pg); }
.par-tag{ font-family:var(--f-par); font-weight:500; border:1.5px dashed currentColor; }

/* ---------- קווים מצוירים ביד ---------- */
.hrule{ display:block; height:10px; width:100%; background:var(--rule); -webkit-mask:var(--wave-h) repeat-x 0 50%/140px 10px; mask:var(--wave-h) repeat-x 0 50%/140px 10px; flex:none; }
.vrule{ display:block; width:10px; align-self:stretch; background:var(--rule); -webkit-mask:var(--wave-v) repeat-y 50% 0/10px 140px; mask:var(--wave-v) repeat-y 50% 0/10px 140px; flex:none; }
.notebook{
  --lh:34px;
  background-image:
    linear-gradient(to left, transparent 14px, var(--rule) 14px, var(--rule) 16px, transparent 16px),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1px), var(--line) calc(var(--lh) - 1px) var(--lh));
  background-repeat:no-repeat, repeat;
  padding-inline-start:34px !important;
}

/* ---------- כותרת עליונה (גרה בתוך השוליים העליונים) ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; height:var(--mt); z-index:60;
  display:flex; align-items:center; gap:24px; padding-inline:var(--ms);
  color:var(--hdr-ink, var(--mustard-pale)); transition:color .45s var(--ease);
  pointer-events:none;
}
.hdr > *{ pointer-events:auto; }
body[data-tone="t"] { --hdr-ink:var(--deep); --hdr-bg:var(--mustard); }
body[data-tone="m"] { --hdr-ink:var(--mustard-pale); --hdr-bg:var(--teal); }
.logo{ display:flex; align-items:baseline; gap:10px; text-decoration:none; font-family:var(--f-kid); }
.logo-mark{ display:grid; grid-template-columns:repeat(2,9px); gap:3px; align-self:center; }
.logo-mark i{ width:9px; height:9px; background:currentColor; }
.logo-mark i:nth-child(2), .logo-mark i:nth-child(3){ border-radius:50%; }
.logo-word{ font-size:var(--t4); line-height:1; }
.logo-sub{ font-family:var(--f-par); font-size:var(--t0); opacity:.85; }
.hdr-nav{ display:flex; gap:4px; margin-inline-start:auto; font-family:var(--f-kid); font-size:var(--t0); }
.hdr-nav a{ text-decoration:none; padding:.45em .85em; border-radius:999px; border:1.5px solid transparent; transition:border-color .2s; }
.hdr-nav a:hover, .hdr-nav a[aria-current="true"]{ border-color:currentColor; }
.hdr-end{ display:flex; gap:8px; align-items:center; }
.hdr .pill{ min-height:38px; transition:transform .35s var(--spring), background-color .2s; }
.bbar .pill{ transition:transform .35s var(--spring); }
.hdr .pill.icon-only{ width:38px; }
.cart-count{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--hdr-ink); color:var(--hdr-bg); font-weight:400; font-size:12px; transition:background-color .45s, color .45s; }
.cart-count.bump{ animation:bump .5s var(--spring); }
@keyframes bump{ 40%{ transform:scale(1.35); } }
.hdr-menu{ display:none; }
.hdr-doodle{ display:none; }
.hdr-doodle svg{ width:100%; height:100%; overflow:visible; }
.hdr-doodle svg *{ fill:none; stroke:var(--deep); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
body[data-tone="m"] .hdr-doodle svg .d-fill{ fill:var(--mustard); }
body[data-tone="t"] .hdr-doodle svg .d-fill{ fill:var(--teal-pale); }
.hdr-doodle.pop{ animation:wiggle .9s var(--spring) both; }

/* נקודות התקדמות בצד */
.dots{
  position:fixed; inset-inline-end:0; top:50%; translate:0 -50%; z-index:55; width:var(--ms);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--hdr-ink); transition:color .45s var(--ease);
}
.dots button{ position:relative; width:11px; height:11px; border-radius:999px; border:2px solid currentColor; transition:height .4s var(--ease), background-color .3s; }
.dots button[aria-current="true"]{ height:32px; background:currentColor; }
.dots button span{
  position:absolute; inset-inline-end:calc(100% + 10px); top:50%; translate:0 -50%;
  white-space:nowrap; font-family:var(--f-kid); font-size:13px; padding:4px 10px; border-radius:999px;
  background:var(--hdr-ink); color:var(--hdr-bg); opacity:0; pointer-events:none; transition:opacity .2s;
}
.dots button:hover span, .dots button:focus-visible span{ opacity:1; }

/* ---------- מסך ---------- */
.screen{
  position:relative; height:100vh; height:100svh; min-height:520px;
  padding:var(--mt) var(--ms) var(--mb);
  background:var(--mg); color:var(--ink);
  scroll-snap-align:start; scroll-snap-stop:always;
}
.page{
  position:relative; height:100%; background:var(--pg); color:var(--ink);
  padding:var(--pad); overflow:hidden;
}
/* דודל — מדבקה מצוירת בפינה, משתנה לכל מסך */
.doodle{
  position:absolute; z-index:3; width:clamp(64px, 6.2vw, 92px); aspect-ratio:1;
  inset-inline-start:calc(var(--ms) - 30px); bottom:calc(var(--mb) - 30px);
  rotate:-9deg; pointer-events:none;
}
.doodle svg{ width:100%; height:100%; overflow:visible; }
.doodle svg *{ fill:none; stroke:var(--deep); stroke-width:4.2; stroke-linecap:round; stroke-linejoin:round; }
.doodle svg .d-fill{ fill:var(--stk); }
.screen.is-on .doodle{ animation:wiggle 1.1s var(--spring) both; }
@keyframes wiggle{ 0%{ rotate:-30deg; scale:.6; opacity:0 } 60%{ rotate:2deg; scale:1.05; opacity:1 } 100%{ rotate:-9deg; scale:1 } }
.folio{
  position:absolute; bottom:0; inset-inline:0; height:var(--mb); display:grid; place-items:center;
  font-family:var(--f-kid); font-size:13px; color:color-mix(in srgb,var(--pg) 80%,#fff); pointer-events:none;
}

/* קולות */
.voice{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.kid h1, .kid h2{ font-size:var(--t6); }
.kidline{ font-family:var(--f-kid); font-size:var(--t2); line-height:1.45; max-width:30ch; }
.parline{ font-family:var(--f-par); font-size:var(--t2); line-height:1.6; max-width:44ch; }
.parline.small{ font-size:var(--t1); }
.par-h{ font-family:var(--f-par); font-weight:700; font-size:var(--t3); }
.ulink{ display:inline-flex; align-items:center; gap:.4em; width:max-content; font-family:var(--f-kid); text-decoration:none; padding-bottom:4px;
  background:linear-gradient(currentColor,currentColor) no-repeat 100% 100%/100% 2px; transition:background-size .35s var(--ease); }
.ulink:hover{ background-size:0 2px; }
.actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- 1 · חדש לסתיו ---------- */
.s-new{ display:flex; flex-direction:column; gap:clamp(12px, 2vh, 22px); }
.spread{ display:grid; grid-template-columns:1.1fr auto 1fr; gap:clamp(18px, 3vw, 48px); align-items:start; }
.spread .parent{ padding-top:4px; }
.rail-wrap{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; }
.rail{
  flex:1; min-height:0; container-type:size;
  display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ scroll-snap-align:start; flex:none; height:100%; }
.rail > * + *{ border-inline-start:2px dashed var(--rule); }
.rail .card{ width:calc((100cqh - 112px) * .8); padding-inline:18px; }
.look{ margin:0; width:calc(100cqh * 1.18); position:relative; padding-inline-end:18px; display:flex; flex-direction:column; gap:10px; }
.look .ph{ flex:1; }
.look figcaption{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-family:var(--f-par); min-height:46px; }
.look .sticker{ position:absolute; top:14px; inset-inline-start:14px; rotate:-4deg; font-family:var(--f-kid); background:var(--mustard-pale); color:var(--deep); padding:.35em .9em; border-radius:999px; border:2px solid var(--deep); font-size:var(--t0); }
.rail-nav{ position:absolute; top:calc(50% - 56px); inset-inline:0; display:flex; justify-content:space-between; pointer-events:none; }
.rail-nav .pill{ pointer-events:auto; background:var(--pg); }
.rail-nav .pill[disabled]{ opacity:0; }

/* ---------- כרטיס מוצר — חד ---------- */
.card{ display:flex; flex-direction:column; gap:10px; text-align:start; min-width:0; color:inherit; }
.card .ph{ position:relative; flex:1; min-height:0; overflow:hidden; background:var(--tint); border-radius:0; }
.ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.card:hover .ph img, .card:focus-visible .ph img{ --hz:1.05; }
.ph img, .th img, .gslot img{ transform:scale(calc(var(--z,1) * var(--hz,1))); transform-origin:var(--o,50% 50%); }
/* חזית → גב במעבר עכבר (רק במכשירים עם ריחוף) */
.card .ph .ph-back{ position:absolute; inset:0; opacity:0; transition:opacity .45s var(--ease), transform 1.1s var(--ease); pointer-events:none; }
@media (hover:hover) and (pointer:fine){
  .card:hover .ph .ph-back, .card:focus-visible .ph .ph-back{ opacity:1; }
}
.card .badge{ position:absolute; top:10px; inset-inline-start:10px; font-family:var(--f-kid); font-size:12px; padding:.25em .8em; border-radius:999px; background:var(--deep); color:var(--mustard-pale); }
.card .badge.sale{ background:var(--mustard-pale); color:var(--deep); border:1.5px solid var(--deep); }
.card .info{ display:grid; gap:2px; min-height:92px; align-content:start; }
.card .nm{ font-family:var(--f-kid); font-size:var(--t1); line-height:1.3; }
.card .ln{ font-size:var(--t0); line-height:1.45; opacity:.9; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .ln.k{ font-family:var(--f-kid); }
.card .ln.p{ font-family:var(--f-par); }
.price{ font-family:var(--f-kid); font-variant-numeric:tabular-nums; display:flex; gap:.5em; align-items:baseline; }
.price s{ opacity:.7; font-size:.85em; }
.card .row{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.card .dotsz{ font-family:var(--f-par); font-size:12px; opacity:.85; }
.card .nm{ background:linear-gradient(currentColor,currentColor) no-repeat 100% 100%/0 1.5px; transition:background-size .4s var(--ease); width:fit-content; }
.card:hover .nm{ background-size:100% 1.5px; }

/* ---------- 2 · מחשבון מידה ---------- */
.s-size{ display:grid; grid-template-columns:.85fr auto 1.15fr; gap:clamp(18px, 3vw, 48px); }
.size-kid{ min-height:0; }
.growth{ flex:1; min-height:0; position:relative; display:flex; align-items:flex-end; }
.growth svg{ height:100%; width:auto; max-width:100%; direction:ltr; }
.readout{ position:absolute; top:4%; inset-inline-end:0; display:flex; align-items:baseline; gap:6px; font-family:var(--f-kid); }
.readout b{ font-weight:400; font-size:var(--t6); color:var(--mustard); font-variant-numeric:tabular-nums; }
.size-parent{ gap:14px; min-height:0; }
.seg{ display:inline-flex; width:max-content; max-width:100%; border:2px solid currentColor; border-radius:999px; padding:3px; gap:2px; font-family:var(--f-kid); font-size:var(--t0); }
.seg button{ padding:.55em 1.1em; border-radius:999px; min-height:36px; transition:background-color .25s, color .25s; }
.seg button[aria-selected="true"], .seg button[aria-checked="true"]{ background:var(--ink); color:var(--pg); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; align-content:flex-start; }
fieldset.field{ border:0; padding:0; margin:0; min-width:0; }
fieldset.field legend{ padding:0; margin-bottom:6px; }
.chip{ display:inline-flex; align-items:center; justify-content:center; gap:.45em; min-height:38px; padding:0 .95em; border-radius:999px; border:1.5px solid currentColor; font-family:var(--f-kid); font-size:var(--t0); transition:background-color .2s, color .2s; }
.chip:hover{ background:color-mix(in srgb, currentColor 14%, transparent); }
.chip[aria-checked="true"], .chip[aria-pressed="true"]{ background:var(--acc); border-color:var(--acc); color:var(--acc-ink); }
.chips.sm .chip{ min-height:34px; padding:0 .8em; }
.calc-body{ min-height:92px; }
.hw{ display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:end; }
.field{ display:grid; gap:6px; font-family:var(--f-par); font-weight:500; }
.field output{ font-family:var(--f-kid); font-weight:400; }
input[type=range]{ width:100%; accent-color:var(--mustard); height:30px; }
.num{ display:flex; align-items:center; gap:8px; }
.num input, .field input:not([type=range]), .field textarea, .field select{
  width:100%; min-height:44px; padding:.5em .9em; border:2px solid currentColor; border-radius:0; background:transparent;
}
.field textarea{ resize:none; min-height:0; line-height:1.5; font-family:var(--f-kid); }
::placeholder{ color:inherit; opacity:.55; }
.result{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:"lab lab" "size range" "grow grow"; align-items:baseline; column-gap:18px; row-gap:4px;
  border-block:2px dashed var(--rule); padding-block:12px; }
.r-lab{ grid-area:lab; font-size:var(--t0); }
.r-size{ grid-area:size; font-family:var(--f-kid); font-weight:400; font-size:var(--t6); line-height:1; color:var(--mustard); }
.r-range{ grid-area:range; font-family:var(--f-kid); }
.grow{ grid-area:grow; font-size:var(--t1); line-height:1.5; }
.grow b{ font-family:var(--f-kid); font-weight:400; color:var(--mustard); }

/* ---------- 3 · חדר משחקים ---------- */
.s-play{ padding:0; }
.play-stage{ position:absolute; inset:0; touch-action:pan-y; }
.play-stage canvas{ width:100% !important; height:100% !important; }
.play-stage.grab canvas{ cursor:grab; }
.play-stage.grabbing canvas{ cursor:grabbing; }
.play-fallback{ position:absolute; inset:auto 0 22% 0; display:flex; justify-content:center; gap:14px; }
.play-fallback i{ font-style:normal; width:clamp(60px, 9vw, 110px); aspect-ratio:1; display:grid; place-items:center; font-family:var(--f-kid); font-size:clamp(34px, 5vw, 64px);
  background:var(--teal); color:var(--mustard); border:4px solid var(--deep); border-radius:18%; rotate:-4deg; }
.play-fallback i:nth-child(2n){ background:var(--mustard); color:var(--deep); rotate:5deg; }
.gl-on .play-fallback{ display:none; }
.play-kid{ position:absolute; top:var(--pad); inset-inline-start:var(--pad); pointer-events:none; }
.play-parent{ position:absolute; top:var(--pad); inset-inline-end:var(--pad); max-width:380px; align-items:flex-start; padding-inline-start:22px; border-inline-start:2px dashed var(--rule); pointer-events:none; }
.play-parent .actions{ pointer-events:auto; }
.play-hint{ position:absolute; bottom:var(--pad); inset-inline-start:50%; translate:50% 0; white-space:nowrap; font-family:var(--f-kid); font-size:var(--t0); opacity:.85; pointer-events:none; }

/* ---------- 4 · קטלוג ---------- */
.s-cat{ display:flex; flex-direction:column; gap:12px; }
.cat-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cat-head h2{ font-size:var(--t5); }
.cat-head h2 small{ font-family:var(--f-par); font-size:var(--t0); opacity:.85; margin-inline-start:8px; }
.filters{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cat-chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-block:2px; }
.cat-chips::-webkit-scrollbar{ display:none; }
.cat-chips .chip{ flex:none; }
.sel-row{ display:flex; gap:8px; flex:none; }
.pill-select{ position:relative; display:inline-flex; align-items:center; gap:6px; min-height:38px; border:1.5px dashed currentColor; border-radius:999px; padding-inline:.9em .5em; font-family:var(--f-kid); font-size:var(--t0); }
.pill-select select{ appearance:none; border:0; background:transparent; padding:.2em .2em .2em 1.2em; font-family:var(--f-kid); cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:left 4px center, left 9px center; background-size:5px 5px; background-repeat:no-repeat; }
.pill-select select option{ color:#0A4649; background:#FBE2A8; }
.grid{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(var(--cols,4), minmax(0,1fr)); grid-template-rows:repeat(var(--rows,2), minmax(0,1fr)); border-block-start:2px dashed var(--rule); }
.cell{ padding:14px 16px; border-block-end:2px dashed var(--rule); border-inline-start:2px dashed var(--rule); min-height:0; display:flex; }
.cell.c0{ border-inline-start:0; padding-inline-start:0; }
.cell.cl{ padding-inline-end:0; }
.cell .card{ width:100%; height:100%; }
.cell .info{ min-height:0; }
.grid.flip .cell{ animation:pageIn .5s var(--ease) both; animation-delay:calc(var(--i) * 40ms); }
@keyframes pageIn{ from{ opacity:0; translate:0 10px; } }
.grid .empty{ grid-column:1/-1; grid-row:1/-1; display:grid; place-content:center; text-align:center; gap:12px; font-family:var(--f-kid); font-size:var(--t2); }
.pager{ display:flex; justify-content:center; align-items:center; gap:14px; font-family:var(--f-kid); font-size:var(--t0); }
.pager .pill{ min-height:38px; width:38px; }
.eyes-parent .card .nm{ font-family:var(--f-par); font-weight:700; }

/* ---------- 5 · מתנה ללידה ---------- */
.s-gift{ display:grid; grid-template-columns:.9fr auto 1.1fr; gap:clamp(18px, 3vw, 44px); }
.gift-kid{ min-height:0; }
.gwrap{ position:relative; flex:1; min-height:0; margin-block-start:10px; margin-inline-end:7%; max-height:440px; }
.gbox{
  --w:var(--teal);
  position:absolute; inset:0; overflow:hidden;
  background:var(--w); border:4px solid var(--deep); padding:clamp(14px, 2vw, 26px);
  display:flex; transition:background-color .4s;
}
.gbox[data-wrap="mustard"]{ --w:var(--mustard-deep); }
.gbox[data-wrap="notebook"]{ --w:var(--cream); background-image:repeating-linear-gradient(to bottom, transparent 0 21px, rgba(14,94,99,.35) 21px 23px); }
.gribbon{ position:absolute; z-index:2; top:15%; inset-inline-end:-14%; width:52%; height:24px; rotate:-45deg; background:var(--mustard-pale); border-block:3px solid var(--deep);
  background-image:repeating-linear-gradient(90deg, transparent 0 8px, rgba(10,70,73,.35) 8px 10px); background-size:100% 3px; background-repeat:no-repeat; background-position:0 50%; }
.gbow{ position:absolute; z-index:5; width:clamp(64px, 7vw, 96px); top:-26px; inset-inline-end:-24px; rotate:-20deg; }
.gslots{ position:relative; z-index:1; flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1vw,14px); background:var(--cream); padding:clamp(8px,1vw,14px); border:3px solid var(--deep); }
.gslot{ position:relative; display:grid; place-items:center; border:2px dashed rgba(10,70,73,.4); min-height:0; overflow:hidden; font-family:var(--f-kid); color:rgba(10,70,73,.6); text-align:center; font-size:var(--t0); }
.gslot img{ width:100%; height:100%; object-fit:cover; }
.gslot.fill{ border-style:solid; border-color:var(--deep); animation:drop .6s var(--spring) both; }
@keyframes drop{ from{ translate:0 -30px; opacity:0; rotate:-6deg; } }
.gcard{ position:absolute; z-index:4; inset-inline-start:-4%; bottom:-7%; width:min(62%, 270px); rotate:-5deg; background:var(--mustard-pale); color:var(--deep); border:3px solid var(--deep); padding:12px 16px 16px;
  background-image:repeating-linear-gradient(to bottom, transparent 0 25px, rgba(10,70,73,.16) 25px 26px); }
.gcard-to{ font-family:var(--f-par); font-size:12px; opacity:.85; }
.gcard p{ font-family:var(--f-kid); font-size:var(--t1); line-height:1.6; min-height:3.2em; overflow-wrap:anywhere; }
.gift-form{ gap:12px; min-height:0; }
.gift-form fieldset{ border:0; margin:0; padding:0; min-width:0; display:grid; gap:8px; }
.gift-form legend{ font-family:var(--f-par); font-weight:700; padding:0; margin-bottom:6px; display:flex; gap:10px; align-items:baseline; }
.gift-form legend b{ font-family:var(--f-kid); font-weight:400; font-size:var(--t0); border:1.5px solid currentColor; border-radius:999px; padding:0 .7em; }
.gift-items{ display:grid; grid-template-columns:1fr 1fr; column-gap:18px; }
.gi{ display:flex; align-items:center; gap:10px; min-height:38px; border-block-end:1.5px dashed var(--rule); padding-block:3px; text-align:start; font-family:var(--f-kid); font-size:var(--t0); }
.gi .box{ width:20px; height:20px; border:2px solid currentColor; border-radius:999px; display:grid; place-items:center; flex:none; }
.gi .box .ic{ width:14px; height:14px; opacity:0; stroke-width:3; }
.gi[aria-checked="true"] .box{ background:var(--acc); border-color:var(--acc); color:var(--acc-ink); }
.gi[aria-checked="true"] .box .ic{ opacity:1; }
.gi .gp{ margin-inline-start:auto; font-variant-numeric:tabular-nums; }
.gi[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }
.gift-row{ display:grid; grid-template-columns:auto 1fr; gap:22px; }
.sw{ display:inline-block; width:14px; height:14px; border-radius:999px; border:1.5px solid var(--deep); }
.gift-total{ display:flex; align-items:center; justify-content:space-between; gap:14px; border-block-start:2px dashed var(--rule); padding-top:12px; margin-top:auto; }
.gift-total > div{ display:grid; }
.gift-total span{ font-size:var(--t0); }
.gift-total b{ font-family:var(--f-kid); font-weight:400; font-size:var(--t5); line-height:1.1; font-variant-numeric:tabular-nums; }
.gift-total small{ font-size:12px; }

/* ---------- 6 · מדפים ---------- */
.s-shelves{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(20px, 4vw, 64px); }
.dress{ margin:0; position:relative; min-height:0; margin-block:calc(var(--pad) * -1); margin-inline-start:calc(var(--pad) * -1); }
.dress img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.dress .sticker{ position:absolute; bottom:8%; inset-inline-start:8%; display:grid; gap:6px; rotate:-4deg; background:var(--mustard-pale); color:var(--deep); padding:12px 16px; border:3px solid var(--deep); font-family:var(--f-kid); font-size:var(--t2); }
.dress .sticker .kid-tag{ background:var(--deep); color:var(--mustard-pale); }
.shelves-list{ justify-content:center; gap:16px; }
.shelves-list h2{ font-size:var(--t6); }
.ruled-list{ list-style:none; margin:0; padding:0; border-block-start:2px dashed var(--rule); }
.ruled-list li{ border-block-end:2px dashed var(--rule); }
.ruled-list.plain li{ padding-block:10px; }
.shelf{ width:100%; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:16px; padding-block:clamp(8px, 1.6vh, 14px); text-align:start; }
.shelf .sn{ font-family:var(--f-kid); font-size:var(--t4); line-height:1.2; }
.shelf .ss{ font-family:var(--f-par); font-size:var(--t0); }
.shelf .sc{ font-family:var(--f-kid); font-size:var(--t0); border:1.5px solid currentColor; border-radius:999px; padding:.15em .75em; }
.shelf .ic{ transition:translate .35s var(--ease); }
.shelf:hover .ic{ translate:-6px 0; }
.shelf:hover .sn{ color:var(--mustard); }

/* ---------- 7 · ביקור + פוטר ---------- */
.s-visit{ display:grid; grid-template-columns:1fr auto 1fr; grid-template-rows:1fr auto; column-gap:clamp(18px, 3vw, 48px); row-gap:14px; }
.s-visit .kid{ justify-content:center; }
.shop{ width:min(340px, 80%); height:auto; margin-bottom:10px; }
.visit-par{ justify-content:center; gap:16px; }
.facts{ margin:0; display:grid; }
.facts div{ display:grid; grid-template-columns:7em 1fr; gap:10px; padding-block:6px; }
.facts dt{ font-family:var(--f-kid); font-size:var(--t0); padding-top:3px; }
.facts dd{ margin:0; font-size:var(--t2); line-height:1.5; }
.club{ margin-top:14px; display:grid; gap:8px; max-width:440px; font-family:var(--f-par); font-weight:500; }
.club-row{ display:flex; gap:8px; }
.club input{ flex:1; min-width:0; min-height:44px; border:2px solid currentColor; background:transparent; padding:.5em .9em; border-radius:999px; text-align:end; }
.club-msg{ min-height:1.4em; font-family:var(--f-kid); }
.foot{ grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 24px; border-block-start:2px dashed var(--rule); padding-top:12px; font-size:var(--t0); }
.foot nav{ display:flex; flex-wrap:wrap; gap:4px 18px; font-family:var(--f-kid); }
.foot nav button, .foot nav a{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; min-height:32px; }
.foot .sep{ margin-inline:6px; }

/* ---------- סרגל תחתון (מובייל) ---------- */
.bbar{ display:none; }

/* ---------- סל, דיאלוגים ---------- */
.scrim{ position:fixed; inset:0; z-index:80; background:rgba(10,70,73,.45); opacity:0; transition:opacity .35s; }
.scrim.on{ opacity:1; }
.drawer{
  --pg:var(--mustard-pale); --ink:var(--deep); --acc:var(--teal); --acc-ink:var(--mustard-pale); --rule:rgba(10,70,73,.36); --line:rgba(10,70,73,.1);
  position:fixed; z-index:90; inset-block:0; inset-inline-end:0; width:min(470px, 100vw);
  background:var(--teal); padding:16px; padding-inline-end:16px; padding-inline-start:16px;
  transform:translateX(-105%); transition:transform .55s var(--ease); visibility:hidden;
}
.drawer.on{ transform:none; visibility:visible; }
.drawer-in{ height:100%; background:var(--pg); color:var(--ink); display:flex; flex-direction:column; }
.drawer-h{ display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-block-end:2px dashed var(--rule); }
.drawer-h h2{ font-size:var(--t4); }
.drawer-b{ flex:1; overflow:auto; padding:16px 20px 20px; display:flex; flex-direction:column; gap:14px; overscroll-behavior:contain; }
.ci{ display:grid; grid-template-columns:76px 1fr auto; gap:12px; padding-block:10px; border-block-end:1.5px dashed var(--rule); align-items:start; }
.ci .ph{ width:76px; aspect-ratio:4/5; overflow:hidden; background:var(--tint, #F8D78E); }
.ci .nm{ font-family:var(--f-kid); }
.ci .meta{ font-size:var(--t0); }
.qty{ display:inline-flex; align-items:center; border:1.5px solid currentColor; border-radius:999px; margin-top:6px; }
.qty button{ width:34px; height:34px; display:grid; place-items:center; }
.qty span{ min-width:22px; text-align:center; font-family:var(--f-kid); }
.ci .rm{ font-size:12px; text-decoration:underline; margin-top:6px; }
.ship-meter{ font-family:var(--f-kid); font-size:var(--t0); display:grid; gap:6px; }
.ship-meter .bar{ height:8px; border:1.5px solid currentColor; border-radius:999px; overflow:hidden; }
.ship-meter .bar i{ display:block; height:100%; background:var(--teal); border-radius:999px; transition:width .5s var(--ease); }
.sum{ display:grid; gap:4px; border-block-start:2px dashed var(--rule); padding-top:12px; margin-top:auto; }
.sum div{ display:flex; justify-content:space-between; font-variant-numeric:tabular-nums; }
.sum .tot{ font-family:var(--f-kid); font-size:var(--t3); }
.drawer .pill.primary{ width:100%; min-height:52px; font-size:var(--t1); }
.empty-cart{ display:grid; gap:14px; justify-items:start; padding-block:20px; font-family:var(--f-kid); font-size:var(--t2); }
.form{ display:grid; gap:12px; }
.form .two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form .err{ color:#8a1c1c; font-size:12px; font-family:var(--f-kid); min-height:0; }
.field input[aria-invalid="true"]{ border-color:#8a1c1c; border-style:dashed; }
.done{ display:grid; gap:14px; justify-items:start; }
.done .big{ font-family:var(--f-kid); font-size:var(--t5); line-height:1.2; }

dialog.sheet{ border:0; padding:0; background:transparent; max-width:none; max-height:none; color:var(--deep); }
dialog.sheet::backdrop{ background:rgba(10,70,73,.5); }
dialog.sheet[open]{ animation:sheetIn .5s var(--ease); }
@keyframes sheetIn{ from{ opacity:0; translate:0 24px; } }
.sheet-in{ --pg:var(--mustard-pale); --ink:var(--deep); --acc:var(--teal); --acc-ink:var(--mustard-pale); --rule:rgba(10,70,73,.36); --line:rgba(10,70,73,.1); --tint:#F8D78E;
  position:relative; background:var(--pg); color:var(--ink); outline:clamp(12px, 2vw, 22px) solid var(--teal); }
dialog.info{ width:min(640px, calc(100vw - 48px)); margin:auto; }
dialog.info .sheet-in{ padding:clamp(22px, 4vw, 40px); display:grid; gap:14px; max-height:calc(100svh - 80px); overflow:auto; }
dialog.info h2{ font-size:var(--t5); padding-inline-end:52px; }
.x{ position:absolute; top:14px; inset-inline-end:14px; z-index:3; background:var(--pg); }
.tbl{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.tbl th, .tbl td{ text-align:start; padding:8px 10px; border-block-end:1.5px dashed var(--rule); }
.tbl th{ font-family:var(--f-kid); font-weight:400; font-size:var(--t0); }
.tbl tr.hl td{ background:var(--mustard); }

dialog.pd{ width:min(1100px, calc(100vw - 64px)); margin:auto; }
.pd .sheet-in{ display:grid; grid-template-columns:1.05fr 1fr; max-height:calc(100svh - 72px); overflow:auto; }
.pd-media{ position:relative; background:var(--tint); min-height:min(76svh, 640px); }
.pd-media .ph{ position:absolute; inset:0; overflow:hidden; }
/* חזית / גב בעמוד המוצר */
.pd-media .pd-back{ opacity:0; transition:opacity .45s var(--ease); }
.pd-media[data-side="back"] .pd-back{ opacity:1; }
.pd-sides{ position:absolute; z-index:2; bottom:16px; inset-inline-start:16px; display:flex; gap:12px; }
.pd-side{ display:grid; gap:6px; justify-items:center; padding:6px 6px 8px; background:var(--mustard-pale); color:var(--deep); border:2px dashed var(--deep); rotate:-3deg; transition:rotate .35s var(--spring), background-color .2s, border-color .2s; }
.pd-side + .pd-side{ rotate:3deg; }
.pd-side:hover{ rotate:0deg; }
.pd-side[aria-pressed="true"]{ background:var(--teal); color:var(--mustard-pale); border-style:solid; border-color:var(--deep); }
.pd-side:focus-visible{ outline:3px solid var(--mustard); outline-offset:2px; }
.pd-th{ display:block; width:58px; aspect-ratio:4/5; overflow:hidden; background:var(--tint); border:2px solid var(--deep); }
.pd-th img{ width:100%; height:100%; object-fit:cover; transform:scale(var(--z,1)); transform-origin:var(--o,50% 50%); }
.pd-lab{ font-family:var(--f-kid); font-size:12px; line-height:1; }
.pd-info{ padding:clamp(22px, 3.5vw, 44px); display:flex; flex-direction:column; gap:14px; }
.pd-info h2{ font-size:var(--t5); padding-inline-end:48px; }
.pd-cat{ font-family:var(--f-kid); font-size:var(--t0); }
.pd-price{ font-size:var(--t4); }
.duo{ display:grid; grid-template-columns:1fr 1fr; border-block:2px dashed var(--rule); }
.duo > div{ padding:12px 0; display:grid; gap:6px; align-content:start; }
.duo > div + div{ border-inline-start:2px dashed var(--rule); padding-inline-start:16px; }
.duo > div:first-child{ padding-inline-end:16px; }
.duo .kid p{ font-family:var(--f-kid); }
.specs{ margin:0; display:grid; font-size:var(--t0); }
.specs div{ display:grid; grid-template-columns:6em 1fr; padding-block:5px; border-block-end:1.5px dashed var(--line); }
.specs dt{ font-family:var(--f-kid); }
.specs dd{ margin:0; }
.sizes-lab{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--f-par); font-weight:700; }
.sizes-lab button{ font-family:var(--f-kid); font-weight:400; font-size:var(--t0); text-decoration:underline; text-underline-offset:4px; }
.sz .chip{ position:relative; }
.sz .chip[disabled]{ opacity:.4; text-decoration:line-through; cursor:not-allowed; }
.low{ font-family:var(--f-kid); font-size:12px; min-height:1.2em; }
.pd-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.pd-actions .primary{ flex:1; min-height:52px; font-size:var(--t1); }
.pd-actions .pill{ min-height:52px; }

dialog.menu{ width:100vw; height:100svh; margin:0; }
dialog.menu .sheet-in{ height:100%; padding:72px 24px 24px; display:flex; flex-direction:column; gap:20px; outline-offset:-12px; overflow:auto; }
.menu-list .shelf .sn{ font-size:var(--t4); }

.toast{ position:fixed; z-index:120; bottom:calc(var(--mb) + 12px); left:50%; translate:-50% 20px; opacity:0; pointer-events:none;
  background:var(--deep); color:var(--mustard-pale); font-family:var(--f-kid); padding:12px 22px; border-radius:999px; transition:opacity .3s, translate .4s var(--ease); max-width:calc(100vw - 32px); text-align:center; }
.toast.on{ opacity:1; translate:-50% 0; }

/* ---------- reveal (רגוע) ---------- */
.js [data-rv]{ opacity:0; translate:0 14px; transition:opacity .7s var(--ease), translate .8s var(--ease); }
.js .is-on [data-rv], .js .rv-done [data-rv]{ opacity:1; translate:0 0; }
.js .is-on [data-rv]:nth-child(2){ transition-delay:.06s; }
.js .is-on [data-rv]:nth-child(3){ transition-delay:.12s; }
.js .is-on [data-rv]:nth-child(4){ transition-delay:.18s; }

/* =================== רספונסיבי =================== */
@media (max-width:1180px){
  .hdr-nav{ display:none; }
  .hdr-menu{ display:inline-flex; }
  .hdr-end{ margin-inline-start:auto; }
}
@media (max-height:760px) and (min-width:761px){
  :root{ --b:15.5px; --mt:58px; --mb:34px; }
  .kidline, .parline{ font-size:var(--t1); }
}
@media (max-width:1000px) and (min-width:761px){
  .s-size, .s-gift{ grid-template-columns:1fr auto 1.25fr; }
}
@media (max-width:760px){
  .hide-sm{ display:none; }
  .hdr{ gap:10px; }
  .logo-sub{ display:none; }
  .logo-word{ font-size:var(--t3); }
  .hdr-wa{ display:none; }
  .dots{ gap:7px; }
  .dots button{ width:7px; height:7px; border-width:1.5px; }
  .dots button[aria-current="true"]{ height:20px; }
  .dots button span{ display:none; }
  .folio{ display:none; }
  .doodle{ display:none; }
  .hdr-doodle{ display:block; position:absolute; top:7px; left:50%; width:40px; height:40px; margin-left:-20px; rotate:-8deg; pointer-events:none; }
  .kid h1, .kid h2{ font-size:var(--t5); }
  .kidline{ font-size:var(--t1); }
  .parline{ font-size:var(--t0); line-height:1.55; }
  .notebook{ --lh:30px; padding-inline-start:26px !important; background-image:linear-gradient(to left, transparent 10px, var(--rule) 10px, var(--rule) 12px, transparent 12px), repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1px), var(--line) calc(var(--lh) - 1px) var(--lh)); }
  .vrule{ width:100%; height:10px; align-self:auto; -webkit-mask:var(--wave-h) repeat-x 0 50%/140px 10px; mask:var(--wave-h) repeat-x 0 50%/140px 10px; }
  .tag{ font-size:12px; }

  .bbar{ position:fixed; z-index:58; bottom:0; inset-inline:0; height:var(--mb); display:flex; align-items:center; gap:8px; padding:0 12px calc(env(safe-area-inset-bottom) * .5);
    color:var(--hdr-ink); transition:color .45s; }
  .bbar .pill{ min-height:46px; flex:1; font-size:15px; }
  .bbar .pill.primary{ flex:1.6; background:var(--hdr-ink); border-color:var(--hdr-ink); color:var(--hdr-bg); }
  .bbar .pill.icon-only{ flex:none; width:46px; }

  /* 1 */
  .spread{ grid-template-columns:1fr; gap:10px; }
  .spread .vrule{ display:none; }
  .spread .parent{ padding-top:0; gap:8px; }
  .spread .parent .ulink{ display:none; }
  .s-new .kidline{ font-size:var(--t0); max-width:none; }
  .s-new .kid{ gap:6px; }
  .s-new .kid h1{ font-size:var(--t4); }
  .s-new{ gap:10px; }
  .rail .card{ width:58vw; padding-inline:12px; }
  .look{ width:72vw; order:3; padding-inline:12px; border-inline-start:2px dashed var(--rule); }
  .rail > .card:first-of-type{ border-inline-start:0; padding-inline-start:0; }
  .look figcaption .pill{ display:none; }
  .rail-nav{ display:none; }

  /* 2 */
  .s-size{ grid-template-columns:1fr; grid-template-rows:auto auto 1fr; gap:8px; }
  .size-kid{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:"tag svg" "h svg"; align-items:center; column-gap:12px; row-gap:4px; }
  .size-kid .tag{ grid-area:tag; }
  .size-kid h2{ grid-area:h; font-size:var(--t4); }
  .growth{ grid-area:svg; height:88px; justify-content:flex-end; }
  .growth svg{ height:88px; }
  .readout{ position:static; order:-1; margin-inline-end:8px; align-self:center; }
  .readout b{ font-size:var(--t5); }
  .size-parent{ gap:10px; }
  .size-parent .par-h{ display:none; }
  .size-parent .tag{ display:none; }
  .age-chips{ gap:6px; }
  .age-chips .chip{ min-height:34px; padding:0 .7em; font-size:14px; }
  .calc-body{ min-height:0; }
  .hw{ grid-template-columns:1fr; gap:10px; }
  .seg{ font-size:14px; }
  .seg button{ padding:.45em .85em; min-height:34px; }
  .r-size{ font-size:var(--t5); }
  .grow{ font-size:14px; }
  .result{ padding-block:8px; }

  /* 3 */
  .play-parent{ top:auto; bottom:var(--pad); inset-inline:var(--pad); max-width:none; padding:0; border:0; gap:8px; }
  .play-parent .parline{ display:none; }
  .play-parent .tag{ display:none; }
  .play-parent .actions{ width:100%; }
  .play-parent .actions .pill{ flex:1; }
  .play-hint{ bottom:calc(var(--pad) + 58px); inset-inline-start:50%; translate:50% 0; font-size:13px; }
  .play-kid .kidline{ font-size:14px; }

  /* 4 */
  .s-cat{ gap:8px; }
  .cat-head{ gap:8px; }
  .cat-head h2{ font-size:var(--t3); }
  .cat-head .seg{ font-size:13px; }
  .cat-head .seg button{ padding:.4em .7em; }
  .filters{ flex-direction:column; align-items:stretch; gap:8px; }
  .sel-row .pill-select{ flex:1; justify-content:space-between; }
  .cell{ padding:8px 10px; }
  .card{ gap:6px; }
  .card .info{ gap:0; }
  .card .nm{ font-size:14px; }
  .card .ln{ display:none; }
  .card .dotsz{ display:none; }
  .pager{ gap:10px; }

  /* 5 */
  .s-gift{ grid-template-columns:1fr; grid-template-rows:auto auto 1fr; gap:6px; }
  .gift-kid{ display:grid; grid-template-columns:1fr 46%; grid-template-areas:"tag box" "h box" "l box"; column-gap:10px; align-items:start; }
  .gift-kid .tag{ grid-area:tag; }
  .gift-kid h2{ grid-area:h; font-size:var(--t2); }
  .gift-kid .kidline{ display:none; }
  .gwrap{ grid-area:box; height:112px; flex:none; margin:0 0 0 18px; }
  .gbox{ padding:8px; }
  .gribbon{ height:12px; border-width:2px; }
  .gbow{ width:44px; top:-12px; inset-inline-end:-16px; }
  .gslots{ padding:5px; gap:5px; }
  .gslot{ font-size:11px; }
  .gcard{ display:none; }
  .gift-form{ gap:8px; }
  .gift-form .tag{ display:none; }
  .gift-items{ column-gap:10px; }
  .gi{ min-height:34px; font-size:13px; gap:6px; }
  .gi .box{ width:18px; height:18px; }
  .gift-row{ grid-template-columns:1fr; gap:8px; }
  .gift-form legend{ margin-bottom:2px; font-size:14px; }
  .gift-form fieldset{ gap:4px; }
  .gift-form textarea{ min-height:40px; height:40px; padding-block:.4em; }
  .gift-form .field{ gap:4px; }
  #giftWrap .chip{ padding:0 .6em; font-size:13px; }
  .gift-total .pill{ min-height:42px; }
  .gift-total{ padding-top:8px; }
  .gift-total b{ font-size:var(--t4); }

  /* 6 */
  .s-shelves{ grid-template-columns:1fr; grid-template-rows:34% 1fr; gap:14px; }
  .dress{ margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 0; }
  .dress img{ object-position:50% 22%; }
  .dress .sticker{ font-size:var(--t1); padding:8px 12px; bottom:10px; }
  .shelves-list{ justify-content:flex-start; gap:10px; }
  .shelves-list h2{ font-size:var(--t4); }
  .shelf .sn{ font-size:var(--t2); }
  .shelf{ gap:10px; }
  .shelf .ss{ display:none; }

  /* 7 */
  .s-visit{ grid-template-columns:1fr; grid-template-rows:auto auto auto auto; row-gap:10px; }
  .s-visit .kid .kidline{ display:none; }
  .shop{ width:56%; margin-bottom:0; }
  .s-visit .kid{ gap:8px; }
  .s-visit .kid h2{ font-size:var(--t4); }
  .club{ margin-top:4px; }
  .facts div{ grid-template-columns:5em 1fr; padding-block:3px; }
  .facts dd{ font-size:var(--t0); }
  .visit-par{ gap:8px; }
  .visit-par .tag{ display:none; }
  .foot{ padding-top:8px; font-size:12px; gap:6px; }
  .foot nav{ gap:0 12px; }

  /* drawers/dialogs */
  .drawer{ width:100vw; padding:10px; }
  dialog.pd{ width:100vw; height:100svh; margin:0; }
  .pd .sheet-in{ grid-template-columns:1fr; height:100%; max-height:none; outline:0; border:10px solid var(--teal); }
  .pd-media{ min-height:52svh; }
  .pd-sides{ bottom:10px; inset-inline-start:10px; gap:8px; }
  .pd-th{ width:46px; }
  .pd-info{ padding:18px 20px 28px; }
  .pd-actions{ position:sticky; bottom:0; background:var(--pg); padding-block:10px; margin-block-end:-10px; }
  dialog.info{ width:calc(100vw - 24px); }
  .form .two{ grid-template-columns:1fr; }
  .toast{ bottom:auto; top:calc(var(--mt) + 10px); }
}
@media (max-width:760px) and (max-height:700px){
  .size-kid h2{ font-size:var(--t3); }
  .age-chips .chip{ min-height:30px; }
  .shelf{ padding-block:6px; }
}
@media (max-height:560px){
  .screen{ height:auto; min-height:100svh; }
  html.native-snap{ scroll-snap-type:y proximity; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js [data-rv]{ opacity:1; translate:none; }
}

/* =========================================================
   ניהול — אותו עולם: מסגרת טורקיז, דף חרדל בהיר, קווי מחברת
   ========================================================= */
#admin{ --pg:var(--mustard-pale); --ink:var(--deep); --acc:var(--teal); --acc-ink:var(--mustard-pale); --rule:rgba(10,70,73,.36); --line:rgba(10,70,73,.09); --tint:#F8D78E;
  background:var(--teal); min-height:100vh; padding:clamp(10px, 1.6vw, 22px); color:var(--deep); }
.adm{ display:grid; grid-template-columns:250px 1fr; min-height:calc(100vh - 2 * clamp(10px, 1.6vw, 22px)); background:var(--pg); }
.adm-side{ position:sticky; top:clamp(10px, 1.6vw, 22px); align-self:start; height:calc(100vh - 2 * clamp(10px, 1.6vw, 22px)); background:var(--teal); color:var(--mustard-pale);
  --acc:var(--mustard); --acc-ink:var(--deep); padding:22px 18px; display:flex; flex-direction:column; gap:26px; border-inline-end:clamp(10px, 1.6vw, 22px) solid var(--teal); position:sticky; overflow:hidden; }
.adm-logo .logo-word{ font-size:var(--t4); }
.adm-nav{ display:grid; border-block-start:2px dashed rgba(251,226,168,.4); }
.adm-nav a{ display:flex; align-items:center; gap:12px; padding:12px 6px; text-decoration:none; font-family:var(--f-kid); border-block-end:2px dashed rgba(251,226,168,.4); transition:padding .3s var(--ease); }
.adm-nav a:hover{ padding-inline-start:12px; }
.adm-nav a[aria-current="page"]{ color:var(--mustard); }
.adm-nav a[aria-current="page"]::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--mustard); margin-inline-start:auto; }
.adm-nav .nb{ margin-inline-start:auto; font-weight:400; font-size:12px; background:var(--mustard); color:var(--deep); border-radius:999px; padding:1px 8px; }
.adm-nav a[aria-current="page"] .nb{ margin-inline-start:0; }
.adm-side-end{ margin-top:auto; display:grid; gap:8px; }
.adm-side-end .pill{ justify-content:flex-start; }
.adm-doodle{ position:absolute; width:86px; bottom:120px; inset-inline-end:-14px; rotate:12deg; opacity:.95; pointer-events:none; }
.adm-doodle svg *{ fill:none; stroke:var(--mustard-pale); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.adm-doodle svg .d-fill{ fill:rgba(242,179,61,.35); }
.adm-main{ padding:clamp(18px, 3vw, 44px) clamp(18px, 3vw, 48px) 60px; display:flex; flex-direction:column; gap:26px; min-width:0; }
.adm-h{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; border-block-end:2px dashed var(--rule); padding-bottom:16px; }
.adm-h h1{ font-size:var(--t5); }
.kpis{ display:grid; grid-template-columns:repeat(4, 1fr); border-block:2px dashed var(--rule); }
.kpis > div{ padding:16px 18px; display:grid; gap:4px; align-content:start; }
.kpis > div + div{ border-inline-start:2px dashed var(--rule); }
.kpis span{ font-size:var(--t0); }
.kpis b{ font-family:var(--f-kid); font-weight:400; font-size:var(--t6); line-height:1.1; font-variant-numeric:tabular-nums; }
.kpis .warn b{ color:#9a5a00; }
.kpis .ulink{ font-size:var(--t0); }
.adm-cols{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(18px, 3vw, 44px); }
.panel{ display:grid; gap:12px; align-content:start; min-width:0; }
.panel h2{ font-size:var(--t3); }
.panel.danger{ border-block-start:2px dashed var(--rule); padding-top:16px; }
.chart{ width:100%; height:auto; overflow:visible; font-family:var(--f-kid); }
.spark-row{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; font-size:var(--t0); }
.spark{ width:100%; height:44px; }
.lowlist a{ display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; padding-block:8px; text-decoration:none; }
.lowlist small, .atbl small, .pcell small{ display:block; font-size:12px; opacity:.85; }
.lowlist b{ font-family:var(--f-kid); font-weight:400; font-size:var(--t0); border:1.5px solid currentColor; border-radius:999px; padding:0 .7em; }
.lowlist b.zero{ background:var(--deep); color:var(--mustard-pale); border-color:var(--deep); }
.th{ display:block; width:44px; aspect-ratio:4/5; overflow:hidden; background:var(--tint); flex:none; }
.th img{ width:100%; height:100%; object-fit:cover; }
.th.big{ width:120px; display:grid; place-items:center; }
.th.big em{ font-size:12px; font-style:normal; text-align:center; padding:6px; }
.atbl td{ vertical-align:middle; }
.atbl tbody tr[data-href], .atbl tbody tr[data-o]{ cursor:pointer; transition:background-color .2s; }
.atbl tbody tr[data-href]:hover, .atbl tbody tr[data-o]:hover, .atbl tr.sel{ background:rgba(242,179,61,.35); }
.tbl-wrap{ overflow-x:auto; min-width:0; }
.st{ display:inline-block; font-family:var(--f-kid); font-size:12px; border-radius:999px; padding:2px 10px; border:1.5px solid var(--deep); white-space:nowrap; }
.st-new{ background:var(--mustard); }
.st-processing{ background:var(--teal-pale); }
.st-shipped{ background:var(--teal); color:var(--mustard-pale); border-color:var(--teal); }
.st-delivered{ background:transparent; border-style:dashed; }
.st-warn{ background:var(--mustard); border-style:dashed; }
.hbars{ display:grid; gap:10px; }
.hbars > div{ display:grid; grid-template-columns:7em 1fr auto; gap:10px; align-items:center; font-size:var(--t0); }
.hbars i{ height:16px; border:2px solid var(--deep); background:linear-gradient(var(--teal),var(--teal)) no-repeat 100% 0/var(--w) 100%; }
.hbars b{ font-family:var(--f-kid); font-weight:400; font-variant-numeric:tabular-nums; }
.toolbar{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.pill-input{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding-inline:14px; border:2px solid currentColor; border-radius:999px; }
.pill-input input{ border:0; background:transparent; min-width:180px; outline:none; }
.pill-input:focus-within{ outline:3px solid currentColor; outline-offset:2px; }
.pcell{ display:flex; gap:12px; align-items:center; }
.rowact{ white-space:nowrap; }
.rowact .pill{ min-height:38px; width:38px; border-style:dashed; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.switch{ width:46px; height:26px; border-radius:999px; border:2px solid var(--deep); position:relative; transition:background-color .25s; }
.switch i{ position:absolute; top:2px; inset-inline-start:2px; width:18px; height:18px; border-radius:50%; background:var(--deep); transition:inset-inline-start .3s var(--spring); }
.switch[aria-checked="true"]{ background:var(--teal); }
.switch[aria-checked="true"] i{ inset-inline-start:22px; background:var(--mustard-pale); }
.orders-split{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(18px, 3vw, 40px); align-items:start; }
.odetail{ position:sticky; top:30px; border-inline-start:2px dashed var(--rule); padding-inline-start:clamp(14px, 2vw, 28px); }
.od-in{ display:grid; gap:12px; }
.od-h{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.od-h h2{ font-size:var(--t4); }
.oitems li{ display:flex; justify-content:space-between; gap:12px; padding-block:8px; }
.oitems small{ display:block; font-size:12px; opacity:.85; }
.od-tot{ display:flex; justify-content:space-between; font-family:var(--f-kid); font-size:var(--t3); }
.field select{ appearance:auto; }
.checkrow{ display:flex; align-items:center; gap:10px; font-family:var(--f-par); }
.checkrow input{ width:20px; height:20px; accent-color:var(--teal); }
.adm-dlg{ width:min(760px, calc(100vw - 32px)); }
.pimg{ display:flex; align-items:center; gap:16px; }
.sizes-ed{ border:0; padding:0; margin:0; }
.sizes-ed legend{ padding:0; margin-bottom:8px; }
.szgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:6px 14px; }
.szrow{ display:grid; grid-template-columns:auto 1fr 66px; align-items:center; gap:8px; padding:4px 0; border-block-end:1.5px dashed var(--rule); font-family:var(--f-kid); font-weight:400; font-size:var(--t0); opacity:.6; }
.szrow.on{ opacity:1; }
.szrow input[type=number]{ min-height:34px; padding:2px 8px; border:1.5px solid currentColor; background:transparent; width:66px; }
.szrow input[type=checkbox]{ width:18px; height:18px; accent-color:var(--teal); }
.setf{ max-width:860px; gap:26px; }

/* login */
.adm-login{ display:grid; place-items:center; grid-template-columns:1fr; }
.login{ position:relative; width:min(420px, 100%); display:grid; gap:14px; padding:clamp(26px, 5vw, 48px); border:3px solid var(--deep); background:var(--mustard-pale);
  background-image:repeating-linear-gradient(to bottom, transparent 0 33px, var(--line) 33px 34px); }
.login h1{ font-size:var(--t5); }
.login .pill.primary{ min-height:52px; }
.login .adm-doodle{ bottom:auto; top:-34px; inset-inline-end:-30px; }
.login .adm-doodle svg *{ stroke:var(--deep); }
.login .adm-doodle svg .d-fill{ fill:var(--mustard); }

/* studio */
.stepper{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 0; font-family:var(--f-kid); font-size:var(--t0); }
.stepper li{ display:flex; align-items:center; gap:8px; opacity:.55; }
.stepper li + li::before{ content:""; width:clamp(14px, 3vw, 46px); height:10px; margin-inline:8px; background:var(--rule); -webkit-mask:var(--wave-h) repeat-x 0 50%/60px 10px; mask:var(--wave-h) repeat-x 0 50%/60px 10px; }
.stepper b{ width:28px; height:28px; display:grid; place-items:center; border-radius:999px; border:2px solid currentColor; font-weight:400; }
.stepper li.on, .stepper li.done{ opacity:1; }
.stepper li.on b{ background:var(--teal); color:var(--mustard-pale); border-color:var(--teal); }
.stepper li.done b{ background:var(--mustard); }
.studio{ margin-top:18px; }
.st-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(280px, .9fr); gap:clamp(20px, 3.5vw, 52px); align-items:start; }
.st-side{ display:grid; gap:14px; align-content:start; }
.st-side h2{ font-size:var(--t4); }
.actions.col{ display:grid; justify-items:stretch; }
.actions.col .pill{ justify-content:flex-start; }
.cam{ position:relative; aspect-ratio:4/5; background:var(--deep); color:var(--mustard-pale); overflow:hidden; border:3px solid var(--deep); }
.cam video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cam .guide{ position:absolute; inset:6%; width:88%; height:88%; pointer-events:none; }
.cam-idle{ position:absolute; inset:auto 0 0 0; padding:20px; font-family:var(--f-kid); text-align:center; background:linear-gradient(transparent, rgba(10,70,73,.9)); }
.cam-err{ position:absolute; top:12px; inset-inline:12px; background:var(--mustard); color:var(--deep); padding:10px 14px; font-family:var(--f-kid); font-size:var(--t0); }
.tips li{ font-size:var(--t0); }
.scan{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--deep); border:3px solid var(--deep); }
.scan img{ width:100%; height:100%; object-fit:cover; filter:saturate(.7); }
.scanline{ position:absolute; inset-inline:0; height:30%; top:-30%; background:linear-gradient(transparent, rgba(242,179,61,.45), transparent); border-block-end:3px solid var(--mustard); animation:scan 1.6s var(--ease) infinite; }
.scan.stopped .scanline{ display:none; }
@keyframes scan{ to{ top:100%; } }
.prog{ height:14px; border:2px solid var(--deep); border-radius:999px; overflow:hidden; }
.prog i{ display:block; height:100%; width:0; background:var(--teal); border-radius:999px; transition:width .3s var(--ease); }
.small{ font-size:12px; }
.ba{ position:relative; aspect-ratio:4/5; overflow:hidden; border:3px solid var(--deep); background:var(--tint); user-select:none; }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba .before{ position:absolute; inset:0; clip-path:inset(0 0 0 calc(100% - var(--p))); }
.ba-handle{ position:absolute; top:0; bottom:0; inset-inline-start:var(--p); width:0; border-inline-start:3px dashed var(--mustard-pale); pointer-events:none; }
.ba-handle::after{ content:""; position:absolute; top:50%; translate:50% -50%; inset-inline-end:0; width:40px; height:40px; border-radius:999px; background:var(--mustard-pale); border:3px solid var(--deep); }
.ba-lab{ position:absolute; top:12px; font-family:var(--f-kid); font-size:12px; padding:3px 10px; border-radius:999px; background:var(--deep); color:var(--mustard-pale); pointer-events:none; }
.ba-lab.l1{ inset-inline-start:12px; }
.ba-lab.l2{ inset-inline-end:12px; }
.ba input[type=range]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }
.ai{ border-block:2px dashed var(--rule); padding-block:10px; }
.ai summary{ cursor:pointer; font-family:var(--f-kid); display:flex; align-items:center; gap:8px; }
.ai[open] summary{ margin-bottom:10px; }
.ai .field{ margin-bottom:10px; }
.final{ aspect-ratio:4/5; border:3px solid var(--deep); overflow:hidden; }
.final img{ width:100%; height:100%; object-fit:cover; }
.final.small{ width:min(260px, 100%); }
.final{ position:relative; }
.final .ba-lab{ inset-inline-start:12px; }
.final-duo{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.final-duo .final + .final{ margin-top:28px; border-style:dashed; }
.published .final-duo{ width:380px; max-width:100%; }
/* מודול "צד אחורי" — בסגנון פופי */
.studio .nxb{ margin:0; padding:0 0 10px; border:0; border-block-end:2px dashed var(--rule); gap:10px; }
.studio .nxb__h b{ font-family:var(--f-kid); font-weight:400; font-size:var(--t1); }
.studio .nxb__h small{ font-family:var(--f-par); font-size:12px; }
.studio .nxb button{ display:inline-flex; align-items:center; min-height:44px; padding:0 1.15em; border-radius:999px; border:2px dashed currentColor; font-family:var(--f-kid); font-size:var(--t0); line-height:1; }
.studio .nxb button:hover{ background:color-mix(in srgb, currentColor 12%, transparent); }
.studio .nxb button[data-a="cam"]{ background:var(--teal); color:var(--mustard-pale); border:2px solid var(--teal); }
.studio .nxb__pair img{ border:2px solid var(--deep); background:var(--tint); }
.studio .nxb__pair figure{ font-family:var(--f-kid); }
.studio .nxb__msg{ font-size:12px; }
/* עורך מוצר — תמונת גב */
.pimg-act{ display:grid; gap:8px; justify-items:start; }
.pimg-act .lab{ font-family:var(--f-kid); }
.pimg-act .lab small{ font-family:var(--f-par); font-size:12px; opacity:.75; margin-inline-start:6px; }
.pimg-act .row{ display:flex; gap:8px; flex-wrap:wrap; }
.th.big.back{ border:2px dashed var(--deep); }
.published{ display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; }
.published h2{ font-size:var(--t4); margin-bottom:8px; }
.published .actions{ margin-top:16px; }

@media (max-width:900px){
  .adm{ grid-template-columns:1fr; }
  .adm-side{ position:sticky; top:0; z-index:5; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 12px; border:0; }
  .adm-logo .logo-word{ font-size:var(--t3); }
  .adm-nav{ order:3; width:100%; display:flex; overflow-x:auto; border:0; gap:4px; scrollbar-width:none; }
  .adm-nav a{ flex:none; border:1.5px solid rgba(251,226,168,.45); border-radius:999px; padding:6px 12px; font-size:13px; }
  .adm-nav a:hover{ padding-inline-start:12px; }
  .adm-nav a .ic{ display:none; }
  .adm-nav a[aria-current="page"]{ background:var(--mustard); color:var(--deep); border-color:var(--mustard); }
  .adm-nav a[aria-current="page"]::after{ display:none; }
  .adm-side-end{ margin:0 auto 0 0; display:flex; }
  .adm-side-end .pill{ min-height:36px; padding:0 .8em; }
  .adm-side-end .pill span{ display:none; }
  .adm-doodle{ display:none; }
  .kpis{ grid-template-columns:1fr 1fr; }
  .kpis > div:nth-child(3){ border-inline-start:0; }
  .kpis > div:nth-child(n+3){ border-block-start:2px dashed var(--rule); }
  .kpis b{ font-size:var(--t5); }
  .adm-cols, .orders-split, .st-grid{ grid-template-columns:1fr; }
  .odetail{ position:static; border:0; border-block-start:2px dashed var(--rule); padding:16px 0 0; }
  .published{ grid-template-columns:1fr; }
  .ptbl th:nth-child(2), .ptbl td:nth-child(2){ display:none; }
  .otbl th:nth-child(2), .otbl td:nth-child(2), .otbl th:nth-child(4), .otbl td:nth-child(4){ display:none; }
  .adm-main{ padding:18px 14px 50px; }
}