/* =========================================
   Tablet Waiter Theme — Responsive, Clean & RTL
   - Coffee palette, calm accents
   - Mobile-first; no horizontal scrolls
   - Safe-area, 100dvh; tablets & desktop
========================================= */

/* ---------- Design Tokens ---------- */
:root{
  /* Palette */
  --bg1:#14292a;  /* coffee */
  --bg2:#1a1410;  /* deeper */
  --glass:#130f0cd9; /* translucent card */
  --txt:#faf7f2;   /* creamy text */
  --muted:#c8b9a6; /* beige */
  --accent:#d4a373;/* caramel */
  --stroke:#3a2b1f;/* borders */
  --shadow:0 10px 25px rgba(0,0,0,.35);
  --radius:16px;

  /* Aliases */
  --card:var(--glass);
  --success:#10b981;
  --danger:#ef4444;

  /* Layout rhythm */
  --gap-sm:10px;
  --gap:12px;
  --gap-lg:16px;

  /* Edge padding for small screens */
  --edge-pad:0px;
}

@media (max-width:768px){
  :root{ --edge-pad:12px; }
}

/* ---------- Reset & Base ---------- */
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;padding:0; -webkit-text-size-adjust:100%; overscroll-behavior-y:contain}
html{color-scheme:dark}
body{
  direction: rtl;
  color:var(--txt);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  line-height:1.5;
  background:
    radial-gradient(1200px 800px at 70% -10%, #3c2b1f 0%, transparent 60%),
    linear-gradient(160deg,var(--bg1),var(--bg2));
  background-attachment:fixed;
  overflow-x:hidden;
  padding:var(--edge-pad);
}
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.06;
  background:url('/images/noise.png') 0 0/200px 200px;
}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:12px}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- App Root ---------- */
#appRoot{
  min-height:100dvh; /* modern mobiles */
  min-height:100svh; /* small viewport units */
  display:flex;flex-direction:column;
}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:var(--gap);
  border-bottom:1px solid var(--stroke);
  border-radius:0;
  margin:0;
  padding-inline: max(12px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  padding-block: 12px;
  background:linear-gradient(180deg,#1a140fd9,#0f0b08cc);
  backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#3b2a20;border:1px solid var(--stroke)}
.header-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.net{display:flex;align-items:center;gap:8px;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:9999px;background:var(--danger);border:1px solid #fff2;box-shadow:0 0 0 2px #fca5a544}

@media (max-width:640px){
  .brand h1{font-size:16px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
}
@media (max-width:400px){ .brand h1{display:none} }

/* ---------- Page Container & Layout ---------- */
.container{
  max-width:1300px;
  width:100%;
  margin:18px auto;
  padding-inline: clamp(10px, 2.5vw, 20px);
}
@media (max-width:768px){
  .container{ margin:12px auto; padding-inline: max(var(--edge-pad), env(safe-area-inset-left)); }
}

.layout{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:var(--gap-lg);
  margin-top:14px;
  flex:1; min-height:0;
}
@media (max-width:1200px){ .layout{ grid-template-columns:320px 1fr; } }
@media (max-width:1024px){ .layout{ grid-template-columns:1fr; gap:var(--gap); } } /* iPad 10–11" landscape & down */
@media (max-width:834px){ .layout{ gap:var(--gap); } } /* iPad 10/11" portrait */
@media (max-width:800px){ .layout{ gap:var(--gap); } } /* 8" tablets */
@media (max-width:600px){ .layout{ gap:var(--gap); } } /* 7" tablets & phones */

.panel{
  background:linear-gradient(180deg,var(--glass),#0c0907e6);
  border:1px solid var(--stroke);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;min-height:0;color:var(--txt)
}

/* ---------- Inputs & Buttons ---------- */
input,select,textarea,button{
  font-size:16px;min-height:44px;border-radius:12px;
  border:1px solid var(--stroke);padding:10px 12px;background:#0f0b08cc;color:var(--txt);
  transition:box-shadow .15s,transform .02s,border-color .15s,background .2s
}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 4px rgba(212,163,115,.25)}
textarea{resize:vertical}

.btn{background:linear-gradient(180deg,#1a140fd9,#0f0b08cc);color:var(--txt);cursor:pointer;border:1px solid #4b3a2c}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);color:#2a1e14;border-color:transparent}
.btn.secondary{background:transparent}
.btn.danger{background:#3b1f1f;border-color:#5b2a2a;color:#ffb4b4}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn.loading::after{content:' …';display:inline-block;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px;margin-inline-start:8px;border-radius:9999px;background:var(--accent);color:#2a1e14;font-weight:800;font-size:13px;line-height:1;transform:translateY(-1px)}
@keyframes bump{0%{transform:translateY(-1px) scale(1)}20%{transform:translateY(-1px) scale(1.15)}100%{transform:translateY(-1px) scale(1)}}
.badge.bump{animation:bump .35s ease}
.badge.hidden{display:none}

/* ---------- Cart ---------- */
.cart-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.total{font-size:18px;font-weight:800}
#cartList{overflow:auto;flex:1;min-height:120px}
.cart-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-bottom:1px dashed var(--stroke);
}
.cart-item > .meta{ flex:1; }
.cart-item .qty-group{ margin-inline-start: 6px; }
.rowmuted{font-size:12px;color:var(--muted)}
.qty{width:90px;text-align:center}
.cart-thumb{width:44px;height:44px;object-fit:cover;border-radius:10px;border:1px solid var(--stroke);background:#0f0b08}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.pills{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.pill{padding:6px 10px;border:1px solid var(--stroke);border-radius:999px;cursor:pointer;background:transparent;min-width:44px;min-height:36px;color:var(--txt)}
.pill.active{background:var(--accent);color:#2a1e14;border-color:transparent}

/* ---------- Categories (Square, crisp title) ---------- */
.cat-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
  gap:var(--gap);
}
@media (max-width:700px){ .cat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px){
  .cat-card img{
    width: 54px;
    height: 54px;
  }
}


.cat-card{
  position:relative;
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
  cursor:pointer;
  background:linear-gradient(180deg,var(--glass),#0c0907e6);
  transition:transform .06s ease, box-shadow .15s ease;
  aspect-ratio: 1 / 1;           /* ריבוע קבוע לכל כרטיס */
  display:grid;place-items:stretch;
}
.cat-card:hover{transform:translateY(-1px);box-shadow:0 16px 35px rgba(0,0,0,.45)}

/* תמונה ממורכזת ללא חיתוך (contain), עם padding עדין */
.cat-card .cat-visual{
  width:100%;height:100%;
  display:grid;place-items:center;
  padding:18px;
  background: #0f0b08;
}
/* אייקון בתוך כרטיס קטגוריה */
.cat-card img{
  width: 72px;        /* קבוע – לא יגדל במסך גדול */
  height: 72px;       /* קבוע */
  object-fit: contain;/* לא יחתוך, יישב במרכז */
  display: block;
  margin: 0 auto 10px;
}

/* כותרת ברורה על גבי פס תחתון */
.cat-title{
  position:absolute;inset-inline:0;inset-block-end:0;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  padding:10px 12px;
  text-align:center;
  font-weight:900;
  font-size: clamp(14px, 2.5vw, 18px);
  color:var(--txt);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* למי שמעדיף תמונה ממלאת (על חשבון חיתוך), הוסף class="cat-card cover" */
.cat-card.cover img{ object-fit:cover; width:100%; height:100%; }

/* ---------- Products ---------- */
.products-scroll{
  overflow:auto;
  border:1px solid var(--stroke);
  border-radius:14px;
  padding-bottom:max(8px, env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#16110dd9,#0e0a08cc);
  max-height: calc(100dvh - 260px);  /* fits below header/panels */
}
@media (max-width:640px){ .products-scroll{ max-height:none; } }

table{width:100%;border-collapse:collapse;table-layout:fixed;color:var(--txt)}
thead th{position:sticky;top:0;z-index:1;padding:12px;text-align:right;font-weight:800;border-bottom:1px solid var(--stroke);background:#1b1511}
tbody td{padding:12px;border-bottom:1px solid #2a2019;overflow-wrap:anywhere}
tbody tr:hover{background:#140f0c}

.prod-cell{display:flex;align-items:center;gap:10px}
.prod-img{width:44px;height:44px;object-fit:cover;border-radius:10px;border:1px solid var(--stroke);background:#0f0b08}
.prod-name{font-weight:700}

/* Table → cards on small screens */
@media (max-width:640px){
  #productsTable thead{display:none}
  #productsTable,#productsTable tbody,#productsTable tr,#productsTable td{display:block;width:100%}
  #productsTable tr{
    background:linear-gradient(180deg,var(--glass),#0c0907e6);
    border:1px solid var(--stroke);border-radius:12px;padding:10px 12px;margin-bottom:10px;box-shadow:var(--shadow)
  }
  #productsTable td{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:none!important}
  #productsTable td::before{content:attr(data-label);font-weight:700;color:var(--muted);margin-inline-end:10px}
  #productsTable td[data-label=""],#productsTable td[data-label="الاسم"]{justify-content:flex-start;gap:10px}
  #productsTable .qty{width:90px}
  #productsTable button{padding:10px 14px}
}

/* ---------- Fullscreen flows ---------- */
.fullscreen{
  position:fixed;inset:0;
  background:linear-gradient(160deg,var(--bg1),var(--bg2));
  z-index:80;display:flex;flex-direction:column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.fullscreen .modern-backbar{position:sticky;top:0;margin:0;padding:10px 12px;border:none;border-radius:0}
.fullscreen .products-scroll{flex:1 1 auto;overflow:auto;border:none;border-radius:0;padding:0 0 calc(8px + env(safe-area-inset-bottom))}
@media (max-width:640px){ .fullscreen .products-scroll{ max-height:none } }

/* ---------- Backbar ---------- */
.modern-backbar{
  position:sticky;top:0;z-index:61;display:flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,#1a140fd9,#0f0b08cc);
  border-bottom:1px solid var(--stroke);padding:8px 12px;color:var(--txt)
}
.back-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;border:1px solid var(--stroke);background:#0f0b08cc;color:var(--txt);cursor:pointer}
.back-btn:hover{background:#140f0c}
.search-wrap{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
#search{min-width:200px;font-size:14px}
@media (max-width:720px){#search{min-width:140px}}

/* ---------- Toast ---------- */
.toast{
  position:fixed;
  inset-inline-start: max(16px, env(safe-area-inset-left));
  inset-block-end:  max(16px, env(safe-area-inset-bottom));
  background:var(--accent);color:#2a1e14;padding:12px 14px;border-radius:14px;box-shadow:var(--shadow);z-index:9999;font-weight:900;display:none
}

/* ---------- FX: +1 bubble ---------- */
.fx-layer{position:fixed;inset:0;pointer-events:none;z-index:1000}
.float-plus{position:absolute;translate:-50% -50%;font-weight:800;font-size:14px;padding:4px 8px;border-radius:12px;background:rgba(212,163,115,.12);border:1px solid var(--accent);backdrop-filter:blur(3px);animation:floatUp .8s ease forwards;color:var(--txt)}
@keyframes floatUp{0%{opacity:0;translate:-50% calc(-50% + 8px)}10%{opacity:1}100%{opacity:0;translate:-50% calc(-50% - 28px)}}

/* ---------- Quick cart buttons ---------- */
.cart-btn{background:#0f0b08cc;border:1px solid var(--stroke)}
.cart-btn:hover{background:#140f0c}
.cart-top{display:inline-flex;align-items:center;gap:6px;margin-inline-start:8px;white-space:nowrap}

/* ---------- Auth chip ---------- */
.auth-panel{display:flex;align-items:center;gap:8px}
.auth-row{display:flex;align-items:center;gap:10px}
#logoutBtnTop{background:transparent;border:2px solid var(--danger);color:var(--danger);border-radius:9999px;padding:6px 12px;min-height:28px;font-size:13px;font-weight:800;line-height:1.1}
#logoutBtnTop:hover{background:rgba(239,68,68,.08)}
.user-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:9999px;background:#e9eef3;border:1px solid rgba(0,0,0,.06);color:#0f172a;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.user-email{font-weight:900;font-size:14px;color:#0f172a;letter-spacing:.1px}
.chip-dot{width:10px;height:10px;border-radius:9999px;background:var(--success);box-shadow:0 0 0 2px rgba(0,0,0,.05)}
#userEmail{font-size:13px;line-height:1.2;color:var(--muted)}

/* ---------- Order preview overlay ---------- */
.order-preview{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:999;display:flex;justify-content:center;align-items:flex-start;padding-top:40px}
.order-preview-content{background:#1a1410;color:var(--txt);border-radius:16px;padding:20px;width:90%;max-width:600px;max-height:80%;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.3);text-align:right}
.order-preview-content .item{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.order-preview-content .item:last-child{border-bottom:none}
.order-preview-content .item img{margin-inline-end:8px}

/* ---------- Motion & Prefs ---------- */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@keyframes fadeUp{0%{opacity:0;transform:translateY(10px) scale(.98)}60%{opacity:1;transform:translateY(-2px) scale(1.01)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* ---------- Utility ---------- */
.fullw{width:100%}
.flex{display:flex}.ai-c{align-items:center}.jc-b{justify-content:space-between}
.m0{margin:0}.mb8{margin-bottom:8px}


/* حجم صورة المنتج موحّد (مربّع) */
.product-thumb{
  width:100%;
  aspect-ratio: 1 / 1;   /* موحّد للجميع */
  object-fit:cover;       /* قصّ لطيف بدون تمدد */
  border-radius:12px;
  border:1px solid var(--stroke);
  background:#0f0b08;
  margin-bottom:10px;
}

/* رأس البطاقة: الاسم + زر الإضافة بمحاذاة أفقية */
.product-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 8px;
  flex-wrap:wrap; /* במובייל יגלוש שורה נוספת בצורה יפה */
}

/* צד שמאל: שם + תג מחיר */
.name-price{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0; /* כדי לחתוך טקסט נכון כשאין מקום */
}

.product-name{
  margin:0;
  font-weight:900;
  font-size:18px;           /* גדול וברור */
  letter-spacing:.2px;
  line-height:1.25;
  color:var(--txt);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.price-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(180deg,#201812,#0f0b08); /* גוון עדין */
  border:1px solid var(--stroke);
  font-weight:900;
  font-size:14px;
  color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

/* צד ימין: כמות inline + הוסף לסל */
.head-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.qty-group.inline{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--stroke);
  border-radius:10px;
  overflow:hidden;
  background:#0f0b08cc;
}
.qty-group.inline .qty-btn{
  min-width:34px;
  min-height:34px;
  border:none;
  background:#1a1410;
  color:var(--txt);
  font-size:18px;
  cursor:pointer;
}
.qty-group.inline .qty-btn:active{ transform:scale(0.92); }
.qty-group.inline .qty-input{
  width:56px;
  min-height:34px;
  text-align:center;
  border:none;
  background:transparent;
  color:var(--txt);
  font-weight:800;
}

/* כפתור הוסף לסל קטן ומתאים לשורה */
.head-actions .btn.primary{
  min-height:36px;
  padding:0 12px;
  border-radius:12px;
  font-weight:900;
}

/* התאמות מובייל כדי שלא יידחס */
@media (max-width:640px){
  .product-name{ max-width:52vw; }
}

/* زر صغير في الرأس، معقّم للارتفاع */
.head-actions .btn{
  min-height:36px;
  padding:0 10px;
  border-radius:10px;
  font-weight:800;
}

/* فراغ سطر/سطرين بين البطاقات */
:root{ --card-gap: 20px; }              /* عدّلها إلى 24px لو بدك سطرين كبار */
.products-grid{ gap: var(--card-gap); }  /* يطبّق الفراغ بين كل منتج ومنتج */


/* مجموعة الكمية ± */
.qty-group{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--stroke);
  border-radius:10px;
  overflow:hidden;
  background:#0f0b08cc;
}
.qty-btn{
  min-width:38px;
  min-height:38px;
  border:none;
  background:#1a1410;
  color:var(--txt);
  font-size:20px;
  cursor:pointer;
}
.qty-btn:active{ transform:scale(0.9); }
.qty-input{
  width:60px;
  min-height:38px;
  text-align:center;
  border:none;
  background:transparent;
  color:var(--txt);
  font-weight:700;
}


/* =========================================================
   Tablet 11" Focused Overrides (keeps mobile perfect)
   מסכים ~834–1180px רוחב: טיפוגרפיה/גריד/מגע לטאבלט
========================================================= */

/* 11" portrait & small landscape */
@media (min-width:834px) and (max-width:1180px){

  /* קונטיינר מרווח, אין גלילה אופקית */
  .container{
    max-width: 1180px;
    margin: 16px auto;
    padding-inline: clamp(14px, 3vw, 28px);
  }

  /* שני פאנלים נוחים (עגלה + מוצרים), מרווח מוגדל */
  .layout{
    grid-template-columns: 380px 1fr;  /* עגלת צד ידידותית */
    gap: 16px;
  }

  /* טקסטים ברורים יותר לטאבלט */
  .product-name{ font-size: 19px; letter-spacing: .2px; }
  .price-chip{ font-size: 15px; padding: 6px 12px; }

  /* כפתורי מגע גדולים יותר */
  .qty-group.inline .qty-btn,
  .qty-btn{ min-width: 46px; min-height: 46px; font-size: 20px; }
  .qty-group.inline .qty-input,
  .qty-input{ min-height: 46px; width: 64px; font-weight: 800; }
  .head-actions .btn.primary{ min-height: 44px; padding: 0 14px; }

  /* גריד מוצרים – קליל לעין בטאבלט 11" */
  .products-grid{
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
  }

  /* פס גלילה מותאם לגובה הטאבלט (כדי שלא יחתוך) */
  .products-scroll{
    max-height: calc(100dvh - 240px);
  }

  /* קטגוריות – כרטיסים מעט גדולים, אייקון אחיד 64px */
  .cat-grid{
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }
  .cat-card img{
    width: 64px;
    height: 64px;
    object-fit: contain;
  }

  /* פילים של מספרי שולחן – רשת נוחה לאצבע */
  #tablePills{
    display: grid;
    grid-template-columns: repeat(8, minmax(0,1fr));
    gap: 8px;
  }
  #tablePills .pill{ min-height: 44px; }
}

/* 11" LANDSCAPE מדוייק: עוד מקום לרשת מוצרים, עגלת צד רחבה */
@media (min-width:1024px) and (max-width:1180px) and (orientation: landscape){

  .layout{
    grid-template-columns: 420px 1fr;  /* עגלת צד נוחה יותר בלנדסקייפ */
    gap: 18px;
  }

  .products-grid{
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
  }

  .product-name{ font-size: 20px; }
  .price-chip{ font-size: 15.5px; }

  .qty-group.inline .qty-btn,
  .qty-btn{ min-width: 48px; min-height: 48px; }
  .qty-group.inline .qty-input,
  .qty-input{ width: 68px; min-height: 48px; }
}

/* Desktop רחב במיוחד (>1180px) – שומרים אחידות ולא מנפחים אייקוני קטגוריות */
@media (min-width:1181px){
  .cat-card img{ width: 72px; height: 72px; object-fit: contain; }
  .products-grid{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}


/* בדיקה ההזה */
/* במסך הבית: הקטגוריות למעלה, הסל מתחת */
#appRoot.home .layout{
  /* טור אחד – קודם categories panel, אחריו cart */
  grid-template-columns: 1fr;
  gap: var(--gap);
}

/* הפאנל הימני (קטגוריות/מוצרים) מקבל סדר ראשון */
#appRoot.home .layout > section.panel:nth-child(2){
  order: 1;
}

/* פאנל העגלה (השמאלי בדסקטופ) יורד למטה */
#appRoot.home .layout > section.panel#cartPanel{
  order: 2;
}

/* בטאבלט 11" לנדסקייפ אפשר להשאיר טור אחד במסך הבית – נוח לגלילה ולבחירה מהירה */
@media (min-width:1024px) and (orientation: landscape){
  #appRoot.home .layout{
    grid-template-columns: 1fr;  /* בבית — עדיין טור יחיד */
  }
}

/* ברגע שנכנסים לקטגוריה (productsView), ממשיכים עם הגריד הרגיל שלך */





/* nnn */
/* שורת פרטי המוצר (שם + מחיר + ± + הוסף לסל) */
.product-footer{
  display:flex;
  align-items:center;
  justify-content:flex-start; /* RTL: מתחיל מימין */
  gap:10px;                   /* רווח קטן ומסודר בין פריטים */
  flex-wrap:wrap;             /* במובייל יגלוש שורה נוספת בצורה נקייה */
  margin-top:8px;
}

/* שם המוצר */
.product-footer .product-name{
  margin:0;
  font-size:18px;
  font-weight:900;
  color:var(--txt);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: clamp(90px, 24vw, 160px); /* שלא “יבלע” את כל השורה */
}

/* תג מחיר */
.product-footer .price-chip{
  display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:999px;
  background:linear-gradient(180deg,#201812,#0f0b08);
  border:1px solid var(--stroke);
  color:var(--accent);font-weight:900;font-size:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

/* קבוצת כמות קטנה בשורה */
.product-footer .qty-group{
  display:inline-flex;align-items:center;
  border:1px solid var(--stroke);border-radius:10px;
  overflow:hidden;background:#0f0b08cc;
}
.product-footer .qty-btn{
  min-width:32px;min-height:32px;border:none;
  background:#1a1410;color:var(--txt);font-size:18px;cursor:pointer;
}
.product-footer .qty-input{
  width:48px;min-height:32px;text-align:center;
  border:none;background:transparent;color:var(--txt);font-weight:800;
}

/* כפתור הוסף לסל מוקטן לשורה */
.product-footer .btn.primary{
  min-height:34px;padding:0 12px;border-radius:10px;font-weight:800;
}

/* טאבלט 11" – נוחות מגע קצת גדולה יותר */
@media (min-width:834px) and (max-width:1180px){
  .product-footer .qty-btn{ min-width:44px; min-height:44px; }
  .product-footer .qty-input{ min-height:44px; width:60px; }
  .product-footer .btn.primary{ min-height:42px; }
  .product-footer .product-name{ max-width: clamp(140px, 28vw, 220px); }
}



/* Preview overlay: כמות ± ליד המחיר */
.order-preview-content .preview-actions{
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.order-preview-content .qty-group.sm .qty-btn{ min-width:32px; min-height:32px; font-size:18px; }
.order-preview-content .qty-group.sm .qty-input{ width:48px; min-height:32px; font-weight:800; text-align:center; }
.order-preview-content .line-total{ font-weight:700; margin-inline-start:4px; }


/* --- קטגוריות: תמונה מלאה בכרטיס + מקום קבוע לשם --- */
.cat-card{
  position:relative;
  aspect-ratio:1/1;                /* מרובע קבוע */
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
  cursor:pointer;
  background:#0f0b08;              /* רקע בסיס כהה */
  transition:transform .06s ease, box-shadow .15s ease;
  display:block;
}

.cat-card:hover{ transform:translateY(-1px); box-shadow:0 16px 35px rgba(0,0,0,.45); }

/* החלק העליון: אזור התמונה בלבד, משאיר מקום לשם (44px) */
.cat-card .cat-visual{
  height: calc(100% - 44px);       /* משאיר פס לשם בתחתית */
  width:100%;
}

/* תמונה מלאה (cover) ללא עיוות, ממלאת את האזור */
.cat-card .cat-visual img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* פס שם הקטגוריה בתחתית */
.cat-card .cat-title{
  height:44px;
  display:grid; place-items:center;
  padding:0 10px;
  font-weight:900;
  font-size: clamp(14px, 2.4vw, 18px);
  color:var(--txt);
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
  border-top:1px solid rgba(255,255,255,.06);
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* רשת הקטגוריות: מרווח נעים */
.cat-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
  gap: 14px;
}
@media (max-width:700px){ .cat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }


/* תמונת מוצר קטנה יותר כשנמצאים בתוך קטגוריה */
#productsView .product-thumb{
  aspect-ratio: 4/3;         /* מעט נמוכה יותר */
  max-height: 160px;          /* גג טעם טוב לטאבלט */
  margin-bottom: 8px;         /* מעט פחות רווח */
}
@media (max-width:640px){
  #productsView .product-thumb{ max-height: 140px; }
}

/* ריווח בין כל מוצר ומוצר בגריד */
:root{ --card-gap: 14px; }          /* רווח קטן ונעים */
.products-grid{ gap: var(--card-gap); }

/* שורת שם+מחיר+±+הוסף לסל – גם היא עם מרווח נקי לפני הכרטיס הבא */
.product-footer{ margin-top: 6px; }


/* === Products: show full image (no crop), keep clean frame === */

/* מסגרת אחידה לכל תמונת מוצר + ללא חיתוך */
.products-grid .product-thumb{
  width: 100%;
  aspect-ratio: 4 / 3;      /* אפשר 1/1 אם אתה מעדיף ריבוע */
  object-fit: contain;       /* מציג הכל – בלי לחתוך */
  object-position: center;
  background: #0f0b08;      /* רקע עדין סביב 'פסים שחורים' אם יש */
  padding: 6px;             /* מרווח קטן סביב התמונה */
  border: 1px solid var(--stroke);
  border-radius: 12px;
  margin-bottom: 8px;
}

/* אם היה לך קודם כלל שמגדיר cover בתוך productsView – נעקוף אותו כאן */
#productsView .product-thumb{
  object-fit: contain !important;
  max-height: 180px;        /* שומר גובה נעים בטאבלט; אפשר לכוון */
}

/* במובייל אפשר קצת פחות גובה */
@media (max-width:640px){
  #productsView .product-thumb{ max-height: 150px; }
}

.product-card.cover .product-thumb{ object-fit: cover; }



/* Cart panel compact: רק מספר הזמנה + שעה */
#cartPanel.compact{
  padding:10px 12px;
  min-height:auto;
}
#cartPanel.compact .total,
#cartPanel.compact #cartList,
#cartPanel.compact .hr,
#cartPanel.compact #cartCount,
#cartPanel.compact > div:last-of-type{  /* בלוק "تفاصيل الطلبية" */
  display:none !important;
}
#cartPanel.compact .cart-title{ margin-bottom:4px; }
#cartPanel.compact #orderMeta{
  margin:0;
  font-weight:800;
  font-size:14px;
  color:var(--muted);
}


/* === Categories: title BELOW the image === */

/* הכרטיס כסידור טורי: תמונה למעלה, שם למטה */
.cat-card{
  display:flex;
  flex-direction:column;
  aspect-ratio: 1/1;
  overflow:hidden;
}

/* אזור התמונה – מרובע מלא */
.cat-card .cat-visual{
  width:100%;
  aspect-ratio: 1/1;      /* שומר ריבוע */
  height:auto;            /* בלי calc(100% - 44px) */
}

/* תמונה מלאה (cover) בלי עיוות */
.cat-card .cat-visual img{
  width:100%; height:100%;
  object-fit: cover;      /* אם אתה מעדיף בלי חיתוך: contain */
  display:block;
}

/* הכותרת כבלוק נפרד מתחת לתמונה (לא position:absolute) */
.cat-card .cat-title{
  position: static;       /* חשוב: מבטל overlay */
  height:auto;
  padding:10px 12px;
  text-align:center;
  font-weight:900;
  font-size: clamp(14px, 2.4vw, 18px);
  color: var(--txt);
  background: rgba(0,0,0,.18);     /* פס עדין; אפשר לשים 'transparent' אם לא רוצים */
  border-top: 1px solid rgba(255,255,255,.06);
  /* שתי שורות מקסימום + חיתוך נקי */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ריווח נעים בגריד */
.cat-grid{
  grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
  gap:14px;
}

/* דסקטופ רחב – לא מנפחים יותר מדי */
@media (min-width:1181px){
  .cat-grid{ grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
}


/* === Categories: show title BELOW the image (no clipping) === */

/* הכרטיס כבר לא ריבוע — גובה אוטומטי: ריבוע לתמונה + פס שם */
.cat-card{
  display:flex;
  flex-direction:column;
  aspect-ratio: auto !important;   /* מבטל את 1/1 שהיה קודם */
  overflow: visible !important;     /* שלא ייחתך שום דבר */
}

/* אזור התמונה נשאר ריבוע מלא */
.cat-card .cat-visual{
  width:100%;
  aspect-ratio: 1 / 1;
  height:auto;
}

.cat-card .cat-visual img{
  width:100%; height:100%;
  object-fit: cover;   /* או contain אם לא רוצים חיתוך */
  display:block;
}

/* הכותרת בתור בלוק מתחת לתמונה (לא position:absolute) */
.cat-card .cat-title{
  position: static !important;
  min-height: 44px;               /* פס שם קבוע ונקי */
  display: grid; place-items: center;
  padding: 0 12px;
  text-align:center;
  font-weight:900;
  font-size: clamp(14px, 2.4vw, 18px);
  color: var(--txt);
  background: rgba(0,0,0,.18);    /* פס עדין; אפשר לשנות/להסיר */
  border-top: 1px solid rgba(255,255,255,.06);
  /* שתי שורות מקסימום + חיתוך יפה */
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* רשת נעימה */
.cat-grid{
  grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
  gap: 14px;
}


/* === Categories: image square on top, title BELOW (no overlay) === */

/* הכרטיס כבר לא ריבוע; גובה אוטומטי: ריבוע לתמונה + שורת שם */
.cat-card{
  display:flex;
  flex-direction:column;
  aspect-ratio:auto !important;
  overflow:visible !important;
}

/* אזור התמונה נשאר ריבוע מלא */
.cat-card .cat-visual{
  width:100%;
  aspect-ratio:1 / 1;
  height:auto;
}

/* תמונה ממלאת את הריבוע; אם לא רוצים חיתוך, ראה ההערה למטה */
.cat-card .cat-visual img{
  width:100%;
  height:100%;
  object-fit: cover; /* או contain אם מעדיף ללא חיתוך */
  display:block;
}

/* הכותרת מתחת לריבוע – לא absolute */
.cat-card .cat-title{
  position:static !important;
  padding:10px 12px;
  min-height:44px;
  display:grid;
  place-items:center;
  text-align:center;
  font-weight:900;
  font-size:clamp(14px, 2.4vw, 18px);
  color:var(--txt);
  background:transparent;              /* היה overlay? עכשיו שקוף */
  border-top:1px solid rgba(255,255,255,.08);
  /* שתי שורות מקסימום */
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

/* ========== Fullscreen category: real full height, no bottom cut ========== */

/* המסך המלא של מוצרים */
#productsView.fullscreen{
  position: fixed;
  inset: 0;                         /* תופס את כל המסך */
  z-index: 80;
  display: flex;
  flex-direction: column;
  /* שומר על ה־notch / home bar */
  padding: env(safe-area-inset-top)
           env(safe-area-inset-right)
           env(safe-area-inset-bottom)
           env(safe-area-inset-left);
  background: linear-gradient(160deg,var(--bg1),var(--bg2));
}

/* בר עליון נשאר דבוק למעלה */
#productsView.fullscreen .modern-backbar{
  position: sticky;
  top: 0;
  z-index: 81;
  margin: 0;
  border: none;
  border-radius: 0;
}

/* אזור המוצרים ממלא את כל השאר – בלי max-height */
#productsView.fullscreen .products-scroll{
  flex: 1 1 auto;
  height: auto;
  max-height: none !important;      /* עוקף כלל קודם של max-height */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: none;
  border-radius: 0;
  padding: 0 0 max(12px, env(safe-area-inset-bottom));
}

/* אופטימיזציות טאבלט 11" – רשת מרווחת ופריימים לא חותכים */
@media (min-width:834px) and (max-width:1180px){
  #productsView.fullscreen .products-grid{
    grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
    gap: 16px;
  }
  #productsView.fullscreen .product-thumb{
    max-height: 180px;
    object-fit: contain;            /* תמונה ברורה ללא חיתוך */
    padding: 6px;
    background: #0f0b08;
  }
}

/* במובייל – בלי חיתוך גם כן */
@media (max-width:640px){
  #productsView.fullscreen .product-thumb{
    max-height: 150px;
    object-fit: contain;
    padding: 6px;
  }
}

/* אופציונלי: כשפותחים מסך מלא, נועלים את גלילת ה-body מאחורה */
.body-lock{ overflow: hidden; }


/* ==== Products: רווח אנכי ≈ שתי שורות בין כרטיסים ==== */

/* רק במסך המוצרים */
#productsView .products-grid{
  /* שומרים על הרוחב כמו שהיה */
  column-gap: var(--card-gap, 14px);
  /* ומגדילים את המרווח האנכי לכ־2 שורות טקסט */
  row-gap: calc(2 * 1.2em);   /* ≈ two lines */
}

/* אם הדפדפן תומך ביחידת lh – נהפוך את זה לדויק יותר */
@supports (height: 1lh){
  #productsView .products-grid{ row-gap: 2lh; }
}

/* מרווח קטן בתוך הכרטיס אחרי השורה של שם+מחיר+כמות+הוסף */
.product-footer{
  margin-block-end: .5rem;
}