/* =============================
 * 🌙 Al-Shaweesh Perfumes — Theme & Layout (HTML-aligned)
 * ============================= */

/* Root palette */
:root{
  --primary:#8B5CF6; --primary-light:#a78bfa;
  --bg:#0f0f1a; --bg-alt:#1a1a2e; --card:#161625;
  --text:#f8f9fa; --text-muted:#adb5bd; --border:#333; --hover:#2a2a40;
  --success:#10b981; --danger:#ef4444;
  --shadow:0 4px 20px rgba(0,0,0,.3);
  --transition:all .3s cubic-bezier(.25,.8,.25,1);
}

[data-theme="light"]{
  --bg:#fff; --bg-alt:#f8f9fa; --card:#fff;
  --text:#1a1a2e; --text-muted:#6c757d; --border:#e9ecef; --hover:#e2e6ea;
}

/* Base */
*{margin:0;padding:0;box-sizing:border-box}
html,body{font-family:'Rubik',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;width:100%}
.wrap{padding:1rem;max-width:1400px;margin:0 auto}

/* Top Nav */
.nav{background:var(--bg-alt);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--text);font-weight:700;font-size:1.3rem;text-align:center;white-space:nowrap;margin:0 auto}
.brand img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--primary);margin-bottom:.4rem}
.nav-actions{display:flex;gap:.6rem;align-items:center}

.icon-btn{background:var(--bg);border:none;color:var(--text);font-size:1.2rem;cursor:pointer;padding:.6rem;border-radius:12px;transition:var(--transition);display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;position:relative}
.icon-btn:hover{background:var(--primary);color:#fff;transform:scale(1.05)}

.cart-btn .cart-count,
.cart-count{position:absolute;top:-5px;right:-5px;background:var(--danger);color:#fff;font-size:.7rem;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center}

/* Side category drawer (your <aside class="side-drawer">) */
.side-drawer{position:fixed;top:0;right:0;width:280px;height:100vh;background:var(--bg);box-shadow:-6px 0 25px rgba(0,0,0,.2);z-index:2000;transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);overflow-y:auto;padding:2rem 1rem}
.side-drawer.open{transform:translateX(0)}
.drawer-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1.5rem;border-bottom:2px solid var(--primary);margin-bottom:2rem}
.drawer-header strong{font-size:1.4rem;font-weight:700;background:linear-gradient(90deg,var(--primary),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.drawer-nav{margin-top:1rem}
.drawer-chips{display:flex;flex-direction:column;gap:.8rem;margin:1.5rem 0}
.chip{padding:.8rem 1.2rem;border-radius:16px;text-decoration:none;color:var(--text);background:var(--bg-alt);text-align:right;transition:var(--transition);font-weight:500;position:relative;overflow:hidden;border:1px solid var(--border)}
.chip:hover,.chip.active{background:var(--primary);color:#fff;transform:translateX(-4px);border-color:var(--primary)}
.chip.active{box-shadow:0 0 0 2px rgba(139,92,246,.3)}

/* Backdrop for side menu */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:var(--transition);z-index:1500}
.backdrop.open{opacity:1;visibility:visible}

/* Hero */
.hero{padding:2rem 1rem 0.5rem;text-align:center;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(139,92,246,.1) 0%,transparent 70%);animation:pulse 8s infinite;z-index:-1}
@keyframes pulse{0%,100%{transform:scale(.95);opacity:.7}50%{transform:scale(1.05);opacity:.3}}
.hero h1{font-size:1.8rem;font-weight:800;margin-bottom:1rem;background:linear-gradient(90deg,#fff,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 10px rgba(0,0,0,.2)}

/* Slider (ids/classes per your HTML and JS) */
.slider{position:relative;padding:1.5rem 0;max-width:100%;margin:0 auto}
#heroTrack.s-track{display:flex;gap:1.5rem;overflow-x:auto;scroll-behavior:smooth;padding:1rem 1.5rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#heroTrack.s-track::-webkit-scrollbar{display:none}

.carousel-card{ /* our JS adds <a class="carousel-card"> */
  position:relative; min-width:280px; background:var(--card); border-radius:20px; overflow:hidden;
  text-decoration:none; color:var(--text); box-shadow:var(--shadow); transition:var(--transition); flex:0 0 auto; border:1px solid var(--border)
}
.carousel-card:hover{transform:translateY(-8px);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.carousel-card img{width:100%;height:200px;object-fit:cover;display:block}
.s-badge{position:absolute;top:1rem;right:1rem;background:var(--primary);color:#fff;padding:.4rem .8rem;border-radius:20px;font-size:.8rem;font-weight:700;z-index:2}
.s-info{padding:1.2rem}
.s-title{font-weight:700;font-size:1.1rem;margin-bottom:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.s-price{font-weight:800;font-size:1.3rem;color:var(--success);margin-top:.5rem}

.s-nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--bg-alt);color:var(--text);border:none;width:40px;height:40px;border-radius:50%;font-size:1.5rem;cursor:pointer;z-index:10;transition:var(--transition)}
.s-nav:hover{background:var(--primary);color:#fff}
.s-nav.prev{right:80px}
.s-nav.next{right:20px}

/* Product grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;padding:1.5rem;max-width:1400px;margin:0 auto}
.card{background:var(--card);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);border:1px solid var(--border);display:flex;flex-direction:column}
.card.card-compact{border-radius:16px}
.card:hover{transform:translateY(-8px);box-shadow:0 12px 30px rgba(0,0,0,.3)}

.thumb{display:block;position:relative;width:100%;padding-bottom:100%;overflow:hidden}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:var(--transition)}
.card:hover .thumb img{transform:scale(1.05)}

.info{padding:1rem;display:flex;flex-direction:column;flex-grow:1}
.title{font-weight:700;font-size:1.05rem;margin-bottom:.4rem;color:var(--text);line-height:1.3}
.meta{color:var(--text-muted);font-size:.85rem;margin:.6rem 0}
.price-pill{background:var(--success);color:#fff;padding:.3rem .6rem;border-radius:20px;font-weight:700;font-size:.9rem}

.actions{display:flex;gap:.5rem;margin-top:1rem}
.actions.compact{gap:.6rem}
.btn{flex:1;padding:.12rem;border:none;border-radius:10px;font-weight:800;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.5rem;text-decoration:none}
.btn.add{background:var(--primary);color:#fff}
.btn.add:hover{background:var(--primary-light);transform:translateY(-2px)}
.btn.whats{background:#25D366;color:#fff}
.btn.whats:hover{background:#128C7E;transform:translateY(-2px)}

/* Click feedback & fly-to-cart */
.btn-pressed{transform:scale(.98)}
.fly-ghost{box-shadow:0 6px 24px rgba(0,0,0,.35)}

/* Modal (id="modal" is the backdrop) */
.modal-backdrop,
#modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:3000;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s}
#modal[aria-hidden="false"]{opacity:1;visibility:visible}

.modal{background:var(--bg);border-radius:12px;width:90%;max-width:900px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 40px rgba(0,0,0,.4);position:relative;display:grid;grid-template-columns:2fr 2fr;animation:modalIn .25s ease}
@keyframes modalIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.close-x{position:absolute;top:1rem;left:1rem;background:none;border:none;font-size:1.6rem;color:var(--text);cursor:pointer;z-index:10;padding:.5rem;border-radius:50%}
.close-x:hover{background:var(--hover)}
.pic{grid-column:1;padding:1.2rem;display:flex;align-items:center;justify-content:center}
.pic img{max-width:100%;max-height:420px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.body{grid-column:2;padding:1.2rem;display:flex;flex-direction:column;justify-content:center}
.body h3{font-size:1.6rem;margin-bottom:.6rem;color:var(--text)}
.row{margin:.6rem 0;color:var(--text)}
#mPrice{font-size:1.6rem;color:var(--success)}
.body .actions{margin-top:1rem}

/* Cart drawer (aside.drawer) */
.drawer{position:fixed;bottom:0;right:0;width:100%;max-width:400px;height:100vh;background:var(--bg);box-shadow:-4px 0 20px rgba(0,0,0,.2);z-index:2500;transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}
.drawer[aria-hidden="false"]{transform:translateX(0)}
.drawer header{padding:1.2rem;border-bottom:2px solid var(--primary);display:flex;justify-content:space-between;align-items:center;background:var(--bg-alt)}
.items{flex-grow:1;overflow-y:auto}
.item{display:flex;gap:1rem;padding:1.1rem;border-bottom:1px solid var(--border);align-items:center}
.item:last-child{border-bottom:none}
.item img{border-radius:8px}
.item>div:nth-child(2){flex:1}
.item>div:last-child{text-align:end;display:flex;flex-direction:column;gap:.4rem}
.drawer footer{padding:1.2rem;border-top:1px solid var(--border);background:var(--bg-alt)}
.footer-actions{display:flex;gap:.6rem;margin-top:.8rem}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#d43b3b}
.btn.primary{background:var(--primary);color:#fff}

/* Contact overlay */
.contact-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:var(--transition);z-index:2600}
.contact-overlay.open{opacity:1;visibility:visible}
.contact-sheet{position:absolute;inset:auto 0 0 0;margin:auto;background:var(--card);border-radius:16px 16px 0 0;max-height:85vh;overflow:auto;box-shadow:0 -10px 40px rgba(0,0,0,.35)}
.contact-sheet header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--border)}
.contact-content{padding:1rem 1.2rem}
.contact-close{background:none;border:none;color:var(--text);font-size:1.2rem;cursor:pointer}

/* Animations */
@keyframes bump{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.bump{animation:bump .4s ease}

/* Responsive */
@media (min-width:480px){
  .hero h1{font-size:1.2rem}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:768px){
  .modal{grid-template-columns:1fr 1fr}
  .pic,.body{grid-column:auto}
  .grid{grid-template-columns:repeat(3,1fr);gap:1.6rem;padding:2rem 1.5rem}
  .nav .wrap{padding:1rem 1.5rem;max-width:1400px;margin:0 auto}
  .brand{flex-direction:row;gap:.8rem;font-size:1.3rem}
  .brand img{margin-bottom:0}
  .menu-icon{display:none}
}
@media (min-width:1024px){
  .grid{grid-template-columns:repeat(4,1fr)}
}


/*  */
/* מגירת קטגוריות תמיד קיימת בדום, נסגרת עם translateX בלבד */
.side-drawer { display: block; z-index: 2000; transform: translateX(100%); }
.side-drawer.open { transform: translateX(0); }

/* הרקע מאחוריי התפריט */
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; visibility: hidden; z-index: 1500; transition: var(--transition); }
.backdrop.open { opacity: 1; visibility: visible; }

/* כפתור התפריט במובייל נראה; בדסקטופ נסתיר (כמו שכבר עשית) */
.menu-icon { display: inline-flex; }
@media (min-width: 768px) { .menu-icon { display: none; } }


/*  */
.side-drawer {
  display: block;          /* תמיד קיים בדום */
  transform: translateX(100%);
}
.side-drawer.open {
  transform: translateX(0);
}
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.backdrop.open {
  opacity: 2;
  visibility: visible;
}

/* מסילת הקרוסלה */
#heroTrack.s-track {
  direction: ltr;   /* חשוב! מנרמל scrollLeft */
}

/*  */
/* אפקט לחיצה חזק יותר */
/* מצב לחיצה (גדול יותר) */
.card:active,
.card.is-pressed {
  transform: translateY(-8px) scale(1.20);
  z-index: 15;
  transition: transform 0.15s ease;
}

.card:active .thumb img,
.card.is-pressed .thumb img {
  transform: scale(1.25);
  transition: transform 0.15s ease;
}

/* אפקט bounce לאחר שחרור */
.card {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card .thumb img {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/*  */
/* כפתורים בכרטיסי מוצר */
.card .actions .btn {
  flex: 1;
  padding: 0.2rem 0.2rem;       /* ריפוד גדול יותר */
  font-size: 0.9rem;            /* טקסט גדול יותר */
  border-radius: 8px;
  font-weight: 700;
}

/* כפתור "הוסף לסל" */
.card .actions .btn.primary {
  background: var(--primary);
  color: #fff;
}
.card .actions .btn.primary:hover {
  background: var(--primary-light);
  transform: translateY(-2px);
}

/* כפתור "הזמן עכשיו" */
.card .actions .btn.whats {
  background: #25D366;
  color: #fff;
}
.card .actions .btn.whats:hover {
  background: #128C7E;
  transform: translateY(-2px);
}

/* כפתורים במודאל */
.modal .actions .btn {
  flex: 1;
  padding: 0.2rem 0.2rem;       /* עוד יותר גדולים במודאל */
  font-size: 0.9rem;
  border-radius: 12px;
  font-weight: 700;
}

/* ====== אייקונים בהיידר ====== */
.nav .icon-btn {
  font-size: 1rem;       /* היה 1.2rem */
  min-width: 36px;       /* הקטנה */
  height: 36px;
  padding: 0.4rem;
}

/* כפתור שפה */
#langToggle {
  font-size: 0.9rem;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
}

/* ====== כפתור מצב יום/לילה ====== */
#themeToggle {
  font-size: 1rem;       /* אייקון קטן יותר */
}

/* ====== ריווחים בין היידר ל-Hero ====== */
.hero {
  padding: 2rem 1rem 1.5rem; /* היה 4rem למעלה, צמצום */
}

.hero h1 {
  font-size: 1.6rem;     /* אפשר גם להשאיר גדול יותר אם תרצה */
  margin-top: 0.5rem;    /* מקטין את המרחק אחרי ה-nav */
}

/* ====== כפתורי סל הקניות ====== */
.drawer footer .btn {
  font-size: 1rem;          /* טקסט גדול יותר */
  padding: 1rem 1.2rem;     /* ריפוד פנימי גדול */
  border-radius: 10px;
  font-weight: 700;
  flex: 1;                  /* שני הכפתורים לוקחים מקום שווה */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* כפתור מחק הכל */
.drawer footer .btn-danger {
  background: var(--danger);
  color: white;
}
.drawer footer .btn-danger:hover {
  background: #d43b3b;
}

/* כפתור הזמן בוואטסאפ */
.drawer footer .btn.primary {
  background: #25D366; /* צבע ירוק לוואטסאפ */
  color: white;
}
.drawer footer .btn.primary:hover {
  background: #128C7E;
}

/* ====== כפתורי סל הקניות ====== */
.drawer footer .btn {
  font-size: 1rem;          /* טקסט גדול יותר */
  padding: 1rem 2.2rem;     /* ריפוד פנימי גדול */
  border-radius: 10px;
  font-weight: 700;
  flex: 1;                  /* שני הכפתורים לוקחים מקום שווה */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* כפתור מחק הכל */
.drawer footer .btn-danger {
  background: var(--danger);
  color: white;
}
.drawer footer .btn-danger:hover {
  background: #d43b3b;
}

/* כפתור הזמן בוואטסאפ */
.drawer footer .btn.primary {
  background: #25D366; /* צבע ירוק לוואטסאפ */
  color: white;
}
.drawer footer .btn.primary:hover {
  background: #128C7E;
}


/*  */

/* ====== Header/Nav ====== */
.nav {
  position: fixed;              /* ננעל למעלה */
  top: 0;
  left: 0;
  width: 100%;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
}

.nav .wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.6rem 1rem;          /* רווח קטן יותר */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* לוגו + שם */
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 1.1rem;             /* טיפה קטן */
}

.brand img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary);
}

/* פעולות צד ימין (שפה + מצב + סל) */
.nav-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* אייקוני כפתורים */
.icon-btn {
  background: var(--bg);
  border: none;
  color: var(--text);
  font-size: 1rem;              /* הקטנת אייקון */
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 8px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;                  /* גודל אחיד */
  height: 36px;
  position: relative;
}

.icon-btn:hover {
  background: var(--primary);
  color: #fff;
  transform: scale(1.05);
}

/* מונה הסל */
.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger);
  color: white;
  font-size: 0.65rem;
  font-weight: bold;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* כדי שהHero לא יעלה על ההידר */
.hero {
  margin-top: 70px;  /* מתאים לגובה ההידר */
}

/* כיסוי מלא מאחורה */
.backdrop,
#menuBackdrop {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0,0,0,0.5); /* רקע כהה */
  z-index: 1999; /* נמוך בכוונה מהתפריט */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.backdrop.open,
#menuBackdrop.open {
  opacity: 1;
  visibility: visible;
}

/* התפריט עצמו */
.side-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  background: var(--bg);
  z-index: 2000; /* גבוה יותר מהמוצרים ומה-backdrop */
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  box-shadow: -6px 0 25px rgba(0,0,0,0.3);
}

.side-drawer.open {
  transform: translateX(0);
}

/* כש Drawer פתוח – נועל את הגלילה של הדף */
body.drawer-open {
  overflow: hidden;
}

/* קבע משתנה לגובה ההידר */
:root { --nav-h: 10px; } /* עדכן ל-70/72 אם צריך */

/* ההידר מקבל גובה קבוע */
.nav { height: var(--nav-h); }

/* אפשרות 1 — לדחוף את כל העמוד למטה: */
body { padding-top: var(--nav-h); }

/* אפשרות 2 — רק הקרוסלה (אם לא רוצה לדחוף את כל העמוד): */
#heroCarousel { margin-top: var(--nav-h); }

/* אם היה לך קודם .hero { margin-top: ... } בטל אותו: */
.hero { margin-top: 0; }

/* ברירת מחדל — קרוסלה במרכז */
#heroCarousel {
  display: flex;
  justify-content: center;   /* מרכז אופקי */
  align-items: center;       /* מרכז אנכי אם יש גובה קבוע */
  text-align: center;
  padding: 1rem 0;
  position: relative;
}

#heroCarousel .s-track {
  display: flex;
  justify-content: center;   /* ממרכז את הקלפים */
  align-items: center;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* גלילה חלקה עם "עצירה" */
  -webkit-overflow-scrolling: touch;
}

#heroCarousel .carousel-card {
  flex: 0 0 auto;
  scroll-snap-align: center; /* כל כרטיס יתיישב במרכז */
  text-align: center;
  min-width: 260px;
  max-width: 80%;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 0.5rem;
}

#heroCarousel .carousel-card img {
  display: block;
  margin: 0 auto;             /* ממרכז את התמונה */
  width: 200px;               /* מתאים לגודל מסך קטן */
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
}

/* ===== מובייל בלבד ===== */
@media (max-width: 767px) {
  #heroCarousel {
    justify-content: center;
  }
  #heroCarousel .s-track {
    justify-content: center;
    padding: 0 0.5rem;
  }
}


/* ====== Header/Nav ====== */
.nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  height: 90px;              /* ✨ הגדלת הגובה */
  display: flex;
  align-items: center;       /* מרכז אנכי */
  justify-content: center;   /* מרכז אופקי */
}

/* כל התוכן בהידר */
.nav .wrap {
  display: flex;
  align-items: center;       /* מרכז אנכי */
  justify-content: center;   /* מרכז אופקי */
  gap: 1rem;
  width: 100%;
  max-width: 1400px;
  text-align: center;
}

/* הלוגו + הכותרת */
.brand {
  display: flex;
  flex-direction: column;   /* לוגו מעל כותרת */
  align-items: center;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 1.2rem;
}

.brand img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  object-fit: cover;
  margin-bottom: .3rem;
}

/* פעולות (שפה, מצב, סל) */
.nav-actions {
  display: flex;
  gap: .8rem;
  align-items: center;
  justify-content: center;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text);
  transition: var(--transition);
}
.icon-btn:hover {
  background: var(--primary);
  color: #fff;
}

/* מונה סל */
.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger);
  color: #fff;
  font-size: .7rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* כדי לא להסתיר את ההירו/קרוסלה */
body { padding-top: 90px; } /* ✨ מותאם לגובה החדש */


.brand {
  display: flex;
  flex-direction: row;   /* לוגו ושם בשורה אחת */
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 1.2rem;
  gap: .3rem;            /* ✨ רווח קטן יותר בין לוגו לשם */
}

.brand img {
  width: 48px;           /* אפשר לשנות אם גדול מדי */
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  object-fit: cover;
  margin: 0;             /* ✨ אין מרווח מיותר */
}

/* משתנים חדשים */
:root {
  --brand-color: #8B5CF6;     /* צבע סגול יפה למצב לילה */
}
[data-theme="light"] {
  --brand-color: #5B21B6;     /* גוון מתאים ליום (כהה יותר על רקע בהיר) */
}

/* עיצוב השם של העסק */
.brand .title {
  color: var(--brand-color);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

/*  */
/* שכבת overlay */
.contact-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease;
  z-index: 2600;
  display: flex; align-items: flex-end; /* sheet מלמטה; אפשר center למרכז */
}
.contact-overlay.open { opacity: 1; visibility: visible; }

/* ה־Sheet עצמו */
.contact-sheet {
  width: 100%; max-height: 85vh; overflow: auto;
  background: var(--card);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,.35);
  margin: 0 auto;
}
.contact-sheet header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--border);
}
.contact-content { padding: 1rem 1.2rem; }
.contact-close { background:none; border:none; color:var(--text); font-size:1.2rem; cursor:pointer; }

/* אם תרצה במרכז מסך:
.contact-overlay { align-items:center; }
.contact-sheet { border-radius:16px; max-width:700px; }
*/

.card .actions .btn.add {
  height: 46px;
  font-size: .95rem;
  font-weight: 800;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: 0 .9rem;
}
.card .actions .btn.add svg {
  width: 18px; height: 18px; display: inline-block; vertical-align: middle;
}

/* כפתור הוסף לסל במודאל – אייקון מיושר */
.modal .actions .btn.add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.modal .actions .btn.add svg {
  width: 18px; height: 18px; vertical-align: middle; display: inline-block;
}

.card .actions .btn.add,
.modal .actions .btn.add {
  height: 46px;
  font-size: .95rem;
  font-weight: 800;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; padding: 0 .9rem;
}
.card .actions .btn.add svg,
.modal .actions .btn.add svg {
  width: 18px; height: 18px; display: inline-block; vertical-align: middle;
}

.carousel-card .actions {
  margin-top: 0.8rem;
  display: flex;
  justify-content: center;
}
.carousel-card .btn.add {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 10px;
  font-weight: 700;
  display: flex; align-items: center; gap: 0.4rem;
}
.carousel-card .btn.add svg {
  width: 18px; height: 18px;
}

/*  */

  /* כפתורים בסוף: קודם הוסף לסל ואז וואטסאפ */
  .modal .actions { 
    grid-area: actions; 
    display: grid; grid-template-columns: 1fr; gap: .6rem; 
    margin-top: .4rem;
  }
  .modal .actions .btn.add { order: 1; }
  .modal .actions .btn.whats { order: 2; }

  
/* טוויקים כלליים לטיפוגרפיה בדסקטופ (לא חובה) */
.modal .body h3#mTitle { margin-bottom: .4rem; }
.modal #mPrice { margin: .2rem 0 .4rem; }

 /* שיוך אזורים */
 #mTitle { grid-area: title; font-size: 1.25rem; font-weight: 800; text-align: center; margin: 0; }
 #mPrice { grid-area: price; font-size: 1.2rem; font-weight: 900; color: var(--success); text-align: center; }
 #mDesc  { grid-area: desc;  font-size: .95rem; line-height: 1.55; color: var(--text); text-align: center; }
 #mCat   { grid-area: cat;   font-size: .9rem; color: var(--text-muted); text-align: center; }