/* === Design system === */
:root{
  --vh: 1vh;           /* מעודכן ב-JS */
  --radius: 18px;
  --radius-lg: 26px;
  --gap: 14px;
  --gap-lg: 22px;

  /* Light theme */
  --bg: #f6f7fb;
  --card: rgba(255,255,255,0.7);
  --text: #0f172a;
  --muted: #53617a;
  --brand: #ff6b6b;
  --brand-2: #7c3aed;
  --brand-3: #22d3ee;
  --line: rgba(15,23,42,0.08);

  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --glass: saturate(140%) blur(10px);
}

[data-theme="dark"]{
  --bg: #0b0f14;
  --card: rgba(16,20,27,0.55);
  --text: #e5e7eb;
  --muted: #9aa7bd;
  --brand: #ffa654;
  --brand-2: #a78bfa;
  --brand-3: #67e8f9;
  --line: rgba(229,231,235,0.06);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* === Base === */
html{ scroll-behavior:smooth; }
body{
  font-family:"Cairo","Rubik",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:calc(var(--vh) * 100);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.container{ width:min(100%,1080px); margin-inline:auto; padding-inline:16px; }

@media (max-width:640px){
  .container{ padding-inline:0; width:100%; }
}
html,body{ overflow-x:hidden; }

/* === Background FX === */
.bg-wrap{ position:fixed; inset:0; z-index:-2; overflow:hidden; }
.bg-gradient{
  position:absolute; inset:-10%;
  background:
    radial-gradient(1200px 1200px at 100% 0%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(1200px 1200px at 0% 100%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.02));
  filter:blur(.2px);
}
.bg-noise{
  position:absolute; inset:-5%; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.bg-blobs .blob{ position:absolute; width:40vmin; height:40vmin; border-radius:50%; filter:blur(35px); opacity:.28; animation:float 18s ease-in-out infinite; }
.bg-blobs .b1{ background:#7c3aed; top:12%; inset-inline-start:-6%; }
.bg-blobs .b2{ background:#22d3ee; bottom:8%; inset-inline-end:-10%; animation-duration:22s; }
.bg-blobs .b3{ background:#ffa654; top:35%; inset-inline-end:15%; animation-duration:26s; }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }

/* === Header (Sticky) === */
.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:blur(8px);
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0));
}
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand__text strong{ font-weight:900; letter-spacing:.2px; display:block; }
.brand__text small{ display:block; opacity:.75; font-size:12px; margin-top:-2px; }

/* פס התמונה בין הכותרת להגדרות – בלי חיתוך */
.brand-bg{
  flex:1;
  height:clamp(44px, 14vw, 72px);
  margin:0 12px;
  border-radius:25px;
  background-image:url("../../images/products/logo-main.jpg"); /* עדכן נתיב אם צריך */
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:rgba(0,0,0,.08);
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
[data-theme="dark"] .brand-bg{ background-color:rgba(255,255,255,.06); }

.hdr-edge{ display:flex; align-items:center; gap:8px; }
.edge-button{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:8px 12px; box-shadow:var(--shadow); cursor:pointer;
  backdrop-filter:var(--glass);
}
.edge-button.small{ padding:6px 10px; }
.edge-select{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 10px; }

.settings-popover{
  position:fixed; z-index:10000; inset-inline-end:16px;
  top:calc(var(--hdr-h, 64px) + 8px);
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:10px; min-width:220px; box-shadow:var(--shadow); backdrop-filter:var(--glass);
}
.settings-popover .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px; }
.settings-popover .pop-label{ font-weight:700; }

/* === Tabs (Sticky under header) === */
.header-cats{
  position:sticky; top:var(--hdr-h, 64px); z-index:999;
  background:var(--card, #fff); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); padding:10px 0;
}
[data-theme="dark"] .header-cats{
  background:linear-gradient(180deg, rgba(11,15,20,.85), rgba(11,15,20,.55) 60%, transparent);
  backdrop-filter:blur(6px);
}
.cat-tabs{ display:flex; overflow:auto; gap:8px; scrollbar-width:none; }
.cat-tabs::-webkit-scrollbar{ display:none; }
.cat-tab{
  flex:0 0 auto; border:1px solid var(--line);
  background:var(--card); backdrop-filter:var(--glass);
  padding:8px 12px; border-radius:999px; font-weight:800; color:var(--text);
  opacity:.95; transition:transform .2s ease, background .2s ease;
}
.cat-tab:hover{ transform:translateY(-1px); }
.cat-tab.is-active{
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#fff; border-color:transparent;
  box-shadow:0 6px 22px rgba(124,58,237,.28);
}
[data-theme="dark"] .cat-tab{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); color:#f3f4f6; }
[data-theme="dark"] .cat-tab:hover{ background:rgba(255,255,255,.16); }
.cat-tab:focus-visible{ outline:3px solid rgba(124,58,237,.55); outline-offset:2px; }

/* === Featured / Cards === */
.featured{ margin-top:14px; }
.featured h2{ font-size:18px; font-weight:900; margin:0 0 10px; }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  transform:translateY(6px); opacity:0; transition:opacity .5s ease, transform .5s ease;
}
.card.reveal{ opacity:1; transform:translateY(0); }

/* תמונות בכרטיסים – אחידות, בלי חיתוך */
.card .thumb{
  aspect-ratio:1 / 1;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#fff;
}
[data-theme="dark"] .card .thumb{ background-color:#0f172a; }

.card .body{ padding:10px 12px 12px; text-align:center; }
.card .name{ font-weight:900; font-size:16px; }
.card .meta{ opacity:.7; font-size:13px; margin-top:4px; }

/* Featured variant */
.card--featured .thumb{
  background-size:contain; background-position:center; background-repeat:no-repeat; background-color:#fff;
}

.price-badge{
  position:absolute; inset-inline-start:10px; inset-block-end:10px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#fff; font-weight:900; padding:6px 10px; border-radius:999px;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
html[dir="rtl"] .price-badge{ inset-inline-start:10px; }
html[dir="ltr"] .price-badge{ inset-inline-start:auto; inset-inline-end:10px; }

/* הערת תמונה */
.img-note{
  font-size:11px; opacity:.65; line-height:1.4; text-align:center; margin-top:4px;
}
.modal .img-note{ font-size:11px; opacity:.7; margin:6px 0; }

/* === Category grid (home) === */
.cat-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:14px;
}
.cat-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); cursor:pointer; transform:translateZ(0);
}
.cat-card__img{ aspect-ratio:1.3/1; background-size:cover; background-position:center; filter:saturate(1.05); }
.cat-card__name{
  position:absolute; inset:auto 10px 10px 10px; background:rgba(0,0,0,.55);
  color:#fff; font-weight:900; padding:8px 12px; border-radius:12px; backdrop-filter:blur(6px);
}
/* טקסט שמות קטגוריות קטן יותר */
.cat-card__name{ font-size:13px; line-height:1.4; text-align:center; }
@media (min-width:768px){ .cat-card__name{ font-size:15px; } }

/* === Products grid === */
.grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:14px; }

/* === Modal === */
.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  padding:16px; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); z-index:100;
}
.modal .panel{
  width:min(520px, 96vw); background:var(--card); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow); overflow:hidden; position:relative;
}
.modal .close{
  position:absolute; inset-inline-end:14px; inset-block-start:12px;
  border:0; background:rgba(0,0,0,.4); color:#fff; width:36px; height:36px;
  border-radius:10px; font-size:20px; cursor:pointer;
}
/* תמונת המוצר במודל – מרכז אמיתי, ללא חיתוך */
.modal .cover{
  width:100%;
  min-height:320px;
  height:44vh;
  max-height:520px;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#fff;
}
@media (min-width:768px){
  .modal .cover{ min-height:320px; height:48vh; max-height:520px; }
}
.modal .content{ padding:14px; text-align:center; }
.modal .title{ font-size:20px; font-weight:900; margin:0 0 6px; }
.modal .desc{ opacity:.9; line-height:1.6; }
.btn.secondary{ border:1px solid var(--line); background:var(--card); padding:10px 14px; border-radius:12px; font-weight:900; }

/* Dark theme contrast for popover & controls */
[data-theme="dark"] .settings-popover{
  background:rgba(20,26,36,.95);
  border-color:rgba(148,163,184,.25);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
[data-theme="dark"] .settings-popover .pop-label{ color:#e5e7eb; }
[data-theme="dark"] .edge-select,
[data-theme="dark"] select,
[data-theme="dark"] .edge-button.small{
  background:#1f2937; color:#f8fafc; border:1px solid #475569;
}
[data-theme="dark"] select option{ background:#111827; color:#f9fafb; }
[data-theme="dark"] .modal .btn.secondary{
  background:#1f2937; color:#f8fafc; border:1px solid #64748b; box-shadow:0 6px 16px rgba(0,0,0,.35);
}
[data-theme="dark"] .modal .btn.secondary:hover{ background:#273447; border-color:#7c8aa3; }

/* === FABs === */
.fab{
  position:fixed; inset-inline-end:16px; width:46px; height:46px;
  border-radius:50%; border:0; background:var(--card); box-shadow:var(--shadow);
  border:1px solid var(--line); opacity:0; transform:translateY(10px); transition:.25s ease; z-index:60;
}
.fab.show{ opacity:1; transform:translateY(0); }
.fab-top{ inset-block-end:82px; }
.fab-home{ inset-block-end:24px; }

/* === Swiper controls === */
.swiper-button-next, .swiper-button-prev{ color:#fff; text-shadow:0 3px 15px rgba(0,0,0,.35); }
#featuredSection .swiper-pagination-bullet{ background:rgba(255,255,255,.8); }
#featuredSection .swiper-pagination-bullet-active{ background:var(--brand-2); }

/* === Scrollbars === */
*{ scrollbar-color:rgba(120,120,120,.35) transparent; scrollbar-width:thin; }
@media (max-width:640px){ *::-webkit-scrollbar{ width:0; height:0; } }

/* === Desktop tweaks === */
@media (min-width:768px){
  .cat-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
  .grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
}
@media (min-width:1024px){
  .cat-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
  .grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* נועל את ההדר לראש המסך */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;   /* top:0; left/right:0 */
  z-index: 1000;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0));
}

/* נועל את פס הקטגוריות מתחת להדר */
.header-cats{
  position: fixed;
  inset: var(--hdr-h, 64px) 0 auto 0; /* top = גובה ההדר */
  z-index: 999;
  background: var(--card, #fff);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}

/* מפנה מקום לתוכן מתחת להדר+טאבים (מתעדכן ב-JS) */
main{
  padding-top: calc(var(--hdr-h, 64px) + var(--tabs-h, 48px));
}

/* הפופאובר של ההגדרות – עוגן מתחת להדר הנעול */
.settings-popover{
  position: fixed;
  z-index: 10000;
  inset-inline-end: 16px;
  top: calc(var(--hdr-h, 64px) + 8px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  min-width: 220px;
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
}

/* תג מחיר קטן ועדין יותר */
.price-badge{
  padding: 4px 8px;          /* היה 6px 10px */
  font-size: 18px;           /* היה ללא גודל – עכשיו קטן יותר */
  border-radius: 999px;
}
.price-badge .unit{ font-size: 10px; opacity:.8; }

/* חלון המוצר – מראה עדין יותר כברירת מחדל */
.modal .panel{
  width: min(460px, 92vw);   /* היה 520px */
  border-radius: 16px;       /* מעט פחות “תפוח” */
  transform: scale(0.98);
  transition: transform .22s ease, box-shadow .22s ease;
}

/* כשנפתח – הופך לקטן ועדין יותר */
.modal.compact .panel{
  transform: scale(0.94);    /* גודל “עדין” */
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}

/* אפשר גם להקטין את תמונת הכיסוי טיפה בשביל תחושה קלילה */
.modal.compact .cover{
  max-height: 480px;         /* היה 520px */
}

/* התאמות מובייל קטנות */
@media (max-width: 420px){
  .price-badge{ font-size: 10px; padding: 3px 7px; }
  .modal .panel{ width: min(420px, 94vw); }
  .modal.compact .panel{ transform: scale(0.92); }
}

/* המודל מעל הכול, אבל מתחיל מתחת להדר+טאבים */
.modal{
  position: fixed;
  inset: 0;
  z-index: 2000; /* מעל ההדר/טאבים */
  display: none;
  align-items: flex-start; /* לאמצע אנכי? נשאיר למטה כדי שלא יתנגש */
  justify-content: center;
  /* ריווח עליון = גובה ההדר + הטאבים + מרווח קטן */
  padding: calc(var(--hdr-h, 64px) + var(--tabs-h, 48px) + 12px) 16px 16px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}

/* החלון עצמו – גרסה עדינה יותר כברירת מחדל */
.modal .panel{
  width: min(460px, 92vw);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
  transform: scale(0.96);
  transition: transform .22s ease, box-shadow .22s ease;
}

/* מצב קומפקטי כשנפתח – עוד טיפ-טוב של הקטנה */
.modal.compact .panel{
  transform: scale(0.92);
}

/* תמונת הכיסוי – מעט נמוכה יותר במובייל למראה קליל */
.modal .cover{
  width: 100%;
  min-height: 260px;
  height: 40vh;
  max-height: 460px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
}

/* מחיר מתחת לתמונה */
.modal-price{
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  margin: 8px 0 12px;
  color: var(--text);
}
[data-theme="dark"] .modal-price{ color:#f3f4f6; }

/* מובייל קטן מאוד */
@media (max-width: 420px){
  .modal{ padding: calc(var(--hdr-h, 64px) + var(--tabs-h, 48px) + 8px) 10px 12px; }
  .modal .panel{ width: min(400px, 94vw); transform: scale(0.94); }
  .modal.compact .panel{ transform: scale(0.90); }
  .modal .cover{ min-height: 220px; height: 38vh; max-height: 420px; }
}

/* מחיר מתחת לשם בכרטיסים */
.card .card-price{
  margin-top: 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  text-align: center;           /* אפשר center כדי לשמור על סימטריה */
}
.card .card-price .unit{ font-size: 12px; opacity: .8; }

[data-theme="dark"] .card .card-price{ color: #f3f4f6; }

/* אם נשארו תגיות badge ישנות בגריד – להסתיר רק שם */
.grid .price-badge{ display: none !important; }

/* טיפה ריווח בין שם/מחיר/מטא */
.card .name{ font-weight: 900; font-size: 16px; }
.card .meta{ opacity: .7; font-size: 13px; margin-top: 4px; }

/* מחיר בכרטיסי הגריד – קפסולה מעוצבת מתחת לשם */
.card .card-price{
  display: inline-block;
  margin: 6px auto 4px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  text-align: center;
}
.card .card-price .unit{
  font-size: 11px;
  opacity: .9;
  margin-inline-start: 2px;
}

/* ממרכז את הקפסולה בתוך ה-body */
.card .body{
  text-align: center;
}

/* ניגודיות טובה בדארק מוד כבר מגיעה מהגרדיאנט, אין שינוי נדרש */
/* מחיר במודל – קפסולה ממורכזת מתחת לתמונה */
.modal-price{
  display: inline-block;
  margin: 10px auto 14px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  text-align: center;
}
.modal-price .unit{
  font-size: 13px;
  opacity: .85;
  margin-inline-start: 2px;
}

/* במצב לילה – הגרדיאנט כבר נותן ניגודיות, לא נדרש שינוי */

/* יישור מרכזי למחיר בכרטיסים */
.card .body{
  text-align: center;   /* ממרכז שם + מחיר + קטגוריה */
}

.card .card-price{
  display: inline-block;
  margin: 6px auto 4px; /* ממרכז ע"י auto */
  text-align: center;
}

/* יישור מרכזי למחיר במודל */
.modal-price{
  display: inline-block;
  margin: 10px auto 14px;  /* auto כדי ליישר למרכז */
  text-align: center;
}

/* מחיר בכרטיסים – תמיד באמצע */
.card .card-price{
  display: flex;              /* Flexbox */
  justify-content: center;    /* מרכז אופקית */
  align-items: center;        /* מרכז אנכית */
  margin: 8px auto;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  max-width: max-content;     /* שלא יתפרש לכל הרוחב */
}

/* מחיר במודל – קפסולה ממורכזת */
.modal-price{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px auto 16px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  max-width: max-content;
}

/* מחיר ב־Slide (Featured) – מתחת לשם */
.card--featured .body{
  text-align: center;
}
.card--featured .price-inline{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px auto 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  max-width: max-content;
}
/* כרטיסי Featured – הקטנה */
.card--featured{
  max-width: 260px;            /* רוחב מקסימלי */
  margin: 0 auto;
}

.card--featured .thumb{
  aspect-ratio: 1 / 1;         /* ריבוע קומפקטי */
  max-height: 200px;
}

.card--featured .name{
  font-size: 14px;
  font-weight: 800;
}

.card--featured .price-inline{
  font-size: 13px;
  padding: 5px 10px;
  margin-top: 4px;
}

/* תמונת ה-Featured תמיד באמצע */
.card--featured .thumb{
  aspect-ratio: 1 / 1;             /* ריבוע */
  max-height: 200px;
  display: flex;                   /* מרכזת את התוכן */
  justify-content: center;
  align-items: center;
  background-size: contain;        /* בלי חיתוך */
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;          /* רקע ניטרלי */
  margin: 0 auto;                  /* ממרכז את הבלוק */
}
[data-theme="dark"] .card--featured .thumb{
  background-color: #0b0f14;       /* כהה במצב לילה */
}

/* כרטיסי מוצרים – הידוק רווחים */
.card .thumb{
  margin-bottom: 4px;     /* רווח קטן מתחת לתמונה */
}

.card .img-note{
  margin: 2px 0;          /* היה 6–8px, עכשיו הרבה פחות */
  font-size: 10px;        /* טקסט קטן ועדין */
  line-height: 1.2;
}

.card .body{
  padding: 4px 6px;       /* פחות padding פנימי */
  text-align: center;
}

.card .name{
  margin: 2px 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.card .card-price{
  margin: 2px auto;
  padding: 4px 8px;       /* קפסולה קטנה יותר */
  font-size: 12px;
}

.card .meta{
  margin: 2px 0 0;        /* רווח קטן מאוד מעל הקטגוריה */
  font-size: 11px;
  opacity: 0.7;
}
/* ===== Modal Compact Style ===== */
.modal .panel {
  border-radius: 14px;
  padding: 8px 0;
}

.modal .cover {
  margin-bottom: 6px;       /* רווח קטן בלבד אחרי התמונה */
}

.modal .img-note {
  font-size: 11px;
  opacity: 0.65;
  margin: 2px 0 4px;
  text-align: center;
}

.modal .content {
  padding: 6px 10px;
  text-align: center;
}

.modal .title {
  font-size: 16px;
  font-weight: 800;
  margin: 2px 0;
  line-height: 1.3;
}

.modal .card-price {
  margin: 2px auto;
  padding: 4px 8px;
  font-size: 13px;
  display: inline-block;
}

.modal .desc {
  font-size: 13px;
  line-height: 1.4;
  margin: 4px 0 6px;
}

.modal .btn.secondary {
  margin-top: 6px;
  font-size: 13px;
  padding: 8px 14px;
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;

  /* שימוש ב־--vh במקום 100vh */
  height: calc(var(--vh, 1vh) * 100);

  padding: 12px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 100;
}

.modal .panel {
  max-height: calc(var(--vh, 1vh) * 90); /* לא יותר מ־90% מהמסך */
  overflow-y: auto;
  border-radius: 14px;
}

/* Bottom Sheet modal */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-end;   /* חשוב: ימקם את הפאנל למטה */
  justify-content: center;

  height: calc(var(--vh, 1vh) * 100);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 100;
}

.modal .panel {
  width: 100%;
  max-width: 600px;
  max-height: calc(var(--vh, 1vh) * 90); /* שלא יעלה על 90% מהמסך */
  background: var(--card);
  border-radius: 18px 18px 0 0;          /* עגול למעלה בלבד */
  box-shadow: 0 -8px 24px rgba(0,0,0,.3);
  overflow-y: auto;

  /* אפקט עלייה מלמטה */
  transform: translateY(100%);
  transition: transform .35s ease;
}

/* כשה־modal פעיל */
.modal.show .panel {
  transform: translateY(0);
}

.modal .panel{
  display: flex;
  flex-direction: column;     /* תמונה למעלה, תוכן מתחת */
  overflow-y: auto;           /* גלילה פנימית בלבד */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ===== Modal centered ===== */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;              /* ← מרכז אנכית */
  justify-content: center;          /* ← מרכז אופקית */
  height: calc(var(--vh, 1vh) * 100);
  padding: 16px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 2000;                    /* מעל ההדר/טאבים */
}

/* פאנל ממורכז עם אנימציה עדינה */
.modal .panel{
  width: min(520px, 94vw);
  max-height: calc(var(--vh, 1vh) * 90);  /* גלילה פנימית אם ארוך */
  overflow-y: auto;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 14px 36px rgba(0,0,0,.30);
  transform: scale(.96);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}

/* כשהמודל מוצג */
.modal.show .panel{
  transform: scale(1);
  opacity: 1;
}

/* תמונה במרכז, בלי חיתוך */
.modal .cover{
  width: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  min-height: 240px;
  height: 40vh;
  max-height: 460px;
}

/* שמירת מרכז למחיר */
.modal-price{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto 14px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  max-width: max-content;
}

/* חשוב: למחוק/לדרוס כללים ישנים של bottom sheet:
   .modal { align-items:flex-end; }
   .modal .panel { transform: translateY(100%); }
   .modal.show .panel { transform: translateY(0); }
*/