/** Shopify CDN: Minification failed

Line 7005:0 Unexpected "}"

**/
/* ================================================================
   טרי פלוס – Complete Shopify Theme CSS
   RTL Hebrew | Simpler Font | Faithful to carmella.co.il
   ================================================================ */

/* Fonts */
@font-face{font-family:'Simpler';src:url('simpler-regular-webfont.woff2') format('woff2'),url('simpler-regular-webfont.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Simpler';src:url('simpler-bold-webfont.woff2') format('woff2'),url('simpler-bold-webfont.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'Simpler';src:url('simpler-black-webfont.woff2') format('woff2'),url('simpler-black-webfont.woff') format('woff');font-weight:900;font-display:swap}
@font-face{font-family:'RaananCondensed';src:url('raanancondensed-light-webfont.woff2') format('woff2'),url('raanancondensed-light-webfont.woff') format('woff');font-weight:300;font-display:swap}
@font-face{font-family:'RaananCondensed';src:url('raanancondensedbold-webfont.woff2') format('woff2'),url('raanancondensedbold-webfont.woff') format('woff');font-weight:700;font-display:swap}

/* Variables */
:root{
  /* ═══════════════════════════════════════════
     טרי פלוס – Premium Fresh Produce Palette
     Psychology: Forest Green + Warm White
     + Antique Gold + Deep Terracotta
  ═══════════════════════════════════════════ */

  /* ── Greens (Nature · Trust · Freshness) ── */
  --green-dark:   #1b2e12;   /* Deep forest – premium, trustworthy       */
  --green-mid:    #2e7d4f;   /* Muted emerald – fresh, not neon           */
  --green-light:  #eaf2e5;   /* Soft sage – clean, breathable             */
  --green-accent: #4a8c5c;   /* Medium accent for hover states            */

  /* ── Action (Warm Terracotta – appetizing, not alarming) ── */
  --red:          #c0471a;   /* Deep terracotta – warm, premium urgency   */
  --red-hover:    #a33a14;   /* Deeper on hover                           */

  /* ── Gold (Warmth · Optimism · Quality) ── */
  --yellow:       #d4952a;   /* Antique gold – premium, not cheap yellow  */
  --yellow-hover: #c0841e;   /* Richer on hover                           */

  /* ── Backgrounds (Warm Off-White – purity, luxury) ── */
  --cream:        #f6f1e8;   /* Natural warm cream                        */
  --bg-body:      #f4f2ed;   /* Barely-there warm beige                   */
  --bg-topbar:    #eeeae3;   /* Slightly deeper for contrast              */

  /* ── Text (Warm Charcoal – sophisticated, not harsh) ── */
  --text:         #1a1a16;   /* Near-black with warm undertone            */
  --text-light:   #6e6b62;   /* Warm medium gray                          */

  /* ── Structure ── */
  --border:       #ddd8cf;   /* Warm light border – harmonious            */
  --white:        #ffffff;

  /* ── Shadows (green-tinted – brand-consistent) ── */
  --shadow:       0 4px 20px rgba(27,46,18,.12);
  --shadow-sm:    0 1px 6px  rgba(27,46,18,.07);

  /* ── Shape & Motion ── */
  --radius-card:  0 0 18px 18px;
  --transition:   all .25s ease;
  --font-main:    'Simpler','Arial',sans-serif;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html{direction:rtl;scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--font-main);font-size:16px;color:var(--text);background:var(--bg-body);margin:0;padding:0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:var(--green-mid);transition:var(--transition)}
a:hover{color:var(--green-mid)}
img{max-width:100%;height:auto;display:block}
ul{list-style:none;margin:0;padding:0}
button{cursor:pointer;border:none;background:none;font-family:var(--font-main)}
h1,h2,h3,h4,h5,h6,p,form{margin:0;padding:0;font-weight:400}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.inner_width{max-width:1480px;margin:0 auto;padding:0 112px}
.section-pad{padding:64px 0}

/* ================================================================
   ANNOUNCEMENT BAR
   ================================================================ */
.announcement-bar{
  background:var(--green-dark);color:#fff;
  text-align:center;padding:10px 48px;
  font-size:14px;font-weight:700;line-height:1.5;
  position:relative;
}
.announcement-bar a{color:var(--yellow);text-decoration:underline}
.announcement-dismiss{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  color:rgba(255,255,255,.5);font-size:16px;cursor:pointer;background:none;border:none;
  padding:4px 8px;transition:color .2s;
}
.announcement-dismiss:hover{color:#fff}

/* ================================================================
   HEADER – White + gray topbar + yellow cart
   ================================================================ */
.site-header{
  background:var(--white);position:sticky;top:0;z-index:200;
  box-shadow:0 3px 10px rgba(0,0,0,.2);
}

/* Top bar */
.head_top{
  background:var(--bg-topbar);height:60px;
  display:flex;align-items:center;
}
.head_top_inner{
  max-width:1480px;margin:0 auto;width:100%;
  padding:0 130px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}

/* Search bar */
.head_search{
  width:300px;height:38px;
  border-radius:60px;background:var(--white);
  border:1px solid #c8c8c8;
  display:flex;align-items:center;
  padding:0 12px 0 40px;position:relative;
  flex-shrink:0;
}
.head_search input{
  flex:1;height:100%;background:transparent;border:none;outline:none;
  font-size:14px;font-family:var(--font-main);direction:rtl;color:var(--text);
}
.head_search input::placeholder{color:#aaa}
.head_search-btn{
  position:absolute;left:0;top:0;width:40px;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;
}
.head_search-btn svg{width:15px;height:15px;opacity:.5}

/* Top links */
.head_links{display:flex;align-items:center;gap:0}
.head_link a,.head_register_link a{
  display:block;padding:0 12px;line-height:26px;
  font-size:14px;color:var(--text);
  border-left:1px solid var(--border);
  white-space:nowrap;
}
.head_link a:hover{color:#333}
.head_register_link a{color:var(--red);font-weight:700}
.head_register_link a:hover{color:var(--red-hover)}

/* Social icons */
.head_soc{display:flex;align-items:center;gap:6px}
.head_soc_item a{
  display:flex;align-items:center;justify-content:center;
  color:#555;transition:color .2s;
}
.head_soc_item a:hover{color:var(--green-dark)}
.head_soc_item svg{width:19px;height:19px}

/* Nav row */
.head_nav_row{
  background:var(--white);
  height:60px;position:relative;
}
.head_nav_row_inner{
  max-width:1480px;margin:0 auto;
  padding:0 130px;
  display:flex;align-items:stretch;
  height:60px;position:relative;
}

/* Logo – positioned absolute top-right spanning both rows */
.logo{
  position:absolute;top:-44px;right:18px;z-index:5;
}
.logo a{display:block}
.logo-img{
  width:90px;height:auto;
  filter:none;
}

/* Cart – yellow circle absolute left spanning both rows */
.head_cart{
  position:absolute;top:-47px;left:18px;z-index:5;
}
.head_cart > a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:90px;height:90px;border-radius:50%;
  background:var(--yellow);
  box-shadow:0 4px 14px rgba(248,189,57,.4);
  transition:background .25s,transform .2s;
  text-decoration:none;
}
.head_cart > a:hover{background:var(--yellow-hover);transform:translateY(-2px)}
.head_cart svg{color:var(--green-dark);width:26px;height:26px}
.cart_num{
  display:block;color:var(--green-dark);
  font-size:15px;font-weight:900;
  line-height:1;margin-top:3px;
}
.head_cart_total{
  display:block;color:#333;font-size:11px;margin-top:1px;
}

/* Nav menu */
.menu{
  flex:1;display:flex;justify-content:space-between;
  align-items:stretch;gap:0;
}
.menu_item{position:relative;display:flex;align-items:stretch}
.menu_item_top{display:flex;align-items:center}
.menu_item_top > a{
  display:block;line-height:60px;
  font-size:16px;font-weight:700;color:var(--green-dark);
  white-space:nowrap;padding:0 6px;position:relative;
}
.menu_item_top > a::before{
  content:"";display:block;width:100%;height:0;
  background:var(--green-mid);
  position:absolute;bottom:0;left:0;
  transition:height .2s ease;
}
.menu_item:hover .menu_item_top > a{color:var(--green-mid)}
.menu_item:hover .menu_item_top > a::before{height:5px}
/* First item red */
.menu_item:first-child .menu_item_top > a{color:var(--red)}
.menu_item:first-child .menu_item_top > a::before{background:var(--red)}

/* Dropdown */
.menu_drop{
  display:none;position:absolute;
  top:60px;right:-40px;min-width:320px;
  background:var(--white);z-index:100;
  border-radius:0 0 18px 18px;
  box-shadow:var(--shadow);overflow:hidden;
  padding:20px 20px 20px 20px;
}
.menu_item:hover .menu_drop{display:block}
.drop_title{font-size:20px;color:var(--green-dark);font-weight:700;margin-bottom:14px}
.drop_link a{
  display:block;font-size:15px;color:var(--green-dark);
  line-height:1;margin-bottom:12px;
  padding-right:14px;position:relative;
}
.drop_link a::before{
  content:"•";position:absolute;right:0;
  color:var(--green-mid);font-size:12px;top:1px;
}
.drop_link a:hover{color:var(--green-mid)}

/* Mobile toggle */
.menu_bt{
  display:none;flex-direction:column;gap:5px;
  cursor:pointer;padding:6px;margin-right:auto;
}
.menu_bt span{
  display:block;width:24px;height:2px;
  background:var(--green-dark);border-radius:2px;
  transition:var(--transition);
}

/* Mobile nav */
.mobile_nav_panel{
  display:none;background:var(--white);
  border-top:2px solid var(--green-light);
  padding:16px 20px;
  box-shadow:0 8px 20px rgba(0,0,0,.1);
}
.mobile_nav_panel.open{display:block}
.mobile_nav_panel a{
  display:block;font-size:17px;font-weight:700;
  color:var(--green-dark);padding:13px 0;
  border-bottom:1px solid #f0f0f0;
}
.mobile_nav_panel a:first-child{color:var(--red)}
.mobile_nav_panel a:hover{color:var(--green-mid)}

/* ================================================================
   HERO SECTION v2 – Premium Fresh Produce Hero
   ================================================================ */

/* Base section */
.hero-section {
  position: relative;
}

.site-header {
  position: relative !important;
  z-index: 1000 !important;
  background: #fff !important;
  overflow: visible !important;
}
.dh-nav,
.dh-inner {
  position: relative !important;
  z-index: 1001 !important;
  background: #fff !important;
}
#hero-main,
.hero-section {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  margin-top: 0 !important;
}
#hero-main .hero-bg,
#hero-main .hero-bg-fallback,
#hero-main .hero-overlay,
#hero-main .hero-image {
  top: 0 !important;
  transform: none !important;
}
#hero-main::before,
#hero-main::after,
.hero-section::before,
.hero-section::after {
  max-height: 100% !important;
  top: 0 !important;
}

/* ── Background layer ─────────────────────────────────────── */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Real photo */
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

/* CSS gradient fallback – rich deep green */
.hero-bg-fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #1b2e12 0%, #243c18 50%, #1a2c10 100%);
}

/* Organic light blobs – imitating natural depth */
.hero-bg-fallback::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 80% at 18% 50%, rgba(46,125,79,.26) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 78% 22%, rgba(74,140,92,.16) 0%, transparent 55%),
    radial-gradient(ellipse 35% 45% at 88% 75%, rgba(212,149,42,.08) 0%, transparent 50%),
    radial-gradient(ellipse 40% 55% at 50% 90%, rgba(27,46,18,.4) 0%, transparent 50%);
}

/* Subtle diagonal texture */
.hero-bg-fallback::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 60px,
      rgba(255,255,255,.013) 60px,
      rgba(255,255,255,.013) 61px
    );
}

/* Text readability overlay
   Gradient → strong on text side (right in RTL), fades to left */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to left,                          /* RTL: text is on the right */
    rgba(27,46,18,1)    0%,
    rgba(27,46,18,.78)  35%,
    rgba(27,46,18,.42)  62%,
    rgba(27,46,18,.1)   85%,
    transparent         100%
  );
  /* opacity set inline via section schema */
}

/* When photo is set, slightly heavier overall overlay */
.hero-has-photo .hero-overlay {
  background: linear-gradient(
    to left,
    rgba(27,46,18,1)    0%,
    rgba(27,46,18,.82)  38%,
    rgba(27,46,18,.48)  62%,
    rgba(27,46,18,.14)  82%,
    transparent         100%
  );
}

/* ── Hero inner layout ────────────────────────────────────── */
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 90px 24px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  z-index: 2;
}

/* Text block */
.hero-content {
  max-width: 560px;
  position: relative;
  z-index: 2;
}

#hero-main .hero-inner,
#hero-main .hero-content,
#hero-main .hero-overlay {
  display: none !important;
}

/* Product image on the left */
.hero-image {
  flex-shrink: 0;
  max-width: 400px;
  position: relative;
  z-index: 2;
}
.hero-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
}

/* Badge pill */
.hero-badge {
  display: inline-block;
  background: rgba(192,71,26,.9);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 20px;
  margin-bottom: 20px;
  letter-spacing: .02em;
  box-shadow: 0 3px 12px rgba(192,71,26,.35);
}

/* Main title */
.hero-title {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 18px;
  text-shadow: 0 2px 16px rgba(0,0,0,.3);
}
.hero-title span { color: var(--yellow); }

/* Subtitle */
.hero-subtitle {
  font-size: 1.08rem;
  color: rgba(255,255,255,.88);
  line-height: 1.75;
  margin-bottom: 36px;
  text-shadow: 0 1px 6px rgba(0,0,0,.25);
}

/* CTA buttons */
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-btn {
  display: inline-block;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 16px;
  padding: 15px 34px;
  border-radius: 10px;
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

.hero-btn-primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 4px 18px rgba(192,71,26,.4), 0 1px 0 rgba(255,255,255,.1) inset;
}
.hero-btn-primary:hover {
  background: var(--red-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(192,71,26,.45);
}

.hero-btn-outline {
  border: 2px solid rgba(255,255,255,.65);
  color: #fff;
  backdrop-filter: blur(4px);
  background: rgba(255,255,255,.05);
}
.hero-btn-outline:hover {
  background: rgba(255,255,255,.14);
  color: #fff;
  border-color: rgba(255,255,255,.85);
}

/* ── Produce visual (CSS-only, shown when no photo) ────────── */
.hero-produce-vis {
  flex-shrink: 0;
  width: 300px;
  height: 300px;
  position: relative;
}

/* Central "plate" circle */
.hpv-plate {
  position: absolute;
  width: 152px;
  height: 152px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.22), rgba(255,255,255,.07));
  border: 1px solid rgba(255,255,255,.2);
  box-shadow:
    0 20px 60px rgba(0,0,0,.28),
    0 0 0 12px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.25);
  backdrop-filter: blur(10px);
  z-index: 2;
}

/* Orbiting items – hexagonal layout (radius ≈ 114px) */
.hpv-item {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  animation: hpv-float 5.5s ease-in-out infinite;
  z-index: 1;
  line-height: 1;
}
.hpv-item span { filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }

/* Hexagonal positions (center 150,150 – radius 114px) */
.hpv-i1 { top:   0px; left: 114px; animation-delay: 0s; }      /* 12 o'clock */
.hpv-i2 { top:  57px; left: 212px; animation-delay: .9s; }     /* 2 o'clock  */
.hpv-i3 { top: 171px; left: 212px; animation-delay: 1.8s; }    /* 4 o'clock  */
.hpv-i4 { top: 228px; left: 114px; animation-delay: 2.7s; }    /* 6 o'clock  */
.hpv-i5 { top: 171px; left:  15px; animation-delay: 3.6s; }    /* 8 o'clock  */
.hpv-i6 { top:  57px; left:  15px; animation-delay: 4.5s; }    /* 10 o'clock */

/* Decorative outer ring */
.hpv-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.12);
  animation: hpv-spin 28s linear infinite;
  pointer-events: none;
}

@keyframes hpv-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-9px) scale(1.03); }
}

@keyframes hpv-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Legacy .hero-deco hidden ─────────────────────────────── */
.hero-deco { display: none; }

/* ================================================================
   FEATURES STRIP
   ================================================================ */
.features-strip{
  background:var(--cream);
  border-top:3px solid var(--yellow);
  border-bottom:3px solid var(--yellow);
  padding:18px 0;
}
.features-strip-inner{
  display:grid;grid-template-columns:repeat(4,1fr);
  max-width:1200px;margin:0 auto;padding:0 24px;
}
.feature_item{
  display:flex;align-items:center;gap:14px;
  padding:12px 24px;
  border-right:1px solid rgba(33,53,25,.12);
}
.feature_item:first-child{border-right:none}
.feature_icon{font-size:30px;flex-shrink:0}
.feature_text strong{display:block;font-size:14px;font-weight:700;color:var(--green-dark)}
.feature_text span{font-size:12px;color:var(--text-light)}

/* ================================================================
   SECTION HEADER
   ================================================================ */
.section-header{
  text-align:center;margin-bottom:40px;
}
.section-header-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:32px;max-width:1200px;
  margin-left:auto;margin-right:auto;padding:0 24px;
}
.section-title{
  font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;
  color:var(--green-dark);margin-bottom:8px;
}
.section-subtitle{
  font-size:1rem;color:var(--text-light);margin-bottom:0;
}
.section-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:700;color:var(--green-mid);
  border:1.5px solid var(--green-mid);
  padding:8px 20px;border-radius:6px;
  white-space:nowrap;transition:var(--transition);
}
.section-link:hover{background:var(--green-mid);color:#fff}

/* ================================================================
   COLLECTION BANNERS (Categories)
   ================================================================ */
.section-categories{padding:60px 0;background:var(--bg-body)}
.categories-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:16px;max-width:1200px;margin:0 auto;padding:0 24px;
}
.cat-card{
  position:relative;overflow:hidden;border-radius:16px;
  aspect-ratio:3/4;cursor:pointer;
  transition:transform .3s ease,box-shadow .3s ease;
}
.cat-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(33,53,25,.2)}
.cat-card-img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.cat-card:hover .cat-card-img{transform:scale(1.06)}
.cat-card-bg{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:5rem;
  background:linear-gradient(135deg,var(--green-light),var(--cream));
}
.cat-card-overlay{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(33,53,25,.85));
  padding:50px 18px 20px;
}
.cat-card-title{color:#fff;font-size:1.15rem;font-weight:900;margin:0 0 5px}
.cat-card-sub{color:rgba(255,255,255,.75);font-size:13px}
.cat-card-arrow{
  display:inline-block;margin-top:8px;
  color:var(--yellow);font-size:13px;font-weight:700;
}
.cat-card:hover .cat-card-arrow{text-decoration:underline}

/* ================================================================
   PRODUCTS GRID
   ================================================================ */
.section-products{padding:60px 0}
.products-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:20px;max-width:1200px;margin:0 auto;padding:0 24px;
}

/* Product card – bottom-rounded only like original */
.product-card{
  background:var(--white);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .3s ease,transform .3s ease;
  position:relative;
}
.product-card:hover{
  box-shadow:var(--shadow);
  transform:translateY(-3px);
}

/* Image area */
.pc-image{
  position:relative;
  padding:24px 10% 12px;
  min-height:190px;
  background:var(--white);
  overflow:hidden;
}
.pc-image img{
  width:100%;height:auto;
  max-height:160px;object-fit:contain;
  display:block;margin:0 auto;
}
.pc-image-placeholder{
  width:100%;min-height:160px;
  display:flex;align-items:center;justify-content:center;
  font-size:4rem;
}

/* Hover overlay */
.pc-overlay{
  position:absolute;inset:0;
  background:rgba(33,53,25,.78);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s ease;z-index:2;
}
.product-card:hover .pc-overlay{opacity:1}
.pc-add-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;
  background:var(--white);color:var(--green-dark);
  font-size:28px;font-weight:900;
  cursor:pointer;border:none;
  transition:background .2s,transform .15s;
  font-family:var(--font-main);
}
.pc-add-btn:hover{background:var(--yellow);transform:scale(1.1)}

/* Wishlist */
.pc-wishlist{
  position:absolute;top:10px;right:10px;z-index:3;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;cursor:pointer;border:none;
  transition:var(--transition);
}
.pc-wishlist:hover,.pc-wishlist.active{background:#fff;color:var(--red)}

/* Badges */
.pc-badge{
  position:absolute;top:10px;left:10px;z-index:3;
  padding:3px 10px;border-radius:12px;
  font-size:11px;font-weight:700;color:#fff;
}
.pc-badge-sale{background:var(--red)}
.pc-badge-new{background:var(--green-mid)}
.pc-badge-seasonal{background:#f9a825}

/* Card body */
.pc-body{padding:10px 14px 16px}
.pc-vendor{font-size:11px;color:var(--text-light);margin-bottom:2px}
.pc-title{
  font-size:15px;color:var(--text-light);font-weight:400;
  line-height:1.35;min-height:42px;margin-bottom:8px;
}
.pc-title a{color:inherit}
.pc-title a:hover{color:var(--green-dark)}
.pc-price-row{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.pc-price{font-size:19px;font-weight:700;color:var(--text)}
.pc-price-old{font-size:13px;color:var(--text-light);text-decoration:line-through}
.pc-price-sale{color:var(--red)!important}
.pc-unit{font-size:12px;color:var(--text-light)}
.pc-atc-btn{
  width:100%;padding:10px 12px;
  background:var(--green-dark);color:#fff;
  border:none;border-radius:8px;
  font-size:14px;font-weight:700;
  cursor:pointer;transition:background .2s;
  font-family:var(--font-main);
}
.pc-atc-btn:hover{background:var(--green-mid)}
.pc-atc-btn:disabled{background:var(--text-light);cursor:not-allowed}

/* ================================================================
   DELIVERY STEPS
   ================================================================ */
.section-delivery{
  padding:70px 0;
  background:var(--green-dark);
  background-image:url('pattern.jpg');
  background-blend-mode:multiply;
  background-size:300px;
}
.delivery-inner{max-width:1100px;margin:0 auto;padding:0 24px;text-align:center}
.delivery-title{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;margin-bottom:10px}
.delivery-sub{color:var(--green-light);font-size:1.05rem;margin-bottom:48px}
.delivery-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.delivery-step{
  background:rgba(255,255,255,.07);border-radius:14px;
  padding:28px 16px;
  border:1px solid rgba(255,255,255,.1);
  transition:background .2s;
}
.delivery-step:hover{background:rgba(255,255,255,.12)}
.step-num{
  width:52px;height:52px;border-radius:50%;
  background:var(--red);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:900;color:#fff;
  margin:0 auto 16px;
  box-shadow:0 4px 12px rgba(234,71,37,.35);
}
.step-title{color:#fff;font-size:16px;font-weight:700;margin-bottom:8px}
.step-desc{color:rgba(255,255,255,.62);font-size:13px;line-height:1.6}

/* ================================================================
   INFO / ABOUT SECTION
   ================================================================ */
.section-info{padding:72px 0;background:var(--cream)}
.section-info.section-info--fullbleed{
  padding:0;
  margin:0;
  background:transparent;
  width:100%;
  max-width:none;
}
.info-banner-link{
  display:block;
  width:100%;
  line-height:0;
  border-radius:0;
  overflow:hidden;
}
.info-banner-image{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  border-radius:0;
  object-fit:cover;
}

@media(max-width:768px){
  .section-info.section-info--fullbleed{padding:0}
}

/* ================================================================
   TESTIMONIALS
   ================================================================ */
.section-testimonials{padding:70px 0;background:var(--bg-topbar)}
.testimonials-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:22px;max-width:1100px;margin:0 auto;padding:0 24px;
}
.testi-card{
  background:var(--white);border-radius:14px;
  padding:28px 22px;
  box-shadow:var(--shadow-sm);
}
.testi-stars{color:var(--yellow);font-size:18px;letter-spacing:2px;margin-bottom:12px}
.testi-text{
  font-size:15px;line-height:1.75;color:#444;
  margin-bottom:20px;font-style:italic;
}
.testi-author{display:flex;align-items:center;gap:12px}
.testi-avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--green-light);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.testi-name{font-size:14px;font-weight:700;color:var(--green-dark)}
.testi-date{font-size:12px;color:var(--text-light)}

/* ================================================================
   COLLECTION PAGE
   ================================================================ */
.collection-hero{
  background:var(--cream);
  padding:50px 24px;text-align:center;
  border-bottom:3px solid var(--yellow);
  position:relative;overflow:hidden;
}
.collection-hero h1{font-size:2.4rem;font-weight:900;color:var(--green-dark);margin-bottom:10px}
.collection-hero p{font-size:1.05rem;color:var(--text-light)}
.collection-layout{
  max-width:1200px;margin:40px auto;padding:0 24px;
  display:grid;grid-template-columns:220px 1fr;gap:28px;
}
.collection-sidebar{position:sticky;top:140px;height:fit-content}
.filter-group{margin-bottom:26px}
.filter-title{
  font-size:14px;font-weight:700;color:var(--green-dark);
  margin-bottom:12px;padding-bottom:8px;
  border-bottom:2px solid var(--border);
}
.filter-option{
  display:flex;align-items:center;gap:8px;
  padding:5px 0;cursor:pointer;font-size:14px;
}
.filter-option input{accent-color:var(--green-mid)}
.collection-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;flex-wrap:wrap;gap:10px;
}
.collection-count{font-size:14px;color:var(--text-light)}
.sort-select{
  border:1.5px solid var(--border);border-radius:8px;
  padding:8px 14px;font-size:14px;
  color:var(--text);background:var(--white);
  direction:rtl;font-family:var(--font-main);
  cursor:pointer;
}
.collection-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.pagination{
  display:flex;justify-content:center;gap:8px;
  margin-top:40px;flex-wrap:wrap;
}
.page-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:8px;
  border:1.5px solid var(--border);
  font-size:14px;font-weight:700;color:var(--green-dark);
  transition:var(--transition);
}
.page-btn:hover,.page-btn.active{
  background:var(--green-dark);color:#fff;border-color:var(--green-dark);
}

/* ================================================================
   PRODUCT PAGE
   ================================================================ */
.product-page{
  max-width:1100px;margin:50px auto;padding:0 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;
}
.prod-gallery-main{
  border-radius:16px;overflow:hidden;
  background:var(--bg-body);
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
}
.prod-gallery-main img{width:100%;height:100%;object-fit:contain;padding:24px}
.prod-gallery-thumbs{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.prod-gallery-thumbs img{
  width:68px;height:68px;object-fit:cover;
  border-radius:8px;border:2px solid var(--border);
  cursor:pointer;transition:border-color .2s;
}
.prod-gallery-thumbs img:hover,.prod-gallery-thumbs img.active{border-color:var(--green-mid)}
.prod-info-vendor{font-size:13px;color:var(--text-light);margin-bottom:6px}
.prod-info-title{font-size:2rem;font-weight:900;color:var(--green-dark);margin-bottom:14px;line-height:1.2}
.prod-price-row{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.prod-price{font-size:2.2rem;font-weight:900;color:var(--green-dark)}
.prod-price-old{font-size:1.1rem;color:var(--text-light);text-decoration:line-through}
.prod-price-sale{color:var(--red)!important}
.prod-desc{font-size:15px;line-height:1.85;color:#555;margin-bottom:26px}
.prod-variants{margin-bottom:22px}
.prod-variant-label{font-size:14px;font-weight:700;color:var(--green-dark);margin-bottom:8px;display:block}
.variant-btns{display:flex;gap:8px;flex-wrap:wrap}
.variant-btn{
  padding:7px 18px;border:2px solid var(--border);
  border-radius:8px;font-size:13px;font-weight:600;
  cursor:pointer;transition:var(--transition);
  background:var(--white);color:var(--text);
}
.variant-btn:hover,.variant-btn.selected{border-color:var(--green-dark);background:var(--green-dark);color:#fff}
.qty-row{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.qty-label{font-size:14px;font-weight:700;color:var(--green-dark)}
.qty-selector{
  display:flex;align-items:center;
  border:2px solid var(--green-dark);border-radius:10px;
  overflow:hidden;
}
.qty-selector button{
  width:42px;height:42px;font-size:20px;font-weight:700;
  color:var(--green-dark);background:var(--white);
  border:none;cursor:pointer;transition:background .2s;
}
.qty-selector button:hover{background:var(--cream)}
.qty-selector input{
  width:52px;height:42px;text-align:center;
  border:none;border-right:2px solid var(--green-dark);
  border-left:2px solid var(--green-dark);
  font-size:16px;font-weight:700;color:var(--green-dark);
  outline:none;font-family:var(--font-main);
}
.prod-atc-btn{
  width:100%;padding:16px 24px;
  background:var(--red);color:#fff;border:none;
  border-radius:10px;font-size:18px;font-weight:900;
  cursor:pointer;transition:all .2s;
  margin-bottom:12px;font-family:var(--font-main);
}
.prod-atc-btn:hover{background:var(--red-hover);transform:translateY(-2px)}
.prod-atc-btn:disabled{background:var(--text-light);cursor:not-allowed;transform:none}
.prod-meta{margin-top:26px;padding-top:18px;border-top:1px solid var(--border);font-size:14px}
.prod-meta-row{display:flex;gap:8px;margin-bottom:6px;align-items:center}
.prod-meta-row strong{color:var(--green-dark);min-width:60px}

/* ================================================================
   CART PAGE
   ================================================================ */
.cart-page{max-width:1100px;margin:50px auto;padding:0 24px}
.cart-page h1{font-size:2rem;font-weight:900;color:var(--green-dark);margin-bottom:32px}
.cart-layout{display:grid;grid-template-columns:1fr 340px;gap:28px}
.cart-item{
  display:grid;grid-template-columns:80px 1fr auto;
  gap:16px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--border);
}
.cart-item-img img{
  width:80px;height:80px;object-fit:contain;
  border-radius:10px;border:1px solid var(--border);
}
.cart-item-title a{font-size:15px;font-weight:700;color:var(--green-dark)}
.cart-item-price{font-size:14px;color:var(--text-light);margin-top:4px}
.cart-item-remove{
  font-size:12px;color:var(--red);
  text-decoration:underline;cursor:pointer;
  background:none;border:none;padding:0;margin-top:8px;
  font-family:var(--font-main);display:block;
}
.cart-summary{
  background:var(--cream);border-radius:14px;
  padding:28px;position:sticky;top:140px;
}
.cart-summary h3{font-size:1.2rem;font-weight:900;color:var(--green-dark);margin-bottom:22px}
.cart-sum-row{display:flex;justify-content:space-between;font-size:15px;margin-bottom:12px}
.cart-sum-total{
  font-size:1.2rem;font-weight:900;color:var(--green-dark);
  border-top:2px solid var(--green-dark);
  padding-top:14px;margin-top:8px;
  display:flex;justify-content:space-between;
}
.checkout-btn{
  width:100%;padding:16px;
  background:var(--red);color:#fff;
  border:none;border-radius:10px;
  font-size:17px;font-weight:900;
  cursor:pointer;margin-top:16px;
  transition:background .2s;
  font-family:var(--font-main);
}
.checkout-btn:hover{background:var(--red-hover)}
.continue-btn{
  display:block;width:100%;padding:12px;
  border:1.5px solid var(--green-dark);
  color:var(--green-dark);border-radius:10px;
  font-size:14px;font-weight:700;text-align:center;
  margin-top:10px;transition:var(--transition);
}
.continue-btn:hover{background:var(--green-dark);color:#fff}
.cart-secure{
  font-size:12px;color:var(--text-light);
  text-align:center;margin-top:14px;
}
.cart-empty{text-align:center;padding:80px 20px}
.cart-empty-icon{font-size:5rem;margin-bottom:20px}
.cart-empty h2{font-size:1.8rem;font-weight:900;color:var(--green-dark);margin-bottom:12px}
.cart-empty p{color:var(--text-light);margin-bottom:28px}

/* ================================================================
   SEARCH PAGE
   ================================================================ */
.search-page{max-width:1200px;margin:50px auto;padding:0 24px}
.search-page h1{font-size:2rem;font-weight:900;color:var(--green-dark);margin-bottom:28px}
.search-form{display:flex;max-width:560px;margin-bottom:40px;border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm)}
.search-form input{
  flex:1;padding:14px 18px;
  border:2px solid var(--green-dark);border-left:none;
  font-size:16px;outline:none;direction:rtl;
  font-family:var(--font-main);border-radius:10px 0 0 10px;
}
.search-form button{
  background:var(--green-dark);color:#fff;
  border:none;padding:14px 24px;
  font-size:15px;font-weight:700;cursor:pointer;
  font-family:var(--font-main);
  transition:background .2s;border-radius:0 10px 10px 0;
}
.search-form button:hover{background:var(--green-mid)}
.search-no-results{text-align:center;padding:60px 20px}

/* ================================================================
   PAGE TEMPLATE
   ================================================================ */
.page-content{max-width:880px;margin:60px auto;padding:0 24px}
.page-content h1{
  font-size:2.2rem;font-weight:900;color:var(--green-dark);
  margin-bottom:32px;padding-bottom:16px;
  border-bottom:3px solid var(--yellow);
}
.page-content .content{font-size:16px;line-height:1.9;color:#444}
.page-content .content h2{font-size:1.4rem;font-weight:700;color:var(--green-dark);margin:28px 0 12px}
.page-content .content p{margin-bottom:16px}

/* 404 */
.error404-page{
  text-align:center;padding:80px 20px;
  background:var(--green-light);min-height:60vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.error404-img{height:120px;margin-bottom:28px;opacity:.7}
.error404-num{font-size:6rem;font-weight:900;color:var(--green-dark);line-height:1}
.error404-title{font-size:1.8rem;font-weight:700;color:var(--green-dark);margin:12px 0}
.error404-desc{color:var(--text-light);font-size:1.05rem;margin-bottom:32px}
.error404-btns{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer{
  background:url('pattern.jpg') repeat center;
  margin-top:70px;position:relative;z-index:1;
}
.site-footer::before{
  content:"";position:absolute;inset:0;
  background:rgba(33,53,25,.9);z-index:0;
}
.footer-inner{position:relative;z-index:1}
.footer-main{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;max-width:1480px;margin:0 auto;
  padding:60px 40px 40px;
}
.footer-brand{}
.footer-logo-circle{
  display:block;width:56px;height:56px;border-radius:50%;
  background:var(--white);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.footer-logo-circle img{width:36px;height:auto}
.footer-desc{font-size:14px;line-height:1.8;color:rgba(255,255,255,.7);margin-bottom:22px}
.footer-social{display:flex;gap:10px}
.footer-social a{
  width:36px;height:36px;
  border-radius:8px 0 8px 8px;
  border:1px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;
  color:#fff;transition:var(--transition);
}
.footer-social a:hover{background:var(--white);color:var(--green-dark)}
.footer-social svg{width:17px;height:17px}
.footer-col-title{
  font-size:15px;font-weight:700;color:#fff;
  margin-bottom:16px;
}
.footer-col a{
  display:block;font-size:14px;
  color:var(--green-light);line-height:19px;
  margin-bottom:8px;transition:var(--transition);
}
.footer-col a:hover{color:#fff;text-decoration:underline}
.footer-contact-item{
  display:flex;align-items:flex-start;gap:8px;
  margin-bottom:10px;font-size:14px;
  color:rgba(255,255,255,.75);
}
.footer-contact-item a{color:rgba(255,255,255,.75)}
.footer-contact-item a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  max-width:1480px;margin:0 auto;padding:20px 40px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  font-size:13px;color:rgba(255,255,255,.45);
}
.footer-bottom a{color:rgba(255,255,255,.45)}
.footer-bottom a:hover{color:rgba(255,255,255,.8)}
.footer-bottom-links{display:flex;gap:18px}

/* ================================================================
   CUSTOMER PAGES (login/account)
   ================================================================ */
.auth-page{
  min-height:60vh;display:flex;align-items:center;justify-content:center;
  padding:60px 20px;background:var(--bg-topbar);
}
.auth-card{
  background:var(--white);border-radius:16px;
  padding:42px;width:100%;max-width:440px;
  box-shadow:var(--shadow);
}
.auth-title{font-size:1.8rem;font-weight:900;color:var(--green-dark);text-align:center;margin-bottom:8px}
.auth-sub{text-align:center;color:var(--text-light);font-size:14px;margin-bottom:28px}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:14px;font-weight:700;color:var(--green-dark);margin-bottom:6px}
.form-group input{
  width:100%;padding:12px 14px;
  border:2px solid var(--border);border-radius:10px;
  font-size:15px;outline:none;direction:rtl;
  font-family:var(--font-main);transition:border-color .2s;
}
.form-group input:focus{border-color:var(--green-mid)}
.form-submit-btn{
  width:100%;padding:14px;
  background:var(--red);color:#fff;
  border:none;border-radius:10px;
  font-size:16px;font-weight:900;cursor:pointer;
  transition:background .2s;font-family:var(--font-main);
}
.form-submit-btn:hover{background:var(--red-hover)}
.auth-footer{text-align:center;margin-top:18px;font-size:14px;color:var(--text-light)}
.auth-footer a{color:var(--green-mid);font-weight:700}
.auth-footer a:hover{text-decoration:underline}

/* ================================================================
   UTILS / BUTTONS
   ================================================================ */
.btn-primary{
  display:inline-block;padding:12px 28px;
  background:var(--red);color:#fff;border:none;
  border-radius:8px;font-size:15px;font-weight:700;
  cursor:pointer;transition:all .2s;font-family:var(--font-main);
}
.btn-primary:hover{background:var(--red-hover);color:#fff;transform:translateY(-1px)}
.btn-outline{
  display:inline-block;padding:12px 28px;
  border:2px solid var(--green-dark);color:var(--green-dark);
  border-radius:8px;font-size:15px;font-weight:700;
  transition:all .2s;
}
.btn-outline:hover{background:var(--green-dark);color:#fff}

/* ================================================================
   RESPONSIVE
   ================================================================ */
/* ================================================================
   HOMEPAGE EXTRA CSS
   ================================================================ */

/* Product grid inside container */
.products-grid.container { max-width:1200px; }

/* Section header row */
.section-header-row {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:32px;
  max-width:1200px;margin-left:auto;margin-right:auto;padding:0 24px;
}

/* Promo 2-col grid responsive */
/* Drop menu responsive fix */
/* Head top responsive */
/* Hero image in mobile */
/* Promo grid responsive */
/* ================================================================
   STATIC PAGES – SHARED STYLES (Stage 1)
   ================================================================ */

.static-page { }

/* Hero */
.static-hero {
  padding: 64px 0;
  text-align: center;
}
.static-hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.15;
}
.static-hero-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,.78);
  margin: 0;
}

/* Body wrapper */
.static-body {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 24px 80px;
}

/* Section block */
.static-section { margin-bottom: 64px; }
.static-section-header {
  text-align: center;
  margin-bottom: 40px;
}
.static-section-header h2 {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--green-dark);
  margin: 10px 0 10px;
}
.static-section-header p {
  font-size: 1rem;
  color: var(--text-light);
}

/* Tag pill */
.static-tag {
  display: inline-block;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Two-column layout */
.static-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 60px;
}
.static-2col-img {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.static-2col-img img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}
.static-2col-text h2 {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--green-dark);
  margin-bottom: 16px;
  line-height: 1.3;
}
.static-2col-text p {
  font-size: 1rem;
  line-height: 1.85;
  color: #555;
  margin-bottom: 14px;
}

/* Values grid */
.static-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.static-value-card {
  background: var(--white);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: transform .25s, box-shadow .25s;
}
.static-value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.static-value-icon { font-size: 2.4rem; margin-bottom: 14px; }
.static-value-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 10px;
}
.static-value-card p {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.65;
}

/* Stats row */
.static-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--green-dark);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 64px;
}
.static-stat {
  padding: 36px 20px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.12);
}
.static-stat:first-child { border-right: none; }
.static-stat-num {
  font-size: 3rem;
  font-weight: 900;
  color: var(--yellow);
  line-height: 1;
  margin-bottom: 8px;
}
.static-stat-label {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  font-weight: 700;
}

/* Team grid */
.static-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.static-team-card {
  background: var(--white);
  border-radius: 14px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.static-team-avatar {
  font-size: 3.5rem;
  margin-bottom: 14px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.static-team-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 4px;
}
.static-team-role {
  font-size: 13px;
  color: var(--green-mid);
  font-weight: 700;
  margin-bottom: 10px;
}
.static-team-card p {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.65;
}

/* CTA block */
.static-cta {
  background: var(--green-dark);
  background-image: url('pattern.jpg');
  background-blend-mode: multiply;
  background-size: 300px;
  border-radius: 20px;
  padding: 56px 40px;
  text-align: center;
  margin-top: 20px;
}
.static-cta h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
}
.static-cta p {
  color: rgba(255,255,255,.78);
  font-size: 1rem;
  margin-bottom: 28px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.static-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.static-cta .btn-outline {
  border-color: rgba(255,255,255,.6);
  color: #fff;
}
.static-cta .btn-outline:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* ── DELIVERY PAGE ── */
.delivery-page {
  background: linear-gradient(180deg, var(--bg-topbar) 0%, #fff 42%, var(--cream) 100%);
}

.delivery-page-hero {
  position: relative;
  padding: 76px 0 82px;
  overflow: hidden;
}

.delivery-page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 10px;
  background: var(--yellow);
}

.delivery-page-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  padding: 7px 16px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 20px;
  color: var(--yellow);
  font-size: 13px;
  font-weight: 800;
}

.delivery-page .static-body {
  max-width: 1120px;
  margin-top: 54px;
}

.delivery-page-section {
  margin-bottom: 52px;
}

.delivery-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.delivery-step-card {
  min-height: 190px;
  padding: 28px 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.delivery-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--green-dark);
  color: var(--yellow);
  font-size: 18px;
  font-weight: 900;
}

.delivery-step-card h3 {
  margin: 0 0 10px;
  color: var(--green-dark);
  font-size: 1.05rem;
  font-weight: 900;
}

.delivery-step-card p {
  margin: 0;
  color: var(--text-light);
  font-size: 14px;
  line-height: 1.7;
}

.delivery-section-heading {
  max-width: 720px;
  margin: 0 auto 22px;
  text-align: center;
}

.delivery-section-heading h2 {
  margin: 10px 0;
  color: var(--green-dark);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
}

.delivery-section-heading p {
  margin: 0;
  color: var(--text-light);
  font-size: 15px;
  line-height: 1.75;
}

.delivery-windows-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.delivery-window-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 20px 14px;
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.delivery-window-card:hover {
  border-color: var(--green-mid);
  box-shadow: var(--shadow-sm);
}
.dw-icon { font-size: 1.8rem; margin-bottom: 8px; }
.dw-time { font-size: 1rem; font-weight: 900; color: var(--green-dark); margin-bottom: 4px; }
.dw-label { font-size: 13px; color: var(--green-mid); font-weight: 700; margin-bottom: 6px; }
.dw-note { font-size: 11px; color: var(--text-light); }

.delivery-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.delivery-price-row:last-child { border-bottom: none; }
.delivery-price-val { font-size: 1.1rem; font-weight: 900; color: var(--green-dark); }

.delivery-areas-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.delivery-area-badge {
  display: inline-block;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(33,53,25,.15);
}

.delivery-page-zones {
  margin: 0 auto 36px;
  padding: 28px;
  max-width: 980px;
  background: var(--white);
  border: 1px solid rgba(33,53,25,.12);
  border-radius: 16px;
  box-shadow: 0 14px 42px rgba(33,53,25,.08);
}

.delivery-page-zones-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.delivery-page-zones-head h3 {
  margin: 0 0 6px;
  color: var(--green-dark);
  font-size: 1.25rem;
  font-weight: 900;
}

.delivery-page-zones-head p {
  margin: 0;
  color: var(--text-light);
  font-size: 14px;
}

.delivery-page-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--yellow);
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 900;
}

.delivery-page-search-wrap {
  margin-bottom: 16px;
}

.delivery-page-search {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 2px solid #dfe7dd;
  border-radius: 12px;
  background: #fbfaf6;
  color: var(--text);
  font-size: 16px;
  direction: rtl;
  box-sizing: border-box;
}

.delivery-page-search:focus {
  outline: none;
  border-color: var(--green-mid);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(46,125,79,.08);
}

.delivery-page-empty {
  display: none;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--cream);
  color: var(--text-light);
  font-size: 14px;
}

.delivery-page-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  max-height: 440px;
  overflow-y: auto;
  padding-left: 6px;
}

.delivery-page-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #dfe7dd;
  border-radius: 10px;
  background: #fbfaf6;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
  transition: border-color .2s, background .2s, transform .2s;
}

.delivery-page-area:hover {
  border-color: var(--green-mid);
  background: var(--green-light);
  transform: translateY(-1px);
}

.delivery-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 0 0 34px;
}

.delivery-info-card {
  min-height: 210px;
  border-radius: 16px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.delivery-info-card--dark {
  background: var(--green-dark);
  background-image: url('pattern.jpg');
  background-blend-mode: multiply;
  background-size: 260px;
  color: #fff;
}

.delivery-info-card--light {
  background: var(--yellow);
  color: var(--green-dark);
}

.delivery-info-label {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.18);
  font-size: 12px;
  font-weight: 900;
}

.delivery-info-card--light .delivery-info-label {
  background: rgba(255,255,255,.5);
}

.delivery-info-card h2 {
  margin: 0 0 8px;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 900;
  line-height: 1.2;
}

.delivery-info-card p {
  margin: 0;
  color: inherit;
  opacity: .82;
  font-size: 15px;
  line-height: 1.7;
}

.delivery-info-card .btn-primary {
  margin-top: 18px;
  background: var(--green-dark);
  color: #fff;
}

.delivery-process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dp-step {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.dp-step:last-child { border-bottom: none; }
.dp-step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  flex-shrink: 0;
}
.dp-step-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 6px;
}
.dp-step-content p { font-size: 14px; color: #555; line-height: 1.65; }

/* ── FAQ PAGE ── */
.faq-category { margin-bottom: 44px; }
.faq-cat-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--green-dark);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--green-light);
}
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.faq-item:last-child { border-bottom: none; }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--green-dark);
  gap: 12px;
}
.faq-arrow {
  font-size: 12px;
  color: var(--text-light);
  flex-shrink: 0;
  transition: transform .25s ease;
}
.faq-a {
  font-size: 14px;
  line-height: 1.75;
  color: #555;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  padding-bottom: 0;
}
.faq-item.open .faq-a { padding-bottom: 16px; }
.faq-a a { color: var(--green-mid); text-decoration: underline; }

/* ── CONTACT PAGE ── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
}
.contact-method-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  margin-bottom: 12px;
  transition: border-color .2s, box-shadow .2s;
  background: var(--white);
  text-decoration: none;
}
.contact-method-card:hover {
  border-color: var(--green-mid);
  box-shadow: var(--shadow-sm);
}
.contact-method-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.contact-method-title { font-size: 13px; color: var(--text-light); margin-bottom: 2px; }
.contact-method-val { font-size: 16px; font-weight: 700; color: var(--green-dark); margin-bottom: 2px; }
.contact-method-note { font-size: 12px; color: var(--text-light); }
.contact-form-col .form-group { margin-bottom: 0; }
.contact-form-col .form-group label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 6px;
}
.contact-form-col .form-group input,
.contact-form-col .form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  direction: rtl;
  font-family: var(--font-main);
  transition: border-color .2s;
}
.contact-form-col .form-group input:focus,
.contact-form-col .form-group textarea:focus { border-color: var(--green-mid); }
.contact-form-col .form-group textarea { resize: vertical; }

/* ── LEGAL PAGES ── */
.legal-content h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p {
  font-size: 15px;
  line-height: 1.85;
  color: #444;
  margin-bottom: 12px;
}
.legal-content ul {
  list-style: disc;
  padding-right: 22px;
  margin-bottom: 16px;
}
.legal-content ul li {
  font-size: 15px;
  line-height: 1.75;
  color: #444;
  margin-bottom: 6px;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 14px;
}
.legal-table th {
  background: var(--green-dark);
  color: #fff;
  padding: 12px 16px;
  text-align: right;
  font-weight: 700;
}
.legal-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: #444;
}
.legal-table tr:nth-child(even) td { background: var(--cream); }

/* ── RESPONSIVE – static pages ── */
/* ================================================================
   STAGE 2 – PRODUCT PAGE & COLLECTION
   ================================================================ */

/* ── BREADCRUMB ── */
.breadcrumb {
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.breadcrumb .container {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-light);
}
.breadcrumb a { color: var(--green-mid); }
.breadcrumb a:hover { text-decoration: underline; }
.bc-sep { color: var(--border); }

/* ── PRODUCT PAGE ── */
.product-page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: flex-start;
}

/* Gallery */
.prod-gallery-wrapper { position: relative; }
.prod-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.prod-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  color: #fff;
}
.prod-badge-sale     { background: var(--red); }
.prod-badge-new      { background: var(--green-mid); }
.prod-badge-organic  { background: #2e7d32; }
.prod-badge-seasonal { background: #e65100; }

.prod-gallery-main {
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-body);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  position: relative;
}
.prod-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  transition: transform .3s ease;
}
.prod-gallery-main:hover img { transform: scale(1.03); }
.prod-zoom-hint {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(255,255,255,.85);
  font-size: 11px;
  color: var(--text-light);
  padding: 4px 10px;
  border-radius: 20px;
  opacity: 0;
  transition: opacity .2s;
}
.prod-gallery-main:hover .prod-zoom-hint { opacity: 1; }
.prod-no-image {
  font-size: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Thumbnails */
.prod-gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.prod-thumb-btn {
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
  background: var(--bg-body);
}
.prod-thumb-btn img { width: 70px; height: 70px; object-fit: cover; display: block; }
.prod-thumb-btn:hover { border-color: var(--green-mid); transform: translateY(-2px); }
.prod-thumb-btn.active { border-color: var(--green-dark); box-shadow: 0 0 0 1px var(--green-dark); }

/* Lightbox */
.prod-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod-lightbox-inner { position: relative; max-width: 90vw; max-height: 90vh; }
.prod-lightbox-inner img { max-width: 90vw; max-height: 90vh; border-radius: 8px; }
.prod-lightbox-close {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: #333;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Info side */
.prod-meta-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.prod-vendor-link {
  font-size: 13px;
  color: var(--green-mid);
  font-weight: 700;
}
.prod-vendor-link:hover { text-decoration: underline; }
.prod-type-tag {
  font-size: 12px;
  background: var(--green-light);
  color: var(--green-dark);
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 700;
}
.prod-info-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  color: var(--green-dark);
  margin-bottom: 8px;
  line-height: 1.25;
}
.prod-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.prod-stars { color: var(--yellow); font-size: 16px; letter-spacing: 2px; }
.prod-rating-count { font-size: 13px; color: var(--text-light); text-decoration: underline; cursor: pointer; }

/* Price block */
.prod-price-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.prod-price {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--green-dark);
  line-height: 1;
}
.prod-price-sale { color: var(--red) !important; }
.prod-price-old {
  font-size: 1.2rem;
  color: var(--text-light);
  text-decoration: line-through;
}
.prod-saving-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}
.prod-price-unit {
  font-size: 13px;
  color: var(--text-light);
  width: 100%;
}

.prod-short-desc {
  font-size: 15px;
  color: #555;
  line-height: 1.75;
  margin-bottom: 14px;
}

/* Availability */
.prod-availability {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}
.avail-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green-mid);
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(30,130,76,.2);
}
.unavailable-dot { background: var(--text-light); box-shadow: none; }
.prod-availability.available { color: var(--green-mid); }
.prod-availability.unavailable { color: var(--text-light); }

/* Variants */
.prod-variants-wrap { margin-bottom: 20px; }
.prod-option-group { margin-bottom: 16px; }
.prod-option-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 8px;
}
.prod-option-selected {
  font-weight: 400;
  color: var(--text-light);
}
.prod-option-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.prod-option-btn {
  padding: 7px 18px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-main);
}
.prod-option-btn:hover { border-color: var(--green-dark); }
.prod-option-btn.selected {
  border-color: var(--green-dark);
  background: var(--green-dark);
  color: #fff;
}
.prod-option-select {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: var(--font-main);
  color: var(--text);
  background: var(--white);
  direction: rtl;
  cursor: pointer;
  transition: border-color .2s;
}
.prod-option-select:focus { border-color: var(--green-mid); outline: none; }

/* Unit selector */
.prod-unit-selector { margin-bottom: 16px; }

/* ATC row */
.prod-atc-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.prod-atc-btn {
  flex: 1;
  min-width: 180px;
  padding: 15px 20px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-main);
}
.prod-atc-btn:hover:not(:disabled) {
  background: var(--red-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(234,71,37,.3);
}
.prod-atc-unavailable { background: var(--text-light); cursor: not-allowed; }
.btn-icon { font-size: 18px; }
.btn-price { font-size: 14px; font-weight: 400; opacity: .85; }

/* Wishlist */
.prod-wishlist-btn {
  width: 100%;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-light);
  cursor: pointer;
  transition: all .2s;
  font-family: var(--font-main);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.prod-wishlist-btn:hover { border-color: var(--red); color: var(--red); }
.prod-wishlist-btn.wishlisted { border-color: var(--red); color: var(--red); background: rgba(234,71,37,.04); }
.wish-icon { font-size: 16px; }

/* Trust badges */
.prod-trust-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--cream);
  border-radius: 10px;
  padding: 12px 6px;
  text-align: center;
  font-size: 11px;
  color: var(--green-dark);
  font-weight: 700;
}
.trust-badge span:first-child { font-size: 1.4rem; }

/* Delivery estimate */
.prod-delivery-estimate {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--green-light);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--green-dark);
  margin-bottom: 20px;
}
.pde-icon { font-size: 1.3rem; flex-shrink: 0; }

/* Product meta details */
.prod-meta-details {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.pmd-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.pmd-label {
  font-weight: 700;
  color: var(--green-dark);
  min-width: 70px;
  flex-shrink: 0;
}
.pmd-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pmd-tag {
  background: var(--bg-topbar);
  color: var(--text-light);
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: border-color .2s;
}
.pmd-tag:hover { border-color: var(--green-mid); color: var(--green-mid); }

/* ── PRODUCT TABS ── */
.prod-tabs-section { padding: 0 24px 60px; }
.prod-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  gap: 0;
  margin-bottom: 0;
  overflow-x: auto;
}
.prod-tab {
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-light);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  background: none;
  border-top: none;
  border-right: none;
  border-left: none;
  font-family: var(--font-main);
  transition: all .2s;
}
.prod-tab:hover { color: var(--green-dark); }
.prod-tab.active {
  color: var(--green-dark);
  border-bottom-color: var(--green-dark);
}
.prod-tab-panel {
  display: none;
  padding: 28px 0;
  animation: fadeIn .25s ease;
}
.prod-tab-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.prod-full-desc {
  font-size: 15px;
  line-height: 1.9;
  color: #444;
}
.prod-full-desc h2,.prod-full-desc h3 { color: var(--green-dark); margin: 20px 0 10px; font-weight: 700; }
.prod-full-desc ul { list-style: disc; padding-right: 22px; margin-bottom: 14px; }
.prod-full-desc li { margin-bottom: 6px; }

/* Nutrition grid */
.nutrition-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 12px;
}
.nutrition-item {
  background: var(--cream);
  border-radius: 10px;
  padding: 16px 10px;
  text-align: center;
}
.ni-val { display: block; font-size: 1.2rem; font-weight: 900; color: var(--green-dark); }
.ni-label { display: block; font-size: 12px; color: var(--text-light); margin-top: 4px; }

/* Storage tips */
.storage-tips { display: flex; flex-direction: column; gap: 0; }
.storage-tip {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.storage-tip:last-child { border-bottom: none; }
.storage-tip-icon { font-size: 2rem; flex-shrink: 0; }
.storage-tip strong { display: block; font-size: 15px; font-weight: 700; color: var(--green-dark); margin-bottom: 6px; }
.storage-tip p { font-size: 14px; color: #555; line-height: 1.65; }

/* Reviews */
.reviews-summary {
  display: flex;
  gap: 40px;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.reviews-score { text-align: center; }
.rs-num { font-size: 3.5rem; font-weight: 900; color: var(--green-dark); line-height: 1; }
.rs-stars { color: var(--yellow); font-size: 20px; margin: 4px 0; }
.rs-count { font-size: 12px; color: var(--text-light); }
.reviews-bars { flex: 1; min-width: 200px; }
.rb-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.rb-star { color: var(--yellow); min-width: 22px; }
.rb-bar-wrap { flex: 1; height: 8px; background: var(--bg-topbar); border-radius: 4px; overflow: hidden; }
.rb-bar-fill { height: 100%; background: var(--yellow); border-radius: 4px; }
.rb-pct { color: var(--text-light); min-width: 32px; text-align: left; }
.reviews-list { display: flex; flex-direction: column; gap: 0; }
.review-card {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.review-card:last-child { border-bottom: none; }
.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.review-stars { color: var(--yellow); font-size: 14px; }
.review-date { color: var(--text-light); font-size: 12px; margin-right: auto; }
.review-text { font-size: 14px; color: #555; line-height: 1.7; }

/* Related products */
.related-products-section {
  padding: 60px 0;
  background: var(--bg-topbar);
  margin-top: 40px;
}

/* ── COLLECTION PAGE ── */
.col-hero {
  position: relative;
  min-height: 220px;
  background: var(--green-dark);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.col-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .25;
}
.col-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(33,53,25,.55);
}
.col-hero-pattern {
  position: absolute;
  inset: 0;
  background-image: url('pattern.jpg');
  background-blend-mode: multiply;
  background-size: 300px;
  opacity: .3;
}
.col-hero-content {
  position: relative;
  z-index: 2;
  padding: 48px 24px;
}
.col-hero-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 10px;
}
.col-hero-desc {
  font-size: 1rem;
  color: rgba(255,255,255,.8);
  margin-bottom: 14px;
}
.col-hero-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.col-hero-stats span {
  font-size: 13px;
  color: var(--green-light);
  font-weight: 700;
}

/* Quick cat links */
.col-quick-cats {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.col-quick-cats .container {
  display: flex;
  gap: 0;
  padding: 0 24px;
}
.col-quick-cat {
  display: inline-block;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-light);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: all .2s;
}
.col-quick-cat:hover { color: var(--green-dark); }
.col-quick-cat.active {
  color: var(--green-dark);
  border-bottom-color: var(--green-dark);
}

/* Layout */
.col-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  margin-top: 32px;
  margin-bottom: 60px;
  align-items: flex-start;
}

/* Sidebar */
.col-sidebar {
  position: sticky;
  top: 140px;
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.col-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.col-sidebar-header h2 { font-size: 1rem; font-weight: 700; color: var(--green-dark); }
.col-sidebar-close { display: none; }

/* Active filters */
.col-active-filters {
  padding: 12px 18px;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.caf-label { font-size: 12px; font-weight: 700; color: var(--green-dark); }
.caf-tag {
  font-size: 12px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 3px 10px;
  border-radius: 12px;
}
.caf-tag:hover { border-color: var(--red); color: var(--red); }
.caf-clear { font-size: 12px; color: var(--red); font-weight: 700; margin-right: auto; }
.caf-clear:hover { text-decoration: underline; }

/* Filter groups */
.col-filter-group { border-bottom: 1px solid var(--border); }
.col-filter-group:last-child { border-bottom: none; }
.cfg-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
  user-select: none;
  transition: background .15s;
}
.cfg-title:hover { background: var(--bg-topbar); }
.cfg-arrow { font-size: 11px; color: var(--text-light); transition: transform .25s; }
.cfg-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  padding: 0 18px;
}
.cfg-body.open { max-height: 400px; padding: 8px 18px 16px; }
.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
}
.filter-option input { accent-color: var(--green-mid); width: 15px; height: 15px; cursor: pointer; }

/* Price inputs */
.price-range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.pri-group { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-light); flex: 1; }
.pri-group input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  font-family: var(--font-main);
  transition: border-color .2s;
}
.pri-group input:focus { border-color: var(--green-mid); }
.pri-sep { color: var(--text-light); font-weight: 700; margin-top: 14px; }
.price-filter-btn {
  width: 100%;
  padding: 9px;
  background: var(--green-dark);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-main);
  transition: background .2s;
}
.price-filter-btn:hover { background: var(--green-mid); }

/* Sort options list */
.sort-options-list { display: flex; flex-direction: column; }
.sort-option-item {
  padding: 7px 0;
  font-size: 14px;
  color: var(--text-light);
  border-bottom: 1px solid rgba(0,0,0,.04);
  transition: color .15s;
}
.sort-option-item:hover { color: var(--green-dark); }
.sort-option-item.active { color: var(--green-dark); font-weight: 700; }

/* Reset */
.col-filter-reset {
  display: block;
  text-align: center;
  padding: 14px;
  font-size: 13px;
  color: var(--text-light);
  font-weight: 700;
  transition: color .2s;
}
.col-filter-reset:hover { color: var(--red); }

/* Toolbar */
.col-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.col-toolbar-right,.col-toolbar-left { display: flex; align-items: center; gap: 12px; }
.col-filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
  cursor: pointer;
  font-family: var(--font-main);
  transition: border-color .2s;
}
.col-filter-toggle:hover { border-color: var(--green-dark); }
.filter-count-badge {
  background: var(--red);
  color: #fff;
  font-size: 11px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.col-count { font-size: 14px; color: var(--text-light); }

/* View toggle */
.col-view-toggle { display: flex; gap: 0; border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; }
.cvt-btn {
  padding: 8px 12px;
  color: var(--text-light);
  cursor: pointer;
  transition: all .2s;
  border: none;
  background: var(--white);
}
.cvt-btn:hover { background: var(--bg-topbar); color: var(--green-dark); }
.cvt-btn.active { background: var(--green-dark); color: #fff; }

/* Collection grid */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  transition: all .25s;
}

/* List view */
.collection-grid.col-list-view {
  grid-template-columns: 1fr;
}
.col-list-view .product-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  border-radius: 12px;
  overflow: hidden;
}
.col-list-view .pc-image {
  border-radius: 0;
  min-height: 160px;
  aspect-ratio: auto;
}
.col-list-view .pc-image img { max-height: 160px; }
.col-list-view .pc-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
}
.col-list-view .pc-atc-btn { margin-top: auto; max-width: 200px; }

/* Col empty */
.col-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
}
.col-empty h3 { font-size: 1.3rem; font-weight: 700; color: var(--green-dark); margin-bottom: 10px; }
.col-empty p { font-size: 14px; color: var(--text-light); }

/* Sidebar overlay (mobile) */
.col-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 499;
}
.col-sidebar-overlay.open { display: block; }

/* ── RESPONSIVE – Stage 2 ── */
/* ================================================================
   STAGE 3 – CART, CHECKOUT FLOW, DELIVERY SLOTS
   ================================================================ */

/* ── CHECKOUT PROGRESS BAR ── */
.checkout-progress {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.cp-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 560px;
  margin: 0 auto;
}
.cp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.cp-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-light);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s;
}
.cp-step.active .cp-step-num,
.cp-step.done .cp-step-num {
  background: var(--green-dark);
  color: #fff;
}
.cp-step.done .cp-step-num::after { content: "✓"; }
.cp-step-label {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 700;
  white-space: nowrap;
}
.cp-step.active .cp-step-label { color: var(--green-dark); }
.cp-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 6px;
  margin-bottom: 18px;
  min-width: 40px;
  max-width: 80px;
}

/* ── CART PAGE LAYOUT ── */
.cart-page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: flex-start;
}
.cart-page-title {
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--green-dark);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cart-item-count-badge {
  font-size: 13px;
  background: var(--green-light);
  color: var(--green-dark);
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
}

/* ── CART ITEMS ── */
.cart-items-wrap {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 20px;
}
.cart-items-header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: var(--bg-topbar);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-light);
  border-bottom: 1px solid var(--border);
}
.cart-item {
  display: grid;
  grid-template-columns: 90px 1fr auto 80px;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  transition: opacity .2s;
}
.cart-item:last-child { border-bottom: none; }
.ci-img {
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.ci-img img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  display: block;
  background: var(--cream);
}
.ci-details { min-width: 0; }
.ci-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--green-dark);
  display: block;
  margin-bottom: 4px;
  line-height: 1.3;
}
.ci-title:hover { color: var(--green-mid); }
.ci-variant, .ci-vendor {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 2px;
}
.ci-unit-price {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 4px;
}
.ci-props { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ci-prop {
  font-size: 11px;
  background: var(--cream);
  color: var(--green-dark);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Qty controls */
.ci-qty-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ci-qty {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.ci-qty-btn {
  width: 32px;
  height: 32px;
  font-size: 18px;
  font-weight: 700;
  color: var(--green-dark);
  background: var(--white);
  border: none;
  cursor: pointer;
  transition: background .2s;
  font-family: var(--font-main);
  position: relative;
  z-index: 2;
}
.ci-qty-btn:hover { background: var(--bg-topbar); }
.ci-qty-num {
  min-width: 32px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--green-dark);
  border-right: 1.5px solid var(--border);
  border-left: 1.5px solid var(--border);
  padding: 4px 6px;
}

/* Produce items – disabled quantity */
.ci-qty-disabled {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--cream);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 14px;
}
.ci-qty-label {
  font-weight: 700;
  color: var(--text);
}
.ci-qty-value {
  color: var(--green-mid);
  font-weight: 700;
}
.ci-estimate-note {
  font-size: 11px;
  color: var(--text-light);
  text-align: center;
  max-width: 120px;
  line-height: 1.25;
}
.ci-remove-btn {
  font-size: 12px;
  color: var(--red);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-main);
  transition: color .2s;
  padding: 4px 0;
  position: relative;
  z-index: 2;
  font-weight: 900;
}
.ci-remove-btn:hover { color: var(--red-hover); text-decoration: underline; }
.ci-remove-mobile { display: none; }

/* Line total */
.ci-total {
  font-size: 16px;
  font-weight: 900;
  color: var(--green-dark);
  text-align: left;
  white-space: nowrap;
}

/* ── DELIVERY SLOT CARD ── */
.delivery-slot-card {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 20px;
}
.dsc-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: var(--green-dark);
}
.dsc-icon { font-size: 2rem; }
.dsc-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 2px;
}
.dsc-sub { font-size: 13px; color: rgba(255,255,255,.7); }
.dsc-section { padding: 18px 20px; border-bottom: 1px solid var(--border); }
.dsc-section:last-child { border-bottom: none; }
.dsc-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Date buttons */
.delivery-dates {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dd-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  background: var(--white);
  transition: all .2s;
  min-width: 64px;
  font-family: var(--font-main);
}
.dd-btn:hover { border-color: var(--green-mid); }
.dd-btn.selected {
  border-color: var(--green-dark);
  background: var(--green-dark);
  color: #fff;
}
.dd-day { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.dd-date { font-size: 14px; font-weight: 900; }

/* Time slot grid */
.timeslot-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.ts-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  background: var(--white);
  transition: all .2s;
  font-family: var(--font-main);
}
.ts-btn:hover { border-color: var(--green-mid); background: var(--cream); }
.ts-btn.selected {
  border-color: var(--green-dark);
  background: var(--green-dark);
  color: #fff;
}
.ts-icon { font-size: 1.3rem; }
.ts-time { font-size: 11px; font-weight: 700; text-align: center; }
.ts-note { font-size: 11px; color: var(--text-light); }
.ts-btn.selected .ts-note { color: rgba(255,255,255,.7); }

/* Selected summary */
.dsc-selected {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--green-light);
  border-top: 1px solid rgba(33,53,25,.15);
}
.dsc-selected-icon { font-size: 1.4rem; }
.dsc-selected strong { font-size: 14px; color: var(--green-dark); }
.dsc-change {
  font-size: 12px;
  color: var(--green-mid);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-main);
  margin-right: 10px;
}

/* Delivery note */
.dsc-note {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-main);
  resize: none;
  outline: none;
  transition: border-color .2s;
  direction: rtl;
}
.dsc-note:focus { border-color: var(--green-mid); }

/* ── COUPON ── */
.cart-coupon-wrap {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 20px;
  overflow: hidden;
}
.coupon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.coupon-header:hover { background: var(--bg-topbar); }
.coupon-arrow { font-size: 11px; color: var(--text-light); transition: transform .25s; }
.coupon-body { padding: 14px 18px; border-top: 1px solid var(--border); }
.coupon-input-row { display: flex; gap: 8px; }
.coupon-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  font-family: var(--font-main);
  direction: ltr;
  transition: border-color .2s;
}
.coupon-input:focus { border-color: var(--green-mid); }
.coupon-apply-btn {
  padding: 10px 20px;
  background: var(--green-dark);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-main);
  transition: background .2s;
}
.coupon-apply-btn:hover { background: var(--green-mid); }

/* Continue link */
.cart-continue { margin-bottom: 10px; }
.cart-continue-link {
  font-size: 14px;
  color: var(--green-mid);
  font-weight: 700;
  transition: color .2s;
}
.cart-continue-link:hover { color: var(--green-dark); text-decoration: underline; }

/* ── CART SUMMARY SIDEBAR ── */
.cart-sidebar { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 16px; }
.cart-summary-card {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 24px;
}
.csc-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--green-dark);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

/* Free shipping banner */
.free-ship-banner {
  background: var(--cream);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--green-dark);
}
.free-ship-achieved { background: var(--green-light); }
.fsb-text { margin-bottom: 8px; }
.fsb-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.fsb-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-mid), var(--green-dark));
  border-radius: 3px;
  transition: width .4s ease;
}

/* Line items */
.csc-lines { margin-bottom: 14px; }
.csc-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--text-light);
}
.csc-line-title { flex: 1; }
.csc-line-price { font-weight: 700; color: var(--text); white-space: nowrap; }
.csc-qty-pill {
  display: inline-block;
  background: var(--bg-topbar);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  margin-right: 4px;
  color: var(--text-light);
}
.csc-divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.csc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 5px 0;
  color: var(--text);
}
.csc-ship-note { font-size: 12px; color: var(--text-light); }
.csc-discount { color: var(--green-mid); font-weight: 700; }
.csc-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--green-dark);
  padding: 8px 0;
}

/* Checkout button */
.checkout-main-btn {
  width: 100%;
  padding: 16px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  margin-top: 16px;
  transition: all .2s;
  font-family: var(--font-main);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.checkout-main-btn:hover {
  background: var(--red-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(234,71,37,.3);
}
.checkout-btn-arrow { font-size: 20px; transition: transform .2s; }
.checkout-main-btn:hover .checkout-btn-arrow { transform: translateX(-4px); }

/* Payment methods */
.payment-methods {
  margin-top: 14px;
  text-align: center;
}
.payment-methods p { font-size: 11px; color: var(--text-light); margin-bottom: 8px; }
.pm-icons { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.pm-icon {
  font-size: 11px;
  background: var(--bg-topbar);
  color: var(--text-light);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-weight: 700;
}

/* Cart trust */
.cart-trust {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cart-trust-item {
  font-size: 12px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── CART UPSELL ── */
.cart-upsell {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 18px;
}
.cu-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 14px;
}
.cu-product {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.cu-product:last-child { border-bottom: none; }
.cu-img img { width: 50px; height: 50px; object-fit: contain; border-radius: 8px; }
.cu-info { flex: 1; min-width: 0; }
.cu-title-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cu-title-link:hover { color: var(--green-mid); }
.cu-price { font-size: 13px; color: var(--text-light); }
.cu-add-btn {
  padding: 6px 12px;
  background: var(--green-dark);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-main);
  transition: background .2s;
  flex-shrink: 0;
}
.cu-add-btn:hover { background: var(--green-mid); }

/* ── EMPTY CART ── */
.cart-empty-page { margin: 60px auto; padding: 0 24px; }
.cep-inner {
  background: var(--white);
  border-radius: 20px;
  padding: 80px 40px;
  text-align: center;
  border: 1px solid var(--border);
  max-width: 560px;
  margin: 0 auto;
}
.cep-emoji { font-size: 5rem; margin-bottom: 20px; }
.cep-inner h1 { font-size: 1.8rem; font-weight: 900; color: var(--green-dark); margin-bottom: 10px; }
.cep-inner p  { color: var(--text-light); margin-bottom: 28px; }
.cep-cats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cep-cat {
  display: inline-block;
  padding: 10px 20px;
  background: var(--cream);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
  border: 1.5px solid transparent;
  transition: all .2s;
}
.cep-cat:hover { border-color: var(--green-dark); color: var(--green-dark); }

/* ── RESPONSIVE – Stage 3 ── */
/* ── CART TOAST NOTIFICATION ── */
#cart-toast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  transform: translateY(120%);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
#cart-toast.visible {
  transform: translateY(0);
  pointer-events: all;
}
.ct-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--green-dark);
  color: #fff;
  padding: 14px 16px;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  min-width: 280px;
  max-width: 340px;
}
.ct-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ct-text strong { font-size: 14px; }
.ct-text span { font-size: 12px; color: rgba(255,255,255,.7); }
.ct-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--yellow);
  white-space: nowrap;
}
.ct-link:hover { text-decoration: underline; color: var(--yellow); }
.ct-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.5);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.ct-close:hover { color: #fff; }

/* ── BACK TO TOP ── */
#back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s, transform .3s;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
#back-to-top.visible { opacity: 1; transform: translateY(0); }
#back-to-top:hover { background: var(--green-mid); }

/* ================================================================
   STAGE 4 – CUSTOMER ACCOUNT PAGES
   ================================================================ */

/* ── AUTH SPLIT LAYOUT ── */
.auth-page { min-height: 100vh; }
.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 140px);
}
.auth-brand-panel {
  background: var(--green-dark);
  background-image: url('pattern.jpg');
  background-blend-mode: multiply;
  background-size: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 48px;
}
.abp-inner { max-width: 380px; }
.abp-logo { margin-bottom: 32px; }
.abp-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 14px;
}
.abp-sub { font-size: 1rem; color: rgba(255,255,255,.75); line-height: 1.7; margin-bottom: 32px; }
.abp-features { display: flex; flex-direction: column; gap: 14px; }
.abp-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--green-light);
  font-size: 15px;
  font-weight: 700;
}
.abp-feature span { font-size: 1.4rem; }

.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  background: var(--white);
}
.auth-form-inner { width: 100%; max-width: 420px; }
.auth-form-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--green-dark);
  margin-bottom: 6px;
}
.auth-form-sub { font-size: 14px; color: var(--text-light); margin-bottom: 28px; }
.auth-form-sub a { color: var(--green-mid); font-weight: 700; }
.auth-form-sub a:hover { text-decoration: underline; }

/* Form fields */
.form-field { margin-bottom: 18px; }
.form-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 7px;
}
.forgot-link { font-size: 12px; color: var(--green-mid); font-weight: 400; }
.forgot-link:hover { text-decoration: underline; }
.form-field-wrap {
  display: flex;
  align-items: center;
  border: 2px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s;
  background: var(--white);
}
.form-field-wrap:focus-within { border-color: var(--green-mid); }
.ff-icon {
  padding: 0 12px;
  font-size: 1.1rem;
  color: var(--text-light);
  flex-shrink: 0;
}
.form-field-wrap input {
  flex: 1;
  padding: 12px 10px 12px 0;
  border: none;
  outline: none;
  font-size: 15px;
  font-family: var(--font-main);
  direction: rtl;
  background: transparent;
  min-width: 0;
}
.ff-toggle-pass {
  padding: 0 12px;
  font-size: 16px;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--text-light);
  transition: color .2s;
}
.ff-toggle-pass:hover { color: var(--green-dark); }

/* Password strength */
.pass-strength { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ps-bar { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.ps-fill { height: 100%; border-radius: 3px; transition: width .3s, background .3s; width: 0; }
.ps-label { font-size: 12px; font-weight: 700; white-space: nowrap; }

/* Submit buttons */
.auth-submit-btn {
  width: 100%;
  padding: 14px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  transition: all .2s;
  font-family: var(--font-main);
  margin-top: 8px;
}
.auth-submit-btn:hover {
  background: var(--red-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(234,71,37,.3);
}
.auth-cancel-btn {
  padding: 14px 20px;
  border: 2px solid var(--border);
  color: var(--text-light);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-main);
  background: none;
  transition: all .2s;
}
.auth-cancel-btn:hover { border-color: var(--green-dark); color: var(--green-dark); }

/* Divider + register link */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--text-light);
  font-size: 13px;
}
.auth-divider::before,.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-register-link {
  display: block;
  text-align: center;
  padding: 13px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
  transition: all .2s;
}
.auth-register-link:hover {
  border-color: var(--green-dark);
  background: var(--cream);
  color: var(--green-dark);
}

/* Success msg */
.auth-success-msg {
  background: var(--green-light);
  border: 1px solid var(--green-mid);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--green-dark);
  font-weight: 700;
  margin-bottom: 16px;
}

/* Checkboxes */
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-light);
  cursor: pointer;
  line-height: 1.5;
  margin-bottom: 8px;
}
.form-checkbox input { accent-color: var(--green-mid); margin-top: 2px; flex-shrink: 0; }
.form-checkbox a { color: var(--green-mid); text-decoration: underline; }

/* ── ACCOUNT DASHBOARD ── */
.account-page { }
.account-hero {
  background: var(--green-dark);
  background-image: url('pattern.jpg');
  background-blend-mode: multiply;
  background-size: 300px;
  padding: 40px 0;
}
.ah-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.ah-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--green-dark);
  font-size: 1.8rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.ah-info { flex: 1; }
.ah-name { font-size: 1.6rem; font-weight: 900; color: #fff; margin-bottom: 4px; }
.ah-email { font-size: 14px; color: rgba(255,255,255,.65); margin-bottom: 12px; }
.ah-stats { display: flex; gap: 24px; }
.ah-stat { text-align: center; }
.ahs-num { display: block; font-size: 1.3rem; font-weight: 900; color: var(--yellow); }
.ahs-label { display: block; font-size: 12px; color: rgba(255,255,255,.6); }
.ah-logout {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.3);
  padding: 8px 16px;
  border-radius: 8px;
  transition: all .2s;
  margin-right: auto;
}
.ah-logout:hover { color: #fff; border-color: rgba(255,255,255,.6); }

.account-body {
  max-width: 1100px;
  margin: 32px auto;
  padding: 0 24px 60px;
}

/* Account tabs */
.account-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  gap: 0;
  margin-bottom: 28px;
  overflow-x: auto;
}
.acc-tab {
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-light);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  background: none;
  border-top: none;
  border-right: none;
  border-left: none;
  font-family: var(--font-main);
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.acc-tab:hover { color: var(--green-dark); }
.acc-tab.active { color: var(--green-dark); border-bottom-color: var(--green-dark); }
.acc-tab-badge {
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
}

.acc-panel { display: none; }
.acc-panel.active { display: block; }
.acc-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 16px;
}

/* Orders filter */
.orders-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.of-btn {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  color: var(--text-light);
  cursor: pointer;
  background: none;
  font-family: var(--font-main);
  transition: all .2s;
}
.of-btn:hover { border-color: var(--green-dark); color: var(--green-dark); }
.of-btn.active { background: var(--green-dark); color: #fff; border-color: var(--green-dark); }

/* Order cards */
.orders-list { display: flex; flex-direction: column; gap: 16px; }
.order-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.order-card:hover { box-shadow: var(--shadow-sm); }
.oc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 8px;
}
.oc-header-right,.oc-header-left { display: flex; align-items: center; gap: 12px; }
.oc-num { font-size: 15px; font-weight: 700; color: var(--green-dark); }
.oc-date { font-size: 13px; color: var(--text-light); }
.oc-total { font-size: 16px; font-weight: 900; color: var(--green-dark); }

/* Status badges */
.oc-status, .order-status-badge, .payment-status-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
}
.status-delivered  { background: #e8f5e9; color: #2e7d32; }
.status-processing { background: #e3f2fd; color: #1565c0; }
.status-partial    { background: #fff3e0; color: #e65100; }
.status-pending    { background: #fff8e1; color: #f57f17; }
.status-refunded   { background: var(--cream); color: var(--text-light); }
.status-cancelled  { background: #ffebee; color: #c62828; }
.pay-paid          { background: #e8f5e9; color: #2e7d32; }
.pay-pending       { background: #fff3e0; color: #e65100; }

/* Order items preview */
.oc-items {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.oc-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.oc-item img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--cream);
}
.oc-item-placeholder {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border: 1px solid var(--border);
}
.oc-item-info { display: flex; flex-direction: column; }
.oc-item-title { font-size: 12px; color: var(--green-dark); font-weight: 700; }
.oc-item-qty { font-size: 12px; color: var(--text-light); }
.oc-more { font-size: 12px; color: var(--text-light); padding: 4px 10px; background: var(--bg-topbar); border-radius: 8px; }

/* Order card footer */
.oc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  flex-wrap: wrap;
  gap: 8px;
}
.oc-footer-actions { display: flex; gap: 10px; align-items: center; }
.oc-btn-detail {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-mid);
  text-decoration: underline;
}
.oc-btn-reorder {
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  background: var(--green-light);
  color: var(--green-dark);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-main);
  transition: background .2s;
}
.oc-btn-reorder:hover { background: var(--green-mid); color: #fff; }

/* Addresses */
.addresses-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.addresses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.address-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  position: relative;
  transition: box-shadow .2s;
}
.address-card:hover { box-shadow: var(--shadow-sm); }
.address-card.default {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 1px var(--green-mid);
}
.addr-default-badge {
  font-size: 11px;
  font-weight: 700;
  background: var(--green-light);
  color: var(--green-dark);
  padding: 3px 10px;
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 10px;
}
.addr-name { font-size: 15px; font-weight: 700; color: var(--green-dark); margin-bottom: 6px; }
.addr-line { font-size: 13px; color: #555; line-height: 1.6; }
.addr-actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.addr-btn-edit {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-mid);
  text-decoration: underline;
  cursor: pointer;
}
.addr-btn-delete {
  font-size: 13px;
  color: var(--red);
  text-decoration: underline;
  cursor: pointer;
}

/* Address form */
.address-form-wrap {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 24px;
  margin-bottom: 24px;
}
.afw-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 18px;
}
.addr-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

/* Profile form */
.profile-form-wrap {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 28px;
  max-width: 600px;
}
.profile-pass-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ── ORDER DETAIL ── */
.od-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}
.od-title { font-size: 1.8rem; font-weight: 900; color: var(--green-dark); margin-bottom: 4px; }
.od-date { font-size: 13px; color: var(--text-light); }
.od-status-wrap { display: flex; gap: 10px; flex-wrap: wrap; }

/* Timeline */
.od-timeline {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 28px;
  display: flex;
  gap: 0;
  overflow-x: auto;
}
.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  text-align: center;
  min-width: 100px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  top: 18px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.timeline-item:first-child::before { display: none; }
.timeline-item.done::before { background: var(--green-mid); }
.tl-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--border);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
  transition: background .3s;
}
.timeline-item.done .tl-dot { background: var(--green-mid); }
.timeline-item.pending .tl-dot { background: var(--yellow); color: var(--green-dark); }
.tl-content { font-size: 12px; text-align: center; }
.tl-content strong { display: block; color: var(--green-dark); font-size: 12px; margin-bottom: 2px; }
.tl-content span { color: var(--text-light); }
.tl-track { display: block; font-size: 11px; color: var(--green-mid); text-decoration: underline; margin-top: 4px; }

/* OD layout */
.od-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: flex-start; }
.od-section-title { font-size: 1rem; font-weight: 700; color: var(--green-dark); margin-bottom: 14px; }
.od-items {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}
.od-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}
.od-item:last-child { border-bottom: none; }
.odi-img img { width: 70px; height: 70px; object-fit: contain; border-radius: 8px; background: var(--cream); }
.odi-img-placeholder { width: 70px; height: 70px; border-radius: 8px; background: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.odi-title { font-size: 14px; font-weight: 700; color: var(--green-dark); display: block; margin-bottom: 4px; }
.odi-variant,.odi-vendor,.odi-qty { font-size: 12px; color: var(--text-light); }
.odi-price { text-align: left; }
.odi-price-main { font-size: 16px; font-weight: 700; color: var(--green-dark); }
.odi-price-old { font-size: 12px; color: var(--text-light); text-decoration: line-through; }
.odi-unit { font-size: 11px; color: var(--text-light); }
.od-note { background: var(--cream); border-radius: 10px; padding: 14px 16px; font-size: 13px; }
.od-note strong { color: var(--green-dark); display: block; margin-bottom: 4px; }
.od-note p { color: #555; margin: 0; }

/* OD summary card */
.od-summary-card, .od-addr-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.ods-row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.04); }
.ods-total {
  display: flex;
  justify-content: space-between;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--green-dark);
  padding: 10px 0 6px;
}
.ods-method { font-size: 12px; color: var(--text-light); padding-top: 8px; }
.addr-display { font-size: 14px; line-height: 1.75; color: #555; }
.od-actions { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }

/* Empty state */
.acc-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--bg-topbar);
  border-radius: 14px;
}
.acc-empty-icon { font-size: 4rem; margin-bottom: 16px; }
.acc-empty h3 { font-size: 1.2rem; font-weight: 700; color: var(--green-dark); margin-bottom: 8px; }
.acc-empty p { font-size: 14px; color: var(--text-light); }

/* ── RESPONSIVE – Stage 4 ── */
/* ================================================================
   STAGE 5 – WORKER SCREEN, ADMIN DASHBOARD
   + FULL MOBILE RESPONSIVE OVERHAUL
   ================================================================ */

/* ── WORKER APP – GLOBAL ── */
.worker-gate {
  min-height: 100vh;
  background: var(--green-dark);
  background-image: url('pattern.jpg');
  background-blend-mode: multiply;
  background-size: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.wg-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  padding: 36px 28px;
  width: 100%;
  max-width: 340px;
  text-align: center;
}
.wg-logo { margin-bottom: 20px; }
.wg-title { font-size: 1.5rem; font-weight: 900; color: #fff; margin-bottom: 4px; }
.wg-sub { font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: 20px; }
.wg-pin-display {
  font-size: 1.4rem;
  letter-spacing: 12px;
  color: var(--yellow);
  margin-bottom: 20px;
  min-height: 36px;
}
.wg-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.wk-key {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  font-size: 1.3rem;
  font-weight: 700;
  padding: 16px;
  cursor: pointer;
  transition: background .15s;
  font-family: var(--font-main);
}
.wk-key:hover,.wk-key:active { background: rgba(255,255,255,.22); }
.wk-key-clear { background: rgba(234,71,37,.3); font-size: .9rem; }
.wk-key-enter { background: var(--green-mid); font-size: .9rem; }
.wg-error { color: var(--red); font-size: 14px; font-weight: 700; margin-top: 12px; }

/* Worker app layout */
.worker-app {
  flex-direction: column;
  min-height: 100vh;
  background: #f0f2f5;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 0 40px rgba(0,0,0,.15);
}

/* Top bar */
.wa-topbar {
  background: var(--green-dark);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.wa-topbar-right { display: flex; align-items: center; gap: 10px; }
.wa-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--green-dark);
  font-size: 16px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wa-name { font-size: 14px; font-weight: 700; color: #fff; }
.wa-shift { font-size: 11px; color: rgba(255,255,255,.6); }
.wa-topbar-center { text-align: center; }
.wa-clock { font-size: 1.4rem; font-weight: 900; color: var(--yellow); line-height: 1; }
.wa-date { font-size: 11px; color: rgba(255,255,255,.6); }
.wa-topbar-left { display: flex; align-items: center; gap: 8px; }
.wa-notif-btn {
  position: relative;
  background: rgba(255,255,255,.12);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa-notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa-logout-btn {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.7);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
  font-family: var(--font-main);
}

/* Stats strip */
.wa-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.was-item {
  text-align: center;
  padding: 10px 6px;
  border-right: 1px solid var(--border);
}
.was-item:first-child { border-right: none; }
.was-item.active { background: var(--green-light); }
.was-num { display: block; font-size: 1.4rem; font-weight: 900; color: var(--green-dark); }
.was-label { font-size: 11px; color: var(--text-light); font-weight: 700; }

/* Tab bar */
.wa-tabs {
  display: flex;
  background: var(--white);
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
  position: sticky;
  top: 62px;
  z-index: 99;
}
.wa-tab {
  flex: 1;
  padding: 12px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-main);
  transition: all .2s;
}
.wa-tab.active { color: var(--green-dark); border-bottom-color: var(--green-dark); }

/* Panels */
.wa-panel { display: none; padding: 12px; min-height: 60vh; }
.wa-panel.active { display: block; }

/* Search */
.wa-search-bar { margin-bottom: 12px; }
.wa-search-input {
  width: 100%;
  padding: 11px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: var(--font-main);
  direction: rtl;
  outline: none;
  transition: border-color .2s;
}
.wa-search-input:focus { border-color: var(--green-mid); }

/* Order cards */
.wo-list { display: flex; flex-direction: column; gap: 10px; }
.wo-card {
  background: var(--white);
  border-radius: 14px;
  padding: 14px;
  border-right: 4px solid var(--border);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow .2s;
}
.wo-card:hover { box-shadow: var(--shadow); }
.wo-card.status-pending  { border-right-color: #ff9800; }
.wo-card.status-picking  { border-right-color: #2196f3; }
.wo-card.status-ready    { border-right-color: var(--green-mid); }
.wo-card.status-delivered{ border-right-color: #9e9e9e; }
.woc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.woc-num { font-size: 16px; font-weight: 900; color: var(--green-dark); }
.woc-priority { font-size: 12px; font-weight: 700; }
.woc-status-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}
.woc-s-pending   { background: #fff3e0; color: #e65100; }
.woc-s-picking   { background: #e3f2fd; color: #1565c0; }
.woc-s-ready     { background: var(--green-light); color: var(--green-dark); }
.woc-s-delivered { background: #f5f5f5; color: #757575; }
.woc-customer { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.woc-name { font-size: 14px; font-weight: 700; color: var(--green-dark); }
.woc-phone { font-size: 13px; color: var(--green-mid); font-weight: 700; }
.woc-slot,.woc-addr { font-size: 12px; color: var(--text-light); margin-bottom: 2px; }
.woc-progress { margin: 10px 0 8px; }
.woc-prog-text { font-size: 12px; color: var(--text-light); margin-bottom: 4px; }
.woc-prog-bar { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.woc-prog-fill { height: 100%; background: var(--green-mid); border-radius: 3px; transition: width .3s; }
.woc-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.woc-btn-start,.woc-btn-cont,.woc-btn-deliver,.woc-btn-waze {
  flex: 1;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-main);
  text-align: center;
  display: inline-block;
  transition: all .2s;
}
.woc-btn-start { background: var(--green-dark); color: #fff; }
.woc-btn-cont  { background: #e3f2fd; color: #1565c0; }
.woc-btn-deliver { background: var(--yellow); color: var(--green-dark); }
.woc-btn-waze { background: #00bcd4; color: #fff; }
.woc-done-label { font-size: 13px; color: var(--text-light); }

/* Picking panel */
.pick-order-header {
  background: var(--white);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.poh-info { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.poh-num { font-size: 16px; font-weight: 900; color: var(--green-dark); }
.poh-customer { font-size: 14px; color: var(--text-light); }
.poh-progress { }
.poh-count { font-size: 13px; color: var(--green-dark); font-weight: 700; display: block; margin-bottom: 4px; }
.poh-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.poh-fill { height: 100%; background: var(--green-mid); border-radius: 4px; transition: width .3s; }

/* Pick items */
.pick-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pick-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border-radius: 12px;
  padding: 14px;
  border-right: 3px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: all .2s;
}
.pick-item.picked { border-right-color: var(--green-mid); background: #f1f8e9; }
.pick-item.missing { border-right-color: var(--red); background: #fff8e1; opacity: .75; }
.pi-check-area { cursor: pointer; flex-shrink: 0; }
.pi-checkbox {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all .2s;
}
.pi-checkbox.checked { background: var(--green-mid); border-color: var(--green-mid); color: #fff; }
.pi-info { flex: 1; }
.pi-name { font-size: 14px; font-weight: 700; color: var(--green-dark); }
.pi-qty { font-size: 12px; color: var(--text-light); }
.pi-missing-btn {
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  background: #fff0f0;
  border: 1px solid #ffcdd2;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: var(--font-main);
}
.pi-missing-tag { font-size: 11px; color: var(--red); font-weight: 700; }

/* Pick actions */
.pick-actions { display: flex; gap: 10px; }
.wa-btn-primary,.wa-btn-success,.wa-btn-danger,.wa-btn-outline {
  flex: 1;
  padding: 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: var(--font-main);
  transition: all .2s;
}
.wa-btn-primary { background: var(--green-dark); color: #fff; }
.wa-btn-success { background: var(--green-mid); color: #fff; }
.wa-btn-danger  { background: var(--red); color: #fff; }
.wa-btn-outline { background: none; border: 2px solid var(--border); color: var(--text-light); }

/* Issues */
.issue-card {
  background: var(--white);
  border-right: 3px solid var(--red);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
}
.ic-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.ic-order { font-size: 13px; font-weight: 700; color: var(--green-dark); }
.ic-time { font-size: 12px; color: var(--text-light); }
.ic-desc { font-size: 13px; color: #555; }

/* Worker modals */
.wa-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.wa-modal {
  background: var(--white);
  border-radius: 20px 20px 0 0;
  padding: 24px 20px 32px;
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}
.wam-title { font-size: 1.1rem; font-weight: 900; color: var(--green-dark); margin-bottom: 16px; }
.wam-field { margin-bottom: 14px; }
.wam-field label { display: block; font-size: 13px; font-weight: 700; color: var(--green-dark); margin-bottom: 6px; }
.wam-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-main);
  direction: rtl;
  outline: none;
}
.wam-options { display: flex; flex-direction: column; gap: 8px; }
.wam-option { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.wam-actions { display: flex; gap: 10px; margin-top: 16px; }
.wam-customer-info { margin-bottom: 16px; }
.dmi-row { font-size: 14px; padding: 5px 0; color: var(--green-dark); }
.dmi-row a { color: var(--green-mid); font-weight: 700; }

/* Worker toast */
.worker-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--green-dark);
  color: #fff;
  padding: 12px 24px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  z-index: 10000;
  opacity: 0;
  transition: all .3s;
  white-space: nowrap;
  max-width: 90vw;
}
.worker-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Worker empty */
.wa-empty { text-align: center; padding: 60px 20px; }
.wae-icon { font-size: 3rem; margin-bottom: 12px; }
.wa-empty p { color: var(--text-light); font-size: 14px; margin-bottom: 16px; }

/* ── ADMIN APP ── */
:root {
  --adm-bg: #f0f2f5;
  --adm-sidebar: #1a2332;
  --adm-sidebar-hover: rgba(255,255,255,.08);
  --adm-sidebar-active: rgba(255,255,255,.14);
  --adm-topbar: #fff;
  --adm-accent: #2196f3;
  --adm-green: #4caf50;
  --adm-red: #f44336;
  --adm-yellow: #ff9800;
  --adm-border: #e0e0e0;
  --adm-text: #1a2332;
  --adm-text-light: #757575;
}
.admin-app {
  display: flex;
  min-height: 100vh;
  background: var(--adm-bg);
  font-family: var(--font-main);
  margin-top: -4px;
}
.admin-sidebar {
  width: 220px;
  background: var(--adm-sidebar);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 200;
  transition: transform .3s ease;
}
.asb-header {
  padding: 20px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.asb-close {
  display: none;
  background: none;
  border: none;
  color: rgba(255,255,255,.5);
  font-size: 18px;
  cursor: pointer;
}
.asb-nav {
  flex: 1;
  padding: 12px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.asb-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  transition: all .2s;
  background: none;
  border: none;
  text-align: right;
  font-family: var(--font-main);
}
.asb-link:hover { background: var(--adm-sidebar-hover); color: #fff; }
.asb-link.active { background: var(--adm-sidebar-active); color: #fff; }
.asb-badge {
  background: var(--adm-red);
  color: #fff;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
}
.asb-footer { padding: 16px; border-top: 1px solid rgba(255,255,255,.06); }

/* Main area */
.admin-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.admin-topbar {
  background: var(--adm-topbar);
  border-bottom: 1px solid var(--adm-border);
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.atb-menu-btn {
  display: none;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--adm-text);
  padding: 6px;
}
.atb-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--adm-text);
  flex: 1;
}
.atb-actions { display: flex; align-items: center; gap: 12px; }
.atb-clock { font-size: 1.1rem; font-weight: 700; color: var(--adm-text); }
.atb-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: var(--font-main);
  transition: all .2s;
}
.atb-btn-primary { background: var(--adm-accent); color: #fff; }
.atb-btn-primary:hover { background: #1976d2; }

/* Panels */
.admin-panel { display: none; padding: 20px; }
.admin-panel.active { display: block; }

/* KPI grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.kpi-card {
  background: var(--white);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  border-right: 4px solid transparent;
}
.kpi-orders  { border-right-color: var(--adm-accent); }
.kpi-revenue { border-right-color: var(--adm-green); }
.kpi-pending { border-right-color: var(--adm-yellow); }
.kpi-delivery{ border-right-color: #9c27b0; }
.kpi-icon { font-size: 2rem; flex-shrink: 0; }
.kpi-num { font-size: 1.8rem; font-weight: 900; color: var(--adm-text); line-height: 1; }
.kpi-label { font-size: 13px; color: var(--adm-text-light); margin-top: 2px; }
.kpi-trend { font-size: 11px; font-weight: 700; margin-top: 4px; }
.kpi-trend.up { color: var(--adm-green); }
.kpi-trend.warning { color: var(--adm-yellow); }

/* Dashboard middle */
.dashboard-mid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.dash-card {
  background: var(--white);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.dc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dc-header h3 { font-size: 14px; font-weight: 700; color: var(--adm-text); }
.dc-refresh,.dc-action {
  font-size: 12px;
  color: var(--adm-accent);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-family: var(--font-main);
}

/* Status flow */
.status-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.sf-step { text-align: center; }
.sf-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0 auto 4px;
}
.sf-label { font-size: 11px; color: var(--adm-text-light); font-weight: 700; }
.sf-arrow { font-size: 16px; color: var(--adm-border); }
.pending-col  { background: #fff3e0; color: #e65100; }
.picking-col  { background: #e3f2fd; color: #1565c0; }
.ready-col    { background: #e8f5e9; color: #2e7d32; }
.delivery-col { background: #e1f5fe; color: #0277bd; }
.done-col     { background: #f5f5f5; color: #616161; }

/* Slot load bars */
.slot-load-title { font-size: 12px; font-weight: 700; color: var(--adm-text-light); margin-bottom: 8px; }
.slot-bars { display: flex; flex-direction: column; gap: 6px; }
.slb-row { display: flex; align-items: center; gap: 10px; }
.slb-label { font-size: 11px; color: var(--adm-text-light); min-width: 90px; }
.slb-bar-wrap { flex: 1; height: 8px; background: var(--adm-border); border-radius: 4px; overflow: hidden; }
.slb-bar-fill { height: 100%; border-radius: 4px; background: var(--adm-green); transition: width .5s; }
.slb-bar-fill.high { background: var(--adm-yellow); }
.slb-bar-fill.full { background: var(--adm-red); }
.slb-count { font-size: 11px; font-weight: 700; color: var(--adm-text); min-width: 28px; text-align: left; }

/* Workers live */
.workers-live { display: flex; flex-direction: column; gap: 0; }
.wl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--adm-border);
}
.wl-row:last-child { border-bottom: none; }
.wl-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wl-name { font-size: 13px; font-weight: 700; color: var(--adm-text); }
.wl-role { font-size: 11px; color: var(--adm-text-light); }
.wl-info { flex: 1; }
.wl-status { font-size: 12px; color: var(--adm-text-light); display: flex; align-items: center; gap: 5px; }
.wl-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wl-status-dot.picking { background: var(--adm-accent); }
.wl-status-dot.delivering { background: var(--adm-green); }
.wl-status-dot.waiting { background: var(--adm-yellow); }
.wl-status-dot.available { background: #bdbdbd; }
.wl-load { font-size: 11px; color: var(--adm-text-light); min-width: 70px; text-align: left; }

/* Orders table */
.admin-orders-table { background: var(--white); border-radius: 12px; overflow: auto; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.aot-header,.aot-row {
  display: grid;
  grid-template-columns: 60px 1fr 80px 1fr 80px 80px 80px 70px 80px;
  gap: 0;
  align-items: center;
  padding: 10px 16px;
  font-size: 13px;
}
.aot-header {
  background: #f8f9fa;
  font-weight: 700;
  color: var(--adm-text-light);
  border-bottom: 1px solid var(--adm-border);
  font-size: 12px;
}
.aot-row {
  border-bottom: 1px solid var(--adm-border);
  transition: background .15s;
}
.aot-row:hover { background: #fafafa; }
.aot-row:last-child { border-bottom: none; }
.aot-urgent { background: #fff8e1; }
.aot-num { font-weight: 700; color: var(--adm-accent); }
.aot-slot { font-size: 12px; color: var(--adm-text-light); }
.aot-worker.unassigned { color: var(--adm-red); font-weight: 700; }
.aot-total { font-weight: 700; color: var(--adm-text); }
.aot-actions { display: flex; gap: 4px; }
.aot-btn {
  width: 28px; height: 28px;
  border: 1px solid var(--adm-border);
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  transition: background .15s;
}
.aot-btn:hover { background: #f0f0f0; }
.aot-status-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  background: #f5f5f5;
  color: var(--adm-text-light);
}

/* Toolbar */
.ap-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ap-search {
  flex: 1;
  min-width: 200px;
  padding: 9px 14px;
  border: 1.5px solid var(--adm-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-main);
  direction: rtl;
  outline: none;
}
.ap-search:focus { border-color: var(--adm-accent); }
.ap-filter-sel {
  padding: 9px 12px;
  border: 1.5px solid var(--adm-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font-main);
  direction: rtl;
  cursor: pointer;
  outline: none;
}
.ap-title { font-size: 1.1rem; font-weight: 700; color: var(--adm-text); flex: 1; }

/* Workers grid */
.workers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.worker-card {
  background: var(--white);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  position: relative;
  transition: box-shadow .2s;
}
.worker-card:hover { box-shadow: var(--shadow); }
.worker-card.inactive { opacity: .6; }
.wc-header { display: flex; justify-content: center; margin-bottom: 10px; position: relative; }
.wc-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 1.5rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wc-status-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--white);
  position: absolute;
  bottom: 0; right: calc(50% - 34px);
}
.wc-status-dot.active { background: var(--adm-green); }
.wc-status-dot.inactive { background: #bdbdbd; }
.wc-name { font-size: 15px; font-weight: 700; color: var(--adm-text); margin-bottom: 2px; }
.wc-role { font-size: 12px; color: var(--adm-text-light); margin-bottom: 6px; }
.wc-cap { font-size: 12px; color: var(--adm-text-light); margin-bottom: 4px; }
.wc-today { font-size: 12px; margin-bottom: 12px; }
.wc-actions { display: flex; gap: 8px; }
.wc-btn {
  flex: 1;
  padding: 7px;
  border: 1px solid var(--adm-border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: var(--white);
  font-family: var(--font-main);
  transition: background .15s;
}
.wc-btn:hover { background: #f0f0f0; }

/* Shifts calendar */
.shifts-calendar { background: var(--white); border-radius: 12px; overflow: auto; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.sc-header { display: grid; grid-template-columns: 100px repeat(6, 1fr); background: #f8f9fa; border-bottom: 1px solid var(--adm-border); }
.sc-day-col,.sc-time-col,.sc-cell {
  padding: 12px 8px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  border-right: 1px solid var(--adm-border);
}
.sc-row { display: grid; grid-template-columns: 100px repeat(6, 1fr); border-bottom: 1px solid var(--adm-border); }
.sc-row:last-child { border-bottom: none; }
.sc-cell { font-weight: 400; color: var(--adm-text-light); padding: 8px; }
.sc-cell.has-shift { background: #e8f5e9; }
.sc-worker { font-size: 11px; font-weight: 700; color: var(--green-dark); }
.sc-add { background: none; border: 1.5px dashed var(--adm-border); border-radius: 6px; width: 100%; padding: 6px; font-size: 16px; color: var(--adm-border); cursor: pointer; }
.sc-add:hover { border-color: var(--adm-accent); color: var(--adm-accent); }

/* Reports */
.reports-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.report-card {
  background: var(--white);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.report-card h3 { font-size: 13px; font-weight: 700; color: var(--adm-text-light); margin-bottom: 10px; }
.rc-kpi { font-size: 1.6rem; font-weight: 900; color: var(--adm-text); margin-bottom: 12px; }
.rc-kpi span { font-size: 12px; color: var(--adm-text-light); font-weight: 400; }
.rc-sub { font-size: 11px; color: var(--adm-text-light); margin-top: 8px; }
.rc-chart-bar { display: flex; align-items: flex-end; gap: 4px; height: 80px; }
.rcb-bar { flex: 1; background: var(--adm-accent); border-radius: 3px 3px 0 0; min-height: 8px; opacity: .7; }
.rcb-green { background: var(--adm-green); }
.rc-donut-wrap { position: relative; width: 80px; height: 80px; margin: 0 auto; }
.rc-donut { width: 80px; height: 80px; transform: rotate(-90deg); }
.rc-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: var(--adm-text);
}
.workers-perf { display: flex; flex-direction: column; gap: 8px; }
.wp-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.wp-name { flex: 1; color: var(--adm-text); font-weight: 700; }
.wp-orders { color: var(--adm-text-light); font-size: 12px; }
.wp-pct { font-weight: 700; color: var(--adm-green); }
.top-products { display: flex; flex-direction: column; gap: 0; }
.tp-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--adm-border); font-size: 13px; }
.tp-row:last-child { border-bottom: none; }
.tp-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--green-light); color: var(--green-dark); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tp-name { flex: 1; color: var(--adm-text); font-weight: 700; }
.tp-qty { color: var(--adm-text-light); font-size: 12px; }
.tp-rev { font-weight: 700; color: var(--adm-green); }
.apr-btn { padding: 6px 14px; border: 1.5px solid var(--adm-border); border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font-main); transition: all .2s; background: none; }
.apr-btn.active { background: var(--adm-accent); border-color: var(--adm-accent); color: #fff; }

/* Alerts */
.alerts-list { display: flex; flex-direction: column; gap: 12px; }
.alert-card {
  background: var(--white);
  border-radius: 14px;
  padding: 18px;
  border-right: 4px solid;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.alert-urgent { border-right-color: var(--adm-red); }
.alert-warning { border-right-color: var(--adm-yellow); }
.alc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.alc-icon { font-size: 1.2rem; }
.alc-title { font-size: 14px; font-weight: 700; color: var(--adm-text); flex: 1; }
.alc-time { font-size: 12px; color: var(--adm-text-light); }
.alc-desc { font-size: 13px; color: #555; margin-bottom: 14px; line-height: 1.5; }
.alc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.alc-btn-primary { padding: 8px 16px; background: var(--adm-accent); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-main); }
.alc-btn-outline { padding: 8px 16px; border: 1.5px solid var(--adm-border); background: none; color: var(--adm-text); border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-main); }

/* Admin sidebar overlay */
.admin-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 199; }
.admin-sidebar-overlay.open { display: block; }

/* ================================================================
   ADMIN + WORKER RESPONSIVE
   ================================================================ */

/* Worker – time-slot group headers */
.wo-slot-header {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 900;
  color: var(--green-dark, #2e7d32);
  background: var(--green-light, #e8f5e9);
  border-radius: 8px;
  margin: 12px 12px 4px;
  letter-spacing: .02em;
}
.wo-slot-count { font-weight: 400; color: #666; }

/* ── Tablet (≤ 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .kpi-grid        { grid-template-columns: repeat(2, 1fr); }
  .reports-grid    { grid-template-columns: repeat(2, 1fr); }
  .workers-grid    { grid-template-columns: repeat(2, 1fr); }
  .dashboard-mid   { grid-template-columns: 1fr; }
  .admin-orders-table,
  .aot-header,
  .aot-row         { min-width: 760px; }
  .admin-orders-table { overflow-x: auto; }
}

/* ── Mobile (≤ 768px) ──────────────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar collapses off-screen on mobile */
  .admin-sidebar {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    transform: translateX(100%);
    z-index: 200;
    width: 240px;
  }
  .admin-sidebar.open { transform: translateX(0); }
  .asb-close  { display: flex; }
  .atb-menu-btn { display: flex; }

  .admin-main { min-width: 0; }
  .admin-panel { padding: 12px; }

  /* KPI grid → 2 col on mobile */
  .kpi-grid     { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi-card     { padding: 14px; gap: 10px; }
  .kpi-num      { font-size: 1.4rem; }
  .kpi-icon     { font-size: 1.5rem; }

  /* Dashboard mid → stack */
  .dashboard-mid { grid-template-columns: 1fr; gap: 12px; }

  /* Reports → 2 col */
  .reports-grid  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .workers-grid  { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Orders table scrolls horizontally */
  .admin-orders-table { overflow-x: auto; border-radius: 8px; }
  .aot-header, .aot-row {
    min-width: 700px;
    font-size: 12px;
    padding: 8px 12px;
  }

  /* Toolbar wraps cleanly */
  .ap-toolbar { flex-wrap: wrap; gap: 8px; }
  .ap-search  { min-width: 0; }

  /* Schedule grid scrolls horizontally */
  .shifts-calendar { overflow-x: auto; }
  .sc-header,
  .sc-row,
  .sc-shift-header { min-width: 560px; }

  /* Admin topbar – hide clock on small screens */
  .atb-clock { display: none; }

  /* Ops KPI strip wraps */
  .ops-kpi-strip { gap: 8px; }
  .ops-kpi-card  { min-width: 90px; padding: 10px 12px; }
  .ops-kpi-num   { font-size: 1.1rem; }
}

/* ── Small mobile (≤ 480px) ────────────────────────────────── */
@media (max-width: 480px) {
  .kpi-grid     { grid-template-columns: 1fr 1fr; }
  .reports-grid { grid-template-columns: 1fr; }
  .workers-grid { grid-template-columns: 1fr; }
  .admin-topbar { padding: 0 12px; gap: 8px; }
  .atb-title    { font-size: 0.95rem; }
  .kpi-card     { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ── Worker app – better mobile ────────────────────────────── */
@media (max-width: 480px) {
  .wa-topbar { padding: 10px 12px; gap: 8px; }
  .wa-name   { font-size: 14px; }
  .wa-tabs   { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .wa-tabs::-webkit-scrollbar { display: none; }
  .wa-tab    { flex-shrink: 0; }
  .wo-card   { margin: 8px 10px; }
  .woc-header,
  .woc-customer { flex-wrap: wrap; gap: 4px; }
}

/* ════════════════════════════════════════════════════════════════
   ADMIN DASHBOARD – SMALL MOBILE (≤480px) RESPONSIVE FIX
   Prevents overflow, ensures all form fields are visible
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  /* ── Global admin container fixes ── */
  .admin-app {
    display: flex;
    overflow-x: hidden;
  }

  .admin-sidebar {
    width: 100%;
    max-width: 280px;
    overflow-x: hidden;
  }

  /* ── Admin main content ── */
  .admin-main {
    min-width: 0;
    width: 100%;
  }

  .admin-panel {
    padding: 10px;
    overflow-x: hidden;
    width: 100%;
  }

  /* ── Top bar fixes ── */
  .admin-topbar {
    padding: 0 8px;
    height: auto;
    flex-wrap: wrap;
    gap: 6px;
    overflow-x: hidden;
  }

  .atb-title {
    font-size: 0.9rem;
    min-width: 0;
  }

  .atb-actions {
    width: 100%;
    gap: 6px;
  }

  /* ── Modal fixes – prevent overflow ── */
  #manual-order-modal,
  #worker-modal,
  #view-order-modal,
  #admin-pick-modal,
  #route-modal {
    padding: 10px !important;
  }

  .mo-modal-body,
  #worker-modal > div,
  #view-order-modal > div,
  #admin-pick-modal > div,
  #route-modal > div {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    padding: 12px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
  }

  /* ── Zone modal ── */
  #zone-modal {
    padding: 10px !important;
  }

  #zone-modal > div {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
  }

  /* ── Form field grids – stack vertically ── */
  .mo-fields-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .mo-fields-grid input,
  .mo-fields-grid select {
    grid-column: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Manual order lines grid ── */
  .mo-line-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .mo-line-grid > * {
    width: 100% !important;
  }

  /* ── Worker modal form ── */
  #worker-modal > div > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  #worker-modal input,
  #worker-modal select {
    width: 100% !important;
    box-sizing: border-box !important;
    grid-column: auto !important;
  }

  /* ── All form inputs ensure full width ── */
  .ap-search,
  .ap-filter-sel,
  .wam-input {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* ── Toolbar wraps tightly ── */
  .ap-toolbar {
    flex-direction: column;
    gap: 6px;
  }

  .ap-toolbar input[type="date"] {
    width: 100%;
  }

  /* ── Modal titles and headers ── */
  .mo-modal-body > div:first-child,
  #worker-modal > div > div:first-child,
  #view-order-modal > div > div:first-child,
  #admin-pick-modal > div > div:first-child,
  #route-modal > div > div:first-child {
    flex-direction: column;
    gap: 10px;
  }

  .mo-modal-body > div:first-child h3,
  #worker-modal > div > div:first-child h3,
  #view-order-modal > div > div:first-child h3,
  #admin-pick-modal > div > div:first-child h3,
  #route-modal > div > div:first-child h3 {
    width: 100%;
    word-break: break-word;
  }

  /* ── Modal close button ── */
  .mo-modal-body > div:first-child button,
  #worker-modal > div > div:first-child button,
  #view-order-modal > div > div:first-child button,
  #admin-pick-modal > div > div:first-child button,
  #route-modal > div > div:first-child button {
    flex-shrink: 0;
  }

  /* ── Modal action buttons ── */
  .mo-modal-body + div,
  .atb-btn,
  .alc-btn-primary,
  .alc-btn-outline {
    width: 100%;
    min-width: 0;
  }

  /* ── Modal button rows ── */
  .mo-modal-body > div:last-child,
  #view-order-modal > div > div:last-child,
  #admin-pick-modal > div > div:last-child,
  #route-modal > div > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .mo-modal-body > div:last-child button,
  #view-order-modal > div > div:last-child button,
  #admin-pick-modal > div > div:last-child button,
  #route-modal > div > div:last-child button {
    width: 100%;
  }

  /* ── Zone modal form fields ── */
  .wam-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .wam-field {
    width: 100%;
  }

  .wam-form > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .wam-form > div input,
  .wam-form > div select {
    width: 100% !important;
  }

  /* ── Zone day checkboxes – wrap properly ── */
  .wam-field label {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    margin-right: 8px;
  }

  /* ── KPI cards – single column on smallest ── */
  .kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  /* ── Reports grid – single column ── */
  .reports-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Workers grid – single column ── */
  .workers-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Orders table – ensure scrollable ── */
  .admin-orders-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .aot-header, .aot-row {
    min-width: 600px;
    white-space: nowrap;
  }

  /* ── Sidebar never exceeds screen ── */
  .admin-sidebar.open {
    width: calc(100vw - 0px);
    max-width: 280px;
    transform: translateX(0);
  }

  /* ── View order modal grid ── */
  .vom-grid {
    grid-template-columns: 1fr !important;
    gap: 6px 0 !important;
  }

  /* ── Ensure all text areas fit ── */
  textarea,
  .wam-input[rows] {
    width: 100% !important;
    box-sizing: border-box !important;
  }

}

/* ════════════════════════════════════════════════════════════════
   ADMIN DASHBOARD – VERY SMALL MOBILE (≤320px) TEXT SAFETY
   Prevent long Hebrew text from overflowing viewport
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 320px) {

  /* ── Force text wrapping for Hebrew long words ── */
  .admin-app,
  .admin-sidebar,
  .admin-main,
  .admin-panel,
  .admin-topbar {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  /* ── Modal safety rules ── */
  .mo-modal-body,
  #worker-modal > div,
  #view-order-modal > div,
  #admin-pick-modal > div,
  #route-modal > div,
  #zone-modal > div {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100% !important;
  }

  /* ── Form fields force wrapping ── */
  .mo-fields-grid,
  .mo-line-grid {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  /* ── Input elements safety ── */
  input,
  select,
  textarea,
  .ap-search,
  .ap-filter-sel,
  .wam-input {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100% !important;
  }

  /* ── Button safety ── */
  button {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* ── Label and text safety ── */
  label,
  span,
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    word-break: break-word;
    overflow-wrap: break-word;
  }

}


/* ================================================================
   FULL MOBILE RESPONSIVE OVERHAUL
   All breakpoints – exhaustive fixes
   ================================================================ */

/* Global mobile fixes */
/* Touch & tap improvements */

/* ── מחיר לק"ג ── */
.pc-unit {
  font-size: 11px;
  color: var(--text-light);
  font-weight: 600;
  background: var(--cream);
  padding: 2px 6px;
  border-radius: 6px;
  margin-right: 4px;
  white-space: nowrap;
}

/* ── ₪ מחיר בסגנון עברי ── */
.pc-price, .pc-price-sale, .prod-price {
  direction: ltr;
  unicode-bidi: embed;
}

/* ── כרטיס מוצר - שורת מחיר משופרת ── */
.pc-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* ================================================================
   NEW CLEAN HEADER – ONE ROW
   ================================================================ */

/* Announcement bar */
.ann-bar {
  background: var(--green-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 9px 48px 9px 16px;
  line-height: 1.4;
  position: relative;
}
.ann-bar strong { font-weight: 900; }
.ann-close {
  position: absolute;
  top: 50%; right: 14px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 15px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.ann-close:hover { color: #fff; }

/* Desktop header – single row */
.site-header { background: var(--white); box-shadow: 0 2px 12px rgba(0,0,0,.1); position: sticky; top: 0; z-index: 300; }
.dh-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.dh-logo { flex-shrink: 0; }
.dh-logo,
.dh-logo a {
  background: #fff !important;
  background-image: none !important;
  overflow: hidden !important;
  height: 44px !important;
  max-height: 44px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dh-logo img {
  max-height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

/* Desktop nav */
.dh-nav {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  justify-content: center;
  background: var(--white);
}
.dhn-item { position: relative; }
.dhn-link {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .2s, border-color .2s;
  text-decoration: none;
}
.dhn-link:hover { color: var(--green-dark); border-bottom-color: var(--green-dark); }
.dhn-sale { color: var(--red) !important; }

.site-header,
.dh-nav,
.dh-inner,
.dh-right,
.dh-search,
.dhn-item,
.dhn-link {
  background: #fff !important;
  background-image: none !important;
}
.site-header::before,
.site-header::after,
.dh-nav::before,
.dh-nav::after,
.dh-inner::before,
.dh-inner::after,
.dh-right::before,
.dh-right::after,
.dh-search::before,
.dh-search::after {
  display: none !important;
  content: none !important;
}

/* Dropdown */
.dhn-drop {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  min-width: 200px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .2s;
  z-index: 400;
  border: 1px solid var(--border);
}
.dhn-item:hover .dhn-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.dhn-drop-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
  padding: 6px 16px 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.dhn-drop-link {
  display: block;
  padding: 9px 16px;
  font-size: 14px;
  color: var(--text);
  transition: background .15s, color .15s;
}
.dhn-drop-link:hover { background: var(--cream); color: var(--green-dark); }
.dhn-drop-all { font-weight: 700; color: var(--green-dark); border-bottom: 1px solid var(--border); margin-bottom: 2px; }

/* Right side */
.dh-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.dh-search {
  position: relative;
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: visible !important;
  z-index: 99999;
  transition: border-color .2s;
}
.dh-right,
.dh-inner,
.site-header,
.header-wrapper {
  overflow: visible !important;
}
.dh-search:focus-within { border-color: var(--green-mid); }
.dh-search input {
  width: 160px;
  padding: 7px 12px;
  border: none;
  outline: none;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  font-family: var(--font-main);
  direction: rtl;
  background: transparent;
}
.dh-search button {
  padding: 7px 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  display: flex;
  align-items: center;
}
.dh-search button:hover { color: var(--green-dark); }

.predictive-search-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  width: 420px;
  max-width: 90vw;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  z-index: 9999999;
  direction: rtl;
  text-align: right;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}

.predictive-search-loading,
.predictive-search-empty {
  padding: 18px;
  text-align: center;
  font-weight: 700;
  color: #244019;
}

.predictive-search-results {
  display: flex;
  flex-direction: column;
}

.predictive-search-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-bottom: 1px solid #eee;
  transition: background .2s ease;
}

.predictive-search-item:hover {
  background: #f8f8f8;
}

.predictive-search-thumb {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #f5f5f5;
}

.predictive-search-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.predictive-search-content {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.predictive-search-title {
  font-size: 16px;
  font-weight: 800;
  color: #213d16;
  line-height: 1.35;
  margin-bottom: 5px;
}

.predictive-search-vendor {
  font-size: 12px;
  color: #777;
  margin-bottom: 4px;
}

.predictive-search-price {
  font-size: 15px;
  font-weight: 800;
  color: #f05a28;
}

.predictive-search-no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.predictive-search-all-results {
  width: calc(100% - 28px);
  margin: 14px;
  border: 0;
  border-radius: 999px;
  background: #f05a28;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 18px;
  cursor: pointer;
}

.predictive-search-all-results:hover {
  filter: brightness(.95);
}

.dh-account { display: flex; align-items: center; gap: 6px; }
.dh-acc-link { font-size: 13px; font-weight: 700; color: var(--text-light); transition: color .2s; }
.dh-acc-link:hover { color: var(--green-dark); }
.dh-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 10px 5px 12px;
  border: 1.5px solid rgba(46,125,79,.24);
  border-radius: 999px;
  background: var(--green-light);
  color: var(--green-dark);
  transition: border-color .2s, background .2s;
}
.dh-profile-link:hover {
  background: #fff;
  border-color: var(--green-mid);
  color: var(--green-dark);
}
.dh-profile-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.dh-profile-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.05;
}
.dh-profile-status {
  font-size: 10px;
  font-weight: 900;
  color: var(--green-mid);
}
.dh-profile-name {
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
  color: var(--green-dark);
}
.dh-acc-reg {
  background: var(--green-dark);
  color: #fff !important;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
}
.dh-acc-login { text-decoration: underline; }

.dh-cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: var(--yellow);
  border-radius: 50%;
  color: var(--green-dark);
  transition: background .2s;
  flex-shrink: 0;
}
.dh-cart:hover { background: #f0b020; }
.dh-cart .cart_num {
  position: absolute;
  top: -3px; left: -3px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  width: 17px; height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

/* ================================================================
   COLLECTION PAGE – NEW COMPACT DESIGN
   ================================================================ */

/* Title bar (replaces big hero) */
.col-title-bar {
  background: var(--green-dark);
  padding: 18px 0;
}
.col-title-bar .container { display: flex; flex-direction: column; gap: 6px; }
.breadcrumb-inline { font-size: 12px; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 6px; }
.breadcrumb-inline a { color: rgba(255,255,255,.6); }
.breadcrumb-inline a:hover { color: #fff; }
.col-title-h1 {
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.col-title-count {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,.6);
}

/* Sub-tag pills */
.col-subtag-bar {
  background: var(--white);
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  direction: rtl;
}
.col-subtag-bar::-webkit-scrollbar { display: none; }
.col-subtag-bar .container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  flex-wrap: nowrap;
}
.col-subtag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-light);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  white-space: nowrap;
  transition: all .2s;
  background: var(--white);
  text-decoration: none;
  flex-shrink: 0;
}
.col-subtag:hover { border-color: var(--green-dark); color: var(--green-dark); }
.col-subtag.active {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #fff;
}

/* ================================================================
   MOBILE HEADER adjustments for new single-row
   ================================================================ */
@media(max-width:768px) {
  .ann-bar { font-size: 11px; padding: 7px 36px 7px 12px; }
  .col-title-h1 { font-size: 1.3rem; }
  .col-subtag-bar .container { padding: 10px 14px; gap: 6px; }
  .col-subtag { font-size: 12px; padding: 6px 12px; }
}
@media(max-width:480px) {
  .col-title-bar { padding: 14px 0; }
  .col-title-h1 { font-size: 1.1rem; }
}

/* ================================================================
   PRODUCE ORDER BOX – Smart ordering for fruits/vegetables
   ================================================================ */

.produce-order-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.produce-order-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 14px;
  text-align: right;
}

.produce-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.produce-mode-btn {
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.produce-mode-btn:hover {
  border-color: var(--green-mid);
  color: var(--green-mid);
}

.produce-mode-btn.selected {
  background: var(--green-mid);
  border-color: var(--green-mid);
  color: var(--white);
}

.produce-mode-content {
  margin-bottom: 14px;
}

.produce-input-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.produce-input-row label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}

.produce-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  border-radius: 10px;
  padding: 4px;
}

.produce-stepper button {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--white);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--green-dark);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.produce-stepper button:hover {
  background: var(--green-mid);
  color: var(--white);
}

.produce-stepper button:active {
  transform: scale(0.95);
}

.produce-stepper input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 700;
  color: var(--green-dark);
  text-align: center;
  outline: none;
  direction: ltr;
  unicode-bidi: embed;
}

.produce-stepper input::placeholder {
  color: var(--text-light);
}

.produce-estimate {
  font-size: 13px;
  color: var(--text-light);
  background: var(--green-light);
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--green-mid);
  text-align: right;
}

.produce-help-text {
  font-size: 12px;
  color: var(--text-light);
  text-align: right;
  padding: 10px 0;
  line-height: 1.5;
  font-style: italic;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .produce-order-box {
    padding: 16px;
    margin-bottom: 16px;
  }

  .produce-order-title {
    font-size: 15px;
    margin-bottom: 12px;
  }

  .produce-mode-toggle {
    gap: 8px;
    margin-bottom: 14px;
  }

  .produce-mode-btn {
    padding: 10px 14px;
    font-size: 13px;
  }

  .produce-stepper button {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .produce-stepper input {
    font-size: 15px;
  }

  .produce-estimate {
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* ================================================================
   PRODUCE QUICK PICKER – CARD-BASED INLINE EXPANSION
   ================================================================ */

/* Product card when it has a produce quick picker */
.product-card.produce-card {
  position: relative;
}

/* Expanded card state */
.product-card.produce-card-expanded {
  grid-column: 1 / -1;
  border-radius: 14px;
  box-shadow: var(--shadow);
  background: var(--white);
}

.product-card.produce-card-expanded .pc-image {
  display: flex;
  float: left;
  width: 25%;
  margin-right: 0;
  padding-right: 16px;
  border-right: 1px solid var(--border);
}

.product-card.produce-card-expanded .pc-body {
  padding: 16px;
}

/* Quick picker panel – hidden by default */
.produce-quick-picker,
.regular-quick-picker {
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--cream);
  border-radius: 10px;
  margin-top: 12px;
  border: 1px solid var(--green-mid);
}

/* Show when card is expanded */
.product-card.produce-card-expanded .produce-quick-picker,
.produce-quick-picker.open,
.regular-quick-picker.open {
  display: flex;
}

.pqp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(33,53,25,.15);
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
}

.pqp-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-light);
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s;
}

.pqp-close:hover {
  color: var(--green-dark);
}

.pqp-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pqp-mode-btn {
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  white-space: nowrap;
}

.pqp-mode-btn:hover {
  border-color: var(--green-mid);
  color: var(--green-mid);
}

.pqp-mode-btn.selected {
  background: var(--green-mid);
  border-color: var(--green-mid);
  color: var(--white);
}

.pqp-input-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pqp-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--green-dark);
}

.pqp-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border-radius: 8px;
  padding: 3px;
  border: 1px solid var(--border);
}

.pqp-stepper button {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
  cursor: pointer;
  transition: all 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pqp-stepper button:hover {
  background: var(--green-light);
}

.pqp-stepper button:active {
  transform: scale(0.9);
}

.pqp-stepper input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
  text-align: center;
  outline: none;
  direction: ltr;
  unicode-bidi: embed;
  min-width: 0;
}

.pqp-estimate {
  font-size: 11px;
  color: var(--text-light);
  background: var(--white);
  padding: 6px 8px;
  border-radius: 6px;
  text-align: center;
  border: 1px solid var(--border);
}

.pqp-estimate-highlight {
  font-weight: 700;
  color: var(--green-mid);
}

.pqp-actions {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(33,53,25,.15);
}

.pqp-add-btn {
  flex: 1;
  padding: 10px 12px;
  background: var(--green-dark);
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-main);
  transition: background .2s;
  text-align: center;
}

.pqp-add-btn:hover {
  background: var(--green-mid);
}

.pqp-add-btn:disabled {
  background: var(--text-light);
  cursor: not-allowed;
  opacity: .6;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .product-card.produce-card-expanded .pc-image {
    width: 30%;
  }
}

@media (max-width: 768px) {
  .product-card.produce-card-expanded {
    grid-column: 1 / -1;
    display: block;
    padding: 12px;
  }

  .product-card.produce-card-expanded .pc-image {
    width: 100%;
    float: none;
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
    padding-bottom: 12px;
  }

  .product-card.produce-card-expanded .pc-body {
    padding: 0;
  }

  .produce-quick-picker {
    padding: 12px;
    margin-top: 8px;
  }

  .pqp-modes {
    gap: 6px;
  }

  .pqp-mode-btn {
    font-size: 11px;
    padding: 7px 8px;
  }

  .pqp-stepper button {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .pqp-stepper input {
    font-size: 13px;
  }
}

/* ──────────────────────────────────────────────────────────────
   PRODUCE QUICK PICKER – classes missing from initial build
   ================================================================ */

/* כותרת הפיקר */
.pqp-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0;
}

/* תוכן מצב (מחיר לק"ג / לפי יחידות) */
.pqp-mode-content {
  padding-top: 10px;
}

/* שורת input (label + stepper) */
.pqp-input-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

/* label */
.pqp-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

/* טקסט עזרה */
.pqp-help-text {
  font-size: 11px;
  color: var(--text-light);
  margin: 6px 0 8px;
  line-height: 1.4;
}

/* ספן מחיר בתוך כפתור הוספה */
.pqp-price {
  font-weight: 700;
}

/* מצב selected ל-pqp-modes (התאמה לclass הקיים .pqp-mode-toggle) */
.pqp-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

/* עיצוב כפתורי produce-quick-pick בכרטיס */
.pc-atc-btn.produce-quick-pick {
  width: 100%;
}

@media (max-width: 768px) {
  .pqp-mode-content {
    padding-top: 8px;
  }
  .pqp-help-text {
    font-size: 10px;
  }
}

/* ================================================================
   CART DRAWER – Desktop only (≥1024px)
   ================================================================ */

/* Overlay – desktop: invisible, no pointer blocking */
.cart-drawer-overlay {
  display: none; /* mobile: always hidden (handled below too) */
}
@media (min-width: 1024px) {
  .cart-drawer-overlay { display: none !important; }
}

/* Drawer panel – slides in from LEFT, content shifts right */
.cart-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  height: 100%;
  width: 400px;
  max-width: 90vw;
  background: var(--white);
  z-index: 500;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 4px 0 30px rgba(0, 0, 0, 0.15);
}
.cart-drawer.open { transform: translateX(0); }

/* Main content shifts right when drawer is open (desktop only) */
@media (min-width: 1024px) {
  body.cart-drawer-open #main-content {
    margin-left: 400px;
    transition: margin-left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  #main-content {
    transition: margin-left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* Always hidden on mobile */
@media (max-width: 1023px) {
  .cart-drawer,
  .cart-drawer-overlay {
    display: none !important;
  }
}

/* Header */
.cd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: var(--green-dark);
  color: #fff;
  flex-shrink: 0;
}
.cd-title {
  font-size: 1rem;
  font-weight: 900;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}
.cd-count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 700;
}
.cd-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 16px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  font-family: var(--font-main);
  flex-shrink: 0;
}
.cd-close:hover { background: rgba(255, 255, 255, 0.25); }

/* Scrollable items list */
.cd-items {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.cd-items::-webkit-scrollbar { width: 4px; }
.cd-items::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Single item row */
.cd-item {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.cd-item:last-child { border-bottom: none; }
.cd-item-img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--cream);
  flex-shrink: 0;
}
.cd-item-img-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.cd-item-info { flex: 1; min-width: 0; }
.cd-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.3;
  margin-bottom: 3px;
  display: block;
  text-decoration: none;
}
.cd-item-title:hover { color: var(--green-mid); }
.cd-item-variant { font-size: 11px; color: var(--text-light); margin-bottom: 4px; }
.cd-item-props { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.cd-item-prop {
  font-size: 10px;
  background: var(--cream);
  color: var(--green-dark);
  padding: 2px 6px;
  border-radius: 8px;
}
.cd-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.cd-item-price { font-size: 14px; font-weight: 900; color: var(--green-dark); }
.cd-item-remove {
  font-size: 11px;
  color: var(--text-light);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-main);
  transition: color 0.2s;
}
.cd-item-remove:hover { color: var(--red); }

/* Empty state */
.cd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-light);
  gap: 12px;
}
.cd-empty-icon { font-size: 3rem; }
.cd-empty p { font-size: 14px; margin: 0; }

/* Footer */
.cd-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--white);
}
.cd-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 900;
  color: var(--green-dark);
  margin-bottom: 12px;
}
.cd-total-price { font-size: 18px; }
.cd-checkout-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: var(--red);
  color: #fff;
  text-align: center;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  transition: background 0.2s;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.cd-checkout-btn:hover { background: var(--red-hover); color: #fff; }
.cd-continue-link {
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--green-mid);
  font-weight: 700;
  text-decoration: none;
}
.cd-continue-link:hover { text-decoration: underline; }

/* Quantity / weight / units stepper inside drawer */
.cd-qty-ctrl {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
  margin-top: 8px;
  width: fit-content;
}
.cd-qty-minus,
.cd-qty-plus {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--bg-topbar);
  color: var(--green-dark);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  font-family: var(--font-main);
  flex-shrink: 0;
}
.cd-qty-minus:hover,
.cd-qty-plus:hover { background: var(--green-light); }
.cd-qty-minus:active,
.cd-qty-plus:active { transform: scale(0.9); }
.cd-qty-val {
  min-width: 52px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
  padding: 0 8px;
  border-right: 1.5px solid var(--border);
  border-left: 1.5px solid var(--border);
  line-height: 30px;
  direction: ltr;
  unicode-bidi: embed;
  white-space: nowrap;
}
.cd-estimate {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 4px;
  padding: 4px 6px;
  background: var(--cream);
  border-radius: 6px;
  display: inline-block;
}

/* Mode toggle (ק"ג / יחידות) inside cart drawer */
.cd-produce-edit { margin-top: 8px; }
.cd-mode-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.cd-mode-btn {
  flex: 1;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--bg-topbar);
  color: var(--text-light);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.cd-mode-btn.active {
  background: var(--green-dark);
  color: #fff;
  border-color: var(--green-dark);
}

  
  .psi-image {
    width: 45px;
    height: 45px;
  }
  
  .psi-title {
    font-size: 13px;
  }
  
  .psi-price {
    font-size: 13px;
  }
}

/* Header logo override to show tari-plus-logo and remove legacy logo artifacts */
.tp-main-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.tp-main-logo img{
  width:170px;
  height:auto;
  display:block;
  object-fit:contain;
}

.site-header,
.dh-inner,
.dh-logo{
  overflow:visible !important;
  background:#fff !important;
  background-image:none !important;
}

.site-header::before,
.site-header::after,
.dh-inner::before,
.dh-inner::after,
.dh-logo::before,
.dh-logo::after{
  display:none !important;
  content:none !important;
  background:none !important;
}

@media (max-width: 768px){
  .tp-main-logo img{
    width:110px;
    max-width:110px;
  }
}

/* Delivery Modal */
.delivery-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.delivery-modal {
  background: var(--white);
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}

.delivery-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.delivery-modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--green-dark);
}

.delivery-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-light);
  padding: 4px;
  border-radius: 4px;
  transition: background .2s;
}

.delivery-modal-close:hover {
  background: var(--cream);
  color: var(--text);
}

.delivery-modal-body {
  padding: 24px;
}

.delivery-modal-body p {
  margin: 0 0 16px 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
}

.delivery-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
  background: var(--white);
  color: var(--text);
  direction: rtl;
}

.delivery-search-input:focus {
  outline: none;
  border-color: var(--green-mid);
  box-shadow: 0 0 0 4px rgba(46,125,79,.08);
}

.delivery-search-empty {
  display: none;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--cream);
  color: var(--text-light);
  border: 1px solid var(--border);
  font-size: 14px;
}

.delivery-search-wrap {
  margin: 14px 0;
}

#delivery-search {
  width: 100%;
  height: 44px;
  border: 1px solid #dfe7dd;
  border-radius: 12px;
  padding: 0 14px;
  direction: rtl;
  font-size: 15px;
  box-sizing: border-box;
  background: var(--white);
  color: var(--text);
}

#delivery-search:focus {
  outline: none;
  border-color: var(--green-mid);
  box-shadow: 0 0 0 4px rgba(46,125,79,.08);
}

.delivery-areas-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 18px;
  max-height: 60vh;
  overflow-y: auto;
  direction: rtl;
}

.delivery-area-item {
  cursor: pointer;
  border: 1px solid #dfe7dd;
  background: #fff;
  color: #173b12;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
  text-align: center;
  direction: rtl;
  transition: all 0.2s ease;
}

.delivery-area-item:hover {
  background: #f8f9f8;
  border-color: #173b12;
}

.delivery-area-item.is-selected {
  background: #173b12;
  color: #fff;
  border-color: #173b12;
}

.delivery-confirm-btn {
  width: 100%;
  margin-top: 16px;
  height: 46px;
  border-radius: 12px;
  background: #173b12;
  color: #fff;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.delivery-confirm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.delivery-confirm-btn:not(:disabled):hover {
  opacity: 0.9;
}

.delivery-modal-footer {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.delivery-modal-footer p {
  margin: 0;
  font-size: 14px;
  color: var(--text-light);
  text-align: center;
}

.delivery-modal-footer a {
  color: var(--green-mid);
  font-weight: 700;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .delivery-modal-overlay {
    padding: 10px;
  }

  .delivery-modal {
    max-height: 90vh;
  }

  .delivery-modal-header {
    padding: 16px 20px;
  }

  .delivery-modal-header h2 {
    font-size: 1.3rem;
  }

  .delivery-modal-body {
    padding: 20px;
  }

  .delivery-areas-list {
    grid-template-columns: 1fr;
  }

  .delivery-area-item {
    font-size: 13px;
    padding: 10px 12px;
  }
}

.section-categories {
  display: none !important;
}