/* =========================================================
   עילאי מרקט - style.css מנוקה בצורה שמרנית
   ניקוי שבוצע: מחיקת הכרזות CSS שנדרסו מאוחר יותר באותו selector ובאותו מצב מסך.
   נגישות נשמרה: focus / aria / sr-only / visually-hidden / prefers-reduced-motion / contrast לא נוקו אוטומטית.
   ========================================================= */

:root {
  --page-max-width: 860px;
  --text-main: #111827;
  --text-soft: #64748b;
  --text-light: #ffffff;
  --brand-orange: #f97316;
  --brand-orange-dark: #ea580c;
  --glass-white: rgba(255, 255, 255, 0.92);
  --glass-white-soft: rgba(245, 247, 250, 0.84);
  --glass-border: rgba(220, 226, 232, 0.95);
  --glass-black: rgba(8, 10, 14, 0.78);
  --glass-black-soft: rgba(20, 24, 30, 0.58);
  --glass-black-border: rgba(255, 255, 255, 0.18);
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #f59e0b;
  --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.14);
  --shadow-medium: 0 20px 44px rgba(15, 23, 42, 0.18);
  --shadow-strong: 0 28px 70px rgba(0, 0, 0, 0.28);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: 'Rubik', Arial, sans-serif;
  color: var(--text-main);
}

/* =========================================================
   SITE BACKGROUND
   רקע האתר - מחשב / מובייל
   ========================================================= */

body {
  position: relative;
  direction: rtl;
  overflow-x: hidden;

  background-color: #17110d;
  background-image: url("background-desktop.jpg");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
  background-attachment: scroll;
}

/* מובייל */
@media screen and (max-width: 768px) {
  body {
    background-image: url("background-mobile.jpg");
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 100% auto;
    background-attachment: scroll;
  }
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.20) 0%,
      rgba(0, 0, 0, 0.10) 34%,
      rgba(0, 0, 0, 0.06) 58%,
      rgba(0, 0, 0, 0.14) 100%
    );
}

body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 28%),
    radial-gradient(circle at top right, rgba(0, 0, 0, 0.10), transparent 30%);
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

button {
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
}

.hidden {
  display: none !important;
}

.topbar,
.app-shell,
.floating-cart-bar,
.cart-drawer-overlay,
.toast,
.accessibility-button,
.accessibility-overlay {
  position: relative;
  z-index: 1;
}

.app-shell {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding-bottom: 120px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.topbar-inner {
  position: relative;
  max-width: var(--page-max-width);
  margin: 0 auto;
  gap: 12px;
}

.logo-wrap {
  width: 100%;
}

.logo-wrap img {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.06));
}

.cart-fab {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #111827;
  font-size: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(238, 241, 245, 0.90));
  border: 1.5px solid rgba(205, 211, 217, 1);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transition: transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.cart-fab:hover {
  transform: translateY(calc(-50% - 2px)) scale(1.03);
  background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(245, 247, 250, 0.94));
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.cart-fab:active {
  transform: translateY(-50%) scale(0.96);
}

.cart-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  border: 1.5px solid rgba(255, 255, 255, 1);
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.hero-title {
  margin: 0;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.36);
}

.hero-sub {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.hero-whatsapp-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 900;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.hero-whatsapp-link:hover {
  color: var(--brand-orange);
}

.hero-contact-text {
  font-size: 15px;
  font-weight: 900;
}

.search-section {
  padding: 10px 16px;
  margin-bottom: 5px;
}

.search-container {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.search-input-wrapper {
  width: 100%;
  min-height: 48px;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  border-radius: 18px;
  backdrop-filter: blur(20px) saturate(1.14);
  -webkit-backdrop-filter: blur(20px) saturate(1.14);
  transition: border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.search-input-wrapper:focus-within {
  border-color: rgba(249, 115, 22, 0.6);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 3px rgba(249, 115, 22, 0.25);
  transform: translateY(-1px);
}

#searchInput,
.search-input-wrapper input,
.search-input {
  width: 100%;
  padding: 5px 0;
  background: transparent;
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  -webkit-appearance: none;
  appearance: none;
}

#searchInput::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.clear-btn {
  width: 24px;
  height: 24px;
  margin-right: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 16px;
}

.search-results {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(220, 226, 232, 0.95);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  cursor: pointer;
  transition: background 0.2s ease;
}

.search-result-item:hover {
  background: rgba(249, 115, 22, 0.05);
}

.search-result-item img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.search-result-info {
  flex: 1;
}

.search-result-name {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  color: #111827;
}

.search-result-price {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 800;
  color: #111827;
}

.search-result-stock {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.out-stock-text {
  color: var(--danger);
}

.search-out-of-stock {
  opacity: 0.72;
}

.highlight {
  background: #ffedd5;
  color: var(--brand-orange-dark);
  padding: 0 2px;
  border-radius: 2px;
}

.section {
  padding: 0 16px 18px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.section-title {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.34);
}

.section-note {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.24);
}

.categories-grid,
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.card,
.category-card,
.product-card,
.all-products-card,
.categories-grid .card,
.products-grid .card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #ffffff;
  border: 2px solid rgba(249, 115, 22, 0.35);
  transition: transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.card::before,
.category-card::before,
.product-card::before,
.all-products-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.05) 38%,
      rgba(255, 255, 255, 0) 100%
    );
}

.card:hover,
.category-card:hover,
.product-card:hover,
.all-products-card:hover {
  border-color: rgba(249, 115, 22, 0.8);
}

.category-card {
  cursor: pointer;
}

.category-image-wrap,
.product-image-wrap {
  position: relative;
  z-index: 2;
  aspect-ratio: 1 / 1;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-bottom: 2px solid rgba(249, 115, 22, 0.2);
}

.category-image-wrap img,
.product-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.25s ease,
    filter 0.25s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1);
  transform: translateZ(0) scale(1);
}

.category-card:hover .category-image-wrap img,
.product-card:hover .product-image-wrap img,
.card:hover .product-image-wrap img {
  transform: translateZ(0) scale(1.03);
  filter: drop-shadow(0 16px 24px rgba(15, 23, 42, 0.16));
}

.category-body,
.product-body {
  position: relative;
  z-index: 2;
  padding: 14px;
  background: linear-gradient(145deg, rgba(249, 115, 22, 0.95), rgba(234, 88, 12, 0.85));
  border-top: none;
}

.category-name {
  min-height: 38px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
}

.product-name {
  min-height: 42px;
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.price {
  font-size: 21px;
  font-weight: 900;
  color: #ffffff;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 800;
  color: #111827;
  background: #ffffff;
  border: 1px solid rgba(221, 226, 231, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 6px 14px rgba(15, 23, 42, 0.06);
}

.category-card.text-only .category-image-wrap,
.product-card.text-only .product-image-wrap,
.text-only-wrap {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-bottom: 2px solid rgba(249, 115, 22, 0.2);
}

.text-only-icon,
.all-products-card .text-only-icon {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-orange);
  font-size: 34px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(220, 226, 232, 0.95);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.category-card.text-only .category-body,
.all-products-card .category-body {
  text-align: center;
}

.category-card.text-only .category-name,
.all-products-card .category-name {
  min-height: auto;
  font-size: 17px;
}

.product-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qty-box {
  min-width: 126px;
  height: 48px;
  padding: 4px;
  gap: 4px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(220, 226, 231, 0.98);
}

.qty-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #111827;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(243, 245, 248, 0.86));
  border: 1px solid rgba(214, 220, 226, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 4px 10px rgba(15, 23, 42, 0.06);
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  transition: transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.qty-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(239, 242, 246, 0.92));
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.qty-btn:active {
  transform: scale(0.96);
}

.qty-value {
  min-width: 30px;
  text-align: center;
  color: #111827;
  font-size: 16px;
  font-weight: 900;
}

.back-row {
  padding: 0 16px 16px;
}

.back-btn,
.close-btn {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 16px;
  color: #111827;
  font-size: 14px;
  font-weight: 900;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(243, 246, 249, 0.84));
  border: 1px solid rgba(214, 220, 226, 0.98);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transition: transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.back-btn:hover,
.close-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(239, 242, 246, 0.92));
}

.empty-state {
  padding: 30px 18px;
  text-align: center;
  color: var(--text-soft);
  font-weight: 700;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(220, 226, 232, 0.95);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.floating-cart-bar {
  position: fixed;
  right: 16px;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  max-width: 828px;
  margin: 0 auto;
  display: none;
}

.floating-cart-button {
  width: 100%;
  min-height: 64px;
  padding: 0 18px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #111827;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(243, 246, 249, 0.84));
  border: 1.5px solid rgba(214, 220, 226, 0.98);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(16px) saturate(1.06);
  -webkit-backdrop-filter: blur(16px) saturate(1.06);
  transition: transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.floating-cart-button:hover {
  transform: translateY(-2px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 250, 0.90));
  border-color: rgba(205, 211, 217, 1);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.floating-cart-button .left,
.floating-cart-button .right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.floating-cart-count {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  border: 1.5px solid rgba(255, 255, 255, 1);
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(8, 10, 14, 0.54);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.cart-drawer {
  width: 100%;
  max-width: var(--page-max-width);
  max-height: 88vh;
  border-radius: 28px 28px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #111827;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(245, 247, 250, 0.93));
  border: 1px solid rgba(222, 227, 232, 0.98);
  box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.cart-drawer-head {
  padding: 18px 16px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(245, 247, 250, 0.93));
  border-bottom: 1px solid rgba(222, 227, 232, 0.98);
}

.cart-drawer-title {
  margin: 0;
  color: #111827;
  font-size: 22px;
  font-weight: 900;
}

.close-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 22px;
}

.cart-items {
  flex: 1;
  overflow: auto;
  padding: 12px 16px 120px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(245, 247, 250, 0.93));
}

.cart-item {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(244, 246, 249, 0.84));
  border: 1px solid rgba(223, 228, 233, 0.98);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.cart-item-image {
  width: 84px;
  height: 84px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 230, 235, 0.98);
}

.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.cart-item-name {
  margin: 0 0 8px;
  color: #111827;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.cart-item-price {
  margin-bottom: 10px;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 800;
}

.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.cart-item-total {
  color: #111827;
  font-size: 18px;
  font-weight: 900;
}

.cart-footer {
  position: sticky;
  bottom: 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 250, 0.94));
  border-top: 1px solid rgba(222, 227, 232, 0.98);
  box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.08);
}

.cart-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cart-summary-title {
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 800;
}

.cart-summary-total {
  color: #111827;
  font-size: 28px;
  font-weight: 900;
}

.checkout-btn,
#continueOrderBtn,
#sendOrderBtn,
.cart-footer .checkout-btn {
  width: 100%;
  min-height: 56px;
  border-radius: 18px;
  color: #111827;
  font-size: 17px;
  font-weight: 900;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(243, 246, 249, 0.86));
  border: 1.5px solid rgba(214, 220, 226, 0.98);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 0 0 1px rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.checkout-btn:hover,
#continueOrderBtn:hover,
#sendOrderBtn:hover {
  transform: translateY(-2px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(245, 247, 250, 0.92));
  border-color: rgba(249, 115, 22, 0.5);
  box-shadow: 0 20px 38px rgba(249, 115, 22, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.checkout-btn:active,
#continueOrderBtn:active,
#sendOrderBtn:active {
  transform: scale(0.98);
}

input,
textarea,
select {
  width: 100%;
  padding: 20px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.95);
  color: #111827;
  border: 1px solid rgba(220, 226, 231, 0.98);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 18px;
  font-weight: 700;
  transition: border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(249, 115, 22, 0.8);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background: rgba(8, 10, 14, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.modal.active {
  display: flex;
}

@keyframes scooterRideAcross {
  0% {
    right: -80px;
    transform: translateY(0) rotate(0deg);
  }

  20% {
    transform: translateY(-2px) rotate(-2deg);
  }

  40% {
    transform: translateY(1px) rotate(2deg);
  }

  60% {
    transform: translateY(-2px) rotate(-1deg);
  }

  80% {
    transform: translateY(1px) rotate(1deg);
  }

  100% {
    right: calc(100% + 80px);
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes orderSuccessPop {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(18px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.order-success-card.pending .order-success-heart {
  animation: orderPulse 1.5s ease-in-out infinite;
}

.order-success-card.approved .order-success-heart {
  animation: orderApprovedBounce 1.6s ease-in-out infinite;
}

.order-success-card.rejected .order-success-heart {
  animation: orderRejectedShake 1.2s ease-in-out infinite;
}

@keyframes waitingDotsPulse {
  0%,
  80%,
  100% {
    transform: scale(0.7);
    opacity: 0.45;
  }

  40% {
    transform: scale(1.15);
  }
}

@keyframes orderPulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.14);
  }
}

@keyframes orderApprovedBounce {
  0%,
  100% {
    transform: translateY(0);
  }

  35% {
    transform: translateY(-5px);
  }

  70% {
    transform: translateY(2px);
  }
}

@keyframes orderRejectedShake {
  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-4px);
  }

  40% {
    transform: translateX(4px);
  }

  60% {
    transform: translateX(-3px);
  }

  80% {
    transform: translateX(3px);
  }
}

.product-card.out-of-stock .product-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

.product-card.out-of-stock .product-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(100%) brightness(0.55);
}

.out-of-stock-badge {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  padding: 12px;
  border-radius: 18px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  background: rgba(17, 24, 39, 0.58);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.product-card.out-of-stock {
  opacity: 1;
}

.stock-disabled-btn,
.stock-disabled-btn:disabled {
  width: 100%;
  min-height: 50px;
  border-radius: 16px;
  color: #ffffff;
  background: linear-gradient(135deg, #9ca3af, #4b5563);
  cursor: not-allowed;
  opacity: 1;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
}

.toast {
  position: fixed;
  top: 90px;
  right: 16px;
  left: 16px;
  z-index: 120;
  max-width: 440px;
  margin: 0 auto;
  display: none;
  padding: 14px 16px;
  border-radius: 18px;
  text-align: center;
  color: #ffffff;
  background: rgba(8, 10, 14, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 14px;
  font-weight: 800;
}

.accessibility-button {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  bottom: auto !important;
  z-index: 200 !important;
  width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28) !important;
  font-size: 0 !important;
}

.accessibility-button::before {
  content: none !important;
}

.accessibility-button-icon {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

.accessibility-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 190 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 0 !important;
  background: rgba(8, 10, 14, 0.58) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.accessibility-overlay.hidden {
  display: none !important;
}

.accessibility-modal {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 86vh !important;
  overflow: hidden !important;
  border-radius: 0 0 24px 24px !important;
  background: #ffffff !important;
  color: #111827 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34) !important;
  display: flex !important;
  flex-direction: column !important;
  animation: accessibilityDrawerDown 0.22s ease-out !important;
}

.accessibility-modal-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.accessibility-modal-head h2 {
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}

.accessibility-close-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #f1f5f9;
  color: #111827;
  font-size: 26px;
  font-weight: 900;
}

.accessibility-modal-body {
  padding: 16px !important;
  overflow-y: auto !important;
  max-height: calc(86vh - 74px) !important;
  line-height: 1.75;
  font-size: 15px;
  font-weight: 600;
}

.accessibility-modal-body h3 {
  margin: 18px 0 8px;
  font-size: 17px;
  font-weight: 900;
}

.accessibility-modal-body p {
  margin: 0 0 12px;
}

.accessibility-modal-body a {
  color: #005eb8;
  font-weight: 900;
  text-decoration: underline;
}

.accessibility-menu-grid {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.accessibility-menu-btn {
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  text-align: right !important;
  cursor: pointer !important;
  background: #f8fafc !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.accessibility-menu-btn:hover {
  background: #eef2ff !important;
}

.accessibility-statement-panel {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid #e5e7eb !important;
}

@keyframes accessibilityDrawerDown {
  from {
    transform: translateY(-100%);
    opacity: 0.4;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

body.accessibility-text-large {
  font-size: 115%;
}

body.accessibility-text-small {
  font-size: 90%;
}

body.accessibility-grayscale {
  filter: grayscale(1);
}

body.accessibility-stop-animations *,
body.accessibility-stop-animations *::before,
body.accessibility-stop-animations *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

body.accessibility-text-large .hero-title,
body.accessibility-text-large .hero-sub,
body.accessibility-text-large .section-title,
body.accessibility-text-large .category-title,
body.accessibility-text-large .product-title,
body.accessibility-text-large .product-price,
body.accessibility-text-large .cart-item-name,
body.accessibility-text-large .cart-item-price,
body.accessibility-text-large .checkout-modal,
body.accessibility-text-large .accessibility-modal,
body.accessibility-text-large button,
body.accessibility-text-large input,
body.accessibility-text-large textarea,
body.accessibility-text-large select {
  font-size: 120% !important;
}

body.accessibility-text-small .hero-title,
body.accessibility-text-small .hero-sub,
body.accessibility-text-small .section-title,
body.accessibility-text-small .category-title,
body.accessibility-text-small .product-title,
body.accessibility-text-small .product-price,
body.accessibility-text-small .cart-item-name,
body.accessibility-text-small .cart-item-price,
body.accessibility-text-small .checkout-modal,
body.accessibility-text-small .accessibility-modal,
body.accessibility-text-small button,
body.accessibility-text-small input,
body.accessibility-text-small textarea,
body.accessibility-text-small select {
  font-size: 90% !important;
}

body.accessibility-zoom-active {
  --accessibility-zoom: 1;
}

body.accessibility-zoom-active .topbar,
body.accessibility-zoom-active .hero,
body.accessibility-zoom-active .search-wrap,
body.accessibility-zoom-active .search-section,
body.accessibility-zoom-active .categories-section,
body.accessibility-zoom-active .products-section,
body.accessibility-zoom-active .cart-drawer,
body.accessibility-zoom-active .checkout-modal,
body.accessibility-zoom-active .floating-cart-bar {
  font-size: calc(1em * var(--accessibility-zoom, 1)) !important;
}

body.accessibility-zoom-active .topbar *,
body.accessibility-zoom-active .hero *,
body.accessibility-zoom-active .search-wrap *,
body.accessibility-zoom-active .search-section *,
body.accessibility-zoom-active .categories-section *,
body.accessibility-zoom-active .products-section *,
body.accessibility-zoom-active .cart-drawer *,
body.accessibility-zoom-active .checkout-modal *,
body.accessibility-zoom-active .floating-cart-bar * {
  font-size: calc(1em * var(--accessibility-zoom, 1)) !important;
}

body.accessibility-zoom-active .accessibility-modal,
body.accessibility-zoom-active .accessibility-modal * {
  font-size: revert !important;
}

.accessibility-text-scale-box,
.accessibility-text-scale-box * {
  font-size: 15px !important;
  line-height: 1.35 !important;
}

.accessibility-text-scale-box {
  min-height: 78px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.accessibility-text-scale-label {
  min-height: 22px !important;
  margin-bottom: 10px !important;
}

.accessibility-text-scale-range {
  height: 28px !important;
  margin: 0 !important;
}

body.accessibility-high-contrast {
  background: #000000 !important;
  color: #ffffff !important;
}

body.accessibility-high-contrast *,
body.accessibility-high-contrast *::before,
body.accessibility-high-contrast *::after {
  color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.accessibility-high-contrast .product-card,
body.accessibility-high-contrast .category-card,
body.accessibility-high-contrast .hero-card,
body.accessibility-high-contrast .checkout-modal,
body.accessibility-high-contrast .accessibility-modal,
body.accessibility-high-contrast .cart-drawer,
body.accessibility-high-contrast .cart-item,
body.accessibility-high-contrast .search-input-wrapper {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

body.accessibility-high-contrast .checkout-btn,
body.accessibility-high-contrast #sendOrderBtn,
body.accessibility-high-contrast .floating-cart-button {
  background: #ffffff !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
}

body.accessibility-high-contrast .checkout-btn *,
body.accessibility-high-contrast #sendOrderBtn *,
body.accessibility-high-contrast .floating-cart-button * {
  color: #000000 !important;
}

body.accessibility-high-contrast .accessibility-button,
body.accessibility-high-contrast .accessibility-button img {
  background: transparent !important;
  border: none !important;
  filter: none !important;
}

body.accessibility-highlight-links a,
body.accessibility-highlight-links button,
body.accessibility-highlight-links .btn,
body.accessibility-highlight-links .category-card,
body.accessibility-highlight-links .product-card {
  outline: 3px solid #ffcc00 !important;
  outline-offset: 3px !important;
}

button:focus-visible,
a:focus-visible,
textarea:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(249, 115, 22, 0.7) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.3) !important;
}

.search-input-wrapper input:focus,
.search-input-wrapper textarea:focus,
#searchInput:focus,
#searchInput:focus-visible,
.search-input:focus,
.search-input:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

@media (min-width: 680px) {
  .categories-grid,
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-title {
    font-size: 40px;
  }

  .hero-sub {
    font-size: 15px;
  }
}

@media (max-width: 680px) {
  html,
  body {
    overflow-x: hidden;
  }

  .topbar-inner {
  position: relative;
  max-width: var(--page-max-width);
  min-height: 96px;
  margin: 0 auto;
  padding: 14px 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

  .logo-wrap img {
    height: 76px;
    max-width: 100%;
  }

  .cart-fab {
    left: 12px;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 20px;
  }

  .app-shell {
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
  }
}

@media (max-width: 520px) {

  .hero-title {
    font-size: 38px;
    line-height: 1.08;
  }

  .hero-sub {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.4;
  }

  .hero-contact-text {
    font-size: 15px;
  }

  .accessibility-button {
    top: 14px !important;
    right: 14px !important;
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
  }

  .accessibility-modal {
    max-height: 88vh !important;
    border-radius: 0 0 22px 22px !important;
  }

  .accessibility-modal-body {
    max-height: calc(88vh - 72px) !important;
    padding: 14px !important;
    font-size: 14px;
  }

  .accessibility-menu-btn {
    min-height: 46px !important;
    font-size: 14px !important;
  }

  .floating-cart-bar {
    bottom: 72px;
  }
}

@media (min-width: 768px) {
  .accessibility-modal {
    max-width: 540px !important;
    margin-top: 18px !important;
    border-radius: 24px !important;
  }
}

.order-success-overlay.show {
  display: flex;
}

.premium-order-card.approved .premium-order-top-glow {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.22), transparent 70%);
}

.premium-order-card.rejected .premium-order-top-glow {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.22), transparent 70%);
}

.order-status-badge.pending {
  color: #7c2d12;
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.96), rgba(254, 215, 170, 0.86));
  border-color: rgba(251, 146, 60, 0.32);
}

.order-status-badge.approved {
  color: #14532d;
  background: linear-gradient(135deg, rgba(240, 253, 244, 0.96), rgba(187, 247, 208, 0.86));
  border-color: rgba(34, 197, 94, 0.32);
}

.order-status-badge.rejected {
  color: #7f1d1d;
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.96), rgba(254, 202, 202, 0.86));
  border-color: rgba(239, 68, 68, 0.32);
}

.premium-status-ring.pending {
  --ring-color: #fb923c;
  animation: premiumRingSpin 1.55s linear infinite, premiumRingBreath 1.8s ease-in-out infinite;
}

.premium-status-ring.approved {
  --ring-color: #22c55e;
  animation: premiumApprovedPop 0.55s ease;
}

.premium-status-ring.rejected {
  --ring-color: #ef4444;
  animation: premiumRejectedShake 0.45s ease;
}

.premium-order-card.pending .premium-core-icon {
  animation: premiumWaitingIcon 1.25s ease-in-out infinite;
}

.premium-order-card.approved .premium-core-icon {
  animation: premiumSuccessIcon 0.55s ease;
}

.premium-order-card.rejected .premium-core-icon {
  animation: premiumRejectIcon 0.45s ease;
}

.premium-order-step.done {
  color: #111827;
}

.premium-order-step.done .premium-step-dot {
  color: #ffffff;
  background: #111827;
  border-color: #111827;
}

.premium-order-step.active {
  color: #7c2d12;
  background: rgba(255, 247, 237, 0.88);
  border-color: rgba(251, 146, 60, 0.34);
}

.premium-order-step.active .premium-step-dot {
  color: #ffffff;
  background: #fb923c;
  border-color: #fb923c;
  box-shadow: 0 0 0 5px rgba(251, 146, 60, 0.14);
  animation: premiumStepPulse 1.4s ease-in-out infinite;
}

.premium-order-card.approved .premium-order-step.active,
.premium-order-card.approved .premium-order-step.done {
  color: #14532d;
  background: rgba(240, 253, 244, 0.88);
  border-color: rgba(34, 197, 94, 0.30);
}

.premium-order-card.approved .premium-order-step.active .premium-step-dot,
.premium-order-card.approved .premium-order-step.done .premium-step-dot {
  color: #ffffff;
  background: #22c55e;
  border-color: #22c55e;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.14);
}

.premium-order-card.rejected .premium-order-step.active {
  color: #7f1d1d;
  background: rgba(254, 242, 242, 0.90);
  border-color: rgba(239, 68, 68, 0.30);
}

.premium-order-card.rejected .premium-order-step.active .premium-step-dot {
  color: #ffffff;
  background: #ef4444;
  border-color: #ef4444;
  box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.14);
}

@keyframes premiumOrderPop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(18px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes premiumRingSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes premiumRingBreath {
  0%,
  100% {
    box-shadow:
      0 20px 45px rgba(15, 23, 42, 0.14),
      0 0 24px rgba(251, 146, 60, 0.18);
  }

  50% {
    box-shadow:
      0 24px 55px rgba(15, 23, 42, 0.18),
      0 0 42px rgba(251, 146, 60, 0.30);
  }
}

@keyframes premiumWaitingIcon {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-3px) scale(1.04);
  }
}

@keyframes premiumApprovedPop {
  0% {
    transform: scale(0.88);
  }

  60% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes premiumRejectedShake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  50% {
    transform: translateX(4px);
  }

  75% {
    transform: translateX(-2px);
  }
}

@keyframes premiumSuccessIcon {
  0% {
    transform: scale(0.4) rotate(-18deg);
    opacity: 0;
  }

  65% {
    transform: scale(1.14) rotate(4deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0);
  }
}

@keyframes premiumRejectIcon {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  70% {
    transform: scale(1.10);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

@keyframes premiumStepPulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.14);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(251, 146, 60, 0.08);
  }
}

@keyframes premiumLiveDots {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }

  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@media (max-width: 520px) {
}

.premium-order-card.approved .premium-status-core,
.premium-order-card.rejected .premium-status-core {
  animation: none;
}

@keyframes premiumClockMinuteTick {
  to {
    transform: rotate(360deg);
  }
}

@keyframes premiumClockHourTick {
  to {
    transform: rotate(360deg);
  }
}

@keyframes premiumClockCoreBreath {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.035);
  }
}

@keyframes premiumCheckDraw {
  from {
    opacity: 0;
    transform: scale(0.72) rotate(-8deg);
  }

  65% {
    opacity: 1;
    transform: scale(1.12) rotate(2deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes premiumXPop {
  from {
    opacity: 0;
    transform: scale(0.72) rotate(8deg);
  }

  65% {
    opacity: 1;
    transform: scale(1.10) rotate(-2deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.premium-order-card.pending .premium-status-core,
.premium-order-card.pending .premium-status-core::before,
.premium-order-card.pending .premium-status-core::after {
  animation: none !important;
  transform: none !important;
}

@keyframes premiumClockSingleHand {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.premium-order-card.pending .premium-status-core {
  width: 82px !important;
  height: 82px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

.premium-order-card.pending .premium-status-core::before,
.premium-order-card.pending .premium-status-core::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.premium-order-card.pending .premium-status-ring {
  animation: premiumRingBreath 1.8s ease-in-out infinite !important;
  transform: none !important;
}

.premium-order-card.pending .premium-clock-icon {
  width: 66px !important;
  height: 66px !important;
  display: block !important;
  color: #111827 !important;
  filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.14)) !important;
}

.premium-order-card.pending .premium-clock-hand {
  transform-origin: 32px 32px !important;
  animation: premiumClockHandTickOnly 1.2s steps(12, end) infinite !important;
}

@keyframes premiumClockHandTickOnly {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#sendOrderBtn {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96),
    rgba(243, 246, 249, 0.86)
  ) !important;
  background-color: rgba(255, 255, 255, 0.96) !important;
  color: #111827 !important;
  border: 1.5px solid rgba(214, 220, 226, 0.98) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 0 0 1px rgba(255, 255, 255, 0.4) !important;
  font-weight: 900 !important;
}

#sendOrderBtn:hover {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 1),
    rgba(245, 247, 250, 0.92)
  ) !important;
  background-color: rgba(255, 255, 255, 1) !important;
  border-color: rgba(249, 115, 22, 0.6) !important;
  box-shadow: 0 20px 38px rgba(249, 115, 22, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

#sendOrderBtn:active {
  transform: scale(0.98) !important;
}

.site-footer-links {
  margin: 18px 16px 0;
  padding: 16px 14px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(8, 10, 14, 0.82), rgba(20, 24, 30, 0.66));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.site-footer-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
}

.site-footer-links a:hover {
  color: #f97316;
  text-decoration: underline;
}

.site-footer-links span {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 900;
}

.terms-confirm-box {
  margin: 0 0 16px;
  padding: 14px 15px;
  border-radius: 18px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.terms-confirm-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  color: #111827;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.65;
}

.terms-confirm-label input {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin-top: 3px;
  accent-color: #f97316;
  cursor: pointer;
}

.terms-confirm-label a {
  color: #ea580c;
  text-decoration: underline;
  font-weight: 900;
}

.terms-confirm-label a:hover {
  color: #c2410c;
}

.category-menu-button {
  place-items: center;
  transition: transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.category-menu-button:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(245, 247, 250, 0.94));
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.category-menu-button:active {
  transform: translateY(-50%) scale(0.96);
}

.category-side-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  justify-content: flex-start;
  background: rgba(8, 10, 14, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.category-side-menu-overlay.open {
  display: flex;
}

.category-side-menu {
  width: min(86vw, 360px);
  height: 100%;
  padding: 18px;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(8, 10, 14, 0.94), rgba(20, 24, 30, 0.88));
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.38),
    inset 1px 0 0 rgba(255, 255, 255, 0.08);
  transform: translateX(105%);
  animation: categoryMenuSlideIn 0.24s ease forwards;
}

@keyframes categoryMenuSlideIn {
  to {
    transform: translateX(0);
  }
}

.category-side-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.category-side-menu-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
}

.category-side-menu-head p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 800;
}

.category-side-menu-close {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.94);
  color: #111827;
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.category-side-menu-list {
  display: grid;
  padding-bottom: 30px;
}

.category-side-menu-item {
  width: 100%;
  gap: 12px;
  text-align: right;
  color: #111827;
  transition: transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.category-side-menu-item:hover {
  transform: translateY(-2px);
  border-color: rgba(249, 115, 22, 0.7);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.category-side-menu-thumb {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
}

.category-side-menu-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

.category-side-menu-thumb-fallback {
  color: var(--brand-orange);
  font-size: 22px;
  font-weight: 900;
}

.category-side-menu-name {
  flex: 1;
}

.category-side-menu-arrow {
  color: var(--brand-orange-dark);
  font-size: 20px;
  font-weight: 900;
}

.category-side-menu-empty {
  padding: 18px;
  border-radius: 18px;
  text-align: center;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

body.category-menu-open {
  overflow: hidden;
}

body.accessibility-zoom-active .category-side-menu,
body.accessibility-zoom-active .category-side-menu * {
  font-size: revert !important;
}

body.accessibility-high-contrast .category-side-menu {
  background: #000000 !important;
  border-left: 2px solid #ffffff !important;
}

body.accessibility-high-contrast .category-side-menu-item,
body.accessibility-high-contrast .category-menu-button,
body.accessibility-high-contrast .category-side-menu-close {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

body.accessibility-high-contrast .category-menu-button span {
  background: #ffffff !important;
}

@media (max-width: 520px) {
  .category-side-menu {
    width: 88vw;
    padding: 14px;
  }

  .category-side-menu-head h2 {
    font-size: 22px;
  }

  .category-side-menu-item {
    min-height: 58px;
  }
}

body {
  background-attachment: scroll !important;
}

.card,
.category-card,
.product-card,
.all-products-card,
.categories-grid .card,
.products-grid .card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10) !important;
  will-change: transform;
}

.category-image-wrap img,
.product-image-wrap img {
  filter: none !important;
  will-change: auto;
}

.card:hover,
.category-card:hover,
.product-card:hover,
.all-products-card:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: 0 12px 24px rgba(249, 115, 22, 0.16) !important;
}

.category-body,
.product-body {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.cart-drawer-overlay,
.cart-drawer,
.floating-cart-button,
.search-results,
.empty-state {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.topbar {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.search-input-wrapper {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

* {
  scroll-behavior: auto;
}

.cart-items,
.search-results,
.accessibility-modal-body {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .topbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .search-input-wrapper {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .card,
  .category-card,
  .product-card,
  .all-products-card {
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.10) !important;
  }

  .card:hover,
  .category-card:hover,
  .product-card:hover,
  .all-products-card:hover {
    transform: none !important;
  }

  .category-image-wrap img,
  .product-image-wrap img {
    transition: none !important;
  }

  .category-card:hover .category-image-wrap img,
  .product-card:hover .product-image-wrap img,
  .card:hover .product-image-wrap img {
    transform: none !important;
    filter: none !important;
  }

  .floating-cart-button {
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12) !important;
  }
}

body.accessibility-stop-animations *,
body.accessibility-stop-animations *::before,
body.accessibility-stop-animations *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.category-menu-button {
  width: 52px !important;
  height: 52px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(238,241,245,0.94)) !important;
  border: 1.5px solid rgba(205, 211, 217, 1) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.20) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.category-menu-button span {
  min-height: 3px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex-shrink: 0 !important;
}

.category-menu-button:hover {
  transform: translateY(-50%) !important;
}

.category-menu-button:active {
  transform: translateY(-50%) scale(0.96) !important;
}

@media (max-width: 768px) {
  #categorySideMenuOverlay.open,
  .category-side-menu-overlay.open {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: rgba(8, 10, 14, 0.58) !important;
    overflow: hidden !important;
  }

  #categorySideMenuOverlay .category-side-menu,
  .category-side-menu-overlay .category-side-menu {
    display: flex !important;
    flex-direction: column !important;
    width: 88vw !important;
    max-width: 360px !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    padding: 16px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, rgba(8, 10, 14, 0.96), rgba(20, 24, 30, 0.92)) !important;
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .category-side-menu-head {
    flex: 0 0 auto !important;
    margin-bottom: 12px !important;
  }

  #categorySideMenuList,
  .category-side-menu-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 0 0 30px !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #categorySideMenuList .category-side-menu-item,
  .category-side-menu-list .category-side-menu-item {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 62px !important;
    height: auto !important;
    padding: 10px 12px !important;
    gap: 12px !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #111827 !important;
    background: #ffffff !important;
    border: 1px solid rgba(220, 226, 232, 0.95) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14) !important;
    transform: none !important;
  }

  .category-side-menu-thumb {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .category-side-menu-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 5px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .category-side-menu-name {
    display: block !important;
    flex: 1 !important;
    color: #111827 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .category-side-menu-arrow {
    display: block !important;
    color: #ea580c !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .category-side-menu-empty {
    display: block !important;
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

.age18-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 34%),
    rgba(8, 10, 14, 0.68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.age18-modal-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  text-align: center;
  border-radius: 30px;
  padding: 26px 20px 20px;
  color: #111827;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 237, 0.96));
  border: 1.5px solid rgba(249, 115, 22, 0.32);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.age18-modal-card::before {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  top: -86px;
  right: -64px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.22), transparent 70%);
  pointer-events: none;
}

.age18-modal-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 14px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 24px;
  font-weight: 1000;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #f97316, #ea580c);
  box-shadow: 0 14px 30px rgba(249, 115, 22, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.age18-modal-title {
  margin: 0;
  color: #111827;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 1000;
}

.age18-modal-text {
  margin: 12px 0 0;
  color: #374151;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 850;
}

.age18-modal-actions {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.age18-confirm-btn,
.age18-deny-btn {
  min-height: 52px;
  width: 100%;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 1000;
  transition: transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.age18-confirm-btn {
  color: #ffffff;
  background: linear-gradient(135deg, #f97316, #ea580c);
  box-shadow: 0 12px 28px rgba(249, 115, 22, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.age18-deny-btn {
  color: #991b1b;
  background: #fff1f2;
  border: 1px solid rgba(248, 113, 113, 0.36);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.age18-confirm-btn:hover,
.age18-deny-btn:hover {
  transform: translateY(-2px);
}

.age18-confirm-btn:active,
.age18-deny-btn:active {
  transform: scale(0.97);
}

.age18-modal-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 16px;
  color: #7c2d12;
  background: rgba(255, 237, 213, 0.92);
  border: 1px solid rgba(251, 146, 60, 0.22);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 850;
}

.age18-warning-bar {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 18px;
  color: #7c2d12;
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.98), rgba(255, 237, 213, 0.95));
  border: 1.5px solid rgba(249, 115, 22, 0.30);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 1000;
  line-height: 1.5;
  text-align: center;
}

body.accessibility-high-contrast .age18-modal-card,
body.accessibility-high-contrast .age18-warning-bar {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

body.accessibility-high-contrast .age18-modal-title,
body.accessibility-high-contrast .age18-modal-text,
body.accessibility-high-contrast .age18-modal-note {
  color: #ffffff !important;
}

@media (max-width: 520px) {
  .age18-modal-card {
    max-width: 390px;
    padding: 24px 16px 18px;
    border-radius: 28px;
  }

  .age18-modal-title {
    font-size: 24px;
  }

  .age18-modal-text {
    font-size: 15px;
  }

  .age18-warning-bar {
    font-size: 13px;
    padding: 11px 12px;
  }
}

.legal-read-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(8, 10, 14, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.legal-read-modal-card {
  width: min(96vw, 760px);
  height: min(90vh, 820px);
  overflow: hidden;
  border-radius: 26px;
  background: #ffffff;
  border: 2px solid rgba(249, 115, 22, 0.38);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
}

.legal-read-modal-head {
  min-height: 66px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(8, 10, 14, 0.92), rgba(20, 24, 30, 0.82));
  border-bottom: 2px solid rgba(249, 115, 22, 0.28);
}

.legal-read-modal-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 1000;
}

.legal-read-modal-close {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #111827;
  background: #ffffff;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.legal-read-modal-frame {
  width: 100%;
  flex: 1;
  border: none;
  background: #ffffff;
}

@media (max-width: 520px) {
  .legal-read-modal-overlay {
    padding: 8px;
  }

  .legal-read-modal-card {
    width: 100%;
    height: 92vh;
    border-radius: 22px;
  }

  .legal-read-modal-head {
    min-height: 60px;
    padding: 10px 12px;
  }

  .legal-read-modal-head h2 {
    font-size: 17px;
  }

  .legal-read-modal-close {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    font-size: 28px;
  }
}

@media (max-width: 520px) {
  .terms-confirm-box {
    margin: 0 0 12px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    min-height: auto !important;
  }

  .terms-confirm-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: auto !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 900 !important;
  }

  .terms-confirm-label span {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .terms-confirm-label input,
  .terms-confirm-label input[type="checkbox"],
  #termsConfirmCheckbox {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    flex: 0 0 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    border-radius: 50% !important;
    border: 2px solid rgba(249, 115, 22, 0.55) !important;
    background: #ffffff !important;
    box-shadow:
      0 4px 10px rgba(15, 23, 42, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;

    cursor: pointer !important;
  }

  .terms-confirm-label input:checked,
  .terms-confirm-label input[type="checkbox"]:checked,
  #termsConfirmCheckbox:checked {
    background:
      radial-gradient(circle at center, #ffffff 0 26%, transparent 27%),
      linear-gradient(135deg, #f97316, #ea580c) !important;
    border-color: #ea580c !important;
  }

  .terms-confirm-label a {
    font-size: 13px !important;
    font-weight: 1000 !important;
  }
}

.hero {
  padding: 16px !important;
}

.hero-banner-slider {
  position: relative;
  width: 100%;
  height: 210px;
  min-height: 210px;
  max-height: 210px;
  overflow: hidden;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(8, 10, 14, 0.82), rgba(20, 24, 30, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hero-banner-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 0.65s ease,
    transform 1.2s ease;
  pointer-events: none;
}

.hero-banner-slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.hero-banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-banner-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.04),
      rgba(0, 0, 0, 0.10)
    );
}

.hero-banner-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 24px;
  color: #ffffff;
  background: radial-gradient(circle at left top, rgba(249, 115, 22, 0.28), transparent 38%),
    linear-gradient(135deg, rgba(8, 10, 14, 0.86), rgba(20, 24, 30, 0.68));
}

.hero-banner-fallback.hidden {
  display: none !important;
}

.hero-banner-dots {
  position: absolute;
  z-index: 5;
  right: 0;
  left: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  pointer-events: auto;
}

.hero-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  padding: 0;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.24);
  transition: width 0.22s ease,
    background 0.22s ease,
    transform 0.22s ease;
}

.hero-banner-dot.active {
  width: 24px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  border-color: rgba(255, 255, 255, 0.92);
}

.hero-banner-dot:active {
  transform: scale(0.92);
}

.hero-legacy-hidden {
  display: none !important;
}

@media (max-width: 520px) {
  .hero {
    padding: 14px 12px !important;
  }

  .hero-banner-slider {
    height: 122px;
    min-height: 122px;
    max-height: 122px;
    border-radius: 22px;
  }

  .hero-banner-fallback {
    padding: 18px;
  }

  .hero-banner-fallback .hero-title {
    font-size: 28px !important;
  }

  .hero-banner-fallback .hero-sub {
    font-size: 13px !important;
  }

  .hero-banner-dots {
    bottom: 9px;
  }
}

@media (max-width: 380px) {
  .hero-banner-slider {
    height: 112px;
    min-height: 112px;
    max-height: 112px;
  }
}

.account-top-button {
  min-width: 52px;
  height: 52px;
  padding: 0 12px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #111827;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(238, 241, 245, 0.90));
  border: 1.5px solid rgba(205, 211, 217, 1);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  font-weight: 900;
}

.account-top-button:hover {
  transform: translateY(calc(-50% - 2px)) scale(1.03);
  border-color: rgba(249, 115, 22, 0.55);
}

.account-top-text {
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.customer-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 10, 14, 0.68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.customer-auth-card {
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 250, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
  color: #111827;
}

.customer-auth-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 18px 18px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}

.customer-auth-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 1000;
  color: #111827;
}

.customer-auth-head p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.customer-auth-close {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #f1f5f9;
  color: #111827;
  font-size: 26px;
  font-weight: 900;
}

.customer-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 18px 0;
}

.customer-auth-tab {
  min-height: 46px;
  border-radius: 16px;
  background: #f8fafc;
  color: #111827;
  border: 1px solid #e2e8f0;
  font-size: 15px;
  font-weight: 1000;
}

.customer-auth-tab.active {
  color: #ffffff;
  background: linear-gradient(135deg, #f97316, #ea580c);
  border-color: rgba(249, 115, 22, 0.8);
  box-shadow: 0 10px 22px rgba(249, 115, 22, 0.22);
}

.customer-auth-message {
  margin: 14px 18px 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #7c2d12;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
}

.customer-auth-form {
  padding: 16px 18px 20px;
}

.customer-auth-label {
  display: block;
  margin: 0 0 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 1000;
}

.customer-auth-input {
  width: 100%;
  min-height: 50px;
  margin: 0 0 13px;
  padding: 13px 14px;
  border-radius: 16px;
  background: #ffffff;
  color: #111827;
  border: 1.5px solid #e2e8f0;
  font-size: 16px;
  font-weight: 800;
  outline: none;
}

.customer-auth-input:focus {
  border-color: rgba(249, 115, 22, 0.8);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.14);
}

.customer-auth-textarea {
  resize: none;
  min-height: 78px;
}

.customer-auth-two-cols,
.customer-auth-three-cols {
  display: grid;
  gap: 10px;
}

.customer-auth-two-cols {
  grid-template-columns: 1fr 1fr;
}

.customer-auth-three-cols {
  grid-template-columns: 1fr 1fr 1fr;
}

.customer-auth-main-btn {
  width: 100%;
  min-height: 54px;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 1000;
}

.customer-auth-main-btn {
  color: #ffffff;
  background: linear-gradient(135deg, #f97316, #ea580c);
  box-shadow: 0 14px 26px rgba(249, 115, 22, 0.22);
}

.customer-profile-box {
  padding: 16px 18px 20px;
}

.customer-profile-info {
  padding: 14px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: grid;
  gap: 10px;
  color: #111827;
  font-size: 14px;
  font-weight: 800;
}

.customer-profile-info strong {
  color: #0f172a;
}

@media (max-width: 520px) {
  .account-top-button {
    left: 76px;
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
  }

  .account-top-text {
    display: none;
  }

  .customer-auth-two-cols,
  .customer-auth-three-cols {
    grid-template-columns: 1fr;
  }

  .customer-auth-card {
    border-radius: 26px;
  }
}

.accessibility-button {
  position: fixed;
  right: 18px;
  top: 118px;
  z-index: 80;
}

@media (max-width: 680px) {
  .cart-fab {
    left: 14px;
  }

  .account-top-button {
    left: 74px;
  }

  .category-menu-button {
    right: 14px;
  }

  .accessibility-button {
    right: 18px;
    top: 105px;
  }
}

.topbar-inner {
  min-height: 112px !important;
  padding: 12px 90px 12px 90px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.logo-wrap {
  min-height: 88px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.logo-wrap img {
  width: auto !important;
  object-fit: contain !important;
}

.cart-fab {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 50 !important;
}

.account-top-button {
  position: absolute !important;
  left: 82px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 50 !important;
}

.accessibility-button {
  position: fixed !important;
  right: 14px !important;
  top: 96px !important;
  z-index: 9999 !important;
}

.category-menu-button {
  position: fixed !important;
  right: 14px !important;
  top: 158px !important;
  transform: none !important;
  z-index: 9998 !important;
}

.category-menu-button:hover,
.category-menu-button:active {
  transform: none !important;
}

@media (max-width: 680px) {
  .topbar-inner {
    min-height: 108px !important;
    padding: 10px 86px 10px 86px !important;
  }

  .logo-wrap img {
    height: 96px !important;
    max-width: 205px !important;
  }

  .cart-fab {
    left: 14px !important;
  }

  .account-top-button {
    left: 76px !important;
  }

  .accessibility-button {
    right: 14px !important;
    top: 92px !important;
  }

  .category-menu-button {
    right: 14px !important;
    top: 154px !important;
  }
}

.category-side-menu-list {
  gap: 8px !important;
}

.category-side-menu-item {
  min-height: 52px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10) !important;
}

.category-side-menu-thumb,
.category-side-menu-thumb img {
  display: none !important;
}

.category-side-menu-name {
  width: 100% !important;
  display: block !important;
  color: #111827 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  text-align: right !important;
  line-height: 1.3 !important;
}

@media (max-width: 680px) {
  .topbar {
    overflow: visible !important;
  }

  .topbar-inner {
    position: relative !important;
    min-height: 118px !important;
    padding: 10px 82px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .logo-wrap {
    width: 100% !important;
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
  }

  .logo-wrap img {
    height: 70px !important;
    max-width: 205px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .account-top-button,
  .cart-fab {
    position: absolute !important;
    left: 12px !important;
    right: auto !important;
    transform: none !important;

    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;

    border-radius: 17px !important;
    display: grid !important;
    place-items: center !important;

    background:
      linear-gradient(145deg, rgba(24, 28, 34, 0.92), rgba(8, 10, 14, 0.78)) !important;

    border: 1px solid rgba(255, 255, 255, 0.18) !important;

    box-shadow:
      0 12px 26px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;

    backdrop-filter: blur(16px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.12) !important;

    color: #ffffff !important;
    z-index: 80 !important;
  }

  .account-top-button {
    top: 13px !important;
  }

  .cart-fab {
    top: 66px !important;
  }

  .account-top-text {
    display: none !important;
  }

  .account-top-icon {
    font-size: 22px !important;
    line-height: 1 !important;
    color: #ffffff !important;
  }

  .cart-fab {
    font-size: 22px !important;
  }

  .account-top-button:hover,
  .cart-fab:hover,
  .account-top-button:active,
  .cart-fab:active {
    transform: none !important;
  }

  .cart-badge {
    top: -6px !important;
    left: -6px !important;
    z-index: 90 !important;
  }

  .category-menu-button {
    position: fixed !important;
    right: 14px !important;
    top: 76px !important;
    z-index: 180 !important;
  }

  .accessibility-button {
    top: 14px !important;
    right: 14px !important;
    z-index: 200 !important;
  }

  #heroBannerDots,
  .hero-banner-dots,
  .dots {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .topbar-inner {
    min-height: 114px !important;
    padding: 8px 78px !important;
  }

  .logo-wrap img {
    height: 66px !important;
    max-width: 190px !important;
  }

  .account-top-button,
  .cart-fab {
    left: 10px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }

  .account-top-button {
    top: 12px !important;
  }

  .cart-fab {
    top: 63px !important;
  }

  .category-menu-button {
    right: 12px !important;
    top: 74px !important;
  }

  .accessibility-button {
    right: 12px !important;
    top: 12px !important;
  }
}

.search-input-wrapper {
  border-color: rgba(255, 255, 255, 0.16) !important;
}

@media (max-width: 680px) {
  .logo-wrap img {
    height: 76px !important;
    max-width: 215px !important;
  }

  .account-top-button,
  .cart-fab {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 18px !important;
    font-size: 23px !important;
  }

  .account-top-icon {
    font-size: 24px !important;
  }

  .cart-fab {
    font-size: 24px !important;
  }

  .category-menu-button {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
  }

  .category-menu-button span {
    width: 25px !important;
    height: 3px !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 430px) {
  .logo-wrap img {
    height: 72px !important;
    max-width: 205px !important;
  }

  .account-top-button,
  .cart-fab {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
  }

  .category-menu-button {
    width: 52px !important;
    height: 52px !important;
  }
}

.topbar {
  background: linear-gradient(180deg, rgba(4, 5, 8, 0.90), rgba(18, 20, 26, 0.72)) !important;
}

.search-input-wrapper {
  background: linear-gradient(135deg, rgba(6, 8, 12, 0.88), rgba(24, 27, 34, 0.74)) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.logo-wrap img {
  height: 86px !important;
  max-width: 235px !important;
}

.account-top-button,
.cart-fab,
.category-menu-button {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 244, 248, 0.95)) !important;
  border: 1px solid rgba(200, 206, 214, 0.95) !important;
  color: #111827 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

@media (max-width: 680px) {
  .account-top-button,
  .cart-fab {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 15px !important;
  }

  .category-menu-button {
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
  }

  .logo-wrap img {
    height: 79px !important;
    max-width: 220px !important;
  }
}

@media (max-width: 430px) {
  .account-top-button,
  .cart-fab {
    width: 47px !important;
    height: 47px !important;
    min-width: 47px !important;
    min-height: 47px !important;
    border-radius: 15px !important;
  }

  .category-menu-button {
    width: 49px !important;
    height: 49px !important;
    border-radius: 16px !important;
  }

  .logo-wrap img {
    height: 76px !important;
    max-width: 210px !important;
  }
}

.account-top-icon {
  color: #5f7fa3 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.account-top-text {
  display: none !important;
}

.cart-fab {
  font-size: 22px !important;
}

.category-menu-button span {
  background: #111827 !important;
  width: 22px !important;
  height: 2.5px !important;
  border-radius: 999px !important;
}

.category-menu-button {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  flex-direction: column !important;
}

.category-card,
.product-card,
.all-products-card {
  content-visibility: auto;
  contain-intrinsic-size: 260px;
}

.category-image-wrap,
.product-image-wrap {
  contain: layout paint;
}

.hero-banner-slide img,
.category-image-wrap img,
.product-image-wrap img,
.search-result-item img,
.logo-wrap img,
.accessibility-button-icon {
  image-rendering: auto;
}

@media (max-width: 768px) {
  .hero-banner-slide img,
  .category-image-wrap img,
  .product-image-wrap img {
    transform: none !important;
  }
}

body.app-loading .topbar,
body.app-loading .app-shell,
body.app-loading .floating-cart-bar,
body.app-loading .last-order-status-button {
  opacity: 0;
  pointer-events: none;
}

body.app-ready .topbar,
body.app-ready .app-shell,
body.app-ready .floating-cart-bar,
body.app-ready .last-order-status-button {
  opacity: 1;
  transition: opacity 0.18s ease;
}

.logo-wrap img:not([src]),
.logo-wrap img.logo-empty {
  display: none !important;
}

.qty-btn,
.qty-value {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.product-card {
  overflow-anchor: none;
}

@media (max-width: 680px) {
}

.premium-order-card.delivered .order-status-badge,
.order-status-badge.delivered {
  background: #ecfdf5 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
}

.premium-order-card.delivered .premium-status-ring {
  background: radial-gradient(circle, rgba(22, 163, 74, 0.16), rgba(22, 163, 74, 0.04)) !important;
}

@media (max-width: 520px) {
}

#lastOrderButton,
#lastOrderFloatingButton,
#lastOrderStatusButton,
#lastOrderToast,
#customerLastOrderButton {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.order-tracking-overlay {
  z-index: 999999;
}

.order-tracking-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.order-tracking-bubble.pending .order-tracking-bubble-ring,
.order-tracking-bubble.approved .order-tracking-bubble-ring {
  background: conic-gradient(
      from 0deg,
      rgba(249, 115, 22, 1),
      rgba(251, 191, 36, 1),
      rgba(249, 115, 22, 1),
      rgba(249, 115, 22, 0.35)
    );
}

.order-tracking-bubble.preparing .order-tracking-bubble-ring {
  background: conic-gradient(
      from 0deg,
      rgba(59, 130, 246, 1),
      rgba(125, 211, 252, 1),
      rgba(59, 130, 246, 1),
      rgba(59, 130, 246, 0.35)
    );
}

.order-tracking-bubble.on_the_way .order-tracking-bubble-ring {
  background: conic-gradient(
      from 0deg,
      rgba(168, 85, 247, 1),
      rgba(217, 70, 239, 1),
      rgba(168, 85, 247, 1),
      rgba(168, 85, 247, 0.35)
    );
}

.order-tracking-bubble.delivered .order-tracking-bubble-ring {
  background: conic-gradient(
      from 0deg,
      rgba(22, 163, 74, 1),
      rgba(134, 239, 172, 1),
      rgba(22, 163, 74, 1),
      rgba(22, 163, 74, 0.35)
    );
  animation: none;
}

.order-tracking-bubble.rejected .order-tracking-bubble-ring,
.order-tracking-bubble.cancelled .order-tracking-bubble-ring {
  background: conic-gradient(
      from 0deg,
      rgba(220, 38, 38, 1),
      rgba(252, 165, 165, 1),
      rgba(220, 38, 38, 1),
      rgba(220, 38, 38, 0.35)
    );
  animation: none;
}

.order-tracking-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.16), transparent 34%),
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.10), transparent 26%),
    rgba(4, 6, 10, 0.66);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}

.order-tracking-overlay.show {
  display: flex;
  animation: orderTrackingOverlayIn 0.22s ease both;
}

.order-tracking-panel {
  position: relative;
  overflow: auto;
  color: #ffffff;
  background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.10), transparent 30%),
    radial-gradient(circle at 90% 14%, rgba(249, 115, 22, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(9, 12, 18, 0.94), rgba(21, 25, 34, 0.90));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(24px) saturate(1.16);
  -webkit-backdrop-filter: blur(24px) saturate(1.16);
  animation: orderTrackingPanelIn 0.34s cubic-bezier(.2,.9,.2,1) both;
}

.order-tracking-panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 33px;
  pointer-events: none;
  background: linear-gradient(
      130deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.02) 38%,
      transparent 70%
    );
}

.order-tracking-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  top: -150px;
  right: 12%;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.18);
  filter: blur(28px);
  pointer-events: none;
}

.order-tracking-close-x {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.order-tracking-close-x:hover {
  transform: translateY(-1px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
  border-color: rgba(255, 255, 255, 0.24);
}

.order-tracking-close-x:active {
  transform: scale(0.96);
}

.order-tracking-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-left: 52px;
}

.order-tracking-small-title {
  margin: 0;
  color: rgba(255, 255, 255, 0.70);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.order-tracking-badge {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff7ed;
  font-size: 13px;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.24), rgba(251, 191, 36, 0.12));
  border: 1px solid rgba(249, 115, 22, 0.38);
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.order-tracking-hero {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
}

.order-tracking-ring {
  position: relative;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

.order-tracking-ring-track,
.order-tracking-ring-progress {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.order-tracking-ring-track {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03) 58%, transparent 60%),
    conic-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.order-tracking-ring-progress {
  background: conic-gradient(
      from 0deg,
      rgba(249, 115, 22, 1),
      rgba(251, 191, 36, 0.95),
      rgba(249, 115, 22, 1),
      rgba(249, 115, 22, 0.18)
    );
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 59%);
  mask: radial-gradient(circle, transparent 57%, #000 59%);
  filter: drop-shadow(0 0 14px rgba(249, 115, 22, 0.28));
  animation: orderTrackingRingSpin 2.8s linear infinite;
}

.order-tracking-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.order-tracking-title {
  margin: 0;
  color: #ffffff;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -0.04em;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
}

.order-tracking-text {
  max-width: 560px;
  margin: 12px auto 0;
  color: rgba(255, 255, 255, 0.76);
  font-weight: 700;
}

.order-tracking-panel.pending .order-tracking-ring-progress,
.order-tracking-panel.approved .order-tracking-ring-progress {
  background: conic-gradient(
      from 0deg,
      rgba(249, 115, 22, 1),
      rgba(251, 191, 36, 1),
      rgba(249, 115, 22, 1),
      rgba(249, 115, 22, 0.18)
    );
}

.order-tracking-panel.preparing .order-tracking-ring-progress {
  background: conic-gradient(
      from 0deg,
      rgba(59, 130, 246, 1),
      rgba(125, 211, 252, 1),
      rgba(59, 130, 246, 1),
      rgba(59, 130, 246, 0.18)
    );
  filter: drop-shadow(0 0 14px rgba(59, 130, 246, 0.26));
}

.order-tracking-panel.on_the_way .order-tracking-ring-progress {
  background: conic-gradient(
      from 0deg,
      rgba(168, 85, 247, 1),
      rgba(217, 70, 239, 1),
      rgba(168, 85, 247, 1),
      rgba(168, 85, 247, 0.18)
    );
  filter: drop-shadow(0 0 14px rgba(168, 85, 247, 0.26));
}

.order-tracking-panel.delivered .order-tracking-ring-progress {
  background: conic-gradient(
      from 0deg,
      rgba(22, 163, 74, 1),
      rgba(134, 239, 172, 1),
      rgba(22, 163, 74, 1),
      rgba(22, 163, 74, 0.18)
    );
  filter: drop-shadow(0 0 14px rgba(22, 163, 74, 0.26));
  animation: none;
}

.order-tracking-panel.rejected .order-tracking-ring-progress,
.order-tracking-panel.cancelled .order-tracking-ring-progress {
  background: conic-gradient(
      from 0deg,
      rgba(220, 38, 38, 1),
      rgba(252, 165, 165, 1),
      rgba(220, 38, 38, 1),
      rgba(220, 38, 38, 0.18)
    );
  filter: drop-shadow(0 0 14px rgba(220, 38, 38, 0.24));
  animation: none;
}

.order-tracking-steps {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.order-tracking-step {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: color 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease;
}

.order-tracking-step-dot {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.order-tracking-step-text {
  line-height: 1.25;
  font-weight: 900;
}

.order-tracking-step.is-done {
  color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.12);
}

.order-tracking-step.is-done .order-tracking-step-dot {
  background: linear-gradient(135deg, rgba(249, 115, 22, 1), rgba(251, 191, 36, 1));
  box-shadow: 0 0 0 5px rgba(249, 115, 22, 0.12),
    0 0 18px rgba(249, 115, 22, 0.26);
}

.order-tracking-step.is-current {
  color: #ffffff;
  transform: translateY(-2px);
  background: linear-gradient(145deg, rgba(249, 115, 22, 0.22), rgba(255, 255, 255, 0.07));
  border-color: rgba(249, 115, 22, 0.38);
  box-shadow: 0 16px 32px rgba(249, 115, 22, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.order-tracking-step.is-current .order-tracking-step-dot {
  background: #ffffff;
  box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.20),
    0 0 22px rgba(249, 115, 22, 0.40);
  animation: orderTrackingDotPulse 1.35s ease-in-out infinite;
}

.order-tracking-details {
  position: relative;
  z-index: 2;
  display: grid;
}

.order-tracking-detail {
  display: grid;
  gap: 5px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.045));
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.order-tracking-detail span {
  color: rgba(255, 255, 255, 0.52);
  font-weight: 850;
}

.order-tracking-detail strong {
  min-width: 0;
  color: #ffffff;
  line-height: 1.35;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.order-tracking-items-box {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.order-tracking-items-head {
  padding: 14px 16px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.055);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.order-tracking-items-list {
  display: grid;
  gap: 8px;
}

.order-tracking-actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.order-tracking-primary-btn,
.order-tracking-secondary-btn,
.order-tracking-finish-btn {
  padding: 0 16px;
  font-weight: 950;
  transition: transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.order-tracking-primary-btn {
  color: #111827;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 250, 0.90));
  border: 1px solid rgba(255, 255, 255, 0.80);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.order-tracking-secondary-btn,
.order-tracking-finish-btn {
  color: #ffffff;
  background: linear-gradient(145deg, rgba(249, 115, 22, 0.24), rgba(249, 115, 22, 0.12));
  border: 1px solid rgba(249, 115, 22, 0.34);
  box-shadow: 0 14px 28px rgba(249, 115, 22, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.order-tracking-primary-btn:hover,
.order-tracking-secondary-btn:hover,
.order-tracking-finish-btn:hover {
  transform: translateY(-2px);
}

.order-tracking-primary-btn:active,
.order-tracking-secondary-btn:active,
.order-tracking-finish-btn:active {
  transform: scale(0.97);
}

.order-tracking-finish-btn {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 10px;
}

.order-tracking-overlay.is-minimizing .order-tracking-panel {
  animation: orderTrackingPanelToBubble 0.48s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes orderTrackingOverlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes orderTrackingPanelIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes orderTrackingPanelToBubble {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  to {
    opacity: 0;
    transform: translate(110px, 260px) scale(0.18);
    filter: blur(3px);
  }
}

@keyframes orderTrackingRingSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes orderTrackingDotPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.84);
    opacity: 0.78;
  }
}

@media (max-width: 680px) {

  .order-tracking-overlay {
    align-items: flex-end;
    padding: 10px;
  }

  .order-tracking-panel {
    width: 100%;
    max-height: 92vh;
    border-radius: 30px 30px 24px 24px;
    padding: 20px 14px 16px;
  }

  .order-tracking-header {
    padding-left: 50px;
  }

  .order-tracking-ring {
    width: 132px;
    height: 132px;
  }

  .order-tracking-icon {
    width: 76px;
    height: 76px;
    border-radius: 26px;
  }

  .order-tracking-icon svg {
    width: 42px;
    height: 42px;
  }

  .order-tracking-text {
    font-size: 14px;
  }

  .order-tracking-steps {
    grid-template-columns: repeat(5, minmax(56px, 1fr));
    gap: 8px;
    overflow-x: auto;
    padding: 10px;
  }

  .order-tracking-step {
    min-height: 68px;
    padding: 10px 6px;
  }

  .order-tracking-step-text {
    font-size: 12px;
  }

  .order-tracking-details {
    grid-template-columns: 1fr;
  }

  .order-tracking-actions {
    grid-template-columns: 1fr;
  }

  .order-tracking-primary-btn,
  .order-tracking-secondary-btn,
  .order-tracking-finish-btn {
    min-height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .order-tracking-ring-progress,
  .order-tracking-step.is-current .order-tracking-step-dot,
  .order-tracking-overlay.show,
  .order-tracking-panel {
    animation: none !important;
  }
}

.order-tracking-panel {
  width: min(100%, 560px);
  max-height: 84vh;
  padding: 18px;
  border-radius: 28px;
}

.order-tracking-header {
  margin-bottom: 10px;
}

.order-tracking-hero {
  padding: 2px 6px 14px;
}

.order-tracking-ring {
  width: 112px;
  height: 112px;
  margin-bottom: 12px;
}

.order-tracking-icon {
  width: 64px;
  height: 64px;
  border-radius: 22px;
}

.order-tracking-icon svg {
  width: 36px;
  height: 36px;
}

.order-tracking-title {
  font-size: clamp(24px, 4vw, 34px);
}

.order-tracking-text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.order-tracking-steps {
  gap: 8px;
  padding: 10px;
  margin: 0 0 12px;
  border-radius: 20px;
}

.order-tracking-step {
  min-height: 58px;
  padding: 8px 6px;
  border-radius: 15px;
}

.order-tracking-step-dot {
  width: 11px;
  height: 11px;
}

.order-tracking-step-text {
  font-size: 12px;
}

.order-tracking-details {
  gap: 8px;
  margin-top: 10px;
}

.order-tracking-detail {
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 16px;
}

.order-tracking-detail span {
  font-size: 11px;
}

.order-tracking-detail strong {
  font-size: 13px;
}

.order-tracking-actions {
  margin-top: 10px;
}

.order-tracking-primary-btn,
.order-tracking-secondary-btn,
.order-tracking-finish-btn {
  min-height: 46px;
  border-radius: 15px;
  font-size: 14px;
}

@media (max-width: 680px) {
  .order-tracking-overlay {
    padding: 8px;
  }

  .order-tracking-panel {
    width: 100%;
    max-height: 88vh;
    padding: 16px 12px;
    border-radius: 24px;
  }

  .order-tracking-ring {
    width: 102px;
    height: 102px;
  }

  .order-tracking-icon {
    width: 58px;
    height: 58px;
  }

  .order-tracking-icon svg {
    width: 32px;
    height: 32px;
  }

  .order-tracking-title {
    font-size: 26px;
  }

  .order-tracking-details {
    grid-template-columns: 1fr;
  }
}

.order-tracking-details {
  grid-template-columns: 1fr !important;
}

.order-tracking-details .order-tracking-detail:not(:first-child) {
  display: none !important;
}

.order-tracking-details .order-tracking-detail:first-child {
  min-height: 52px;
}

.order-tracking-items-box {
  margin-top: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.055);
}

.order-tracking-items-head {
  display: none;
}

.order-tracking-items-list {
  padding: 10px;
}

.order-receipt-card {
  display: grid;
  gap: 12px;
  color: #ffffff;
}

.order-receipt-head {
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(249, 115, 22, 0.20), rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(249, 115, 22, 0.26);
}

.order-receipt-head span,
.order-receipt-row span {
  display: block;
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
  font-weight: 850;
}

.order-receipt-head strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.order-receipt-section {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.order-receipt-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 950;
}

.order-receipt-row {
  display: grid;
  gap: 4px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.order-receipt-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.order-receipt-row strong {
  font-size: 13px;
  line-height: 1.45;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.order-receipt-products {
  display: grid;
  gap: 8px;
}

.order-receipt-product {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.052);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.order-receipt-product strong {
  display: block;
  font-size: 13px;
  font-weight: 950;
}

.order-receipt-product span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
  font-weight: 750;
}

.order-receipt-product b {
  align-self: center;
  font-size: 13px;
  font-weight: 950;
}

.order-receipt-empty {
  padding: 12px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.045);
  font-size: 13px;
  font-weight: 800;
}

.order-receipt-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 246, 248, 0.90));
  color: #111827;
}

.order-receipt-total span {
  font-size: 13px;
  font-weight: 900;
}

.order-receipt-total strong {
  font-size: 18px;
  font-weight: 950;
}

.order-tracking-panel.pending .order-tracking-ring-progress,
.order-tracking-bubble.pending .order-tracking-bubble-ring {
  background: conic-gradient(
      from 0deg,
      rgba(249, 115, 22, 1),
      rgba(251, 191, 36, 1),
      rgba(249, 115, 22, 1),
      rgba(249, 115, 22, 0.28)
    ) !important;
}

.order-tracking-panel.approved .order-tracking-ring-progress,
.order-tracking-bubble.approved .order-tracking-bubble-ring {
  background: conic-gradient(
      from 0deg,
      rgba(22, 163, 74, 1),
      rgba(134, 239, 172, 1),
      rgba(22, 163, 74, 1),
      rgba(22, 163, 74, 0.28)
    ) !important;
  filter: drop-shadow(0 0 14px rgba(22, 163, 74, 0.32)) !important;
}

.order-tracking-panel.preparing .order-tracking-ring-progress,
.order-tracking-bubble.preparing .order-tracking-bubble-ring {
  background: conic-gradient(
      from 0deg,
      rgba(37, 99, 235, 1),
      rgba(125, 211, 252, 1),
      rgba(37, 99, 235, 1),
      rgba(37, 99, 235, 0.28)
    ) !important;
  filter: drop-shadow(0 0 14px rgba(37, 99, 235, 0.30)) !important;
}

.order-tracking-panel.on_the_way .order-tracking-ring-progress,
.order-tracking-bubble.on_the_way .order-tracking-bubble-ring {
  background: conic-gradient(
      from 0deg,
      rgba(124, 58, 237, 1),
      rgba(217, 70, 239, 1),
      rgba(124, 58, 237, 1),
      rgba(124, 58, 237, 0.28)
    ) !important;
  filter: drop-shadow(0 0 14px rgba(124, 58, 237, 0.30)) !important;
}

.order-tracking-panel.delivered .order-tracking-ring-progress,
.order-tracking-bubble.delivered .order-tracking-bubble-ring {
  background: conic-gradient(
      from 0deg,
      rgba(21, 128, 61, 1),
      rgba(187, 247, 208, 1),
      rgba(21, 128, 61, 1),
      rgba(21, 128, 61, 0.28)
    ) !important;
  filter: drop-shadow(0 0 14px rgba(21, 128, 61, 0.32)) !important;
}

.order-tracking-panel.rejected .order-tracking-ring-progress,
.order-tracking-panel.cancelled .order-tracking-ring-progress,
.order-tracking-bubble.rejected .order-tracking-bubble-ring,
.order-tracking-bubble.cancelled .order-tracking-bubble-ring {
  background: conic-gradient(
      from 0deg,
      rgba(220, 38, 38, 1),
      rgba(252, 165, 165, 1),
      rgba(220, 38, 38, 1),
      rgba(220, 38, 38, 0.28)
    ) !important;
  filter: drop-shadow(0 0 14px rgba(220, 38, 38, 0.30)) !important;
}

.order-tracking-panel.approved .order-tracking-badge,
.order-tracking-panel.approved .order-tracking-step.is-current {
  border-color: rgba(22, 163, 74, 0.55) !important;
  background: linear-gradient(145deg, rgba(22, 163, 74, 0.24), rgba(255, 255, 255, 0.07)) !important;
}

.order-tracking-panel.preparing .order-tracking-badge,
.order-tracking-panel.preparing .order-tracking-step.is-current {
  border-color: rgba(37, 99, 235, 0.55) !important;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.24), rgba(255, 255, 255, 0.07)) !important;
}

.order-tracking-panel.on_the_way .order-tracking-badge,
.order-tracking-panel.on_the_way .order-tracking-step.is-current {
  border-color: rgba(124, 58, 237, 0.55) !important;
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.24), rgba(255, 255, 255, 0.07)) !important;
}

.order-tracking-panel.delivered .order-tracking-badge,
.order-tracking-panel.delivered .order-tracking-step.is-current {
  border-color: rgba(21, 128, 61, 0.55) !important;
  background: linear-gradient(145deg, rgba(21, 128, 61, 0.24), rgba(255, 255, 255, 0.07)) !important;
}

.order-tracking-panel.rejected .order-tracking-badge,
.order-tracking-panel.cancelled .order-tracking-badge,
.order-tracking-panel.rejected .order-tracking-step.is-current,
.order-tracking-panel.cancelled .order-tracking-step.is-current {
  border-color: rgba(220, 38, 38, 0.55) !important;
  background: linear-gradient(145deg, rgba(220, 38, 38, 0.24), rgba(255, 255, 255, 0.07)) !important;
}

@media (max-width: 768px) {
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-to-main {
  position: fixed !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 100000 !important;
  min-height: 46px !important;
  padding: 12px 18px !important;
  border-radius: 16px !important;
  background: #111827 !important;
  color: #ffffff !important;
  border: 3px solid #f97316 !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  transform: translateY(-140%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.skip-to-main:focus,
.skip-to-main:focus-visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  outline: none !important;
}

:focus-visible {
  outline: 4px solid #f97316 !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95),
    0 0 0 7px rgba(249, 115, 22, 0.55) !important;
}

:focus:not(:focus-visible) {
  outline: none;
}

#mainContent {
  scroll-margin-top: 120px;
}

#mainContent:focus {
  outline: 4px solid rgba(249, 115, 22, 0.85) !important;
  outline-offset: 8px !important;
  border-radius: 18px;
}

.accessibility-overlay:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  background: radial-gradient(circle at top, rgba(249, 115, 22, 0.22), transparent 34%),
    rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.accessibility-modal {
  width: min(780px, 96vw) !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  border-radius: 28px !important;
  background: linear-gradient(145deg, rgba(10, 13, 20, 0.97), rgba(20, 24, 32, 0.96)) !important;
  border: 2px solid rgba(249, 115, 22, 0.75) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.accessibility-modal-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 22px !important;
  background: linear-gradient(145deg, rgba(10, 13, 20, 0.99), rgba(20, 24, 32, 0.98)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.accessibility-modal-head h2 {
  display: block !important;
  margin: 0 !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  color: #ffffff !important;
}

.accessibility-modal-intro {
  display: block !important;
  margin: 8px 0 0 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
}

.accessibility-close-btn {
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0 !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  background: #ffffff !important;
  color: #111827 !important;
  border: 2px solid #f97316 !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.30) !important;
}

.accessibility-modal-body {
  padding: 20px 22px 24px !important;
  background: transparent !important;
}

.accessibility-section {
  display: block !important;
  margin-bottom: 22px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
}

.accessibility-section-title {
  display: block !important;
  margin: 0 0 14px !important;
  font-size: 19px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  color: #ffffff !important;
}

.accessibility-menu-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.accessibility-menu-btn,
.accessibility-menu-link {
  width: 100% !important;
  min-height: 116px !important;
  padding: 14px 10px !important;
  border-radius: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-align: center !important;
  text-decoration: none !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(243, 246, 249, 0.92)) !important;
  color: #111827 !important;
  border: 2px solid rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  cursor: pointer !important;
}

.accessibility-menu-btn[aria-pressed="true"],
.accessibility-menu-btn.is-active {
  background: linear-gradient(145deg, rgba(249, 115, 22, 0.98), rgba(234, 88, 12, 0.94)) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
}

.accessibility-btn-icon {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
}

.accessibility-btn-icon svg {
  width: 34px !important;
  height: 34px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.accessibility-btn-text {
  display: block !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
}

.accessibility-text-scale-box {
  margin-bottom: 14px !important;
  padding: 15px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #111827 !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
}

.accessibility-text-scale-label {
  display: block !important;
  margin-bottom: 12px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #111827 !important;
}

.accessibility-text-scale-range {
  width: 100% !important;
  accent-color: #f97316 !important;
}

.accessibility-statement-panel {
  margin-top: 20px !important;
  padding: 20px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  color: #111827 !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

.accessibility-statement-panel h3 {
  margin: 18px 0 8px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #111827 !important;
}

.accessibility-statement-panel p {
  margin: 0 0 12px !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  font-weight: 700 !important;
  color: #374151 !important;
}

@media (max-width: 640px) {
  .accessibility-overlay:not(.hidden) {
    align-items: stretch !important;
    padding: 10px !important;
  }

  .accessibility-modal {
    width: 100% !important;
    max-height: 94vh !important;
    border-radius: 24px !important;
  }

  .accessibility-modal-head {
    padding: 18px 16px 14px !important;
  }

  .accessibility-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .accessibility-menu-btn,
  .accessibility-menu-link {
    min-height: 104px !important;
  }
}

body.accessibility-grayscale {
  filter: grayscale(1);
}

body.accessibility-grayscale .accessibility-button,
body.accessibility-grayscale .accessibility-overlay,
body.accessibility-grayscale .accessibility-modal {
  filter: none !important;
}

.accessibility-button {
  z-index: 1000000 !important;
  pointer-events: auto !important;
}

.accessibility-overlay:not(.hidden) {
  z-index: 1000001 !important;
  pointer-events: auto !important;
}
/* =========================================================
   ערכת נושא חדשה - כתום זכוכית פרימיום
   יותר כתום משחור
   הדבקה בסוף style.css בלבד
   ========================================================= */

:root {
  --theme-orange-glass: rgba(249, 115, 22, 0.82);
  --theme-orange-glass-strong: rgba(234, 88, 12, 0.92);
  --theme-orange-glass-soft: rgba(251, 146, 60, 0.42);
  --theme-orange-border: rgba(255, 186, 120, 0.72);
  --theme-orange-border-strong: rgba(255, 199, 146, 0.95);
  --theme-orange-shadow: rgba(249, 115, 22, 0.34);
  --theme-black-depth: rgba(12, 8, 5, 0.52);
  --theme-black-depth-strong: rgba(8, 6, 4, 0.68);
  --theme-white-text: #ffffff;
  --theme-dark-text: #111827;
}

/* =========================================================
   1) כרטיסים כלליים - עגלה, הזמנה, התחברות, מודאלים
   ========================================================= */

.cart-drawer,
.cart-item,
.cart-footer,
.modal-card,
.empty-state,
.search-results {
  background:
    linear-gradient(
      145deg,
      var(--theme-orange-glass-strong),
      var(--theme-orange-glass),
      var(--theme-black-depth)
    ) !important;
  color: var(--theme-white-text) !important;
  border: 1.5px solid var(--theme-orange-border) !important;
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.26),
    0 0 34px var(--theme-orange-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
  backdrop-filter: blur(20px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.18) !important;
}

/* טקסטים בתוך כרטיסים כהים/כתומים */
.cart-drawer *,
.cart-item *,
.cart-footer *,
.modal-card *,
.empty-state * {
  color: var(--theme-white-text);
}

/* =========================================================
   2) כרטיסי קטגוריות ומוצרים - כתום זכוכית
   ========================================================= */

.card,
.category-card,
.product-card,
.all-products-card,
.categories-grid .card,
.products-grid .card {
  background:
    linear-gradient(
      145deg,
      rgba(255, 147, 58, 0.96),
      rgba(249, 115, 22, 0.88),
      rgba(111, 45, 7, 0.76)
    ) !important;
  border: 2px solid var(--theme-orange-border-strong) !important;
  box-shadow:
    0 16px 34px rgba(249, 115, 22, 0.25),
    0 0 28px rgba(249, 115, 22, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(18px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
}

/* שמירה על אזור תמונה בהיר כדי שהמוצרים לא ייעלמו */
.category-image-wrap,
.product-image-wrap,
.category-card.text-only .category-image-wrap,
.product-card.text-only .product-image-wrap,
.text-only-wrap {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(255, 237, 213, 0.90)
    ) !important;
  border-bottom: 2px solid rgba(255, 186, 120, 0.8) !important;
}

/* אזור טקסט של מוצר/קטגוריה */
.category-body,
.product-body {
  background:
    linear-gradient(
      145deg,
      rgba(251, 146, 60, 0.92),
      rgba(249, 115, 22, 0.88),
      rgba(124, 45, 18, 0.68)
    ) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(14px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.18) !important;
}

.category-name,
.product-name,
.price {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.24) !important;
}

/* ריחוף על מוצר/קטגוריה */
.card:hover,
.category-card:hover,
.product-card:hover,
.all-products-card:hover {
  border-color: rgba(255, 225, 190, 1) !important;
  box-shadow:
    0 20px 44px rgba(249, 115, 22, 0.34),
    0 0 38px rgba(249, 115, 22, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

/* =========================================================
   3) ריבועים קטנים - עגלה, התחברות, 3 קווים
   לא נוגע בכפתור נגישות
   ========================================================= */

.cart-fab,
.account-top-button,
.category-menu-button {
  background:
    linear-gradient(
      145deg,
      rgba(255, 159, 67, 0.94),
      rgba(249, 115, 22, 0.88),
      rgba(124, 45, 18, 0.72)
    ) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 218, 185, 0.82) !important;
  box-shadow:
    0 14px 30px rgba(249, 115, 22, 0.34),
    0 0 22px rgba(249, 115, 22, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
}

/* צבע אייקונים בתוך הריבועים */
.cart-fab *,
.account-top-button *,
.category-menu-button * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* ריחוף על הריבועים */
.cart-fab:hover,
.account-top-button:hover,
.category-menu-button:hover {
  background:
    linear-gradient(
      145deg,
      rgba(255, 177, 92, 1),
      rgba(249, 115, 22, 0.96),
      rgba(154, 52, 18, 0.82)
    ) !important;
  border-color: rgba(255, 237, 213, 1) !important;
  box-shadow:
    0 18px 38px rgba(249, 115, 22, 0.44),
    0 0 32px rgba(249, 115, 22, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

/* לחיצה */
.cart-fab:active,
.account-top-button:active,
.category-menu-button:active {
  box-shadow:
    0 8px 20px rgba(249, 115, 22, 0.28),
    inset 0 2px 8px rgba(0, 0, 0, 0.20) !important;
}

/* באדג׳ של העגלה */
.cart-badge,
.floating-cart-count {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 1),
      rgba(255, 237, 213, 0.96)
    ) !important;
  color: #9a3412 !important;
  border: 1.5px solid rgba(255, 199, 146, 1) !important;
  box-shadow:
    0 8px 18px rgba(249, 115, 22, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* =========================================================
   4) כפתורים גדולים - הוספה, המשך הזמנה, שליחה
   ========================================================= */

.checkout-btn,
#continueOrderBtn,
#sendOrderBtn,
.cart-footer .checkout-btn,
.back-btn,
.close-btn {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(255, 237, 213, 0.92)
    ) !important;
  color: #9a3412 !important;
  border: 1.5px solid rgba(255, 199, 146, 0.95) !important;
  box-shadow:
    0 14px 28px rgba(249, 115, 22, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

.checkout-btn:hover,
#continueOrderBtn:hover,
#sendOrderBtn:hover,
.back-btn:hover,
.close-btn:hover {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 1),
      rgba(255, 220, 180, 0.96)
    ) !important;
  border-color: rgba(249, 115, 22, 0.72) !important;
  box-shadow:
    0 18px 34px rgba(249, 115, 22, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* =========================================================
   5) שדות קלט - כתום זכוכית בהיר
   ========================================================= */

input,
textarea,
select {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(255, 237, 213, 0.88)
    ) !important;
  color: #111827 !important;
  border: 1.5px solid rgba(255, 199, 146, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 8px 20px rgba(249, 115, 22, 0.12) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(124, 45, 18, 0.62) !important;
}

/* לא לשבור את החיפוש - שומר אותו שקוף בתוך העטיפה */
.search-input-wrapper input,
#searchInput,
.search-input {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

/* =========================================================
   6) חיפוש ותוצאות חיפוש
   ========================================================= */

.search-input-wrapper {
  background:
    linear-gradient(
      145deg,
      rgba(255, 147, 58, 0.88),
      rgba(249, 115, 22, 0.76),
      rgba(73, 29, 8, 0.58)
    ) !important;
  border: 1.5px solid rgba(255, 218, 185, 0.72) !important;
  box-shadow:
    0 18px 42px rgba(249, 115, 22, 0.24),
    0 0 26px rgba(249, 115, 22, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.search-input-wrapper:focus-within {
  border-color: rgba(255, 237, 213, 1) !important;
  box-shadow:
    0 20px 46px rgba(249, 115, 22, 0.34),
    0 0 0 3px rgba(249, 115, 22, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

#searchInput::placeholder {
  color: rgba(255, 255, 255, 0.76) !important;
}

.search-result-item {
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.search-result-item:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

.search-result-name,
.search-result-price,
.search-result-stock {
  color: #ffffff !important;
}

/* =========================================================
   7) עגלה
   ========================================================= */

.cart-drawer-head,
.cart-items,
.cart-footer {
  background:
    linear-gradient(
      180deg,
      rgba(255, 147, 58, 0.92),
      rgba(249, 115, 22, 0.82),
      rgba(73, 29, 8, 0.52)
    ) !important;
  border-color: rgba(255, 218, 185, 0.46) !important;
}

.cart-item-image {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(255, 237, 213, 0.92)
    ) !important;
  border: 1px solid rgba(255, 218, 185, 0.95) !important;
}

.cart-summary-title,
.cart-summary-total,
.cart-item-name,
.cart-item-price,
.cart-item-total {
  color: #ffffff !important;
}

/* =========================================================
   8) תפריט נגישות - רק החלון, לא כפתור הנגישות
   ========================================================= */

.accessibility-modal {
  background:
    linear-gradient(
      180deg,
      rgba(255, 147, 58, 0.96),
      rgba(249, 115, 22, 0.88),
      rgba(91, 33, 9, 0.76)
    ) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 218, 185, 0.82) !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.34),
    0 0 38px rgba(249, 115, 22, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
}

.accessibility-modal-head {
  background:
    linear-gradient(
      145deg,
      rgba(249, 115, 22, 0.96),
      rgba(154, 52, 18, 0.82)
    ) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 218, 185, 0.42) !important;
}

.accessibility-modal-head h2,
.accessibility-modal-body,
.accessibility-modal-body h3,
.accessibility-modal-body p,
.accessibility-modal-body a {
  color: #ffffff !important;
}

.accessibility-close-btn,
.accessibility-menu-btn {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(255, 237, 213, 0.90)
    ) !important;
  color: #9a3412 !important;
  border: 1.5px solid rgba(255, 199, 146, 0.95) !important;
  box-shadow:
    0 10px 22px rgba(124, 45, 18, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.accessibility-menu-btn:hover {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 1),
      rgba(255, 220, 180, 0.96)
    ) !important;
}

/* =========================================================
   9) תפריט 3 קווים / רשימת קטגוריות
   ========================================================= */

.category-side-menu,
.side-menu {
  background:
    linear-gradient(
      180deg,
      rgba(255, 147, 58, 0.96),
      rgba(249, 115, 22, 0.88),
      rgba(73, 29, 8, 0.70)
    ) !important;
  color: #ffffff !important;
  border-color: rgba(255, 218, 185, 0.72) !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.34),
    0 0 36px rgba(249, 115, 22, 0.30) !important;
  backdrop-filter: blur(20px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.18) !important;
}

.category-side-menu *,
.side-menu * {
  color: #ffffff !important;
}

.category-side-menu-item,
.side-menu-item {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.06)
    ) !important;
  border: 1px solid rgba(255, 218, 185, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.category-side-menu-item:hover,
.side-menu-item:hover {
  background: rgba(255, 255, 255, 0.20) !important;
  border-color: rgba(255, 237, 213, 0.56) !important;
}

/* =========================================================
   10) טוסט / הודעות
   ========================================================= */

.toast {
  background:
    linear-gradient(
      145deg,
      rgba(249, 115, 22, 0.94),
      rgba(124, 45, 18, 0.86)
    ) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 218, 185, 0.52) !important;
  box-shadow:
    0 24px 46px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(249, 115, 22, 0.32) !important;
}

/* =========================================================
   11) הגנה על כפתור הנגישות
   לא משנים אותו בכלל
   ========================================================= */

.accessibility-button {
  background: transparent !important;
}
/* =========================================================
   תיקוני ערכת נושא - שחור זכוכית / כתום זכוכית
   הדבקה בסוף style.css בלבד
   ========================================================= */

:root {
  --fix-black-glass: linear-gradient(180deg, rgba(8, 10, 14, 0.94), rgba(20, 24, 30, 0.86));
  --fix-black-glass-soft: linear-gradient(145deg, rgba(8, 10, 14, 0.88), rgba(30, 22, 16, 0.78));
  --fix-orange-glass: linear-gradient(145deg, rgba(255, 147, 58, 0.96), rgba(249, 115, 22, 0.88), rgba(154, 52, 18, 0.76));
  --fix-orange-glass-soft: linear-gradient(145deg, rgba(255, 160, 80, 0.94), rgba(249, 115, 22, 0.84));
  --fix-white-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 244, 248, 0.90));
  --fix-orange-border: rgba(255, 199, 146, 0.88);
  --fix-white-border: rgba(255, 255, 255, 0.78);
  --fix-white-text: #ffffff;
  --fix-dark-text: #111827;
  --fix-orange-text: #f97316;
}

/* =========================================================
   1) אייקונים קטנים למעלה - לבן זכוכית מקצועי
   עגלה / התחברות / 3 קווים
   ========================================================= */

.cart-fab,
.account-top-button,
.category-menu-button {
  background: var(--fix-white-glass) !important;
  color: #111827 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.24),
    0 0 20px rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

.cart-fab *,
.account-top-button *,
.category-menu-button * {
  color: #111827 !important;
  fill: #111827 !important;
  stroke: #111827 !important;
}

.category-menu-button span {
  background: #111827 !important;
  height: 3px !important;
  border-radius: 999px !important;
}

.cart-fab:hover,
.account-top-button:hover,
.category-menu-button:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(246, 248, 251, 0.96)) !important;
  border-color: rgba(255, 255, 255, 1) !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(255, 255, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* =========================================================
   2) תפריט קטגוריות צד - רקע שחור זכוכית
   והקטגוריות עצמן כתום זכוכית
   ========================================================= */

.category-side-menu-overlay {
  background: rgba(8, 10, 14, 0.70) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.category-side-menu {
  background: var(--fix-black-glass) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    -20px 0 60px rgba(0, 0, 0, 0.40),
    inset 1px 0 0 rgba(255, 255, 255, 0.06) !important;
}

.category-side-menu-head {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.category-side-menu-head h2,
.category-side-menu-head p {
  color: #ffffff !important;
}

.category-side-menu-close {
  background: var(--fix-white-glass) !important;
  color: #111827 !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

/* טיפול באיקס שלא רואים */
.category-side-menu-close,
.category-side-menu-close *,
.customer-auth-close,
.customer-auth-close *,
.accessibility-close-btn,
.accessibility-close-btn * {
  color: #111827 !important;
  fill: #111827 !important;
  stroke: #111827 !important;
}

.category-side-menu-item {
  background: var(--fix-orange-glass) !important;
  border: 1px solid rgba(255, 210, 170, 0.56) !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.24),
    0 0 18px rgba(249, 115, 22, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  color: #ffffff !important;
}

.category-side-menu-item:hover {
  background: linear-gradient(145deg, rgba(255, 166, 87, 0.98), rgba(249, 115, 22, 0.92), rgba(154, 52, 18, 0.82)) !important;
  border-color: rgba(255, 230, 205, 0.92) !important;
}

.category-side-menu-name,
.category-side-menu-arrow {
  color: #ffffff !important;
}

.category-side-menu-thumb {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.category-side-menu-thumb-fallback {
  color: #ffffff !important;
}

.category-side-menu-empty {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* =========================================================
   3) אישור גיל 18 - רקע שחור זכוכית, כפתורים כתום זכוכית
   ========================================================= */

.age18-modal-card {
  background: var(--fix-black-glass) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 210, 170, 0.36) !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.38),
    0 0 30px rgba(249, 115, 22, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.age18-modal-card::before {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.18), transparent 72%) !important;
}

.age18-modal-title,
.age18-modal-text,
.age18-modal-note,
.age18-warning-bar {
  color: #ffffff !important;
}

.age18-modal-note,
.age18-warning-bar {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 210, 170, 0.22) !important;
}

.age18-confirm-btn,
.age18-deny-btn {
  color: #ffffff !important;
  background: var(--fix-orange-glass) !important;
  border: 1px solid rgba(255, 210, 170, 0.54) !important;
  box-shadow:
    0 12px 24px rgba(249, 115, 22, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

/* =========================================================
   4) התחברות / אזור אישי - רקע שחור זכוכית, כפתורים כתום זכוכית
   ========================================================= */

.customer-auth-card {
  background: var(--fix-black-glass) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 210, 170, 0.28) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(249, 115, 22, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.customer-auth-head {
  background: rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.customer-auth-head h2,
.customer-auth-head p,
.customer-auth-label,
.customer-auth-message,
.customer-profile-info,
.customer-profile-info strong {
  color: #ffffff !important;
}

.customer-auth-close {
  background: var(--fix-white-glass) !important;
  color: #111827 !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
}

.customer-auth-tab {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.customer-auth-tab.active {
  background: var(--fix-orange-glass) !important;
  color: #ffffff !important;
  border-color: rgba(255, 210, 170, 0.70) !important;
  box-shadow: 0 10px 22px rgba(249, 115, 22, 0.18) !important;
}

.customer-auth-input,
.customer-auth-textarea {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #111827 !important;
  border: 1.5px solid rgba(255, 210, 170, 0.54) !important;
}

.customer-auth-main-btn {
  color: #ffffff !important;
  background: var(--fix-orange-glass) !important;
  border: 1px solid rgba(255, 210, 170, 0.54) !important;
}

.customer-auth-message,
.customer-profile-info {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* =========================================================
   5) שורת חיפוש - שחור זכוכית, בלי זכוכית מגדלת
   ========================================================= */

.search-input-wrapper {
  background: var(--fix-black-glass-soft) !important;
  border: 1.5px solid rgba(255, 210, 170, 0.34) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.30),
    0 0 18px rgba(249, 115, 22, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.search-input-wrapper:focus-within {
  border-color: rgba(255, 210, 170, 0.62) !important;
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.34),
    0 0 0 3px rgba(249, 115, 22, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.search-input-wrapper .search-icon {
  display: none !important;
}

#searchInput,
.search-input {
  color: #ffffff !important;
}

/* =========================================================
   6) עגלה - פלוס מינוס שחור זכוכית + טקסט ריק בלבן
   ========================================================= */

.cart-item .qty-box,
.cart-drawer .qty-box {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.cart-item .qty-btn,
.cart-drawer .qty-btn {
  background: var(--fix-black-glass-soft) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 210, 170, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 14px rgba(0, 0, 0, 0.18) !important;
}

.cart-item .qty-btn:hover,
.cart-drawer .qty-btn:hover {
  background: linear-gradient(145deg, rgba(18, 22, 28, 0.92), rgba(46, 34, 24, 0.84)) !important;
}

.cart-item .qty-value,
.cart-item .qty-num,
.cart-drawer .qty-value,
.cart-drawer .qty-num {
  color: #ffffff !important;
}

.cart-items .empty-state,
.cart-items .empty-state *,
.cart-drawer .empty-state,
.cart-drawer .empty-state * {
  color: #ffffff !important;
}

/* =========================================================
   7) שורת אישור תקנון - קריאה וברורה
   קוביית ה-V קטנה ומקצועית
   ========================================================= */

.terms-confirm-box {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 210, 170, 0.28) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16) !important;
}

.terms-confirm-label {
  color: #ffffff !important;
  align-items: center !important;
  gap: 10px !important;
}

.terms-confirm-label a {
  color: #ffd5b0 !important;
}

.terms-confirm-label input {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin-top: 0 !important;
  accent-color: #f97316 !important;
  border-radius: 5px !important;
}

/* =========================================================
   8) להסיר שורת "התשלום במזומן לשליח"
   אם אצלך הקלאס שונה וזה לא ייעלם,
   תשלח לי HTML של האזור ואכוון אותך בול
   ========================================================= */

/* =========================================================
   9) תפריט נגישות - רקע שחור זכוכית, ריבועים כתום זכוכית
   ========================================================= */

.accessibility-modal {
  background: var(--fix-black-glass) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 210, 170, 0.30) !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.36),
    0 0 26px rgba(249, 115, 22, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.accessibility-modal-head {
  background: rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.accessibility-modal-head h2,
.accessibility-modal-body,
.accessibility-modal-body h3,
.accessibility-modal-body p,
.accessibility-modal-body a {
  color: #ffffff !important;
}

.accessibility-close-btn {
  background: var(--fix-white-glass) !important;
  color: #111827 !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
}

.accessibility-menu-btn {
  background: var(--fix-orange-glass) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 210, 170, 0.48) !important;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

.accessibility-menu-btn:hover {
  background: linear-gradient(145deg, rgba(255, 166, 87, 0.98), rgba(249, 115, 22, 0.92), rgba(154, 52, 18, 0.82)) !important;
}

/* =========================================================
   10) תיקון כללי לקופסאות לבנות מיותרות בטקסטים
   ========================================================= */

.cart-drawer .mini-note {
  color: #ffffff !important;
}
/* =========================================================
   תיקונים נוספים - לפי התמונות האחרונות
   הדבקה בסוף style.css בלבד
   ========================================================= */

/* =========================================================
   1) להוריד את "התשלום במזומן" למעלה
   ========================================================= */

/* =========================================================
   2) כותרת "פרטי משלוח" - בלי אייקון, באמצע
   ========================================================= */

.cart-drawer-head {
  position: relative !important;
  justify-content: center !important;
  text-align: center !important;
}

.cart-drawer-title {
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
  padding-inline: 60px !important;
}

/* מיקום כפתור חזרה/סגירה בצד */
.cart-drawer-head .back-btn,
.cart-drawer-head .close-btn,
.checkout-header .back-btn,
.checkout-header .close-btn,
.checkout-modal-header .back-btn,
.checkout-modal-header .close-btn {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* הסתרת אייקון ליד הכותרת אם הוא עטוף באלמנט */
.cart-drawer-title i,
.cart-drawer-title svg,
.cart-drawer-title .icon,
.cart-drawer-title .emoji,
.cart-drawer-title .title-icon,
.checkout-title .icon,
.checkout-modal-title .icon,
.checkout-header-title .icon {
  display: none !important;
}

/* אם האייקון מגיע מ-after */
.cart-drawer-title::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   3) שורת התקנון והמדיניות - שחור זכוכית
   ========================================================= */

.terms-confirm-box {
  background:
    linear-gradient(145deg, rgba(8, 10, 14, 0.92), rgba(20, 24, 30, 0.84)) !important;
  border: 1px solid rgba(255, 199, 146, 0.28) !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.terms-confirm-label {
  color: #ffffff !important;
  align-items: center !important;
  gap: 10px !important;
}

.terms-confirm-label a {
  color: #ffbe8a !important;
  text-decoration: underline !important;
}

.terms-confirm-label a:hover {
  color: #ffd7b5 !important;
}

.terms-confirm-label input {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin-top: 0 !important;
  accent-color: #f97316 !important;
  border-radius: 5px !important;
}

/* =========================================================
   4) אישור גיל 18 - עיצוב חדש
   ========================================================= */

.age18-modal-card {
  background:
    linear-gradient(180deg, rgba(8, 10, 14, 0.94), rgba(20, 24, 30, 0.88)) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 210, 170, 0.28) !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.38),
    0 0 28px rgba(249, 115, 22, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.age18-modal-title,
.age18-modal-text {
  color: #ffffff !important;
}

/* ריבוע 18 - לבן עם 18 אדום */
.age18-modal-icon {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 250, 0.95)) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* כפתור כן - ירוק זכוכית */
.age18-confirm-btn {
  color: #ffffff !important;
  background:
    linear-gradient(145deg, rgba(34, 197, 94, 0.96), rgba(21, 128, 61, 0.86)) !important;
  border: 1px solid rgba(187, 247, 208, 0.44) !important;
  box-shadow:
    0 12px 24px rgba(34, 197, 94, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* כפתור לא - אדום זכוכית */
.age18-deny-btn {
  color: #ffffff !important;
  background:
    linear-gradient(145deg, rgba(239, 68, 68, 0.96), rgba(153, 27, 27, 0.86)) !important;
  border: 1px solid rgba(254, 202, 202, 0.42) !important;
  box-shadow:
    0 12px 24px rgba(239, 68, 68, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* שורת אזהרה - כמו אזהרה */
.age18-modal-note {
  color: #111827 !important;
  background:
    linear-gradient(145deg, rgba(255, 248, 220, 0.98), rgba(255, 228, 160, 0.95)) !important;
  border: 1px solid rgba(217, 119, 6, 0.42) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

/* =========================================================
   5) שמירת מראה נעים לשדות באזור ההזמנה
   ========================================================= */

/* =========================================================
   6) אם נשאר טקסט תשלום מיותר בתוך אזור ההזמנה
   ========================================================= */
/* =========================================================
   תיקון רק לריבוע של 18+ בלבד
   ========================================================= */

.age18-modal-icon {
  width: 78px !important;
  height: 78px !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
  border-radius: 24px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;

  /* ריבוע לבן זכוכית */
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(245, 247, 250, 0.72)) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -8px 16px rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;

  /* הכיתוב */
  color: #dc2626 !important;
  font-size: 22px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  text-align: center !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 4px 10px rgba(220, 38, 38, 0.18) !important;
}

/* אם ה-18 יושב בתוך span */
.age18-modal-icon span {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  transform: translateY(1px) !important;
  color: #dc2626 !important;
  font-size: 22px !important;
  font-weight: 1000 !important;
  letter-spacing: -0.03em !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 4px 10px rgba(220, 38, 38, 0.18) !important;
}
/* =========================================================
   פס אזהרה לקטגוריות 18+ - מעל המוצרים
   ========================================================= */

.age18-warning-bar {
  color: #111827 !important;
  background:
    linear-gradient(145deg, rgba(255, 248, 220, 0.98), rgba(255, 228, 160, 0.95)) !important;
  border: 1px solid rgba(217, 119, 6, 0.48) !important;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  text-shadow: none !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
}

/* הטקסט בתוך הפס */
.age18-warning-bar,
.age18-warning-bar * {
  color: #111827 !important;
  font-weight: 900 !important;
}

/* החלק של 18+ שיהיה יותר בולט */
.age18-warning-bar strong,
.age18-warning-bar b,
.age18-warning-bar .age18-highlight {
  color: #b91c1c !important;
  font-weight: 1000 !important;
}
/* =========================================================
   תיקוני מובייל:
   1) כפתור חזור מקצועי
   2) רשימת קטגוריות תקינה במובייל
   3) הצהרת נגישות קריאה
   ========================================================= */

/* =========================================================
   1) כפתור חזור - בלי אימוג'י, עם חץ רגיל
   ========================================================= */

/* כפתור חזור קטן בהדר / בפרטי משלוח */
.cart-drawer-head .back-btn,
.checkout-header .back-btn,
.checkout-modal-header .back-btn,
.checkout-modal .back-btn:first-child {
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px !important;
  font-size: 0 !important; /* מסתיר טקסט/אימוג'י ישן */
  line-height: 0 !important;
}

/* יוצר חץ רגיל מקצועי */
.cart-drawer-head .back-btn::before,
.checkout-header .back-btn::before,
.checkout-modal-header .back-btn::before,
.checkout-modal .back-btn:first-child::before {
  content: "\2190" !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #7c2d12 !important;
}

/* אם יש כפתור חזרה רגיל עם טקסט - בונה אותו מחדש בלי אימוג'י */
.back-row .back-btn,
.back-btn.with-text {
  font-size: 0 !important;
  line-height: 0 !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

.back-row .back-btn::before,
.back-btn.with-text::before {
  content: "חזרה" !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #7c2d12 !important;
  margin-left: 8px !important;
}

.back-row .back-btn::after,
.back-btn.with-text::after {
  content: "\2190" !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #7c2d12 !important;
}

/* =========================================================
   2) רשימת קטגוריות - תיקון מובייל
   כי יש אצלך תיקון מובייל ישן שצובע אותן בלבן
   ========================================================= */

@media (max-width: 768px) {
  #categorySideMenuOverlay .category-side-menu,
  .category-side-menu-overlay .category-side-menu {
    background:
      linear-gradient(180deg, rgba(8, 10, 14, 0.96), rgba(20, 24, 30, 0.92)) !important;
  }

  #categorySideMenuList .category-side-menu-item,
  .category-side-menu-list .category-side-menu-item {
    color: #ffffff !important;
    background:
      linear-gradient(
        145deg,
        rgba(255, 147, 58, 0.96),
        rgba(249, 115, 22, 0.88),
        rgba(154, 52, 18, 0.76)
      ) !important;
    border: 1px solid rgba(255, 210, 170, 0.56) !important;
    border-radius: 18px !important;
    box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
  }

  #categorySideMenuList .category-side-menu-item:hover,
  .category-side-menu-list .category-side-menu-item:hover {
    background:
      linear-gradient(
        145deg,
        rgba(255, 166, 87, 0.98),
        rgba(249, 115, 22, 0.92),
        rgba(154, 52, 18, 0.82)
      ) !important;
  }

  .category-side-menu-name,
  .category-side-menu-arrow {
    color: #ffffff !important;
  }

  .category-side-menu-thumb {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
  }

  .category-side-menu-thumb img {
    background: transparent !important;
  }

  .category-side-menu-thumb-fallback {
    color: #ffffff !important;
  }
}

/* =========================================================
   3) הצהרת נגישות - טקסט כהה וקריא
   כי כלל קודם אצלך צובע את כל p בלבן
   ========================================================= */

.accessibility-statement-panel {
  background: rgba(255, 255, 255, 0.97) !important;
  color: #111827 !important;
  border: 1px solid rgba(255, 255, 255, 0.88) !important;
}

.accessibility-statement-panel *,
.accessibility-statement-panel h1,
.accessibility-statement-panel h2,
.accessibility-statement-panel h3,
.accessibility-statement-panel h4,
.accessibility-statement-panel h5,
.accessibility-statement-panel h6,
.accessibility-statement-panel p,
.accessibility-statement-panel li,
.accessibility-statement-panel span,
.accessibility-statement-panel strong,
.accessibility-statement-panel b,
.accessibility-statement-panel a {
  color: #111827 !important;
}

.accessibility-statement-panel p,
.accessibility-statement-panel li,
.accessibility-statement-panel span {
  color: #374151 !important;
  line-height: 1.75 !important;
}

.accessibility-statement-panel a {
  color: #c2410c !important;
  text-decoration: underline !important;
}

.accessibility-statement-panel h3 {
  color: #111827 !important;
  font-weight: 900 !important;
}

/* אם יש אזור טקסט פנימי בתוך ההצהרה */
/* =========================================================
   סרגל תחתון פרימיום - אי שחור זכוכית + חיפוש צף
   ========================================================= */

.bottom-app-nav {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 85;

  width: min(500px, calc(100% - 26px));
  height: 76px;
  padding: 8px 14px;

  display: grid;
  grid-template-columns: 1fr 96px 1fr;
  align-items: center;

  direction: ltr;
  transform: translateX(-50%);

  border-radius: 999px;
  overflow: visible;

  background:
    linear-gradient(180deg, rgba(40, 40, 40, 0.82), rgba(10, 10, 10, 0.94)),
    rgba(12, 12, 12, 0.78);

  border: 1px solid rgba(255, 255, 255, 0.14);

  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38);

  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
}

/* ברק זכוכית עדין על הסרגל */
.bottom-app-nav::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.025) 42%,
      rgba(255, 255, 255, 0) 100%
    );
  opacity: 0.75;
}

/* צל טבעי מתחת לסרגל */
.bottom-app-nav::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -8px;
  height: 14px;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.34);
  filter: blur(14px);
}

/* כפתור בסיס */
.bottom-app-nav-btn {
  position: relative;
  z-index: 2;

  min-width: 0;
  height: 58px;
  padding: 6px 8px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;

  direction: rtl;

  color: rgba(255, 255, 255, 0.84);
  background: transparent;
  border: 0;
  border-radius: 999px;

  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform 0.18s ease,
    color 0.18s ease,
    background 0.18s ease;
}

.bottom-app-nav-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.bottom-app-nav-btn:active {
  transform: scale(0.96);
}

.bottom-app-nav-btn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

/* שמאל - עגלה */

/* ימין - קטגוריות */

/* מרכז - חיפוש צף */
.bottom-app-nav-search {
  grid-column: 2;
  justify-self: center;

  width: 82px;
  height: 82px;
  min-height: 82px;
  padding: 9px 8px 8px;
  margin-top: -34px;

  color: #ffffff;
  border-radius: 50%;

  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.28), transparent 34%),
    linear-gradient(145deg, rgba(251, 146, 60, 0.95), rgba(234, 88, 12, 0.92) 55%, rgba(154, 52, 18, 0.96));

  border: 1px solid rgba(255, 255, 255, 0.22);

  box-shadow:
    0 13px 28px rgba(0, 0, 0, 0.34),
    0 0 0 7px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20);

  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.bottom-app-nav-search:hover {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.32), transparent 34%),
    linear-gradient(145deg, rgba(253, 186, 116, 0.96), rgba(249, 115, 22, 0.94) 55%, rgba(194, 65, 12, 0.96));
}

/* מבטל הילה ישנה אם קיימת */

/* אייקונים */
.bottom-app-nav-icon-wrap {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}

.bottom-app-nav-icon {
  width: 25px;
  height: 25px;
  display: block;

  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;

  filter: none;
}

.bottom-app-nav-search .bottom-app-nav-icon-wrap {
  width: 32px;
  height: 32px;
}

.bottom-app-nav-search .bottom-app-nav-icon {
  width: 29px;
  height: 29px;
  stroke-width: 2.35;
}

/* טקסט */
.bottom-app-nav-label {
  font-size: 11.5px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: currentColor;
  text-shadow: none;
}

.bottom-app-nav-search .bottom-app-nav-label {
  font-size: 11px;
  margin-top: 1px;
}

/* תג עגלה */
.bottom-app-nav-badge {
  position: absolute;
  top: -7px;
  left: -8px;

  min-width: 20px;
  height: 20px;
  padding: 0 6px;

  display: grid;
  place-items: center;

  border-radius: 999px;

  background: linear-gradient(135deg, #fb923c, #ea580c);
  color: #ffffff;

  font-size: 11px;
  font-weight: 900;

  border: 1.5px solid rgba(255, 255, 255, 0.94);

  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* פס העגלה הישן מוסתר */
.floating-cart-bar {
  display: none !important;
}

/* שלא יסתיר מוצרים */
.app-shell {
  padding-bottom: 154px;
}

@media (max-width: 520px) {
  .bottom-app-nav {
    width: calc(100% - 22px);
    height: 72px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 7px 12px;
    grid-template-columns: 1fr 90px 1fr;
  }

  .bottom-app-nav-btn {
    height: 55px;
  }

  .bottom-app-nav-search {
    width: 76px;
    height: 76px;
    min-height: 76px;
    margin-top: -31px;
  }

  .bottom-app-nav-icon-wrap {
    width: 28px;
    height: 28px;
  }

  .bottom-app-nav-icon {
    width: 24px;
    height: 24px;
  }

  .bottom-app-nav-search .bottom-app-nav-icon {
    width: 27px;
    height: 27px;
  }

  .bottom-app-nav-label {
    font-size: 11px;
  }

  .bottom-app-nav-search .bottom-app-nav-label {
    font-size: 10.5px;
  }

  .app-shell {
    padding-bottom: 146px;
  }
}
/* =========================================================
   חיפוש נפתח נגיש - עילאי מרקט
   ========================================================= */

.search-section {
  transition:
    max-height 0.24s ease,
    opacity 0.2s ease,
    transform 0.22s ease,
    padding 0.22s ease,
    margin 0.22s ease;
}

/* מצב סגור - לא display:none כדי שה-JS יוכל לפתוח בצורה תקינה */
.search-section.search-section-collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* כשהחיפוש סגור, לא מאפשרים פוקוס בטעות לתוך האלמנטים */
.search-section.search-section-collapsed .search-input-wrapper,
.search-section.search-section-collapsed #searchInput,
.search-section.search-section-collapsed #clearSearch,
.search-section.search-section-collapsed #searchResults {
  visibility: hidden !important;
}

/* מצב פתוח */
.search-section.search-section-open {
  max-height: 520px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  margin-bottom: 5px !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

.search-section.search-section-open .search-input-wrapper,
.search-section.search-section-open #searchInput,
.search-section.search-section-open #clearSearch,
.search-section.search-section-open #searchResults {
  visibility: visible !important;
}

/* עיצוב יותר ברור ונגיש כשהחיפוש נפתח */
.search-section.search-section-open .search-input-wrapper {
  background:
    linear-gradient(145deg, rgba(10, 10, 12, 0.84), rgba(28, 24, 21, 0.74)) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

/* פוקוס ברור למקלדת */
.search-section.search-section-open .search-input-wrapper:focus-within {
  border-color: rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.30),
    0 0 0 3px rgba(249, 115, 22, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* תוצאות חיפוש נשארות מעל התוכן */
.search-section.search-section-open .search-results {
  z-index: 1300 !important;
}
/* =========================================================
   עיצוב סרגל תחתון מודרני - צבעים סולידיים ואייקונים מקצועיים
   ========================================================= */

.bottom-app-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;

  width: 100% !important;
  height: calc(68px + env(safe-area-inset-bottom)) !important;
  padding: 0 10px env(safe-area-inset-bottom) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  direction: rtl !important;

  /* רקע כהה סולידי ומקצועי, ללא שקיפות (בלי זכוכית) */
  background: #0a0a0c !important;
  border-top: 1px solid #1f1f23 !important;
  border-radius: 0 !important;
  
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
  
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* מבטל הגדרות רקע/פסים קודמות שהיו בסרגל */
.bottom-app-nav::before,
.bottom-app-nav::after {
  display: none !important;
}

/* כפתורים רגילים בסרגל */
.bottom-app-nav-btn {
  flex: 1 !important;
  height: 100% !important;
  padding: 8px 0 6px !important;
  margin: 0 !important;
  
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  
  /* צבע אפור מקצועי לאייקונים לא פעילים */
  color: #71717a !important; 
  
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: all 0.2s ease !important;
}

/* כפתור אמצעי - חיפוש (כתום ובולט) */
.bottom-app-nav-btn.bottom-app-nav-search {
  flex: 0 0 auto !important;
  width: 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  margin-top: -28px !important; /* מקפיץ אותו מעט למעלה */
  padding: 0 !important;
  
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #ffffff !important;
  border-radius: 20px !important; /* צורה מרובעת עדינה */
  
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3) !important;
  border: 3px solid #0a0a0c !important; /* מסגרת כהה כדי להתנתק מהסרגל */
  
  justify-content: center !important;
  gap: 2px !important;
}

/* ריחוף ומצב פעיל */
.bottom-app-nav-btn:hover,
.bottom-app-nav-btn.active {
  color: #f97316 !important; /* הכתום של המותג */
  background: transparent !important;
}

/* במצב פעיל של כפתור החיפוש - נשאר לבן */
.bottom-app-nav-btn.bottom-app-nav-search:hover {
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.4) !important;
}

.bottom-app-nav-btn:active {
  transform: scale(0.94) !important;
}

.bottom-app-nav-btn.bottom-app-nav-search:active {
  transform: translateY(0) scale(0.95) !important;
}

/* עטיפת האייקון */
.bottom-app-nav-icon-wrap {
  position: relative !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
}

/* אייקונים קווים נקיים */
.bottom-app-nav-icon {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important; /* עובי מדויק ומקצועי */
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.bottom-app-nav-search .bottom-app-nav-icon {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2.2 !important;
}

/* טקסט מתחת לאייקונים */
.bottom-app-nav-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.bottom-app-nav-search .bottom-app-nav-label {
  font-size: 10px !important;
}

/* תגית עגלה (המספר באדום) */
.bottom-app-nav-badge {
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;
  
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  background: #dc2626 !important; /* אדום התראה בולט */
  color: #ffffff !important;
  
  font-size: 10px !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  
  border: 2px solid #0a0a0c !important; /* מסגרת כהה כדי להשתלב */
  box-shadow: none !important;
}

/* התאמות למסכים קטנים */
@media (max-width: 520px) {
  .bottom-app-nav {
    height: calc(64px + env(safe-area-inset-bottom)) !important;
    padding: 0 8px env(safe-area-inset-bottom) !important;
  }
  
  .bottom-app-nav-btn.bottom-app-nav-search {
    width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    margin-top: -24px !important;
    border-radius: 18px !important;
  }
  
  .bottom-app-nav-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .bottom-app-nav-search .bottom-app-nav-icon {
    width: 22px !important;
    height: 22px !important;
  }
}
/* מצב ניגודיות גבוהה - חשוב לנגישות */
body.accessibility-high-contrast .search-section.search-section-open .search-input-wrapper {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
}

body.accessibility-high-contrast .search-section.search-section-open #searchInput {
  color: #ffffff !important;
}

body.accessibility-high-contrast .search-section.search-section-open #searchInput::placeholder {
  color: #ffffff !important;
}

body.accessibility-high-contrast .search-section.search-section-open .clear-btn {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

/* למי שבחר הפחתת תנועה */
@media (prefers-reduced-motion: reduce) {
  .search-section {
    transition: none !important;
  }
}
/* =========================================================
   חיפוש תחתון נפתח - פאנל פרימיום נגיש
   ========================================================= */

.bottom-search-panel {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(104px + env(safe-area-inset-bottom));
  z-index: 90;

  width: min(560px, calc(100% - 24px));
  max-height: min(72vh, 620px);

  transform: translateX(-50%);
  direction: rtl;

  opacity: 1;
  pointer-events: auto;

  transition:
    opacity 0.22s ease,
    transform 0.24s ease;
}

.bottom-search-panel.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(22px);
}

.bottom-search-card {
  position: relative;
  overflow: hidden;

  border-radius: 28px;

  background:
    linear-gradient(180deg, rgba(42, 42, 42, 0.88), rgba(12, 12, 12, 0.94)),
    rgba(12, 12, 12, 0.82);

  border: 1px solid rgba(255, 255, 255, 0.15);

  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);

  backdrop-filter: blur(24px) saturate(1.14);
  -webkit-backdrop-filter: blur(24px) saturate(1.14);
}

.bottom-search-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.18), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 42%);
}

.bottom-search-handle {
  position: relative;
  z-index: 1;

  width: 46px;
  height: 5px;
  margin: 10px auto 4px;

  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
}

.bottom-search-head {
  position: relative;
  z-index: 1;

  padding: 10px 18px 12px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.bottom-search-head h2 {
  margin: 0;

  color: #ffffff;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 900;
}

.bottom-search-head p {
  margin: 5px 0 0;

  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}

.bottom-search-close {
  width: 42px;
  height: 42px;

  flex: 0 0 auto;

  border-radius: 15px;

  display: grid;
  place-items: center;

  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);

  font-size: 26px;
  line-height: 1;
  font-weight: 700;

  transition:
    background 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease;
}

.bottom-search-close:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.24);
}

.bottom-search-close:active {
  transform: scale(0.96);
}

.bottom-search-close:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.95);
  outline-offset: 3px;
}

.bottom-search-input-wrap {
  position: relative;
  z-index: 1;

  margin: 0 18px 14px;
  min-height: 58px;
  padding: 0 14px;

  display: flex;
  align-items: center;
  gap: 10px;

  border-radius: 19px;

  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.08);

  border: 1.5px solid rgba(255, 255, 255, 0.20);

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.bottom-search-input-wrap:focus-within {
  border-color: rgba(255, 255, 255, 0.92);

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.28),
    0 0 0 3px rgba(249, 115, 22, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.bottom-search-input-icon {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  color: rgba(255, 255, 255, 0.88);
  flex: 0 0 auto;
}

.bottom-search-input-icon svg {
  width: 25px;
  height: 25px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bottom-search-input {
  width: 100%;
  min-width: 0;

  border: 0;
  outline: 0;

  color: #ffffff;
  background: transparent;

  font-size: 17px;
  line-height: 1.2;
  font-weight: 850;
}

.bottom-search-input::placeholder {
  color: rgba(255, 255, 255, 0.64);
}

.bottom-search-clear {
  width: 34px;
  height: 34px;

  flex: 0 0 auto;

  border-radius: 13px;

  display: grid;
  place-items: center;

  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);

  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}

.bottom-search-clear:hover {
  background: rgba(255, 255, 255, 0.15);
}

.bottom-search-clear:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.95);
  outline-offset: 3px;
}

.bottom-search-results {
  position: relative;
  z-index: 1;

  max-height: min(48vh, 390px);
  overflow-y: auto;

  padding: 0 14px 16px;

  scrollbar-width: thin;
}

.bottom-search-empty {
  padding: 22px 14px 24px;

  text-align: center;

  color: rgba(255, 255, 255, 0.70);
  font-size: 14px;
  font-weight: 750;
}

/* כרטיס מוצר בתוצאות החיפוש התחתון */
.bottom-search-result-item {
  display: grid;
  grid-template-columns: 66px 1fr auto;
  gap: 12px;
  align-items: center;

  padding: 10px;
  margin-bottom: 10px;

  border-radius: 20px;

  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 250, 0.90));

  border: 1px solid rgba(226, 232, 240, 0.95);

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.bottom-search-result-image {
  width: 66px;
  height: 66px;

  border-radius: 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
}

.bottom-search-result-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
}

.bottom-search-result-info {
  min-width: 0;
}

.bottom-search-result-name {
  margin: 0;

  color: #111827;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 900;
}

.bottom-search-result-meta {
  margin-top: 5px;

  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.bottom-search-result-price {
  color: #111827;
  font-size: 14px;
  font-weight: 900;
}

.bottom-search-result-stock {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.bottom-search-result-add {
  min-height: 42px;
  padding: 0 13px;

  border-radius: 15px;

  color: #ffffff;
  background:
    linear-gradient(145deg, #fb923c, #ea580c 62%, #c2410c);

  border: 1px solid rgba(255, 255, 255, 0.65);

  box-shadow:
    0 9px 18px rgba(249, 115, 22, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);

  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;

  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease;
}

.bottom-search-result-add:hover {
  filter: brightness(1.04);
  box-shadow:
    0 11px 22px rgba(249, 115, 22, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.bottom-search-result-add:active {
  transform: scale(0.96);
}

.bottom-search-result-add:focus-visible {
  outline: 3px solid #111827;
  outline-offset: 3px;
}

/* מוצר לא במלאי */
.bottom-search-result-item.is-out-of-stock {
  opacity: 0.68;
}

.bottom-search-result-item.is-out-of-stock .bottom-search-result-add {
  background: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
}

/* הדגשת טקסט חיפוש */
.bottom-search-result-item .highlight {
  background: #ffedd5;
  color: #c2410c;
  padding: 0 2px;
  border-radius: 3px;
}

/* נגישות - ניגודיות גבוהה */
body.accessibility-high-contrast .bottom-search-card {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
}

body.accessibility-high-contrast .bottom-search-head h2,
body.accessibility-high-contrast .bottom-search-head p,
body.accessibility-high-contrast .bottom-search-input,
body.accessibility-high-contrast .bottom-search-input::placeholder,
body.accessibility-high-contrast .bottom-search-empty {
  color: #ffffff !important;
}

body.accessibility-high-contrast .bottom-search-input-wrap,
body.accessibility-high-contrast .bottom-search-close,
body.accessibility-high-contrast .bottom-search-clear {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.accessibility-high-contrast .bottom-search-result-item {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
}

body.accessibility-high-contrast .bottom-search-result-add {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
}

/* מובייל */
@media (max-width: 520px) {
  .bottom-search-panel {
    width: calc(100% - 18px);
    bottom: calc(92px + env(safe-area-inset-bottom));
    max-height: 70vh;
  }

  .bottom-search-card {
    border-radius: 24px;
  }

  .bottom-search-head {
    padding: 9px 15px 11px;
  }

  .bottom-search-head h2 {
    font-size: 18px;
  }

  .bottom-search-head p {
    font-size: 12.5px;
  }

  .bottom-search-input-wrap {
    min-height: 56px;
    margin: 0 14px 12px;
    border-radius: 18px;
  }

  .bottom-search-results {
    max-height: 46vh;
    padding: 0 10px 14px;
  }

  .bottom-search-result-item {
    grid-template-columns: 58px 1fr;
    gap: 10px;
  }

  .bottom-search-result-image {
    width: 58px;
    height: 58px;
  }

  .bottom-search-result-add {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 42px;
  }
}

/* הפחתת תנועה */
@media (prefers-reduced-motion: reduce) {
  .bottom-search-panel,
  .bottom-search-close,
  .bottom-search-result-add,
  .bottom-search-clear {
    transition: none !important;
  }
}
/* =========================================================
   עידון שורת החיפוש בפאנל התחתון
   פחות מגושם, יותר פרימיום
   ========================================================= */

.bottom-search-input-wrap {
  min-height: 50px !important;
  margin: 0 18px 12px !important;
  padding: 0 12px !important;
  gap: 9px !important;

  border-radius: 17px !important;

  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045)),
    rgba(10, 10, 12, 0.48) !important;

  border: 1.5px solid rgba(249, 115, 22, 0.42) !important;

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.bottom-search-input-wrap:focus-within {
  border-color: rgba(249, 115, 22, 0.78) !important;

  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.26),
    0 0 0 3px rgba(249, 115, 22, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.bottom-search-input {
  height: 46px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

.bottom-search-input::placeholder {
  color: rgba(255, 255, 255, 0.58) !important;
}

.bottom-search-input-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 12px !important;

  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.bottom-search-input-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2.15 !important;
}

.bottom-search-clear {
  width: 30px !important;
  height: 30px !important;
  border-radius: 11px !important;

  font-size: 20px !important;

  color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.bottom-search-clear:hover {
  background: rgba(255, 255, 255, 0.13) !important;
}

/* טיפה מקטין את הראש של הפאנל כדי שהכול ירגיש פחות כבד */
.bottom-search-head {
  padding-bottom: 9px !important;
}

.bottom-search-head h2 {
  font-size: 18px !important;
}

.bottom-search-head p {
  font-size: 12.5px !important;
}

/* במובייל שיהיה עוד יותר קומפקטי */
@media (max-width: 520px) {
  .bottom-search-input-wrap {
    min-height: 48px !important;
    margin: 0 14px 11px !important;
    border-radius: 16px !important;
  }

  .bottom-search-input {
    height: 44px !important;
    font-size: 15.5px !important;
  }

  .bottom-search-input-icon {
    width: 30px !important;
    height: 30px !important;
  }

  .bottom-search-input-icon svg {
    width: 19px !important;
    height: 19px !important;
  }
}
/* =========================================================
   תיקון צבע טקסט בשורת החיפוש התחתון
   ========================================================= */

.bottom-search-input {
  color: #111827 !important;
}

.bottom-search-input::placeholder {
  color: rgba(17, 24, 39, 0.62) !important;
}

.bottom-search-input-wrap {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 250, 0.94)) !important;
}

.bottom-search-input-icon {
  color: #111827 !important;
  background: rgba(17, 24, 39, 0.06) !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
}

.bottom-search-clear {
  color: #111827 !important;
  background: rgba(17, 24, 39, 0.06) !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
}
/* =========================================================
   שורת חיפוש תחתונה - לבן מלא, קפסולה נקייה מקצה לקצה
   ========================================================= */

.bottom-search-input-wrap {
  min-height: 50px !important;
  height: 50px !important;
  margin: 0 18px 12px !important;
  padding: 0 14px !important;
  gap: 10px !important;

  background: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  outline: none !important;

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.18) !important;

  overflow: hidden !important;
}

/* מצב פוקוס - נשאר לבן, רק מסגרת שחורה עדינה לנגישות */
.bottom-search-input-wrap:focus-within {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  outline: 3px solid rgba(17, 24, 39, 0.28) !important;
  outline-offset: 2px !important;

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.22) !important;
}

/* השדה עצמו חלק מהקפסולה, בלי צבע/מסגרת משלו */
.bottom-search-input {
  height: 50px !important;
  color: #111827 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-size: 16px !important;
  font-weight: 800 !important;
}

.bottom-search-input::placeholder {
  color: rgba(17, 24, 39, 0.58) !important;
}

/* האייקון בתוך השורה, בלי ריבוע/פס נפרד */
.bottom-search-input-icon {
  width: 28px !important;
  height: 28px !important;

  color: #111827 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  flex: 0 0 auto !important;
}

.bottom-search-input-icon svg {
  width: 21px !important;
  height: 21px !important;
  stroke-width: 2.2 !important;
}

/* כפתור ניקוי גם שקוף, בלי קופסה נפרדת */
.bottom-search-clear {
  width: 28px !important;
  height: 28px !important;

  color: #111827 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;

  font-size: 22px !important;
  line-height: 1 !important;
}

.bottom-search-clear:hover {
  background: rgba(17, 24, 39, 0.08) !important;
}

/* מבטל כל גבול/פס פנימי שנשאר מהקודים הקודמים */
.bottom-search-input-wrap *,
.bottom-search-input-wrap *:focus,
.bottom-search-input-wrap *:focus-visible {
  box-shadow: none !important;
}

/* נגישות: פוקוס לכפתור ניקוי אם מגיעים אליו עם Tab */
.bottom-search-clear:focus-visible {
  outline: 2px solid #111827 !important;
  outline-offset: 2px !important;
  background: rgba(17, 24, 39, 0.08) !important;
}

@media (max-width: 520px) {
  .bottom-search-input-wrap {
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 14px 11px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
  }

  .bottom-search-input {
    height: 48px !important;
    font-size: 15.5px !important;
  }
}
/* =========================================================
   ניקוי חלק עליון - הסתרת כפתורים ישנים
   הכפתורים נשארים ב-HTML בשביל תאימות, אבל לא מוצגים
   ========================================================= */

.topbar .cart-fab,
.topbar .account-top-button,
.topbar .category-menu-button {
  display: none !important;
}

/* מוודא שהלוגו/באנר נשאר ממורכז אחרי הסתרת הכפתורים */
.topbar-inner {
  justify-content: center !important;
}

.logo-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* =========================================================
   שורת התחברות בראש תפריט הקטגוריות
   ========================================================= */

.category-side-menu-account-item {
  margin-bottom: 10px !important;

  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 250, 0.94)) !important;

  border: 2px solid rgba(249, 115, 22, 0.42) !important;

  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.category-side-menu-account-item .category-side-menu-name {
  color: #111827 !important;
  font-weight: 1000 !important;
}

.category-side-menu-account-thumb {
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(145deg, #fb923c, #ea580c) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
}

.category-side-menu-account-thumb svg {
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.category-side-menu-account-item:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.95) !important;
  outline-offset: 3px !important;
}

/* אם אצלך יש CSS שמסתיר את התמונות בתפריט, מחזירים רק לאייקון של ההתחברות */
.category-side-menu-account-item .category-side-menu-thumb {
  display: grid !important;
}
/* =========================================================
   באנר עליון / פס לוגו רחב מהניהול
   ========================================================= */

body.has-header-banner .topbar {
  padding: 0 !important;
  min-height: var(--site-header-banner-height, 80px) !important;
  background:
    linear-gradient(180deg, rgba(20, 18, 17, 0.92), rgba(10, 10, 10, 0.94)) !important;
  overflow: hidden !important;
}

body.has-header-banner .topbar-inner {
  width: 100% !important;
  max-width: none !important;
  min-height: var(--site-header-banner-height, 80px) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.has-header-banner .logo-wrap {
  width: var(--site-header-banner-width, 100%) !important;
  height: var(--site-header-banner-height, 80px) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: block !important;
  background: #050505 !important;
}

body.has-header-banner .logo-wrap img,
body.has-header-banner #logoImg {
  width: 100% !important;
  height: var(--site-header-banner-height, 80px) !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center var(--site-header-banner-position-y, 50%) !important;
  transform: scale(var(--site-header-banner-scale, 1)) !important;
  transform-origin: center var(--site-header-banner-position-y, 50%) !important;
}

/* אם אין באנר עליון, הלוגו הישן ממשיך כרגיל */
body:not(.has-header-banner) .logo-wrap img,
body:not(.has-header-banner) #logoImg {
  object-fit: contain;
}

/* נגישות: אם המשתמש ביקש לעצור אנימציות, לא עושים מעברים */
body.accessibility-stop-animations.has-header-banner #logoImg {
  transition: none !important;
}

@media (max-width: 520px) {
  body.has-header-banner .topbar,
  body.has-header-banner .topbar-inner,
  body.has-header-banner .logo-wrap,
  body.has-header-banner #logoImg {
    min-height: var(--site-header-banner-height, 80px) !important;
    height: var(--site-header-banner-height, 80px) !important;
  }
}
/* =========================================================
   באנר עליון פשוט וקבוע - מתעלם מסליידרים מהניהול
   ========================================================= */

body.has-header-banner .topbar {
  padding: 0 !important;
  height: 86px !important;
  min-height: 86px !important;
  max-height: 86px !important;
  background: #050505 !important;
  overflow: hidden !important;
}

body.has-header-banner .topbar-inner {
  width: 100% !important;
  max-width: none !important;
  height: 86px !important;
  min-height: 86px !important;
  max-height: 86px !important;
  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.has-header-banner .logo-wrap {
  width: 100% !important;
  height: 86px !important;
  min-height: 86px !important;
  max-height: 86px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: #050505 !important;
}

body.has-header-banner #logoImg,
body.has-header-banner .logo-wrap img {
  width: 100% !important;
  height: 86px !important;
  min-height: 86px !important;
  max-height: 86px !important;

  display: block !important;

  object-fit: cover !important;
  object-position: center center !important;

  transform: none !important;
  scale: none !important;
}

/* מובייל - פס יותר נמוך כדי לא לאכול את המסך */
@media (max-width: 520px) {
  body.has-header-banner .topbar,
  body.has-header-banner .topbar-inner,
  body.has-header-banner .logo-wrap,
  body.has-header-banner #logoImg,
  body.has-header-banner .logo-wrap img {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
  }
}
/* =========================================================
   באנר עליון ממורכז במחשב + מלא במובייל
   מתאים לתמונה רחבה של עילאי מרקט
   ========================================================= */

body.has-header-banner .topbar {
  padding: 10px 0 !important;
  height: 128px !important;
  min-height: 128px !important;
  max-height: 128px !important;
  background: #000000 !important;
  overflow: hidden !important;
}

body.has-header-banner .topbar-inner {
  width: 100% !important;
  max-width: none !important;
  height: 108px !important;
  min-height: 108px !important;
  max-height: 108px !important;
  padding: 0 !important;
  margin: 0 auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* במחשב: הבאנר ממורכז, לא מקצה לקצה */
body.has-header-banner .logo-wrap {
  width: min(980px, calc(100% - 48px)) !important;
  height: 108px !important;
  min-height: 108px !important;
  max-height: 108px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  display: block !important;
  overflow: hidden !important;

  border-radius: 0 !important;
  background: #000000 !important;
}

body.has-header-banner #logoImg,
body.has-header-banner .logo-wrap img {
  width: 100% !important;
  height: 108px !important;
  min-height: 108px !important;
  max-height: 108px !important;

  display: block !important;

  object-fit: cover !important;
  object-position: center center !important;

  transform: none !important;
  scale: none !important;
  background: #000000 !important;
}

/* מובייל: מכסה מצד לצד */
@media (max-width: 520px) {
  body.has-header-banner .topbar {
    padding: 0 !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
  }

  body.has-header-banner .topbar-inner {
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
  }

  body.has-header-banner .logo-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    margin: 0 !important;
  }

  body.has-header-banner #logoImg,
  body.has-header-banner .logo-wrap img {
    width: 100vw !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;

    object-fit: cover !important;
    object-position: center center !important;
  }
}
/* =========================================================
   תיקון סופי לבאנר עליון:
   מחשב = ממורכז
   מובייל = מלא מצד לצד
   ========================================================= */

/* מחשב / טאבלט רחב */
body.has-header-banner .topbar {
  padding: 10px 0 !important;
  height: 128px !important;
  min-height: 128px !important;
  max-height: 128px !important;
  background: #000000 !important;
  overflow: hidden !important;
}

body.has-header-banner .topbar-inner {
  width: 100% !important;
  max-width: none !important;
  height: 108px !important;
  min-height: 108px !important;
  max-height: 108px !important;
  padding: 0 !important;
  margin: 0 auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* במחשב: באמצע, לא על כל המסך */
body.has-header-banner .logo-wrap {
  width: min(980px, calc(100vw - 48px)) !important;
  max-width: min(980px, calc(100vw - 48px)) !important;
  height: 108px !important;
  min-height: 108px !important;
  max-height: 108px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  display: block !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: #000000 !important;
}

body.has-header-banner #logoImg,
body.has-header-banner .logo-wrap img {
  width: 100% !important;
  max-width: none !important;
  height: 108px !important;
  min-height: 108px !important;
  max-height: 108px !important;

  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;

  transform: none !important;
  scale: none !important;
  background: #000000 !important;
}

/* מובייל: הבאנר חייב להיות מלא מצד לצד */
@media (max-width: 520px) {
  body.has-header-banner .topbar {
    width: 100vw !important;
    padding: 0 !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    margin: 0 !important;
    background: #000000 !important;
    overflow: hidden !important;
  }

  body.has-header-banner .topbar-inner {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    padding: 0 !important;
    margin: 0 !important;

    display: block !important;
  }

  body.has-header-banner .logo-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: #000000 !important;
  }

  body.has-header-banner #logoImg,
  body.has-header-banner .logo-wrap img {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;

    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;

    transform: none !important;
    background: #000000 !important;
  }
}
/* =========================================================
   מיקום חדש לכפתור הנגישות
   צד ימין למטה, מעל הסרגל התחתון
   ========================================================= */

#accessibilityButton,
#accessibilityToggle,
.accessibility-btn {
  position: fixed !important;
  top: auto !important;
  right: 18px !important;
  bottom: 118px !important;
  left: auto !important;

  z-index: 120 !important;

  width: 54px !important;
  height: 54px !important;

  border-radius: 50% !important;
}

/* מובייל */
@media (max-width: 520px) {
  #accessibilityButton,
  #accessibilityToggle,
  .accessibility-btn {
    right: 14px !important;
    bottom: 112px !important;

    width: 50px !important;
    height: 50px !important;
  }
}
/* =========================================================
   פס מעקב הזמנה מעל הסרגל התחתון
   מחליף את עיגול המעקב הצף
   משתמש בצבעים האמיתיים של מערכת מעקב ההזמנה הקיימת
   ========================================================= */

.order-tracking-dock {
  --tracking-main: rgba(249, 115, 22, 1);
  --tracking-soft: rgba(251, 191, 36, 1);
  --tracking-shadow: rgba(249, 115, 22, 0.34);

  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(86px + env(safe-area-inset-bottom));

  min-height: 82px;
  padding: 14px 18px 15px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;

  color: #ffffff;

  background:
    radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.16), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    linear-gradient(145deg, rgba(8, 10, 14, 0.96), rgba(20, 24, 30, 0.94));

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 28px var(--tracking-shadow);

  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);

  overflow: hidden;
  cursor: pointer;
  z-index: 999998;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

/* שכבת זכוכית עדינה מעל הפס */
.order-tracking-dock::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0) 58%
    );
}

/* פס הצבע הזוהר העליון */
.order-tracking-dock::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;

  height: 8px;
  border-radius: 0 0 18px 18px;

  background:
    linear-gradient(
      90deg,
      var(--tracking-soft),
      var(--tracking-main),
      var(--tracking-soft)
    );

  box-shadow:
    0 0 18px var(--tracking-shadow),
    0 0 34px var(--tracking-shadow);

  pointer-events: none;
}

/* תחושת לחיצה */
.order-tracking-dock:hover {
  transform: translateY(-2px);
}

.order-tracking-dock:active {
  transform: scale(0.985);
}

/* נגישות - פוקוס מקלדת ברור */
.order-tracking-dock:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.96);
  outline-offset: 4px;
}

/* אזור הטקסט */

/* כותרת הסטטוס */
.order-tracking-dock-title {
  font-size: clamp(21px, 4.8vw, 34px);
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -0.03em;

  color: #ffffff;

  text-shadow:
    0 0 12px var(--tracking-shadow),
    0 2px 12px rgba(0, 0, 0, 0.34);
}

/* טקסט שמסביר שאפשר ללחוץ */
.order-tracking-dock-hint {
  font-size: 14px;
  line-height: 1.15;
  font-weight: 800;

  color: rgba(255, 255, 255, 0.92);

  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.34);
}

/* כפתור חץ בצד - מסביר שאפשר לפתוח */

/* כשהמעקב פתוח - החץ מתהפך */
.order-tracking-dock.is-open .order-tracking-dock-arrow svg {
  transform: rotate(180deg);
}

/* =========================================================
   צבעים אמיתיים לפי ה-CSS הקיים שלך
   ========================================================= */

/* ממתינה לאישור */
.order-tracking-dock.pending {
  --tracking-main: rgba(249, 115, 22, 1);
  --tracking-soft: rgba(251, 191, 36, 1);
  --tracking-shadow: rgba(249, 115, 22, 0.34);
}

/* הזמנה אושרה */
.order-tracking-dock.approved {
  --tracking-main: rgba(22, 163, 74, 1);
  --tracking-soft: rgba(134, 239, 172, 1);
  --tracking-shadow: rgba(22, 163, 74, 0.34);
}

/* בהכנה - לפי הקוד הקיים שלך: כחול */
.order-tracking-dock.preparing {
  --tracking-main: rgba(37, 99, 235, 1);
  --tracking-soft: rgba(125, 211, 252, 1);
  --tracking-shadow: rgba(37, 99, 235, 0.34);
}

/* בדרך ללקוח - לפי הקוד הקיים שלך: סגול / מג׳נטה */
.order-tracking-dock.on_the_way {
  --tracking-main: rgba(124, 58, 237, 1);
  --tracking-soft: rgba(217, 70, 239, 1);
  --tracking-shadow: rgba(124, 58, 237, 0.34);
}

/* נמסרה */
.order-tracking-dock.delivered {
  --tracking-main: rgba(21, 128, 61, 1);
  --tracking-soft: rgba(187, 247, 208, 1);
  --tracking-shadow: rgba(21, 128, 61, 0.34);
}

/* נדחתה / בוטלה */
.order-tracking-dock.rejected,
.order-tracking-dock.cancelled {
  --tracking-main: rgba(220, 38, 38, 1);
  --tracking-soft: rgba(252, 165, 165, 1);
  --tracking-shadow: rgba(220, 38, 38, 0.34);
}

/* מוסיף רווח לתחתית האתר כדי שהפס לא יסתיר מוצרים */
.app-shell.has-order-tracking-dock {
  padding-bottom: 238px;
}

/* =========================================================
   התאמה למובייל
   ========================================================= */

@media (max-width: 520px) {
  .order-tracking-dock {
    left: 10px;
    right: 10px;
    bottom: calc(82px + env(safe-area-inset-bottom));

    min-height: 76px;
    padding: 12px 15px 13px;

    border-radius: 24px;
  }

  .order-tracking-dock::after {
    left: 12px;
    right: 12px;
    height: 7px;
  }

  .order-tracking-dock-title {
    font-size: 18px;
  }

  .order-tracking-dock-hint {
    font-size: 13px;
  }

  .app-shell.has-order-tracking-dock {
    padding-bottom: 226px;
  }
}
/* =========================================================
   תיקון עיצוב פס מעקב הזמנה - גרסה קומפקטית ונקייה
   ========================================================= */

.order-tracking-dock {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  width: min(calc(100% - 32px), 828px) !important;
  min-height: 64px !important;
  bottom: calc(88px + env(safe-area-inset-bottom)) !important;

  padding: 10px 16px !important;
  border-radius: 22px !important;

  align-items: center !important;

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 20px var(--tracking-shadow) !important;
}

.order-tracking-dock:hover {
  transform: translateX(-50%) translateY(-2px) !important;
}

.order-tracking-dock:active {
  transform: translateX(-50%) scale(0.985) !important;
}

.order-tracking-dock::after {
  left: 14px !important;
  right: 14px !important;
  height: 5px !important;
  border-radius: 0 0 14px 14px !important;
}

.order-tracking-dock-title {
  font-size: clamp(18px, 2.4vw, 25px) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
}

.order-tracking-dock-hint {
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

/* במחשב גדול - לא לתת לו להיראות כמו באנר ענק */
@media (min-width: 861px) {
  .order-tracking-dock {
    width: 760px !important;
    min-height: 58px !important;
    bottom: 88px !important;
    border-radius: 20px !important;
  }

  .order-tracking-dock-title {
    font-size: 22px !important;
  }

  .order-tracking-dock-hint {
    font-size: 11.5px !important;
  }
}

/* מובייל - שיהיה ברור אבל לא ימחץ את הסרגל */
@media (max-width: 520px) {
  .order-tracking-dock {
    width: calc(100% - 22px) !important;
    min-height: 66px !important;
    bottom: calc(86px + env(safe-area-inset-bottom)) !important;

    padding: 10px 13px !important;
    border-radius: 21px !important;
  }

  .order-tracking-dock::after {
    height: 5px !important;
    left: 12px !important;
    right: 12px !important;
  }

  .order-tracking-dock-title {
    font-size: 17px !important;
  }

  .order-tracking-dock-hint {
    font-size: 12px !important;
  }
}

/* שלא ייווצר רווח תחתון מוגזם באתר */
.app-shell.has-order-tracking-dock {
  padding-bottom: 190px !important;
}

@media (max-width: 520px) {
  .app-shell.has-order-tracking-dock {
    padding-bottom: 184px !important;
  }
}
/* =========================================================
   תיקון סופי - פס מעקב כמו חלק מהסרגל התחתון
   ========================================================= */

.order-tracking-dock {
  left: 50% !important;
  right: auto !important;
  bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;

  width: min(calc(100% - 22px), 828px) !important;
  min-height: 48px !important;
  height: 48px !important;

  padding: 6px 14px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  border-radius: 999px !important;

  color: #ffffff !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.10), transparent 44%),
    linear-gradient(180deg, rgba(48, 48, 48, 0.96), rgba(13, 13, 13, 0.98)) !important;

  border: 1px solid rgba(255, 255, 255, 0.12) !important;

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 0 16px var(--tracking-shadow) !important;

  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;

  overflow: hidden !important;
  z-index: 999998 !important;
}

/* מבטל את המראה של כרטיס ענק */
.order-tracking-dock::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.02) 45%,
      rgba(0, 0, 0, 0.18)
    ) !important;
}

/* פס צבע דק למעלה - לפי סטטוס ההזמנה */
.order-tracking-dock::after {
  content: "" !important;
  position: absolute !important;

  left: 14px !important;
  right: 14px !important;
  top: 0 !important;

  height: 4px !important;
  border-radius: 999px !important;

  background:
    linear-gradient(
      90deg,
      var(--tracking-soft),
      var(--tracking-main),
      var(--tracking-soft)
    ) !important;

  box-shadow:
    0 0 10px var(--tracking-shadow),
    0 0 18px var(--tracking-shadow) !important;

  pointer-events: none !important;
}

/* לא להזיז את הפס בצורה מוגזמת */
.order-tracking-dock:hover {
  transform: translateX(-50%) translateY(-1px) !important;
}

.order-tracking-dock:active {
  transform: translateX(-50%) scale(0.99) !important;
}

/* אזור הטקסט במרכז */

/* כותרת הסטטוס */
.order-tracking-dock-title {
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;

  color: #ffffff !important;

  text-shadow:
    0 0 10px var(--tracking-shadow),
    0 2px 8px rgba(0, 0, 0, 0.45) !important;
}

/* טקסט קטן שמסביר שאפשר לפתוח */
.order-tracking-dock-hint {
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 800 !important;

  color: rgba(255, 255, 255, 0.82) !important;

  text-shadow:
    0 2px 7px rgba(0, 0, 0, 0.45) !important;
}

/* החץ - קטן ועדין, לא עיגול ענק */

/* כשהכרטיס פתוח החץ מתהפך */
.order-tracking-dock.is-open .order-tracking-dock-arrow svg {
  transform: rotate(180deg) !important;
}

/* צבעים אמיתיים לפי מערכת המעקב הקיימת */
.order-tracking-dock.pending {
  --tracking-main: rgba(249, 115, 22, 1);
  --tracking-soft: rgba(251, 191, 36, 1);
  --tracking-shadow: rgba(249, 115, 22, 0.34);
}

.order-tracking-dock.approved {
  --tracking-main: rgba(22, 163, 74, 1);
  --tracking-soft: rgba(134, 239, 172, 1);
  --tracking-shadow: rgba(22, 163, 74, 0.34);
}

.order-tracking-dock.preparing {
  --tracking-main: rgba(37, 99, 235, 1);
  --tracking-soft: rgba(125, 211, 252, 1);
  --tracking-shadow: rgba(37, 99, 235, 0.34);
}

.order-tracking-dock.on_the_way {
  --tracking-main: rgba(124, 58, 237, 1);
  --tracking-soft: rgba(217, 70, 239, 1);
  --tracking-shadow: rgba(124, 58, 237, 0.34);
}

.order-tracking-dock.delivered {
  --tracking-main: rgba(21, 128, 61, 1);
  --tracking-soft: rgba(187, 247, 208, 1);
  --tracking-shadow: rgba(21, 128, 61, 0.34);
}

.order-tracking-dock.rejected,
.order-tracking-dock.cancelled {
  --tracking-main: rgba(220, 38, 38, 1);
  --tracking-soft: rgba(252, 165, 165, 1);
  --tracking-shadow: rgba(220, 38, 38, 0.34);
}

/* שלא יהיה רווח ענק בתחתית */
.app-shell.has-order-tracking-dock {
  padding-bottom: 170px !important;
}

/* מובייל */
@media (max-width: 520px) {
  .order-tracking-dock {
    width: calc(100% - 22px) !important;
    height: 46px !important;
    min-height: 46px !important;

    bottom: calc(84px + env(safe-area-inset-bottom)) !important;

    padding: 5px 12px !important;
    border-radius: 999px !important;
  }

  .order-tracking-dock::after {
    left: 13px !important;
    right: 13px !important;
    height: 4px !important;
  }

  .order-tracking-dock-title {
    font-size: 15px !important;
  }

  .order-tracking-dock-hint {
    font-size: 10px !important;
  }

  .app-shell.has-order-tracking-dock {
    padding-bottom: 166px !important;
  }
}
/* =========================================================
   תיקון מיקום כפתור נגישות במובייל
   מעלה אותו כדי שלא יישב על אישור התנאים בהזמנה
   ========================================================= */

@media (max-width: 520px) {
  .accessibility-button {
    top: 82px !important;
    right: 12px !important;
    bottom: auto !important;
    z-index: 1000000 !important;
  }
}

@media (max-width: 430px) {
  .accessibility-button {
    top: 82px !important;
    right: 12px !important;
  }
}
/* =========================================================
   תיקון מובייל:
   1. כפתור נגישות באמצע המסך
   2. מעקב הזמנה סביב עיגול החיפוש במקום פס רחב
   ========================================================= */

@media (max-width: 520px) {
  /* כפתור נגישות - באמצע המסך בצד ימין */
  .accessibility-button {
    top: 50% !important;
    right: 12px !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 1000000 !important;
  }

  /* מבטל את המראה של פס רחב */
  .order-tracking-dock {
    left: 50% !important;
    right: auto !important;
    bottom: calc(73px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;

    width: 154px !important;
    height: 104px !important;
    min-height: 104px !important;

    padding: 0 !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    border: none !important;
    border-radius: 999px !important;

    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    overflow: visible !important;
    z-index: 999997 !important;
  }

  .order-tracking-dock:hover {
    transform: translateX(-50%) !important;
  }

  .order-tracking-dock:active {
    transform: translateX(-50%) scale(0.98) !important;
  }

  /* מבטל שכבת זכוכית רחבה */
  .order-tracking-dock::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;

    width: 96px !important;
    height: 96px !important;

    border-radius: 999px !important;

    background:
      conic-gradient(
        from 0deg,
        var(--tracking-main),
        var(--tracking-soft),
        var(--tracking-main),
        rgba(255, 255, 255, 0.12),
        var(--tracking-main)
      ) !important;

    filter:
      drop-shadow(0 0 10px var(--tracking-shadow))
      drop-shadow(0 0 18px var(--tracking-shadow)) !important;

    opacity: 0.95 !important;

    animation: orderTrackingDockSpin 2.8s linear infinite !important;

    pointer-events: none !important;
  }

  /* יוצר חור באמצע כדי שזה יהיה מסביב לעיגול החיפוש */
  .order-tracking-dock::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 8px !important;
    transform: translateX(-50%) !important;

    width: 78px !important;
    height: 78px !important;

    border-radius: 999px !important;

    background: rgba(0, 0, 0, 0.72) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.10),
      0 0 10px rgba(0, 0, 0, 0.40) !important;

    pointer-events: none !important;
  }

  /* הטקסט הקטן מעל עיגול החיפוש */

  .order-tracking-dock-title {
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    color: #ffffff !important;

    text-shadow:
      0 0 8px var(--tracking-shadow),
      0 2px 8px rgba(0, 0, 0, 0.55) !important;
  }

  .order-tracking-dock-hint {
    margin-top: 3px !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    color: rgba(255, 255, 255, 0.82) !important;

    text-shadow:
      0 2px 7px rgba(0, 0, 0, 0.55) !important;
  }

  /* חץ קטן מעל החיפוש */

  .order-tracking-dock.is-open .order-tracking-dock-arrow svg {
    transform: rotate(180deg) !important;
  }

  /* שלא יהיה רווח ענק מתחת לאתר */
  .app-shell.has-order-tracking-dock {
    padding-bottom: 150px !important;
  }
}

/* אנימציה למסגרת המסתובבת סביב החיפוש */
@keyframes orderTrackingDockSpin {
  from {
    transform: translateX(-50%) rotate(0deg);
  }

  to {
    transform: translateX(-50%) rotate(360deg);
  }
}
/* =========================================================
   תיקון חירום - המעקב לא יוצג כשאין הזמנה
   וגם מבטל את העיגול השחור המכוער סביב החיפוש
   ========================================================= */

.order-tracking-dock.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* מבטל את ניסיון העיגול סביב החיפוש שיצא לא תקין */
@media (max-width: 520px) {
  .order-tracking-dock::before,
  .order-tracking-dock::after {
    display: none !important;
    content: none !important;
  }

  .order-tracking-dock {
    display: none !important;
  }

  .order-tracking-dock:not(.hidden) {
    display: none !important;
  }
}
/* =========================================================
   תיקון חירום: ביטול תזוזה שמאלה ונעילת הסרגל התחתון
   ========================================================= */
.bottom-app-nav {
  transform: none !important; /* זה מה שגרם לסרגל לברוח החוצה! */
  margin: 0 !important;
  max-width: 100vw !important;
}

/* התאמה למסכי מחשב (דסקטופ) - כדי שהכפתורים לא יברחו לקצוות המסך */
@media (min-width: 768px) {
  .bottom-app-nav {
    justify-content: center !important;
    gap: 60px !important; /* מרווח קבוע בין הכפתורים במחשב */
  }
  .bottom-app-nav-btn {
    flex: 0 0 auto !important;
    width: 80px !important;
  }
}
/* =========================================================
   תיקון חפיפה: חלונות קופצים (עגלה, תשלום) מעל הסרגל התחתון
   ========================================================= */
.cart-drawer-overlay,
#checkoutModalOverlay,
.customer-auth-overlay,
.category-side-menu-overlay,
.order-tracking-overlay,
.age18-modal-overlay {
  /* נותן לחלונות האלה כוח גדול יותר מהסרגל התחתון (שהוא 9999) */
  z-index: 10005 !important; 
}
/* =========================================================
   תיקון תגית העגלה - עיצוב מינימליסטי ופרימיום (עיגול מושלם)
   ========================================================= */
.bottom-app-nav-badge {
  position: absolute !important;
  top: -4px !important;
  right: -6px !important;
  
  /* ביטול המלבן ומעבר לעיגול מושלם וקטן */
  width: 16px !important;
  height: 16px !important;
  min-width: 0 !important;
  padding: 0 !important;
  
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  background: #ef4444 !important; /* אדום חי ואלגנטי יותר */
  color: #ffffff !important;
  
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  
  border-radius: 50% !important; /* עושה את זה עיגול מושלם */
  border: 2px solid #0a0a0c !important; /* חיתוך מדויק מסביב (Cutout) */
  box-shadow: none !important;
}
/* =========================================================
   עיצוב קטגוריות - בועות סטורי (Dark Premium Style)
   ========================================================= */

/* סידור הגריד: 3 בועות בשורה במובייל */
#categories.categories-grid,
#subcategories.categories-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; 
  gap: 24px 10px !important;
  padding: 15px 5px !important;
}

/* במחשב נציג יותר בועות בשורה */
@media (min-width: 680px) {
  #categories.categories-grid,
  #subcategories.categories-grid {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

/* ביטול הכרטיס המרובע והפיכתו למרחף */
.card.category-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

/* הפיכת אזור התמונה לעיגול כתום מקצועי */
.category-card .category-image-wrap {
  width: 85px !important;
  height: 85px !important;
  border-radius: 50% !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 50% 38%, rgba(255, 214, 102, 0.34), transparent 42%),
    linear-gradient(135deg, #ff9f1c 0%, #f97316 48%, #ea580c 100%) !important;

  border: 2px solid rgba(255, 255, 255, 0.92) !important;
  padding: 0 !important;

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(249, 115, 22, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

/* הילה כתומה עדינה כשלוחצים/מרחפים על הבועה */
.category-card:active .category-image-wrap,
.category-card:hover .category-image-wrap {
  border-color: #f97316 !important; 
  box-shadow: 0 0 15px rgba(249, 115, 22, 0.4) !important;
  transform: scale(0.95) !important;
}

/* התאמת תמונת הקטגוריה לתוך הבועה הכתומה */
.category-card .category-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.18)) !important;
}

/* אזור הטקסט (מתחת לעיגול) */
.category-card .category-body {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* עיצוב שם הקטגוריה */
.category-card .category-name {
  color: #ffffff !important; /* טקסט לבן שקופץ על הרקע */
  font-size: 14px !important;
  font-weight: 800 !important;
  text-align: center !important;
  line-height: 1.1 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8) !important; /* צללית לטקסט שיהיה קריא תמיד */
  margin: 0 !important;
}

/* הסתרת הערות מיותרות ושמירה על ניקיון */
.category-card .section-note {
  display: none !important;
}

/* עיצוב לאייקונים (למשל קטגוריית "מבצעים" ללא תמונה) */
.category-card.text-only .text-only-icon {
  font-size: 32px !important;
  background: transparent !important;
  border: none !important;
}
/* =========================================================
   תיקון בועות קטגוריות - העלמת ריבועי הזכוכית והגדלה משמעותית
   ========================================================= */

/* 1. מחיקה מוחלטת של קופסת הזכוכית מסביב לבועה */
.card.category-card,
.categories-grid .card.category-card,
#subcategories .card.category-card {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important; /* מונע שאריות של ריווח מהכרטיסיה הישנה */
}

/* 2. הגדלה משמעותית של הבועות עצמן */
.category-card .category-image-wrap {
  width: 110px !important; /* הוגדל משמעותית למובייל */
  height: 110px !important; /* הוגדל משמעותית למובייל */
  border-radius: 50% !important; /* שומר על עיגול מושלם */
  background: #ffffff !important; /* רקע לבן ואטום לבועה */
  border: 2px solid #e2e8f0 !important; /* מסגרת אפורה עדינה מאוד */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important; /* צל רך שמרים אותן מהעץ */
  padding: 18px !important;
}

/* 3. הגדלת הטקסט והתאמה לרקע העץ */
.category-card .category-name {
  color: #0f172a !important; /* שחור/אפור עמוק לקריאות מקסימלית */
  font-size: 15px !important; /* הגדלנו את הטקסט */
  font-weight: 900 !important;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95) !important; /* הילה לבנה כדי שיבלוט על קיר העץ */
  margin-top: 8px !important;
}

/* סידור הגריד מחדש כדי להכיל את הבועות הגדולות */
#categories.categories-grid,
#subcategories.categories-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px 8px !important; /* מרווח אנכי גדול יותר, מרווח אופקי מצומצם */
}

/* 4. בועות ענקיות למסכי מחשב וטאבלט */
@media (min-width: 680px) {
  .category-card .category-image-wrap {
    width: 140px !important;
    height: 140px !important;
    padding: 24px !important;
  }
  .category-card .category-name {
    font-size: 18px !important;
  }
}
/* =========================================================
   ניקוי אגרסיבי של "רוחות רפאים" - מחיקת כל מרובע רקע סביב הקטגוריות והטקסט
   ========================================================= */

/* ניקוי מוחלט של הקופסה שעוטפת את כל הקטגוריה */
#categories .card.category-card,
#subcategories .card.category-card,
.categories-grid .card.category-card {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ניקוי מוחלט של הקופסה שעוטפת את הטקסט בלבד */
#categories .category-card .category-body,
#subcategories .category-card .category-body,
.categories-grid .category-card .category-body {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important; /* מעלים את הקווים המפרידים המוזרים */
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* מוודאים שהטקסט עצמו לא מקבל שום רקע בטעות */
.category-card .category-name {
  background: transparent !important;
  background-color: transparent !important;
}
/* =========================================================
   חיסול סופי של הריבועים השקופים - מחיקת שכבות רקע מדומות (Pseudo-elements)
   ========================================================= */

/* העלמה מוחלטת של שכבות הזכוכית הנסתרות שיושבות מאחורי הכרטיס */
.card.category-card::before,
.card.category-card::after,
.categories-grid .card::before,
.categories-grid .card::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* וידוא הרג מוחלט של כל גרדיאנט (מעבר צבע) שאולי נשאר על הקופסה עצמה */
#categories .card.category-card,
#subcategories .card.category-card,
.categories-grid .card.category-card {
  background-image: none !important;
  background: transparent !important;
}

/* טיפול בסרגל הניווט העליון של החיפוש - שומר שלא יקבל רקע לבן בטעות */
.category-card .text-only-wrap,
.category-card .category-body {
  background-image: none !important;
  background: transparent !important;
}
/* =========================================================
   חיסול סופי של הריבועים השקופים - מחיקת שכבות רקע מדומות (Pseudo-elements)
   ========================================================= */

/* העלמה מוחלטת של שכבות הזכוכית הנסתרות שיושבות מאחורי הכרטיס */
.card.category-card::before,
.card.category-card::after,
.categories-grid .card::before,
.categories-grid .card::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* וידוא הרג מוחלט של כל גרדיאנט (מעבר צבע) שאולי נשאר על הקופסה עצמה */
#categories .card.category-card,
#subcategories .card.category-card,
.categories-grid .card.category-card {
  background-image: none !important;
  background: transparent !important;
}

/* טיפול בסרגל הניווט העליון של החיפוש - שומר שלא יקבל רקע לבן בטעות */
.category-card .text-only-wrap,
.category-card .category-body {
  background-image: none !important;
  background: transparent !important;
}
/* =========================================================
   עיצוב מוצרים - Dark Mode Premium (כרטיסיות יוקרתיות)
   ========================================================= */

/* סידור הגריד: 2 מוצרים בשורה במובייל */
#products.products-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  padding: 10px 5px !important;
}

/* במחשב נציג 4 מוצרים בשורה */
@media (min-width: 680px) {
  #products.products-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* הכרטיס עצמו - כהה ומרחף */
.card.product-card {
  background: rgba(15, 23, 42, 0.9) !important; /* אפור-פחם כהה */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

/* אנימציה כשנוגעים במוצר */
.card.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(249, 115, 22, 0.15) !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
}

/* אזור התמונה - רקע לבן כדי שהמוצרים יראו מעולה */
.product-card .product-image-wrap {
  background: #ffffff !important;
  padding: 15px !important;
  border-bottom: 2px solid #f97316 !important; /* פס כתום דק שמפריד בין התמונה לטקסט */
  position: relative !important;
}

.product-card .product-image-wrap img {
  width: 100% !important;
  height: 130px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08)) !important;
}

/* אזור הטקסט למטה - כהה */
.product-card .product-body {
  padding: 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex-grow: 1 !important;
  background: transparent !important;
}

/* שם המוצר */
.product-card .product-name {
  color: #ffffff !important; /* טקסט לבן בוהק */
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  text-align: right !important;
}

/* שורת המחיר והתגית */
.product-card .price-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: auto !important; /* דוחף את המחיר תמיד לתחתית הכרטיס */
}

/* המחיר */
.product-card .price {
  color: #f97316 !important; /* כתום עילאי מרקט */
  font-size: 18px !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 8px rgba(249, 115, 22, 0.3) !important; /* הילה כתומה */
}

/* התגית של הקטגוריה (Pill) */
.product-card .pill {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important; /* אפור-לבן */
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
}

/* =========================================================
   כפתורי הוספה לעגלה (פלוס / מינוס)
   ========================================================= */
.product-card .qty-box {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  padding: 4px !important;
  margin-top: 5px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.product-card .qty-btn {
  background: #f97316 !important;
  color: #ffffff !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 20px !important;
  font-weight: bold !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 10px rgba(249, 115, 22, 0.25) !important;
  transition: transform 0.1s ease !important;
}

.product-card .qty-btn:active {
  transform: scale(0.9) !important;
}

.product-card .qty-value {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  min-width: 30px !important;
  text-align: center !important;
}

/* תגית מבצעים צפה על התמונה (אם יש אזל מהמלאי או מבצע מיוחד) */
.product-card .out-of-stock-badge {
  background: #ef4444 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  font-size: 12px !important;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4) !important;
}
/* =========================================================
   עיצוב מוצרים - הפיכה לכרטיסיות לבנות, מוארות ונקיות (Light Premium)
   ========================================================= */

/* 1. הכרטיס עצמו - רקע לבן נקי וצל עדין יותר */
.card.product-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}

/* אנימציית ריחוף מותאמת לרקע הלבן */
.card.product-card:hover {
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.12) !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
}

/* 2. שם המוצר - שחור/אפור עמוק כדי שיבלוט על הלבן */
.product-card .product-name {
  color: #0f172a !important;
}

/* 3. התגית הקטנה (Pill) - צבע אפור בהיר */
.product-card .pill {
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

/* 4. קופסת הכמות של הפלוס/מינוס - התאמה לרקע לבן */
.product-card .qty-box {
  background: #f1f5f9 !important; /* אפור סופר בהיר */
  border: 1px solid #e2e8f0 !important;
}

/* המספר של הכמות - צבע כהה */
.product-card .qty-value {
  color: #0f172a !important;
}

/* ביטול ההילה הכתומה המוגזמת מסביב למחיר (מתאים יותר לרקע שחור) */
.product-card .price {
  text-shadow: none !important;
}
/* =========================================================
   עיצוב כיתוב קטגוריות - לוחית "שחור מבריק" יוקרתית וחדה
   ========================================================= */
.category-card .category-name {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* לוחית שחורה חצי-אטומה (מבטל את הטשטוש המציק) */
    background: rgba(0, 0, 0, 0.75) !important; 
    
    /* טקסט כתום בוהק וחד מאוד */
    color: #f97316 !important; 
    
    /* מסגרת דקה בכתום כדי לתת עומק */
    border: 1px solid rgba(249, 115, 22, 0.5) !important;
    
    /* עובי וגודל */
    font-weight: 900 !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    
    /* ניקוי שאריות טשטוש */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
    
    margin-top: 10px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

/* אפקט בנגיעה - הארה חזקה */
.category-card:hover .category-name {
    background: #f97316 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    transform: scale(1.05) !important;
}
/* =========================================================
   FORCE ORANGE CATEGORY BUBBLES
   רקע כתום לכל בועות הקטגוריות באתר הראשי
   ========================================================= */

#categories .category-card .category-image-wrap,
#subcategories .category-card .category-image-wrap,
.categories-grid .category-card .category-image-wrap {
    width: clamp(96px, 29vw, 122px) !important;
  height: clamp(96px, 29vw, 122px) !important;
  border-radius: 50% !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 50% 38%, rgba(255, 214, 102, 0.34), transparent 42%),
    linear-gradient(135deg, #ff9f1c 0%, #f97316 48%, #ea580c 100%) !important;

  border: 2px solid rgba(255, 255, 255, 0.92) !important;
  padding: 0 !important;

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(249, 115, 22, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#categories .category-card .category-image-wrap img,
#subcategories .category-card .category-image-wrap img,
.categories-grid .category-card .category-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
padding: 10px !important;
  border-radius: 50% !important;
  padding: 0 !important;
}
/* =========================================================
   ART - מעקב הזמנה ממוזער פרימיום
   עיגול נגרר שנדבק לצדדים + צבע לפי סטטוס
   ========================================================= */

.order-tracking-dock {
  --tracking-main: #f97316;
  --tracking-soft: rgba(255, 237, 213, 0.95);
  --tracking-shadow: rgba(249, 115, 22, 0.42);

  position: fixed !important;
  top: auto !important;
  right: 12px !important;
  left: auto !important;
  bottom: calc(112px + env(safe-area-inset-bottom)) !important;

  width: 74px !important;
  height: 74px !important;
  min-width: 74px !important;
  min-height: 74px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: none !important;
  border-radius: 999px !important;

  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;

  z-index: 999998 !important;

  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;

  transform: none !important;
  transition:
    width 0.22s ease,
    height 0.22s ease,
    filter 0.22s ease,
    opacity 0.22s ease !important;
}

.order-tracking-dock:active {
  cursor: grabbing !important;
  transform: scale(0.98) !important;
}

.order-tracking-dock.hidden {
  display: none !important;
}

.order-tracking-dock.is-dragging {
  transition: none !important;
  filter: brightness(1.08) saturate(1.08) !important;
}

.order-tracking-dock::before,
.order-tracking-dock::after {
  display: none !important;
  content: none !important;
}

.order-tracking-dock-ring {
  position: relative !important;
  width: 74px !important;
  height: 74px !important;
  min-width: 74px !important;
  min-height: 74px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 999px !important;

  background:
    conic-gradient(
      from 0deg,
      var(--tracking-main),
      var(--tracking-soft),
      var(--tracking-main),
      var(--tracking-main)
    ) !important;

  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.42),
    0 0 24px var(--tracking-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;

  animation: artOrderDockSpin 1.55s linear infinite !important;
}

.order-tracking-dock-core {
  width: 58px !important;
  height: 58px !important;
  border-radius: 999px !important;

  display: grid !important;
  place-items: center !important;

  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.24), transparent 36%),
    linear-gradient(180deg, rgba(31, 41, 55, 0.96), rgba(3, 7, 18, 0.98)) !important;

  border: 1px solid rgba(255, 255, 255, 0.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -12px 22px rgba(0, 0, 0, 0.34) !important;

  animation: artOrderDockSpinReverse 1.55s linear infinite !important;
}

.order-tracking-dock-svg {
  width: 28px !important;
  height: 28px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 8px var(--tracking-shadow)) !important;
}

.order-tracking-dock-copy {
  position: absolute !important;
  top: 50% !important;

  width: max-content !important;
  max-width: 168px !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;

  padding: 9px 13px !important;
  border-radius: 16px !important;

  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.88)) !important;

  border: 1px solid rgba(255, 255, 255, 0.12) !important;

  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.34),
    0 0 18px var(--tracking-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;

  backdrop-filter: blur(16px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.12) !important;

  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) scale(0.96) !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
}

.order-tracking-dock:hover .order-tracking-dock-copy,
.order-tracking-dock:focus-visible .order-tracking-dock-copy {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1) !important;
}

.order-tracking-dock[data-edge="right"] .order-tracking-dock-copy {
  right: 86px !important;
  left: auto !important;
  text-align: right !important;
}

.order-tracking-dock[data-edge="left"] .order-tracking-dock-copy {
  left: 86px !important;
  right: auto !important;
  text-align: right !important;
}

.order-tracking-dock[data-edge="top"] .order-tracking-dock-copy,
.order-tracking-dock[data-edge="bottom"] .order-tracking-dock-copy {
  top: auto !important;
  bottom: 86px !important;
  right: 50% !important;
  transform: translateX(50%) scale(0.96) !important;
  text-align: center !important;
}

.order-tracking-dock[data-edge="top"]:hover .order-tracking-dock-copy,
.order-tracking-dock[data-edge="bottom"]:hover .order-tracking-dock-copy,
.order-tracking-dock[data-edge="top"]:focus-visible .order-tracking-dock-copy,
.order-tracking-dock[data-edge="bottom"]:focus-visible .order-tracking-dock-copy {
  transform: translateX(50%) scale(1) !important;
}

.order-tracking-dock-title {
  color: #ffffff !important;
  font-size: 13px !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;

  text-shadow:
    0 0 10px var(--tracking-shadow),
    0 2px 8px rgba(0, 0, 0, 0.45) !important;
}

.order-tracking-dock-hint {
  color: rgba(226, 232, 240, 0.86) !important;
  font-size: 10.5px !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.order-tracking-dock.pending {
  --tracking-main: #f97316;
  --tracking-soft: #fed7aa;
  --tracking-shadow: rgba(249, 115, 22, 0.45);
}

.order-tracking-dock.approved {
  --tracking-main: #22c55e;
  --tracking-soft: #bbf7d0;
  --tracking-shadow: rgba(34, 197, 94, 0.42);
}

.order-tracking-dock.preparing {
  --tracking-main: #f59e0b;
  --tracking-soft: #fde68a;
  --tracking-shadow: rgba(245, 158, 11, 0.44);
}

.order-tracking-dock.on_the_way {
  --tracking-main: #38bdf8;
  --tracking-soft: #bae6fd;
  --tracking-shadow: rgba(56, 189, 248, 0.42);
}

.order-tracking-dock.delivered {
  --tracking-main: #16a34a;
  --tracking-soft: #bbf7d0;
  --tracking-shadow: rgba(22, 163, 74, 0.42);
}

.order-tracking-dock.rejected,
.order-tracking-dock.cancelled {
  --tracking-main: #ef4444;
  --tracking-soft: #fecaca;
  --tracking-shadow: rgba(239, 68, 68, 0.44);
}

.app-shell.has-order-tracking-dock {
  padding-bottom: 136px !important;
}

@keyframes artOrderDockSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes artOrderDockSpinReverse {
  to {
    transform: rotate(-360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .order-tracking-dock-ring,
  .order-tracking-dock-core {
    animation: none !important;
  }
}

@media (max-width: 520px) {
  .order-tracking-dock {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
  }

  .order-tracking-dock-ring {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
  }

  .order-tracking-dock-core {
    width: 54px !important;
    height: 54px !important;
  }

  .order-tracking-dock-svg {
    width: 26px !important;
    height: 26px !important;
  }

  .app-shell.has-order-tracking-dock {
    padding-bottom: 132px !important;
  }
}
/* =========================================================
   ART - כרטיס מעקב הזמנה פרימיום
   עיגול זוהר מסתובב + שלבים איכותיים לפי סטטוס
   ========================================================= */

#orderTrackingPanel.order-tracking-panel {
  --ot-status: #f97316;
  --ot-status-soft: #fed7aa;
  --ot-status-rgb: 249, 115, 22;
  --ot-bg: rgba(3, 7, 18, 0.94);

  position: relative !important;
  overflow: hidden !important;

  width: min(94vw, 540px) !important;
  max-height: min(88vh, 840px) !important;
  overflow-y: auto !important;

  border-radius: 34px !important;
  padding: 22px 20px 20px !important;

  color: #ffffff !important;

  background:
    radial-gradient(circle at 50% -12%, rgba(var(--ot-status-rgb), 0.22), transparent 38%),
    radial-gradient(circle at 8% 15%, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96)) !important;

  border: 1px solid rgba(255, 255, 255, 0.14) !important;

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(var(--ot-status-rgb), 0.12),
    0 0 46px rgba(var(--ot-status-rgb), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;

  backdrop-filter: blur(22px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
}

#orderTrackingPanel.pending {
  --ot-status: #f97316;
  --ot-status-soft: #fed7aa;
  --ot-status-rgb: 249, 115, 22;
}

#orderTrackingPanel.approved {
  --ot-status: #22c55e;
  --ot-status-soft: #bbf7d0;
  --ot-status-rgb: 34, 197, 94;
}

#orderTrackingPanel.preparing {
  --ot-status: #f59e0b;
  --ot-status-soft: #fde68a;
  --ot-status-rgb: 245, 158, 11;
}

#orderTrackingPanel.on_the_way {
  --ot-status: #38bdf8;
  --ot-status-soft: #bae6fd;
  --ot-status-rgb: 56, 189, 248;
}

#orderTrackingPanel.delivered {
  --ot-status: #16a34a;
  --ot-status-soft: #bbf7d0;
  --ot-status-rgb: 22, 163, 74;
}

#orderTrackingPanel.rejected,
#orderTrackingPanel.cancelled {
  --ot-status: #ef4444;
  --ot-status-soft: #fecaca;
  --ot-status-rgb: 239, 68, 68;
}

#orderTrackingPanel .order-tracking-glow {
  position: absolute !important;
  inset: -90px -80px auto -80px !important;
  height: 240px !important;
  pointer-events: none !important;

  background:
    radial-gradient(circle at 50% 35%, rgba(var(--ot-status-rgb), 0.26), transparent 58%),
    radial-gradient(circle at 30% 10%, rgba(255, 255, 255, 0.10), transparent 44%) !important;

  filter: blur(8px) !important;
  opacity: 1 !important;
}

#orderTrackingPanel .order-tracking-close-x {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 5 !important;

  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 17px !important;

  color: #ffffff !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 650 !important;

  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.09) !important;

  border: 1px solid rgba(255, 255, 255, 0.14) !important;

  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease !important;
}

#orderTrackingPanel .order-tracking-close-x:hover {
  transform: translateY(-1px) scale(1.03) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

#orderTrackingPanel .order-tracking-close-x:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92) !important;
  outline-offset: 3px !important;
}

#orderTrackingPanel .order-tracking-header {
  position: relative !important;
  z-index: 2 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  padding-inline-start: 58px !important;
  margin-bottom: 18px !important;
}

#orderTrackingPanel .order-tracking-small-title {
  margin: 0 !important;

  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
}

#orderTrackingPanel .order-tracking-badge {
  min-height: 38px !important;
  padding: 0 15px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;

  background:
    linear-gradient(135deg, rgba(var(--ot-status-rgb), 0.34), rgba(255, 255, 255, 0.08)) !important;

  border: 1px solid rgba(var(--ot-status-rgb), 0.48) !important;

  box-shadow:
    0 0 22px rgba(var(--ot-status-rgb), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

#orderTrackingPanel .order-tracking-hero {
  position: relative !important;
  z-index: 2 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  padding: 8px 0 16px !important;
  text-align: center !important;
}

#orderTrackingPanel .order-tracking-ring {
  position: relative !important;

  width: 142px !important;
  height: 142px !important;
  min-width: 142px !important;
  min-height: 142px !important;

  margin: 2px auto 20px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 999px !important;
}

#orderTrackingPanel .order-tracking-ring-track {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 999px !important;

  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 0 52%, transparent 53%),
    conic-gradient(from 0deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.10)) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 24px rgba(0, 0, 0, 0.34) !important;
}

#orderTrackingPanel .order-tracking-ring-progress {
  position: absolute !important;
  inset: -4px !important;
  border-radius: 999px !important;

  background:
    conic-gradient(
      from 0deg,
      rgba(var(--ot-status-rgb), 1),
      var(--ot-status-soft),
      rgba(var(--ot-status-rgb), 1),
      rgba(var(--ot-status-rgb), 0.20),
      rgba(var(--ot-status-rgb), 1)
    ) !important;

  filter:
    drop-shadow(0 0 12px rgba(var(--ot-status-rgb), 0.58))
    drop-shadow(0 0 28px rgba(var(--ot-status-rgb), 0.32)) !important;

  animation: artTrackingMainSpin 1.7s linear infinite !important;
}

#orderTrackingPanel .order-tracking-ring-progress::after {
  content: "" !important;
  position: absolute !important;
  inset: 13px !important;
  border-radius: 999px !important;
  background: rgba(2, 6, 23, 0.98) !important;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.42) !important;
}

#orderTrackingPanel .order-tracking-icon {
  position: relative !important;
  z-index: 2 !important;

  width: 88px !important;
  height: 88px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 31px !important;

  background:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.24), transparent 42%),
    linear-gradient(180deg, rgba(51, 65, 85, 0.92), rgba(2, 6, 23, 0.98)) !important;

  border: 1px solid rgba(255, 255, 255, 0.16) !important;

  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.38),
    0 0 24px rgba(var(--ot-status-rgb), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

#orderTrackingPanel .order-tracking-icon svg {
  width: 46px !important;
  height: 46px !important;

  display: block !important;

  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2.3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  filter:
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.36))
    drop-shadow(0 0 10px rgba(var(--ot-status-rgb), 0.42)) !important;
}

#orderTrackingPanel .order-tracking-title {
  margin: 0 !important;

  color: #ffffff !important;
  font-size: clamp(30px, 6vw, 46px) !important;
  line-height: 1.05 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.045em !important;

  text-shadow:
    0 0 18px rgba(var(--ot-status-rgb), 0.28),
    0 4px 18px rgba(0, 0, 0, 0.44) !important;
}

#orderTrackingPanel .order-tracking-text {
  width: min(100%, 430px) !important;
  margin: 12px auto 0 !important;

  color: rgba(226, 232, 240, 0.86) !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
}

/* שלבי ההזמנה */
#orderTrackingPanel .order-tracking-steps {
  position: relative !important;
  z-index: 2 !important;

  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;

  margin: 8px 0 16px !important;
  padding: 10px !important;

  border-radius: 25px !important;

  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 38px rgba(0, 0, 0, 0.18) !important;
}

#orderTrackingPanel .order-tracking-step {
  --step-color: rgba(148, 163, 184, 1);
  --step-color-soft: rgba(226, 232, 240, 1);

  position: relative !important;
  min-height: 86px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  border-radius: 19px !important;

  color: rgba(226, 232, 240, 0.48) !important;

  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;

  transition:
    transform 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease !important;
}

#orderStepReceived {
  --step-color: #f97316 !important;
  --step-color-soft: #fed7aa !important;
}

#orderStepApproved {
  --step-color: #22c55e !important;
  --step-color-soft: #bbf7d0 !important;
}

#orderStepPreparing {
  --step-color: #f59e0b !important;
  --step-color-soft: #fde68a !important;
}

#orderStepOnTheWay {
  --step-color: #38bdf8 !important;
  --step-color-soft: #bae6fd !important;
}

#orderStepDelivered {
  --step-color: #16a34a !important;
  --step-color-soft: #bbf7d0 !important;
}

#orderTrackingPanel.rejected #orderStepApproved,
#orderTrackingPanel.cancelled #orderStepApproved {
  --step-color: #ef4444 !important;
  --step-color-soft: #fecaca !important;
}

#orderTrackingPanel .order-tracking-step-dot {
  position: relative !important;

  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 999px !important;

  background: rgba(148, 163, 184, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 5px rgba(255, 255, 255, 0.035) !important;
}

#orderTrackingPanel .order-tracking-step-dot::after {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.58) !important;
}

#orderTrackingPanel .order-tracking-step.is-done {
  color: rgba(255, 255, 255, 0.88) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.045)) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
}

#orderTrackingPanel .order-tracking-step.is-done .order-tracking-step-dot {
  background: linear-gradient(135deg, var(--step-color), var(--step-color-soft)) !important;
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--step-color) 18%, transparent),
    0 0 18px color-mix(in srgb, var(--step-color) 45%, transparent) !important;
}

#orderTrackingPanel .order-tracking-step.is-done .order-tracking-step-dot::after {
  width: 10px !important;
  height: 6px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-left: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  transform: rotate(-45deg) translateY(-1px) !important;
}

#orderTrackingPanel .order-tracking-step.is-current {
  color: #ffffff !important;
  transform: translateY(-2px) !important;

  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--step-color) 28%, transparent), transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.055)) !important;

  border-color: color-mix(in srgb, var(--step-color) 54%, rgba(255, 255, 255, 0.10)) !important;

  box-shadow:
    0 18px 34px color-mix(in srgb, var(--step-color) 18%, transparent),
    0 0 22px color-mix(in srgb, var(--step-color) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

#orderTrackingPanel .order-tracking-step.is-current .order-tracking-step-dot {
  width: 32px !important;
  height: 32px !important;

  background:
    conic-gradient(
      from 0deg,
      var(--step-color),
      var(--step-color-soft),
      var(--step-color),
      color-mix(in srgb, var(--step-color) 20%, transparent),
      var(--step-color)
    ) !important;

  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--step-color) 14%, transparent),
    0 0 24px color-mix(in srgb, var(--step-color) 62%, transparent) !important;

  animation: artTrackingStepSpin 1.2s linear infinite !important;
}

#orderTrackingPanel .order-tracking-step.is-current .order-tracking-step-dot::before {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  border-radius: 999px !important;
  background: rgba(2, 6, 23, 0.96) !important;
}

#orderTrackingPanel .order-tracking-step.is-current .order-tracking-step-dot::after {
  position: relative !important;
  z-index: 2 !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--step-color) 78%, transparent) !important;
}

#orderTrackingPanel .order-tracking-step-text {
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
}

/* פרטי הזמנה */
#orderTrackingPanel .order-tracking-details {
  position: relative !important;
  z-index: 2 !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;

  margin-top: 10px !important;
}

#orderTrackingPanel .order-tracking-detail {
  min-width: 0 !important;
  padding: 13px 14px !important;

  border-radius: 18px !important;

  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.04)) !important;

  border: 1px solid rgba(255, 255, 255, 0.095) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 20px rgba(0, 0, 0, 0.12) !important;
}

#orderTrackingPanel .order-tracking-detail span {
  color: rgba(226, 232, 240, 0.58) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}

#orderTrackingPanel .order-tracking-detail strong {
  margin-top: 4px !important;
  display: block !important;

  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1.32 !important;
  font-weight: 950 !important;

  overflow-wrap: anywhere !important;
}

/* כפתורים בתחתית הכרטיס */
#orderTrackingPanel .order-tracking-actions {
  position: relative !important;
  z-index: 2 !important;
}

#orderTrackingPanel button {
  -webkit-tap-highlight-color: transparent !important;
}

@keyframes artTrackingMainSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes artTrackingStepSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #orderTrackingPanel .order-tracking-ring-progress,
  #orderTrackingPanel .order-tracking-step.is-current .order-tracking-step-dot {
    animation: none !important;
  }
}

@media (max-width: 520px) {
  #orderTrackingPanel.order-tracking-panel {
    width: min(94vw, 430px) !important;
    max-height: 86vh !important;
    border-radius: 30px !important;
    padding: 20px 14px 16px !important;
  }

  #orderTrackingPanel .order-tracking-header {
    padding-inline-start: 54px !important;
    margin-bottom: 12px !important;
  }

  #orderTrackingPanel .order-tracking-ring {
    width: 124px !important;
    height: 124px !important;
    min-width: 124px !important;
    min-height: 124px !important;
    margin-bottom: 16px !important;
  }

  #orderTrackingPanel .order-tracking-icon {
    width: 76px !important;
    height: 76px !important;
    border-radius: 27px !important;
  }

  #orderTrackingPanel .order-tracking-icon svg {
    width: 40px !important;
    height: 40px !important;
  }

  #orderTrackingPanel .order-tracking-title {
    font-size: clamp(28px, 8vw, 38px) !important;
  }

  #orderTrackingPanel .order-tracking-text {
    font-size: 15px !important;
  }

  #orderTrackingPanel .order-tracking-steps {
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 22px !important;
  }

  #orderTrackingPanel .order-tracking-step {
    min-height: 74px !important;
    border-radius: 16px !important;
    gap: 6px !important;
  }

  #orderTrackingPanel .order-tracking-step-dot {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
  }

  #orderTrackingPanel .order-tracking-step.is-current .order-tracking-step-dot {
    width: 28px !important;
    height: 28px !important;
  }

  #orderTrackingPanel .order-tracking-step-text {
    font-size: 10.5px !important;
  }

  #orderTrackingPanel .order-tracking-details {
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   ART GUARD - הגנה סופית לעיצוב ונגישות מעקב הזמנה
   חייב להיות הבלוק האחרון ביותר ב-style.css
   ========================================================= */

/* מניעת עיצוב ישן של פס רחב / מיקום אמצע שידרוס את הבועה */
#orderTrackingDock.order-tracking-dock {
  position: fixed !important;
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 1000001 !important;
  cursor: grab !important;
  touch-action: none !important;
}

/* אם ה-JS עוד לא שם מיקום ידני, ברירת מחדל בצד ימין */
#orderTrackingDock.order-tracking-dock:not([style*="left"]) {
  right: 14px !important;
  left: auto !important;
  top: auto !important;
  bottom: calc(112px + env(safe-area-inset-bottom)) !important;
  transform: none !important;
}

/* מנטרל שאריות מהמבנה הישן */

/* פוקוס מקלדת ברור לבועה */
#orderTrackingDock.order-tracking-dock:focus-visible {
  outline: 4px solid #ffffff !important;
  outline-offset: 5px !important;
  box-shadow:
    0 0 0 8px rgba(249, 115, 22, 0.42),
    0 0 32px rgba(249, 115, 22, 0.42) !important;
}

/* פוקוס ברור לכפתורי הכרטיס */
#orderTrackingPanel button:focus-visible,
#orderTrackingPanel a:focus-visible {
  outline: 4px solid #ffffff !important;
  outline-offset: 4px !important;
  box-shadow:
    0 0 0 8px rgba(var(--ot-status-rgb), 0.34),
    0 0 28px rgba(var(--ot-status-rgb), 0.28) !important;
}

/* ניגודיות טקסט בכרטיס */
#orderTrackingPanel .order-tracking-title,
#orderTrackingPanel .order-tracking-badge,
#orderTrackingPanel .order-tracking-step-text,
#orderTrackingPanel .order-tracking-detail strong {
  color: #ffffff !important;
}

#orderTrackingPanel .order-tracking-text,
#orderTrackingPanel .order-tracking-detail span {
  color: rgba(226, 232, 240, 0.88) !important;
}

/* אזור השלבים לא יהיה תלוי רק בצבע — יש גם מצב טקסטואלי/צורני */
#orderTrackingPanel .order-tracking-step.is-current {
  border-width: 2px !important;
}

#orderTrackingPanel .order-tracking-step.is-done .order-tracking-step-dot::after {
  content: "" !important;
}

/* מניעת אנימציות למי שמבקש פחות תנועה במכשיר */
@media (prefers-reduced-motion: reduce) {
  #orderTrackingDock .order-tracking-dock-ring,
  #orderTrackingDock .order-tracking-dock-core,
  #orderTrackingPanel .order-tracking-ring-progress,
  #orderTrackingPanel .order-tracking-step.is-current .order-tracking-step-dot {
    animation: none !important;
  }

  #orderTrackingDock.order-tracking-dock,
  #orderTrackingPanel.order-tracking-panel,
  #orderTrackingPanel * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* מובייל — מונע מהבלוקים הישנים להחזיר את הבועה לאמצע */
@media (max-width: 520px) {
  #orderTrackingDock.order-tracking-dock {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    max-width: 70px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    overflow: visible !important;
  }

  #orderTrackingDock.order-tracking-dock:not([style*="left"]) {
    right: 12px !important;
    left: auto !important;
    bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
  }

  #orderTrackingPanel.order-tracking-panel {
    max-height: 86vh !important;
    overflow-y: auto !important;
  }
}
/* =========================================================
   ART FORCE FIX - מעקב הזמנה: בועה + עיגול גדול מסתובב
   חייב להיות הבלוק האחרון ביותר בקובץ
   ========================================================= */

#orderTrackingDock.order-tracking-dock:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#orderTrackingDock.order-tracking-dock {
  position: fixed !important;
  right: 14px !important;
  left: auto !important;
  top: auto !important;
  bottom: calc(112px + env(safe-area-inset-bottom)) !important;
  transform: none !important;

  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;

  padding: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 1000001 !important;
}

/* העיגול הגדול בכרטיס */
#orderTrackingPanel .order-tracking-ring-progress {
  position: absolute !important;
  inset: -5px !important;
  border-radius: 999px !important;

  background:
    conic-gradient(
      from 0deg,
      rgba(var(--ot-status-rgb, 249, 115, 22), 1),
      rgba(255, 255, 255, 0.92),
      rgba(var(--ot-status-rgb, 249, 115, 22), 1),
      rgba(var(--ot-status-rgb, 249, 115, 22), 0.18),
      rgba(var(--ot-status-rgb, 249, 115, 22), 1)
    ) !important;

  filter:
    drop-shadow(0 0 14px rgba(var(--ot-status-rgb, 249, 115, 22), 0.74))
    drop-shadow(0 0 34px rgba(var(--ot-status-rgb, 249, 115, 22), 0.42)) !important;

  animation: artForceTrackingSpin 1.25s linear infinite !important;
  transform-origin: center center !important;
}

#orderTrackingPanel .order-tracking-ring-progress::after {
  content: "" !important;
  position: absolute !important;
  inset: 14px !important;
  border-radius: 999px !important;
  background: rgba(2, 6, 23, 0.98) !important;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.46) !important;
}

/* צבעים לפי סטטוס */
#orderTrackingPanel.pending {
  --ot-status-rgb: 249, 115, 22 !important;
}

#orderTrackingPanel.approved {
  --ot-status-rgb: 34, 197, 94 !important;
}

#orderTrackingPanel.preparing {
  --ot-status-rgb: 245, 158, 11 !important;
}

#orderTrackingPanel.on_the_way {
  --ot-status-rgb: 56, 189, 248 !important;
}

#orderTrackingPanel.delivered {
  --ot-status-rgb: 22, 163, 74 !important;
}

#orderTrackingPanel.rejected,
#orderTrackingPanel.cancelled {
  --ot-status-rgb: 239, 68, 68 !important;
}

/* מבטל עיצובים ישנים שאולי שמו animation none */
#orderTrackingPanel.delivered .order-tracking-ring-progress,
#orderTrackingPanel.rejected .order-tracking-ring-progress,
#orderTrackingPanel.cancelled .order-tracking-ring-progress {
  animation: artForceTrackingSpin 1.25s linear infinite !important;
}

/* שלב פעיל - עיגול קטן מסתובב */
#orderTrackingPanel .order-tracking-step.is-current .order-tracking-step-dot {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;

  background:
    conic-gradient(
      from 0deg,
      rgba(var(--ot-status-rgb, 249, 115, 22), 1),
      rgba(255, 255, 255, 0.92),
      rgba(var(--ot-status-rgb, 249, 115, 22), 1),
      rgba(var(--ot-status-rgb, 249, 115, 22), 0.22)
    ) !important;

  box-shadow:
    0 0 0 5px rgba(var(--ot-status-rgb, 249, 115, 22), 0.16),
    0 0 24px rgba(var(--ot-status-rgb, 249, 115, 22), 0.62) !important;

  animation: artForceTrackingSpin 1s linear infinite !important;
}

#orderTrackingPanel .order-tracking-step.is-current .order-tracking-step-dot::before {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  border-radius: 999px !important;
  background: rgba(2, 6, 23, 0.96) !important;
}

#orderTrackingPanel .order-tracking-step.is-current .order-tracking-step-dot::after {
  content: "" !important;
  position: relative !important;
  z-index: 2 !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.75) !important;
}

@keyframes artForceTrackingSpin {
  to {
    transform: rotate(360deg);
  }
}

/* נגישות: מי שמבקש פחות תנועה במכשיר לא יקבל סיבובים */
@media (prefers-reduced-motion: reduce) {
  #orderTrackingPanel .order-tracking-ring-progress,
  #orderTrackingPanel .order-tracking-step.is-current .order-tracking-step-dot {
    animation: none !important;
  }
}
/* =========================================================
   ART FIX - הגדלת בועת מעקב הזמנה + תמיכה בגרירה
   חייב להיות הבלוק האחרון ביותר ב-style.css
   ========================================================= */

#orderTrackingDock.order-tracking-dock {
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  min-height: 96px !important;
  max-width: 96px !important;
}

#orderTrackingDock .order-tracking-dock-ring {
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  min-height: 96px !important;
}

#orderTrackingDock .order-tracking-dock-core {
  width: 76px !important;
  height: 76px !important;
}

#orderTrackingDock .order-tracking-dock-svg {
  width: 36px !important;
  height: 36px !important;
}

/* מיקום ברירת מחדל רק לפני שה-JS מזיז */
#orderTrackingDock.order-tracking-dock:not([data-position-restored="true"]) {
  right: 14px !important;
  left: auto !important;
  top: auto !important;
  bottom: calc(112px + env(safe-area-inset-bottom)) !important;
}

/* כשה-JS כבר מנהל מיקום — לא להחזיר בכוח לימין/למטה */
#orderTrackingDock.order-tracking-dock[data-position-restored="true"] {
  right: auto !important;
  bottom: auto !important;
}

/* הגדלת אזור פוקוס לנגישות */
#orderTrackingDock.order-tracking-dock:focus-visible {
  outline: 4px solid #ffffff !important;
  outline-offset: 6px !important;
}

@media (max-width: 520px) {
  #orderTrackingDock.order-tracking-dock {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    min-height: 92px !important;
    max-width: 92px !important;
  }

  #orderTrackingDock .order-tracking-dock-ring {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    min-height: 92px !important;
  }

  #orderTrackingDock .order-tracking-dock-core {
    width: 72px !important;
    height: 72px !important;
  }

  #orderTrackingDock .order-tracking-dock-svg {
    width: 34px !important;
    height: 34px !important;
  }
}
/* =========================================================
   ART STABLE FIX - בועת מעקב קבועה ויציבה במובייל ובמחשב
   מבטל תלות בגרירה ומונע היעלמות במובייל
   ========================================================= */

#orderTrackingDock.order-tracking-dock {
  position: fixed !important;
  right: 18px !important;
  left: auto !important;
  top: auto !important;
  bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  transform: none !important;

  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  min-height: 96px !important;
  max-width: 96px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  z-index: 1000002 !important;

  cursor: pointer !important;
  touch-action: manipulation !important;
}

#orderTrackingDock.hidden {
  display: none !important;
}

#orderTrackingDock .order-tracking-dock-ring {
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  min-height: 96px !important;
}

#orderTrackingDock .order-tracking-dock-core {
  width: 76px !important;
  height: 76px !important;
}

#orderTrackingDock .order-tracking-dock-svg {
  width: 36px !important;
  height: 36px !important;
}

#orderTrackingDock.order-tracking-dock:focus-visible {
  outline: 4px solid #ffffff !important;
  outline-offset: 6px !important;
  box-shadow:
    0 0 0 8px rgba(249, 115, 22, 0.42),
    0 0 32px rgba(249, 115, 22, 0.42) !important;
}

/* מובייל */
@media (max-width: 768px) {
  #orderTrackingDock.order-tracking-dock {
    right: 14px !important;
    left: auto !important;
    top: auto !important;
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;

    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    min-height: 88px !important;
    max-width: 88px !important;

    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000002 !important;
  }

  #orderTrackingDock .order-tracking-dock-ring {
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    min-height: 88px !important;
  }

  #orderTrackingDock .order-tracking-dock-core {
    width: 70px !important;
    height: 70px !important;
  }

  #orderTrackingDock .order-tracking-dock-svg {
    width: 33px !important;
    height: 33px !important;
  }
}
/* =========================================================
   ART FINAL FIX - הסתרת בועת מעקב כשאין הזמנה פעילה
   חייב להיות הבלוק האחרון ביותר ב-style.css
   ========================================================= */

#orderTrackingDock.order-tracking-dock.hidden,
#orderTrackingDock.hidden,
body:not(.has-active-order-tracking) #orderTrackingDock.order-tracking-dock {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* רק כשיש הזמנה פעילה מותר לבועה להופיע */
body.has-active-order-tracking #orderTrackingDock.order-tracking-dock:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* =========================================================
   עילאי AI - בועת עוזר חכם
   מבודד לגמרי כדי לא לשבור עיצוב קיים
   ========================================================= */

.ilai-ai-assistant-panel.hidden {
  display: none !important;
}

@keyframes ilaiAiAssistantBounce {
  0%,
  100% {
    transform: translateY(0);
  }

  42% {
    transform: translateY(-6px);
  }

  58% {
    transform: translateY(0);
  }
}

@keyframes ilaiAiAssistantGlow {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.55;
  }

  50% {
    transform: scale(1.08);
    opacity: 0.96;
  }
}

@media (max-width: 520px) {
}

/* נגישות: אם המשתמש ביקש לעצור אנימציות דרך האתר */
body.accessibility-stop-animations .ilai-ai-assistant-button,
body.accessibility-stop-animations .ilai-ai-assistant-glow {
  animation: none !important;
}

/* נגישות: אם במכשיר מוגדר צמצום תנועה */
@media (prefers-reduced-motion: reduce) {
}
/* =========================================================
   תיקון סופי לעיצוב בועת עילאי AI
   שחור זכוכית + הילה כחולה ניאון חזקה
   ========================================================= */
/* =========================================================
   עילאי AI - תיקון מיקום חדש
   הבועה יושבת מעל כפתור הנגישות, בלי לעלות עליו
   ========================================================= */

@media (max-width: 520px) {
}
/* =========================================================
   עילאי AI - כפתור וואטסאפ בתוך הצ׳אט
   ========================================================= */
/* =========================================================
   כפתור סגירת עגלה פרימיום
   מחליף את ה-X החובבני לכפתור זכוכית מקצועי
   ========================================================= */

.cart-drawer .close-btn,
#closeCartButton {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 122, 0, 0.72) !important;
  background:
    linear-gradient(145deg, rgba(18, 18, 22, 0.94), rgba(6, 7, 10, 0.96)) !important;
  color: #ffffff !important;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 18px rgba(255, 122, 0, 0.24) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease !important;
}

.cart-drawer .close-btn::before,
#closeCartButton::before {
  content: "";
  width: 22px;
  height: 22px;
  display: block;
  background: currentColor;
  mask:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.3 5.7a1 1 0 0 0-1.4 0L12 10.59 7.1 5.7a1 1 0 1 0-1.4 1.4L10.59 12 5.7 16.9a1 1 0 1 0 1.4 1.4L12 13.41l4.9 4.89a1 1 0 0 0 1.4-1.4L13.41 12l4.89-4.9a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.3 5.7a1 1 0 0 0-1.4 0L12 10.59 7.1 5.7a1 1 0 1 0-1.4 1.4L10.59 12 5.7 16.9a1 1 0 1 0 1.4 1.4L12 13.41l4.9 4.89a1 1 0 0 0 1.4-1.4L13.41 12l4.89-4.9a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(255, 122, 0, 0.35));
}

.cart-drawer .close-btn:hover,
#closeCartButton:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255, 150, 40, 0.95) !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 24px rgba(255, 122, 0, 0.34) !important;
}

.cart-drawer .close-btn:focus-visible,
#closeCartButton:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92) !important;
  outline-offset: 4px !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.42),
    0 0 0 7px rgba(255, 122, 0, 0.24) !important;
}

/* =========================================================
   ART - אזור אישי / מנוי זהב פרימיום
   הדבקה בטוחה בסוף style.css
   ========================================================= */

.customer-profile-premium.hidden {
  display: none !important;
}

.customer-member-detail-row {
  min-height: 58px !important;
  padding: 10px !important;
  border-radius: 17px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
  border: 1px solid rgba(226, 232, 240, 0.92) !important;
}

.customer-member-detail-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  background: rgba(245, 158, 11, 0.12) !important;
  color: #b45309 !important;
}

.customer-member-detail-icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.customer-member-detail-text {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

.customer-member-detail-text strong {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
}

.customer-member-detail-text span {
  color: #111827 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  overflow-wrap: anywhere !important;
}

.customer-member-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.customer-member-action {
  min-height: 54px !important;
  padding: 9px 10px !important;
  border-radius: 18px !important;
  display: grid !important;
  place-items: center !important;
  gap: 2px !important;
  text-align: center !important;
  color: #111827 !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 250, 0.90)) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  font-size: 14px !important;
  font-weight: 1000 !important;
}

.customer-member-action-main {
  color: #ffffff !important;
  background: linear-gradient(135deg, #f59e0b, #d97706, #92400e) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 14px 26px rgba(245, 158, 11, 0.24) !important;
}

.customer-member-action span {
  font-size: 11px !important;
  font-weight: 850 !important;
  opacity: 0.74 !important;
}

.customer-member-action:disabled {
  cursor: not-allowed !important;
  opacity: 0.88 !important;
}

.customer-member-logout {
  width: 100% !important;
  min-height: 52px !important;
  border-radius: 18px !important;
  color: #f8fafc !important;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(8, 10, 14, 0.92)) !important;
  border: 1px solid rgba(245, 180, 70, 0.34) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  font-size: 15px !important;
  font-weight: 1000 !important;
}

.customer-member-logout:hover {
  border-color: rgba(245, 180, 70, 0.70) !important;
}

.customer-member-logout:focus-visible,
.customer-member-action:focus-visible {
  outline: 3px solid rgba(245, 180, 70, 0.48) !important;
  outline-offset: 3px !important;
}

@media (max-width: 520px) {

  .customer-member-actions {
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   ART FIX - Customer Gold Member Rows + Coming Soon Buttons
   תיקון מדויק לפי ה-HTML האמיתי:
   .customer-member-detail-row
   .customer-member-action
   ========================================================= */

/* שורות הפרטים: טלפון / אימייל / כתובת */
.customer-profile-premium .customer-member-detail-row {
  position: relative !important;
  overflow: hidden !important;
  min-height: 58px;
  border-radius: 18px !important;
  padding: 13px 14px !important;

  background:
    linear-gradient(135deg, rgba(7, 9, 14, 0.96), rgba(28, 18, 7, 0.92)) !important;

  border: 1px solid rgba(236, 178, 64, 0.42) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(255, 183, 55, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.24),
    0 0 18px rgba(221, 151, 35, 0.08) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* ברק זכוכית עדין בשורות */
.customer-profile-premium .customer-member-detail-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 92% 20%, rgba(255, 203, 94, 0.18), transparent 34%),
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255, 255, 255, 0.06) 42%,
      rgba(255, 209, 112, 0.13) 52%,
      transparent 68%
    );
  opacity: 0.9;
  pointer-events: none;
}

/* קו זהב קטן בצד ימין של כל שורה */
.customer-profile-premium .customer-member-detail-row::after {
  content: "";
  position: absolute;
  top: 13px;
  bottom: 13px;
  right: 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff0b8, #d99016, #8b4b00);
  box-shadow: 0 0 12px rgba(244, 181, 55, 0.45);
  pointer-events: none;
}

/* האייקון בתוך השורה */
.customer-profile-premium .customer-member-detail-icon {
  position: relative;
  z-index: 1;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 14px !important;

  background:
    linear-gradient(135deg, rgba(255, 196, 72, 0.24), rgba(173, 93, 0, 0.14)) !important;

  border: 1px solid rgba(255, 207, 111, 0.38) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.26),
    0 0 18px rgba(241, 166, 36, 0.14) !important;
}

/* צבע האייקון SVG */
.customer-profile-premium .customer-member-detail-icon svg {
  width: 19px !important;
  height: 19px !important;
  stroke: #ffd36d !important;
  filter: drop-shadow(0 3px 8px rgba(255, 183, 55, 0.38));
}

/* הטקסטים בתוך השורה */
.customer-profile-premium .customer-member-detail-text {
  position: relative;
  z-index: 1;
}

.customer-profile-premium .customer-member-detail-text strong {
  color: rgba(255, 220, 145, 0.9) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
}

.customer-profile-premium .customer-member-detail-text span {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.25;
}

/* אזור הכפתורים למטה */
.customer-profile-premium .customer-member-actions {
  gap: 10px !important;
}

/* הכפתורים: עדכון פרטים / ההזמנות שלי */
.customer-profile-premium .customer-member-action {
  position: relative !important;
  overflow: hidden !important;
  min-height: 56px !important;
  border-radius: 18px !important;

  background:
    linear-gradient(135deg, rgba(9, 12, 20, 0.96), rgba(38, 24, 7, 0.93)) !important;

  border: 1px solid rgba(236, 178, 64, 0.46) !important;

  color: #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(255, 183, 55, 0.08),
    0 12px 26px rgba(0, 0, 0, 0.28),
    0 0 20px rgba(221, 151, 35, 0.09) !important;

  opacity: 1 !important;
  cursor: not-allowed !important;
  transform: translateZ(0);
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* הכפתור הכתום הראשי - להפוך אותו גם ליוקרתי שחור/זהב */
.customer-profile-premium .customer-member-action-main {
  background:
    linear-gradient(135deg, rgba(16, 18, 25, 0.98), rgba(74, 42, 5, 0.96)),
    radial-gradient(circle at top right, rgba(255, 194, 75, 0.22), transparent 42%) !important;

  border-color: rgba(255, 204, 105, 0.58) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 30px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(245, 170, 38, 0.16) !important;
}

/* ברק זכוכית בכפתורים */
.customer-profile-premium .customer-member-action::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 18%, rgba(255, 218, 132, 0.2), transparent 34%),
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.07) 42%,
      rgba(255, 211, 112, 0.15) 53%,
      transparent 68%
    );
  opacity: 0.85;
  pointer-events: none;
}

/* פס זהב תחתון בכפתורים */
.customer-profile-premium .customer-member-action::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 211, 112, 0.75), transparent);
  pointer-events: none;
}

/* טקסט הכפתור */
.customer-profile-premium .customer-member-action {
  font-weight: 950 !important;
  letter-spacing: -0.02em;
}

/* "בקרוב" */
.customer-profile-premium .customer-member-action span {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 3px;
  color: rgba(255, 222, 151, 0.88) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

/* הטקסט הראשי מעל בקרוב */
.customer-profile-premium .customer-member-action {
  font-size: 14px !important;
}

/* כפתור התנתקות - יישור לעיצוב */
.customer-profile-premium .customer-member-logout {
  position: relative !important;
  overflow: hidden !important;

  background:
    linear-gradient(135deg, rgba(9, 12, 20, 0.98), rgba(20, 14, 8, 0.95)) !important;

  border: 1px solid rgba(236, 178, 64, 0.48) !important;
  color: #fff7df !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 26px rgba(0, 0, 0, 0.26),
    0 0 18px rgba(221, 151, 35, 0.1) !important;
}

/* פוקוס נגיש - חשוב למקלדת */
.customer-profile-premium .customer-member-action:focus-visible,
.customer-profile-premium .customer-member-logout:focus-visible {
  outline: 3px solid rgba(255, 211, 112, 0.85) !important;
  outline-offset: 3px !important;
}

/* מובייל */
@media (max-width: 520px) {
  .customer-profile-premium .customer-member-detail-row {
    min-height: 56px;
    padding: 12px 13px !important;
    border-radius: 17px !important;
  }

  .customer-profile-premium .customer-member-detail-icon {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  .customer-profile-premium .customer-member-action {
    min-height: 54px !important;
    border-radius: 17px !important;
  }
}
/* =========================================================
   ART FIX 2 - Gold Member Full Premium Mobile Polish
   תיקון: קוביות סטטיסטיקה, מעטפת השורות, ריווח עליון במובייל
   ========================================================= */

/* החלון עצמו - שיהיה גלילה פנימית נקייה אם המסך נמוך */
.customer-auth-card {
  max-height: 92vh !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
}

/* כרטיס הזהב העליון - פחות דחוס */

/* השורה העליונה בתוך כרטיס הזהב */

/* תאריך הצטרפות */

/* תג מנוי זהב */

/* קוביות סטטיסטיקה: נקודות / הזמנות / הטבות */

/* קוביית נקודות זהב - קצת יותר מודגשת */

/* ברק בתוך קוביות הסטטיסטיקה */

/* המעטפת של טלפון / אימייל / כתובת - להוריד את הלבן */
.customer-profile-premium .customer-profile-info.customer-member-details {
  background:
    linear-gradient(135deg, rgba(245, 247, 252, 0.08), rgba(255, 216, 138, 0.08)) !important;

  border: 1px solid rgba(236, 178, 64, 0.28) !important;
  border-radius: 22px !important;
  padding: 10px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.2) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* כפתורי בקרוב - סידור טקסט יותר נקי */
.customer-profile-premium .customer-member-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

/* שלא ייחתך הכפתור התחתון במסך נמוך */
.customer-profile-premium .customer-member-logout {
  margin-bottom: 12px !important;
}

/* מובייל צר */
@media (max-width: 520px) {

  .customer-profile-premium .customer-member-actions {
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   BODEK - Customer Member Buttons Real Panels
   כפתורי אזור אישי פעילים: עדכון פרטים + ההזמנות שלי
   ========================================================= */

.customer-profile-premium .customer-member-action {
  cursor: pointer !important;
  pointer-events: auto !important;
}

.customer-profile-premium .customer-member-action:disabled {
  cursor: pointer !important;
  pointer-events: auto !important;
}

.customer-profile-premium .customer-member-panel {
  margin-top: 12px;
  padding: 14px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(8, 10, 16, 0.96), rgba(35, 22, 7, 0.94)),
    radial-gradient(circle at top right, rgba(255, 204, 91, 0.16), transparent 42%);
  border: 1px solid rgba(236, 178, 64, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(221, 151, 35, 0.08);
  color: #fff7df;
}

.customer-profile-premium .customer-member-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.customer-profile-premium .customer-member-panel-head strong {
  font-size: 16px;
  font-weight: 950;
  color: #ffffff;
}

.customer-profile-premium .customer-member-panel-close {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255, 211, 112, 0.42);
  background: rgba(255, 255, 255, 0.08);
  color: #ffe7a6;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}

.customer-profile-premium .customer-member-edit-form {
  display: grid;
  gap: 10px;
}

.customer-profile-premium .customer-member-edit-form .customer-auth-label {
  color: rgba(255, 222, 151, 0.9) !important;
  font-weight: 900;
}

.customer-profile-premium .customer-member-edit-form .customer-auth-input {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 211, 112, 0.28) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

.customer-profile-premium .customer-member-edit-form .customer-auth-input::placeholder {
  color: rgba(255, 235, 190, 0.55);
}

.customer-profile-premium .customer-gold-save-btn {
  margin-top: 4px;
  background:
    linear-gradient(135deg, #fff0b8, #d99016, #8b4b00) !important;
  color: #111827 !important;
  border: none !important;
  box-shadow:
    0 12px 26px rgba(217, 144, 22, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

.customer-profile-premium .customer-orders-content {
  display: grid;
  gap: 10px;
}

.customer-profile-premium .customer-member-action:focus-visible,
.customer-profile-premium .customer-member-panel-close:focus-visible,
.customer-profile-premium .customer-gold-save-btn:focus-visible {
  outline: 3px solid rgba(255, 211, 112, 0.9) !important;
  outline-offset: 3px !important;
}
/* =========================================================
   BODEK - Back Button Inside Customer Member Panels
   כפתור חזור פנימי למסכי עדכון פרטים / ההזמנות שלי
   ========================================================= */

.customer-profile-premium .customer-member-panel-head {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
}

.customer-profile-premium .customer-member-panel-head strong {
  text-align: center !important;
}

.customer-profile-premium .customer-member-panel-back {
  min-width: 64px;
  height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 211, 112, 0.42);
  background:
    linear-gradient(135deg, rgba(8, 10, 16, 0.94), rgba(62, 38, 7, 0.88));
  color: #ffe7a6;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.22);
}

.customer-profile-premium .customer-member-panel-back:hover {
  border-color: rgba(255, 218, 132, 0.72);
}

.customer-profile-premium .customer-member-panel-back:focus-visible {
  outline: 3px solid rgba(255, 211, 112, 0.9);
  outline-offset: 3px;
}
/* =========================================================
   ART — שלב 1: אזור אישי פרימיום בלבד
   מטרה:
   - חלון צף אמיתי, לא יורד לסוף האתר
   - מראה איכותי, אמיתי, לא מצועצע
   - שמירה על נגישות ופוקוס מקלדת
   - התאמה חזקה למובייל
   ========================================================= */


/* שכבת רקע של האזור האישי */
#customerAuthOverlay.customer-auth-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100vw !important;
  height: 100dvh !important;
  padding: 16px !important;
  margin: 0 !important;

  background:
    radial-gradient(circle at 50% 8%, rgba(249, 115, 22, 0.10), transparent 34%),
    rgba(4, 6, 10, 0.72) !important;

  backdrop-filter: blur(12px) saturate(0.95) !important;
  -webkit-backdrop-filter: blur(12px) saturate(0.95) !important;

  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

/* כשהחלון סגור */
#customerAuthOverlay.customer-auth-overlay.hidden,
#customerAuthOverlay.customer-auth-overlay[aria-hidden="true"] {
  display: none !important;
}


/* הכרטיס המרכזי */
#customerAuthOverlay .customer-auth-card {
  position: relative !important;

  width: min(520px, 100%) !important;
  max-width: 520px !important;
  max-height: min(88dvh, 760px) !important;

  margin: 0 auto !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
  direction: rtl !important;
  text-align: right !important;

  color: #f8fafc !important;

  background:
    radial-gradient(circle at 85% 0%, rgba(245, 158, 11, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(22, 25, 31, 0.98), rgba(8, 10, 14, 0.985)) !important;

  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 30px !important;

  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;

  transform: none !important;
}


/* ראש החלון */
#customerAuthOverlay .customer-auth-head {
  flex: 0 0 auto !important;

  padding: 20px 22px 16px !important;

  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)) !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}

#customerAuthOverlay .customer-auth-head h2,
#customerAuthTitle {
  margin: 0 !important;

  color: #ffffff !important;

  font-size: clamp(25px, 5vw, 34px) !important;
  line-height: 1.08 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.03em !important;

  text-shadow: none !important;
}

#customerAuthOverlay .customer-auth-head p,
#customerAuthSubtitle {
  margin: 8px 0 0 !important;

  max-width: 390px !important;

  color: rgba(248, 250, 252, 0.72) !important;

  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 750 !important;

  text-shadow: none !important;
}


/* כפתור סגירה */
#customerAuthOverlay .customer-auth-close {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  padding: 0 !important;

  border-radius: 16px !important;

  display: grid !important;
  place-items: center !important;

  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow: none !important;

  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

#customerAuthOverlay .customer-auth-close:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}


/* גלילה פנימית נקייה */
#customerAuthOverlay .customer-auth-card {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(249, 115, 22, 0.55) rgba(255, 255, 255, 0.06) !important;
}

#customerAuthOverlay .customer-auth-card::-webkit-scrollbar {
  width: 8px !important;
}

#customerAuthOverlay .customer-auth-card::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04) !important;
}

#customerAuthOverlay .customer-auth-card::-webkit-scrollbar-thumb {
  background: rgba(249, 115, 22, 0.55) !important;
  border-radius: 999px !important;
}


/* טפסי התחברות/הרשמה */
#customerAuthOverlay .customer-auth-tabs {
  padding: 14px 18px 0 !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

#customerAuthOverlay .customer-auth-tab {
  min-height: 44px !important;
  border-radius: 15px !important;

  color: rgba(248, 250, 252, 0.78) !important;
  background: rgba(255, 255, 255, 0.065) !important;
  border: 1px solid rgba(255, 255, 255, 0.105) !important;

  font-size: 14px !important;
  font-weight: 950 !important;
}

#customerAuthOverlay .customer-auth-tab.active {
  color: #ffffff !important;
  background:
    linear-gradient(135deg, #f97316, #ea580c) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 12px 26px rgba(249, 115, 22, 0.20) !important;
}

#customerAuthOverlay .customer-auth-form {
  padding: 16px 18px 22px !important;
}

#customerAuthOverlay .customer-auth-label {
  display: block !important;

  margin: 0 0 6px !important;

  color: rgba(248, 250, 252, 0.80) !important;

  font-size: 13px !important;
  font-weight: 950 !important;
}

#customerAuthOverlay .customer-auth-input {
  width: 100% !important;
  min-height: 52px !important;

  margin: 0 0 12px !important;
  padding: 13px 14px !important;

  color: #111827 !important;
  background: #ffffff !important;

  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 16px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;

  font-size: 16px !important;
  font-weight: 800 !important;
  outline: none !important;
}

#customerAuthOverlay .customer-auth-input:focus {
  border-color: rgba(249, 115, 22, 0.65) !important;
  box-shadow:
    0 0 0 4px rgba(249, 115, 22, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

#customerAuthOverlay .customer-auth-two-cols {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

#customerAuthOverlay .customer-auth-three-cols {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 10px !important;
}

#customerAuthOverlay .customer-auth-main-btn {
  width: 100% !important;
  min-height: 54px !important;

  border-radius: 18px !important;

  font-size: 16px !important;
  font-weight: 1000 !important;
}

#customerAuthOverlay .customer-auth-main-btn {
  color: #ffffff !important;
  background:
    linear-gradient(135deg, #f97316, #ea580c) !important;
  box-shadow: 0 14px 28px rgba(249, 115, 22, 0.22) !important;
}


/* =========================================================
   אזור אישי מחובר — מנוי זהב
   ========================================================= */

#customerAuthOverlay #customerProfileBox {
  padding: 16px 18px 20px !important;

  display: grid !important;
  gap: 12px !important;

  color: #f8fafc !important;
}

#customerProfileBox.hidden {
  display: none !important;
}


/* כרטיס מנוי זהב עליון */


/* שורת תג ותאריך */


/* שם הלקוח */


/* קוביות סטטיסטיקה */


/* שורות פרטי לקוח */
#customerProfileBox .customer-profile-info {
  padding: 10px !important;

  border-radius: 22px !important;

  display: grid !important;
  gap: 9px !important;

  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(226, 232, 240, 0.96) !important;

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
}

#customerProfileBox .customer-member-detail-row {
  min-height: 58px !important;
  padding: 10px !important;

  border-radius: 17px !important;

  display: grid !important;
  grid-template-columns: 40px 1fr !important;
  align-items: center !important;
  gap: 10px !important;

  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;

  box-shadow: none !important;
}

#customerProfileBox .customer-member-detail-row::before,
#customerProfileBox .customer-member-detail-row::after {
  display: none !important;
  content: none !important;
}

#customerProfileBox .customer-member-detail-icon {
  width: 40px !important;
  height: 40px !important;

  border-radius: 14px !important;

  display: grid !important;
  place-items: center !important;

  color: #c2410c !important;
  background: #fff7ed !important;
  border: 1px solid rgba(249, 115, 22, 0.18) !important;
}

#customerProfileBox .customer-member-detail-icon svg {
  width: 21px !important;
  height: 21px !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#customerProfileBox .customer-member-detail-text {
  min-width: 0 !important;

  display: grid !important;
  gap: 2px !important;
}

#customerProfileBox .customer-member-detail-text strong {
  color: #64748b !important;

  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 1000 !important;
}

#customerProfileBox .customer-member-detail-text span {
  color: #111827 !important;

  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;

  overflow-wrap: anywhere !important;
}


/* כפתורי פעולה */
#customerProfileBox .customer-member-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

#customerProfileBox .customer-member-action,
#customerProfileBox .customer-member-logout,
#customerProfileBox .customer-member-panel-back,
#customerProfileBox .customer-member-panel-close,
#customerProfileBox .customer-gold-save-btn {
  min-height: 54px !important;

  border-radius: 18px !important;

  font-weight: 1000 !important;
}

#customerProfileBox .customer-member-action {
  padding: 9px 10px !important;

  display: grid !important;
  place-items: center !important;
  gap: 2px !important;

  color: #111827 !important;
  background: #ffffff !important;

  border: 1px solid rgba(226, 232, 240, 0.96) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12) !important;

  font-size: 14px !important;
  text-align: center !important;
}

#customerProfileBox .customer-member-action-main {
  color: #ffffff !important;
  background:
    linear-gradient(135deg, #f97316, #ea580c) !important;

  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 14px 28px rgba(249, 115, 22, 0.22) !important;
}

#customerProfileBox .customer-member-action span {
  font-size: 11px !important;
  font-weight: 850 !important;
  opacity: 0.72 !important;
}

#customerProfileBox .customer-member-logout {
  width: 100% !important;

  color: #f8fafc !important;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(8, 10, 14, 0.92)) !important;

  border: 1px solid rgba(245, 180, 70, 0.34) !important;
  box-shadow: none !important;

  font-size: 15px !important;
}


/* פאנלים פנימיים באזור האישי */
#customerProfileBox .customer-member-panel {
  padding: 12px !important;

  border-radius: 22px !important;

  color: #111827 !important;
  background: #ffffff !important;

  border: 1px solid rgba(226, 232, 240, 0.96) !important;
}

#customerProfileBox .customer-member-panel.hidden {
  display: none !important;
}

#customerProfileBox .customer-member-panel-head {
  margin-bottom: 12px !important;

  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
}

#customerProfileBox .customer-member-panel-head strong {
  color: #111827 !important;

  text-align: center !important;

  font-size: 17px !important;
  font-weight: 1000 !important;
}

#customerProfileBox .customer-member-panel-back,
#customerProfileBox .customer-member-panel-close {
  min-height: 44px !important;
  padding: 0 12px !important;

  color: #111827 !important;
  background: #f3f4f6 !important;

  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
}


/* נגישות — פוקוס ברור */
#customerAuthOverlay button:focus-visible,
#customerAuthOverlay input:focus-visible,
#customerAuthOverlay select:focus-visible,
#customerAuthOverlay textarea:focus-visible {
  outline: 3px solid rgba(249, 115, 22, 0.72) !important;
  outline-offset: 3px !important;
}


/* מובייל */
@media (max-width: 768px) {
  #customerAuthOverlay.customer-auth-overlay {
    padding: 10px !important;
    align-items: center !important;
  }

  #customerAuthOverlay .customer-auth-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 26px !important;
  }

  #customerAuthOverlay .customer-auth-head {
    padding: 17px 16px 13px !important;
  }

  #customerAuthOverlay .customer-auth-head h2,
  #customerAuthTitle {
    font-size: clamp(24px, 7vw, 31px) !important;
  }

  #customerAuthOverlay .customer-auth-head p,
  #customerAuthSubtitle {
    font-size: 13px !important;
  }

  #customerAuthOverlay #customerProfileBox {
    padding: 14px 14px 16px !important;
    gap: 10px !important;
  }

  #customerProfileBox .customer-member-actions {
    grid-template-columns: 1fr !important;
  }

  #customerAuthOverlay .customer-auth-two-cols,
  #customerAuthOverlay .customer-auth-three-cols {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 390px) {
  #customerAuthOverlay.customer-auth-overlay {
    padding: 8px !important;
  }

  #customerAuthOverlay .customer-auth-card {
    max-height: calc(100dvh - 16px) !important;
    border-radius: 24px !important;
  }

  #customerProfileBox .customer-member-detail-row {
    grid-template-columns: 36px 1fr !important;
  }

  #customerProfileBox .customer-member-detail-icon {
    width: 36px !important;
    height: 36px !important;
  }
}
/* =========================================================
   ART — תיקון 1.1: סידור ראש האזור האישי
   מטרה:
   - למנוע חפיפה בין הכותרת לכרטיס מנוי זהב
   - להשאיר חלון איכותי, נקי ומקצועי
   - לא לגעת ב-JS ולא לשבור נגישות
   ========================================================= */


/* כאשר האזור האישי המחובר מוצג — הראש נהיה קומפקטי */
#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-auth-head {
  position: relative !important;
  flex: 0 0 auto !important;

  min-height: 64px !important;
  padding: 12px 16px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)) !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}


/* עוטף הכותרת — שלא יעלה על האיקס */
#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-auth-head > div {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  padding-left: 8px !important;
}


/* הכותרת העליונה באזור האישי — קטנה ונקייה */
#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) #customerAuthTitle,
#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-auth-head h2 {
  margin: 0 !important;

  color: #ffffff !important;

  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.02em !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  text-align: right !important;
  text-shadow: none !important;
}


/* במצב מחובר אין צורך במשפט הארוך למעלה — הוא יוצר עומס וחפיפה */
#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) #customerAuthSubtitle,
#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-auth-head p {
  display: none !important;
}


/* כפתור סגירה — קבוע, נקי, לא נכנס בכותרת */
#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-auth-close {
  position: relative !important;
  inset: auto !important;

  flex: 0 0 auto !important;

  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 15px !important;

  display: grid !important;
  place-items: center !important;

  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;

  box-shadow: none !important;

  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 700 !important;

  transform: none !important;
}


/* גוף האזור האישי — מתחיל מסודר מתחת לראש */
#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) #customerProfileBox {
  padding: 14px 16px 18px !important;
  margin: 0 !important;

  display: grid !important;
  gap: 12px !important;
}


/* כרטיס הזהב — לא להידחף מתחת לכותרת */
#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-member-hero {
  margin: 0 !important;
  padding: 15px !important;

  border-radius: 23px !important;

  overflow: hidden !important;
}


/* שורת התג והתאריך — שלא יידחסו */
#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-member-topline {
  margin-bottom: 13px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;

  flex-wrap: wrap !important;
}


/* שם הלקוח והאייקון — יישור נקי */
#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-member-main {
  display: grid !important;
  grid-template-columns: 52px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
}


/* האייקון הכתום בכרטיס */
#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-member-avatar {
  width: 52px !important;
  height: 52px !important;

  border-radius: 18px !important;

  display: grid !important;
  place-items: center !important;

  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  box-shadow: 0 12px 26px rgba(249, 115, 22, 0.24) !important;
}


/* שם וברכה — בלי חפיפה */
#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-member-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-member-hello {
  color: #ffffff !important;

  font-size: 19px !important;
  line-height: 1.22 !important;
  font-weight: 1000 !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-member-subtitle {
  color: rgba(255, 255, 255, 0.76) !important;

  font-size: 12.5px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
}


/* קוביות הסטטיסטיקה — שלא יהיו גבוהות מדי במובייל */
#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-member-stats {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-member-stat {
  min-height: 56px !important;
  padding: 10px 13px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  text-align: right !important;
}


/* מובייל קטן מאוד */
@media (max-width: 390px) {
  #customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-auth-head {
    min-height: 58px !important;
    padding: 10px 12px !important;
  }

  #customerAuthOverlay:has(#customerProfileBox:not(.hidden)) #customerAuthTitle,
  #customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-auth-head h2 {
    font-size: 20px !important;
  }

  #customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-auth-close {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
  }

  #customerAuthOverlay:has(#customerProfileBox:not(.hidden)) #customerProfileBox {
    padding: 12px !important;
  }

  #customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-member-main {
    grid-template-columns: 48px 1fr !important;
    gap: 10px !important;
  }

  #customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-member-avatar {
    width: 48px !important;
    height: 48px !important;
  }

  #customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-member-hello {
    font-size: 18px !important;
  }
}
/* =========================================================
   ART — קטגוריות פרימיום מלבניות
   סגנון: כהה, מלבני, איכותי, לא גדול מדי
   ========================================================= */

/* רשת הקטגוריות */
#categories.categories-grid,
#subcategories.categories-grid {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.8vw, 18px);
}

/* כרטיס קטגוריה */
#categories .category-card,
#subcategories .category-card,
#categories .all-products-card,
#subcategories .all-products-card {
  position: relative;
  overflow: hidden;

  min-height: clamp(145px, 31vw, 178px);
  border-radius: 22px;

  background:
    linear-gradient(180deg, rgba(25, 27, 31, 0.96), rgba(9, 10, 13, 0.98));

  border: 1px solid rgba(255, 255, 255, 0.13);

  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  cursor: pointer;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* ביטול השכבה הישנה */
#categories .category-card::before,
#subcategories .category-card::before,
#categories .all-products-card::before,
#subcategories .all-products-card::before {
  display: none !important;
  content: none !important;
}

/* מעבר עדין */
#categories .category-card:hover,
#subcategories .category-card:hover,
#categories .all-products-card:hover,
#subcategories .all-products-card:hover {
  transform: translateY(-2px);
  border-color: rgba(249, 115, 22, 0.42);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(249, 115, 22, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* אזור התמונה */
#categories .category-image-wrap,
#subcategories .category-image-wrap,
#categories .all-products-card .category-image-wrap,
#subcategories .all-products-card .category-image-wrap {
  position: relative;
  z-index: 1;

  height: clamp(96px, 22vw, 126px);
  min-height: unset;
  aspect-ratio: auto;

  padding: 14px 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at 50% 35%, rgba(249, 115, 22, 0.14), transparent 55%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));

  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* תמונת הקטגוריה */
#categories .category-image-wrap img,
#subcategories .category-image-wrap img {
  width: 100%;
  height: 100%;

  max-width: 138px;
  max-height: 105px;

  object-fit: contain;

  transform: translateZ(0);
  filter:
    drop-shadow(0 14px 20px rgba(0, 0, 0, 0.34))
    saturate(1.05);
}

/* החלק של השם */
#categories .category-body,
#subcategories .category-body,
#categories .all-products-card .category-body,
#subcategories .all-products-card .category-body {
  position: relative;
  z-index: 2;

  min-height: 50px;
  padding: 10px 14px 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  background:
    linear-gradient(180deg, rgba(18, 20, 24, 0.98), rgba(10, 11, 14, 0.98));

  border-top: none;
}

/* שם הקטגוריה */
#categories .category-name,
#subcategories .category-name,
#categories .all-products-card .category-name,
#subcategories .all-products-card .category-name {
  min-height: unset;
  margin: 0;
  padding: 0;

  display: block;

  color: #f8fafc;

  font-size: clamp(14px, 3.2vw, 17px);
  line-height: 1.2;
  font-weight: 950;

  text-align: right;
  text-shadow: none;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* עיגול כתום קטן כמו באפליקציה */
#categories .category-body::before,
#subcategories .category-body::before,
#categories .all-products-card .category-body::before,
#subcategories .all-products-card .category-body::before {
  content: "›";

  width: 30px;
  min-width: 30px;
  height: 30px;

  border-radius: 999px;

  display: grid;
  place-items: center;

  color: #ffffff;
  background: linear-gradient(135deg, #f97316, #ea580c);

  font-size: 24px;
  line-height: 1;
  font-weight: 900;

  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.24);

  transform: rotate(180deg);
}

/* תת־קטגוריות יקבלו אותו סגנון אבל טיפה יותר נקי */
#subcategories .category-card {
  min-height: clamp(136px, 28vw, 166px);
}

/* מובייל קטן */
@media (max-width: 420px) {
  #categories.categories-grid,
  #subcategories.categories-grid {
    gap: 10px;
  }

  #categories .category-card,
  #subcategories .category-card,
  #categories .all-products-card,
  #subcategories .all-products-card {
    border-radius: 19px;
    min-height: 138px;
  }

  #categories .category-image-wrap,
  #subcategories .category-image-wrap {
    height: 90px;
    padding: 12px;
  }

  #categories .category-image-wrap img,
  #subcategories .category-image-wrap img {
    max-height: 82px;
  }

  #categories .category-body,
  #subcategories .category-body {
    min-height: 46px;
    padding: 9px 11px;
  }

  #categories .category-name,
  #subcategories .category-name {
    font-size: 13.5px;
  }

  #categories .category-body::before,
  #subcategories .category-body::before {
    width: 27px;
    min-width: 27px;
    height: 27px;
    font-size: 21px;
  }
}

/* טאבלט ומחשב — שלא יגדל מוגזם */
@media (min-width: 680px) {
  #categories.categories-grid,
  #subcategories.categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 860px;
  }

  #categories .category-card,
  #subcategories .category-card {
    min-height: 168px;
  }
}

@media (min-width: 1100px) {
  #categories.categories-grid,
  #subcategories.categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 900px;
  }
}
/* =========================================================
   ART — קטגוריות מלבניות FORCE FINAL
   מדביקים הכי למטה בקובץ.
   מנצח את כל בלוקי הבועות הישנים.
   ========================================================= */

/* רשת */
body #categories.categories-grid,
body #subcategories.categories-grid {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(12px, 2.8vw, 18px) !important;
}

/* הכרטיס עצמו — מחזיר כרטיס מלבני אמיתי */
body #categories.categories-grid > .card.category-card,
body #categories.categories-grid > article.card.category-card,
body #categories .card.category-card,
body #categories .category-card,
body #subcategories.categories-grid > .card.category-card,
body #subcategories.categories-grid > article.card.category-card,
body #subcategories .card.category-card,
body #subcategories .category-card {
  position: relative !important;

  width: 100% !important;
  height: auto !important;
  min-height: clamp(146px, 31vw, 178px) !important;

  padding: 0 !important;
  margin: 0 !important;

  display: block !important;
  overflow: hidden !important;

  border-radius: 22px !important;

  background:
    linear-gradient(180deg, rgba(25, 27, 31, 0.98), rgba(8, 10, 14, 0.99)) !important;
  background-color: #111318 !important;

  border: 1px solid rgba(255, 255, 255, 0.14) !important;

  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

  outline: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  transform: none !important;
}

/* ביטול כל שכבות הזכוכית/רוחות רפאים */
body #categories .card.category-card::before,
body #categories .card.category-card::after,
body #categories .category-card::before,
body #categories .category-card::after,
body #subcategories .card.category-card::before,
body #subcategories .card.category-card::after,
body #subcategories .category-card::before,
body #subcategories .category-card::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* אזור התמונה — כבר לא עיגול */
body #categories .card.category-card > .category-image-wrap,
body #categories .category-card > .category-image-wrap,
body #subcategories .card.category-card > .category-image-wrap,
body #subcategories .category-card > .category-image-wrap {
  position: relative !important;
  z-index: 1 !important;

  width: 100% !important;
  height: clamp(94px, 22vw, 126px) !important;
  min-height: 0 !important;
  max-height: none !important;

  aspect-ratio: auto !important;

  padding: 14px 16px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 0 !important;

  background:
    radial-gradient(circle at 50% 35%, rgba(249, 115, 22, 0.14), transparent 55%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)) !important;
  background-color: transparent !important;

  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;

  box-shadow: none !important;

  overflow: hidden !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* התמונה עצמה — מבטלים border-radius 50/object-cover */
body #categories .card.category-card > .category-image-wrap img,
body #categories .category-card > .category-image-wrap img,
body #subcategories .card.category-card > .category-image-wrap img,
body #subcategories .category-card > .category-image-wrap img {
  width: 100% !important;
  height: 100% !important;

  max-width: 138px !important;
  max-height: 105px !important;

  padding: 0 !important;
  margin: 0 auto !important;

  object-fit: contain !important;

  border-radius: 0 !important;

  background: transparent !important;

  transform: none !important;

  filter:
    drop-shadow(0 14px 20px rgba(0, 0, 0, 0.34))
    saturate(1.05) !important;
}

/* גוף הכרטיס — פס תחתון כמו באפליקציה */
body #categories .card.category-card > .category-body,
body #categories .category-card > .category-body,
body #subcategories .card.category-card > .category-body,
body #subcategories .category-card > .category-body {
  position: relative !important;
  z-index: 2 !important;

  width: 100% !important;
  min-height: 50px !important;

  padding: 10px 14px 12px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;

  background:
    linear-gradient(180deg, rgba(18, 20, 24, 0.99), rgba(10, 11, 14, 0.99)) !important;
  background-color: #101216 !important;

  border: none !important;
  border-top: none !important;
  border-bottom: none !important;

  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* שם הקטגוריה — לא תגית קטנה */
body #categories .card.category-card .category-name,
body #categories .category-card .category-name,
body #subcategories .card.category-card .category-name,
body #subcategories .category-card .category-name {
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  color: #f8fafc !important;
  background: transparent !important;
  background-color: transparent !important;

  border: none !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  font-size: clamp(14px, 3.2vw, 17px) !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;

  text-align: right !important;
  text-shadow: none !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  transform: none !important;
}

/* מבטל פס/עיטורים ישנים על שם */
body #categories .category-name::before,
body #categories .category-name::after,
body #subcategories .category-name::before,
body #subcategories .category-name::after {
  content: none !important;
  display: none !important;
}

/* עיגול כתום קטן */
body #categories .card.category-card > .category-body::before,
body #categories .category-card > .category-body::before,
body #subcategories .card.category-card > .category-body::before,
body #subcategories .category-card > .category-body::before {
  content: "›" !important;

  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;

  border-radius: 999px !important;

  display: grid !important;
  place-items: center !important;

  color: #ffffff !important;
  background: linear-gradient(135deg, #f97316, #ea580c) !important;

  border: none !important;

  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.24) !important;

  transform: rotate(180deg) !important;
}

/* מסתיר הערת משנה בתוך כרטיסים, אם קיימת */
body #categories .category-card .section-note,
body #subcategories .category-card .section-note {
  display: none !important;
}

/* מובייל קטן */
@media (max-width: 420px) {
  body #categories.categories-grid,
  body #subcategories.categories-grid {
    gap: 10px !important;
  }

  body #categories .card.category-card,
  body #categories .category-card,
  body #subcategories .card.category-card,
  body #subcategories .category-card {
    min-height: 138px !important;
    border-radius: 19px !important;
  }

  body #categories .card.category-card > .category-image-wrap,
  body #categories .category-card > .category-image-wrap,
  body #subcategories .card.category-card > .category-image-wrap,
  body #subcategories .category-card > .category-image-wrap {
    height: 90px !important;
    padding: 12px !important;
  }

  body #categories .card.category-card > .category-image-wrap img,
  body #categories .category-card > .category-image-wrap img,
  body #subcategories .card.category-card > .category-image-wrap img,
  body #subcategories .category-card > .category-image-wrap img {
    max-height: 82px !important;
  }

  body #categories .card.category-card > .category-body,
  body #categories .category-card > .category-body,
  body #subcategories .card.category-card > .category-body,
  body #subcategories .category-card > .category-body {
    min-height: 46px !important;
    padding: 9px 11px !important;
  }

  body #categories .category-card .category-name,
  body #subcategories .category-card .category-name {
    font-size: 13.5px !important;
  }

  body #categories .category-card > .category-body::before,
  body #subcategories .category-card > .category-body::before {
    width: 27px !important;
    min-width: 27px !important;
    height: 27px !important;
    font-size: 21px !important;
  }
}

/* טאבלט/דסקטופ — לא להגדיל מוגזם */
@media (min-width: 680px) {
  body #categories.categories-grid,
  body #subcategories.categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 860px !important;
  }

  body #categories .card.category-card,
  body #categories .category-card,
  body #subcategories .card.category-card,
  body #subcategories .category-card {
    min-height: 168px !important;
  }
}

@media (min-width: 1100px) {
  body #categories.categories-grid,
  body #subcategories.categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 900px !important;
  }
}
/* =========================================================
   CATEGORY IMAGE FULL BLEED
   תמונות קטגוריה ממלאות את כל המלבן
   ========================================================= */

body #categories .category-card > .category-image-wrap,
body #subcategories .category-card > .category-image-wrap {
  padding: 0 !important;
  height: clamp(105px, 24vw, 138px) !important;
  overflow: hidden !important;
  background: #111318 !important;
}

body #categories .category-card > .category-image-wrap img,
body #subcategories .category-card > .category-image-wrap img {
  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center center !important;

  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;

  display: block !important;
}
/* =========================================================
   BODEK - אזור אישי: שינוי כיתוב זהב לשחור
   ========================================================= */

/* טלפון / אימייל / כתובת משלוח */
.customer-profile-premium .customer-member-detail-text strong {
  color: #111827 !important;
}

/* טקסט קטן בתוך הכפתורים, למשל:
   "עריכה מאובטחת" / "מעקב הזמנה" */
.customer-profile-premium .customer-member-action span {
  color: #111827 !important;
  opacity: 1 !important;
}

/* כותרות קטנות בקוביות הסטטיסטיקה */
/* =========================================================
   BODEK - אזור אישי: עוד טקסטים מזהב לשחור
   ========================================================= */

/* טקסט קטן בכפתורי האזור האישי */
.customer-profile-premium .customer-member-action span {
  color: #111827 !important;
  opacity: 1 !important;
}

/* טקסט משני בכרטיס "הזמנה אחרונה" */

/* הודעת "עדיין אין הזמנה..." בתוך פאנל ההזמנות */

/* אם יש עוד כותרות קטנות בזהב בתוך פאנלים */
.customer-profile-premium .customer-member-panel,
.customer-profile-premium .customer-member-panel p,
.customer-profile-premium .customer-member-panel small {
  color: #111827 !important;
}
/* =========================================================
   BODEK FIX - הסתרת התחברות / הרשמה אחרי שהלקוח מחובר
   ========================================================= */

/* כשהאזור האישי מוצג - לא להציג בכלל את הטאבים התחברות/הרשמה */
#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) #customerAuthTabs,
#customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-auth-tabs {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ביטחון נוסף: אם JS נתן hidden לטאבים - הם חייבים להיעלם */
#customerAuthOverlay #customerAuthTabs.hidden,
#customerAuthOverlay .customer-auth-tabs.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
/* =========================================================
   BODEK - אזור אישי: מנוי זהב מימין, התחברות אחרונה משמאל
   ========================================================= */

/* מנוי זהב - צד ימין */

/* התחברות אחרונה - צד שמאל */

/* במובייל לא להפוך לעמודה - להשאיר אחד מימין ואחד משמאל */
@media (max-width: 520px) {
}
/* =========================================================
   BODEK - קיצור וסידור האזור האישי במובייל
   מטרה: שהכרטיס יהיה קצר יותר ולא ייחתך מאחורי הסרגל התחתון
   ========================================================= */

/* החלון עצמו - נותן גלילה פנימית בלי להיתקע מאחורי הסרגל */
#customerAuthOverlay .customer-auth-card {
  max-height: calc(100vh - 96px) !important;
  overflow-y: auto !important;
  padding-bottom: 92px !important;
  scroll-padding-bottom: 110px !important;
}

/* כל אזור הפרופיל - פחות רווחים */

/* הכרטיס העליון של שלום + מנוי */

/* השורה העליונה: מנוי זהב + התחברות אחרונה */

/* התגיות למעלה יותר קטנות */

/* האייקון הכתום בכרטיס העליון */

/* שלום, שם הלקוח */

/* הטקסט שמתחת לשם */

/* קוביות: נקודות זהב / הזמנות / הטבות */

/* קופסת פרטים: טלפון / אימייל / כתובת */
.customer-profile-premium .customer-profile-info.customer-member-details {
  padding: 8px !important;
  gap: 7px !important;
  border-radius: 19px !important;
}

.customer-profile-premium .customer-member-detail-row {
  min-height: 49px !important;
  padding: 8px 10px !important;
  border-radius: 15px !important;
}

.customer-profile-premium .customer-member-detail-icon {
  width: 32px !important;
  height: 32px !important;
  flex-basis: 32px !important;
  border-radius: 12px !important;
}

.customer-profile-premium .customer-member-detail-icon svg {
  width: 17px !important;
  height: 17px !important;
}

.customer-profile-premium .customer-member-detail-text strong {
  font-size: 11px !important;
}

.customer-profile-premium .customer-member-detail-text span {
  font-size: 12.5px !important;
  line-height: 1.2 !important;
}

/* כפתורי עדכון פרטים / ההזמנות שלי */
.customer-profile-premium .customer-member-actions {
  gap: 8px !important;
}

.customer-profile-premium .customer-member-action {
  min-height: 48px !important;
  padding: 7px 9px !important;
  border-radius: 16px !important;
  font-size: 13px !important;
}

.customer-profile-premium .customer-member-action span {
  font-size: 10.5px !important;
  margin-top: 1px !important;
}

/* כפתור התנתקות - שיהיה גלוי מעל הסרגל */
.customer-profile-premium .customer-member-logout {
  min-height: 48px !important;
  margin-top: 4px !important;
  margin-bottom: 34px !important;
  border-radius: 16px !important;
  font-size: 14px !important;
}

/* במובייל רגיל - להשאיר הכל צפוף ונקי */
@media (max-width: 520px) {
  #customerAuthOverlay .customer-auth-card {
    max-height: calc(100vh - 82px) !important;
    padding-bottom: 104px !important;
  }

  .customer-profile-premium .customer-member-actions {
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   BODEK - התחברות אחרונה: תאריך ושעה בשתי שורות
   ========================================================= */
/* =========================================================
   BODEK FIX - התחברות אחרונה לא אליפסה, אלא תג מקצועי
   ========================================================= */

/* כותרת: התחברות אחרונה */

/* תאריך */

/* שעה */
/* =========================================================
   BODEK FIX - טקסטים מעל שדות מילוי פרטים יהיו קריאים
   ========================================================= */

/* הכותרות מעל שדות ההרשמה / עדכון פרטים */
#customerAuthOverlay .customer-auth-label,
#customerAuthOverlay label,
.customer-auth-card .customer-auth-label,
.customer-auth-card label {
  color: #111827 !important;
  opacity: 1 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

/* אם יש טקסט קטן בתוך אזור הטופס */
#customerAuthOverlay .customer-auth-form small,
#customerAuthOverlay .customer-auth-form span,
.customer-auth-card .customer-auth-form small,
.customer-auth-card .customer-auth-form span {
  color: #374151 !important;
  opacity: 1 !important;
}

/* placeholder בתוך השדות - שיהיה ברור אבל לא שחור מדי */
#customerAuthOverlay input::placeholder,
#customerAuthOverlay textarea::placeholder,
.customer-auth-card input::placeholder,
.customer-auth-card textarea::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}

/* טקסט בתוך השדות עצמם */
#customerAuthOverlay input,
#customerAuthOverlay textarea,
.customer-auth-card input,
.customer-auth-card textarea {
  color: #111827 !important;
}
/* =========================================================
   BODEK - CART LIGHT MODE FIXED
   עגלה בהירה קבועה, נקייה, קריאה ופרימיום
   ========================================================= */

/* רק העגלה עצמה - לא טופס ההזמנה עדיין */
#cartDrawerOverlay.cart-drawer-overlay {
  background: rgba(8, 10, 14, 0.56) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* גוף העגלה */
#cartDrawerOverlay .cart-drawer {
  color: #111827 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 248, 251, 0.96)) !important;

  border: 1px solid rgba(226, 232, 240, 0.98) !important;
  box-shadow:
    0 -18px 54px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

  overflow: hidden !important;
}

/* כותרת העגלה */
#cartDrawerOverlay .cart-drawer-head {
  background:
    linear-gradient(180deg, #ffffff, #f8fafc) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.98) !important;
  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

#cartDrawerOverlay .cart-drawer-title {
  color: #111827 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.03em !important;
}

/* כפתור סגירה */
#cartDrawerOverlay #closeCartButton,
#cartDrawerOverlay .close-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 16px !important;

  color: #111827 !important;
  background:
    linear-gradient(145deg, #ffffff, #eef2f7) !important;

  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

  font-size: 24px !important;
  font-weight: 900 !important;
}

/* אזור הפריטים */
#cartDrawerOverlay .cart-items {
  background:
    linear-gradient(180deg, #f8fafc, #f1f5f9) !important;

  padding: 14px 14px 124px !important;
  color: #111827 !important;
}

/* כרטיס מוצר בעגלה */
#cartDrawerOverlay .cart-item {
  background:
    linear-gradient(145deg, #ffffff, #f8fafc) !important;

  border: 1px solid rgba(226, 232, 240, 0.98) !important;
  border-radius: 20px !important;

  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;

  color: #111827 !important;
}

/* תמונת מוצר בעגלה */
#cartDrawerOverlay .cart-item-image {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 14px rgba(15, 23, 42, 0.06) !important;
}

/* שם מוצר */
#cartDrawerOverlay .cart-item-name {
  color: #111827 !important;
  font-weight: 1000 !important;
}

/* מחיר / כמות */
#cartDrawerOverlay .cart-item-price {
  color: #475569 !important;
  font-weight: 850 !important;
}

#cartDrawerOverlay .cart-item-total {
  color: #111827 !important;
  font-weight: 1000 !important;
}

/* כפתורי פלוס מינוס */
#cartDrawerOverlay .qty-box {
  background: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 14px rgba(15, 23, 42, 0.06) !important;
}

#cartDrawerOverlay .qty-btn {
  color: #111827 !important;
  background:
    linear-gradient(145deg, #ffffff, #eef2f7) !important;
  border: 1px solid rgba(203, 213, 225, 0.96) !important;
  box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

#cartDrawerOverlay .qty-btn:hover {
  background:
    linear-gradient(145deg, #ffffff, #fff7ed) !important;
  border-color: rgba(249, 115, 22, 0.48) !important;
}

#cartDrawerOverlay .qty-value {
  color: #111827 !important;
  font-weight: 1000 !important;
}

/* כפתור הסרה */

/* תחתית העגלה */
#cartDrawerOverlay .cart-footer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), #ffffff) !important;

  border-top: 1px solid rgba(226, 232, 240, 0.98) !important;
  box-shadow:
    0 -12px 30px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

/* סיכום מחיר */
#cartDrawerOverlay .cart-summary-title {
  color: #475569 !important;
  font-weight: 900 !important;
}

#cartDrawerOverlay .cart-summary-total {
  color: #111827 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.04em !important;
}

/* כפתור המשך להזמנה */
#cartDrawerOverlay #checkoutButton,
#cartDrawerOverlay .checkout-btn {
  min-height: 56px !important;
  border-radius: 18px !important;

  color: #ffffff !important;
  background:
    linear-gradient(135deg, #f97316, #ea580c) !important;

  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 16px 34px rgba(249, 115, 22, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;

  font-weight: 1000 !important;
}

#cartDrawerOverlay #checkoutButton:hover,
#cartDrawerOverlay .checkout-btn:hover {
  transform: translateY(-1px) !important;
  background:
    linear-gradient(135deg, #fb923c, #f97316) !important;
  box-shadow:
    0 18px 38px rgba(249, 115, 22, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

/* מצב עגלה ריקה */
#cartDrawerOverlay .empty-state {
  background:
    linear-gradient(145deg, #ffffff, #f8fafc) !important;

  color: #111827 !important;
  border: 1px solid rgba(226, 232, 240, 0.98) !important;
  border-radius: 22px !important;

  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;

  font-weight: 950 !important;
}

#cartDrawerOverlay .empty-state div {
  color: #64748b !important;
}

/* נגישות: פוקוס ברור במקלדת */
#cartDrawerOverlay button:focus-visible,
#cartDrawerOverlay .qty-btn:focus-visible,
#cartDrawerOverlay #checkoutButton:focus-visible,
#cartDrawerOverlay #closeCartButton:focus-visible {
  outline: 3px solid rgba(249, 115, 22, 0.55) !important;
  outline-offset: 3px !important;
}

/* מובייל - שהעגלה לא תיחתך מאחורי סרגל תחתון */
@media (max-width: 520px) {
  #cartDrawerOverlay .cart-drawer {
    max-height: calc(100vh - 18px) !important;
    border-radius: 26px 26px 0 0 !important;
  }

  #cartDrawerOverlay .cart-items {
    padding: 12px 12px 138px !important;
  }

  #cartDrawerOverlay .cart-footer {
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }

  #cartDrawerOverlay .cart-item {
    grid-template-columns: 76px 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  #cartDrawerOverlay .cart-item-image {
    width: 76px !important;
    height: 76px !important;
    border-radius: 16px !important;
  }

  #cartDrawerOverlay .cart-item-name {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  #cartDrawerOverlay .cart-summary-total {
    font-size: 25px !important;
  }
}
/* =========================================================
   BODEK FIX - כפתור X קבוע בעגלה במובייל
   מונע חצי איקס / איקס כפול / בריחה מחוץ לכרטיס
   ========================================================= */

/* ראש העגלה חייב להיות נקודת העוגן של האיקס */
#cartDrawerOverlay .cart-drawer-head {
  position: relative !important;
  min-height: 72px !important;
  padding: 18px 58px 16px 18px !important;
}

/* הכותרת נשארת באמצע */
#cartDrawerOverlay .cart-drawer-title {
  width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
}

/* האיקס עצמו - קבוע בפנים, בצד שמאל */
#cartDrawerOverlay #closeCartButton,
#cartDrawerOverlay .cart-drawer-head #closeCartButton,
#cartDrawerOverlay .cart-drawer-head .close-btn {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  bottom: auto !important;

  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  border-radius: 14px !important;
  transform: none !important;

  color: #111827 !important;
  background: linear-gradient(145deg, #ffffff, #eef2f7) !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;

  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  z-index: 5 !important;
}

/* במובייל - לא לתת לאיקס לצאת מהכרטיס */
@media (max-width: 520px) {
  #cartDrawerOverlay .cart-drawer {
    overflow: hidden !important;
  }

  #cartDrawerOverlay .cart-drawer-head {
    min-height: 70px !important;
    padding: 18px 58px 15px 18px !important;
  }

  #cartDrawerOverlay #closeCartButton,
  #cartDrawerOverlay .cart-drawer-head #closeCartButton,
  #cartDrawerOverlay .cart-drawer-head .close-btn {
    top: 13px !important;
    left: 13px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
}
/* =========================================================
   BODEK FINAL FIX - עגלה: X אחד בלבד
   מסתיר כל X כפול ומשאיר רק איקס אחד נקי
   ========================================================= */

#cartDrawerOverlay #closeCartButton {
  position: absolute !important;
  overflow: hidden !important;

  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
}

/* מסתיר כל תוכן פנימי אם יש span / icon / טקסט נוסף */
#cartDrawerOverlay #closeCartButton * {
  display: none !important;
}

/* מבטל אייקון נוסף אם נוצר מ-after */
#cartDrawerOverlay #closeCartButton::after {
  content: none !important;
  display: none !important;
}

/* מציג X אחד בלבד */
#cartDrawerOverlay #closeCartButton::before {
  content: "×" !important;

  position: absolute !important;
  inset: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  color: #111827 !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  text-indent: 0 !important;
}

/* אם בטעות יש עוד כפתור סגירה נוסף בראש העגלה - להסתיר אותו */
#cartDrawerOverlay .cart-drawer-head .close-btn:not(#closeCartButton) {
  display: none !important;
}
/* =========================================================
   CHECKOUT CLEAN FIX - פרטי משלוח נקי, תקנון ברור, X תקין
   ========================================================= */

/* שכבת הרקע */
#checkoutModalOverlay.cart-drawer-overlay {
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  background: rgba(15, 23, 42, 0.58) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* הכרטיס עצמו */
#checkoutModalOverlay > .cart-drawer {
  width: min(94vw, 420px) !important;
  max-width: 420px !important;
  max-height: 86vh !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  background: #fff7ed !important;
  border: 1px solid rgba(249, 115, 22, 0.28) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34) !important;
  color: #111827 !important;
}

/* ראש הכרטיס */
#checkoutModalOverlay .cart-drawer-head {
  position: relative !important;
  min-height: 64px !important;
  padding: 16px 56px 14px !important;
  justify-content: center !important;
  background: linear-gradient(180deg, #fff7ed, #ffedd5) !important;
  border-bottom: 1px solid rgba(249, 115, 22, 0.22) !important;
}

/* כותרת */
#checkoutModalOverlay .cart-drawer-title {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 21px !important;
  font-weight: 1000 !important;
  text-align: center !important;
}

/* X עליון - יציב, בלי חץ ובלי חצי ריבוע */
#checkoutModalOverlay #backToCartButton {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;

  padding: 0 !important;
  margin: 0 !important;
  border-radius: 13px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #111827 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.22) !important;

  font-size: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  overflow: hidden !important;
}

#checkoutModalOverlay #backToCartButton::before {
  content: "×" !important;
  color: #ffffff !important;
  font-size: 27px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

#checkoutModalOverlay #backToCartButton::after {
  content: none !important;
  display: none !important;
}

/* גוף הטופס */
#checkoutModalOverlay > .cart-drawer > div[style*="overflow-y"] {
  padding: 14px !important;
  background: #fff7ed !important;
  overflow-y: auto !important;
}

/* שדות */
#checkoutModalOverlay input:not([type="checkbox"]),
#checkoutModalOverlay select,
#checkoutModalOverlay textarea {
  min-height: 46px !important;
  padding: 11px 13px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.98) !important;
  color: #111827 !important;
  box-shadow: 0 5px 13px rgba(15, 23, 42, 0.055) !important;
  font-size: 14.5px !important;
  font-weight: 850 !important;
}

#checkoutModalOverlay input:not([type="checkbox"]):focus,
#checkoutModalOverlay select:focus,
#checkoutModalOverlay textarea:focus {
  outline: none !important;
  border-color: rgba(249, 115, 22, 0.78) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.16) !important;
}

/* פוטר הסיכום - לא לבן על לבן */
#checkoutModalOverlay .cart-footer {
  padding: 14px !important;
  background: linear-gradient(180deg, #ffedd5, #fed7aa) !important;
  border-top: 1px solid rgba(249, 115, 22, 0.28) !important;
  box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.08) !important;
}

/* כל הטקסטים של הסיכום יהיו קריאים */
#checkoutModalOverlay .cart-footer,
#checkoutModalOverlay .cart-footer *,
#checkoutModalOverlay #sumItems,
#checkoutModalOverlay #sumShipping,
#checkoutModalOverlay #sumTotal {
  color: #111827 !important;
  text-shadow: none !important;
}

/* סה"כ לתשלום */
#checkoutModalOverlay #sumTotal {
  font-size: 22px !important;
  font-weight: 1000 !important;
}

/* קופסת הסכמה לתקנון */
#checkoutModalOverlay .terms-confirm-box {
  margin: 12px 0 12px !important;
  padding: 10px 11px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(249, 115, 22, 0.34) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}

/* שורת ההסכמה */
#checkoutModalOverlay .terms-confirm-label {
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #111827 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 850 !important;
}

/* הצ׳קבוקס */
#checkoutModalOverlay #termsConfirmCheckbox {
  appearance: auto !important;
  -webkit-appearance: auto !important;

  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;

  margin: 0 !important;
  padding: 0 !important;
  accent-color: #f97316 !important;
  flex: 0 0 auto !important;
}

/* טקסט ההסכמה */
#checkoutModalOverlay .terms-confirm-label span {
  color: #111827 !important;
  display: inline !important;
  min-width: 0 !important;
}

/* כפתורי תקנון/פרטיות בתוך הטקסט */
#checkoutModalOverlay .legal-read-link {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;

  padding: 0 !important;
  margin: 0 2px !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  color: #9a3412 !important;
  font: inherit !important;
  font-weight: 1000 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* אזור התקנון שנפתח */
#checkoutModalOverlay .checkout-legal-inline-panel {
  margin: 0 0 12px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(249, 115, 22, 0.26) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
}

#checkoutModalOverlay .checkout-legal-inline-head {
  min-height: 42px !important;
  padding: 9px 11px !important;
  background: #fff7ed !important;
  border-bottom: 1px solid rgba(249, 115, 22, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#checkoutModalOverlay .checkout-legal-inline-head strong {
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 1000 !important;
}

/* אם התקנון אצלך עדיין iframe */

/* אם התקנון אצלך כבר div */
#checkoutModalOverlay .checkout-legal-inline-body {
  max-height: 220px !important;
  overflow-y: auto !important;
  padding: 12px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* כפתור שליחה */
#checkoutModalOverlay #sendOrderBtn {
  width: 100% !important;
  min-height: 52px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #111827, #1f2937, #ea580c) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16) !important;
  font-size: 15.5px !important;
  font-weight: 1000 !important;
}

/* מובייל קטן */
@media (max-width: 520px) {
  #checkoutModalOverlay > .cart-drawer {
    width: min(94vw, 390px) !important;
    max-height: 84vh !important;
  }

  #checkoutModalOverlay .cart-drawer-head {
    min-height: 62px !important;
  }

  #checkoutModalOverlay .cart-drawer-title {
    font-size: 20px !important;
  }

  #checkoutModalOverlay #backToCartButton {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    left: 12px !important;
  }

  #checkoutModalOverlay #backToCartButton::before {
    font-size: 25px !important;
  }

  #checkoutModalOverlay .terms-confirm-label {
    font-size: 11.5px !important;
    gap: 7px !important;
  }
}
/* =========================================================
   FINAL CHECKOUT WHITE FIX - לבן נקי + תקנון פס ישר + צ׳קבוקס מסודר
   ========================================================= */

/* הכרטיס הראשי לבן נקי */
#checkoutModalOverlay > .cart-drawer {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.98) !important;
  border-radius: 26px !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.65) !important;
}

/* ראש הכרטיס לבן */
#checkoutModalOverlay .cart-drawer-head {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: none !important;
}

/* כותרת */
#checkoutModalOverlay .cart-drawer-title {
  color: #111827 !important;
  font-size: 21px !important;
  font-weight: 1000 !important;
}

/* האיקס העליון - X נקי בלי פונט מוזר */
#checkoutModalOverlay #backToCartButton {
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;

  border-radius: 13px !important;
  background: #111827 !important;
  border: none !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18) !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

#checkoutModalOverlay #backToCartButton::before,
#checkoutModalOverlay #backToCartButton::after {
  content: "" !important;
  position: absolute !important;
  width: 16px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
}

#checkoutModalOverlay #backToCartButton::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

#checkoutModalOverlay #backToCartButton::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* גוף הטופס לבן */
#checkoutModalOverlay > .cart-drawer > div[style*="overflow-y"] {
  background: #ffffff !important;
  padding: 14px !important;
}

/* שדות לבנים ונקיים */
#checkoutModalOverlay input:not([type="checkbox"]),
#checkoutModalOverlay select,
#checkoutModalOverlay textarea {
  background: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  color: #111827 !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.045) !important;
}

#checkoutModalOverlay input:not([type="checkbox"]):focus,
#checkoutModalOverlay select:focus,
#checkoutModalOverlay textarea:focus {
  border-color: rgba(249, 115, 22, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.13) !important;
}

/* אזור הסיכום - לבן, לא כתום ולא שמנת */
#checkoutModalOverlay .cart-footer {
  background: #ffffff !important;
  border-top: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 -8px 22px rgba(15, 23, 42, 0.045) !important;
}

/* טקסט הסיכום קריא */
#checkoutModalOverlay .cart-footer,
#checkoutModalOverlay .cart-footer *,
#checkoutModalOverlay #sumItems,
#checkoutModalOverlay #sumShipping,
#checkoutModalOverlay #sumTotal {
  color: #111827 !important;
  text-shadow: none !important;
}

/* קו הפרדה מעל הסה״כ */
#checkoutModalOverlay .cart-footer hr,
#checkoutModalOverlay .cart-footer div[style*="border-top"] {
  border-color: rgba(226, 232, 240, 0.95) !important;
}

/* =========================================================
   תקנון - פס ישר ונקי
   ========================================================= */

#checkoutModalOverlay .terms-confirm-box {
  margin: 12px 0 12px !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* הפס עצמו */
#checkoutModalOverlay .terms-confirm-label {
  min-height: 46px !important;
  padding: 10px 12px !important;

  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;

  direction: rtl !important;

  background: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.045) !important;

  color: #111827 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 850 !important;
}

/* ריבוע האישור - בנוי מחדש, לא חצי לבן */
#checkoutModalOverlay #termsConfirmCheckbox {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: block !important;
  position: relative !important;

  background: #ffffff !important;
  border: 2px solid rgba(249, 115, 22, 0.75) !important;
  border-radius: 7px !important;
  box-shadow: none !important;

  cursor: pointer !important;
}

/* כשהלקוח מסמן */
#checkoutModalOverlay #termsConfirmCheckbox:checked {
  background: #f97316 !important;
  border-color: #f97316 !important;
}

/* סימון V */
#checkoutModalOverlay #termsConfirmCheckbox:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 6px !important;
  height: 11px !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

/* טקסט ההסכמה */
#checkoutModalOverlay .terms-confirm-label span {
  color: #111827 !important;
  display: block !important;
  min-width: 0 !important;
  text-align: right !important;
}

/* קישורי תקנון ופרטיות */
#checkoutModalOverlay .legal-read-link {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;

  padding: 0 !important;
  margin: 0 2px !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  color: #9a3412 !important;
  font: inherit !important;
  font-weight: 1000 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  cursor: pointer !important;
}

/* התקנון שנפתח מתחת - לבן ברור */
#checkoutModalOverlay .checkout-legal-inline-panel {
  margin: 0 0 12px !important;
  border-radius: 14px !important;
  overflow: hidden !important;

  background: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}

#checkoutModalOverlay .checkout-legal-inline-head {
  min-height: 42px !important;
  padding: 9px 11px !important;

  background: #f8fafc !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#checkoutModalOverlay .checkout-legal-inline-head strong {
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 1000 !important;
}

/* כפתור שליחת הזמנה */
#checkoutModalOverlay #sendOrderBtn {
  background: #111827 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16) !important;
}

/* מובייל */
@media (max-width: 520px) {
  #checkoutModalOverlay > .cart-drawer {
    width: min(94vw, 390px) !important;
    max-height: 84vh !important;
  }

  #checkoutModalOverlay .terms-confirm-label {
    min-height: 44px !important;
    padding: 9px 10px !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 8px !important;
    font-size: 11.5px !important;
  }

  #checkoutModalOverlay #termsConfirmCheckbox {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    min-height: 19px !important;
  }
}
/* =========================================================
   FIX REAL - כפתור שלח הזמנה קבוע בתחתית פרטי משלוח
   ========================================================= */

/* הכרטיס עצמו צריך להיות נקודת ייחוס לכפתור */
#checkoutModalOverlay > .cart-drawer {
  position: relative !important;
  padding-bottom: 76px !important;
  overflow: hidden !important;
}

/* אזור התוכן מקבל מקום למטה כדי שהכפתור לא יכסה את התקנון */
#checkoutModalOverlay > .cart-drawer > div[style*="overflow-y"] {
  padding-bottom: 18px !important;
}

/* הכפתור עצמו קבוע בתחתית הכרטיס */
#checkoutModalOverlay #sendOrderBtn {
  position: absolute !important;
  right: 14px !important;
  left: 14px !important;
  bottom: 14px !important;
  z-index: 80 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 13px 18px !important;

  border-radius: 16px !important;
  background: #111827 !important;
  color: #ffffff !important;
  border: none !important;

  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 1000 !important;

  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.20) !important;
  cursor: pointer !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

/* כשהכפתור נעול */
#checkoutModalOverlay #sendOrderBtn:disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
}

/* כדי שהפס של התקנון לא יידבק לכפתור */
#checkoutModalOverlay .terms-confirm-box {
  margin-bottom: 12px !important;
}

/* כשהתקנון נפתח - שלא יאכל את כל המקום */

/* מובייל נמוך */
@media (max-height: 760px) {
  #checkoutModalOverlay > .cart-drawer {
    padding-bottom: 70px !important;
  }

  #checkoutModalOverlay #sendOrderBtn {
    min-height: 48px !important;
    bottom: 11px !important;
  }
}
/* =========================================================
   FIX REAL FINAL - מחזיר את התקנון ומסדר כפתור שליחה בלי absolute
   ========================================================= */

/* מבטל את הניסיון הקודם שהפך את הכפתור למרחף ומסתיר את התקנון */
#checkoutModalOverlay #sendOrderBtn {
  position: static !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;

  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 100% !important;
  min-height: 52px !important;
  margin: 12px 0 0 !important;
  padding: 13px 18px !important;

  align-items: center !important;
  justify-content: center !important;

  border-radius: 16px !important;
  background: #111827 !important;
  color: #ffffff !important;
  border: none !important;

  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 1000 !important;

  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16) !important;
  cursor: pointer !important;
}

/* מחזיר את שורת ההסכמה לתקנון */
#checkoutModalOverlay .terms-confirm-box {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  margin: 12px 0 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* הפס של התקנון */
#checkoutModalOverlay .terms-confirm-label {
  min-height: 46px !important;
  padding: 10px 12px !important;

  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;

  background: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.045) !important;

  color: #111827 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 850 !important;
}

/* ריבוע האישור */
#checkoutModalOverlay #termsConfirmCheckbox {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: block !important;
  position: relative !important;

  background: #ffffff !important;
  border: 2px solid rgba(249, 115, 22, 0.75) !important;
  border-radius: 7px !important;
  box-shadow: none !important;

  cursor: pointer !important;
}

#checkoutModalOverlay #termsConfirmCheckbox:checked {
  background: #f97316 !important;
  border-color: #f97316 !important;
}

#checkoutModalOverlay #termsConfirmCheckbox:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 6px !important;
  height: 11px !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

/* טקסט התקנון */
#checkoutModalOverlay .terms-confirm-label span {
  display: block !important;
  min-width: 0 !important;
  color: #111827 !important;
  text-align: right !important;
}

/* כפתורי תקנון/פרטיות בתוך הטקסט */
#checkoutModalOverlay .legal-read-link {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;

  padding: 0 !important;
  margin: 0 2px !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  color: #9a3412 !important;
  font: inherit !important;
  font-weight: 1000 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  cursor: pointer !important;
}

/* אזור התקנון שנפתח */
#checkoutModalOverlay .checkout-legal-inline-panel {
  margin: 10px 0 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;

  background: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}

/* כשהתקנון סגור - רק הוא מוסתר, לא שורת ההסכמה ולא הכפתור */
#checkoutModalOverlay .checkout-legal-inline-panel.hidden {
  display: none !important;
}

/* גוף התקנון בגלילה */
#checkoutModalOverlay .checkout-legal-inline-body {
  max-height: 160px !important;
  overflow-y: auto !important;
  padding: 12px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* מבטל רווח תחתון מלאכותי מהניסיון הקודם */
#checkoutModalOverlay > .cart-drawer {
  padding-bottom: 0 !important;
}
/* =========================================================
   עילאי מרקט — קטגוריות בהירות FORCE OVERRIDE
   מדביקים הכי למטה ב-style.css
   לא נוגע ברקע האתר
   ========================================================= */

/* כותרות אזור הקטגוריות */
html body .section .section-head .section-title,
html body #categoriesSection .section-title,
html body #subcategoriesSection .section-title {
  color: #111827 !important;
  text-shadow: none !important;
}

html body .section .section-head .section-note,
html body #categoriesSection .section-note,
html body #subcategoriesSection .section-note {
  color: #64748b !important;
  text-shadow: none !important;
}

/* רשת הקטגוריות */
html body main#mainContent #categories.categories-grid,
html body main#mainContent #subcategories.categories-grid {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(12px, 2.8vw, 18px) !important;
}

/* הכרטיס עצמו — לבן/שמנת */
html body main#mainContent #categories.categories-grid > article.card.category-card,
html body main#mainContent #subcategories.categories-grid > article.card.category-card,
html body main#mainContent #categories article.card.category-card,
html body main#mainContent #subcategories article.card.category-card,
html body main#mainContent .categories-grid article.card.category-card {
  position: relative !important;

  width: 100% !important;
  height: auto !important;
  min-height: clamp(146px, 31vw, 178px) !important;

  padding: 0 !important;
  margin: 0 !important;

  display: block !important;
  overflow: hidden !important;

  border-radius: 22px !important;

  background: linear-gradient(180deg, #ffffff 0%, #fffaf4 100%) !important;
  background-color: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #fffaf4 100%) !important;

  border: 1px solid rgba(249, 115, 22, 0.22) !important;
  outline: none !important;

  box-shadow:
    0 12px 26px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  transform: none !important;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease !important;
}

/* ביטול שכבות כהות/שקופות ישנות */
html body main#mainContent #categories article.card.category-card::before,
html body main#mainContent #categories article.card.category-card::after,
html body main#mainContent #subcategories article.card.category-card::before,
html body main#mainContent #subcategories article.card.category-card::after,
html body main#mainContent .categories-grid article.card.category-card::before,
html body main#mainContent .categories-grid article.card.category-card::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ריחוף עדין */
html body main#mainContent #categories article.card.category-card:hover,
html body main#mainContent #subcategories article.card.category-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(249, 115, 22, 0.48) !important;
  box-shadow:
    0 16px 34px rgba(249, 115, 22, 0.14),
    0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

/* אזור התמונה */
html body main#mainContent #categories article.card.category-card > .category-image-wrap,
html body main#mainContent #subcategories article.card.category-card > .category-image-wrap,
html body main#mainContent #categories article.card.category-card > .category-image-wrap.text-only-wrap,
html body main#mainContent #subcategories article.card.category-card > .category-image-wrap.text-only-wrap {
  position: relative !important;

  width: 100% !important;
  height: 112px !important;
  min-height: 112px !important;

  padding: 15px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background:
    radial-gradient(circle at center, rgba(249, 115, 22, 0.08), transparent 62%),
    #ffffff !important;
  background-color: #ffffff !important;

  border: none !important;
  border-bottom: 1px solid rgba(249, 115, 22, 0.14) !important;

  box-shadow: none !important;
  border-radius: 0 !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* תמונות קטגוריה */
html body main#mainContent #categories article.card.category-card > .category-image-wrap img,
html body main#mainContent #subcategories article.card.category-card > .category-image-wrap img {
  width: auto !important;
  max-width: 88% !important;

  height: auto !important;
  max-height: 92px !important;

  object-fit: contain !important;

  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.08)) !important;

  transform: none !important;
}

/* אזור השם */
html body main#mainContent #categories article.card.category-card > .category-body,
html body main#mainContent #subcategories article.card.category-card > .category-body {
  position: relative !important;

  width: 100% !important;
  min-height: 54px !important;

  padding: 10px 13px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;

  background: rgba(255, 255, 255, 0.98) !important;
  background-color: rgba(255, 255, 255, 0.98) !important;
  background-image: none !important;

  border: none !important;
  border-top: 1px solid rgba(249, 115, 22, 0.10) !important;

  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* העיגול הכתום עם החץ — אצלך הוא נבנה דרך category-body::before */
html body main#mainContent #categories article.card.category-card > .category-body::before,
html body main#mainContent #subcategories article.card.category-card > .category-body::before {
  content: "›" !important;

  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 999px !important;

  display: grid !important;
  place-items: center !important;

  color: #ffffff !important;
  background: linear-gradient(135deg, #fb923c 0%, #f97316 45%, #ea580c 100%) !important;

  border: 1px solid rgba(255, 255, 255, 0.70) !important;

  font-size: 25px !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  box-shadow:
    0 8px 18px rgba(249, 115, 22, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;

  transform: rotate(180deg) !important;
}

/* פס כתום ליד שם הקטגוריה */
html body main#mainContent #categories article.card.category-card > .category-body::after,
html body main#mainContent #subcategories article.card.category-card > .category-body::after {
  content: "" !important;

  width: 4px !important;
  min-width: 4px !important;
  height: 27px !important;

  border-radius: 999px !important;

  display: block !important;

  background: linear-gradient(180deg, #fb923c, #f97316, #ea580c) !important;
  box-shadow: 0 5px 12px rgba(249, 115, 22, 0.28) !important;

  order: -1 !important;
}

/* שם הקטגוריה */
html body main#mainContent #categories article.card.category-card > .category-body > .category-name,
html body main#mainContent #subcategories article.card.category-card > .category-body > .category-name {
  flex: 1 !important;

  width: auto !important;
  min-width: 0 !important;
  min-height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  text-align: right !important;

  color: #111827 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;

  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}

/* מבטל פס קודם אם נוצר על category-name מהקוד הקודם */
html body main#mainContent #categories article.card.category-card > .category-body > .category-name::before,
html body main#mainContent #categories article.card.category-card > .category-body > .category-name::after,
html body main#mainContent #subcategories article.card.category-card > .category-body > .category-name::before,
html body main#mainContent #subcategories article.card.category-card > .category-body > .category-name::after {
  display: none !important;
  content: none !important;
}

/* תתי טקסט בכרטיס כל המוצרים / תתי קטגוריות */
html body main#mainContent #categories article.card.category-card > .category-body > .section-note,
html body main#mainContent #subcategories article.card.category-card > .category-body > .section-note {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

/* אייקון טקסט בלבד */
html body main#mainContent #categories article.card.category-card .text-only-icon,
html body main#mainContent #subcategories article.card.category-card .text-only-icon {
  width: 76px !important;
  height: 76px !important;

  border-radius: 22px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #f97316 !important;
  background: #fff7ed !important;
  border: 1px solid rgba(249, 115, 22, 0.20) !important;

  font-size: 32px !important;
  font-weight: 900 !important;

  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.10) !important;
}

/* מובייל קטן */
@media (max-width: 420px) {
  html body main#mainContent #categories.categories-grid,
  html body main#mainContent #subcategories.categories-grid {
    gap: 11px !important;
  }

  html body main#mainContent #categories.categories-grid > article.card.category-card,
  html body main#mainContent #subcategories.categories-grid > article.card.category-card {
    min-height: 138px !important;
    border-radius: 19px !important;
  }

  html body main#mainContent #categories article.card.category-card > .category-image-wrap,
  html body main#mainContent #subcategories article.card.category-card > .category-image-wrap {
    height: 94px !important;
    min-height: 94px !important;
    padding: 12px !important;
  }

  html body main#mainContent #categories article.card.category-card > .category-image-wrap img,
  html body main#mainContent #subcategories article.card.category-card > .category-image-wrap img {
    max-height: 76px !important;
  }

  html body main#mainContent #categories article.card.category-card > .category-body,
  html body main#mainContent #subcategories article.card.category-card > .category-body {
    min-height: 48px !important;
    padding: 9px 11px !important;
    gap: 8px !important;
  }

  html body main#mainContent #categories article.card.category-card > .category-body::before,
  html body main#mainContent #subcategories article.card.category-card > .category-body::before {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    font-size: 22px !important;
  }

  html body main#mainContent #categories article.card.category-card > .category-body::after,
  html body main#mainContent #subcategories article.card.category-card > .category-body::after {
    width: 3px !important;
    min-width: 3px !important;
    height: 24px !important;
  }

  html body main#mainContent #categories article.card.category-card > .category-body > .category-name,
  html body main#mainContent #subcategories article.card.category-card > .category-body > .category-name {
    font-size: 13.5px !important;
  }
}

/* טאבלט ומחשב */
@media (min-width: 680px) {
  html body main#mainContent #categories.categories-grid,
  html body main#mainContent #subcategories.categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 860px !important;
  }

  html body main#mainContent #categories.categories-grid > article.card.category-card,
  html body main#mainContent #subcategories.categories-grid > article.card.category-card {
    min-height: 168px !important;
  }

  html body main#mainContent #categories article.card.category-card > .category-body > .category-name,
  html body main#mainContent #subcategories article.card.category-card > .category-body > .category-name {
    font-size: 16px !important;
  }
}

@media (min-width: 1100px) {
  html body main#mainContent #categories.categories-grid,
  html body main#mainContent #subcategories.categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 900px !important;
  }
}
/* =========================================================
   עילאי מרקט — Image Fit מהניהול
   cover = תמונה מלאה
   contain = תמונה נקייה באמצע
   מדביקים הכי למטה ב-style.css
   ========================================================= */

/* מבטיח שהאזור של התמונה יוכל להציג גם תמונה מלאה וגם תמונה שקופה */
.category-card .category-image-wrap,
.product-card .product-image-wrap {
  overflow: hidden !important;
  background: #ffffff !important;
}

/* תמונה מלאה — מתפרסת על כל הריבוע/מלבן */
.category-card.image-fit-cover .category-image-wrap,
.product-card.image-fit-cover .product-image-wrap {
  padding: 0 !important;
}

.category-card.image-fit-cover .category-image-wrap img,
.product-card.image-fit-cover .product-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  padding: 0 !important;
  display: block !important;
}

/* תמונה נקייה באמצע — מתאימה להסרת רקע */
.category-card.image-fit-contain .category-image-wrap,
.product-card.image-fit-contain .product-image-wrap {
  padding: 14px !important;
}

.category-card.image-fit-contain .category-image-wrap img,
.product-card.image-fit-contain .product-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  padding: 0 !important;
  display: block !important;
}

/* במוצרים יש אצלך קוד ישן שנתן גובה 130px לתמונה — זה דורס אותו */
.product-card.image-fit-cover .product-image-wrap img,
.product-card.image-fit-contain .product-image-wrap img {
  height: 100% !important;
}

/* מובייל — לשמור על מראה נקי ולא דחוס */
@media (max-width: 420px) {
  .category-card.image-fit-contain .category-image-wrap,
  .product-card.image-fit-contain .product-image-wrap {
    padding: 12px !important;
  }
}
/* =========================================================
   FIX FINAL — תמונה מלאה באמת לקטגוריות / תתי קטגוריות
   דורס max-width / contain ישנים
   מדביקים הכי למטה ב-style.css
   ========================================================= */

/* קטגוריה / תת־קטגוריה במצב תמונה מלאה */
html body main#mainContent #categories.categories-grid > article.card.category-card.image-fit-cover > .category-image-wrap,
html body main#mainContent #subcategories.categories-grid > article.card.category-card.image-fit-cover > .category-image-wrap,
html body main#mainContent #categories article.card.category-card.image-fit-cover > .category-image-wrap,
html body main#mainContent #subcategories article.card.category-card.image-fit-cover > .category-image-wrap {
  width: 100% !important;
  height: clamp(118px, 24vw, 150px) !important;
  min-height: clamp(118px, 24vw, 150px) !important;
  max-height: none !important;

  padding: 0 !important;
  margin: 0 !important;

  display: block !important;
  overflow: hidden !important;

  aspect-ratio: auto !important;
  border-radius: 0 !important;

  background: #ffffff !important;
  border-bottom: 1px solid rgba(249, 115, 22, 0.16) !important;
}

/* התמונה עצמה — מתפרסת על כל המלבן */
html body main#mainContent #categories.categories-grid > article.card.category-card.image-fit-cover > .category-image-wrap > img,
html body main#mainContent #subcategories.categories-grid > article.card.category-card.image-fit-cover > .category-image-wrap > img,
html body main#mainContent #categories article.card.category-card.image-fit-cover > .category-image-wrap > img,
html body main#mainContent #subcategories article.card.category-card.image-fit-cover > .category-image-wrap > img {
  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  min-height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  padding: 0 !important;
  margin: 0 !important;

  display: block !important;

  object-fit: cover !important;
  object-position: center center !important;

  border-radius: 0 !important;
  filter: none !important;
  transform: none !important;
}

/* מונע מאפקט hover ישן להקטין/להזיז את התמונה */
html body main#mainContent #categories article.card.category-card.image-fit-cover:hover > .category-image-wrap > img,
html body main#mainContent #subcategories article.card.category-card.image-fit-cover:hover > .category-image-wrap > img {
  transform: none !important;
  filter: none !important;
}

/* מצב תמונה נקייה באמצע — נשאר contain */
html body main#mainContent #categories article.card.category-card.image-fit-contain > .category-image-wrap,
html body main#mainContent #subcategories article.card.category-card.image-fit-contain > .category-image-wrap {
  padding: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
}

html body main#mainContent #categories article.card.category-card.image-fit-contain > .category-image-wrap > img,
html body main#mainContent #subcategories article.card.category-card.image-fit-contain > .category-image-wrap > img {
  width: 100% !important;
  height: 100% !important;

  max-width: 138px !important;
  max-height: 105px !important;

  object-fit: contain !important;
  object-position: center center !important;
}

/* מובייל */
@media (max-width: 420px) {
  html body main#mainContent #categories article.card.category-card.image-fit-cover > .category-image-wrap,
  html body main#mainContent #subcategories article.card.category-card.image-fit-cover > .category-image-wrap {
    height: 104px !important;
    min-height: 104px !important;
  }
}
/* =========================================================
   FIX FINAL - בועת מעקב הזמנה קבועה בצד שמאל באמצע
   מבטל גרירה ומחזיר פתיחה בלחיצה רגילה
   ========================================================= */

#orderTrackingDock.order-tracking-dock {
  position: fixed !important;

  left: 14px !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;

  transform: translateY(-50%) !important;

  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  min-height: 88px !important;
  max-width: 88px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;

  z-index: 1000002 !important;
  cursor: pointer !important;

  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* כשהמעקב מוסתר — שלא יתפוס לחיצות בכלל */
#orderTrackingDock.order-tracking-dock.hidden,
#orderTrackingDock.hidden,
body:not(.has-active-order-tracking) #orderTrackingDock.order-tracking-dock {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* כשיש הזמנה פעילה — הבועה לחיצה */
body.has-active-order-tracking #orderTrackingDock.order-tracking-dock:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* מבטל מצבי גרירה ישנים אם נשארו */
#orderTrackingDock.order-tracking-dock.is-dragging {
  transform: translateY(-50%) !important;
  cursor: pointer !important;
}

/* הטקסט הקטן ייפתח לצד ימין של הבועה כי הבועה בצד שמאל */
#orderTrackingDock.order-tracking-dock[data-edge="left"] .order-tracking-dock-copy {
  left: 96px !important;
  right: auto !important;
  text-align: right !important;
}

/* מובייל */
@media (max-width: 520px) {
  #orderTrackingDock.order-tracking-dock {
    left: 10px !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;

    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    max-width: 82px !important;
  }

  #orderTrackingDock .order-tracking-dock-ring {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
  }

  #orderTrackingDock .order-tracking-dock-core {
    width: 64px !important;
    height: 64px !important;
  }

  #orderTrackingDock .order-tracking-dock-svg {
    width: 30px !important;
    height: 30px !important;
  }

  #orderTrackingDock.order-tracking-dock[data-edge="left"] .order-tracking-dock-copy {
    left: 86px !important;
    right: auto !important;
  }
}
/* =========================================================
   FINAL OVERRIDE - מעקב הזמנה קבוע בצד שמאל באמצע
   בלי גרירה, עם פתיחה בלחיצה
   ========================================================= */

body.has-active-order-tracking #orderTrackingDock.order-tracking-dock:not(.hidden) {
  position: fixed !important;

  left: 12px !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;

  transform: translateY(-50%) !important;

  width: 82px !important;
  height: 82px !important;
  min-width: 82px !important;
  min-height: 82px !important;
  max-width: 82px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  z-index: 1000002 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.has-active-order-tracking #orderTrackingDock.order-tracking-dock:not(.hidden) .order-tracking-dock-ring {
  width: 82px !important;
  height: 82px !important;
  min-width: 82px !important;
  min-height: 82px !important;
}

body.has-active-order-tracking #orderTrackingDock.order-tracking-dock:not(.hidden) .order-tracking-dock-core {
  width: 64px !important;
  height: 64px !important;
}

body.has-active-order-tracking #orderTrackingDock.order-tracking-dock:not(.hidden) .order-tracking-dock-svg {
  width: 30px !important;
  height: 30px !important;
}

#orderTrackingDock.order-tracking-dock.hidden,
#orderTrackingDock.hidden,
body:not(.has-active-order-tracking) #orderTrackingDock.order-tracking-dock {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#orderTrackingDock.order-tracking-dock[data-edge="left"] .order-tracking-dock-copy {
  left: 88px !important;
  right: auto !important;
  text-align: right !important;
}

#orderTrackingDock.order-tracking-dock.is-dragging {
  cursor: pointer !important;
  transform: translateY(-50%) !important;
}
/* =========================================================
   FIX - לא מציגים מלבן קטן ליד בועת מעקב ההזמנה
   הבועה עצמה נשארת לחיצה ופותחת את כרטיס המעקב
   ========================================================= */

#orderTrackingDock .order-tracking-dock-copy {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* =========================================================
   BODEK FINAL CSS - מעקב הזמנה מעל הכל + עיגול שמאל באמצע
   ========================================================= */

#orderTrackingOverlay.order-tracking-overlay.show,
#orderTrackingOverlay.show,
body #orderTrackingOverlay.show {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2147483647 !important;
}

#orderTrackingOverlay.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#orderTrackingPanel.order-tracking-panel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.has-active-order-tracking #orderTrackingDock.order-tracking-dock:not(.hidden) {
  position: fixed !important;

  left: 12px !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;

  transform: translateY(-50%) !important;

  width: 82px !important;
  height: 82px !important;
  min-width: 82px !important;
  min-height: 82px !important;
  max-width: 82px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;

  z-index: 2147483646 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

#orderTrackingDock .order-tracking-dock-copy {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* =========================================================
   ART — חיפוש עליון קבוע וביטול חיפוש תחתון נפתח
   ========================================================= */

/* שורת החיפוש העליונה תמיד פתוחה */
html body main#mainContent #searchSection.search-section,
html body main#mainContent #searchSection.search-section-collapsed,
html body main#mainContent #searchSection.search-section-open {
  display: block !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  overflow: visible !important;
  pointer-events: auto !important;

  padding: 10px 16px 14px !important;
  margin: 0 0 10px !important;
}

/* כל מה שבתוך החיפוש העליון תמיד נראה */
html body main#mainContent #searchSection .search-input-wrapper,
html body main#mainContent #searchSection #searchInput,
html body main#mainContent #searchSection #clearSearch,
html body main#mainContent #searchSection #searchResults {
  visibility: visible !important;
}

/* קופסת החיפוש עצמה */
html body main#mainContent #searchSection .search-input-wrapper {
  min-height: 54px !important;
  padding: 8px 14px !important;

  display: flex !important;
  align-items: center !important;

  border-radius: 18px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;

  border: 1.5px solid rgba(226, 232, 240, 0.98) !important;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* פוקוס כשלקוח לוחץ בשדה */
html body main#mainContent #searchSection .search-input-wrapper:focus-within {
  border-color: rgba(249, 115, 22, 0.78) !important;
  box-shadow:
    0 14px 32px rgba(249, 115, 22, 0.14),
    0 0 0 3px rgba(249, 115, 22, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* ביטול זכוכית המגדלת בתוך שורת החיפוש */

/* שדה הטקסט */
html body main#mainContent #searchSection #searchInput {
  width: 100% !important;
  padding: 6px 2px !important;

  color: #111827 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

/* טקסט פנימי */
html body main#mainContent #searchSection #searchInput::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

/* כפתור ניקוי X */
html body main#mainContent #searchSection #clearSearch {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;

  margin: 0 8px 0 0 !important;

  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #111827 !important;

  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

/* תוצאות החיפוש */
html body main#mainContent #searchSection .search-results {
  top: calc(100% + 8px) !important;
  z-index: 1300 !important;

  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.98) !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16) !important;
}

/* ביטול מלא של החיפוש התחתון הנפתח */
html body #bottomSearchPanel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* =========================================================
   ART FIX — חיפוש צר יותר + באנרים מתחלפים גדולים יותר
   ========================================================= */

/* שורת החיפוש העליונה — צרה, נמוכה ונקייה יותר */
html body main#mainContent #searchSection {
  padding: 7px 16px 6px !important;
  margin: 0 auto 4px !important;
}

html body main#mainContent #searchSection .search-container {
  width: 92% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
}

html body main#mainContent #searchSection .search-input-wrapper {
  min-height: 42px !important;
  height: 42px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
}

/* בלי זכוכית מגדלת בתוך השורה */

/* הטקסט בתוך החיפוש */
html body main#mainContent #searchSection #searchInput {
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 3px 2px !important;
}

/* כפתור X קטן ועדין */
html body main#mainContent #searchSection #clearSearch {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  margin-right: 6px !important;
  font-size: 18px !important;
}

/* אזור הבאנרים — פחות רווחים מסביב */
html body main#mainContent .hero {
  padding: 6px 12px 12px !important;
  margin: 0 !important;
}

/* הבאנר המתחלף — גדול יותר במובייל */
html body main#mainContent .hero-banner-slider {
  height: 172px !important;
  min-height: 172px !important;
  max-height: 172px !important;
  border-radius: 24px !important;
}

/* שהתמונה תמלא את הבאנר יפה */
html body main#mainContent .hero-banner-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* נקודות הבאנר */
html body main#mainContent .hero-banner-dots {
  bottom: 9px !important;
}

/* מובייל קטן מאוד */
@media (max-width: 380px) {
  html body main#mainContent .hero-banner-slider {
    height: 158px !important;
    min-height: 158px !important;
    max-height: 158px !important;
  }

  html body main#mainContent #searchSection .search-container {
    width: 94% !important;
  }
}
/* =========================================================
   ART FIX — תוצאות חיפוש עליון קריאות ומסודרות
   ========================================================= */

/* קופסת תוצאות החיפוש */
html body main#mainContent #searchSection #searchResults.search-results {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding: 10px !important;

  background: #ffffff !important;
  border: 1.5px solid rgba(226, 232, 240, 0.98) !important;
  border-radius: 20px !important;

  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

  z-index: 3000 !important;
  direction: rtl !important;
}

/* כל מוצר בתוצאות */
html body main#mainContent #searchSection #searchResults .search-result-item {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: 64px 1fr !important;
  align-items: center !important;
  gap: 12px !important;

  min-height: 78px !important;
  padding: 9px !important;
  margin: 0 0 9px !important;

  background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 16px !important;

  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

  cursor: pointer !important;
}

/* שלא יהיה רווח אחרי המוצר האחרון */
html body main#mainContent #searchSection #searchResults .search-result-item:last-child {
  margin-bottom: 0 !important;
}

/* תמונת מוצר */
html body main#mainContent #searchSection #searchResults .search-result-item img {
  width: 64px !important;
  height: 64px !important;

  object-fit: contain !important;
  padding: 5px !important;

  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 14px !important;

  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.07) !important;
}

/* אזור הטקסט */
html body main#mainContent #searchSection #searchResults .search-result-info {
  min-width: 0 !important;
  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;

  text-align: right !important;
}

/* שם המוצר */
html body main#mainContent #searchSection #searchResults .search-result-name {
  width: 100% !important;
  margin: 0 0 5px !important;

  color: #111827 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;

  text-align: right !important;

  display: -webkit-box !important;
line-clamp: 2;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;

overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
}

/* מחיר */
html body main#mainContent #searchSection #searchResults .search-result-price {
  margin: 0 0 3px !important;

  color: #f97316 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;

  text-align: right !important;
}

/* תת־קטגוריה / מבצע / מלאי */
html body main#mainContent #searchSection #searchResults .search-result-stock {
  margin: 2px 0 0 !important;

  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;

  text-align: right !important;
}

/* הדגשת המילה שחיפשו */
html body main#mainContent #searchSection #searchResults .highlight {
  background: #ffedd5 !important;
  color: #ea580c !important;
  padding: 0 3px !important;
  border-radius: 5px !important;
}

/* מוצר שאזל מהמלאי */
html body main#mainContent #searchSection #searchResults .search-out-of-stock {
  opacity: 0.62 !important;
}

html body main#mainContent #searchSection #searchResults .out-stock-text {
  color: #dc2626 !important;
  font-weight: 900 !important;
}

/* במובייל קטן */
@media (max-width: 420px) {
  html body main#mainContent #searchSection #searchResults.search-results {
    max-height: 300px !important;
    padding: 8px !important;
  }

  html body main#mainContent #searchSection #searchResults .search-result-item {
    grid-template-columns: 58px 1fr !important;
    min-height: 72px !important;
    gap: 10px !important;
  }

  html body main#mainContent #searchSection #searchResults .search-result-item img {
    width: 58px !important;
    height: 58px !important;
  }

  html body main#mainContent #searchSection #searchResults .search-result-name {
    font-size: 14px !important;
  }
}
/* =========================================================
   ART FIX — כיתוב קטגוריות ארוך בצורה אסתטית
   ========================================================= */

/* מסדר שמות ארוכים בכרטיסי קטגוריות */
html body main#mainContent #categories .category-card .category-name {
  min-height: 38px !important;
  max-height: 42px !important;

  display: -webkit-box !important;
  line-clamp: 2;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;

  line-height: 1.18 !important;
  font-size: 14px !important;
  font-weight: 950 !important;

  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;

  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* נותן לכרטיס מקום נוח לכיתוב של 2 שורות */
html body main#mainContent #categories .category-card .category-body {
  min-height: 54px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
}

/* במובייל קטן — טיפה מקטין את הטקסט כדי שלא ייחתך */
@media (max-width: 420px) {
  html body main#mainContent #categories .category-card .category-name {
    font-size: 13.5px !important;
    line-height: 1.16 !important;
    min-height: 36px !important;
    max-height: 42px !important;
  }
}
/* =========================================================
   ART FIX — הסתרת כותרת אזור הקטגוריות
   מסתיר את "קטגוריות" ו"לבחירתך" בלבד
   ========================================================= */

html body main#mainContent #categoriesSection > .section-head {
  display: none !important;
}
/* =========================================================
   תיקון עדין לבאנרים המתחלפים
   מקטין טיפה את הגובה כדי שהתמונה תיחתך פחות
   ========================================================= */

.hero-banner-slider {
  height: 198px !important;
  min-height: 198px !important;
  max-height: 198px !important;
}

/* מובייל */
@media (max-width: 520px) {
  .hero-banner-slider {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
  }
}

/* מובייל קטן */
@media (max-width: 380px) {
  .hero-banner-slider {
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
  }
}
/* =========================================================
   הסתרת עוזר AI לפי הגדרה מאתר הניהול
   ========================================================= */

body.ai-assistant-disabled #ilaiAiAssistantRoot,
body.ai-assistant-disabled #ilaiAiAssistantPanel {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* =========================================================
   עילאי מרקט — אימות רחוב בכרטיס הזמנה
   נוגע רק לשדה רחוב בתוך checkoutModalOverlay
   ========================================================= */

#checkoutModalOverlay .checkout-street-field {
  position: relative !important;
}

#checkoutModalOverlay .street-suggestion-item {
  width: 100% !important;
  min-height: 44px !important;
  padding: 11px 14px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  background: #ffffff !important;
  color: #111827 !important;
  border: none !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;

  font-size: 14px !important;
  font-weight: 900 !important;
  text-align: right !important;
  cursor: pointer !important;
}

#checkoutModalOverlay .street-suggestion-item:last-child {
  border-bottom: none !important;
}

#checkoutModalOverlay .street-suggestion-item:hover,
#checkoutModalOverlay .street-suggestion-item:focus-visible {
  background: #fff7ed !important;
  color: #9a3412 !important;
  outline: none !important;
}

#checkoutModalOverlay .street-validation-hint {
  margin-top: 7px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;

  background: #f8fafc !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  color: #64748b !important;

  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 850 !important;
}

#checkoutModalOverlay .street-validation-hint.is-valid {
  background: #ecfdf5 !important;
  border-color: #bbf7d0 !important;
  color: #166534 !important;
}

#checkoutModalOverlay .street-validation-hint.is-error {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #be123c !important;
}

#checkoutModalOverlay #custStreet.street-invalid {
  border-color: #fb7185 !important;
  box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.16) !important;
}

#checkoutModalOverlay #custStreet.street-valid {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14) !important;
}
/* =========================================================
   תיקון צבע טקסט בבחירת עיר בכרטיס הזמנה
   ========================================================= */

#checkoutModalOverlay #custCity,
#checkoutModalOverlay #custCity option {
  color: #111827 !important;
  background: #ffffff !important;
}

#checkoutModalOverlay #custCity:focus {
  color: #111827 !important;
  background: #ffffff !important;
  border-color: #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.16) !important;
}
/* =========================================================
   Checkout address row — street + house number
   ========================================================= */

.checkout-address-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 10px;
  align-items: start;
}

.checkout-address-row .checkout-street-field,
.checkout-address-row .checkout-house-field {
  min-width: 0;
}

.checkout-house-field input {
  width: 100%;
  text-align: center;
}

.checkout-house-field input.house-invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14) !important;
}

@media (max-width: 420px) {
  .checkout-address-row {
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 8px;
  }

  .checkout-house-field label {
    font-size: 12px;
  }

  .checkout-house-field input {
    padding-left: 8px;
    padding-right: 8px;
  }
}
/* =========================================================
   Premium checkout address layout fix
   רחוב + מספר בית בכרטיס הזמנה
   ========================================================= */

.checkout-address-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 94px !important;
  gap: 8px !important;
  align-items: end !important;
  width: 100% !important;
  direction: rtl !important;
}

.checkout-address-row .checkout-street-field,
.checkout-address-row .checkout-house-field {
  min-width: 0 !important;
  width: 100% !important;
}

.checkout-address-row label {
  display: block !important;
  margin: 0 0 5px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #334155 !important;
  line-height: 1.2 !important;
}

.checkout-address-row input {
  width: 100% !important;
  height: 44px !important;
  border-radius: 13px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-sizing: border-box !important;
}

.checkout-address-row #custStreet {
  text-align: right !important;
  padding: 0 13px !important;
}

.checkout-address-row #custHouseNumber {
  text-align: center !important;
  padding: 0 8px !important;
}

/* מסתיר את ההודעה הירוקה כשהכול תקין כדי שהטופס יהיה נקי */
.street-validation-hint {
  display: none !important;
}

/* אם יש תיבת הצעות רחובות — שתישב יפה מתחת לשדה הרחוב */
.street-suggestions {
  margin-top: 6px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.14) !important;
  z-index: 9999 !important;
}

/* סימון שגיאה למספר בית */
.checkout-house-field input.house-invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14) !important;
}

/* מובייל קטן מאוד */
@media (max-width: 420px) {
  .checkout-address-row {
    grid-template-columns: minmax(0, 1fr) 84px !important;
    gap: 7px !important;
  }

  .checkout-address-row label {
    font-size: 11px !important;
  }

  .checkout-address-row input {
    height: 42px !important;
    font-size: 13px !important;
  }
}
/* =========================================================
   Checkout WhatsApp fallback link
   קישור חירום לשליחת פרטי ההזמנה לנציג
   ========================================================= */

.checkout-whatsapp-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 9px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(22, 163, 74, 0.22);
  background: rgba(240, 253, 244, 0.92);
  color: #166534;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  line-height: 1.35;
  box-sizing: border-box;
}

.checkout-whatsapp-fallback:hover,
.checkout-whatsapp-fallback:focus {
  outline: none;
  border-color: rgba(22, 163, 74, 0.5);
  background: #dcfce7;
  color: #14532d;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}
/* =========================================================
   FIX — גובה באנרים מתחלפים במובייל בלבד
   לא נוגע במחשב, לא נוגע ב-JS, לא נוגע ב-HTML
   ========================================================= */

/* טאבלט / מובייל רחב */
@media (max-width: 768px) {
  html body main#mainContent .hero {
    padding: 6px 12px 12px !important;
  }

  html body main#mainContent .hero-banner-slider {
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    border-radius: 22px !important;
  }

  html body main#mainContent .hero-banner-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* אייפון רגיל / רוב הטלפונים */
@media (max-width: 520px) {
  html body main#mainContent .hero-banner-slider {
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
  }
}

/* טלפונים קטנים מאוד */
@media (max-width: 380px) {
  html body main#mainContent .hero-banner-slider {
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
  }
}
/* =========================================================
   FIX FINAL — באנר עליון: מחשב ממורכז, מובייל עד הגבול
   ========================================================= */

/* בסיס כללי */
body.has-header-banner .topbar {
  background: #e6dbcd !important;
  background-color: #e6dbcd !important;
  overflow: hidden !important;
}

body.has-header-banner .topbar-inner,
body.has-header-banner .logo-wrap {
  background: #e6dbcd !important;
  background-color: #e6dbcd !important;
  overflow: hidden !important;
}

body.has-header-banner #logoImg,
body.has-header-banner .logo-wrap img {
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: #e6dbcd !important;
  background-color: #e6dbcd !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* מחשב — הבאנר לא נמתח על כל המסך */
@media (min-width: 769px) {
  body.has-header-banner .topbar {
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
    padding: 10px 0 !important;
  }

  body.has-header-banner .topbar-inner {
    width: 100% !important;
    max-width: 100% !important;
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.has-header-banner .logo-wrap {
    width: 980px !important;
    max-width: calc(100% - 48px) !important;
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  body.has-header-banner #logoImg,
  body.has-header-banner .logo-wrap img {
    width: 100% !important;
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
  }
}

/* מובייל — להשאיר כמו שאהבת, עד הגבול */
@media (max-width: 768px) {
  body.has-header-banner .topbar {
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    padding: 0 !important;
  }

  body.has-header-banner .topbar-inner {
    width: 100% !important;
    max-width: 100% !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.has-header-banner .logo-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.has-header-banner #logoImg,
  body.has-header-banner .logo-wrap img {
    width: 100vw !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* =========================================================
   CATEGORY SLIDERS — FIX CLEAN FINAL
   מטרה: להחזיר את האתר לפרופורציה
   רק קטגוריות שמשויכות לסלייד נשארות בסלייד.
   קטגוריות נוספות חוזרות לגריד רגיל.
   ========================================================= */

/* מחזיר את אזור הקטגוריות לרוחב הטבעי של האתר */
html body main#mainContent #categoriesSection {
  width: 100% !important;
  max-width: var(--page-max-width, 860px) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding: 0 16px 18px !important;

  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  overflow: visible !important;
  direction: rtl !important;
}

/* עטיפת הסליידים */
html body main#mainContent #categories.category-sliders-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 30px !important;
  overflow: visible !important;
  direction: rtl !important;
}

/* כל סלייד */
html body main#mainContent .category-slider-section {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* כותרת + חצים */
html body main#mainContent .category-slider-head {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  direction: rtl !important;
}

html body main#mainContent .category-slider-title {
  order: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 8px 15px !important;
  border-radius: 999px !important;

  background: linear-gradient(135deg, #fffaf2, #ffefd8) !important;
  border: 1px solid rgba(249, 115, 22, 0.24) !important;
  color: #5b3518 !important;
  font-size: 19px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  text-shadow: none !important;

  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

html body main#mainContent .category-slider-arrows {
  order: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

html body main#mainContent .category-slider-arrow {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 999px !important;

  display: grid !important;
  place-items: center !important;

  background: linear-gradient(135deg, #fb923c, #f97316, #ea580c) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;

  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.26) !important;
}

html body main#mainContent .category-slider-arrow:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 6px rgba(249, 115, 22, 0.25),
    0 8px 18px rgba(249, 115, 22, 0.26) !important;
}

/* המסילה עצמה — לא פורצת את האתר */
html body main#mainContent .category-slider-track {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 4px 0 10px !important;

  display: flex !important;
  flex-direction: row !important;
  gap: 14px !important;
  direction: rtl !important;
  justify-content: flex-start !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  scroll-snap-type: inline mandatory !important;
  scrollbar-width: none !important;
}

html body main#mainContent .category-slider-track::-webkit-scrollbar {
  display: none !important;
}

html body main#mainContent .category-slider-item {
  flex: 0 0 156px !important;
  min-width: 156px !important;
  max-width: 156px !important;
  scroll-snap-align: start !important;
}

html body main#mainContent .category-slider-item > .category-card {
  width: 100% !important;
}

/* שמות קטגוריות בסלייד — 2 שורות מסודרות */
html body main#mainContent .category-slider-item .category-card .category-body {
  min-height: 54px !important;
  align-items: center !important;
}

html body main#mainContent .category-slider-item .category-card .category-name {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  font-size: 13.5px !important;
  line-height: 1.16 !important;
  font-weight: 900 !important;
  text-align: right !important;
}

/* קטגוריות שלא משויכות לסלייד — גריד רגיל ומאוזן */
html body main#mainContent .category-extra-regular-section {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body main#mainContent .category-extra-regular-section .section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}

html body main#mainContent .category-extra-regular-section .section-title {
  margin: 0 !important;
  color: #5b3518 !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  text-shadow: none !important;
}

html body main#mainContent .category-extra-regular-section .section-note {
  display: none !important;
}

html body main#mainContent .category-extra-regular-grid {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html body main#mainContent .category-extra-regular-grid .category-card {
  width: 100% !important;
  max-width: 100% !important;
}

/* מחשב */
@media (min-width: 680px) {
  html body main#mainContent #categoriesSection {
    max-width: 900px !important;
  }

  html body main#mainContent .category-slider-item {
    flex-basis: 166px !important;
    min-width: 166px !important;
    max-width: 166px !important;
  }

  html body main#mainContent .category-extra-regular-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* מסך רחב */
@media (min-width: 1100px) {
  html body main#mainContent #categoriesSection {
    max-width: 960px !important;
  }

  html body main#mainContent .category-slider-item {
    flex-basis: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
  }
}

/* מובייל */
@media (max-width: 520px) {
  html body main#mainContent #categoriesSection {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  html body main#mainContent .category-slider-item {
    flex-basis: 46% !important;
    min-width: 145px !important;
    max-width: none !important;
  }

  html body main#mainContent .category-slider-title {
    font-size: 17px !important;
  }
}

/* נגישות — הפחתת תנועה */
@media (prefers-reduced-motion: reduce) {
  html body main#mainContent .category-slider-track {
    scroll-behavior: auto !important;
  }

  html body main#mainContent .category-slider-arrow,
  html body main#mainContent .category-slider-item .category-card {
    transition: none !important;
  }
}
/* =========================================================
   ILAI MARKET — WOLT DARK APP REDESIGN / STAGE 1
   מדביקים בסוף style.css בלבד
   מטרה: Header קטן עם לוגו קטן בצד ימין, רקע כהה, תחושת אפליקציה
   ========================================================= */

:root {
  --wolt-bg: #090a0f;
  --wolt-bg-soft: #101119;
  --wolt-surface: #151722;
  --wolt-surface-2: #1b1e2b;
  --wolt-card: #1d202d;
  --wolt-card-soft: #222634;
  --wolt-border: rgba(255, 255, 255, 0.08);
  --wolt-border-strong: rgba(255, 255, 255, 0.14);
  --wolt-text: #ffffff;
  --wolt-muted: rgba(255, 255, 255, 0.62);
  --wolt-muted-2: rgba(255, 255, 255, 0.42);
  --wolt-orange: #ff6b16;
  --wolt-orange-2: #ff8a2a;
  --wolt-shadow: 0 20px 50px rgba(0, 0, 0, 0.38);
  --wolt-radius: 22px;
  --page-max-width: 1180px;
}

/* רקע כללי — מוחק תחושת אתר ישן/באנר */
html,
body {
  background: var(--wolt-bg) !important;
  color: var(--wolt-text) !important;
}

body {
  background-image:
    radial-gradient(circle at 80% -10%, rgba(255, 107, 22, 0.13), transparent 28%),
    radial-gradient(circle at 10% 10%, rgba(40, 70, 130, 0.16), transparent 32%),
    linear-gradient(180deg, #090a0f 0%, #0d0f16 42%, #08090d 100%) !important;
  background-attachment: fixed !important;
}

body::before,
body::after {
  display: none !important;
}

/* מעטפת האתר */
.app-shell {
  max-width: var(--page-max-width) !important;
  padding: 18px 22px 120px !important;
}

/* =========================================================
   HEADER — לוגו קטן בצד ימין, בלי באנר ענק
   ========================================================= */

.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  padding: 12px 16px !important;
  background: rgba(9, 10, 15, 0.86) !important;
  border-bottom: 1px solid var(--wolt-border) !important;
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(20px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.25) !important;
}

.topbar-inner {
  width: 100% !important;
  max-width: var(--page-max-width) !important;
  min-height: 52px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  direction: rtl !important;
}

/* מסתירים את כפתור 3 הקווים העליון כרגע — יש קטגוריות בסרגל התחתון */
.category-menu-button {
  display: none !important;
}

/* הלוגו הקטן בצד ימין */
.logo-wrap {
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  pointer-events: auto !important;
}

.logo-wrap img,
#logoImg {
  width: auto !important;
  height: 34px !important;
  max-width: 132px !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.36)) !important;
}

/* כפתורי התחברות ועגלה למעלה */
.account-top-button,
.cart-fab {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.065) !important;
  border: 1px solid var(--wolt-border-strong) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.account-top-button {
  margin-inline-start: auto !important;
}

.account-top-icon {
  color: #ffffff !important;
  font-size: 18px !important;
}

.account-top-text {
  display: none !important;
}

.cart-fab {
  font-size: 0 !important;
}

.cart-fab::before {
  content: "🛒";
  font-size: 18px;
  line-height: 1;
}

.account-top-button:hover,
.cart-fab:hover {
  transform: translateY(-1px) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 107, 22, 0.42) !important;
}

.cart-badge {
  top: -7px !important;
  left: -7px !important;
  min-width: 22px !important;
  height: 22px !important;
  background: var(--wolt-orange) !important;
  color: #ffffff !important;
  border: 2px solid #090a0f !important;
  box-shadow: 0 8px 18px rgba(255, 107, 22, 0.35) !important;
}

/* =========================================================
   SEARCH — שורת חיפוש בסגנון אפליקציה
   ========================================================= */

.search-section {
  max-width: var(--page-max-width) !important;
  margin: 0 auto 16px !important;
  padding: 0 !important;
}

.search-section.search-section-collapsed {
  display: block !important;
}

.search-container {
  width: 100% !important;
}

.search-input-wrapper {
  min-height: 52px !important;
  padding: 0 18px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid var(--wolt-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.search-input-wrapper:focus-within {
  border-color: rgba(255, 107, 22, 0.62) !important;
  box-shadow:
    0 0 0 3px rgba(255, 107, 22, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  transform: none !important;
}

#searchInput {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

#searchInput::placeholder {
  color: rgba(255, 255, 255, 0.48) !important;
}

.clear-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid var(--wolt-border) !important;
}

.search-results {
  background: #161925 !important;
  border: 1px solid var(--wolt-border-strong) !important;
  box-shadow: var(--wolt-shadow) !important;
}

.search-result-item {
  border-bottom: 1px solid var(--wolt-border) !important;
}

.search-result-item:hover {
  background: rgba(255, 107, 22, 0.08) !important;
}

.search-result-name,
.search-result-price {
  color: #ffffff !important;
}

.search-result-stock {
  color: var(--wolt-muted) !important;
}

/* =========================================================
   HERO — באנר מבצעים נפרד, לא לוגו עליון
   ========================================================= */

.hero {
  padding: 0 !important;
  margin: 0 0 26px !important;
}

.hero-banner-slider {
  position: relative !important;
  min-height: 164px !important;
  height: 164px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(18, 22, 43, 0.96), rgba(5, 32, 67, 0.96)),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.04) 0,
      rgba(255, 255, 255, 0.04) 12px,
      transparent 12px,
      transparent 26px
    ) !important;
  border: 1px solid var(--wolt-border) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28) !important;
}

.hero-banner-track,
.hero-banner-slide {
  height: 100% !important;
}

.hero-banner-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.hero-banner-fallback {
  height: 100% !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background:
    linear-gradient(135deg, rgba(18, 22, 43, 0.96), rgba(5, 32, 67, 0.96)),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.04) 0,
      rgba(255, 255, 255, 0.04) 12px,
      transparent 12px,
      transparent 26px
    ) !important;
}

.hero-title {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 34px !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em !important;
}

.hero-title strong,
.hero-title span {
  color: var(--wolt-orange) !important;
}

.hero-sub {
  margin: 8px 0 0 !important;
  color: var(--wolt-muted) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.hero-banner-dots {
  bottom: 11px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 7px !important;
}

.hero-banner-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.28) !important;
}

.hero-banner-dot.active {
  width: 18px !important;
  background: var(--wolt-orange) !important;
}

/* =========================================================
   SECTION TITLES
   ========================================================= */

.section {
  padding: 0 0 26px !important;
}

.section-head {
  margin-bottom: 14px !important;
}

.section-title {
  color: #ffffff !important;
  font-size: 21px !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
  text-shadow: none !important;
}

.section-note {
  color: var(--wolt-muted) !important;
  font-size: 13px !important;
  text-shadow: none !important;
}

/* =========================================================
   CATEGORIES — כרטיסים כהים ונקיים כמו אפליקציה
   ========================================================= */

.categories-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.category-card,
.all-products-card,
.categories-grid .card {
  min-height: 142px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: var(--wolt-card) !important;
  border: 1px solid var(--wolt-border) !important;
  box-shadow: none !important;
}

.category-card:hover,
.all-products-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 107, 22, 0.5) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26) !important;
}

.category-image-wrap,
.category-card.text-only .category-image-wrap,
.text-only-wrap {
  height: 92px !important;
  aspect-ratio: auto !important;
  padding: 18px !important;
  background: var(--wolt-card-soft) !important;
  border-bottom: 1px solid var(--wolt-border) !important;
}

.category-image-wrap img {
  max-width: 62px !important;
  max-height: 62px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.22)) !important;
}

.category-body,
.category-card.text-only .category-body,
.all-products-card .category-body {
  padding: 10px 8px 12px !important;
  background: transparent !important;
  border: 0 !important;
}

.category-name,
.category-card .category-name,
.all-products-card .category-name {
  min-height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  box-shadow: none !important;
  border: 0 !important;
  text-shadow: none !important;
}

/* =========================================================
   PRODUCTS — כרטיסי מוצרים כהים, פלוס כתום
   ========================================================= */

.products-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.product-card,
.products-grid .card,
.card.product-card {
  border-radius: 22px !important;
  overflow: hidden !important;
  background: var(--wolt-card) !important;
  border: 1px solid var(--wolt-border) !important;
  box-shadow: none !important;
}

.product-card:hover,
.card.product-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 107, 22, 0.45) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28) !important;
}

.product-image-wrap {
  height: 150px !important;
  aspect-ratio: auto !important;
  padding: 18px !important;
  background: var(--wolt-card-soft) !important;
  border-bottom: 1px solid var(--wolt-border) !important;
}

.product-image-wrap img {
  max-width: 100% !important;
  max-height: 112px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.22)) !important;
}

.product-body {
  padding: 14px !important;
  background: transparent !important;
}

.product-name,
.product-card .product-name {
  min-height: 40px !important;
  margin: 0 0 10px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

.price-row {
  margin-bottom: 12px !important;
}

.price,
.product-card .price {
  color: var(--wolt-orange) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  text-shadow: none !important;
}

.pill,
.product-card .pill {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--wolt-muted) !important;
  border: 1px solid var(--wolt-border) !important;
  box-shadow: none !important;
}

/* כפתור הוספה */

/* כמות */
.qty-box,
.product-card .qty-box {
  height: 44px !important;
  min-width: 118px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--wolt-border) !important;
}

.qty-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid var(--wolt-border) !important;
  box-shadow: none !important;
}

.qty-value,
.product-card .qty-value {
  color: #ffffff !important;
}

/* =========================================================
   BACK BUTTONS / EMPTY STATES
   ========================================================= */

.back-btn,
.close-btn {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid var(--wolt-border) !important;
  box-shadow: none !important;
}

.empty-state {
  color: var(--wolt-muted) !important;
  background: var(--wolt-card) !important;
  border: 1px solid var(--wolt-border) !important;
  box-shadow: none !important;
}

/* =========================================================
   CART DRAWER — עגלה כהה
   ========================================================= */

.cart-drawer-overlay {
  background: rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.cart-drawer {
  color: #ffffff !important;
  background: #12141d !important;
  border: 1px solid var(--wolt-border) !important;
  box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.45) !important;
}

.cart-drawer-head,
.cart-footer,
.cart-items {
  background: #12141d !important;
  border-color: var(--wolt-border) !important;
}

.cart-drawer-title,
.cart-summary-total,
.cart-item-name,
.cart-item-total {
  color: #ffffff !important;
}

.cart-summary-title,
.cart-item-price {
  color: var(--wolt-muted) !important;
}

.cart-item {
  background: var(--wolt-card) !important;
  border: 1px solid var(--wolt-border) !important;
  box-shadow: none !important;
}

.cart-item-image {
  background: var(--wolt-card-soft) !important;
  border: 1px solid var(--wolt-border) !important;
}

.checkout-btn,
#continueOrderBtn,
#sendOrderBtn,
.cart-footer .checkout-btn {
  color: #ffffff !important;
  background: var(--wolt-orange) !important;
  border: 1px solid rgba(255, 138, 42, 0.55) !important;
  box-shadow: 0 14px 30px rgba(255, 107, 22, 0.22) !important;
}

/* =========================================================
   FLOATING CART
   ========================================================= */

.floating-cart-bar {
  bottom: 82px !important;
}

.floating-cart-button {
  color: #ffffff !important;
  background: rgba(21, 23, 34, 0.94) !important;
  border: 1px solid var(--wolt-border-strong) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38) !important;
}

/* =========================================================
   BOTTOM NAV — סרגל תחתון כמו אפליקציה
   ========================================================= */

.bottom-app-nav {
  position: fixed !important;
  right: 12px !important;
  left: 12px !important;
  bottom: 12px !important;
  z-index: 120 !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  min-height: 68px !important;
  padding: 8px !important;
  border-radius: 24px !important;
  background: rgba(17, 19, 28, 0.92) !important;
  border: 1px solid var(--wolt-border-strong) !important;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.46) !important;
  backdrop-filter: blur(22px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
}

.bottom-app-nav-btn {
  min-height: 52px !important;
  border-radius: 18px !important;
  color: var(--wolt-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

.bottom-app-nav-btn.active,
.bottom-app-nav-btn:hover {
  color: var(--wolt-orange) !important;
  background: rgba(255, 107, 22, 0.1) !important;
  border-color: rgba(255, 107, 22, 0.22) !important;
}

.bottom-app-nav-icon {
  stroke: currentColor !important;
}

.bottom-app-nav-label {
  color: currentColor !important;
  font-weight: 850 !important;
}

.bottom-app-nav-badge {
  background: var(--wolt-orange) !important;
  color: #ffffff !important;
  border: 2px solid #11131c !important;
}

/* =========================================================
   FOOTER LINKS
   ========================================================= */

.site-footer-links {
  color: var(--wolt-muted) !important;
  border-top: 1px solid var(--wolt-border) !important;
}

.site-footer-links a {
  color: var(--wolt-muted) !important;
}

.site-footer-links a:hover {
  color: #ffffff !important;
}

/* =========================================================
   ACCESSIBILITY — לא שוברים, רק מתאימים צבעים
   ========================================================= */

button:focus-visible,
a:focus-visible,
textarea:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--wolt-orange) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(255, 107, 22, 0.22) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {
  :root {
    --page-max-width: 100%;
  }

  .topbar {
    padding: 10px 12px !important;
  }

  .topbar-inner {
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    gap: 8px !important;
  }

  .logo-wrap {
    height: 38px !important;
  }

  .logo-wrap img,
  #logoImg {
    height: 28px !important;
    max-width: 112px !important;
  }

  .account-top-button,
  .cart-fab {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 14px !important;
  }

  .app-shell {
    padding: 12px 12px 112px !important;
  }

  .search-section {
    margin-bottom: 14px !important;
  }

  .search-input-wrapper {
    min-height: 46px !important;
    border-radius: 16px !important;
    padding: 0 14px !important;
  }

  #searchInput {
    font-size: 14px !important;
  }

  .hero {
    margin-bottom: 22px !important;
  }

  .hero-banner-slider {
    height: 144px !important;
    min-height: 144px !important;
    border-radius: 22px !important;
  }

  .hero-title {
    font-size: 25px !important;
  }

  .hero-sub {
    font-size: 12px !important;
  }

  .section {
    padding-bottom: 24px !important;
  }

  .section-title {
    font-size: 18px !important;
  }

  .section-note {
    font-size: 12px !important;
  }

  .categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .category-card,
  .all-products-card,
  .categories-grid .card {
    min-height: 110px !important;
    border-radius: 16px !important;
  }

  .category-image-wrap,
  .category-card.text-only .category-image-wrap,
  .text-only-wrap {
    height: 72px !important;
    padding: 13px !important;
  }

  .category-image-wrap img {
    max-width: 48px !important;
    max-height: 48px !important;
  }

  .category-body {
    padding: 8px 6px 9px !important;
  }

  .category-name,
  .category-card .category-name,
  .all-products-card .category-name {
    font-size: 11.5px !important;
    line-height: 1.22 !important;
  }

  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .product-card,
  .products-grid .card,
  .card.product-card {
    border-radius: 18px !important;
  }

  .product-image-wrap {
    height: 118px !important;
    padding: 13px !important;
  }

  .product-image-wrap img {
    max-height: 88px !important;
  }

  .product-body {
    padding: 11px !important;
  }

  .product-name,
  .product-card .product-name {
    min-height: 38px !important;
    font-size: 12.5px !important;
  }

  .price,
  .product-card .price {
    font-size: 15px !important;
  }

  .pill,
  .product-card .pill {
    font-size: 10px !important;
    padding: 5px 7px !important;
  }

  .qty-box,
  .product-card .qty-box {
    min-width: 104px !important;
    height: 40px !important;
  }

  .qty-btn {
    width: 31px !important;
    height: 31px !important;
  }

  .bottom-app-nav {
    right: 10px !important;
    left: 10px !important;
    bottom: 10px !important;
    min-height: 64px !important;
    border-radius: 22px !important;
  }

  .bottom-app-nav-btn {
    min-height: 48px !important;
    border-radius: 16px !important;
  }

  .bottom-app-nav-label {
    font-size: 10.5px !important;
  }
}

@media (max-width: 390px) {
  .categories-grid {
    gap: 8px !important;
  }

  .category-name,
  .category-card .category-name,
  .all-products-card .category-name {
    font-size: 10.8px !important;
  }

  .product-name,
  .product-card .product-name {
    font-size: 12px !important;
  }
}

/* =========================================================
   END — ILAI MARKET WOLT DARK APP REDESIGN / STAGE 1
   ========================================================= */
/* =========================================================
   ILAI MARKET — WOLT DARK APP REDESIGN / STAGE 3
   קטגוריות כמו אפליקציית Wolt
   מדביקים בסוף style.css בלבד
   ========================================================= */

/* אזור הקטגוריות הכללי */
html body main#mainContent #categoriesSection {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 0 0 28px !important;
}

/* אם הכותרת הראשית "קטגוריות / לבחירתך" חוזרת — מסתירים אותה */
html body main#mainContent #categoriesSection > .section-head {
  display: none !important;
}

/* עטיפת כל הסליידים */
html body main#mainContent #categories.category-sliders-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: block !important;
}

/* כל סלייד קטגוריות */
html body main#mainContent .category-slider-section {
  width: 100% !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
}

/* ראש הסלייד — כותרת + חצים */
html body main#mainContent .category-slider-head {
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 0 2px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 9px !important;

  direction: rtl !important;
}

/* כותרת הסלייד */
html body main#mainContent .category-slider-title {
  order: 1 !important;

  margin: 0 !important;
  padding: 8px 15px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #fff7ed !important;
  background: rgba(255, 107, 22, 0.14) !important;
  border: 1px solid rgba(255, 107, 22, 0.28) !important;
  border-radius: 999px !important;

  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* החצים ליד הכותרת */
html body main#mainContent .category-slider-arrows {
  order: 2 !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* עיצוב החצים */
html body main#mainContent .category-slider-arrow {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 999px !important;

  color: #ffffff !important;
  background: rgba(255, 107, 22, 0.95) !important;
  border: 1px solid rgba(255, 138, 42, 0.65) !important;

  font-size: 19px !important;
  font-weight: 950 !important;
  line-height: 1 !important;

  box-shadow: 0 8px 18px rgba(255, 107, 22, 0.20) !important;
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important;
}

html body main#mainContent .category-slider-arrow:hover {
  background: #ff7a1f !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(255, 107, 22, 0.26) !important;
}

html body main#mainContent .category-slider-arrow:active {
  transform: scale(0.94) !important;
}

/* מסילת הסלייד */
html body main#mainContent .category-slider-track {
  width: 100% !important;
  max-width: 100% !important;

  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 13px !important;

  padding: 0 2px 5px !important;
  margin: 0 !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  direction: rtl !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
}

html body main#mainContent .category-slider-track::-webkit-scrollbar {
  display: none !important;
}

/* כל פריט בסלייד */
html body main#mainContent .category-slider-item {
  flex: 0 0 154px !important;
  width: 154px !important;
  min-width: 154px !important;
  max-width: 154px !important;

  padding: 0 !important;
  margin: 0 !important;

  scroll-snap-align: start !important;
}

/* כרטיס קטגוריה — בסיס */
html body main#mainContent #categories .category-card,
html body main#mainContent .category-slider-item .category-card,
html body main#mainContent .category-extra-regular-grid .category-card {
  width: 100% !important;
  min-height: 132px !important;
  height: 132px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;

  border-radius: 18px !important;
  background: #191c27 !important;
  background-color: #191c27 !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;

  box-shadow: none !important;
  cursor: pointer !important;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease !important;
}

/* ביטול אפקטים ישנים על הכרטיס */
html body main#mainContent #categories .category-card::before,
html body main#mainContent #categories .category-card::after {
  display: none !important;
  content: none !important;
}

/* מעבר עכבר */
html body main#mainContent #categories .category-card:hover {
  transform: translateY(-2px) !important;
  background: #1d2130 !important;
  border-color: rgba(255, 107, 22, 0.34) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26) !important;
}

/* אזור התמונה */
html body main#mainContent #categories .category-image-wrap,
html body main#mainContent #categories .category-card.text-only .category-image-wrap,
html body main#mainContent #categories .text-only-wrap {
  width: 100% !important;
  height: 82px !important;
  min-height: 82px !important;
  max-height: 82px !important;

  padding: 12px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: linear-gradient(180deg, #222635 0%, #1b1f2d 100%) !important;
  background-color: #202433 !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065) !important;

  aspect-ratio: auto !important;
  overflow: hidden !important;
}

/* תמונת קטגוריה */
html body main#mainContent #categories .category-image-wrap img {
  width: auto !important;
  height: auto !important;
  max-width: 76px !important;
  max-height: 58px !important;

  object-fit: contain !important;
  object-position: center center !important;

  padding: 0 !important;
  margin: 0 !important;

  transform: none !important;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.25)) !important;
}

/* גוף הכרטיס */
html body main#mainContent #categories .category-body,
html body main#mainContent #categories .category-card.text-only .category-body,
html body main#mainContent #categories .all-products-card .category-body {
  flex: 1 !important;

  width: 100% !important;
  min-height: 50px !important;
  max-height: 50px !important;

  padding: 8px 9px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
}

/* שם הקטגוריה */
html body main#mainContent #categories .category-name,
html body main#mainContent #categories .category-card .category-name,
html body main#mainContent #categories .all-products-card .category-name {
  width: 100% !important;
  min-height: 0 !important;
  max-height: 36px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;

  color: #ffffff !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  font-size: 12.8px !important;
  font-weight: 900 !important;
  line-height: 1.22 !important;
  text-align: center !important;
  text-shadow: none !important;

  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* אייקון לקטגוריה בלי תמונה */
html body main#mainContent #categories .text-only-icon,
html body main#mainContent #categories .all-products-card .text-only-icon {
  width: 54px !important;
  height: 54px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 18px !important;
  color: #ff7a1f !important;
  background: rgba(255, 107, 22, 0.11) !important;
  border: 1px solid rgba(255, 107, 22, 0.22) !important;
  box-shadow: none !important;

  font-size: 22px !important;
  font-weight: 950 !important;
}

/* קטגוריות נוספות — אם יש קטגוריות שלא בסלייד */
html body main#mainContent .category-extra-regular-section {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto 26px !important;
  padding: 0 !important;
}

html body main#mainContent .category-extra-regular-section .section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

html body main#mainContent .category-extra-regular-section .section-title {
  margin: 0 !important;
  padding: 8px 15px !important;

  color: #fff7ed !important;
  background: rgba(255, 107, 22, 0.14) !important;
  border: 1px solid rgba(255, 107, 22, 0.28) !important;
  border-radius: 999px !important;

  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

html body main#mainContent .category-extra-regular-section .section-note {
  display: none !important;
}

html body main#mainContent .category-extra-regular-grid {
  width: 100% !important;
  max-width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 13px !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* מצב ללא סליידים — גריד רגיל */
html body main#mainContent #categories.categories-grid {
  width: 100% !important;
  max-width: 980px !important;

  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 13px !important;

  margin: 0 auto !important;
  padding: 0 !important;
}

/* פוקוס נגיש וברור */
html body main#mainContent #categories .category-card:focus-visible {
  outline: 2px solid #ff7a1f !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(255, 107, 22, 0.20) !important;
}

/* =========================================================
   MOBILE — קטגוריות כמו אפליקציה
   ========================================================= */

@media (max-width: 680px) {
  html body main#mainContent #categoriesSection {
    max-width: 100% !important;
    padding-bottom: 24px !important;
  }

  html body main#mainContent .category-slider-section {
    margin-bottom: 24px !important;
  }

  html body main#mainContent .category-slider-head {
    margin-bottom: 10px !important;
    padding: 0 1px !important;
    gap: 7px !important;
  }

  html body main#mainContent .category-slider-title,
  html body main#mainContent .category-extra-regular-section .section-title {
    padding: 7px 13px !important;
    font-size: 13.5px !important;
  }

  html body main#mainContent .category-slider-arrow {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    font-size: 18px !important;
  }

  html body main#mainContent .category-slider-track {
    gap: 10px !important;
    padding: 0 1px 4px !important;
  }

  html body main#mainContent .category-slider-item {
    flex: 0 0 138px !important;
    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;
  }

  html body main#mainContent #categories .category-card,
  html body main#mainContent .category-slider-item .category-card,
  html body main#mainContent .category-extra-regular-grid .category-card {
    height: 118px !important;
    min-height: 118px !important;
    border-radius: 16px !important;
  }

  html body main#mainContent #categories .category-image-wrap,
  html body main#mainContent #categories .category-card.text-only .category-image-wrap,
  html body main#mainContent #categories .text-only-wrap {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    padding: 10px !important;
  }

  html body main#mainContent #categories .category-image-wrap img {
    max-width: 64px !important;
    max-height: 50px !important;
  }

  html body main#mainContent #categories .category-body,
  html body main#mainContent #categories .category-card.text-only .category-body,
  html body main#mainContent #categories .all-products-card .category-body {
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 7px 7px !important;
  }

  html body main#mainContent #categories .category-name,
  html body main#mainContent #categories .category-card .category-name,
  html body main#mainContent #categories .all-products-card .category-name {
    max-height: 32px !important;
    font-size: 11.6px !important;
    line-height: 1.18 !important;
  }

  html body main#mainContent .category-extra-regular-grid,
  html body main#mainContent #categories.categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (max-width: 390px) {
  html body main#mainContent .category-slider-item {
    flex-basis: 130px !important;
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
  }

  html body main#mainContent #categories .category-name,
  html body main#mainContent #categories .category-card .category-name,
  html body main#mainContent #categories .all-products-card .category-name {
    font-size: 11px !important;
  }
}

/* =========================================================
   END — STAGE 3 CATEGORIES
   ========================================================= */
   /* =========================================================
   ILAI MARKET — STAGE 3.1
   תיקון קטגוריות למראה Wolt אמיתי יותר
   ========================================================= */

/* מרכז את כל אזור הקטגוריות כמו אפליקציה */
html body main#mainContent #categoriesSection {
  max-width: 760px !important;
  margin: 0 auto !important;
}

/* כל סלייד קטגוריות */
html body main#mainContent .category-slider-section {
  margin-bottom: 30px !important;
}

/* ראש הסלייד */
html body main#mainContent .category-slider-head {
  justify-content: flex-end !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

/* כותרת קטגוריה כמו תג קטן */
html body main#mainContent .category-slider-title {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

/* החצים יותר עדינים */
html body main#mainContent .category-slider-arrow {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  background: #ff6b16 !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(255, 107, 22, 0.18) !important;
  font-size: 17px !important;
}

/* המסילה */
html body main#mainContent .category-slider-track {
  gap: 12px !important;
  padding: 0 2px 4px !important;
}

/* גודל כרטיס */
html body main#mainContent .category-slider-item {
  flex: 0 0 150px !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}

/* הכרטיס עצמו */
html body main#mainContent #categories article.card.category-card,
html body main#mainContent .category-slider-item article.card.category-card {
  height: 126px !important;
  min-height: 126px !important;
  max-height: 126px !important;

  border-radius: 18px !important;
  overflow: hidden !important;

  background: #1b1e2b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;

  display: flex !important;
  flex-direction: column !important;
}

/* מבטל חצים/פסים ישנים שנדבקו לכרטיסים */
html body main#mainContent #categories article.card.category-card::before,
html body main#mainContent #categories article.card.category-card::after,
html body main#mainContent #categories article.card.category-card .category-name::before,
html body main#mainContent #categories article.card.category-card .category-name::after,
html body main#mainContent #categories article.card.category-card .category-body::before,
html body main#mainContent #categories article.card.category-card .category-body::after {
  display: none !important;
  content: none !important;
}

/* אזור התמונה — כהה ולא לבן */
html body main#mainContent #categories article.card.category-card > .category-image-wrap {
  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;

  padding: 0 !important;
  margin: 0 !important;

  background: #222636 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;
}

/* תמונות קטגוריה — ממלאות יפה כמו כרטיסים של אפליקציה */
html body main#mainContent #categories article.card.category-card > .category-image-wrap img {
  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center center !important;

  padding: 0 !important;
  margin: 0 !important;

  filter: none !important;
  transform: none !important;
}

/* שכבת כהות עדינה על תמונות כדי שלא יצעקו */
html body main#mainContent #categories article.card.category-card > .category-image-wrap::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.02),
    rgba(0, 0, 0, 0.18)
  ) !important;
  pointer-events: none !important;
}

/* חשוב כדי שהשכבה תעבוד */
html body main#mainContent #categories article.card.category-card > .category-image-wrap {
  position: relative !important;
}

/* גוף הכרטיס — כבר לא לבן */
html body main#mainContent #categories article.card.category-card > .category-body {
  flex: 1 !important;

  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;

  padding: 7px 8px !important;
  margin: 0 !important;

  background: #1b1e2b !important;
  background-color: #1b1e2b !important;
  border: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* שם קטגוריה */
html body main#mainContent #categories article.card.category-card > .category-body > .category-name {
  color: #ffffff !important;
  background: transparent !important;

  width: 100% !important;
  max-height: 34px !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;

  font-size: 12.5px !important;
  font-weight: 900 !important;
  line-height: 1.22 !important;
  text-align: center !important;

  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* אפקט מעבר */
html body main#mainContent #categories article.card.category-card:hover {
  transform: translateY(-2px) !important;
  background: #202433 !important;
  border-color: rgba(255, 107, 22, 0.35) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28) !important;
}

/* מובייל */
@media (max-width: 680px) {
  html body main#mainContent #categoriesSection {
    max-width: 100% !important;
  }

  html body main#mainContent .category-slider-item {
    flex: 0 0 132px !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
  }

  html body main#mainContent #categories article.card.category-card,
  html body main#mainContent .category-slider-item article.card.category-card {
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
    border-radius: 16px !important;
  }

  html body main#mainContent #categories article.card.category-card > .category-image-wrap {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
  }

  html body main#mainContent #categories article.card.category-card > .category-body {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 7px !important;
  }

  html body main#mainContent #categories article.card.category-card > .category-body > .category-name {
    font-size: 11.4px !important;
  }
}
/* =========================================================
   ILAI MARKET — WOLT DARK APP REDESIGN / STAGE 4
   כרטיסי מוצרים כמו אפליקציית Wolt
   מדביקים בסוף style.css בלבד
   ========================================================= */

/* אזור המוצרים */
html body main#mainContent #productsSection {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 0 0 34px !important;
}

/* ראש אזור המוצרים */
html body main#mainContent #productsSection .section-head {
  margin: 0 0 16px !important;
  padding: 0 2px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* כותרת מוצרים */
html body main#mainContent #productsTitle {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 21px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  text-shadow: none !important;
}

/* כמות מוצרים */
html body main#mainContent #productsCount {
  color: rgba(255, 255, 255, 0.52) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

/* כפתור חזרה */
html body main#mainContent #productsSection .back-row {
  padding: 0 0 16px !important;
  margin: 0 !important;
}

html body main#mainContent #productsSection .back-btn {
  min-height: 40px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;

  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  box-shadow: none !important;

  font-size: 13px !important;
  font-weight: 900 !important;
}

/* גריד מוצרים */
html body main#mainContent #products.products-grid {
  width: 100% !important;
  max-width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* כרטיס מוצר בסיס */
html body main#mainContent #products article.card.product-card,
html body main#mainContent #products .product-card,
html body main#mainContent .products-grid article.card.product-card {
  width: 100% !important;
  min-height: 288px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;

  border-radius: 22px !important;
  background: #1b1e2b !important;
  background-color: #1b1e2b !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;

  box-shadow: none !important;
  transform: none !important;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease !important;
}

/* ביטול אפקטים ישנים */
html body main#mainContent #products article.card.product-card::before,
html body main#mainContent #products article.card.product-card::after,
html body main#mainContent #products .product-card::before,
html body main#mainContent #products .product-card::after {
  display: none !important;
  content: none !important;
}

/* ריחוף בדסקטופ */
html body main#mainContent #products article.card.product-card:hover,
html body main#mainContent #products .product-card:hover {
  transform: translateY(-2px) !important;
  background: #202433 !important;
  border-color: rgba(255, 107, 22, 0.36) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28) !important;
}

/* אזור תמונת מוצר */
html body main#mainContent #products article.card.product-card > .product-image-wrap,
html body main#mainContent #products .product-card > .product-image-wrap {
  width: 100% !important;
  height: 138px !important;
  min-height: 138px !important;
  max-height: 138px !important;

  padding: 14px !important;
  margin: 0 !important;

  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: linear-gradient(180deg, #25293a 0%, #202433 100%) !important;
  background-color: #232738 !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065) !important;

  aspect-ratio: auto !important;
  overflow: hidden !important;
}

/* תמונת מוצר — ברירת מחדל: נקייה באמצע */
html body main#mainContent #products article.card.product-card > .product-image-wrap img,
html body main#mainContent #products .product-card > .product-image-wrap img {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  object-position: center center !important;

  padding: 0 !important;
  margin: 0 !important;

  display: block !important;

  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.24)) !important;
  transform: none !important;
}

/* אם מוצר מוגדר image-fit-cover מהניהול */
html body main#mainContent #products article.card.product-card.image-fit-cover > .product-image-wrap,
html body main#mainContent #products .product-card.image-fit-cover > .product-image-wrap {
  padding: 0 !important;
}

html body main#mainContent #products article.card.product-card.image-fit-cover > .product-image-wrap img,
html body main#mainContent #products .product-card.image-fit-cover > .product-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  filter: none !important;
}

/* שכבת כהות עדינה למוצרים עם תמונה מלאה */
html body main#mainContent #products article.card.product-card.image-fit-cover > .product-image-wrap::after,
html body main#mainContent #products .product-card.image-fit-cover > .product-image-wrap::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.00),
    rgba(0, 0, 0, 0.16)
  ) !important;
}

/* גוף כרטיס מוצר */
html body main#mainContent #products article.card.product-card > .product-body,
html body main#mainContent #products .product-card > .product-body {
  flex: 1 !important;

  width: 100% !important;
  padding: 13px 13px 12px !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  background: #1b1e2b !important;
  background-color: #1b1e2b !important;

  border: 0 !important;
}

/* שם מוצר */
html body main#mainContent #products .product-name,
html body main#mainContent #products article.card.product-card .product-name {
  min-height: 39px !important;
  max-height: 39px !important;

  margin: 0 0 8px !important;
  padding: 0 !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;

  color: #ffffff !important;
  background: transparent !important;

  font-size: 13.5px !important;
  font-weight: 900 !important;
  line-height: 1.28 !important;
  text-align: right !important;

  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* שורת מחיר / תגית */
html body main#mainContent #products .price-row {
  width: 100% !important;

  margin: 0 0 11px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

/* מחיר */
html body main#mainContent #products .price,
html body main#mainContent #products article.card.product-card .price {
  margin: 0 !important;
  padding: 0 !important;

  color: #ff7a1f !important;

  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  text-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* תגית קטנה כמו קטגוריה / יחידה */
html body main#mainContent #products .pill,
html body main#mainContent #products article.card.product-card .pill {
  min-height: 24px !important;

  padding: 5px 8px !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  color: rgba(255, 255, 255, 0.62) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;

  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  box-shadow: none !important;
}

/* אזור פעולות */
html body main#mainContent #products .product-actions {
  width: 100% !important;
  margin-top: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 9px !important;
}

/* כפתור הוספה לפני שיש כמות */
html body main#mainContent #products article.card.product-card .wolt-btn {
  width: 100% !important;
  min-height: 42px !important;

  padding: 0 12px !important;
  margin: 0 !important;

  border-radius: 15px !important;

  color: #ffffff !important;
  background: #ff6b16 !important;
  border: 1px solid rgba(255, 138, 42, 0.55) !important;

  font-size: 13.5px !important;
  font-weight: 950 !important;
  line-height: 1 !important;

  box-shadow: 0 10px 22px rgba(255, 107, 22, 0.18) !important;
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important;
}

/* קופסת כמות */
html body main#mainContent #products .qty-box,
html body main#mainContent #products article.card.product-card .qty-box {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;

  padding: 4px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;

  border-radius: 15px !important;

  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.085) !important;

  box-shadow: none !important;
}

/* פלוס / מינוס */
html body main#mainContent #products .qty-btn,
html body main#mainContent #products article.card.product-card .qty-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 12px !important;

  color: #ffffff !important;
  background: #ff6b16 !important;
  border: 1px solid rgba(255, 138, 42, 0.55) !important;

  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1 !important;

  box-shadow: 0 8px 18px rgba(255, 107, 22, 0.18) !important;
}

html body main#mainContent #products .qty-btn:hover {
  background: #ff7a1f !important;
}

html body main#mainContent #products .qty-btn:active {
  transform: scale(0.92) !important;
}

/* מספר כמות */
html body main#mainContent #products .qty-value,
html body main#mainContent #products article.card.product-card .qty-value {
  min-width: 30px !important;

  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* תגית אזל מהמלאי */
html body main#mainContent #products .out-of-stock-badge,
html body main#mainContent #products article.card.product-card .out-of-stock-badge {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 4 !important;

  padding: 6px 10px !important;

  border-radius: 999px !important;

  color: #ffffff !important;
  background: #ef4444 !important;

  font-size: 11px !important;
  font-weight: 950 !important;

  box-shadow: 0 10px 20px rgba(239, 68, 68, 0.28) !important;
}

/* מוצרים אזלו מהמלאי */
html body main#mainContent #products .product-card.out-of-stock,
html body main#mainContent #products article.card.product-card.out-of-stock {
  opacity: 0.62 !important;
}

/* מצב ריק */
html body main#mainContent #products .empty-state {
  padding: 34px 18px !important;

  color: rgba(255, 255, 255, 0.62) !important;
  background: #1b1e2b !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 22px !important;
  box-shadow: none !important;

  font-weight: 850 !important;
}

/* פוקוס נגיש */
html body main#mainContent #products .product-card:focus-visible,
html body main#mainContent #products .qty-btn:focus-visible {
  outline: 2px solid #ff7a1f !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(255, 107, 22, 0.20) !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  html body main#mainContent #products.products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  html body main#mainContent #products article.card.product-card,
  html body main#mainContent #products .product-card {
    min-height: 276px !important;
  }

  html body main#mainContent #products article.card.product-card > .product-image-wrap,
  html body main#mainContent #products .product-card > .product-image-wrap {
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {
  html body main#mainContent #productsSection {
    max-width: 100% !important;
    padding-bottom: 28px !important;
  }

  html body main#mainContent #productsSection .section-head {
    margin-bottom: 13px !important;
  }

  html body main#mainContent #productsTitle {
    font-size: 18px !important;
  }

  html body main#mainContent #productsCount {
    font-size: 12px !important;
  }

  html body main#mainContent #products.products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html body main#mainContent #products article.card.product-card,
  html body main#mainContent #products .product-card,
  html body main#mainContent .products-grid article.card.product-card {
    min-height: 248px !important;
    border-radius: 18px !important;
  }

  html body main#mainContent #products article.card.product-card > .product-image-wrap,
  html body main#mainContent #products .product-card > .product-image-wrap {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    padding: 11px !important;
  }

  html body main#mainContent #products article.card.product-card > .product-body,
  html body main#mainContent #products .product-card > .product-body {
    padding: 11px !important;
  }

  html body main#mainContent #products .product-name,
  html body main#mainContent #products article.card.product-card .product-name {
    min-height: 36px !important;
    max-height: 36px !important;

    margin-bottom: 8px !important;

    font-size: 12.2px !important;
    line-height: 1.25 !important;
  }

  html body main#mainContent #products .price-row {
    margin-bottom: 10px !important;
    gap: 6px !important;
  }

  html body main#mainContent #products .price,
  html body main#mainContent #products article.card.product-card .price {
    font-size: 15.5px !important;
  }

  html body main#mainContent #products .pill,
  html body main#mainContent #products article.card.product-card .pill {
    padding: 5px 7px !important;
    font-size: 9.8px !important;
  }

  html body main#mainContent #products article.card.product-card .wolt-btn {
    min-height: 39px !important;
    border-radius: 14px !important;
    font-size: 12.5px !important;
  }

  html body main#mainContent #products .qty-box,
  html body main#mainContent #products article.card.product-card .qty-box {
    height: 39px !important;
    border-radius: 14px !important;
  }

  html body main#mainContent #products .qty-btn,
  html body main#mainContent #products article.card.product-card .qty-btn {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    min-height: 31px !important;
    border-radius: 11px !important;
    font-size: 18px !important;
  }

  html body main#mainContent #products .qty-value {
    font-size: 13px !important;
  }
}

@media (max-width: 390px) {
  html body main#mainContent #products.products-grid {
    gap: 10px !important;
  }

  html body main#mainContent #products article.card.product-card,
  html body main#mainContent #products .product-card {
    min-height: 238px !important;
  }

  html body main#mainContent #products article.card.product-card > .product-image-wrap,
  html body main#mainContent #products .product-card > .product-image-wrap {
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
  }

  html body main#mainContent #products .product-name,
  html body main#mainContent #products article.card.product-card .product-name {
    font-size: 11.6px !important;
  }

  html body main#mainContent #products .price,
  html body main#mainContent #products article.card.product-card .price {
    font-size: 14.5px !important;
  }
}

/* =========================================================
   END — STAGE 4 PRODUCTS
   ========================================================= */
   /* =========================================================
   ILAI MARKET — STAGE 3.2
   החזרת שמות הקטגוריות מעל התמונות
   מדביקים בסוף style.css
   ========================================================= */

/* כרטיס קטגוריה — תמונה עם כיתוב בתחתית */
html body main#mainContent #categories article.card.category-card,
html body main#mainContent .category-slider-item article.card.category-card {
  position: relative !important;
  height: 118px !important;
  min-height: 118px !important;
  max-height: 118px !important;
  overflow: hidden !important;
  border-radius: 17px !important;
  background: #1b1e2b !important;
}

/* התמונה ממלאת את כל הכרטיס */
html body main#mainContent #categories article.card.category-card > .category-image-wrap {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;

  padding: 0 !important;
  margin: 0 !important;

  background: #202433 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* תמונת קטגוריה */
html body main#mainContent #categories article.card.category-card > .category-image-wrap img {
  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center center !important;

  padding: 0 !important;
  margin: 0 !important;

  filter: none !important;
}

/* שכבת כהות כדי שהכיתוב יהיה קריא */
html body main#mainContent #categories article.card.category-card > .category-image-wrap::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.10) 42%,
      rgba(0, 0, 0, 0.72) 100%
    ) !important;
}

/* גוף הכרטיס הופך לשכבת כיתוב בתחתית */
html body main#mainContent #categories article.card.category-card > .category-body {
  position: absolute !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 3 !important;

  width: 100% !important;
  height: auto !important;
  min-height: 34px !important;
  max-height: none !important;

  padding: 7px 9px 8px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.70)
  ) !important;

  border: 0 !important;
}

/* שם הקטגוריה */
html body main#mainContent #categories article.card.category-card > .category-body > .category-name {
  display: block !important;

  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;

  padding: 0 !important;
  margin: 0 !important;

  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;

  color: #ffffff !important;
  background: transparent !important;

  font-size: 12.4px !important;
  font-weight: 950 !important;
  line-height: 1.18 !important;
  text-align: center !important;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* מחיקת חץ/פס כתום פנימי אם נשאר מאחד העיצובים הישנים */
html body main#mainContent #categories article.card.category-card .category-name::before,
html body main#mainContent #categories article.card.category-card .category-name::after,
html body main#mainContent #categories article.card.category-card .category-body::before,
html body main#mainContent #categories article.card.category-card .category-body::after {
  display: none !important;
  content: none !important;
}

/* מובייל */
@media (max-width: 680px) {
  html body main#mainContent #categories article.card.category-card,
  html body main#mainContent .category-slider-item article.card.category-card {
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
    border-radius: 16px !important;
  }

  html body main#mainContent #categories article.card.category-card > .category-body {
    min-height: 32px !important;
    padding: 6px 7px 7px !important;
  }

  html body main#mainContent #categories article.card.category-card > .category-body > .category-name {
    font-size: 11.3px !important;
    line-height: 1.16 !important;
  }
}
/* =========================================================
   ILAI MARKET — STAGE 5
   Header + Search כמו Claude/Wolt
   ותפריט קטגוריות ריבועים עם תמונות
   מדביקים בסוף style.css בלבד
   ========================================================= */

/* =========================================================
   1) HEADER עליון — מקום לבאנר/לוגו קטן מהניהול
   ========================================================= */

html body .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 300 !important;

  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;

  padding: 8px 12px !important;
  margin: 0 !important;

  background: #070a10 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body .topbar-inner {
  width: 100% !important;
  max-width: 760px !important;

  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  direction: rtl !important;
  background: transparent !important;
}

/* מקום לבאנר/לוגו קטן מצד ימין */
html body .logo-wrap {
  order: 1 !important;

  width: 118px !important;
  min-width: 118px !important;
  max-width: 118px !important;

  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  overflow: hidden !important;
  background: transparent !important;
}

html body #logoImg,
html body .logo-wrap img {
  width: 118px !important;
  max-width: 118px !important;

  height: 42px !important;
  max-height: 42px !important;

  object-fit: contain !important;
  object-position: center right !important;

  display: block !important;
  background: transparent !important;
  filter: none !important;
}

/* עגלה כתומה בצד שמאל */
html body .cart-fab {
  order: 3 !important;

  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  position: relative !important;
  inset: auto !important;
  transform: none !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 16px !important;
  background: #ff6b16 !important;
  border: 1px solid rgba(255, 138, 42, 0.7) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(255, 107, 22, 0.24) !important;

  font-size: 0 !important;
}

html body .cart-fab::before {
  content: "🛒" !important;
  font-size: 18px !important;
}

/* כפתור אזור אישי לא מופיע בהדר כדי להשאיר נקי */
html body .account-top-button {
  display: none !important;
}

/* כפתור שלוש קווים עליון מוסתר — משתמשים בכפתור קטגוריות בסרגל התחתון */
html body .category-menu-button {
  display: none !important;
}

/* תג עגלה */
html body .cart-badge {
  top: -6px !important;
  left: -6px !important;

  min-width: 20px !important;
  height: 20px !important;

  background: #ffffff !important;
  color: #ff6b16 !important;
  border: 2px solid #ff6b16 !important;

  font-size: 11px !important;
  font-weight: 950 !important;
}

/* =========================================================
   2) שורת חיפוש — כמו בתמונה, ברקע של דף הבית
   ========================================================= */

html body main#mainContent.app-shell {
  padding-top: 10px !important;
}

html body #searchSection {
  width: 100% !important;
  max-width: 760px !important;

  margin: 0 auto 14px !important;
  padding: 0 16px !important;

  display: block !important;
}

html body #searchSection.search-section-collapsed {
  display: block !important;
}

html body #searchSection .search-container {
  width: 100% !important;
  max-width: 100% !important;
}

html body #searchSection .search-input-wrapper {
  width: 100% !important;
  min-height: 44px !important;
  height: 44px !important;

  padding: 0 15px !important;

  border-radius: 999px !important;

  background: #ffffff !important;
  border: 1px solid rgba(255, 107, 22, 0.32) !important;

  box-shadow:
    0 0 0 1px rgba(255, 107, 22, 0.08),
    0 10px 24px rgba(255, 107, 22, 0.14) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body #searchSection .search-input-wrapper:focus-within {
  border-color: rgba(255, 107, 22, 0.72) !important;
  box-shadow:
    0 0 0 3px rgba(255, 107, 22, 0.16),
    0 12px 26px rgba(255, 107, 22, 0.16) !important;
  transform: none !important;
}

html body #searchInput {
  color: #111827 !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
}

html body #searchInput::placeholder {
  color: #6b7280 !important;
}

html body #searchSection .clear-btn {
  background: rgba(17, 24, 39, 0.07) !important;
  color: #111827 !important;
  border: 0 !important;
}

/* תוצאות חיפוש */
html body .search-results {
  top: calc(100% + 8px) !important;

  background: #151722 !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 18px !important;

  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.38) !important;
}

html body .search-result-name,
html body .search-result-price {
  color: #ffffff !important;
}

html body .search-result-stock {
  color: rgba(255, 255, 255, 0.58) !important;
}

/* =========================================================
   3) תפריט קטגוריות — כמו Claude, ריבועים + תמונות
   ========================================================= */

html body #categorySideMenuOverlay.open,
html body .category-side-menu-overlay.open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;

  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;

  background: rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* הפאנל עצמו */
html body #categorySideMenuOverlay .category-side-menu,
html body .category-side-menu-overlay .category-side-menu {
  width: min(78vw, 360px) !important;
  max-width: 360px !important;

  height: 100vh !important;
  height: 100dvh !important;

  padding: 18px 16px !important;

  display: flex !important;
  flex-direction: column !important;

  background: #11131c !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: -20px 0 55px rgba(0, 0, 0, 0.46) !important;

  overflow: hidden !important;
  transform: none !important;
}

/* ראש התפריט */
html body .category-side-menu-head {
  flex: 0 0 auto !important;

  margin: 0 0 16px !important;
  padding: 0 0 14px !important;

  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html body .category-side-menu-head h2 {
  margin: 0 !important;
  color: #ffffff !important;

  font-size: 24px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
}

html body .category-side-menu-head p {
  margin: 5px 0 0 !important;
  color: rgba(255, 255, 255, 0.66) !important;

  font-size: 13px !important;
  font-weight: 800 !important;
}

/* איקס סגירה */
html body .category-side-menu-close {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 14px !important;

  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;

  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

/* רשימת הקטגוריות הופכת לגריד */
html body #categorySideMenuList,
html body .category-side-menu-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-content: start !important;
  gap: 9px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding: 0 0 28px !important;
  margin: 0 !important;

  scrollbar-width: thin !important;
}

/* כרטיס קטגוריה בתפריט */
html body #categorySideMenuList .category-side-menu-item,
html body .category-side-menu-list .category-side-menu-item {
  width: 100% !important;
  min-height: 88px !important;
  height: 88px !important;

  padding: 8px 6px !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  border-radius: 13px !important;

  background: #1a1d29 !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  color: #ffffff !important;

  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;

  text-align: center !important;
  overflow: hidden !important;
}

html body #categorySideMenuList .category-side-menu-item:hover,
html body .category-side-menu-list .category-side-menu-item:hover {
  background: #222636 !important;
  border-color: rgba(255, 107, 22, 0.35) !important;
}

/* אזור אישי — כרטיס רחב ראשון */
html body #categorySideMenuList .category-side-menu-account-item {
  grid-column: 1 / -1 !important;

  height: 56px !important;
  min-height: 56px !important;

  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  padding: 10px 12px !important;

  background: linear-gradient(135deg, rgba(255, 107, 22, 0.22), rgba(255, 107, 22, 0.09)) !important;
  border-color: rgba(255, 107, 22, 0.34) !important;
}

/* תמונת קטגוריה */
html body .category-side-menu-thumb {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 12px !important;

  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  overflow: hidden !important;
}

html body .category-side-menu-thumb img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit: cover !important;
  object-position: center center !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
}

html body .category-side-menu-account-thumb {
  background: rgba(255, 107, 22, 0.18) !important;
  border-color: rgba(255, 107, 22, 0.28) !important;
}

html body .category-side-menu-account-thumb svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: #ff7a1f !important;
  stroke-width: 2.2 !important;
}

/* שם קטגוריה */
html body .category-side-menu-name {
  width: 100% !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
line-clamp: 2;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  color: #ffffff !important;

  font-size: 11.5px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

html body .category-side-menu-account-item .category-side-menu-name {
  font-size: 14px !important;
  text-align: right !important;
  flex: 1 !important;
}

/* החץ הקטן לא צריך בגריד */
html body .category-side-menu-arrow {
  display: none !important;
}

/* fallback אם אין תמונה */
html body .category-side-menu-thumb-fallback {
  color: #ff7a1f !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

/* =========================================================
   4) מובייל
   ========================================================= */

@media (max-width: 520px) {
  html body .topbar {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    padding: 8px 10px !important;
  }

  html body .topbar-inner {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    gap: 8px !important;
  }

  html body .logo-wrap {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  html body #logoImg,
  html body .logo-wrap img {
    width: 112px !important;
    max-width: 112px !important;

    height: 40px !important;
    max-height: 40px !important;
  }

  html body .cart-fab {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  html body #searchSection {
    padding: 0 16px !important;
    margin-bottom: 14px !important;
  }

  html body #searchSection .search-input-wrapper {
    min-height: 42px !important;
    height: 42px !important;
  }

  html body #searchInput {
    font-size: 14px !important;
  }

  html body #categorySideMenuOverlay .category-side-menu,
  html body .category-side-menu-overlay .category-side-menu {
    width: 78vw !important;
    max-width: 330px !important;
    padding: 16px 14px !important;
  }

  html body #categorySideMenuList,
  html body .category-side-menu-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body #categorySideMenuList .category-side-menu-item,
  html body .category-side-menu-list .category-side-menu-item {
    height: 82px !important;
    min-height: 82px !important;
    border-radius: 12px !important;
  }

  html body .category-side-menu-thumb {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  html body .category-side-menu-name {
    font-size: 10.8px !important;
  }
}
/* =========================================================
   ILAI MARKET — STAGE 5.1
   תיקון אזור אישי ואיקס בתפריט קטגוריות
   מדביקים בסוף style.css
   ========================================================= */

/* ראש תפריט הקטגוריות — מסדר כותרת ואיקס */
html body .category-side-menu-head {
  position: relative !important;

  min-height: 54px !important;
  margin: 0 0 14px !important;
  padding: 0 54px 14px 0 !important;

  display: block !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* הכותרת */
html body .category-side-menu-head h2 {
  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-size: 23px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  text-align: right !important;
}

/* הטקסט הקטן מתחת לכותרת */
html body .category-side-menu-head p {
  margin: 5px 0 0 !important;

  color: rgba(255, 255, 255, 0.62) !important;

  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-align: right !important;
}

/* האיקס — בפינה שמאלית עליונה, לא מעל האזור אישי */
html body .category-side-menu-close {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;

  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 14px !important;

  background: rgba(255, 255, 255, 0.075) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;

  box-shadow: none !important;

  font-size: 25px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* אזור אישי — קטן, נקי, לא כתום ענק */
html body #categorySideMenuList .category-side-menu-account-item,
html body .category-side-menu-list .category-side-menu-account-item {
  grid-column: 1 / -1 !important;




  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;

  padding: 8px 10px !important;
  margin: 0 0 4px !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;

  border-radius: 14px !important;

  background: rgba(255, 255, 255, 0.055) !important;
  background-color: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;

  box-shadow: none !important;
  overflow: hidden !important;
}

/* אייקון אזור אישי */
html body #categorySideMenuList .category-side-menu-account-item .category-side-menu-thumb,
html body .category-side-menu-list .category-side-menu-account-item .category-side-menu-thumb {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;

  border-radius: 11px !important;

  background: rgba(255, 107, 22, 0.12) !important;
  border: 1px solid rgba(255, 107, 22, 0.24) !important;
}

/* ציור האייקון */
html body .category-side-menu-account-thumb svg {
  width: 18px !important;
  height: 18px !important;

  stroke: #ff7a1f !important;
  stroke-width: 2.2 !important;
}

/* טקסט אזור אישי */
html body #categorySideMenuList .category-side-menu-account-item .category-side-menu-name,
html body .category-side-menu-list .category-side-menu-account-item .category-side-menu-name {
  flex: 1 !important;

  color: #ffffff !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: right !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* שלא יופיע חץ באזור אישי */
html body #categorySideMenuList .category-side-menu-account-item .category-side-menu-arrow,
html body .category-side-menu-list .category-side-menu-account-item .category-side-menu-arrow {
  display: none !important;
}

/* קצת יותר אוויר בין האזור אישי לקטגוריות */
html body #categorySideMenuList,
html body .category-side-menu-list {
  gap: 8px !important;
}

/* מובייל */
@media (max-width: 520px) {
  html body .category-side-menu-head {
    min-height: 50px !important;
    padding: 0 50px 13px 0 !important;
  }

  html body .category-side-menu-close {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;

    border-radius: 13px !important;
    font-size: 24px !important;
  }

  html body .category-side-menu-head h2 {
    font-size: 22px !important;
  }

  html body #categorySideMenuList .category-side-menu-account-item,
  html body .category-side-menu-list .category-side-menu-account-item {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
  }

  html body #categorySideMenuList .category-side-menu-account-item .category-side-menu-thumb,
  html body .category-side-menu-list .category-side-menu-account-item .category-side-menu-thumb {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
  }

  html body #categorySideMenuList .category-side-menu-account-item .category-side-menu-name,
  html body .category-side-menu-list .category-side-menu-account-item .category-side-menu-name {
    font-size: 12.5px !important;
  }
}
/* =========================================================
   FIX CATEGORY MENU TITLE + X POSITION ONLY
   ========================================================= */

html body .category-side-menu-head {
  position: relative !important;

  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;

  margin: 0 0 10px !important;
  padding: 0 44px 8px 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* הכותרת */
html body .category-side-menu-head h2 {
  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-align: right !important;
}

/* בחר קטגוריה */
html body .category-side-menu-head p {
  margin: 3px 0 0 !important;
  padding: 0 !important;

  color: rgba(255, 255, 255, 0.55) !important;

  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: right !important;
}

/* האיקס */
html body .category-side-menu-close {
  position: absolute !important;

  top: 5px !important;
  left: 5px !important;
  right: auto !important;
  bottom: auto !important;

  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;

  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 9px !important;

  background: rgba(255, 255, 255, 0.075) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;

  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  box-shadow: none !important;
  transform: none !important;
}
/* =========================================================
   תיקון סופי לכפתורי חזרה — רק המילה חזרה, בלי חצים ובלי כפילות
   ========================================================= */

html body .back-row .back-btn {
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  gap: 0 !important;
}

html body .back-row .back-btn::before,
html body .back-row .back-btn::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   עיצוב טופבר חדש — רקע כהה + קטגוריות + חיפוש + עגלה
   ========================================================= */

/* === טופבר בסיס === */
.topbar {
  background: #111111 !important;
  min-height: 62px !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.5) !important;
  overflow: visible !important;
}

.topbar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: var(--page-max-width) !important;
  margin: 0 auto !important;
  padding: 9px 14px !important;
  min-height: 62px !important;
}

/* === ימין: לוגו באנר === */
.topbar-brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.topbar-brand-img {
  height: 40px;
  width: auto;
  max-width: 115px;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}

/* === אמצע: קטגוריות + חיפוש === */
.topbar-mid {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0 4px;
}

/* כפתור קטגוריות */

/* סרגל חיפוש */

/* === שמאל: עגלה === */
.topbar-cart {
  flex-shrink: 0;
}

.topbar-cart .cart-fab {
  position: static !important;
  transform: none !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #fb923c, #ea580c) !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 20px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.4) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.topbar-cart .cart-fab:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.55) !important;
}

/* עגלה מוצגת בבירור (מבטל display:none ישן) */
.topbar-cart .cart-fab,
.topbar-cart #cartFab {
  display: grid !important;
}

/* === לוגו תאימות — מוסתר לחלוטין === */
.topbar-logo-compat {
  display: none !important;
}

/* === ביטול עיצובי has-header-banner שמפריעים === */
body.has-header-banner .topbar {
  background: #111111 !important;
  overflow: visible !important;
  min-height: 62px !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
}

body.has-header-banner .topbar-inner {
  min-height: 62px !important;
  height: auto !important;
  max-height: none !important;
  padding: 9px 14px !important;
  justify-content: space-between !important;
  max-width: var(--page-max-width) !important;
  width: 100% !important;
}

body.has-header-banner .logo-wrap:not(.topbar-logo-compat) {
  display: none !important;
}

/* === רספונסיב מובייל === */
@media (max-width: 420px) {
  .topbar-inner {
    padding: 7px 10px !important;
    gap: 6px !important;
  }

  .topbar-brand-img {
    height: 34px !important;
    max-width: 90px !important;
  }

  .topbar-mid {
    gap: 5px !important;
  }

  .topbar-cart .cart-fab {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
}

/* =========================================================
   OVERRIDE FINAL — עיצוד טופבר סופי + Wolt קטגוריות
   מנצח את כל הכללים הקודמים כולל has-header-banner
   ========================================================= */

/* === 1. TOPBAR — רקע כהה, ביטול has-header-banner === */
html body.has-header-banner .topbar,
html body .topbar {
  background: #0d0d12 !important;
  height: auto !important;
  min-height: 60px !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important;
}

html body.has-header-banner .topbar-inner,
html body .topbar-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 9px 14px !important;
  min-height: 60px !important;
  height: auto !important;
  max-height: none !important;
  direction: rtl !important;
  background: transparent !important;
}

/* === 2. לוגו compat — מוסתר לחלוטין === */
html body.has-header-banner .topbar-logo-compat,
html body .topbar-logo-compat {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

html body.has-header-banner .logo-wrap,
html body .logo-wrap {
  display: none !important;
}

/* === 3. באנר לוגו ימין === */
html body .topbar-brand {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  order: 0 !important;
}

html body .topbar-brand-img {
  height: 40px !important;
  width: auto !important;
  max-width: 120px !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 6px !important;
  filter: none !important;
}

/* === 4. חיפוש אמצע === */
html body .topbar-mid {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  order: 1 !important;
  padding: 0 4px !important;
}

/* === 5. עגלה שמאל === */
html body .topbar-cart {
  flex-shrink: 0 !important;
  order: 2 !important;
}

html body .topbar-cart .cart-fab,
html body .topbar-cart #cartFab {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: grid !important;
  place-items: center !important;
  order: unset !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  background: #ff6b16 !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 20px !important;
  box-shadow: 0 4px 14px rgba(255, 107, 22, 0.4) !important;
  cursor: pointer !important;
}

/* ביטול ה-emoji מה-::before שמגיע מהסיסמה הישנה */
html body .topbar-cart .cart-fab::before {
  display: none !important;
  content: none !important;
}

html body .topbar-cart .cart-fab:hover {
  background: #ff7d2a !important;
  transform: scale(1.05) !important;
  box-shadow: 0 6px 18px rgba(255, 107, 22, 0.55) !important;
}

/* === 7. Wolt-style קטגוריות === */

html body #categoriesSection {
  background: #0d0d12 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  position: sticky !important;
  top: 60px !important;
  z-index: 40 !important;
}

html body #categoriesSection .section-head {
  display: none !important;
}

/* הגריד הופך לשורה אופקית */
html body #categories,
html body #categories.categories-grid,
html body main#mainContent #categories.category-sliders-wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  direction: rtl !important;
  align-items: center !important;
  grid-template-columns: unset !important;
}

html body #categories::-webkit-scrollbar {
  display: none !important;
}

/* slider sections (קבוצות קטגוריה) — מיישרים כ-inline */
html body #categories .category-slider-section {
  display: contents !important;
}

/* כותרות הסליידר + חצי ניווט — מוסתרים */
html body #categories .category-slider-head,
html body #categories [class*="slider-head"],
html body #categories [class*="slider-title"] {
  display: none !important;
}

/* כמו כן, row של "קטגוריות נוספות" */

/* קטגוריה בודדת → chip בסגנון Wolt */
html body #categories .category-card,
html body #categories .all-products-card {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.18s, border-color 0.18s !important;
  grid-column: unset !important;
}

html body #categories .category-card:hover,
html body #categories .category-card:active,
html body #categories .all-products-card:hover {
  background: rgba(255, 107, 22, 0.18) !important;
  border-color: rgba(255, 107, 22, 0.55) !important;
}

/* הסתרת תמונות בתוך ה-chips */
html body #categories .category-image-wrap,
html body #categories .category-image-wrap img {
  display: none !important;
}

/* הצגת שם בלבד */
html body #categories .category-body {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body #categories .category-name,
html body #categories .all-products-card .category-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  white-space: nowrap !important;
  min-height: unset !important;
  height: auto !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  display: block !important;
}

/* === 8. Main content — פדינג מותאם לאחר הסרת hero ו-search === */
html body main#mainContent.app-shell {
  padding-top: 6px !important;
}

/* === 9. רספונסיב מובייל === */
@media (max-width: 420px) {
  html body .topbar-inner {
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  html body .topbar-brand-img {
    height: 34px !important;
    max-width: 95px !important;
  }

  html body .topbar-cart .cart-fab,
  html body .topbar-cart #cartFab {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    border-radius: 12px !important;
  }
}
/* =========================================================
   ILAI MARKET — RESTORE WOLT CATEGORIES FINAL
   החזרת קטגוריות למראה Wolt אחרי השבירה
   מדביקים בסוף style.css בלבד
   ========================================================= */

/* מחזיר את גוף האתר לרוחב אפליקציה נורמלי */
html body main#mainContent.app-shell {
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 14px 16px 120px !important;
  overflow-x: hidden !important;
}

/* אזור הקטגוריות */
html body main#mainContent #categoriesSection {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0 0 28px !important;
}

/* מסתיר את "קטגוריות / לבחירתך" הראשי */
html body main#mainContent #categoriesSection > .section-head {
  display: none !important;
}

/* עטיפת כל סליידי הקטגוריות */
html body main#mainContent #categories.category-sliders-wrap {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
}

/* כל שורת קטגוריות */
html body main#mainContent .category-slider-section {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* כותרת + חצים */
html body main#mainContent .category-slider-head {
  width: 100% !important;
  margin: 0 0 10px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;

  direction: rtl !important;
  background: transparent !important;
}

/* כותרת סלייד */
html body main#mainContent .category-slider-title {
  order: 1 !important;

  margin: 0 !important;
  padding: 8px 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

/* חצים */
html body main#mainContent .category-slider-arrow {
  order: 2 !important;

  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 999px !important;
  background: #ff6b16 !important;
  color: #ffffff !important;
  border: none !important;

  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  box-shadow: 0 8px 18px rgba(255, 107, 22, 0.18) !important;
}

/* המסילה — מחזיר גלילה אופקית תקינה */
html body main#mainContent .category-slider-track {
  width: 100% !important;
  max-width: 100% !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;

  gap: 12px !important;
  padding: 0 1px 5px !important;
  margin: 0 !important;

  direction: rtl !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
}

html body main#mainContent .category-slider-track::-webkit-scrollbar {
  display: none !important;
}

/* כל כרטיס בסלייד */
html body main#mainContent .category-slider-item {
  flex: 0 0 150px !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;

  padding: 0 !important;
  margin: 0 !important;

  scroll-snap-align: start !important;
}

/* כרטיס קטגוריה */
html body main#mainContent #categories article.card.category-card,
html body main#mainContent .category-slider-item article.card.category-card {
  position: relative !important;

  width: 100% !important;
  height: 118px !important;
  min-height: 118px !important;
  max-height: 118px !important;

  padding: 0 !important;
  margin: 0 !important;

  overflow: hidden !important;
  border-radius: 17px !important;

  background: #1b1e2b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;

  display: block !important;
}

/* תמונת קטגוריה ממלאת את הכרטיס */
html body main#mainContent #categories article.card.category-card > .category-image-wrap,
html body main#mainContent .category-slider-item article.card.category-card > .category-image-wrap {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  padding: 0 !important;
  margin: 0 !important;

  background: #202433 !important;
  border: none !important;
  overflow: hidden !important;
}

/* תמונה */
html body main#mainContent #categories article.card.category-card > .category-image-wrap img,
html body main#mainContent .category-slider-item article.card.category-card > .category-image-wrap img {
  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center center !important;

  padding: 0 !important;
  margin: 0 !important;

  filter: none !important;
}

/* שכבת כהות מעל התמונה */
html body main#mainContent #categories article.card.category-card > .category-image-wrap::after,
html body main#mainContent .category-slider-item article.card.category-card > .category-image-wrap::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0.18) 48%,
    rgba(0, 0, 0, 0.62) 100%
  ) !important;

  pointer-events: none !important;
}

/* אזור שם הקטגוריה */
html body main#mainContent #categories article.card.category-card > .category-body,
html body main#mainContent .category-slider-item article.card.category-card > .category-body {
  position: absolute !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 3 !important;

  width: 100% !important;
  min-height: auto !important;

  padding: 8px 9px 9px !important;
  margin: 0 !important;

  background: transparent !important;
  border: none !important;
}

/* שם הקטגוריה */
html body main#mainContent #categories article.card.category-card .category-name,
html body main#mainContent .category-slider-item article.card.category-card .category-name {
  min-height: auto !important;
  margin: 0 !important;

  color: #ffffff !important;
  text-align: right !important;

  font-size: 12.3px !important;
  font-weight: 950 !important;
  line-height: 1.18 !important;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72) !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
}

/* מבטל שכבות ישנות שיצרו בלגן */
html body main#mainContent #categories article.card.category-card::before,
html body main#mainContent .category-slider-item article.card.category-card::before {
  display: none !important;
  content: none !important;
}

/* קטגוריות שלא משויכות לסלייד — עדיין מסודרות יפה */
html body main#mainContent .category-extra-regular-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* מובייל */
@media (max-width: 520px) {
  html body main#mainContent.app-shell {
    max-width: 100% !important;
    padding: 12px 12px 120px !important;
  }

  html body main#mainContent #categoriesSection {
    max-width: 100% !important;
  }

  html body main#mainContent .category-slider-section {
    margin-bottom: 22px !important;
  }

  html body main#mainContent .category-slider-track {
    gap: 10px !important;
    padding-bottom: 4px !important;
  }

  html body main#mainContent .category-slider-item {
    flex: 0 0 138px !important;
    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;
  }

  html body main#mainContent #categories article.card.category-card,
  html body main#mainContent .category-slider-item article.card.category-card {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    border-radius: 16px !important;
  }

  html body main#mainContent #categories article.card.category-card .category-name,
  html body main#mainContent .category-slider-item article.card.category-card .category-name {
    font-size: 11.5px !important;
  }
}
/* =========================================================
   ILAI MARKET — REPAIR AFTER CLAUDE
   תיקון רקע, קטגוריות, קטגוריות נוספות ופוטר
   מדביקים בסוף style.css בלבד
   ========================================================= */

/* מחזיר את רוחב האתר למראה אפליקציה/וולט ולא פרוס מדי במחשב */
:root {
  --page-max-width: 860px !important;
}

/* מחזיר רקע אתר ולא רק שחור שטוח */
html,
body {
  background-color: #17110d !important;
  color: #ffffff !important;
}

body {
  background-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.08) 38%,
      rgba(0, 0, 0, 0.14) 100%
    ),
    url("background-desktop.jpg") !important;
  background-repeat: repeat-y !important;
  background-position: center top !important;
  background-size: 100% auto !important;
  background-attachment: fixed !important;
}

body::before,
body::after {
  display: none !important;
}

/* מעטפת האתר — שלא תהיה רחבה מדי במחשב */
html body main#mainContent.app-shell {
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 14px 16px 130px !important;
  background: transparent !important;
  overflow-x: hidden !important;
}

/* אזור הקטגוריות */
html body main#mainContent #categoriesSection {
  width: 100% !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  padding: 0 0 28px !important;
  background: transparent !important;
}

/* שלא יהיה ריבוע/פס שחור מאחורי הסליידים */
html body main#mainContent #categories,
html body main#mainContent #categories.category-sliders-wrap,
html body main#mainContent .category-slider-section,
html body main#mainContent .category-slider-track,
html body main#mainContent .category-extra-regular-section,
html body main#mainContent .category-extra-regular-grid {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* כל שורת סלייד */
html body main#mainContent .category-slider-section {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* ראש סלייד — כותרת וחצים */
html body main#mainContent .category-slider-head {
  margin: 0 0 10px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;

  background: transparent !important;
  direction: rtl !important;
}

/* כותרת סלייד */
html body main#mainContent .category-slider-title {
  margin: 0 !important;
  padding: 8px 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* חצים */
html body main#mainContent .category-slider-arrow {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 999px !important;
  background: #ff6b16 !important;
  color: #ffffff !important;
  border: none !important;

  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* המסילה — מונע פריסה מוזרה במחשב */
html body main#mainContent .category-slider-track {
  width: 100% !important;
  max-width: 100% !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;

  gap: 12px !important;
  padding: 0 1px 5px !important;
  margin: 0 !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  direction: rtl !important;
  scrollbar-width: none !important;
  scroll-snap-type: x mandatory !important;
}

html body main#mainContent .category-slider-track::-webkit-scrollbar {
  display: none !important;
}

/* גודל כרטיסי סלייד במחשב */
html body main#mainContent .category-slider-item {
  flex: 0 0 150px !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  scroll-snap-align: start !important;
}

/* כרטיס קטגוריה */
html body main#mainContent .category-slider-item article.card.category-card,
html body main#mainContent #categories article.card.category-card {
  position: relative !important;

  width: 100% !important;
  height: 112px !important;
  min-height: 112px !important;
  max-height: 112px !important;

  padding: 0 !important;
  margin: 0 !important;

  overflow: hidden !important;
  border-radius: 16px !important;

  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
}

/* תמונה מלאה בכרטיס */
html body main#mainContent .category-slider-item article.card.category-card > .category-image-wrap,
html body main#mainContent #categories article.card.category-card > .category-image-wrap {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: none !important;
  overflow: hidden !important;
}

html body main#mainContent .category-slider-item article.card.category-card > .category-image-wrap img,
html body main#mainContent #categories article.card.category-card > .category-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center center !important;

  padding: 0 !important;
  margin: 0 !important;
  filter: none !important;
}

/* כהות עדינה על התמונה כדי שהטקסט ייקרא */
html body main#mainContent .category-slider-item article.card.category-card > .category-image-wrap::after,
html body main#mainContent #categories article.card.category-card > .category-image-wrap::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.03) 0%,
    rgba(0, 0, 0, 0.18) 50%,
    rgba(0, 0, 0, 0.62) 100%
  ) !important;

  pointer-events: none !important;
}

/* שם הקטגוריה בתחתית */
html body main#mainContent .category-slider-item article.card.category-card > .category-body,
html body main#mainContent #categories article.card.category-card > .category-body {
  position: absolute !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 3 !important;

  width: 100% !important;
  padding: 8px 9px !important;
  margin: 0 !important;

  background: transparent !important;
  border: none !important;
}

html body main#mainContent .category-slider-item article.card.category-card .category-name,
html body main#mainContent #categories article.card.category-card .category-name {
  margin: 0 !important;
  min-height: auto !important;

  color: #ffffff !important;
  background: transparent !important;

  text-align: right !important;
  font-size: 12.2px !important;
  font-weight: 950 !important;
  line-height: 1.18 !important;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75) !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
}

/* קטגוריות נוספות — מחזיר קיץ חם / מבצעים חמים וכו׳ */
html body main#mainContent .category-extra-regular-section {
  width: 100% !important;
  max-width: 780px !important;
  margin: 10px auto 28px !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
}

html body main#mainContent .category-extra-regular-section .section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

html body main#mainContent .category-extra-regular-section .section-title {
  margin: 0 !important;
  padding: 8px 14px !important;

  display: inline-flex !important;
  align-items: center !important;

  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

html body main#mainContent .category-extra-regular-section .section-note {
  display: none !important;
}

html body main#mainContent .category-extra-regular-grid {
  width: 100% !important;
  max-width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* כרטיסי קטגוריות נוספות */
html body main#mainContent .category-extra-regular-grid article.card.category-card {
  height: 112px !important;
  min-height: 112px !important;
  max-height: 112px !important;
}

/* פוטר — מחזיר תקנון / פרטיות / נגישות */
html body .site-footer-links {
  position: relative !important;
  z-index: 5 !important;

  width: 100% !important;
  max-width: 860px !important;

  margin: 22px auto 110px !important;
  padding: 18px 12px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;

  color: rgba(255, 255, 255, 0.78) !important;
  background: transparent !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

html body .site-footer-links a {
  color: rgba(255, 255, 255, 0.86) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* מחשב — שומר שלא יתפזר על כל המסך */
@media (min-width: 900px) {
  html body main#mainContent.app-shell {
    max-width: 860px !important;
  }

  html body main#mainContent #categoriesSection,
  html body main#mainContent .category-extra-regular-section {
    max-width: 760px !important;
  }

  html body main#mainContent .category-slider-item {
    flex: 0 0 150px !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }
}

/* מובייל */
@media (max-width: 520px) {
  body {
    background-image:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.16) 0%,
        rgba(0, 0, 0, 0.08) 40%,
        rgba(0, 0, 0, 0.14) 100%
      ),
      url("background-mobile.jpg") !important;
    background-attachment: scroll !important;
  }

  html body main#mainContent.app-shell {
    max-width: 100% !important;
    padding: 12px 12px 130px !important;
  }

  html body main#mainContent #categoriesSection,
  html body main#mainContent .category-extra-regular-section {
    max-width: 100% !important;
  }

  html body main#mainContent .category-slider-track {
    gap: 10px !important;
  }

  html body main#mainContent .category-slider-item {
    flex: 0 0 138px !important;
    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;
  }

  html body main#mainContent .category-slider-item article.card.category-card,
  html body main#mainContent #categories article.card.category-card,
  html body main#mainContent .category-extra-regular-grid article.card.category-card {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
  }

  html body .site-footer-links {
    margin-bottom: 105px !important;
    font-size: 12px !important;
  }
}
/* =========================================================
   ILAI MARKET — DARK DESKTOP REPAIR
   מחזיר רקע כהה ומגדיל קטגוריות במחשב
   ========================================================= */

/* רקע כהה אמיתי — בלי רקע שמנת */
html,
body {
  background: #090a0f !important;
  color: #ffffff !important;
}

body {
  background-image:
    radial-gradient(circle at 82% 0%, rgba(255, 107, 22, 0.12), transparent 30%),
    radial-gradient(circle at 12% 12%, rgba(40, 70, 130, 0.14), transparent 34%),
    linear-gradient(180deg, #090a0f 0%, #0d0f16 45%, #08090d 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

body::before,
body::after {
  display: none !important;
}

/* מחזיר את האתר לרוחב נוח במחשב */
html body main#mainContent.app-shell {
  max-width: 1040px !important;
  padding: 18px 24px 130px !important;
  background: transparent !important;
}

/* אזור הקטגוריות רחב יותר במחשב */
html body main#mainContent #categoriesSection,
html body main#mainContent .category-extra-regular-section {
  max-width: 980px !important;
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* מבטל רקעים בהירים מאחורי הקטגוריות */
html body main#mainContent #categories,
html body main#mainContent #categories.category-sliders-wrap,
html body main#mainContent .category-slider-section,
html body main#mainContent .category-slider-track,
html body main#mainContent .category-extra-regular-section,
html body main#mainContent .category-extra-regular-grid {
  background: transparent !important;
  background-color: transparent !important;
}

/* במחשב — כרטיסי קטגוריות גדולים יותר */
@media (min-width: 900px) {
  html body main#mainContent .category-slider-item {
    flex: 0 0 190px !important;
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
  }

  html body main#mainContent .category-slider-item article.card.category-card,
  html body main#mainContent #categories article.card.category-card {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
    border-radius: 18px !important;
  }

  html body main#mainContent .category-slider-track {
    gap: 14px !important;
  }

  html body main#mainContent .category-extra-regular-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  html body main#mainContent .category-extra-regular-grid article.card.category-card {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
  }
}

/* במסכים ממש רחבים — עוד טיפה יותר מרווח */
@media (min-width: 1200px) {
  html body main#mainContent.app-shell {
    max-width: 1100px !important;
  }

  html body main#mainContent #categoriesSection,
  html body main#mainContent .category-extra-regular-section {
    max-width: 1040px !important;
  }

  html body main#mainContent .category-slider-item {
    flex-basis: 205px !important;
    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;
  }

  html body main#mainContent .category-slider-item article.card.category-card,
  html body main#mainContent #categories article.card.category-card {
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
  }
}

/* פוטר על רקע כהה */
html body .site-footer-links {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 18px !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

html body .site-footer-links a {
  color: rgba(255, 255, 255, 0.9) !important;
}
/* =========================================================
   FIX — קישורי תקנון / פרטיות / נגישות לחיצים
   מדביקים בסוף style.css
   ========================================================= */

html body .site-footer-links {
  position: relative !important;
  z-index: 500 !important;

  pointer-events: auto !important;

  margin: 26px auto 150px !important;
  padding: 16px 14px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;

  max-width: 760px !important;

  background: rgba(8, 10, 14, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
}

html body .site-footer-links a {
  position: relative !important;
  z-index: 501 !important;

  pointer-events: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 36px !important;
  padding: 6px 8px !important;

  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  cursor: pointer !important;
}

html body .site-footer-links a:hover,
html body .site-footer-links a:focus-visible {
  color: #ff7a00 !important;
}

html body .site-footer-links span {
  color: rgba(255, 255, 255, 0.45) !important;
}
/* =========================================================
   FIX DESKTOP — גודל באנרים + סרגל תחתון מקצה לקצה
   מדביקים בסוף style.css בלבד
   ========================================================= */

/* מחשב בלבד — תיקון גודל הבאנר הראשי */
@media (min-width: 900px) {
  html body main#mainContent .hero {
    width: 100% !important;
    max-width: 860px !important;
    margin: 18px auto 42px !important;
    padding: 0 !important;
  }

  html body main#mainContent .hero-banner-slider {
    width: 100% !important;
    max-width: 860px !important;

    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;

    margin: 0 auto !important;

    border-radius: 22px !important;
    overflow: hidden !important;

    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28) !important;
  }

  html body main#mainContent .hero-banner-track,
  html body main#mainContent .hero-banner-slide {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
  }

  html body main#mainContent .hero-banner-slide img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    padding: 0 !important;
    margin: 0 !important;
  }
}

/* מסכים רחבים מאוד — שלא יהיה ענק מדי */
@media (min-width: 1200px) {
  html body main#mainContent .hero,
  html body main#mainContent .hero-banner-slider {
    max-width: 900px !important;
  }

  html body main#mainContent .hero-banner-slider {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }
}

/* מובייל וטאבלט — לא נוגעים כמעט כדי לא לשבור */
@media (max-width: 899px) {
  html body main#mainContent .hero {
    margin: 12px auto 26px !important;
  }
}
/* =========================================================
   סרגל תחתון — תיקון נקי ל-5 כפתורים
   מחליף את הבלוק הקודם, לא להדביק בנוסף
   ========================================================= */

html body nav#bottomAppNav.bottom-app-nav {
  position: fixed !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;

  width: 100% !important;
  max-width: none !important;
  height: 72px !important;
  min-height: 72px !important;

  margin: 0 !important;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-around !important;
  gap: 4px !important;

  background: #0a0a0c !important;
  border-radius: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-bottom: 0 !important;

  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.35) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* כל כפתור מקבל מקום שווה */
html body nav#bottomAppNav.bottom-app-nav > .bottom-app-nav-btn {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;

  margin: 0 !important;
  padding: 4px 2px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 16px !important;

  color: rgba(255, 255, 255, 0.64) !important;
  transform: none !important;
}

/* כפתור פעיל */
html body nav#bottomAppNav.bottom-app-nav > .bottom-app-nav-btn.active {
  color: #ff7a00 !important;
  background: rgba(255, 122, 0, 0.12) !important;
}

/* החיפוש באמצע — בולט אבל לא שובר את הפריסה */
html body nav#bottomAppNav.bottom-app-nav > .bottom-app-nav-btn.bottom-app-nav-search {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;

  margin: 0 !important;
  transform: none !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.64) !important;
}

/* העיגול הכתום יהיה רק סביב האייקון של החיפוש */
html body nav#bottomAppNav.bottom-app-nav > .bottom-app-nav-search .bottom-app-nav-icon-wrap {
  width: 48px !important;
  height: 48px !important;

  border-radius: 18px !important;

  background: linear-gradient(135deg, #ff7a00, #f97316) !important;
  color: #ffffff !important;

  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.30) !important;
}

/* אייקונים רגילים */
html body nav#bottomAppNav.bottom-app-nav .bottom-app-nav-icon-wrap {
  width: 24px !important;
  height: 24px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body nav#bottomAppNav.bottom-app-nav .bottom-app-nav-icon {
  width: 22px !important;
  height: 22px !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* טקסט */
html body nav#bottomAppNav.bottom-app-nav .bottom-app-nav-label {
  display: block !important;
  margin: 0 !important;

  color: currentColor !important;

  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* תג עגלה */
html body nav#bottomAppNav.bottom-app-nav .bottom-app-nav-badge {
  position: absolute !important;
  top: -4px !important;
  right: -6px !important;

  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 999px !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  border: 2px solid #0a0a0c !important;

  font-size: 10px !important;
  font-weight: 900 !important;
}

/* שלא יהיה רווח מתחת לסרגל */
html,
body {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* שלא יסתיר תוכן אחרון */
html body main#mainContent.app-shell {
  padding-bottom: 150px !important;
}
/* =========================================================
   FINAL FIX — חיפוש אמיתי בטופבר בלבד
   ========================================================= */

html body .topbar,
html body .topbar-inner,
html body .topbar-mid {
  overflow: visible !important;
}

html body .topbar {
  z-index: 9999 !important;
}

html body .topbar-mid {
  flex: 1 1 auto !important;
  min-width: 220px !important;
  max-width: 520px !important;
}

html body .topbar-mid .topbar-search-real {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body .topbar-mid .search-container {
  position: relative !important;
  width: 100% !important;
  overflow: visible !important;
}

html body .topbar-mid .search-input-wrapper {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 16px !important;

  display: flex !important;
  align-items: center !important;

  border-radius: 999px !important;
  background: rgba(13, 15, 20, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 22px rgba(0, 0, 0, 0.26) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body .topbar-mid .search-input-wrapper:focus-within {
  border-color: rgba(249, 115, 22, 0.75) !important;
  box-shadow:
    0 0 0 3px rgba(249, 115, 22, 0.16),
    0 10px 26px rgba(0, 0, 0, 0.30) !important;
}

/* אין זכוכית מגדלת */
html body .topbar-mid .search-icon,
html body .topbar-mid svg {
  display: none !important;
}

html body .topbar-mid #searchInput {
  width: 100% !important;
  height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-size: 14.5px !important;
  font-weight: 800 !important;
  line-height: 42px !important;
  text-align: right !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

html body .topbar-mid #searchInput::placeholder {
  color: rgba(255, 255, 255, 0.62) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.62) !important;
}

html body .topbar-mid #clearSearch {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  padding: 0 !important;
  margin-right: 8px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

html body .topbar-mid #clearSearch.hidden {
  display: none !important;
}

/* תוצאות החיפוש מעל הכול */
html body .topbar-mid #searchResults {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: 0 !important;

  z-index: 99999 !important;
  max-height: 420px !important;
  overflow-y: auto !important;

  padding: 8px !important;
  border-radius: 18px !important;

  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;

  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.40) !important;
}

html body .topbar-mid #searchResults.hidden {
  display: none !important;
}

html body .topbar-mid #searchResults .search-result-item {
  position: relative !important;
  z-index: 1 !important;
  background: #ffffff !important;
}

html body .topbar-mid #searchResults .search-result-name,
html body .topbar-mid #searchResults .search-result-price,
html body .topbar-mid #searchResults .search-result-stock {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

@media screen and (max-width: 768px) {
  html body .topbar-mid {
    min-width: 0 !important;
    max-width: none !important;
  }

  html body .topbar-mid .search-input-wrapper {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
  }

  html body .topbar-mid #searchInput {
    height: 40px !important;
    line-height: 40px !important;
    font-size: 13.5px !important;
  }
}
/* =========================================================
   תיקון עיצוב בלבד — חיפוש עליון שחור, מלבני, מעל הרקע
   ========================================================= */

html body .topbar,
html body .topbar-inner,
html body .topbar-mid,
html body .topbar-mid .search-container {
  overflow: visible !important;
}

html body .topbar {
  z-index: 999999 !important;
}

html body .topbar-mid {
  position: relative !important;
  z-index: 999999 !important;
}

/* המסגרת של שורת החיפוש */
html body .topbar-mid .search-input-wrapper {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;

  padding: 0 14px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;

  background: #05070b !important;
  background-color: #05070b !important;

  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 4px !important;

  box-shadow: none !important;
  outline: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  overflow: hidden !important;
  transform: none !important;
}

/* בזמן לחיצה בתוך החיפוש */
html body .topbar-mid .search-input-wrapper:focus-within {
  border-color: rgba(249, 115, 22, 0.85) !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.18) !important;
}

/* השדה עצמו — מבטל את העיצוב הכללי של input */
html body .topbar-mid #searchInput {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  background-color: transparent !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 40px !important;
  text-align: right !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

/* הטקסט האפור שבתוך השורה */
html body .topbar-mid #searchInput::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.45) !important;
}

/* כפתור ניקוי */
html body .topbar-mid #clearSearch {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;

  padding: 0 !important;
  margin-right: 8px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;

  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 3px !important;

  box-shadow: none !important;
}

html body .topbar-mid #clearSearch.hidden {
  display: none !important;
}

/* רשימת התוצאות — מעל הבאנר והרקע */
html body .topbar-mid #searchResults {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: 0 !important;

  z-index: 2147483647 !important;

  max-height: 420px !important;
  overflow-y: auto !important;

  padding: 8px !important;

  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 8px !important;

  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
}

html body .topbar-mid #searchResults.hidden {
  display: none !important;
}

/* לוודא שהטקסט בתוצאות שחור וברור */
html body .topbar-mid #searchResults,
html body .topbar-mid #searchResults * {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* מובייל */
@media screen and (max-width: 768px) {
  html body .topbar-mid .search-input-wrapper,
  html body .topbar-mid #searchInput {
    height: 38px !important;
    min-height: 38px !important;
    line-height: 38px !important;
  }

  html body .topbar-mid .search-input-wrapper {
    border-radius: 4px !important;
  }
}
/* =========================================================
   FINAL SEARCH FIX — חיפוש שעובד באמת
   ========================================================= */

/* מציג את אזור החיפוש */
html body #searchSection {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;

  width: 100% !important;
  max-width: 760px !important;
  margin: 10px auto 16px !important;
  padding: 0 16px !important;

  position: relative !important;
  z-index: 100 !important;
}

/* עוטף שורת החיפוש */
html body #searchSection .search-container {
  position: relative !important;
  width: 100% !important;
  overflow: visible !important;
}

/* קופסת החיפוש עצמה */
html body #searchSection .search-input-wrapper {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;

  padding: 0 16px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  gap: 8px !important;

  background: #ffffff !important;
  background-color: #ffffff !important;

  border: 1.5px solid rgba(249, 115, 22, 0.35) !important;
  border-radius: 999px !important;

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18) !important;

  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* פוקוס כשלוחצים בשדה */
html body #searchSection .search-input-wrapper:focus-within {
  border-color: rgba(249, 115, 22, 0.85) !important;
  box-shadow:
    0 0 0 3px rgba(249, 115, 22, 0.18),
    0 10px 26px rgba(0, 0, 0, 0.22) !important;
}

/* שדה הטקסט — כיתוב שחור על רקע לבן */
html body #searchSection #searchInput {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  background-color: transparent !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;

  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 46px !important;
  text-align: right !important;
  direction: rtl !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

/* טקסט "חפש מוצר..." */
html body #searchSection #searchInput::placeholder {
  color: rgba(17, 24, 39, 0.55) !important;
  -webkit-text-fill-color: rgba(17, 24, 39, 0.55) !important;
  opacity: 1 !important;
}

/* כפתור X לניקוי */
html body #searchSection #clearSearch {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;

  background: rgba(17, 24, 39, 0.08) !important;
  color: #111827 !important;

  border: 0 !important;
  border-radius: 999px !important;

  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  cursor: pointer !important;
}

html body #searchSection #clearSearch.hidden {
  display: none !important;
}

/* רשימת תוצאות החיפוש */
html body #searchSection #searchResults {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: 0 !important;

  z-index: 99999 !important;

  max-height: 420px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding: 8px !important;
  margin: 0 !important;

  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 18px !important;

  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.32) !important;
}

html body #searchSection #searchResults.hidden {
  display: none !important;
}

/* כל מוצר בתוצאות */
html body #searchSection #searchResults .search-result-item {
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  align-items: center !important;
  gap: 10px !important;

  width: 100% !important;
  min-height: 70px !important;

  padding: 8px !important;
  margin: 0 0 6px !important;

  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 14px !important;

  cursor: pointer !important;
}

html body #searchSection #searchResults .search-result-item:last-child {
  margin-bottom: 0 !important;
}

html body #searchSection #searchResults .search-result-item:hover {
  background: #fff7ed !important;
  border-color: rgba(249, 115, 22, 0.42) !important;
}

/* תמונה */
html body #searchSection #searchResults .search-result-item img {
  width: 56px !important;
  height: 56px !important;

  padding: 4px !important;

  object-fit: contain !important;
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 12px !important;
}

/* טקסט שם המוצר */
html body #searchSection #searchResults .search-result-name {
  margin: 0 !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-align: right !important;
}

/* מחיר */
html body #searchSection #searchResults .search-result-price {
  margin: 3px 0 0 !important;
  color: #ea580c !important;
  -webkit-text-fill-color: #ea580c !important;
  font-size: 13.5px !important;
  font-weight: 950 !important;
}

/* מלאי / תת־קטגוריה */
html body #searchSection #searchResults .search-result-stock {
  margin: 2px 0 0 !important;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}

/* הדגשת מילים שמחפשים */
html body #searchSection #searchResults .highlight {
  background: #ffedd5 !important;
  color: #ea580c !important;
  padding: 0 3px !important;
  border-radius: 4px !important;
}

/* מובייל */
@media (max-width: 520px) {
  html body #searchSection {
    padding: 0 12px !important;
    margin: 8px auto 14px !important;
  }

  html body #searchSection .search-input-wrapper {
    height: 42px !important;
    min-height: 42px !important;
  }

  html body #searchSection #searchInput {
    height: 42px !important;
    line-height: 42px !important;
    font-size: 14px !important;
  }
}
/* FIX FINAL — תוצאות חיפוש לא נחסמות */
html body .topbar,
html body .topbar-inner,
html body .topbar-mid,
html body .topbar-mid .topbar-search-real,
html body .topbar-mid .search-container {
  overflow: visible !important;
}

html body .topbar {
  position: sticky !important;
  z-index: 9999 !important;
}

html body .topbar-mid {
  position: relative !important;
  z-index: 9999 !important;
}

html body .topbar-mid .search-container {
  position: relative !important;
  z-index: 9999 !important;
}

html body .topbar-mid #searchResults {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 2147483647 !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5) !important;
  overflow-y: auto !important;
  max-height: 420px !important;
}

html body .topbar-mid #searchResults.hidden {
  display: none !important;
}

html body .topbar-mid #searchResults * {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}
/* =========================================================
   BODEK FIX — תוצאות חיפוש מחוץ לטופבר כדי שלא ייחתכו
   ========================================================= */

/* מסתיר את התיבה המקורית בתוך הטופבר, אבל משאיר אותה קיימת ל-JS */
html body .topbar-mid #searchResults {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;

  width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;

  padding: 0 !important;
  margin: 0 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  overflow: hidden !important;

  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* הפורטל האמיתי שמוצג מעל הדף */
#searchResultsPortal {
  position: fixed !important;
  z-index: 2147483647 !important;

  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.96) !important;
  border-radius: 14px !important;

  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.50) !important;

  max-height: 420px !important;
  overflow-y: auto !important;

  direction: rtl !important;
  padding: 8px !important;
}

#searchResultsPortal.hidden {
  display: none !important;
}

#searchResultsPortal .search-result-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  width: 100% !important;
  min-height: 72px !important;

  padding: 10px !important;
  margin: 0 0 7px !important;

  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 12px !important;

  cursor: pointer !important;
}

#searchResultsPortal .search-result-item img {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;

  background: #f8fafc !important;
  border-radius: 10px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
}

#searchResultsPortal .search-result-name {
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

#searchResultsPortal .search-result-price {
  color: #f97316 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

#searchResultsPortal .search-result-stock {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
/* =========================================================
   FINAL FIX — להחזיר את רשימת תוצאות החיפוש למסך
   מבטל את ההסתרה של ה-Portal הישן
   ========================================================= */

html body .topbar,
html body .topbar-inner,
html body .topbar-mid,
html body .topbar-mid .topbar-search-real,
html body .topbar-mid .search-container {
  overflow: visible !important;
}

html body .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 999999 !important;
}

html body .topbar-mid {
  position: relative !important;
  z-index: 999999 !important;
}

html body .topbar-mid .search-container {
  position: relative !important;
  z-index: 999999 !important;
}

/* מחזיר את רשימת התוצאות המקורית */
html body .topbar-mid #searchResults {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: auto !important;
  max-height: 420px !important;

  padding: 8px !important;
  margin: 0 !important;

  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  overflow-y: auto !important;

  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;

  z-index: 2147483647 !important;
}

/* כשה-JS מסתיר — באמת מוסתר */
html body .topbar-mid #searchResults.hidden {
  display: none !important;
}

/* עיצוב תוצאה רגילה */
html body .topbar-mid #searchResults .search-result-item,
html body .topbar-mid #searchResults .topbar-search-result-item {
  width: 100% !important;
  min-height: 66px !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 10px !important;
  margin: 0 0 7px !important;

  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 12px !important;

  text-align: right !important;
  cursor: pointer !important;
}

/* טקסטים בתוצאות */
html body .topbar-mid #searchResults,
html body .topbar-mid #searchResults * {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* מחיר */
html body .topbar-mid #searchResults .search-result-price,
html body .topbar-mid #searchResults .topbar-search-result-price {
  color: #f97316 !important;
  -webkit-text-fill-color: #f97316 !important;
  font-weight: 900 !important;
}
/* =========================================================
   UI FIX — שורת חיפוש מלבנית + פורטל רחב במובייל
   ========================================================= */

/* 1. שורת החיפוש — מלבנית, בצבע הרקע הכהה, ללא עיגול */
html body .topbar-mid .search-input-wrapper {
  border-radius: 0px !important;
  background: #0d0d12 !important;
  background-color: #0d0d12 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html body .topbar-mid .search-input-wrapper:focus-within {
  border-color: rgba(249, 115, 22, 0.85) !important;
  box-shadow: none !important;
}

/* 2. פורטל תוצאות — רחב יותר במובייל */
#searchPortal {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: 100vw !important;
  border-radius: 0 0 14px 14px !important;
  padding: 6px 4px !important;
}

@media (max-width: 600px) {
  #searchPortal {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }
}
/* =========================================================
   FIX — הצרת תוצאות חיפוש בלי לשבור מיקום
   ========================================================= */

@media screen and (min-width: 769px) {
  html body .topbar-mid {
    max-width: 560px !important;
    width: 560px !important;
    flex: 0 0 560px !important;
  }

  html body .topbar-mid .search-container {
    width: 100% !important;
    max-width: 560px !important;
  }

  html body .topbar-mid #searchResults {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 560px !important;
    max-height: 360px !important;
  }
}

@media screen and (max-width: 768px) {
  html body .topbar-mid {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  html body .topbar-mid .search-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .topbar-mid #searchResults {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 360px !important;
  }
}
/* =========================================================
   FINAL OVERRIDE — צבע כהה לשורת החיפוש האמיתית בטופבר
   ========================================================= */

html body .topbar .topbar-mid #searchSection .search-input-wrapper,
html body .topbar .topbar-mid .search-container .search-input-wrapper,
html body .topbar-mid #searchSection .search-input-wrapper {
  background: rgba(10, 12, 18, 0.92) !important;
  background-color: rgba(10, 12, 18, 0.92) !important;
  border: 1.5px solid rgba(255, 122, 0, 0.55) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 122, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}

html body .topbar .topbar-mid #searchInput,
html body .topbar-mid #searchInput {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ff7a00 !important;
  background: transparent !important;
  background-color: transparent !important;
}

html body .topbar .topbar-mid #searchInput::placeholder,
html body .topbar-mid #searchInput::placeholder {
  color: rgba(255, 255, 255, 0.62) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.62) !important;
}

html body .topbar .topbar-mid #clearSearch,
html body .topbar-mid #clearSearch {
  background: rgba(255, 122, 0, 0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 122, 0, 0.35) !important;
}
/* =========================================================
   FINAL FIX — צבע הכיתוב בתוך שורת החיפוש הכהה
   ========================================================= */

/* הטקסט שהלקוח מקליד */
html body input#searchInput,
html body .topbar input#searchInput,
html body .topbar-mid input#searchInput,
html body #searchSection input#searchInput {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ff7a00 !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

/* הכיתוב לפני שמקלידים — Chrome / Edge */
html body input#searchInput::-webkit-input-placeholder,
html body .topbar input#searchInput::-webkit-input-placeholder,
html body .topbar-mid input#searchInput::-webkit-input-placeholder,
html body #searchSection input#searchInput::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

/* הכיתוב לפני שמקלידים — רגיל */
html body input#searchInput::placeholder,
html body .topbar input#searchInput::placeholder,
html body .topbar-mid input#searchInput::placeholder,
html body #searchSection input#searchInput::placeholder {
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}
/* =========================================================
   FINAL FIX — תת קטגוריות כהות כמו כרטיסי מוצרים
   ========================================================= */

html body main#mainContent #subcategories.categories-grid article.card.category-card,
html body main#mainContent #subcategories.categories-grid article.card.category-card.text-only,
html body main#mainContent #subcategories.categories-grid article.card.category-card.all-products-card {
  position: relative !important;
  overflow: hidden !important;

  background: linear-gradient(180deg, #202536 0%, #171b29 100%) !important;
  background-color: #171b29 !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28) !important;
  border-radius: 18px !important;
}

/* החלק העליון של התמונה/אייקון */
html body main#mainContent #subcategories.categories-grid article.card.category-card > .category-image-wrap,
html body main#mainContent #subcategories.categories-grid article.card.category-card > .text-only-wrap {
  background: linear-gradient(180deg, #242a3d 0%, #1c2132 100%) !important;
  background-color: #202536 !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* החלק התחתון של שם התת קטגוריה */
html body main#mainContent #subcategories.categories-grid article.card.category-card > .category-body {
  position: relative !important;

  background: linear-gradient(180deg, #202536 0%, #171b29 100%) !important;
  background-color: #171b29 !important;

  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 10px 14px 12px !important;
}

/* שם התת קטגוריה */
html body main#mainContent #subcategories.categories-grid article.card.category-card .category-name {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* הטקסט הקטן מתחת לשם */
html body main#mainContent #subcategories.categories-grid article.card.category-card .section-note {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* האייקון בתת קטגוריה בלי תמונה */
html body main#mainContent #subcategories.categories-grid article.card.category-card .text-only-icon {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #ff7a00 !important;
}

/* מחזיר את שכבות הרקע רק לתת קטגוריות אם קוד ישן הסתיר אותן */
html body main#mainContent #subcategories.categories-grid article.card.category-card::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 42%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  z-index: 1 !important;
}
/* =========================================================
   PERFORMANCE FIX — האצת כרטיסי מוצרים ותמונות
   מוריד אפקטים כבדים בלי לשנות לוגיקה
   ========================================================= */

html body main#mainContent #products article.card.product-card,
html body main#mainContent #products .product-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

html body main#mainContent #products .product-card .product-image-wrap img,
html body main#mainContent #products article.card.product-card .product-image-wrap img {
  filter: none !important;
  transform: translateZ(0) !important;
}

html body main#mainContent #products .product-card:hover,
html body main#mainContent #products article.card.product-card:hover {
  transform: none !important;
}
/* =========================================================
   PERFORMANCE FIX — שמירת מקום קבוע לתמונות מוצר
   ========================================================= */

html body main#mainContent #products .product-image-wrap {
  min-height: 130px !important;
  height: 130px !important;
  overflow: hidden !important;
}

html body main#mainContent #products .product-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
/* =========================================================
   שליטה בגודל תמונת מוצר לפי imageScale מהניהול
   עובד רק על תמונות מוצר במצב contain / נקייה באמצע
   ========================================================= */

html body main#mainContent #products article.card.product-card.image-fit-contain > .product-image-wrap img,
html body main#mainContent #products .product-card.image-fit-contain > .product-image-wrap img {
  transform: translateZ(0) scale(var(--product-image-scale, 1)) !important;
  transform-origin: center center !important;
}

html body main#mainContent #products article.card.product-card.image-fit-contain:hover > .product-image-wrap img,
html body main#mainContent #products .product-card.image-fit-contain:hover > .product-image-wrap img {
  transform: translateZ(0) scale(var(--product-image-scale, 1)) !important;
}
/* =========================================================
   FIX — סידור סופי לטופבר: לוגו מימין, חיפוש באמצע, עגלה משמאל
   ========================================================= */

html body .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  width: 100% !important;
  background: #0d0d12 !important;
  overflow: visible !important;
}

html body .topbar-inner,
html body.has-header-banner .topbar-inner {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 58px !important;
  height: 58px !important;

  margin: 0 !important;
  padding: 8px 14px !important;

  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) 52px !important;
  align-items: center !important;
  gap: 12px !important;

  direction: rtl !important;
  background: transparent !important;
}

/* הלוגו הקטן — צד ימין */
html body .topbar-brand {
  grid-column: 1 !important;
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

html body .topbar-brand-img {
  width: 82px !important;
  max-width: 82px !important;
  height: 36px !important;
  max-height: 36px !important;

  object-fit: contain !important;
  object-position: right center !important;

  display: block !important;
  background: transparent !important;
  border-radius: 8px !important;
}

/* החיפוש — באמצע, לא בורח לצד */
html body .topbar-mid {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;

  display: block !important;
}

html body .topbar-mid #searchSection,
html body #searchSection.topbar-search-real {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;
  position: relative !important;
}

html body .topbar-mid .search-container {
  width: 100% !important;
  max-width: none !important;
  position: relative !important;
}

html body .topbar-mid .search-input-wrapper {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;

  margin: 0 !important;
  padding: 0 14px !important;

  border-radius: 999px !important;
  background: #050507 !important;
  border: 1px solid rgba(249, 115, 22, 0.45) !important;
}

/* העגלה — צד שמאל */
html body .topbar-cart {
  grid-column: 3 !important;
  width: 52px !important;
  min-width: 52px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

html body .topbar-cart .cart-fab,
html body .topbar-cart #cartFab {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;

  width: 42px !important;
  height: 42px !important;

  display: grid !important;
  place-items: center !important;
}

/* לא לתת ללוגו הישן להתערב */
html body .topbar-logo-compat,
html body .logo-wrap.topbar-logo-compat,
html body #logoImg {
  display: none !important;
}

/* מובייל קטן */
@media (max-width: 520px) {
  html body .topbar-inner,
  html body.has-header-banner .topbar-inner {
    height: 56px !important;
    min-height: 56px !important;
    padding: 8px 10px !important;
    grid-template-columns: 76px minmax(0, 1fr) 46px !important;
    gap: 8px !important;
  }

  html body .topbar-brand {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
  }

  html body .topbar-brand-img {
    width: 68px !important;
    max-width: 68px !important;
    height: 32px !important;
    max-height: 32px !important;
  }

  html body .topbar-cart {
    width: 46px !important;
    min-width: 46px !important;
  }

  html body .topbar-cart .cart-fab,
  html body .topbar-cart #cartFab {
    width: 40px !important;
    height: 40px !important;
  }
}
/* =========================================================
   FINAL FIX — טופבר ממורכז: עגלה + חיפוש + לוגו כקבוצה אחת
   ========================================================= */

html body .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  width: 100% !important;
  background: #0d0d12 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  overflow: visible !important;
}

/* כל השורה הופכת לקבוצה אחת ממורכזת */
html body .topbar-inner,
html body.has-header-banner .topbar-inner {
  width: 100% !important;
  max-width: 860px !important;
  min-height: 58px !important;
  height: 58px !important;

  margin: 0 auto !important;
  padding: 8px 14px !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 12px !important;
  direction: rtl !important;
  background: transparent !important;
}

/* לוגו בצד ימין של הקבוצה */
html body .topbar-brand {
  order: 1 !important;
  flex: 0 0 auto !important;

  width: 118px !important;
  height: 42px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .topbar-brand-img {
  width: 118px !important;
  max-width: 118px !important;
  height: 42px !important;
  max-height: 42px !important;

  object-fit: contain !important;
  object-position: center center !important;

  display: block !important;
  background: transparent !important;
  border-radius: 8px !important;
}

/* חיפוש באמצע הקבוצה */
html body .topbar-mid {
  order: 2 !important;
  flex: 0 1 520px !important;

  width: 520px !important;
  max-width: 520px !important;
  min-width: 260px !important;

  display: block !important;
}

html body .topbar-mid #searchSection,
html body #searchSection.topbar-search-real {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  position: relative !important;
}

html body .topbar-mid .search-container {
  width: 100% !important;
  position: relative !important;
}

html body .topbar-mid .search-input-wrapper {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;

  margin: 0 !important;
  padding: 0 14px !important;

  border-radius: 999px !important;
  background: #050507 !important;
  border: 1px solid rgba(249, 115, 22, 0.45) !important;
}

/* עגלה בצד שמאל של הקבוצה */
html body .topbar-cart {
  order: 3 !important;
  flex: 0 0 auto !important;

  width: 46px !important;
  height: 46px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .topbar-cart .cart-fab,
html body .topbar-cart #cartFab {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;

  width: 42px !important;
  height: 42px !important;

  display: grid !important;
  place-items: center !important;
}

/* לא לתת ללוגו הישן להתערב */
html body .topbar-logo-compat,
html body .logo-wrap.topbar-logo-compat,
html body #logoImg {
  display: none !important;
}

/* מובייל */
@media (max-width: 520px) {
  html body .topbar-inner,
  html body.has-header-banner .topbar-inner {
    height: 56px !important;
    min-height: 56px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  html body .topbar-brand {
    width: 74px !important;
    height: 36px !important;
  }

  html body .topbar-brand-img {
    width: 74px !important;
    max-width: 74px !important;
    height: 34px !important;
    max-height: 34px !important;
  }

  html body .topbar-mid {
    flex: 0 1 285px !important;
    width: auto !important;
    max-width: 285px !important;
    min-width: 0 !important;
  }

  html body .topbar-cart {
    width: 42px !important;
    height: 42px !important;
  }

  html body .topbar-cart .cart-fab,
  html body .topbar-cart #cartFab {
    width: 40px !important;
    height: 40px !important;
  }
}
/* =========================================================
   FIX — הגדלת לוגו עליון בלי חיתוך ובלי דחיסה
   ========================================================= */

html body .topbar-brand {
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  height: 42px !important;

  overflow: visible !important;
  border-radius: 8px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .topbar-brand-img {
  width: 105px !important;
  max-width: none !important;

  height: 42px !important;
  max-height: none !important;

  object-fit: contain !important;
  object-position: center center !important;

  transform: none !important;

  display: block !important;
  border-radius: 8px !important;
  background: transparent !important;
}

/* מחשב */
@media (min-width: 521px) {
  html body .topbar-brand {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 44px !important;
  }

  html body .topbar-brand-img {
    width: 128px !important;
    height: 44px !important;
  }
}
/* =========================================================
   HOME V2 LIGHT DESIGN — דף בית חדש בהיר
   שלב 2: עיצוב ראשוני בלבד
   חשוב: לא נוגע בסרגל התחתון bottom-app-nav
   ========================================================= */

/* רקע בהיר חדש לאתר */
body {
  background-color: #f8f6f2 !important;
  background-image: none !important;
  color: #18181b;
}

/* מבטל את שכבות ההכהיה הישנות של הרקע */
body::before,
body::after {
  display: none !important;
}

/* מעטפת כללית של דף הבית החדש */
.home-v2 {
  position: relative;
  z-index: 1;
  padding: 8px 14px 28px;
  color: #18181b;
}

/* כל אזור בדף הבית החדש */
.home-v2-section {
  margin: 0 0 26px;
}

/* כותרות אזורים */
.home-v2-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.home-v2-title {
  margin: 0;
  color: #18181b;
  font-size: 21px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.home-v2-subtitle {
  margin: 5px 0 0;
  color: #71717a;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}

/* פס אופקי — קטגוריות מובחרות ומבצעים */
.home-v2-horizontal-list,
.home-v2-products-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(156px, 44%);
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.home-v2-horizontal-list::-webkit-scrollbar,
.home-v2-products-row::-webkit-scrollbar {
  display: none;
}

/* תתי קטגוריות — גריד קטן */
.home-v2-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* מוצרים נבחרים — גריד */
.home-v2-products-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* =========================================================
   כרטיס קטגוריה מובחרת — אופציה 1
   ========================================================= */

.home-v2-category-card {
  position: relative;
  min-height: 132px;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  scroll-snap-align: start;
  background: #ffffff;
  border: 1px solid rgba(228, 228, 231, 0.95);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-v2-category-card:active {
  transform: scale(0.97);
}

.home-v2-category-card:hover {
  border-color: rgba(249, 115, 22, 0.45);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.13);
}

.home-v2-category-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #f4f4f5;
}

.home-v2-category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-v2-category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.08) 62%, rgba(0, 0, 0, 0.02)),
    linear-gradient(135deg, rgba(249, 115, 22, 0.22), transparent 52%);
  pointer-events: none;
}

.home-v2-category-content {
  position: absolute;
  z-index: 3;
  right: 12px;
  left: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.home-v2-category-name {
  margin: 0;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.15;
  font-weight: 900;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
}

.home-v2-category-note {
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 800;
}

/* כרטיס הצג את כל הקטגוריות */

/* =========================================================
   תתי קטגוריות מובחרות
   ========================================================= */

.home-v2-subcategory-card {
  min-height: 92px;
  padding: 10px 7px 9px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(228, 228, 231, 0.95);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.home-v2-subcategory-card:active {
  transform: scale(0.96);
}

.home-v2-subcategory-card:hover {
  border-color: rgba(249, 115, 22, 0.36);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.10);
}

.home-v2-subcategory-image {
  width: 48px;
  height: 48px;
  margin: 0 auto 7px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff7ed;
  border: 1px solid rgba(249, 115, 22, 0.15);
}

.home-v2-subcategory-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
}

.home-v2-subcategory-name {
  margin: 0;
  color: #18181b;
  font-size: 12px;
  line-height: 1.22;
  font-weight: 900;
}

/* =========================================================
   כרטיסי מבצעים ומוצרים למסך הבית בלבד
   ========================================================= */

.home-v2-product-card,
.home-v2-deal-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(228, 228, 231, 0.95);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-v2-product-card:active,
.home-v2-deal-card:active {
  transform: scale(0.98);
}

.home-v2-deal-card {
  scroll-snap-align: start;
}

.home-v2-deal-badge {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  min-height: 27px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, #f97316, #ea580c);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.28);
}

.home-v2-product-image {
  height: 130px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at center, #fff7ed, #ffffff 58%);
  border-bottom: 1px solid rgba(244, 244, 245, 1);
}

.home-v2-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-v2-product-body {
  padding: 12px;
}

.home-v2-product-name {
  min-height: 38px;
  margin: 0 0 8px;
  color: #18181b;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 900;
}

.home-v2-product-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.home-v2-product-price {
  color: #18181b;
  font-size: 18px;
  font-weight: 900;
}

.home-v2-product-old-price {
  margin-inline-start: 4px;
  color: #a1a1aa;
  font-size: 12px;
  font-weight: 800;
  text-decoration: line-through;
}

/* שורת מבצע בכרטיס */
.home-v2-offer-label {
  margin: 4px 0 8px;
  font-size: 13px;
  font-weight: 900;
  color: #0d7045;
}

/* פקד כמות +/0/− */
.home-v2-qty-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid rgba(249, 115, 22, 0.35);
  margin-top: 4px;
}

.home-v2-qty-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(135deg, #f97316, #ea580c);
  flex-shrink: 0;
  transition: background 0.15s;
}

.home-v2-qty-btn:active {
  background: #ea580c;
}

.home-v2-qty-value {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
  color: #18181b;
  cursor: pointer;
  user-select: none;
}

/* מצב ריק זמני עד שנחבר JS */
.home-v2-empty {
  padding: 16px;
  border-radius: 22px;
  color: #71717a;
  background: #ffffff;
  border: 1px dashed rgba(212, 212, 216, 1);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

/* פוקוס נגיש למקלדת */
.home-v2 button:focus-visible,
.home-v2 [role="button"]:focus-visible,
.home-v2 a:focus-visible {
  outline: 3px solid rgba(249, 115, 22, 0.55);
  outline-offset: 3px;
}

/* מובייל קטן */
@media screen and (max-width: 420px) {
  .home-v2 {
    padding-right: 12px;
    padding-left: 12px;
  }

  .home-v2-horizontal-list,
  .home-v2-products-row {
    grid-auto-columns: minmax(150px, 47%);
  }

  .home-v2-mini-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .home-v2-subcategory-card {
    min-height: 88px;
    border-radius: 18px;
  }

  .home-v2-subcategory-image {
    width: 44px;
    height: 44px;
  }

  .home-v2-subcategory-name {
    font-size: 11.5px;
  }

  .home-v2-products-grid {
    gap: 10px;
  }
}

/* דסקטופ — שלא ייראה ענק מדי */
@media screen and (min-width: 769px) {
  .home-v2 {
    padding-top: 12px;
  }

  .home-v2-horizontal-list,
  .home-v2-products-row {
    grid-auto-columns: 190px;
  }

  .home-v2-mini-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .home-v2-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* שמירה על מרווח תחתון כדי שהסרגל התחתון לא יכסה תוכן */
.app-shell {
  padding-bottom: 130px;
}
/* =========================================================
   HOME V2 — תיקון תתי קטגוריות + לינק כל הקטגוריות
   ========================================================= */

/* הופך את "הצג את כל הקטגוריות" ללינק עדין במקום כרטיס */

/* נותן ללינק מקום יפה בסוף הסלייד */
.home-v2-horizontal-list .home-v2-all-categories-card {
  min-width: 128px !important;
}

/* תתי קטגוריות — כרטיסים עם תמונה מלאה */
.home-v2-mini-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.home-v2-subcategory-card {
  min-height: 112px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid rgba(228, 228, 231, 0.95) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07) !important;
  text-align: center !important;
}

/* התמונה עכשיו תופסת את החלק העליון של הכרטיס */
.home-v2-subcategory-image {
  width: 100% !important;
  height: 72px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #f8f6f2 !important;
  border: none !important;
  border-bottom: 1px solid rgba(244, 244, 245, 1) !important;
}

.home-v2-subcategory-image img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
}

/* שם תת הקטגוריה מתחת לתמונה */
.home-v2-subcategory-name {
  min-height: 39px !important;
  padding: 7px 6px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #18181b !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

/* מובייל קטן */
@media screen and (max-width: 420px) {
  .home-v2-mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .home-v2-subcategory-card {
    min-height: 108px !important;
    border-radius: 18px !important;
  }

  .home-v2-subcategory-image {
    height: 70px !important;
  }

  .home-v2-subcategory-name {
    font-size: 11.5px !important;
  }
}
/* =========================================================
   HOME V2 — תיקון לינק כל הקטגוריות + הקטנת כרטיסי קטגוריות
   ========================================================= */

/* כפתור "הצג את כל הקטגוריות" מעל הכרטיסים */
.home-v2-section-link {
  padding: 0;
  border: none;
  background: transparent;
  color: #f97316;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.home-v2-section-link::after {
  content: "‹";
  margin-right: 6px;
  font-size: 18px;
  line-height: 1;
  vertical-align: -1px;
}

.home-v2-section-link:active {
  transform: scale(0.97);
}

.home-v2-section-link:focus-visible {
  outline: 3px solid rgba(249, 115, 22, 0.45);
  outline-offset: 4px;
  border-radius: 8px;
}

/* מקטין את כרטיסי הקטגוריות המובחרות */
.home-v2-horizontal-list {
  grid-auto-columns: minmax(118px, 31%) !important;
  gap: 10px !important;
  padding-bottom: 8px !important;
}

.home-v2-category-card {
  min-height: 88px !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.09) !important;
}

.home-v2-category-content {
  right: 9px !important;
  left: 9px !important;
  bottom: 8px !important;
  gap: 1px !important;
}

.home-v2-category-name {
  font-size: 13.5px !important;
  line-height: 1.15 !important;
}

.home-v2-category-note {
  font-size: 10.5px !important;
  line-height: 1.15 !important;
}

/* מסתיר לגמרי את הכרטיס הישן אם נשאר בטעות */
.home-v2-horizontal-list .home-v2-all-categories-card {
  display: none !important;
}

/* תתי קטגוריות — קצת יותר עדין כמו אפליקציה */
.home-v2-subcategory-card {
  min-height: 96px !important;
  border-radius: 17px !important;
}

.home-v2-subcategory-image {
  height: 61px !important;
}

.home-v2-subcategory-name {
  min-height: 35px !important;
  padding: 6px 5px 7px !important;
  font-size: 11.5px !important;
}

/* מובייל קטן */
@media screen and (max-width: 420px) {
  .home-v2-section-head {
    align-items: flex-start !important;
  }

  .home-v2-title {
    font-size: 20px !important;
  }

  .home-v2-subtitle {
    font-size: 12px !important;
  }

  .home-v2-section-link {
    font-size: 12.5px !important;
    padding-top: 4px !important;
  }

  .home-v2-horizontal-list {
    grid-auto-columns: minmax(116px, 32%) !important;
  }

  .home-v2-category-card {
    min-height: 86px !important;
  }

  .home-v2-category-name {
    font-size: 13px !important;
  }

  .home-v2-category-note {
    font-size: 10px !important;
  }

  .home-v2-mini-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .home-v2-subcategory-card {
    min-height: 94px !important;
  }

  .home-v2-subcategory-image {
    height: 59px !important;
  }
}
/* =========================================================
   HOME V2 — מסך כל הקטגוריות החדש
   בסגנון אפליקציה / Wolt
   לא נוגע בסרגל התחתון
   ========================================================= */

.home-all-categories-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}

.home-all-categories-overlay.active {
  display: flex;
}

.home-all-categories-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.home-all-categories-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 430px;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  color: #18181b;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 246, 242, 0.98));
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
}

/* ראש המסך */
.home-all-categories-head {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 18px 18px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 86px;
  text-align: center;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(228, 228, 231, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.home-all-categories-title {
  margin: 0;
  color: #18181b;
  font-size: 24px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -0.03em;
}

.home-all-categories-subtitle {
  margin: 5px 0 0;
  color: #71717a;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 800;
}

/* כפתור סגירה */
.home-all-categories-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #18181b;
  background: #f4f4f5;
  border: 1px solid rgba(228, 228, 231, 0.95);
  font-size: 23px;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
}

.home-all-categories-close:active {
  transform: scale(0.94);
}

.home-all-categories-close:focus-visible {
  outline: 3px solid rgba(249, 115, 22, 0.48);
  outline-offset: 3px;
}

/* גריד כל הקטגוריות */
.home-all-categories-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px calc(110px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}

.home-all-categories-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* כרטיס קטגוריה מלא */
.home-all-category-card {
  width: 100%;
  min-height: 112px;
  padding: 0;
  overflow: hidden;
  border-radius: 19px;
  background: #ffffff;
  border: 1px solid rgba(228, 228, 231, 0.96);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.075);
  cursor: pointer;
  text-align: center;
  transition:
    transform 0.17s ease,
    box-shadow 0.17s ease,
    border-color 0.17s ease;
}

.home-all-category-card:active {
  transform: scale(0.96);
}

.home-all-category-card:hover {
  border-color: rgba(249, 115, 22, 0.34);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
}

.home-all-category-image {
  width: 100%;
  height: 76px;
  display: block;
  overflow: hidden;
  background: #f4f4f5;
  border-bottom: 1px solid rgba(244, 244, 245, 1);
}

.home-all-category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* פס שם מתחת לתמונה */
.home-all-category-name {
  min-height: 36px;
  padding: 6px 6px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #18181b;
  background: #ffffff;
  font-size: 12px;
  line-height: 1.18;
  font-weight: 900;
}

/* מצב ריק */
.home-all-categories-empty {
  grid-column: 1 / -1;
  padding: 22px 16px;
  border-radius: 22px;
  color: #71717a;
  background: #ffffff;
  border: 1px dashed rgba(212, 212, 216, 1);
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

/* נעילת גלילה מאחורה כשהמסך פתוח */
body.home-all-categories-open {
  overflow: hidden;
}

/* מובייל קטן */
@media screen and (max-width: 420px) {
  .home-all-categories-head {
    min-height: 80px;
    padding: 16px 16px 12px;
  }

  .home-all-categories-title {
    font-size: 23px;
  }

  .home-all-categories-close {
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
  }

  .home-all-categories-grid {
    padding-right: 12px;
    padding-left: 12px;
    gap: 10px;
  }

  .home-all-category-card {
    min-height: 106px;
    border-radius: 17px;
  }

  .home-all-category-image {
    height: 71px;
  }

  .home-all-category-name {
    min-height: 35px;
    font-size: 11.5px;
  }
}

/* דסקטופ — שהמסך יישאר כמו מובייל במרכז */
@media screen and (min-width: 769px) {
  .home-all-categories-panel {
    max-width: 460px;
  }

  .home-all-categories-overlay {
    padding: 0;
  }
}
/* =========================================================
   HOME V2 — התאמת מסך כל הקטגוריות לדסקטופ
   במובייל נשאר כמו אפליקציה, במחשב נפתח כחלון מקצועי רחב
   לא נוגע בסרגל התחתון
   ========================================================= */

@media screen and (min-width: 769px) {
  .home-all-categories-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: 34px !important;
  }

  .home-all-categories-backdrop {
    background: rgba(15, 23, 42, 0.34) !important;
    backdrop-filter: blur(16px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.05) !important;
  }

  .home-all-categories-panel {
    width: min(1120px, calc(100vw - 80px)) !important;
    max-width: 1120px !important;
    height: min(820px, calc(100vh - 80px)) !important;
    max-height: calc(100vh - 80px) !important;

    border-radius: 30px !important;
    overflow: hidden !important;

    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 246, 242, 0.98)) !important;

    border: 1px solid rgba(228, 228, 231, 0.95) !important;
    box-shadow:
      0 34px 90px rgba(15, 23, 42, 0.28),
      0 0 0 1px rgba(255, 255, 255, 0.7) inset !important;
  }

  .home-all-categories-head {
    min-height: 92px !important;
    padding: 22px 32px 18px !important;
    justify-content: center !important;
    border-bottom: 1px solid rgba(228, 228, 231, 0.9) !important;
  }

  .home-all-categories-title {
    font-size: 30px !important;
    letter-spacing: -0.035em !important;
  }

  .home-all-categories-subtitle {
    font-size: 14px !important;
    margin-top: 7px !important;
  }

  .home-all-categories-close {
    top: 24px !important;
    right: 26px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 25px !important;
    background: #f4f4f5 !important;
  }

  .home-all-categories-grid {
    padding: 24px 28px 34px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .home-all-category-card {
    min-height: 142px !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.075) !important;
  }

  .home-all-category-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(249, 115, 22, 0.42) !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12) !important;
  }

  .home-all-category-card:active {
    transform: scale(0.98) !important;
  }

  .home-all-category-image {
    height: 100px !important;
  }

  .home-all-category-name {
    min-height: 42px !important;
    padding: 8px 8px 9px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
}

/* דסקטופ בינוני — שלא יהיה צפוף מדי במסכים קטנים */
@media screen and (min-width: 769px) and (max-width: 1050px) {
  .home-all-categories-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .home-all-categories-panel {
    width: min(940px, calc(100vw - 60px)) !important;
  }
}
/* =========================================================
   HOME V2 — מובייל: הקטנת מסך כל הקטגוריות + כפתור חזרה
   ========================================================= */

/* כפתור חזרה לאתר */
.home-all-categories-back {
  position: absolute;
  top: 18px;
  left: 18px;

  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #18181b;
  background: #ffffff;
  border: 1px solid rgba(228, 228, 231, 0.95);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);

  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.home-all-categories-back:active {
  transform: scale(0.96);
}

.home-all-categories-back:focus-visible {
  outline: 3px solid rgba(249, 115, 22, 0.48);
  outline-offset: 3px;
}

/* מובייל — המסך יהיה קצת יותר קטן ומקצועי */
@media screen and (max-width: 768px) {
  .home-all-categories-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 10px calc(92px + env(safe-area-inset-bottom)) !important;
  }

  .home-all-categories-panel {
    width: min(100%, 410px) !important;
    height: min(100%, calc(100vh - 116px)) !important;
    max-height: calc(100vh - 116px) !important;

    border-radius: 26px !important;
    overflow: hidden !important;

    border: 1px solid rgba(228, 228, 231, 0.95) !important;
    box-shadow:
      0 26px 70px rgba(15, 23, 42, 0.24),
      0 0 0 1px rgba(255, 255, 255, 0.74) inset !important;
  }

  .home-all-categories-head {
    min-height: 76px !important;
    padding: 15px 72px 12px !important;
  }

  .home-all-categories-title {
    font-size: 22px !important;
  }

  .home-all-categories-subtitle {
    font-size: 11.5px !important;
  }

  .home-all-categories-close {
    top: 18px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
  }

  .home-all-categories-back {
    top: 18px !important;
    left: 16px !important;
    min-height: 36px !important;
    padding: 0 11px !important;
    font-size: 11.5px !important;
  }

  .home-all-categories-grid {
    padding: 12px 12px calc(18px + env(safe-area-inset-bottom)) !important;
    gap: 9px !important;
  }

  .home-all-category-card {
    min-height: 98px !important;
    border-radius: 16px !important;
  }

  .home-all-category-image {
    height: 65px !important;
  }

  .home-all-category-name {
    min-height: 33px !important;
    padding: 5px 5px 6px !important;
    font-size: 11.2px !important;
  }
}
/* =========================================================
   HOME V2 — תיקון חזק למסך קטגוריות במובייל + כפתור חזרה
   ========================================================= */

.home-all-categories-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: center !important;
}

.home-all-categories-head-text {
  min-width: 0 !important;
}

.home-all-categories-back {
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #18181b !important;
  background: #ffffff !important;
  border: 1px solid rgba(228, 228, 231, 0.95) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07) !important;

  font-size: 11.5px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.home-all-categories-back:active {
  transform: scale(0.96) !important;
}

.home-all-categories-back:focus-visible {
  outline: 3px solid rgba(249, 115, 22, 0.48) !important;
  outline-offset: 3px !important;
}

/* מובייל — מסך קטן יותר ולא דבוק מדי */
@media screen and (max-width: 768px) {
  .home-all-categories-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 10px calc(92px + env(safe-area-inset-bottom)) !important;
  }

  .home-all-categories-panel {
    width: min(96vw, 390px) !important;
    height: min(82vh, 660px) !important;
    max-height: calc(100vh - 125px) !important;
    border-radius: 26px !important;
  }

  .home-all-categories-head {
    min-height: 74px !important;
    padding: 12px 12px 10px !important;
  }

  .home-all-categories-title {
    font-size: 21px !important;
  }

  .home-all-categories-subtitle {
    font-size: 11px !important;
    margin-top: 4px !important;
  }

  .home-all-categories-close {
    position: static !important;
    width: 36px !important;
    height: 36px !important;
  }

  .home-all-categories-back {
    min-height: 36px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  .home-all-categories-grid {
    padding: 11px 11px 18px !important;
    gap: 9px !important;
  }

  .home-all-category-card {
    min-height: 94px !important;
    border-radius: 16px !important;
  }

  .home-all-category-image {
    height: 62px !important;
  }

  .home-all-category-name {
    min-height: 32px !important;
    padding: 5px 5px 6px !important;
    font-size: 11px !important;
  }
}
/* =========================================================
   תיקון צבעים למסכים בהירים — כותרות וכפתורי חזרה
   ========================================================= */

/* כותרות כלליות באתר אחרי כניסה לקטגוריה / תת קטגוריה / מוצרים */
html body main#mainContent .section-title,
html body main#mainContent #subcategoriesTitle,
html body main#mainContent #productsTitle {
  color: #18181b !important;
  text-shadow: none !important;
}

/* טקסט קטן ליד הכותרות */
html body main#mainContent .section-note,
html body main#mainContent #subcategoriesCount,
html body main#mainContent #productsCount {
  color: #71717a !important;
  text-shadow: none !important;
}

/* כותרות דף הבית החדש */
html body main#mainContent .home-v2-title {
  color: #18181b !important;
  text-shadow: none !important;
}

html body main#mainContent .home-v2-subtitle {
  color: #71717a !important;
  text-shadow: none !important;
}

/* כפתורי חזרה בקטגוריות / תתי קטגוריות / מוצרים */
html body main#mainContent .back-btn,
html body main#mainContent #productsSection .back-btn,
html body main#mainContent #subcategoriesSection .back-btn {
  color: #18181b !important;
  background: #ffffff !important;
  border: 1px solid rgba(228, 228, 231, 0.95) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
  text-shadow: none !important;
}

/* כפתור חזרה לאתר במסך כל הקטגוריות */
html body .home-all-categories-back {
  color: #18181b !important;
  background: #ffffff !important;
  border: 1px solid rgba(228, 228, 231, 0.95) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
  text-shadow: none !important;
}

/* כותרת מסך כל הקטגוריות */
html body .home-all-categories-title {
  color: #18181b !important;
  text-shadow: none !important;
}

html body .home-all-categories-subtitle {
  color: #71717a !important;
  text-shadow: none !important;
}
/* =========================================================
   תיקון צבעים גם בדף הבית Home V2
   ========================================================= */

/* כל אזור דף הבית החדש */
html body main#mainContent #homeV2,
html body main#mainContent .home-v2 {
  color: #18181b !important;
}

/* כל הכותרות בדף הבית החדש */
html body main#mainContent #homeV2 h1,
html body main#mainContent #homeV2 h2,
html body main#mainContent #homeV2 h3,
html body main#mainContent #homeV2 .home-v2-title {
  color: #18181b !important;
  text-shadow: none !important;
}

/* כל הטקסטים הקטנים מתחת לכותרות */
html body main#mainContent #homeV2 p,
html body main#mainContent #homeV2 .home-v2-subtitle {
  color: #71717a !important;
  text-shadow: none !important;
}

/* כפתור / לינק הצג את כל הקטגוריות */
html body main#mainContent #homeV2 .home-v2-section-link,
html body main#mainContent #homeShowAllCategoriesButton {
  color: #f97316 !important;
  background: transparent !important;
  text-shadow: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* טקסטים בתוך אזורי דף הבית שלא אמורים להיות לבנים */
html body main#mainContent #homeV2 .home-v2-section-head,
html body main#mainContent #homeV2 .home-v2-section-head * {
  text-shadow: none !important;
}

/* אבל שומר שהכיתוב שעל תמונות קטגוריות יישאר לבן */
html body main#mainContent #homeV2 .home-v2-category-card * {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
}
/* =========================================================
   HOME V2 — תתי קטגוריות בדסקטופ בלבד, תיקון עדין
   לא נוגע במובייל
   ========================================================= */

@media screen and (min-width: 769px) {
  html body main#mainContent #homeFeaturedSubcategories.home-v2-mini-grid {
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
    gap: 14px !important;
  }

  html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-card {
    min-height: 118px !important;
    height: 118px !important;
    padding: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-image {
    width: 100% !important;
    height: 78px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-image img {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    object-fit: cover !important;
  }

  html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-name {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 8px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    color: #18181b !important;
    text-align: center !important;
  }
}
/* =========================================================
   HOME V2 — יישור תתי קטגוריות ימינה בדסקטופ בלבד
   ========================================================= */

@media screen and (min-width: 769px) {
  html body main#mainContent #homeV2 #homeFeaturedSubcategories {
    margin-right: 0 !important;
    margin-left: auto !important;
  }
}
/* =========================================================
   HOME V2 — תתי קטגוריות מרובעות
   מתאים יותר לתמונות אמיתיות של תתי קטגוריות
   ========================================================= */

html body main#mainContent #homeFeaturedSubcategories {
  display: grid !important;
  gap: 14px !important;
}

/* הכרטיס עצמו */
html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-card {
  aspect-ratio: 1 / 1 !important;
  min-height: unset !important;
  height: auto !important;

  display: flex !important;
  flex-direction: column !important;

  padding: 0 !important;
  overflow: hidden !important;

  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(228, 228, 231, 0.95) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

/* אזור התמונה */
html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-image {
  flex: 1 !important;
  width: 100% !important;
  height: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

/* התמונה עצמה */
html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-image img {
  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;
  padding: 0 !important;
}

/* שם תת הקטגוריה */
html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-name {
  min-height: 34px !important;
  height: 34px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 8px !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(244, 244, 245, 0.95) !important;

  color: #18181b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

/* דסקטופ בלבד */
@media screen and (min-width: 769px) {
  html body main#mainContent #homeFeaturedSubcategories {
    max-width: 680px !important;
    margin-right: 0 !important;
    margin-left: auto !important;

    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* מובייל בלבד */
@media screen and (max-width: 768px) {
  html body main#mainContent #homeFeaturedSubcategories {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-name {
    font-size: 12px !important;
  }
}
/* מסתיר את דף הבית הישן בלבד */
html body main#mainContent > #categoriesSection {
  display: none !important;
}
/* =========================================================
   ART FIX 01B — Home Featured Categories Image Cards
   מטרה:
   כרטיסי קטגוריות מובחרות בסגנון תמונה מלאה + טקסט על התמונה
   לא נוגע בסרגל עליון / תחתון / מוצרים / עגלה / JS
   ========================================================= */

html body #homeFeaturedCategories.home-v2-horizontal-list {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(148px, 42%) !important;
  gap: 12px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  padding: 4px 2px 14px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
}

html body #homeFeaturedCategories.home-v2-horizontal-list::-webkit-scrollbar {
  display: none !important;
}

/* הכרטיס עצמו */
html body #homeFeaturedCategories .home-v2-category-card {
  position: relative !important;
  height: 112px !important;
  min-height: 112px !important;
  padding: 0 !important;
  overflow: hidden !important;

  display: block !important;
  scroll-snap-align: start !important;

  border-radius: 22px !important;
  background: #111827 !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;

  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.85) inset !important;

  cursor: pointer !important;
  isolation: isolate !important;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease !important;
}

html body #homeFeaturedCategories .home-v2-category-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(249, 115, 22, 0.45) !important;
  box-shadow:
    0 18px 38px rgba(15, 23, 42, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.95) inset !important;
}

html body #homeFeaturedCategories .home-v2-category-card:active {
  transform: scale(0.975) !important;
}

/* מבטל שכבות ישנות אם היו */
html body #homeFeaturedCategories .home-v2-category-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.48) 38%,
      rgba(0, 0, 0, 0.12) 72%,
      rgba(0, 0, 0, 0.04) 100%
    ) !important;
}

html body #homeFeaturedCategories .home-v2-category-card::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 10px 10px 10px !important;
  height: 1px !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background: linear-gradient(
    to left,
    transparent,
    rgba(249, 115, 22, 0.72),
    transparent
  ) !important;
  opacity: 0.8 !important;
}

/* תמונה מלאה */
html body #homeFeaturedCategories .home-v2-category-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;

  display: block !important;
  background: #111827 !important;
  border: none !important;
}

html body #homeFeaturedCategories .home-v2-category-image img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;

  padding: 0 !important;
  border-radius: 0 !important;

  filter:
    saturate(1.06)
    contrast(1.04)
    brightness(0.96) !important;

  transform: scale(1.03) !important;
}

/* תוכן על התמונה */
html body #homeFeaturedCategories .home-v2-category-content {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 3 !important;

  min-height: 0 !important;
  padding: 34px 11px 13px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  gap: 4px !important;

  background: transparent !important;
}

/* שם הקטגוריה */
html body #homeFeaturedCategories .home-v2-category-name {
  margin: 0 !important;

  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 1.12 !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
  text-align: right !important;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* טקסט קטן */
html body #homeFeaturedCategories .home-v2-category-note {
  margin: 0 !important;

  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 10.5px !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
  text-align: right !important;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42) !important;
}

/* תג קטן בפינה */
html body #homeFeaturedCategories .home-v2-category-content::before {
  content: "קטגוריה" !important;

  width: fit-content !important;
  max-width: 100% !important;

  padding: 4px 8px !important;
  border-radius: 999px !important;

  color: #ffffff !important;
  background: rgba(249, 115, 22, 0.92) !important;

  font-size: 9.5px !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  box-shadow: 0 6px 14px rgba(249, 115, 22, 0.25) !important;
}

/* פוקוס נגיש */
html body #homeFeaturedCategories .home-v2-category-card:focus-visible {
  outline: 3px solid rgba(249, 115, 22, 0.48) !important;
  outline-offset: 3px !important;
}

/* התאמה למסכים קטנים */
@media screen and (max-width: 420px) {
  html body #homeFeaturedCategories.home-v2-horizontal-list {
    grid-auto-columns: minmax(138px, 41%) !important;
    gap: 10px !important;
  }

  html body #homeFeaturedCategories .home-v2-category-card {
    height: 104px !important;
    min-height: 104px !important;
    border-radius: 20px !important;
  }

  html body #homeFeaturedCategories .home-v2-category-content {
    padding: 30px 10px 12px !important;
  }

  html body #homeFeaturedCategories .home-v2-category-name {
    font-size: 14px !important;
  }

  html body #homeFeaturedCategories .home-v2-category-note {
    font-size: 10px !important;
  }
}
/* הסרת תג "קטגוריה" מכרטיסי הקטגוריות בדף הבית */
html body #homeFeaturedCategories .home-v2-category-content::before {
  display: none !important;
  content: none !important;
}
/* =========================================================
   ART FIX 02C — Home Featured Subcategories Vertical Image Cards
   מטרה:
   תתי־קטגוריות במלבן מאונך: תמונה מלאה למעלה + פס שם למטה
   לא נוגע בסרגלים / קטגוריות / מוצרים / עגלה / JS
   ========================================================= */

html body main#mainContent #homeFeaturedSubcategories.home-v2-mini-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
}

/* הכרטיס עצמו */
html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-card {
  position: relative !important;
  min-height: 132px !important;
  height: auto !important;
  aspect-ratio: auto !important;

  display: flex !important;
  flex-direction: column !important;

  padding: 0 !important;
  overflow: hidden !important;

  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(229, 231, 235, 0.95) !important;

  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;

  cursor: pointer !important;

  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease !important;
}

/* ביטול שכבות כהות/פסים מהתיקונים הקודמים */
html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-card::before,
html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-card::after {
  display: none !important;
  content: none !important;
}

html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(249, 115, 22, 0.30) !important;
  box-shadow:
    0 12px 26px rgba(15, 23, 42, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-card:active {
  transform: scale(0.975) !important;
}

/* אזור התמונה — ממלא את החלק העליון */
html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-image {
  position: relative !important;
  width: 100% !important;
  height: 88px !important;
  min-height: 88px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: block !important;
  overflow: hidden !important;

  background: #f5f5f5 !important;
  border: none !important;
  border-bottom: 1px solid rgba(244, 244, 245, 1) !important;
}

/* התמונה עצמה — מלאה, בלי ריבוע פנימי */
html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center !important;

  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;

  filter:
    saturate(1.04)
    contrast(1.02)
    brightness(0.98) !important;

  transform: none !important;
}

/* פס השם למטה */
html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-name {
  position: relative !important;

  min-height: 44px !important;
  height: auto !important;

  padding: 9px 10px 10px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #ffffff !important;
  border: none !important;

  color: #18181b !important;
  font-size: 13.5px !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
  letter-spacing: -0.015em !important;
  text-align: center !important;

  text-shadow: none !important;

  overflow: hidden !important;
}

/* טקסט עד 2 שורות */
html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* פוקוס נגיש */
html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-card:focus-visible {
  outline: 3px solid rgba(249, 115, 22, 0.45) !important;
  outline-offset: 3px !important;
}

/* מובייל קטן */
@media screen and (max-width: 420px) {
  html body main#mainContent #homeFeaturedSubcategories.home-v2-mini-grid {
    gap: 9px !important;
  }

  html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-card {
    min-height: 124px !important;
    border-radius: 17px !important;
  }

  html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-image {
    height: 82px !important;
    min-height: 82px !important;
  }

  html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-name {
    min-height: 42px !important;
    padding: 8px 8px 9px !important;
    font-size: 12.8px !important;
  }
}

/* מחשב — מסודר ולא ענק */
@media screen and (min-width: 769px) {
  html body main#mainContent #homeFeaturedSubcategories.home-v2-mini-grid {
    max-width: 760px !important;
    margin: 0 auto !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-card {
    min-height: 132px !important;
  }

  html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-image {
    height: 88px !important;
  }
}
/* =========================================================
   ART TUNE 02C — Smaller Home Featured Subcategories
   מקטין את כרטיסי תתי־הקטגוריות בלי לשנות את הסגנון
   ========================================================= */

html body main#mainContent #homeFeaturedSubcategories.home-v2-mini-grid {
  gap: 8px !important;
}

html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-card {
  min-height: 104px !important;
  border-radius: 15px !important;
}

html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-image {
  height: 68px !important;
  min-height: 68px !important;
}

html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-name {
  min-height: 36px !important;
  padding: 6px 7px 7px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
}

/* מובייל קטן */
@media screen and (max-width: 420px) {
  html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-card {
    min-height: 98px !important;
    border-radius: 14px !important;
  }

  html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-image {
    height: 64px !important;
    min-height: 64px !important;
  }

  html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-name {
    min-height: 34px !important;
    font-size: 11.6px !important;
  }
}
/* =========================================================
   ART TUNE 02D — 4 Subcategories In One Row On Mobile
   מטרה: במובייל בלבד — 4 תתי־קטגוריות בשורה אחת, קטנות ומסודרות
   ========================================================= */

@media screen and (max-width: 768px) {
  html body main#mainContent #homeFeaturedSubcategories.home-v2-mini-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-card {
    min-height: 84px !important;
    border-radius: 13px !important;
  }

  html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-image {
    height: 54px !important;
    min-height: 54px !important;
  }

  html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html body main#mainContent #homeFeaturedSubcategories .home-v2-subcategory-name {
    min-height: 30px !important;
    padding: 5px 4px 6px !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    text-align: center !important;
  }
}
/* =========================================================
   ART FIX 03B — Real Deals Banner + Small Deal Product Cards
   מטרה:
   באנר מבצעים אמיתי מעל מוצרי המבצעים
   ומתחתיו מוצרי מבצע קטנים
   לא נוגע בסרגלים / עגלה / הזמנה / JS / Firebase
   ========================================================= */


/* אזור המבצעים */
html body main#mainContent #homeFeaturedDealsSection {
  margin-top: 18px !important;
  margin-bottom: 24px !important;
}

html body main#mainContent #homeFeaturedDealsSection .home-v2-section-head {
  margin-bottom: 10px !important;
}

html body main#mainContent #homeFeaturedDealsSection .home-v2-title {
  color: #18181b !important;
  font-size: 21px !important;
  line-height: 1.12 !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
  text-align: center !important;
  text-shadow: none !important;
}

html body main#mainContent #homeFeaturedDealsSection .home-v2-subtitle {
  color: #777 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-shadow: none !important;
}


/* באנר מבצעים אמיתי */
html body main#mainContent #homeDealsBanner.home-deals-banner {
  position: relative !important;
  width: 100% !important;
  height: 132px !important;
  margin: 0 0 10px !important;

  overflow: hidden !important;
  border-radius: 22px !important;

  background: #111827 !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;

  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* תמונת הבאנר */
html body main#mainContent #homeDealsBanner .home-deals-banner-img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;
  object-fit: cover !important;
  object-position: center !important;

  filter:
    saturate(1.04)
    contrast(1.03)
    brightness(1.1) !important;
}

/* שכבת כהות עדינה כדי שהכפתור יהיה קריא */
html body main#mainContent #homeDealsBanner::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.36) 0%,
      rgba(0, 0, 0, 0.10) 58%,
      rgba(0, 0, 0, 0.04) 100%
    ) !important;
}

/* כפתור לרכישה — נקי, לא AI */

/* פוקוס נגיש */


/* מוצרי המבצע מתחת לבאנר — קטנים */
html body main#mainContent #homeFeaturedDeals.home-v2-products-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* כל כרטיסי המבצע — בלי להפוך אף מוצר לבאנר */
html body main#mainContent #homeFeaturedDeals .home-v2-deal-card,
html body main#mainContent #homeFeaturedDeals .home-v2-product-card {
  position: relative !important;

  min-height: 98px !important;
  height: auto !important;

  display: flex !important;
  flex-direction: column !important;

  padding: 0 !important;
  overflow: hidden !important;

  border-radius: 13px !important;
  background: #ffffff !important;
  border: 1px solid rgba(229, 231, 235, 0.95) !important;

  box-shadow:
    0 7px 16px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* מסתיר תג מבצע כדי לא להעמיס על הכרטיסים הקטנים */
html body main#mainContent #homeFeaturedDeals .home-v2-deal-badge {
  display: none !important;
}

/* תמונה בכרטיס מבצע קטן */
html body main#mainContent #homeFeaturedDeals .home-v2-product-image {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;

  padding: 4px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #ffffff !important;
  border-bottom: 1px solid rgba(244, 244, 245, 1) !important;
}

html body main#mainContent #homeFeaturedDeals .home-v2-product-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: 46px !important;

  object-fit: contain !important;
  object-position: center !important;

  padding: 0 !important;
  margin: 0 !important;

  filter: drop-shadow(0 5px 8px rgba(15, 23, 42, 0.10)) !important;
}

/* גוף הכרטיס */
html body main#mainContent #homeFeaturedDeals .home-v2-product-body {
  flex: 1 !important;
  padding: 4px 4px 5px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;

  background: #ffffff !important;
}

/* שם מוצר */
html body main#mainContent #homeFeaturedDeals .home-v2-product-name {
  min-height: 23px !important;
  margin: 0 0 4px !important;

  color: #18181b !important;
  font-size: 9.4px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  text-align: center !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* מחיר + כפתור */
html body main#mainContent #homeFeaturedDeals .home-v2-product-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 3px !important;
}

html body main#mainContent #homeFeaturedDeals .home-v2-product-price {
  color: #18181b !important;
  font-size: 10.8px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

html body main#mainContent #homeFeaturedDeals .home-v2-product-old-price {
  display: none !important;
}

/* פלוס קטן */

/* מובייל קטן */
@media screen and (max-width: 420px) {
  html body main#mainContent #homeDealsBanner.home-deals-banner {
    height: 118px !important;
    border-radius: 20px !important;
  }

  html body main#mainContent #homeFeaturedDeals.home-v2-products-row {
    gap: 6px !important;
  }

  html body main#mainContent #homeFeaturedDeals .home-v2-deal-card,
  html body main#mainContent #homeFeaturedDeals .home-v2-product-card {
    min-height: 94px !important;
    border-radius: 12px !important;
  }

  html body main#mainContent #homeFeaturedDeals .home-v2-product-image {
    height: 49px !important;
    min-height: 49px !important;
  }

  html body main#mainContent #homeFeaturedDeals .home-v2-product-name {
    font-size: 9px !important;
  }

  html body main#mainContent #homeFeaturedDeals .home-v2-product-price {
    font-size: 10.2px !important;
  }
}
/* =========================================================
   ART TUNE 03B — Slightly Bigger Deal Product Cards
   מטרה: הגדלה עדינה לכרטיסי מוצרי המבצע מתחת לבאנר בלבד
   ========================================================= */

html body main#mainContent #homeFeaturedDeals.home-v2-products-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body main#mainContent #homeFeaturedDeals .home-v2-deal-card,
html body main#mainContent #homeFeaturedDeals .home-v2-product-card {
  min-height: 118px !important;
  border-radius: 15px !important;
}

html body main#mainContent #homeFeaturedDeals .home-v2-product-image {
  height: 68px !important;
  min-height: 68px !important;
  padding: 5px !important;
}

html body main#mainContent #homeFeaturedDeals .home-v2-product-image img {
  max-height: 60px !important;
}

html body main#mainContent #homeFeaturedDeals .home-v2-product-body {
  padding: 6px 6px 7px !important;
}

html body main#mainContent #homeFeaturedDeals .home-v2-product-name {
  min-height: 26px !important;
  font-size: 10.4px !important;
  line-height: 1.15 !important;
}

html body main#mainContent #homeFeaturedDeals .home-v2-product-price {
  font-size: 12px !important;
}

/* מובייל קטן */
@media screen and (max-width: 420px) {
  html body main#mainContent #homeFeaturedDeals.home-v2-products-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html body main#mainContent #homeFeaturedDeals .home-v2-deal-card,
  html body main#mainContent #homeFeaturedDeals .home-v2-product-card {
    min-height: 112px !important;
  }

  html body main#mainContent #homeFeaturedDeals .home-v2-product-image {
    height: 64px !important;
    min-height: 64px !important;
  }

  html body main#mainContent #homeFeaturedDeals .home-v2-product-image img {
    max-height: 56px !important;
  }

  html body main#mainContent #homeFeaturedDeals .home-v2-product-name {
    font-size: 10px !important;
  }

  html body main#mainContent #homeFeaturedDeals .home-v2-product-price {
    font-size: 11.5px !important;
  }
}
/* =========================================================
   ART TUNE 03D — Better Desktop Deals Alignment
   מטרה:
   מחשב בלבד — באנר רחב יותר וכרטיסי מבצעים מיושרים לצד ימין
   לא משנה מובייל
   ========================================================= */

@media screen and (min-width: 769px) {

  /* אזור המבצעים כולו רחב יותר */
  html body main#mainContent #homeFeaturedDealsSection {
    width: min(100%, 1040px) !important;
    max-width: 1040px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* הבאנר במחשב — רחב יותר */
  html body main#mainContent #homeDealsBanner.home-deals-banner {
    width: 100% !important;
    max-width: 1040px !important;
    height: 158px !important;
    margin: 0 auto 14px !important;
    border-radius: 24px !important;
  }

  /* מוצרי המבצע — מיושרים ימינה ולא באמצע */
  html body main#mainContent #homeFeaturedDeals.home-v2-products-row {
    width: 100% !important;
    max-width: 1040px !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: repeat(6, 132px) !important;
    gap: 12px !important;

    justify-content: start !important;
    direction: rtl !important;
  }

  /* כרטיסי המבצע בדסקטופ — לא רחבים מדי */
  html body main#mainContent #homeFeaturedDeals .home-v2-deal-card,
  html body main#mainContent #homeFeaturedDeals .home-v2-product-card {
    width: 132px !important;
    max-width: 132px !important;
    min-height: 128px !important;
    border-radius: 15px !important;
  }

  html body main#mainContent #homeFeaturedDeals .home-v2-product-image {
    height: 76px !important;
    min-height: 76px !important;
    padding: 7px !important;
  }

  html body main#mainContent #homeFeaturedDeals .home-v2-product-image img {
    max-height: 66px !important;
  }

  html body main#mainContent #homeFeaturedDeals .home-v2-product-name {
    font-size: 10.8px !important;
    min-height: 27px !important;
  }

  html body main#mainContent #homeFeaturedDeals .home-v2-product-price {
    font-size: 12px !important;
  }
}
/* =========================================================
   ART TUNE 03E — Deals Banner Same Size As Hero Banner
   מטרה:
   באנר המבצעים יהיה באותו רוחב ותחושה כמו הבאנרים המתחלפים למעלה
   לא משנה מובייל של הכרטיסים
   ========================================================= */

html body main#mainContent #homeFeaturedDealsSection {
  width: 100% !important;
  max-width: var(--page-max-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* באנר המבצעים — אותו רוחב כמו אזור האתר/הבאנר העליון */
html body main#mainContent #homeDealsBanner.home-deals-banner {
  width: 100% !important;
  max-width: var(--page-max-width) !important;

  /* יחס רחב ונמוך כמו באנר מתחלף */
  aspect-ratio: 1280 / 260 !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 auto 14px !important;
  border-radius: 22px !important;
}

/* התמונה ממלאת את הבאנר */
html body main#mainContent #homeDealsBanner .home-deals-banner-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* כפתור לרכישה — יותר קטן ונקי */

/* דסקטופ — שומר על אותו גודל כמו הבאנר העליון */
@media screen and (min-width: 769px) {
  html body main#mainContent #homeDealsBanner.home-deals-banner {
    max-width: var(--page-max-width) !important;
    aspect-ratio: 1280 / 360 !important;
    height: auto !important;
  }

  html body main#mainContent #homeFeaturedDeals.home-v2-products-row {
    max-width: var(--page-max-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    justify-content: start !important;
  }
}

/* מובייל — אותו רעיון, רק מותאם למסך */
@media screen and (max-width: 768px) {
  html body main#mainContent #homeDealsBanner.home-deals-banner {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1280 / 360 !important;
    height: auto !important;
    border-radius: 18px !important;
  }
}
/* =========================================================
   ART TUNE 03F — Align Deals Area To The Same Right Edge
   מטרה: במחשב בלבד להזיז את באנר המבצעים והכרטיסים ימינה
   כדי שיישבו באותו קו כמו שאר הכרטיסים
   ========================================================= */

@media screen and (min-width: 769px) {

  html body main#mainContent #homeFeaturedDealsSection {
    max-width: 760px !important;
    width: 760px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  html body main#mainContent #homeDealsBanner.home-deals-banner {
    width: 760px !important;
    max-width: 760px !important;
    margin-right: 0 !important;
    margin-left: auto !important;
  }

  html body main#mainContent #homeFeaturedDeals.home-v2-products-row {
    width: 760px !important;
    max-width: 760px !important;
    margin-right: 0 !important;
    margin-left: auto !important;

    display: grid !important;
    grid-template-columns: repeat(4, 132px) !important;
    gap: 12px !important;

    justify-content: start !important;
    direction: rtl !important;
  }
}
/* =========================================================
   ART FIX 04B — FORCE LIGHT REAL PRODUCT CARDS
   מטרה:
   להפוך את כרטיסי המוצר האמיתיים במסך מוצרים מכהה לבהיר
   זה מיועד ל-#products, לא לדף הבית בלבד
   לא נוגע בסרגלים / באנר / עגלה / Firebase
   ========================================================= */


/* הכרטיס עצמו */
html body main#mainContent #products.products-grid article.card.product-card,
html body main#mainContent #products.products-grid .product-card,
html body main#mainContent #products article.card.product-card,
html body main#mainContent #products .product-card {
  width: 100% !important;
  min-height: 278px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;

  border-radius: 22px !important;

  background: #ffffff !important;
  background-color: #ffffff !important;

  color: #18181b !important;

  border: 1px solid rgba(229, 231, 235, 0.95) !important;

  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;

  transform: none !important;
}


/* ביטול שכבות ישנות */
html body main#mainContent #products article.card.product-card::before,
html body main#mainContent #products article.card.product-card::after,
html body main#mainContent #products .product-card::before,
html body main#mainContent #products .product-card::after {
  display: none !important;
  content: none !important;
}


/* ריחוף עדין במחשב */
html body main#mainContent #products article.card.product-card:hover,
html body main#mainContent #products .product-card:hover {
  transform: translateY(-2px) !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: rgba(249, 115, 22, 0.28) !important;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}


/* אזור תמונה */
html body main#mainContent #products article.card.product-card > .product-image-wrap,
html body main#mainContent #products .product-card > .product-image-wrap,
html body main#mainContent #products .product-image-wrap {
  width: 100% !important;
  height: 136px !important;
  min-height: 136px !important;
  max-height: 136px !important;

  padding: 14px !important;
  margin: 0 !important;

  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #ffffff !important;
  background-color: #ffffff !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(244, 244, 245, 1) !important;

  aspect-ratio: auto !important;
  overflow: hidden !important;
}


/* מבטל שכבת כהות על תמונות cover */
html body main#mainContent #products article.card.product-card > .product-image-wrap::after,
html body main#mainContent #products .product-card > .product-image-wrap::after,
html body main#mainContent #products .product-image-wrap::after {
  display: none !important;
  content: none !important;
}


/* תמונה */
html body main#mainContent #products article.card.product-card > .product-image-wrap img,
html body main#mainContent #products .product-card > .product-image-wrap img,
html body main#mainContent #products .product-image-wrap img {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 108px !important;

  object-fit: contain !important;
  object-position: center center !important;

  padding: 0 !important;
  margin: 0 !important;

  display: block !important;

  filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.10)) !important;
  transform: translateZ(0) scale(var(--product-image-scale, 1)) !important;
  transform-origin: center center !important;
}


/* גוף הכרטיס */
html body main#mainContent #products article.card.product-card > .product-body,
html body main#mainContent #products .product-card > .product-body,
html body main#mainContent #products .product-body {
  flex: 1 !important;

  width: 100% !important;
  padding: 12px 12px 12px !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  background: #ffffff !important;
  background-color: #ffffff !important;

  border: 0 !important;
  border-top: none !important;
}


/* שם מוצר */
html body main#mainContent #products .product-name,
html body main#mainContent #products article.card.product-card .product-name {
  min-height: 40px !important;
  max-height: 40px !important;

  margin: 0 0 8px !important;
  padding: 0 !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;

  color: #18181b !important;
  background: transparent !important;

  font-size: 13.5px !important;
  font-weight: 950 !important;
  line-height: 1.32 !important;
  text-align: right !important;
  letter-spacing: -0.015em !important;

  text-shadow: none !important;
}


/* קטגוריה / תג קטן */
html body main#mainContent #products .pill,
html body main#mainContent #products .product-card .pill {
  width: fit-content !important;
  max-width: 100% !important;

  margin: 0 0 8px !important;
  padding: 5px 8px !important;

  border-radius: 999px !important;

  color: #71717a !important;
  background: #f5f5f5 !important;

  border: 1px solid rgba(229, 231, 235, 1) !important;
  box-shadow: none !important;

  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;

  text-shadow: none !important;
}


/* שורת מחיר */
html body main#mainContent #products .price-row,
html body main#mainContent #products .product-card .price-row {
  margin: 0 0 10px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}


/* מחיר */
html body main#mainContent #products .price,
html body main#mainContent #products .product-card .price {
  color: #18181b !important;

  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em !important;

  text-shadow: none !important;
}


/* טקסט מבצע אם קיים בכרטיס האמיתי */
html body main#mainContent #products [class*="offer"],
html body main#mainContent #products [class*="deal"] {
  color: #16a34a !important;
  text-shadow: none !important;
}


/* אזור פעולות */
html body main#mainContent #products .product-actions,
html body main#mainContent #products .product-card .product-actions {
  margin-top: auto !important;

  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}


/* כפתור הוספה */
html body main#mainContent #products .product-card .wolt-btn {
  min-height: 40px !important;

  border-radius: 14px !important;

  background: #f97316 !important;
  background-color: #f97316 !important;
  color: #ffffff !important;

  border: none !important;

  font-size: 13px !important;
  font-weight: 950 !important;

  box-shadow:
    0 10px 18px rgba(249, 115, 22, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;

  text-shadow: none !important;
}


/* קופסת כמות אחרי הוספה */
html body main#mainContent #products .qty-box,
html body main#mainContent #products .product-card .qty-box {
  width: 100% !important;
  min-width: 100% !important;
  height: 40px !important;

  padding: 4px !important;

  border-radius: 14px !important;

  background: #f7f7f7 !important;
  background-color: #f7f7f7 !important;

  border: 1px solid rgba(229, 231, 235, 1) !important;
  box-shadow: none !important;
}


/* כפתורי פלוס מינוס */
html body main#mainContent #products .qty-btn,
html body main#mainContent #products .product-card .qty-btn {
  width: 34px !important;
  height: 32px !important;

  border-radius: 11px !important;

  color: #ffffff !important;
  background: #f97316 !important;
  background-color: #f97316 !important;

  border: none !important;
  box-shadow: none !important;

  font-size: 20px !important;
  font-weight: 900 !important;
}


/* מספר כמות */
html body main#mainContent #products .qty-value,
html body main#mainContent #products .product-card .qty-value,
html body main#mainContent #products .product-card .qty-num {
  color: #18181b !important;
  background: transparent !important;

  font-size: 15px !important;
  font-weight: 950 !important;

  text-shadow: none !important;
}


/* מובייל קטן */
@media screen and (max-width: 420px) {
  html body main#mainContent #products.products-grid article.card.product-card,
  html body main#mainContent #products.products-grid .product-card,
  html body main#mainContent #products article.card.product-card,
  html body main#mainContent #products .product-card {
    min-height: 258px !important;
    border-radius: 20px !important;
  }

  html body main#mainContent #products article.card.product-card > .product-image-wrap,
  html body main#mainContent #products .product-card > .product-image-wrap,
  html body main#mainContent #products .product-image-wrap {
    height: 122px !important;
    min-height: 122px !important;
    max-height: 122px !important;
  }

  html body main#mainContent #products .product-name,
  html body main#mainContent #products article.card.product-card .product-name {
    font-size: 12.8px !important;
  }

  html body main#mainContent #products .price,
  html body main#mainContent #products .product-card .price {
    font-size: 17px !important;
  }
}
/* =========================================================
   ART FIX 04C — Fix Quantity Box Manual Input
   מטרה:
   לסדר את שינוי הכמות הידני בתוך כרטיסי מוצר
   שלא יהיה ריבוע ענק ושיראו את המספר באמצע
   ========================================================= */


/* קופסת כמות בכרטיס מוצר */
html body main#mainContent #products .product-card .qty-box {
  width: 100% !important;
  min-width: 100% !important;
  height: 40px !important;

  padding: 4px !important;

  display: grid !important;
  grid-template-columns: 34px 1fr 34px !important;
  align-items: center !important;
  gap: 6px !important;

  border-radius: 14px !important;

  background: #f7f7f7 !important;
  border: 1px solid rgba(229, 231, 235, 1) !important;
  box-shadow: none !important;
}


/* כפתורי פלוס ומינוס */
html body main#mainContent #products .product-card .qty-btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 32px !important;

  padding: 0 !important;
  margin: 0 !important;

  border-radius: 11px !important;

  display: grid !important;
  place-items: center !important;

  color: #ffffff !important;
  background: #f97316 !important;

  border: none !important;
  box-shadow: none !important;

  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}


/* המספר באמצע / שדה כמות ידני */
html body main#mainContent #products .product-card .qty-box input,
html body main#mainContent #products .product-card .qty-box input[type="number"],
html body main#mainContent #products .product-card .qty-box .qty-input,
html body main#mainContent #products .product-card .qty-box .qty-value,
html body main#mainContent #products .product-card .qty-box .qty-num {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 32px !important;
  min-height: 32px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: block !important;

  border-radius: 10px !important;

  background: #ffffff !important;
  color: #18181b !important;

  border: 1px solid rgba(229, 231, 235, 1) !important;
  box-shadow: none !important;

  text-align: center !important;

  font-size: 15px !important;
  line-height: 32px !important;
  font-weight: 950 !important;

  outline: none !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}


/* מסתיר חצים פנימיים של input number בדפדפנים */
html body main#mainContent #products .product-card .qty-box input[type="number"]::-webkit-outer-spin-button,
html body main#mainContent #products .product-card .qty-box input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}


/* פוקוס נגיש לשדה הכמות */
html body main#mainContent #products .product-card .qty-box input:focus {
  border-color: rgba(249, 115, 22, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18) !important;
}


/* אותו תיקון גם לכרטיסים בדף הבית / מבצעים אם הם משתמשים באותה קופסה */
html body main#mainContent #homeFeaturedDeals .qty-box,
html body main#mainContent #homeFeaturedProducts .qty-box {
  height: 40px !important;
  padding: 4px !important;

  display: grid !important;
  grid-template-columns: 34px 1fr 34px !important;
  align-items: center !important;
  gap: 6px !important;

  border-radius: 14px !important;
  background: #f7f7f7 !important;
  border: 1px solid rgba(229, 231, 235, 1) !important;
  box-shadow: none !important;
}

html body main#mainContent #homeFeaturedDeals .qty-box input,
html body main#mainContent #homeFeaturedProducts .qty-box input,
html body main#mainContent #homeFeaturedDeals .qty-box .qty-value,
html body main#mainContent #homeFeaturedProducts .qty-box .qty-value,
html body main#mainContent #homeFeaturedDeals .qty-box .qty-num,
html body main#mainContent #homeFeaturedProducts .qty-box .qty-num {
  height: 32px !important;
  min-height: 32px !important;

  padding: 0 !important;
  margin: 0 !important;

  background: #ffffff !important;
  color: #18181b !important;

  border: 1px solid rgba(229, 231, 235, 1) !important;
  border-radius: 10px !important;

  text-align: center !important;

  font-size: 15px !important;
  line-height: 32px !important;
  font-weight: 950 !important;

  box-shadow: none !important;
}
/* =========================================================
   ART FIX 04D — Show Quantity Number Clearly
   מטרה:
   להחזיר את מספר הכמות באמצע כפתורי + / -
   כי הכמות היא div.qty-value ולא input
   ========================================================= */

html body main#mainContent #products .product-card .qty-box,
html body main#mainContent #products article.card.product-card .qty-box {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;

  padding: 4px !important;
  margin: 0 !important;

  display: grid !important;
  grid-template-columns: 34px minmax(34px, 1fr) 34px !important;
  align-items: center !important;
  gap: 6px !important;

  border-radius: 14px !important;
  background: #f7f7f7 !important;
  border: 1px solid rgba(229, 231, 235, 1) !important;
  box-shadow: none !important;
}

/* כפתורי פלוס / מינוס */
html body main#mainContent #products .product-card .qty-box .qty-btn,
html body main#mainContent #products article.card.product-card .qty-box .qty-btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 32px !important;
  min-height: 32px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 11px !important;

  background: #f97316 !important;
  color: #ffffff !important;

  border: none !important;
  box-shadow: none !important;

  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

/* המספר באמצע — זה החלק החשוב */
html body main#mainContent #products .product-card .qty-box .qty-value,
html body main#mainContent #products article.card.product-card .qty-box .qty-value {
  width: 100% !important;
  min-width: 34px !important;
  max-width: none !important;

  height: 32px !important;
  min-height: 32px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 10px !important;

  background: #ffffff !important;
  color: #18181b !important;

  border: 1px solid rgba(229, 231, 235, 1) !important;
  box-shadow: none !important;

  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 950 !important;

  text-align: center !important;
  text-shadow: none !important;

  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  white-space: nowrap !important;

  cursor: pointer !important;
  z-index: 2 !important;
}

/* פוקוס נגיש כשעומדים על המספר */
html body main#mainContent #products .product-card .qty-box .qty-value:focus-visible,
html body main#mainContent #products article.card.product-card .qty-box .qty-value:focus-visible {
  outline: 3px solid rgba(249, 115, 22, 0.35) !important;
  outline-offset: 2px !important;
}

/* מובייל קטן */
@media screen and (max-width: 420px) {
  html body main#mainContent #products .product-card .qty-box,
  html body main#mainContent #products article.card.product-card .qty-box {
    height: 38px !important;
    min-height: 38px !important;
    grid-template-columns: 32px minmax(32px, 1fr) 32px !important;
    gap: 5px !important;
  }

  html body main#mainContent #products .product-card .qty-box .qty-btn,
  html body main#mainContent #products article.card.product-card .qty-box .qty-btn {
    width: 32px !important;
    min-width: 32px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 19px !important;
  }

  html body main#mainContent #products .product-card .qty-box .qty-value,
  html body main#mainContent #products article.card.product-card .qty-box .qty-value {
    height: 30px !important;
    min-height: 30px !important;
    font-size: 14px !important;
  }
}
@media screen and (max-width: 768px) {
  .hero-banner-slider {
    min-height: 160px;
  }

  .home-deals-banner {
    min-height: 200px;
  }
}
/* =========================================================
   ART SECTION TITLES V3
   רקע לבן נקי + כותרות פרימיום שחור/כתום
   ========================================================= */

/* רקע לבן נקי לגמרי */
html,
body {
  background-color: #ffffff !important;
}

body {
  background-color: #ffffff !important;
}

/* אם אתה רוצה לבטל לגמרי את תמונת הרקע */
body::before,
body::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* כותרות הסקשנים בדף הבית */
html body main#mainContent #homeV2 .home-v2-section-head {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;

  margin: 0 0 16px !important;
  padding: 0 4px !important;
}

/* אזור הכותרת + תת כותרת */
html body main#mainContent #homeV2 .home-v2-section-head > div {
  position: relative !important;
  min-width: 0 !important;
  padding-right: 15px !important;
}

/* פס כתום אנכי בצד ימין */
html body main#mainContent #homeV2 .home-v2-section-head > div::before {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 2px !important;

  width: 4px !important;
  height: calc(100% - 2px) !important;
  min-height: 48px !important;
  border-radius: 999px !important;

  background: linear-gradient(180deg, #ff9a24 0%, #f97316 45%, #c2410c 100%) !important;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.22) !important;
}

/* הכותרת השמנה - שחור פרימיום */
html body main#mainContent #homeV2 .home-v2-title {
  display: inline-block !important;
  position: relative !important;

  margin: 0 !important;

  font-family: "Heebo", "Rubik", Arial, sans-serif !important;
  font-size: 25px !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;

  color: #151515 !important;
  letter-spacing: -0.045em !important;
  text-align: right !important;
  white-space: nowrap !important;

  text-shadow: none !important;
}

/* הפס מתחת לכותרת - באורך מלא של הכותרת */
html body main#mainContent #homeV2 .home-v2-title::after {
  content: "" !important;
  display: block !important;

  width: 100% !important;
  height: 2px !important;
  margin-top: 7px !important;

  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    #c2410c 0%,
    #f97316 45%,
    #ffb15c 100%
  ) !important;
}

/* התת כותרת - כתום פרימיום */
html body main#mainContent #homeV2 .home-v2-subtitle {
  margin: 8px 0 0 !important;

  font-family: "Heebo", "Rubik", Arial, sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;

  color: #c2410c !important;
  letter-spacing: -0.015em !important;
  text-align: right !important;
  text-shadow: none !important;
}

/* שלא יישאר קו מפריד מהקוד הקודם */
html body main#mainContent #homeV2 .home-v2-subtitle::before {
  display: none !important;
  content: none !important;
}

/* כפתור הצג את כל הקטגוריות */
html body main#mainContent #homeV2 .home-v2-section-link,
html body main#mainContent #homeShowAllCategoriesButton {
  flex: 0 0 auto !important;

  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;

  font-family: "Heebo", "Rubik", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;

  color: #c2410c !important;
  background: #ffffff !important;
  border: 1px solid rgba(249, 115, 22, 0.24) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
}

/* מובייל */
@media screen and (max-width: 520px) {
  html body main#mainContent #homeV2 .home-v2-section-head {
    margin-bottom: 14px !important;
  }

  html body main#mainContent #homeV2 .home-v2-title {
    font-size: 24px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  html body main#mainContent #homeV2 .home-v2-subtitle {
    margin-top: 7px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  html body main#mainContent #homeV2 .home-v2-section-head > div::before {
    min-height: 46px !important;
  }

  html body main#mainContent #homeV2 .home-v2-section-link,
  html body main#mainContent #homeShowAllCategoriesButton {
    font-size: 11.5px !important;
    padding: 7px 10px !important;
  }
}
/* =========================================================
   FIX — יישור אזור המבצעים לימין כמו שאר התוכן
   מבצעים + באנר + כרטיסים
   ========================================================= */

/* כל אזור המבצעים */
html body main#mainContent #homeFeaturedDealsSection {
  width: 100% !important;
  max-width: var(--page-max-width) !important;

  margin-right: 0 !important;
  margin-left: auto !important;

  padding-right: 16px !important;
  padding-left: 16px !important;
}

/* באנר המבצעים — יושב מימין ולא באמצע */
html body main#mainContent #homeDealsBanner.home-deals-banner {
  width: 100% !important;
  max-width: 100% !important;

  margin-right: 0 !important;
  margin-left: auto !important;
  margin-bottom: 14px !important;

  display: block !important;
}

/* תמונת הבאנר */
html body main#mainContent #homeDealsBanner .home-deals-banner-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* רשימת המבצעים — מתחילה מימין */
html body main#mainContent #homeFeaturedDeals.home-v2-products-row {
  width: 100% !important;
  max-width: 100% !important;

  margin-right: 0 !important;
  margin-left: auto !important;

  justify-content: start !important;
  justify-items: stretch !important;
  direction: rtl !important;
}

/* דסקטופ — שלא יברח לאמצע */
@media screen and (min-width: 769px) {
  html body main#mainContent #homeFeaturedDealsSection {
    max-width: var(--page-max-width) !important;
    margin-right: 0 !important;
    margin-left: auto !important;
  }

  html body main#mainContent #homeDealsBanner.home-deals-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: auto !important;
  }

  html body main#mainContent #homeFeaturedDeals.home-v2-products-row {
    justify-content: start !important;
    margin-right: 0 !important;
    margin-left: auto !important;
  }
}
/* =========================================================
   FIX — ביטול צל בקטגוריות מובחרות
   + פס כתום פרימיום בין תמונת מוצר לבין גוף הכרטיס
   ========================================================= */

/* ביטול הצל מאחורי אזור קטגוריות מובחרות */
html body main#mainContent #homeFeaturedCategoriesSection,
html body main#mainContent #homeFeaturedCategories,
html body main#mainContent .home-v2-featured-categories,
html body main#mainContent .home-v2-horizontal-list {
  box-shadow: none !important;
  filter: none !important;
}

/* ביטול צל חזק בכרטיסי קטגוריות מובחרות בדף הבית */
html body main#mainContent #homeFeaturedCategories .home-v2-category-card,
html body main#mainContent #homeFeaturedCategories .category-card,
html body main#mainContent #homeFeaturedCategories .card {
  box-shadow: none !important;
}

/* פס כתום פרימיום בכרטיסי קטגוריות ומוצרים רגילים */
html body .category-image-wrap,
html body .product-image-wrap {
  border-bottom: 3px solid transparent !important;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, #c2410c 0%, #f97316 45%, #ffb15c 100%) border-box !important;
}

/* אם יש כרטיסים בדף הבית עם מחלקות אחרות */
html body main#mainContent #homeV2 .home-v2-category-image,
html body main#mainContent #homeV2 .home-v2-product-image {
  border-bottom: 3px solid transparent !important;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, #c2410c 0%, #f97316 45%, #ffb15c 100%) border-box !important;
}

/* פס כתום גם בכרטיסי מוצרים שנוצרים בדף הבית */
html body main#mainContent #homeV2 .product-card .product-image-wrap,
html body main#mainContent #homeV2 .category-card .category-image-wrap,
html body main#mainContent #homeV2 .card .product-image-wrap,
html body main#mainContent #homeV2 .card .category-image-wrap {
  border-bottom: 3px solid transparent !important;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, #c2410c 0%, #f97316 45%, #ffb15c 100%) border-box !important;
}

/* שיפור עדין לכרטיס עצמו — בלי צל כבד */
html body .product-card,
html body .category-card,
html body .card {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055) !important;
}

/* מובייל — פס טיפה דק יותר כדי שלא יראה גס */
@media screen and (max-width: 520px) {
  html body .category-image-wrap,
  html body .product-image-wrap,
  html body main#mainContent #homeV2 .home-v2-category-image,
  html body main#mainContent #homeV2 .home-v2-product-image {
    border-bottom-width: 2px !important;
  }
}
/* =========================================================
   FIX מדויק — פס כתום רק בכרטיסי דף הבית
   קטגוריות מובחרות / תתי קטגוריות / מבצעים / מוצרים נבחרים
   ========================================================= */

/* מבטל פס שהוחל בטעות במסכים הפנימיים */
html body main#mainContent #categoriesSection .category-image-wrap::after,
html body main#mainContent #subcategoriesSection .category-image-wrap::after,
html body main#mainContent #productsSection .product-image-wrap::after,
html body main#mainContent #categoriesSection .text-only-wrap::after,
html body main#mainContent #subcategoriesSection .text-only-wrap::after {
  display: none !important;
  content: none !important;
}

/* מחזיר את המסכים הפנימיים לקו רגיל עדין */
html body main#mainContent #categoriesSection .category-image-wrap,
html body main#mainContent #subcategoriesSection .category-image-wrap,
html body main#mainContent #productsSection .product-image-wrap,
html body main#mainContent #categoriesSection .text-only-wrap,
html body main#mainContent #subcategoriesSection .text-only-wrap {
  border-bottom: 1px solid rgba(229, 231, 235, 0.9) !important;
}

/* דף הבית — אזורי תמונה צריכים להיות יחסיים כדי שהפס ישב בתחתית */
html body main#mainContent #homeV2 .home-v2-category-image,
html body main#mainContent #homeV2 .home-v2-subcategory-image,
html body main#mainContent #homeV2 .home-v2-product-image {
  position: relative !important;
  overflow: hidden !important;
  border-bottom: none !important;
}

/* הפס הכתום בין התמונה לטקסט — קטגוריות / תתי קטגוריות / מוצרים / מבצעים */
html body main#mainContent #homeV2 .home-v2-category-image::after,
html body main#mainContent #homeV2 .home-v2-subcategory-image::after,
html body main#mainContent #homeV2 .home-v2-product-image::after {
  content: "" !important;
  position: absolute !important;

  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;

  height: 3px !important;
  border-radius: 999px !important;

  background: linear-gradient(
    90deg,
    #8f2d10 0%,
    #f97316 48%,
    #ffbd73 100%
  ) !important;

  z-index: 5 !important;
  pointer-events: none !important;
}

/* ניקוי פסים ישנים שירדו לתחתית כל הכרטיס */
html body main#mainContent #homeV2 .home-v2-category-card::after,
html body main#mainContent #homeV2 .home-v2-subcategory-card::after,
html body main#mainContent #homeV2 .home-v2-product-card::after,
html body main#mainContent #homeV2 .home-v2-deal-card::after {
  display: none !important;
  content: none !important;
}

/* מובייל — פס קצת יותר עדין */
@media screen and (max-width: 520px) {
  html body main#mainContent #homeV2 .home-v2-category-image::after,
  html body main#mainContent #homeV2 .home-v2-subcategory-image::after,
  html body main#mainContent #homeV2 .home-v2-product-image::after {
    height: 2px !important;
  }
}
/* =========================================================
   FIX סופי — פס כתום במוצרים בתוך קטגוריות
   תופס את המבנה האמיתי: #products > article.card.product-card > .product-image-wrap
   ========================================================= */

html body main#mainContent #products.products-grid article.card.product-card > .product-image-wrap,
html body main#mainContent #products.products-grid .product-card > .product-image-wrap,
html body main#mainContent #products article.card.product-card > .product-image-wrap,
html body main#mainContent #products .product-card > .product-image-wrap {
  position: relative !important;
  overflow: hidden !important;
  border-bottom: none !important;
}

/* הפס הכתום בדיוק בין התמונה לבין פרטי המוצר */
html body main#mainContent #products.products-grid article.card.product-card > .product-image-wrap::after,
html body main#mainContent #products.products-grid .product-card > .product-image-wrap::after,
html body main#mainContent #products article.card.product-card > .product-image-wrap::after,
html body main#mainContent #products .product-card > .product-image-wrap::after {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;

  width: 100% !important;
  height: 3px !important;

  border-radius: 999px !important;

  background: linear-gradient(
    90deg,
    #8f2d10 0%,
    #f97316 48%,
    #ffbd73 100%
  ) !important;

  z-index: 999 !important;
  pointer-events: none !important;
}

/* שלא יהיה פס ישן בתחתית כל הכרטיס */
html body main#mainContent #products article.card.product-card::after,
html body main#mainContent #products .product-card::after {
  display: none !important;
  content: none !important;
}

/* מובייל — פס עדין יותר */
@media screen and (max-width: 520px) {
  html body main#mainContent #products.products-grid article.card.product-card > .product-image-wrap::after,
  html body main#mainContent #products.products-grid .product-card > .product-image-wrap::after,
  html body main#mainContent #products article.card.product-card > .product-image-wrap::after,
  html body main#mainContent #products .product-card > .product-image-wrap::after {
    height: 2px !important;
  }
}
/* =========================================================
   FIX — מסגרת כתומה פרימיום באותו צבע של פס ההפרדה
   לכל כרטיסי מוצרים + כרטיסי דף הבית
   ========================================================= */

/* כרטיסי מוצרים בתוך קטגוריות */
html body main#mainContent #products article.card.product-card,
html body main#mainContent #products .product-card,

/* כרטיסי דף הבית */
html body main#mainContent #homeV2 .home-v2-category-card,
html body main#mainContent #homeV2 .home-v2-subcategory-card,
html body main#mainContent #homeV2 .home-v2-product-card,
html body main#mainContent #homeV2 .home-v2-deal-card {
  border: 1.5px solid transparent !important;

  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
      90deg,
      #8f2d10 0%,
      #f97316 48%,
      #ffbd73 100%
    ) border-box !important;

  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.045) !important;
}

/* שלא תהיה מסגרת ישנה שדורסת */
html body main#mainContent #products article.card.product-card,
html body main#mainContent #products .product-card {
  overflow: hidden !important;
}

/* מובייל — מסגרת טיפה עדינה יותר */
@media screen and (max-width: 520px) {
  html body main#mainContent #products article.card.product-card,
  html body main#mainContent #products .product-card,
  html body main#mainContent #homeV2 .home-v2-category-card,
  html body main#mainContent #homeV2 .home-v2-subcategory-card,
  html body main#mainContent #homeV2 .home-v2-product-card,
  html body main#mainContent #homeV2 .home-v2-deal-card {
    border-width: 1px !important;
  }
}
/* =========================================================
   FIX סופי — מסגרת כתומה גלויה למוצרים עצמם
   בלי ::before כדי לא להתנגש עם הקוד הקיים
   ========================================================= */

html body main#mainContent #products article.card.product-card,
html body main#mainContent #products .card.product-card,
html body main#mainContent #products .product-card {
  border: 1px solid #f97316 !important;
  outline: 1px solid #f97316 !important;
  outline-offset: -1px !important;

  border-radius: 18px !important;
  overflow: hidden !important;

  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.055),
    inset 0 0 0 1px rgba(249, 115, 22, 0.35) !important;
}

/* במעבר עכבר במחשב — טיפה יותר פרימיום */
@media (hover: hover) {
  html body main#mainContent #products article.card.product-card:hover,
  html body main#mainContent #products .card.product-card:hover,
  html body main#mainContent #products .product-card:hover {
    border-color: #f97316 !important;
    outline-color: #f97316 !important;

    box-shadow:
      0 12px 28px rgba(15, 23, 42, 0.075),
      inset 0 0 0 1px rgba(249, 115, 22, 0.55) !important;
  }
}
/* =========================================================
   FORCE FINAL — תתי קטגוריות פנימיות לבנות
   מנצח את העיצוב הכהה הישן של #subcategories
   ========================================================= */

/* הרשת עצמה */
body main#mainContent section#subcategoriesSection div#subcategories.categories-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* הכרטיס עצמו */
body main#mainContent section#subcategoriesSection div#subcategories.categories-grid > article.card.category-card {
  min-height: 178px !important;
  border-radius: 18px !important;
  overflow: hidden !important;

  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;

  border: 1px solid #f97316 !important;
  outline: 1px solid #f97316 !important;
  outline-offset: -1px !important;

  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.055),
    inset 0 0 0 1px rgba(249, 115, 22, 0.32) !important;

  filter: none !important;
}

/* מבטל שכבות כהות על הכרטיס */
body main#mainContent section#subcategoriesSection div#subcategories.categories-grid > article.card.category-card::before,
body main#mainContent section#subcategoriesSection div#subcategories.categories-grid > article.card.category-card::after {
  display: none !important;
  content: none !important;
}

/* אזור התמונה */
body main#mainContent section#subcategoriesSection div#subcategories.categories-grid > article.card.category-card > div.category-image-wrap {
  position: relative !important;

  height: 112px !important;
  min-height: 112px !important;
  padding: 12px !important;

  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;

  border: none !important;
  border-bottom: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  filter: none !important;
}

/* תמונה */
body main#mainContent section#subcategoriesSection div#subcategories.categories-grid > article.card.category-card > div.category-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  max-height: 92px !important;

  object-fit: contain !important;
  filter: none !important;
}

/* פס כתום בין תמונה לטקסט */
body main#mainContent section#subcategoriesSection div#subcategories.categories-grid > article.card.category-card > div.category-image-wrap::after {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;

  height: 2px !important;

  background: linear-gradient(
    90deg,
    #8f2d10 0%,
    #f97316 48%,
    #ffbd73 100%
  ) !important;

  z-index: 50 !important;
}

/* גוף הכרטיס */
body main#mainContent section#subcategoriesSection div#subcategories.categories-grid > article.card.category-card > div.category-body {
  min-height: 62px !important;
  padding: 12px 10px 14px !important;

  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* מבטל את החץ/העיגול הכתום הישן */
body main#mainContent section#subcategoriesSection div#subcategories.categories-grid > article.card.category-card > div.category-body::before,
body main#mainContent section#subcategoriesSection div#subcategories.categories-grid > article.card.category-card > div.category-body::after {
  display: none !important;
  content: none !important;
}

/* שם התת קטגוריה */
body main#mainContent section#subcategoriesSection div#subcategories.categories-grid > article.card.category-card h3.category-name {
  color: #151515 !important;
  background: transparent !important;

  font-family: "Heebo", "Rubik", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;

  text-align: center !important;
  text-shadow: none !important;
}

/* מסתיר טקסט משנה בתוך הכרטיס */
body main#mainContent section#subcategoriesSection div#subcategories.categories-grid > article.card.category-card .section-note {
  display: none !important;
}

/* מובייל קטן */
@media screen and (max-width: 420px) {
  body main#mainContent section#subcategoriesSection div#subcategories.categories-grid > article.card.category-card {
    min-height: 166px !important;
  }

  body main#mainContent section#subcategoriesSection div#subcategories.categories-grid > article.card.category-card > div.category-image-wrap {
    height: 104px !important;
    min-height: 104px !important;
  }

  body main#mainContent section#subcategoriesSection div#subcategories.categories-grid > article.card.category-card h3.category-name {
    font-size: 14px !important;
  }
}
/* =========================================================
   FIX — עגלה עליונה כמו בסרגל התחתון
   בלי ריבוע, רק סמל + תג כמות
   ========================================================= */

html body .topbar #cartFab.cart-fab {
  position: relative !important;

  width: 44px !important;
  height: 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  color: #f3f4f6 !important;
  font-size: 22px !important;
  line-height: 1 !important;

  filter: none !important;
  transform: none !important;
}

/* ביטול אפקטים ישנים של הכפתור */
html body .topbar #cartFab.cart-fab::before,
html body .topbar #cartFab.cart-fab::after {
  display: none !important;
  content: none !important;
}

/* שלא יקפוץ במעבר עכבר */
html body .topbar #cartFab.cart-fab:hover,
html body .topbar #cartFab.cart-fab:active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* תג הכמות הקטן — כמו בסרגל התחתון */
html body .topbar #cartBadge.cart-badge {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;

  min-width: 15px !important;
  height: 15px !important;
  padding: 0 4px !important;

  border-radius: 999px !important;

  background: #ef4444 !important;
  color: #ffffff !important;

  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 15px !important;

  border: none !important;
  box-shadow: none !important;
}
/* =========================================================
   FIX — תתי קטגוריות בדסקטופ כמו במובייל
   ריבועים נקיים במקום מלבנים רחבים
   ========================================================= */

/* מסך תתי קטגוריות — גם בדסקטופ נשאר ברוחב מובייל נעים */
html body main#mainContent section#subcategoriesSection {
  max-width: 520px !important;
  margin: 0 auto !important;
  padding-right: 16px !important;
  padding-left: 16px !important;
}

/* הגריד של תתי הקטגוריות */
html body main#mainContent #subcategories.categories-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* כרטיס תת קטגוריה — ריבועי כמו במובייל */
html body main#mainContent #subcategories .category-card,
html body main#mainContent #subcategories .card.category-card,
html body main#mainContent #subcategories article.card.category-card {
  width: 100% !important;
  min-height: auto !important;
  aspect-ratio: 1 / 1 !important;

  border-radius: 18px !important;
  overflow: hidden !important;

  background: #ffffff !important;
  border: 1px solid #f97316 !important;
  outline: 1px solid #f97316 !important;
  outline-offset: -1px !important;

  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055) !important;
}

/* אזור התמונה בתוך הכרטיס */
html body main#mainContent #subcategories .category-image-wrap,
html body main#mainContent #subcategories .text-only-wrap {
  height: 68% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;

  padding: 12px !important;
  background: #ffffff !important;
  border-bottom: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* התמונה עצמה — גדולה יותר אבל בלי חיתוך */
html body main#mainContent #subcategories .category-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  max-width: 92% !important;
  max-height: 92% !important;
  object-fit: contain !important;
}

/* פס כתום בין התמונה לשם */
html body main#mainContent #subcategories .category-image-wrap::after,
html body main#mainContent #subcategories .text-only-wrap::after {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;

  height: 2px !important;

  background: linear-gradient(
    90deg,
    #8f2d10 0%,
    #f97316 48%,
    #ffbd73 100%
  ) !important;

  z-index: 20 !important;
}

/* החלק של שם התת קטגוריה */
html body main#mainContent #subcategories .category-body {
  height: 32% !important;
  min-height: 0 !important;

  padding: 8px 8px !important;
  background: #ffffff !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* שם התת קטגוריה */
html body main#mainContent #subcategories .category-name {
  color: #151515 !important;

  font-family: "Heebo", "Rubik", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;

  text-align: center !important;
  text-shadow: none !important;
}

/* ביטול שכבות כהות/חצים ישנים */
html body main#mainContent #subcategories .category-card::before,
html body main#mainContent #subcategories .category-card::after,
html body main#mainContent #subcategories .category-body::before,
html body main#mainContent #subcategories .category-body::after {
  display: none !important;
  content: none !important;
}

/* בדסקטופ גדול — עדיין לא נמתח לרוחב ענק */
@media screen and (min-width: 769px) {
  html body main#mainContent section#subcategoriesSection {
    max-width: 520px !important;
  }
}

/* מובייל קטן */
@media screen and (max-width: 420px) {
  html body main#mainContent section#subcategoriesSection {
    max-width: 100% !important;
  }

  html body main#mainContent #subcategories.categories-grid {
    gap: 10px !important;
  }

  html body main#mainContent #subcategories .category-name {
    font-size: 13.5px !important;
  }
}
/* =========================================================
   FIX — צמצום גובה תתי קטגוריות
   פחות מקום ריק מתחת לכיתוב
   ========================================================= */

/* מקטין את גובה הכרטיסים */
html body main#mainContent #subcategories .category-card,
html body main#mainContent #subcategories .card.category-card,
html body main#mainContent #subcategories article.card.category-card {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: 145px !important;
}

/* אזור התמונה */
html body main#mainContent #subcategories .category-image-wrap,
html body main#mainContent #subcategories .text-only-wrap {
  height: 92px !important;
  min-height: 92px !important;
  padding: 10px !important;
}

/* התמונה עצמה */
html body main#mainContent #subcategories .category-image-wrap img {
  max-height: 74px !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* אזור הכיתוב */
html body main#mainContent #subcategories .category-body {
  height: 53px !important;
  min-height: 53px !important;
  padding: 7px 8px !important;
}

/* הכיתוב עצמו */
html body main#mainContent #subcategories .category-name {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

/* דסקטופ — טיפה יותר גדול אבל עדיין בלי חלל ריק */
@media screen and (min-width: 769px) {
  html body main#mainContent #subcategories .category-card,
  html body main#mainContent #subcategories .card.category-card,
  html body main#mainContent #subcategories article.card.category-card {
    height: 150px !important;
  }

  html body main#mainContent #subcategories .category-image-wrap,
  html body main#mainContent #subcategories .text-only-wrap {
    height: 96px !important;
    min-height: 96px !important;
  }

  html body main#mainContent #subcategories .category-body {
    height: 54px !important;
    min-height: 54px !important;
  }
}
/* =========================================================
   ART FINAL — מסך כל הקטגוריות
   כותרת ממורכזת נקייה + כרטיסים עם פס הפרדה אחד בלבד
   ========================================================= */

/* ראש חלון הקטגוריות */
html body .home-all-categories-head {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 14px 56px 12px !important;
  min-height: 74px !important;

  border-bottom: 1px solid rgba(249, 115, 22, 0.10) !important;
}

/* אזור הכותרת */
html body .home-all-categories-head-text {
  position: relative !important;
  padding: 0 !important;
  margin: 0 auto !important;

  text-align: center !important;
}

/* ביטול פס צד */
html body .home-all-categories-head-text::before {
  display: none !important;
  content: none !important;
}

/* כותרת קטגוריות — כתום פרימיום */
html body .home-all-categories-title {
  display: inline-block !important;
  position: relative !important;

  margin: 0 !important;

  font-family: "Heebo", "Rubik", Arial, sans-serif !important;
  font-size: 25px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;

  color: #f97316 !important;
  letter-spacing: -0.045em !important;
  text-align: center !important;
  text-shadow: none !important;
}

/* קו אחד בלבד מתחת לכותרת */
html body .home-all-categories-title::after {
  content: "" !important;
  display: block !important;

  width: 100% !important;
  height: 2px !important;
  margin: 7px auto 0 !important;

  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    #8f2d10 0%,
    #f97316 48%,
    #ffbd73 100%
  ) !important;
}

/* תת כותרת */
html body .home-all-categories-subtitle {
  margin: 7px 0 0 !important;

  font-family: "Heebo", "Rubik", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;

  color: #151515 !important;
  opacity: 0.68 !important;

  letter-spacing: -0.015em !important;
  text-align: center !important;
}

/* איקס — קטן, מרובע, בצד ימין, בלי משחקיות */
html body #homeAllCategoriesClose.home-all-categories-close {
  position: absolute !important;
  top: 16px !important;
  right: 18px !important;

  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  border-radius: 10px !important;

  background: #ffffff !important;
  color: #151515 !important;

  border: 1px solid rgba(249, 115, 22, 0.30) !important;
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.045) !important;

  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  transform: none !important;
}

/* ביטול אפקטים ישנים של האיקס */
html body #homeAllCategoriesClose.home-all-categories-close::before,
html body #homeAllCategoriesClose.home-all-categories-close::after {
  display: none !important;
  content: none !important;
}

/* כפתור חזרה לאתר — בצד שמאל, נקי */
html body #homeAllCategoriesBack.home-all-categories-back {
  position: absolute !important;
  top: 16px !important;
  left: 18px !important;

  min-height: 30px !important;
  padding: 6px 10px !important;

  border-radius: 999px !important;

  font-family: "Heebo", "Rubik", Arial, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;

  color: #c2410c !important;
  background: #ffffff !important;
  border: 1px solid rgba(249, 115, 22, 0.20) !important;
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.04) !important;
}

/* כרטיסי כל הקטגוריות */
html body .home-all-categories-grid .home-all-category-card,
html body .home-all-categories-grid .category-card,
html body .home-all-categories-grid article,
html body .home-all-categories-grid button {
  position: relative !important;
  overflow: hidden !important;

  background: #ffffff !important;
  border: 1px solid rgba(249, 115, 22, 0.18) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04) !important;
}

/* ביטול כל פס כפול קודם */
html body .home-all-categories-grid .home-all-category-card::before,
html body .home-all-categories-grid .home-all-category-card::after,
html body .home-all-categories-grid .category-card::before,
html body .home-all-categories-grid .category-card::after,
html body .home-all-categories-grid article::before,
html body .home-all-categories-grid article::after,
html body .home-all-categories-grid button::before,
html body .home-all-categories-grid button::after {
  display: none !important;
  content: none !important;
}

/* אזור תמונה בכרטיס */
html body .home-all-categories-grid .home-all-category-image,
html body .home-all-categories-grid .category-image-wrap {
  position: relative !important;
  overflow: hidden !important;
}

/* קו הפרדה אחד בלבד בין תמונה לכיתוב */
html body .home-all-categories-grid .home-all-category-image::after,
html body .home-all-categories-grid .category-image-wrap::after {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;

  height: 2px !important;

  background: linear-gradient(
    90deg,
    #8f2d10 0%,
    #f97316 48%,
    #ffbd73 100%
  ) !important;

  z-index: 20 !important;
  pointer-events: none !important;
}

/* טקסט הכרטיסים */
html body .home-all-categories-grid .home-all-category-name,
html body .home-all-categories-grid .category-name,
html body .home-all-categories-grid h3,
html body .home-all-categories-grid p {
  color: #151515 !important;
  font-family: "Heebo", "Rubik", Arial, sans-serif !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

/* מובייל */
@media screen and (max-width: 520px) {
  html body .home-all-categories-head {
    padding: 13px 52px 11px !important;
    min-height: 72px !important;
  }

  html body .home-all-categories-title {
    font-size: 23px !important;
  }

  html body .home-all-categories-subtitle {
    font-size: 12.5px !important;
  }

  html body #homeAllCategoriesClose.home-all-categories-close {
    top: 15px !important;
    right: 14px !important;

    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;

    border-radius: 9px !important;
    font-size: 18px !important;
  }

  html body #homeAllCategoriesBack.home-all-categories-back {
    top: 15px !important;
    left: 14px !important;

    font-size: 11px !important;
    padding: 5px 9px !important;
  }
}
/* =========================================================
   FIX — מרווח עליון למסך כל הקטגוריות
   שלא יהיה צמוד לסרגל העליון
   ========================================================= */

html body #homeAllCategoriesOverlay.home-all-categories-overlay {
  padding-top: 24px !important;
}

html body #homeAllCategoriesOverlay .home-all-categories-panel {
  margin-top: 18px !important;
}

/* מובייל */
@media screen and (max-width: 520px) {
  html body #homeAllCategoriesOverlay.home-all-categories-overlay {
    padding-top: 22px !important;
  }

  html body #homeAllCategoriesOverlay .home-all-categories-panel {
    margin-top: 16px !important;
  }
}
/* =========================================================
   DELIVERY DETAILS FIELDS ONLY
   סידור קוסמטי רק לשדות שממלאים בפרטי משלוח
   לא נוגע בסיכום / תקנון / כפתור שליחה / JS
   ========================================================= */

/* שדות פרטי משלוח לפי IDs */
html body #custName,
html body #custPhone,
html body #custCity,
html body #custStreet,
html body #custHouseNumber,
html body #custEnt,
html body #custFloor,
html body #custApt,
html body #custNotes {
  width: 100% !important;

  min-height: 46px !important;
  padding: 12px 14px !important;
  margin: 0 !important;

  border-radius: 14px !important;

  background: #ffffff !important;
  color: #151515 !important;

  border: 1px solid rgba(148, 163, 184, 0.42) !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.035) !important;

  font-family: "Heebo", "Rubik", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;

  outline: none !important;
}

/* פוקוס כתום יפה */
html body #custName:focus,
html body #custPhone:focus,
html body #custCity:focus,
html body #custStreet:focus,
html body #custHouseNumber:focus,
html body #custEnt:focus,
html body #custFloor:focus,
html body #custApt:focus,
html body #custNotes:focus {
  border-color: #f97316 !important;
  box-shadow:
    0 0 0 3px rgba(249, 115, 22, 0.13),
    0 6px 16px rgba(15, 23, 42, 0.045) !important;
}

/* רווחים בין השדות עצמם */
html body #custName,
html body #custPhone,
html body #custCity {
  margin-bottom: 11px !important;
}

/* רחוב */
html body #custStreet {
  margin-bottom: 9px !important;
}

/* מספר בית */
html body #custHouseNumber {
  margin-bottom: 9px !important;
  text-align: center !important;
}

/* כניסה / קומה / דירה */
html body #custEnt,
html body #custFloor,
html body #custApt {
  min-height: 43px !important;
  padding: 10px 10px !important;
  text-align: center !important;
}

/* הערות לשליח */
html body #custNotes {
  min-height: 52px !important;
  margin-top: 10px !important;
  resize: vertical !important;
}

/* מסדר את השדות הקטנים אם הם נמצאים אחד ליד השני */
html body #custEnt,
html body #custFloor {
  margin-left: 6px !important;
}

/* מובייל */
@media screen and (max-width: 520px) {
  html body #custName,
  html body #custPhone,
  html body #custCity,
  html body #custStreet,
  html body #custHouseNumber,
  html body #custEnt,
  html body #custFloor,
  html body #custApt,
  html body #custNotes {
    min-height: 44px !important;
    padding: 11px 12px !important;
    border-radius: 13px !important;
    font-size: 13.5px !important;
  }

  html body #custEnt,
  html body #custFloor,
  html body #custApt {
    min-height: 42px !important;
    padding: 10px 8px !important;
  }
}
/* =========================================================
   CHECKOUT — כפתור חזור לעגלה במקום X
   פעולה קיימת נשארת: סוגר פרטי משלוח ופותח עגלה
   ========================================================= */

html body #checkoutModalOverlay #backToCartButton,
html body #checkoutModalOverlay #backToCartButton.checkout-back-to-cart {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: auto !important;
  height: 34px !important;
  min-width: 0 !important;
  min-height: 34px !important;
  max-width: none !important;
  max-height: none !important;

  padding: 0 12px !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #ffffff !important;
  color: #c2410c !important;

  border: 1px solid rgba(249, 115, 22, 0.28) !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.055) !important;

  font-family: "Heebo", "Rubik", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  text-indent: 0 !important;
  overflow: visible !important;
}

/* מבטל את ה-X הישן שנוצר דרך CSS */
html body #checkoutModalOverlay #backToCartButton::before,
html body #checkoutModalOverlay #backToCartButton::after {
  display: none !important;
  content: none !important;
}

/* מעבר עכבר עדין */
html body #checkoutModalOverlay #backToCartButton:hover {
  background: #fff7ed !important;
  color: #9a3412 !important;
  border-color: #f97316 !important;
}

/* מובייל */
@media screen and (max-width: 520px) {
  html body #checkoutModalOverlay #backToCartButton,
  html body #checkoutModalOverlay #backToCartButton.checkout-back-to-cart {
    left: 12px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
  }
}
/* =========================================================
   CUSTOMER ACCOUNT CLEAN UI — אזור אישי עדין ללא מנוי זהב
   ========================================================= */

html body #customerAuthOverlay.customer-auth-overlay {
  background: rgba(15, 23, 42, 0.54) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

html body #customerAuthOverlay .customer-auth-card {
  width: min(92vw, 430px) !important;
  max-height: 88vh !important;
  overflow-y: auto !important;

  padding: 18px 18px 20px !important;
  border-radius: 28px !important;

  background: linear-gradient(180deg, #fffdf8 0%, #f8f5ef 100%) !important;
  border: 1px solid rgba(226, 219, 207, 0.95) !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28) !important;

  color: #1f2933 !important;
}

html body #customerAuthOverlay .customer-auth-head {
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 4px 2px 18px !important;
  border-bottom: none !important;
}

html body #customerAuthTitle {
  margin: 0 !important;
  color: #1f2933 !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}

html body #customerAuthSubtitle {
  margin: 8px 0 0 !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
}

html body #closeCustomerAuthButton.customer-auth-close {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;

  border-radius: 15px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(226, 219, 207, 0.9) !important;
  color: #111827 !important;

  font-size: 26px !important;
  line-height: 1 !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

html body #customerAuthTabs.customer-auth-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;

  padding: 5px !important;
  margin: 0 0 18px !important;

  background: rgba(243, 240, 234, 0.9) !important;
  border: 1px solid rgba(226, 219, 207, 0.95) !important;
  border-radius: 18px !important;
}

html body #customerAuthTabs .customer-auth-tab {
  height: 48px !important;
  border-radius: 14px !important;

  background: transparent !important;
  color: #475569 !important;
  border: 0 !important;

  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

html body #customerAuthTabs .customer-auth-tab.active {
  background: #ff6b16 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(255, 107, 22, 0.22) !important;
}

html body #customerAuthOverlay .customer-auth-label {
  margin: 0 0 7px !important;
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

html body #customerAuthOverlay .customer-auth-input {
  min-height: 54px !important;
  padding: 0 16px !important;

  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(220, 214, 204, 0.95) !important;

  color: #111827 !important;
  font-size: 16px !important;
  font-weight: 750 !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

html body #customerAuthOverlay .customer-auth-input::placeholder {
  color: #9ca3af !important;
}

html body #customerAuthOverlay .customer-auth-input:focus {
  border-color: rgba(255, 107, 22, 0.75) !important;
  box-shadow:
    0 0 0 4px rgba(255, 107, 22, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

html body #customerLoginSubmitButton,
html body #customerRegisterSubmitButton,
html body #saveCustomerProfileButton {
  min-height: 56px !important;
  border-radius: 17px !important;

  background: #ff6b16 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 107, 22, 0.85) !important;

  font-size: 17px !important;
  font-weight: 950 !important;

  box-shadow: 0 14px 28px rgba(255, 107, 22, 0.24) !important;
}

html body #customerLoginSubmitButton:hover,
html body #customerRegisterSubmitButton:hover,
html body #saveCustomerProfileButton:hover {
  background: #f45f0b !important;
  transform: translateY(-1px) !important;
}

html body .customer-profile-clean {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

html body .customer-profile-clean.hidden {
  display: none !important;
}

html body .customer-clean-hero {
  display: grid !important;
  grid-template-columns: 64px 1fr !important;
  align-items: center !important;
  gap: 14px !important;

  padding: 14px 4px 18px !important;
}

html body .customer-clean-avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 24px !important;

  display: grid !important;
  place-items: center !important;

  background: rgba(255, 107, 22, 0.09) !important;
  border: 1px solid rgba(255, 107, 22, 0.16) !important;
  color: #ff6b16 !important;
}

html body .customer-clean-avatar svg {
  width: 30px !important;
  height: 30px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body .customer-clean-copy {
  min-width: 0 !important;
}

html body .customer-clean-title {
  display: block !important;
  color: #1f2933 !important;
  font-size: 25px !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
}

html body .customer-clean-subtitle {
  display: block !important;
  margin-top: 7px !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 650 !important;
}

html body .customer-clean-details {
  padding: 18px !important;
  border-radius: 24px !important;

  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(226, 219, 207, 0.92) !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07) !important;
}

html body .customer-clean-section-title {
  margin: 0 0 14px !important;
  color: #1f2933 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

html body .customer-profile-clean .customer-member-detail-row {
  display: grid !important;
  grid-template-columns: 46px 1fr !important;
  align-items: center !important;
  gap: 12px !important;

  min-height: 70px !important;
  padding: 12px !important;
  margin: 0 0 10px !important;

  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(226, 219, 207, 0.78) !important;
  box-shadow: none !important;
}

html body .customer-profile-clean .customer-member-detail-row:last-child {
  margin-bottom: 0 !important;
}

html body .customer-profile-clean .customer-member-detail-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;

  display: grid !important;
  place-items: center !important;

  background: #f5f1ea !important;
  color: #ff6b16 !important;
  border: 1px solid rgba(226, 219, 207, 0.9) !important;
}

html body .customer-profile-clean .customer-member-detail-icon svg {
  width: 21px !important;
  height: 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body .customer-profile-clean .customer-member-detail-text {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

html body .customer-profile-clean .customer-member-detail-text strong {
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

html body .customer-profile-clean .customer-member-detail-text span {
  color: #111827 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
  word-break: break-word !important;
}

html body .customer-clean-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

html body .customer-clean-actions .customer-member-action {
  width: 100% !important;
  min-height: 56px !important;
  padding: 0 18px !important;

  border-radius: 17px !important;
  font-size: 16px !important;
  font-weight: 950 !important;

  background: rgba(255, 255, 255, 0.76) !important;
  color: #1f2933 !important;
  border: 1px solid rgba(190, 183, 172, 0.95) !important;
  box-shadow: none !important;
}

html body .customer-clean-actions .customer-member-action-main {
  background: #ff6b16 !important;
  color: #ffffff !important;
  border-color: rgba(255, 107, 22, 0.85) !important;
  box-shadow: 0 14px 28px rgba(255, 107, 22, 0.22) !important;
}

html body .customer-clean-actions .customer-member-action span {
  display: none !important;
}

html body #customerLogoutButton.customer-member-logout {
  margin-top: 2px !important;
  min-height: 52px !important;

  border-radius: 17px !important;
  background: rgba(255, 255, 255, 0.56) !important;
  color: #b91c1c !important;
  border: 1px solid rgba(239, 68, 68, 0.16) !important;

  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

/* ביטול נראות גיימינג/זהב ישנה אם נשארה בקובץ */
html body #customerProfilePoints {
  display: none !important;
}

/* נגישות — פוקוס ברור */
html body #customerAuthOverlay button:focus-visible,
html body #customerAuthOverlay input:focus-visible,
html body #customerAuthOverlay textarea:focus-visible {
  outline: 3px solid rgba(255, 107, 22, 0.45) !important;
  outline-offset: 3px !important;
}

@media (max-width: 520px) {
  html body #customerAuthOverlay .customer-auth-card {
    width: min(94vw, 430px) !important;
    padding: 16px !important;
    border-radius: 26px !important;
  }

  html body #customerAuthTitle {
    font-size: 25px !important;
  }

  html body .customer-clean-title {
    font-size: 22px !important;
  }

  html body .customer-clean-hero {
    grid-template-columns: 58px 1fr !important;
  }

  html body .customer-clean-avatar {
    width: 58px !important;
    height: 58px !important;
    border-radius: 21px !important;
  }
}
/* =========================================================
   CUSTOMER AUTH FINAL FIX — הפרדה נקייה בין התחברות / הרשמה / אזור אישי
   ========================================================= */

/* החלון הכללי */
html body #customerAuthOverlay.customer-auth-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;

  display: none !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 22px !important;
  background: rgba(15, 23, 42, 0.52) !important;
  backdrop-filter: blur(13px) !important;
  -webkit-backdrop-filter: blur(13px) !important;
}

html body #customerAuthOverlay.customer-auth-overlay:not(.hidden) {
  display: flex !important;
}

/* הקופסה — בדסקטופ כמו טאבלט, לא ענקית ולא צרה מדי */
html body #customerAuthOverlay .customer-auth-card {
  width: min(94vw, 560px) !important;
  max-width: 560px !important;
  max-height: min(86vh, 760px) !important;

  overflow-y: auto !important;
  overscroll-behavior: contain !important;

  padding: 24px !important;
  border-radius: 30px !important;

  background: linear-gradient(180deg, #fffdf8 0%, #f8f5ef 100%) !important;
  border: 1px solid rgba(226, 219, 207, 0.95) !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.32) !important;

  color: #111827 !important;
}

/* במחשב — מראה טאבלט */
@media (min-width: 900px) {
  html body #customerAuthOverlay .customer-auth-card {
    width: 540px !important;
    min-height: 520px !important;
  }
}

/* במובייל — שלא ייתקע מאחורי הסרגל התחתון */
@media (max-width: 520px) {
  html body #customerAuthOverlay.customer-auth-overlay {
    align-items: center !important;
    padding: 14px 12px calc(86px + env(safe-area-inset-bottom)) !important;
  }

  html body #customerAuthOverlay .customer-auth-card {
    width: 100% !important;
    max-height: calc(100vh - 118px) !important;
    padding: 18px !important;
    border-radius: 26px !important;
  }
}

/* הכותרת העליונה — קטנה, כהה, לא דביקה ולא מתגלגלת מעל התוכן */
html body #customerAuthOverlay .customer-auth-head {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;

  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;

  min-height: 0 !important;
  margin: 0 0 16px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #customerAuthOverlay #customerAuthTitle {
  margin: 0 !important;
  color: #1f2933 !important;
  font-size: 23px !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
  text-shadow: none !important;
}

html body #customerAuthOverlay #customerAuthSubtitle {
  margin: 6px 0 0 !important;
  color: #6b7280 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 650 !important;
  text-shadow: none !important;
}

/* כשמחוברים — מסתירים את הכותרת העליונה לגמרי כדי שלא תעלה על האזור האישי */
html body #customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-auth-head {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 44px !important;
}

html body #customerAuthOverlay:has(#customerProfileBox:not(.hidden)) .customer-auth-head > div {
  display: none !important;
}

/* האיקס נשאר למעלה, אבל לא הורס את העיצוב */
html body #customerAuthOverlay .customer-auth-close {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 15px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(226, 219, 207, 0.95) !important;
  color: #111827 !important;

  font-size: 26px !important;
  line-height: 1 !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
}

/* טאבים התחברות / הרשמה */
html body #customerAuthOverlay #customerAuthTabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;

  margin: 0 0 18px !important;
  padding: 5px !important;

  background: rgba(243, 240, 234, 0.95) !important;
  border: 1px solid rgba(226, 219, 207, 0.95) !important;
  border-radius: 18px !important;
}

html body #customerAuthOverlay #customerAuthTabs.hidden {
  display: none !important;
}

html body #customerAuthOverlay .customer-auth-tab {
  height: 48px !important;
  border-radius: 14px !important;

  background: transparent !important;
  color: #475569 !important;
  border: 0 !important;

  font-size: 15px !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}

html body #customerAuthOverlay .customer-auth-tab.active {
  background: #ff6b16 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(255, 107, 22, 0.22) !important;
}

/* טפסים — רק מה שפעיל מוצג */
html body #customerAuthOverlay .customer-auth-form.hidden,
html body #customerAuthOverlay #customerLoginForm.hidden,
html body #customerAuthOverlay #customerRegisterForm.hidden,
html body #customerAuthOverlay #customerProfileBox.hidden,
html body #customerAuthOverlay #customerEditProfilePanel.hidden,
html body #customerAuthOverlay #customerOrdersPanel.hidden {
  display: none !important;
}

html body #customerAuthOverlay .customer-auth-form {
  display: grid !important;
  gap: 10px !important;
}

/* שדות */
html body #customerAuthOverlay .customer-auth-label {
  margin: 0 0 -3px !important;
  color: #374151 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

html body #customerAuthOverlay .customer-auth-input {
  min-height: 52px !important;
  padding: 0 15px !important;

  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(220, 214, 204, 0.95) !important;

  color: #111827 !important;
  font-size: 16px !important;
  font-weight: 750 !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

html body #customerAuthOverlay .customer-auth-input::placeholder {
  color: #9ca3af !important;
}

html body #customerAuthOverlay .customer-auth-input:focus {
  border-color: rgba(255, 107, 22, 0.75) !important;
  box-shadow:
    0 0 0 4px rgba(255, 107, 22, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* כפתור ראשי */
html body #customerAuthOverlay .customer-auth-main-btn,
html body #customerLoginSubmitButton,
html body #customerRegisterSubmitButton,
html body #saveCustomerProfileButton {
  width: 100% !important;
  min-height: 56px !important;
  margin-top: 8px !important;

  border-radius: 17px !important;
  background: #ff6b16 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 107, 22, 0.85) !important;

  font-size: 17px !important;
  font-weight: 950 !important;

  box-shadow: 0 14px 28px rgba(255, 107, 22, 0.24) !important;
}

/* בהרשמה — שדות כתובת יהיו מסודרים ולא מחוברים */
html body #customerAuthOverlay .customer-auth-two-cols,
html body #customerAuthOverlay .customer-auth-three-cols {
  display: grid !important;
  gap: 10px !important;
}

html body #customerAuthOverlay .customer-auth-two-cols {
  grid-template-columns: 1fr 1fr !important;
}

html body #customerAuthOverlay .customer-auth-three-cols {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 520px) {
  html body #customerAuthOverlay .customer-auth-two-cols {
    grid-template-columns: 1fr 1fr !important;
  }

  html body #customerAuthOverlay .customer-auth-three-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* אחרי התחברות — אזור אישי בלבד, בלי טפסים ובלי טאבים */
html body #customerAuthOverlay:has(#customerProfileBox:not(.hidden)) #customerAuthTabs,
html body #customerAuthOverlay:has(#customerProfileBox:not(.hidden)) #customerLoginForm,
html body #customerAuthOverlay:has(#customerProfileBox:not(.hidden)) #customerRegisterForm {
  display: none !important;
}

/* כרטיס האזור האישי */
html body #customerAuthOverlay #customerProfileBox.customer-profile-clean {
  display: grid !important;
  gap: 16px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #customerAuthOverlay #customerProfileBox.customer-profile-clean.hidden {
  display: none !important;
}

html body #customerAuthOverlay .customer-clean-hero {
  display: grid !important;
  grid-template-columns: 64px 1fr !important;
  align-items: center !important;
  gap: 14px !important;

  padding: 4px 2px 8px !important;
}

html body #customerAuthOverlay .customer-clean-avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 24px !important;

  display: grid !important;
  place-items: center !important;

  background: rgba(255, 107, 22, 0.09) !important;
  border: 1px solid rgba(255, 107, 22, 0.16) !important;
  color: #ff6b16 !important;
}

html body #customerAuthOverlay .customer-clean-avatar svg,
html body #customerAuthOverlay .customer-member-detail-icon svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body #customerAuthOverlay .customer-clean-avatar svg {
  width: 30px !important;
  height: 30px !important;
}

html body #customerAuthOverlay .customer-clean-title {
  display: block !important;
  color: #1f2933 !important;
  font-size: 27px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  letter-spacing: -0.035em !important;
}

html body #customerAuthOverlay .customer-clean-subtitle {
  display: block !important;
  margin-top: 7px !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 650 !important;
}

/* פרטים שלך */
html body #customerAuthOverlay .customer-clean-details {
  padding: 18px !important;
  border-radius: 24px !important;

  background: rgba(255, 255, 255, 0.74) !important;
  border: 1px solid rgba(226, 219, 207, 0.92) !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07) !important;
}

html body #customerAuthOverlay .customer-clean-section-title {
  margin: 0 0 14px !important;
  color: #1f2933 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

html body #customerAuthOverlay .customer-member-detail-row {
  display: grid !important;
  grid-template-columns: 46px 1fr !important;
  align-items: center !important;
  gap: 12px !important;

  min-height: 70px !important;
  padding: 12px !important;
  margin: 0 0 10px !important;

  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(226, 219, 207, 0.78) !important;
  box-shadow: none !important;
}

html body #customerAuthOverlay .customer-member-detail-row:last-child {
  margin-bottom: 0 !important;
}

html body #customerAuthOverlay .customer-member-detail-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;

  display: grid !important;
  place-items: center !important;

  background: #f5f1ea !important;
  color: #ff6b16 !important;
  border: 1px solid rgba(226, 219, 207, 0.9) !important;
}

html body #customerAuthOverlay .customer-member-detail-icon svg {
  width: 21px !important;
  height: 21px !important;
}

html body #customerAuthOverlay .customer-member-detail-text {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

html body #customerAuthOverlay .customer-member-detail-text strong {
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

html body #customerAuthOverlay .customer-member-detail-text span {
  color: #111827 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
  word-break: break-word !important;
}

/* כפתורים באזור האישי */
html body #customerAuthOverlay .customer-member-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

html body #customerAuthOverlay .customer-member-action {
  width: 100% !important;
  min-height: 56px !important;
  padding: 0 18px !important;

  border-radius: 17px !important;
  font-size: 16px !important;
  font-weight: 950 !important;

  background: rgba(255, 255, 255, 0.76) !important;
  color: #1f2933 !important;
  border: 1px solid rgba(190, 183, 172, 0.95) !important;
  box-shadow: none !important;
}

html body #customerAuthOverlay .customer-member-action-main {
  background: #ff6b16 !important;
  color: #ffffff !important;
  border-color: rgba(255, 107, 22, 0.85) !important;
  box-shadow: 0 14px 28px rgba(255, 107, 22, 0.22) !important;
}

html body #customerAuthOverlay .customer-member-action span {
  display: none !important;
}

/* פאנלים פנימיים — לא מופיעים עד שלוחצים */
html body #customerAuthOverlay .customer-member-panel {
  padding: 16px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(226, 219, 207, 0.92) !important;
  color: #111827 !important;
}

html body #customerAuthOverlay .customer-member-panel-head {
  display: grid !important;
  grid-template-columns: 64px 1fr 44px !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

html body #customerAuthOverlay .customer-member-panel-head strong {
  text-align: center !important;
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

html body #customerAuthOverlay .customer-member-panel-back,
html body #customerAuthOverlay .customer-member-panel-close {
  min-height: 40px !important;
  border-radius: 14px !important;
  background: #f3f4f6 !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
}

html body #customerAuthOverlay .customer-member-panel-close {
  width: 40px !important;
  padding: 0 !important;
  font-size: 22px !important;
}

/* התנתקות */
html body #customerAuthOverlay #customerLogoutButton.customer-member-logout {
  width: 100% !important;
  min-height: 52px !important;
  margin-top: 0 !important;

  border-radius: 17px !important;
  background: rgba(255, 255, 255, 0.56) !important;
  color: #b91c1c !important;
  border: 1px solid rgba(239, 68, 68, 0.16) !important;

  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

/* ביטול סופית של שאריות זהב / גיימינג */
html body #customerAuthOverlay #customerProfilePoints {
  display: none !important;
}

/* נגישות */
html body #customerAuthOverlay button:focus-visible,
html body #customerAuthOverlay input:focus-visible,
html body #customerAuthOverlay textarea:focus-visible {
  outline: 3px solid rgba(255, 107, 22, 0.45) !important;
  outline-offset: 3px !important;
}
/* =========================================================
   תיקון צבע הודעות בטופס התחברות / הרשמה
   ========================================================= */

html body #customerAuthOverlay #customerAuthMessage,
html body #customerAuthOverlay .customer-auth-message {
  color: #111827 !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(226, 219, 207, 0.95) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  text-shadow: none !important;
}

/* הודעת הצלחה */
html body #customerAuthOverlay #customerAuthMessage.success,
html body #customerAuthOverlay .customer-auth-message.success {
  color: #166534 !important;
  background: rgba(240, 253, 244, 0.9) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
}

/* הודעת שגיאה */
html body #customerAuthOverlay #customerAuthMessage.error,
html body #customerAuthOverlay .customer-auth-message.error {
  color: #991b1b !important;
  background: rgba(254, 242, 242, 0.92) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}
/* =========================================================
   CUSTOMER ACCOUNT — הסתרת פרטים עד שלוחצים הצג / ערוך
   ========================================================= */

/* במסך הראשי אחרי התחברות לא מציגים את שורות הפרטים */
html body #customerAuthOverlay #customerProfileBox:not(.hidden) .customer-clean-details,
html body #customerAuthOverlay #customerProfileBox:not(.hidden) .customer-profile-info {
  display: none !important;
}

/* כפתור הצג/ערוך פרטים */
html body #customerAuthOverlay #customerEditProfileButton {
  background: #ff6b16 !important;
  color: #ffffff !important;
  border-color: rgba(255, 107, 22, 0.85) !important;
}

/* פאנל עדכון פרטים / הזמנות */
html body #customerAuthOverlay .customer-member-panel {
  display: block !important;
  padding: 18px !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(226, 219, 207, 0.95) !important;
  color: #111827 !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07) !important;
}

html body #customerAuthOverlay .customer-member-panel.hidden {
  display: none !important;
}

/* ראש פאנל — חזור / כותרת / איקס */
html body #customerAuthOverlay .customer-member-panel-head {
  display: grid !important;
  grid-template-columns: 72px 1fr 44px !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

html body #customerAuthOverlay .customer-member-panel-head strong {
  text-align: center !important;
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

html body #customerAuthOverlay .customer-member-panel-back,
html body #customerAuthOverlay .customer-member-panel-close {
  min-height: 40px !important;
  border-radius: 14px !important;
  background: #f3f4f6 !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  font-weight: 900 !important;
}

html body #customerAuthOverlay .customer-member-panel-close {
  width: 40px !important;
  padding: 0 !important;
  font-size: 22px !important;
}

/* כרטיס אין הזמנות */
html body #customerAuthOverlay .customer-orders-empty-card {
  min-height: 190px !important;
  padding: 22px 18px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  text-align: center !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(226, 219, 207, 0.9) !important;
  color: #111827 !important;
}

html body #customerAuthOverlay .customer-orders-empty-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 18px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255, 107, 22, 0.09) !important;
  font-size: 24px !important;
}

html body #customerAuthOverlay .customer-orders-empty-card strong {
  color: #111827 !important;
  font-size: 20px !important;
  font-weight: 950 !important;
}

html body #customerAuthOverlay .customer-orders-empty-card p {
  margin: 0 !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

html body #customerAuthOverlay .customer-orders-back-btn {
  width: 100% !important;
  min-height: 50px !important;
  margin-top: 8px !important;

  border-radius: 16px !important;
  background: #ff6b16 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 107, 22, 0.85) !important;

  font-size: 15px !important;
  font-weight: 950 !important;
}
/* =========================================================
   CUSTOMER PANEL STATES — מניעת חלון ריק באזור האישי
   ========================================================= */

/* מצב ראשי: רואים רק כרטיס ראשי, לא פאנלים פנימיים */
html body #customerAuthOverlay #customerProfileBox.customer-panel-main-open #customerEditProfilePanel,
html body #customerAuthOverlay #customerProfileBox.customer-panel-main-open #customerOrdersPanel {
  display: none !important;
}

/* מצב עריכת פרטים: מסתירים את הכרטיס הראשי ומשאירים רק את פאנל העריכה */
html body #customerAuthOverlay #customerProfileBox.customer-panel-edit-open > .customer-clean-hero,
html body #customerAuthOverlay #customerProfileBox.customer-panel-edit-open > .customer-clean-details,
html body #customerAuthOverlay #customerProfileBox.customer-panel-edit-open > .customer-profile-info,
html body #customerAuthOverlay #customerProfileBox.customer-panel-edit-open > .customer-member-actions,
html body #customerAuthOverlay #customerProfileBox.customer-panel-edit-open > #customerLogoutButton {
  display: none !important;
}

html body #customerAuthOverlay #customerProfileBox.customer-panel-edit-open #customerEditProfilePanel {
  display: block !important;
}

html body #customerAuthOverlay #customerProfileBox.customer-panel-edit-open #customerOrdersPanel {
  display: none !important;
}

/* מצב הזמנות: מסתירים את הכרטיס הראשי ומשאירים רק את פאנל ההזמנות */
html body #customerAuthOverlay #customerProfileBox.customer-panel-orders-open > .customer-clean-hero,
html body #customerAuthOverlay #customerProfileBox.customer-panel-orders-open > .customer-clean-details,
html body #customerAuthOverlay #customerProfileBox.customer-panel-orders-open > .customer-profile-info,
html body #customerAuthOverlay #customerProfileBox.customer-panel-orders-open > .customer-member-actions,
html body #customerAuthOverlay #customerProfileBox.customer-panel-orders-open > #customerLogoutButton {
  display: none !important;
}

html body #customerAuthOverlay #customerProfileBox.customer-panel-orders-open #customerOrdersPanel {
  display: block !important;
}

html body #customerAuthOverlay #customerProfileBox.customer-panel-orders-open #customerEditProfilePanel {
  display: none !important;
}
/* =========================================================
   CUSTOMER PANELS FINAL OVERRIDE — הפרדה מוחלטת בין פרטים להזמנות
   ========================================================= */

html body #customerAuthOverlay #customerEditProfilePanel.hidden,
html body #customerAuthOverlay #customerOrdersPanel.hidden {
  display: none !important;
}

html body #customerAuthOverlay #customerProfileBox.customer-panel-edit-open #customerOrdersPanel {
  display: none !important;
}

html body #customerAuthOverlay #customerProfileBox.customer-panel-orders-open #customerEditProfilePanel {
  display: none !important;
}

html body #customerAuthOverlay #customerProfileBox.customer-panel-orders-open .customer-clean-hero,
html body #customerAuthOverlay #customerProfileBox.customer-panel-orders-open .customer-member-actions,
html body #customerAuthOverlay #customerProfileBox.customer-panel-orders-open #customerLogoutButton,
html body #customerAuthOverlay #customerProfileBox.customer-panel-edit-open .customer-clean-hero,
html body #customerAuthOverlay #customerProfileBox.customer-panel-edit-open .customer-member-actions,
html body #customerAuthOverlay #customerProfileBox.customer-panel-edit-open #customerLogoutButton {
  display: none !important;
}
/* תיקון נקודתי — להרים את הכיתובים מעל השדות בעדכון פרטים */
html body #customerAuthOverlay #customerEditProfileForm label.customer-auth-label {
  position: relative !important;
  top: -8px !important;
  margin-bottom: -4px !important;
}
/* =========================================================
   ביצועים מובייל — ספארי/אייפון
   מסיר אפקטים כבדים שגורמים לגלילה איטית ולטעינה איטית
   ========================================================= */

/* מובייל: מסיר את כל ה-backdrop-filter — הכי כבד שיש בספארי */
@media (max-width: 768px) {
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* מסיר filter מתמונות — מחושב על כל פריים גלילה */
  img {
    filter: none !important;
  }

  /* מסיר drop-shadow כבד מהלוגו */
  .logo-wrap img,
  .topbar-brand-img {
    filter: none !important;
  }

  /* תמונות קטגוריות בדף הבית — מסיר scale+filter */
  html body #homeFeaturedCategories .home-v2-category-image img {
    filter: none !important;
    transform: none !important;
  }

  /* מסיר transition מכרטיסי קטגוריה ומוצרים */
  .home-v2-category-card,
  .home-v2-product-card,
  .home-v2-deal-card,
  .home-v2-subcategory-card,
  .card,
  .category-card,
  .product-card {
    transition: none !important;
    transform: none !important;
  }

  /* מסיר אנימציה מהבאנר הראשי בעת גלילה */
  .hero-banner-slide img {
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  /* מאיץ גלילה בספארי */
  .home-v2-horizontal-list,
  .home-v2-mini-grid,
  .home-v2-products-row,
  .home-v2-products-grid,
  .categories-grid,
  .products-grid {
    -webkit-overflow-scrolling: touch;
  }

  /* מסיר box-shadow כבד ממוצרים בגלילה */
  .home-v2-product-card,
  .home-v2-deal-card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
  }
}