/* KOOZA — קובץ העיצוב המשותף.
   מקור האמת לצבעים, לפונטים, לריווח ולרכיבים שחוזרים בכל התבניות:
   כותרת עליונה, כפתורים, כרטיס מוצר, בחירת אפשרות, שדות טופס ותגיות.
   כל תבנית מצטרפת אליו בשלב 4 (עמוד אחד בכל פעם) ומוחקת את העותק שלה
   מאותם רכיבים. מה שייחודי לעמוד אחד נשאר בתבנית שלו.
   המקור כאן ב-build/assets/; build_site.py מעתיק אותו ל-site/assets/css/. */

/* ================= צבעים, טיפוגרפיה, ריווח, תנועה ================= */
:root{
  --ink:#0B100E;
  --ink-2:#151C18;
  --ground:#F4F6F1;
  --card:#FFFFFF;
  --line:#E3E7DE;
  --line-dark:#232B26;
  --text:#131916;
  /* היה ‎#636E64‎: ניגודיות 4.25 על רקע ‎--line‎. זה עובר 4.5 על כל רקע באתר */
  --muted:#5C675D;
  --muted-dark:#95A096;
  --volt:#C8FF2E;
  --volt-dim:#A9DE12;
  --sale:#E0322B;
  --hover:#EDF0E9;

  /* שמונה גדלים בלבד. כל טקסט באתר יושב על אחד מהם */
  --fs-xs:12px;                        /* תגיות על תמונה, מונה בסל */
  --fs-sm:13px;                        /* שורת קטגוריה, הערות, פירורי לחם */
  --fs-base:15px;                      /* טקסט רץ, כפתורים, שדות */
  --fs-md:16px;                        /* שם מוצר בכרטיס, פריט תפריט */
  --fs-lg:19px;                        /* כותרת קבוצה (מידה, פאצ׳) */
  --fs-xl:24px;                        /* כותרת אזור (h2) */
  --fs-2xl:clamp(28px,3.8vw,40px);     /* כותרת עמוד (h1) */
  --fs-display:clamp(52px,8vw,96px);   /* מחיר ענק בבאנר */

  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:72px;

  --r:4px;            /* פינות: כפתורים, כרטיסים, שדות */
  --r-pill:999px;     /* צ׳יפים ותגיות בלבד */
  --head-h:68px;
  --tap:44px;         /* גודל מגע מינימלי */

  /* תנועה (Emil): יציאה מהירה, בלי ease-in, מתחת ל-300ms */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --dur-press:120ms;
  --dur-ui:200ms;
  --dur-drawer:280ms;
}

/* ================= בסיס ================= */
*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--text);
  font-family:"Heebo","Assistant",system-ui,sans-serif;
  font-size:var(--fs-base);line-height:1.6;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
[hidden]{display:none!important}
/* מסגרת פוקוס: הליים הבהיר לבדו היה 1.6:1 על לבן. דיו עם הילת ליים עובר 3:1 */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px rgba(200,255,46,.55)}
.lat{font-family:"Archivo",system-ui,sans-serif;direction:ltr;unicode-bidi:isolate}
.shell{max-width:1280px;margin:0 auto;padding-inline:20px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:620px){.shell{padding-inline:12px}}

h1,.h1{margin:0;font-size:var(--fs-2xl);font-weight:900;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
h2,.h2{margin:0;font-size:var(--fs-xl);font-weight:900;letter-spacing:-.02em;line-height:1.2}
.meta{font-size:var(--fs-sm);color:var(--muted);font-weight:600}

/* ================= כותרת עליונה — אחת לכל האתר ================= */
/* לבנה ומוצמדת בכל העמודים. בלי טשטוש רקע: מסנן על הורה כולא את המגירה הקבועה */
.head{position:sticky;top:0;z-index:40;background:var(--card);border-bottom:1px solid var(--line)}
.head__in{display:flex;align-items:center;gap:16px;height:var(--head-h);max-width:1280px;margin:0 auto;padding-inline:20px}
/* הכותרת נושאת גם ‎.shell‎, ובעמודי התוכן ‎.shell‎ צר (760px) — התפריט עלה
   על האייקונים. הרוחב של הכותרת קבוע, בלי קשר לרוחב התוכן בעמוד */
.head > .head__in{max-width:1280px;padding-inline:20px}
@media (max-width:860px){.head > .head__in{padding-inline:12px}}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;direction:ltr}
.brand svg{height:40px;width:auto}
.brand__type{display:flex;flex-direction:column;line-height:1}
.brand__word{font-family:"Archivo",sans-serif;font-style:italic;font-weight:900;
  font-variation-settings:"wdth" 112,"wght" 900;font-size:24px;letter-spacing:-.5px}
.brand__claim{font-family:"Archivo",sans-serif;font-weight:600;font-size:8.5px;
  letter-spacing:.44em;color:var(--muted);margin-top:4px}
.nav{display:flex;align-items:center;gap:0;margin-inline-start:12px;flex:1 1 auto;min-width:0}
/* שורה אחת תמיד: «חולצות ארוכות» ו«גופיות NBA» נשברו לשתיים */
.nav > a{position:relative;padding:10px 11px;border-radius:var(--r);white-space:nowrap;
  font-weight:800;font-size:var(--fs-md);color:var(--text);transition:color var(--dur-ui) ease}
.nav > a::after{content:"";position:absolute;inset-inline:11px;bottom:4px;height:2.5px;border-radius:2px;
  background:var(--volt);transform:scaleX(0);transform-origin:right;transition:transform var(--dur-ui) var(--ease-out)}
.nav > a[aria-current]::after{transform:scaleX(1)}
.nav__head,.nav__extra,.nav__m,.nav__me,.nav__club,.nav__auth{display:none}
.nav__d{display:inline-flex}
.nav__me[hidden],.nav__club[hidden],.nav__auth[hidden]{display:none!important}
.nav__mb > span{position:relative;display:inline-block}
.nav__mb > span::after{content:"";position:absolute;top:-5px;inset-inline-start:-9px;
  width:6px;height:6px;border-radius:50%;background:var(--volt)}
.scrim{position:fixed;inset:0;z-index:50;background:rgba(7,10,9,.55);opacity:0;transition:opacity var(--dur-drawer) ease}
.scrim.show{opacity:1}
.tools{display:flex;align-items:center;gap:4px;flex:0 0 auto;margin-inline-start:auto}
/* תג האזור האישי (מחשב בלבד) ותפריט הכניסה/הרשמה שמתחתיו */
.pa-wrap{position:relative}
/* אייקון בלבד, כמו הסל והשמורים: עם הטקסט התפריט העברי חרג ב-48px.
   הטקסט נשאר בתוך הכפתור לקוראי מסך */
.pa{display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;
  border:1px solid transparent;position:relative;
  transition:border-color var(--dur-ui) ease,background var(--dur-ui) ease,transform var(--dur-press) var(--ease-out)}
.pa > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pa svg{width:21px;height:21px;stroke:var(--text);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pa.is-member{border-color:var(--volt);background:rgba(200,255,46,.14)}
.pa__menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:60;min-width:240px;padding:6px;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(11,16,14,.16);
  transform-origin:top left}
.pa__menu a{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:7px}
.pa__menu a + a{border-top:1px solid #EEF1EA}
.pa__menu b{font-size:var(--fs-base);font-weight:800}
.pa__menu small{font-size:var(--fs-xs);color:var(--muted)}
@media (max-width:860px){.pa-wrap{display:none}}
.icon-btn{width:var(--tap);height:var(--tap);display:grid;place-items:center;border-radius:50%;position:relative;
  transition:background var(--dur-ui) ease,transform var(--dur-press) var(--ease-out)}
.icon-btn svg{width:21px;height:21px;stroke:var(--text);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.badge{position:absolute;top:3px;inset-inline-start:4px;min-width:18px;height:18px;padding:0 4px;
  background:var(--volt);color:var(--ink);border-radius:9px;
  font-size:var(--fs-xs);font-weight:800;display:grid;place-items:center;line-height:1}
.badge.is-empty{background:var(--line);color:var(--muted)}
.burger{display:none;width:var(--tap);height:var(--tap);border-radius:var(--r);place-items:center}
.burger svg{width:23px;height:23px;stroke:var(--text);stroke-width:1.9;fill:none;stroke-linecap:round}
/* מתחת ל-1360 התפריט המלא לא נכנס בשורה אחת בשום שפה (ב-1280 הוא גלש
   ב-13px בעברית וב-113px בערבית) — לכן הוא הופך למגירה. אותו ערך ב-JS. */
@media (max-width:1359px){
  .burger{display:grid}
  .nav{position:fixed;z-index:60;inset-block:0;inset-inline-start:0;width:min(84vw,330px);margin:0;
    padding:20px 22px 28px;background:var(--card);box-shadow:-24px 0 60px rgba(11,16,14,.22);
    flex-direction:column;align-items:stretch;overflow-y:auto;
    /* סגורה: גם מוסתרת, אחרת הצל שלה מציץ בקצה המסך ומקלדת מגיעה לקישורים */
    transform:translateX(100%);visibility:hidden;
    transition:transform var(--dur-drawer) var(--ease-drawer),visibility 0s linear var(--dur-drawer)}
  .nav.open{transform:none;visibility:visible;transition-delay:0s}
  .nav > a{padding:13px 2px;font-size:20px;border-bottom:1px solid var(--line);border-radius:0}
  .nav > a::after{display:none}
  .nav__m{display:block}
  .nav__d{display:none}
  .nav__head{display:flex;align-items:center;justify-content:space-between;
    padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--line)}
  .nav__title{font-weight:800;font-size:var(--fs-sm);color:var(--muted)}
  .nav__close{width:var(--tap);height:var(--tap);display:grid;place-items:center;border-radius:50%;margin-inline-end:-8px}
  .nav__close svg{width:19px;height:19px;stroke:var(--text);stroke-width:1.9;fill:none;stroke-linecap:round}
  .nav > a.nav__me{display:flex;flex-direction:column;gap:2px;margin:10px 0 6px;padding:13px 14px;
    border:0;border-radius:6px;background:var(--ink);color:#EDF2EC}
  .nav__me b{font-size:17px;font-weight:900}
  .nav__me small{font-size:var(--fs-xs);color:#9FAB9F;direction:ltr;unicode-bidi:isolate;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav__auth{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 6px}
  .nav__auth a{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:var(--r);
    font-size:var(--fs-base);font-weight:900;border:1.5px solid var(--ink)}
  .nav__auth a.is-up{background:var(--ink);color:#EDF2EC}
  .nav__extra{display:flex;flex-direction:column;gap:1px;margin-top:12px}
  .nav__extra a{padding:9px 2px;font-size:var(--fs-base);font-weight:700;color:var(--muted)}
  .nav__club{display:block;margin-top:15px;padding:14px 15px;border-radius:6px;background:var(--volt);color:var(--ink)}
  .nav__club b{display:block;font-size:var(--fs-md);font-weight:900}
  .nav__club span{display:block;margin-top:2px;font-size:var(--fs-sm);font-weight:700}
}
@media (max-width:860px){
  .head__in{gap:8px;padding-inline:12px}
  .brand svg{height:36px}
  .brand__claim{display:none}
}

/* ================= כפתורים ================= */
/* שלושה סוגים, גובה אחד, פינה אחת. ליים = הפעולה הראשית בעמוד, ורק היא */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  padding:0 22px;border-radius:var(--r);border:1.5px solid transparent;
  font-weight:800;font-size:var(--fs-base);line-height:1.2;white-space:nowrap;text-align:center;
  transition:transform var(--dur-press) var(--ease-out),background var(--dur-ui) ease,border-color var(--dur-ui) ease,color var(--dur-ui) ease}
.btn--volt{background:var(--volt);color:var(--ink)}
.btn--ink{background:var(--ink);color:#fff}
.btn--line{background:var(--card);color:var(--text);border-color:var(--line)}
.btn--sm{min-height:var(--tap);padding:0 16px;font-size:14px}
.btn--block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.textlink{font-weight:800;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}

/* ================= בחירת אפשרות (מידה, פאצ׳, גרסה) ================= */
.opt{min-height:48px;padding:8px 14px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--card);
  font-weight:800;font-size:var(--fs-base);color:var(--text);text-align:center;
  transition:transform var(--dur-press) var(--ease-out),border-color var(--dur-ui) ease,background var(--dur-ui) ease,color var(--dur-ui) ease}
.opt small{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.opt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.opt[aria-pressed="true"] small{color:#C9D1C8}
.opt:disabled{opacity:.4;text-decoration:line-through;cursor:not-allowed}

/* ================= צ׳יפים (סינון) ================= */
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:var(--card);font-weight:700;font-size:14px;white-space:nowrap;
  transition:transform var(--dur-press) var(--ease-out),border-color var(--dur-ui) ease,background var(--dur-ui) ease}
.chip[aria-pressed="true"],.chip[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}

/* ================= שדות טופס ================= */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-weight:800;font-size:14px}
.input,.select{width:100%;min-height:48px;padding:0 14px;border-radius:var(--r);border:1.5px solid var(--line);
  background:var(--card);font:inherit;font-size:16px;color:var(--text);transition:border-color var(--dur-ui) ease}
.input::placeholder{color:#7C877D}
.input:focus,.select:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 4px rgba(200,255,46,.45)}
.input[aria-invalid="true"]{border-color:var(--sale)}
.field__err{font-size:var(--fs-sm);color:#B4231D;font-weight:700}

/* ================= תגיות ================= */
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:800;line-height:1.4;white-space:nowrap}
.tag--volt{background:var(--volt);color:var(--ink)}
.tag--ink{background:var(--ink);color:#fff}
.tag--sale{background:var(--sale);color:#fff}
.tag--glass{background:rgba(11,16,14,.78);color:#fff}   /* על תמונה */

/* ================= מחיר ================= */
.price{font-family:"Archivo",system-ui,sans-serif;font-weight:900;font-variation-settings:"wdth" 112;
  unicode-bidi:isolate;letter-spacing:-.02em;line-height:1}
.price--card{font-size:20px}
.price--pdp{font-size:36px}
.price s{font-size:.6em;color:var(--muted);font-weight:600;margin-inline-start:6px}

/* ================= כרטיס מוצר ================= */
.card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);transition:border-color var(--dur-ui) ease}
.card__media{position:relative;aspect-ratio:1/1;background:#ECEFE8;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__kind{position:absolute;bottom:8px;inset-inline-start:8px}
.card__fav{position:absolute;top:8px;inset-inline-end:8px;width:var(--tap);height:var(--tap);border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.92)}
.card__body{display:flex;flex-direction:column;gap:6px;padding:14px;flex:1 1 auto}
.card__cat{font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.card__name{margin:0;font-size:var(--fs-md);font-weight:800;line-height:1.3}
.card__foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:6px}
@media (max-width:620px){
  .card__body{padding:12px}
  .card__name{font-size:15px}
  .card__foot .btn{min-height:var(--tap)}
}

/* ================= משוב ומגע ================= */
/* לחיצה: הקטנה קלה, מיידית. רק למה שבאמת נלחץ */
.btn:active,.opt:active:not(:disabled),.chip:active,.icon-btn:active,.burger:active,.pa:active{transform:scale(.97)}
/* ריחוף רק במכשיר עם עכבר — בטלפון ריחוף «נתקע» אחרי נגיעה */
@media (hover:hover) and (pointer:fine){
  .btn--volt:hover{background:#D4FF57}
  .btn--ink:hover{background:var(--ink-2)}
  .btn--line:hover,.opt:hover:not([aria-pressed="true"]):not(:disabled),.chip:hover:not([aria-pressed="true"]){border-color:var(--ink)}
  .icon-btn:hover,.burger:hover,.pa:hover{background:var(--hover)}
  .card:hover{border-color:#C9D1C8}
  .nav > a:hover::after{transform:scaleX(1)}
}
@keyframes kz-bump{40%{transform:scale(1.35)}}
.badge.bump{animation:kz-bump 360ms var(--ease-out)}
/* לב שנשמר «קופץ» לרגע (favs.js מוסיף ‎.is-pop‎ רק בשמירה) */
@keyframes kz-heart{40%{transform:scale(1.28)}}
.is-pop svg{animation:kz-heart 320ms var(--ease-out)}

/* הפחתת תנועה: בלי תזוזה ובלי קנה מידה. שינויי צבע נשארים, הם עוזרים להבין */
@media (prefers-reduced-motion:reduce){
  .btn:active,.opt:active,.chip:active,.icon-btn:active,.burger:active,.pa:active{transform:none}
  .nav{transition:none}
  .badge.bump,.is-pop svg{animation:none}
}