/* ============================================================
   DRY FRUITS ONLINE STORE - Premium Theme
   Palette: cream bg, deep green + gold accents, warm brown text
   ============================================================ */

:root {
  --cream:        #faf6ef;
  --cream-2:      #f4edde;
  --cream-3:      #efe6d2;
  --green:        #2f6b4f;
  --green-dark:   #24553f;
  --green-soft:   #e6efe8;
  --gold:         #c9a227;
  --gold-dark:    #a8861c;
  --gold-soft:    #f6eccb;
  --brown:        #4a3f35;
  --brown-light:  #7a6b5d;
  --white:        #ffffff;
  --ink:          #332d26;
  --danger:       #c0392b;
  --shadow:       0 10px 30px rgba(74,63,53,.10);
  --shadow-lg:    0 18px 50px rgba(74,63,53,.16);
  --radius:       14px;
  --radius-sm:    9px;
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a { color:inherit; text-decoration:none; }
ul { list-style:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; }
input, select, textarea { font-family:inherit; }

h1,h2,h3,h4,.serif { font-family: var(--font-serif); color: var(--brown); }

.container { width:min(1240px, 92%); margin-inline:auto; }

.eyebrow {
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--gold-dark); font-weight:700;
  margin-bottom:.5rem;
}
.section-title { font-size:clamp(1.6rem, 3vw, 2.3rem); font-weight:800; margin-bottom:.4rem; }
.section-sub { color:var(--brown-light); max-width:620px; margin-bottom:2rem; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.6rem; border-radius:999px; font-weight:600; font-size:.92rem;
  border:2px solid transparent; transition:all .25s ease; cursor:pointer;
}
.btn-gold { background:linear-gradient(135deg, var(--gold), var(--gold-dark)); color:#fff; box-shadow:0 8px 20px rgba(201,162,39,.35); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(201,162,39,.45); }
.btn-green { background:var(--green); color:#fff; }
.btn-green:hover { background:var(--green-dark); transform:translateY(-2px); }
.btn-outline { border-color:var(--green); color:var(--green); background:transparent; }
.btn-outline:hover { background:var(--green); color:#fff; }
.btn-light { background:#fff; color:var(--green); box-shadow:var(--shadow); }
.btn-light:hover { transform:translateY(-2px); }
.btn-block { width:100%; }
.btn-sm { padding:.5rem 1rem; font-size:.8rem; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none!important; }

/* ---------- ANNOUNCEMENT BAR (ticker) ---------- */
.announcement {
  background:linear-gradient(90deg, var(--green-dark), var(--green) 55%, var(--green));
  color:#fff; font-size:.82rem; text-align:center;
  overflow:hidden; position:relative; height:38px; display:flex; align-items:center;
  letter-spacing:.01em; border-bottom:1px solid rgba(255,255,255,.08);
}
.announcement-track { display:flex; gap:4rem; white-space:nowrap; flex:1; animation:ticker 30s linear infinite; justify-content:space-around; }
.announcement-item { display:inline-flex; align-items:center; gap:.45rem; font-weight:500; }
.announcement-item .sep { opacity:.45; }
@keyframes ticker { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

/* ---------- UTILITY STRIP ---------- */
.utility-strip {
  background:var(--cream-3); border-bottom:1px solid rgba(74,63,53,.08);
  font-size:.76rem; color:var(--brown-light);
}
.utility-strip .container { display:flex; align-items:center; justify-content:space-between; min-height:32px; flex-wrap:wrap; }
.utility-links { display:flex; gap:1.5rem; }
.utility-links a { display:inline-flex; align-items:center; gap:.35rem; transition:color .2s; }
.utility-links a + a { position:relative; }
.utility-links a + a::before { content:''; position:absolute; left:-.75rem; top:50%; transform:translateY(-50%); width:1px; height:12px; background:rgba(74,63,53,.16); }
.utility-links a:hover { color:var(--green); }
.utility-top { margin-left:auto; font-weight:600; color:var(--green); display:inline-flex; align-items:center; gap:.35rem; }

/* ---------- HEADER ---------- */
.site-header {
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px); position:sticky; top:0; z-index:100;
  box-shadow:0 2px 18px rgba(74,63,53,.08); border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg, transparent, var(--gold-soft), transparent) 1;
}
.header-main { display:flex; align-items:center; gap:1.4rem; min-height:78px; }
.logo { display:flex; align-items:center; gap:.65rem; flex-shrink:0; }
.logo .logo-img { height:60px; width:auto; max-width:280px; object-fit:contain; display:block; }
.logo .logo-img-footer { height:60px; }
.logo-mark {
  width:46px; height:46px; border-radius:13px;
  background:linear-gradient(140deg, var(--green), var(--green-dark));
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:var(--font-serif); font-size:1.15rem; font-weight:800;
  box-shadow:0 8px 18px rgba(47,107,79,.32); transition:transform .25s;
}
.logo:hover .logo-mark { transform:rotate(-6deg) scale(1.04); }
.logo-name { font-family:var(--font-serif); font-weight:800; font-size:1.18rem; color:var(--brown); line-height:1.05; white-space:nowrap; }
.logo-name span { display:block; font-family:var(--font-sans); font-size:.6rem; letter-spacing:.28em; color:var(--gold-dark); font-weight:700; text-transform:uppercase; margin-top:.12rem; white-space:nowrap; }

/* Mega menu - flexible centre zone that distributes evenly */
.mega-nav { flex:1 1 auto; display:flex; justify-content:center; gap:.3rem; }
.mega-nav ul { display:flex; align-items:center; gap:.3rem; }
.mega-nav li { position:relative; flex:0 0 auto; }
.mega-nav li > a.mega-link {
  display:flex; align-items:center; gap:.55rem;
  padding:.5rem .8rem .5rem .5rem; border-radius:999px;
  color:var(--brown); font-weight:600; font-size:.88rem; letter-spacing:.01em;
  transition:background .2s, color .2s, box-shadow .2s; white-space:nowrap;
}
.mega-nav li > a.mega-link:hover, .mega-nav li.open > a.mega-link {
  color:var(--green);
  background:linear-gradient(135deg, var(--green-soft), #dcefe1);
  box-shadow:0 6px 16px rgba(47,107,79,.14);
}
.mega-nav .mega-thumb {
  width:34px; height:34px; border-radius:999px; object-fit:cover; flex-shrink:0;
  border:2px solid #fff; box-shadow:0 3px 8px rgba(74,63,53,.16);
}
.mega-nav .mega-thumb-badge {
  background:linear-gradient(135deg, var(--green-soft), var(--cream));
  color:var(--green); font-weight:800; font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  border:2px dashed rgba(47,107,79,.28);
}
.mega-nav li > a.mega-link::after { display:none; }

/* Dropdown panel: featured image column + variety grid */
.mega-panel {
  position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%,12px);
  background:#fff; border-radius:var(--radius); box-shadow:0 24px 60px rgba(47,107,79,.18);
  overflow:hidden; min-width:620px; display:none;
  grid-template-columns:228px 1fr;
  border-top:3px solid var(--gold);
  opacity:0; transition:opacity .28s ease, transform .28s ease; z-index:200;
}
.mega-nav li.open .mega-panel { display:grid; opacity:1; visibility:visible; transform:translate(-50%,0); }

.mega-feature {
  position:relative; background-size:cover; background-position:center;
  display:flex; align-items:flex-end; padding:1.3rem; color:#fff;
  min-height:232px;
}
.mega-feature-scrim {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(34,48,38,.08) 0%, rgba(22,36,27,.8) 100%);
}
.mega-feature-content { position:relative; z-index:2; }
.mega-feature-kicker {
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-soft); font-weight:800;
}
.mega-feature-content h4 { color:#fff; font-size:1.5rem; margin:.2rem 0 .1rem; }
.mega-feature-content p { font-size:.74rem; opacity:.85; margin-bottom:.85rem; }
.mega-feature-btn {
  display:inline-block; padding:.42rem 1rem; border-radius:999px;
  background:var(--gold); color:#fff; font-size:.76rem; font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,.28); transition:all .2s;
}
.mega-feature-btn:hover { background:var(--gold-dark); transform:translateY(-2px); }

.mega-links { padding:1.25rem 1.4rem 1.5rem; }
.mega-links-title {
  font-size:.68rem; text-transform:uppercase; letter-spacing:.16em;
  font-weight:800; color:var(--gold-dark); margin-bottom:.85rem;
}
.mega-links-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.2rem; }
.mega-panel a.sub {
  display:flex; align-items:center; gap:.65rem; padding:.55rem .6rem; border-radius:11px;
  font-size:.88rem; color:var(--brown); font-weight:600; transition:all .18s;
}
.mega-panel a.sub:hover { background:var(--green-soft); color:var(--green); transform:translateX(4px); }
.mega-panel .thumb {
  width:38px; height:38px; border-radius:10px; object-fit:cover; flex-shrink:0;
  border:1px solid var(--cream-3); box-shadow:0 3px 8px rgba(74,63,53,.08);
}
.mega-panel .thumb-badge {
  background:linear-gradient(135deg, var(--green-soft), var(--cream));
  color:var(--green); font-weight:800; font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(47,107,79,.25);
}
.mega-panel .sub-count {
  margin-left:auto; font-size:.68rem; font-weight:700; color:var(--brown-light);
  background:var(--cream); padding:.16rem .52rem; border-radius:999px;
  transition:all .18s;
}
.mega-panel a.sub:hover .sub-count { background:#fff; color:var(--green); }

/* Header actions */
.header-actions { margin-left:auto; display:flex; align-items:center; gap:.55rem; }
.icon-btn {
  width:42px; height:42px; border-radius:12px; background:var(--cream);
  display:flex; align-items:center; justify-content:center; color:var(--brown);
  position:relative; transition:all .2s; border:none;
}
.icon-btn:hover { background:var(--green-soft); color:var(--green); transform:translateY(-2px); box-shadow:0 6px 14px rgba(47,107,79,.18); }
.icon-btn svg { width:21px; height:21px; }
.icon-badge {
  position:absolute; top:-4px; right:-4px; background:var(--gold); color:#fff;
  font-size:.6rem; font-weight:700; min-width:18px; height:18px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.auth-btn {
  font-weight:700; font-size:.85rem; color:var(--green); padding:.55rem 1.1rem;
  border-radius:999px; background:linear-gradient(135deg, var(--green-soft), #dcefe1);
  border:1px solid rgba(47,107,79,.14); transition:all .2s; display:inline-flex; align-items:center; gap:.4rem;
}
.auth-btn:hover { background:var(--green); color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(47,107,79,.22); }

/* Search overlay */
.search-trigger:hover + .search-overlay { display:flex; }

body.no-scroll { overflow:hidden; }

/* Trending tags */
.trending { background:linear-gradient(180deg, var(--cream-2), var(--cream)); border-bottom:1px solid rgba(74,63,53,.07); }
.trending .container { display:flex; align-items:center; gap:.6rem; overflow-x:auto; padding:.6rem 0; white-space:nowrap; scrollbar-width:none; }
.trending .container::-webkit-scrollbar { display:none; }
.trending-label { font-size:.72rem; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:.14em; margin-right:.3rem; }
.pill {
  display:inline-flex; align-items:center; gap:.35rem; padding:.38rem .9rem; border-radius:999px;
  background:#fff; border:1px solid var(--cream-3); font-size:.8rem; font-weight:600; color:var(--brown);
  transition:all .2s; cursor:pointer; box-shadow:0 2px 6px rgba(74,63,53,.04);
}
.pill:hover { background:var(--green); color:#fff; border-color:var(--green); transform:translateY(-2px); box-shadow:0 6px 14px rgba(47,107,79,.2); }
.pill .pill-ic { font-size:.85rem; }

/* ---------- MOBILE MENU ---------- */
.mobile-toggle { display:none; background:none; border:none; font-size:1.4rem; color:var(--brown); }
.mobile-nav {
  position:fixed; inset:0 auto 0 0; width:300px; background:#fff; z-index:300;
  transform:translateX(-100%); transition:transform .3s ease; padding:1.4rem;
  overflow-y:auto; box-shadow:var(--shadow-lg);
}
.mobile-nav.open { transform:translateX(0); }
.mobile-nav-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.4rem; }
.mobile-nav .mn-link { display:flex; align-items:center; gap:.7rem; padding:.8rem .4rem; font-weight:600; border-bottom:1px solid var(--cream-3); }
.mobile-nav .mn-thumb { width:30px; height:30px; border-radius:8px; object-fit:cover; flex-shrink:0; box-shadow:0 2px 6px rgba(74,63,53,.12); }
.mobile-nav .mn-thumb-badge {
  background:linear-gradient(135deg, var(--green-soft), var(--cream));
  color:var(--green); font-weight:800; font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(47,107,79,.25);
}
.mobile-nav .mn-has.open .mn-link { color:var(--green); }
.mobile-nav .mn-has.open .mn-link { position:relative; }
.mobile-nav .mn-has .mn-link .arr { display:inline-block; transition:transform .2s; margin-left:.15rem; }
.mobile-nav .mn-has.open .mn-link .arr { transform:rotate(180deg); }
.mobile-nav .mn-sub { display:none; padding-left:.4rem; }
.mobile-nav .mn-has.open .mn-sub { display:block; }
.scrim { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:290; opacity:0; pointer-events:none; transition:opacity .3s; }
.scrim.show { opacity:1; pointer-events:auto; }

/* ---------- HERO SLIDER ---------- */
.hero { position:relative; margin:0; }
.hero-slider { position:relative; overflow:hidden; border-radius:0; }
.hero-slide {
  position:relative; min-height:clamp(380px, 56vh, 560px); display:flex; align-items:center;
  background-size:cover; background-position:center; opacity:0; transition:opacity .9s ease;
  position:absolute; inset:0; width:100%;
}
.hero-slide.active { opacity:1; position:relative; }
.hero-slide::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,30,20,.55), rgba(20,30,20,.05)); }
.hero-content { position:relative; z-index:5; max-width:560px; color:#fff; padding:0 clamp(1rem,4vw,3rem) 0 clamp(1rem,6vw,6rem); }
.hero-content .hero-kicker { font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:.8rem; font-weight:700; }
.hero-content h1 { font-size:clamp(1.9rem, 5vw, 3.4rem); color:#fff; line-height:1.08; margin-bottom:1rem; }
.hero-content p { font-size:1.05rem; margin-bottom:1.6rem; opacity:.95; max-width:430px; }
.hero-cta { display:flex; gap:.9rem; flex-wrap:wrap; min-width:0; }
.hero-slide.slide-copy-right .hero-cta { justify-content:flex-end; }
.hero-slide.slide-copy-right .hero-cta .btn, .hero-slide.slide-copy-right .hero-cta a { white-space:nowrap; }
.hero-slide.slide-copy-right .hero-content { margin-left:auto; text-align:right; }
.hero-slide.slide-copy-right .hero-content p { margin-left:auto; }
.hero-slide.slide-copy-center .hero-content { margin-inline:auto; text-align:center; }
.hero-slide.slide-copy-center .hero-content p { margin-inline:auto; }
.hero-dots { position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); display:flex; gap:.5rem; z-index:20; }
.hero-dots button { width:10px; height:10px; border-radius:999px; border:none; background:rgba(255,255,255,.5); transition:all .3s; }
.hero-dots button.active { width:28px; background:var(--gold); }
.hero-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:20;
  width:46px; height:46px; border-radius:999px; background:rgba(255,255,255,.25);
  border:1px solid rgba(255,255,255,.5); color:#fff; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center; transition:all .25s; backdrop-filter:blur(4px);
}
.hero-arrow:hover { background:#fff; color:var(--green); }
.hero-arrow.prev { left:1rem; }
.hero-arrow.next { right:1rem; }

/* ---------- VALUE PROPS / TRUST BAR ---------- */
.trust-bar { background:#fff; box-shadow:var(--shadow); margin-top:-2.4rem; position:relative; z-index:6; border-radius:var(--radius); }
.trust-bar .container { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.2rem; padding:1.4rem 0; }
.trust-item { display:flex; align-items:center; gap:.9rem; padding:.5rem 1rem; }
.trust-item .t-ic { width:46px; height:46px; border-radius:12px; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.trust-item .t-ic svg { width:24px; height:24px; }
.trust-item b { display:block; font-size:.9rem; color:var(--brown); }
.trust-item span { font-size:.76rem; color:var(--brown-light); }

/* ---------- SECTION SPACING ---------- */
.section { padding:4rem 0; }
.section-head { text-align:center; margin-bottom:2.2rem; }
.section-head.left { text-align:left; }

/* ---------- CATEGORY SHOWCASE (circular) ---------- */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.6rem; }
.cat-card { text-align:center; }
.cat-circle {
  width:min(150px,88%); aspect-ratio:1; border-radius:50%; overflow:hidden;
  border:4px solid var(--gold-soft); margin-inline:auto; position:relative;
  box-shadow:var(--shadow); transition:transform .4s ease, box-shadow .4s;
}
.cat-card:hover .cat-circle { transform:scale(1.06) translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--gold); }
.cat-circle img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.cat-card:hover .cat-circle img { transform:scale(1.12); }
.cat-name { margin-top:1rem; font-family:var(--font-serif); font-weight:700; font-size:1rem; color:var(--brown); }
.cat-count { font-size:.76rem; color:var(--brown-light); }

/* ---------- PRODUCT CARDS ---------- */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.6rem; }

/* ---------- VIDEO SHOWCASE ---------- */
.video-showcase { background:linear-gradient(180deg, #fff, var(--cream-2)); }
.video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.6rem; }
.video-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s; }
.video-card:hover { transform:translateY(-4px); box-shadow:0 18px 30px rgba(20,30,20,.15); }
.video-media { position:relative; aspect-ratio:16/10; background:#0e1a12; overflow:hidden; }
.video-media video { width:100%; height:100%; object-fit:cover; display:block; }
.vid-play-badge {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:999px; background:rgba(255,255,255,.9);
  color:var(--green); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.3); pointer-events:none;
}
.vid-play-badge svg { width:26px; height:26px; margin-left:3px; }
.video-title { padding:1rem 1.1rem; font-weight:700; color:var(--brown); font-size:1rem; }
.product-card {
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); position:relative; transition:transform .3s ease, box-shadow .3s;
  display:flex; flex-direction:column;
}
.product-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.pc-media { position:relative; overflow:hidden; aspect-ratio:1; background:var(--cream-2); }
.pc-media img { width:100%; height:100%; object-fit:cover; transition:opacity .4s ease, transform .5s ease; }
.pc-media img.second { position:absolute; inset:0; opacity:0; }
.product-card:hover .pc-media img.main { opacity:0; }
.product-card:hover .pc-media img.second { opacity:1; transform:scale(1.06); }
.discount-badge {
  position:absolute; top:.8rem; left:.8rem; background:var(--danger); color:#fff;
  font-size:.7rem; font-weight:800; padding:.28rem .6rem; border-radius:999px; z-index:5;
  box-shadow:0 4px 10px rgba(192,57,43,.35);
}
.wish-btn {
  position:absolute; top:.8rem; right:.8rem; width:38px; height:38px; border-radius:999px;
  background:rgba(255,255,255,.92); border:none; display:flex; align-items:center; justify-content:center;
  color:var(--brown-light); transition:all .2s; z-index:5; box-shadow:0 3px 10px rgba(0,0,0,.12);
}
.wish-btn:hover { transform:scale(1.12); }
.wish-btn.wish-active { color:var(--danger); }
.wish-btn svg { width:19px; height:19px; }
.pc-body { padding:1.1rem; display:flex; flex-direction:column; flex:1; }
.pc-unit { font-size:.7rem; color:var(--gold-dark); font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.pc-name { font-family:var(--font-serif); font-weight:700; font-size:1rem; color:var(--brown); margin:.25rem 0; line-height:1.3; }
.pc-name:hover { color:var(--green); }
.pc-price { display:flex; align-items:baseline; gap:.5rem; margin:.4rem 0; }
.pc-price .now { font-size:1.15rem; font-weight:800; color:var(--green); }
.pc-price .was { font-size:.85rem; color:var(--brown-light); text-decoration:line-through; }
.pc-gst { font-size:.68rem; color:var(--brown-light); }
.pc-actions { margin-top:auto; padding-top:.8rem; display:flex; gap:.5rem; align-items:center; }
.add-cart {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.6rem; border-radius:10px; border:none; font-weight:700; font-size:.84rem;
  background:linear-gradient(135deg, var(--gold), var(--gold-dark)); color:#fff;
  transition:all .25s; box-shadow:0 5px 14px rgba(201,162,39,.3);
}
.add-cart:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(201,162,39,.42); }
.quick-view-btn {
  width:42px; height:42px; border-radius:10px; border:1px solid var(--cream-3);
  background:#fff; color:var(--brown-light); display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:all .2s;
}
.quick-view-btn:hover { background:var(--green); color:#fff; border-color:var(--green); }
.quick-view-btn svg { width:19px; height:19px; }

/* ---------- COMBO CARDS ---------- */
.combo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.6rem; }
.combo-card {
  position:relative; background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); padding:2rem 1.6rem; text-align:center;
  border:2px solid transparent; transition:all .3s;
}
.combo-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--gold-soft); }
.combo-card.featured { background:linear-gradient(160deg, var(--green), var(--green-dark)); color:#fff; }
.combo-card.featured h3 { color:#fff; }
.combo-label {
  display:inline-block; background:var(--gold-soft); color:var(--gold-dark);
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  padding:.3rem .8rem; border-radius:999px; margin-bottom:.8rem;
}
.combo-card.featured .combo-label { background:var(--gold); color:#fff; }
.combo-name { font-size:1.2rem; font-weight:800; margin-bottom:.3rem; }
.combo-desc { font-size:.9rem; opacity:.8; margin-bottom:1.2rem; }
.combo-includes { font-size:.82rem; margin-bottom:1.4rem; }
.combo-includes li { padding:.2rem 0; display:flex; align-items:center; gap:.4rem; justify-content:center; }
.combo-includes li::before { content:'✓'; color:var(--gold); font-weight:800; }
.combo-card.featured .combo-includes li::before { color:#ffe9a8; }
.combo-price .now { font-size:1.8rem; font-weight:800; }
.combo-price .was { font-size:1rem; text-decoration:line-through; opacity:.65; margin-left:.4rem; }
.combo-save { font-size:.8rem; font-weight:700; color:var(--gold-dark); margin-top:.3rem; }
.combo-card.featured .combo-save { color:#ffe9a8; }

/* ---------- BANNER CTA (split) ---------- */
.cta-banner {
  border-radius:var(--radius-lg,0); overflow:hidden; position:relative;
  background:linear-gradient(120deg, var(--green-dark), var(--green));
  padding:3.2rem clamp(1.4rem,5vw,4rem); color:#fff; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:1.6rem;
}
.cta-banner h2 { color:#fff; font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:.4rem; }
.cta-banner p { opacity:.9; max-width:480px; }

/* ---------- TESTIMONIALS ---------- */
.testi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.6rem; }
.testi-card { background:#fff; border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow); position:relative; }
.testi-card .stars { color:var(--gold); margin-bottom:.9rem; }
.testi-card p { font-size:.94rem; color:var(--brown); }
.testi-card .who { margin-top:1rem; font-weight:700; color:var(--brown); display:flex; align-items:center; gap:.6rem; }
.testi-card .avatar { width:40px; height:40px; border-radius:999px; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }

/* ---------- CART DRAWER ---------- */
.cart-drawer {
  position:fixed; top:0; right:0; height:100vh; width:min(420px,100%);
  background:#fff; box-shadow:var(--shadow-lg); z-index:400;
  transform:translateX(100%); transition:transform .35s ease;
  display:flex; flex-direction:column;
}
.cart-drawer.open { transform:translateX(0); }
.cd-head { display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.4rem; border-bottom:1px solid var(--cream-3); }
.cd-head h3 { font-size:1.1rem; }
.cd-close { background:none; border:none; font-size:1.4rem; color:var(--brown-light); }
.cd-items { flex:1; overflow-y:auto; padding:1rem 1.4rem; }
.cd-item { display:flex; gap:.9rem; padding:.8rem 0; border-bottom:1px solid var(--cream-3); }
.cd-item img { width:64px; height:64px; border-radius:10px; object-fit:cover; }
.cd-item-info { flex:1; }
.cd-item-info .n { font-weight:600; font-size:.88rem; color:var(--brown); }
.cd-item-info .p { font-size:.82rem; color:var(--green); font-weight:700; }
.cd-qty { display:inline-flex; align-items:center; gap:.6rem; margin-top:.3rem; }
.cd-qty button { width:26px; height:26px; border-radius:8px; border:1px solid var(--cream-3); background:#fff; font-weight:700; }
.cd-qty button:hover { background:var(--cream); }
.cd-remove { color:var(--danger); font-size:.76rem; background:none; border:none; }
.cd-footer { padding:1.2rem 1.4rem; border-top:1px solid var(--cream-3); }
.cd-totals { margin-bottom:.9rem; }
.cd-row { display:flex; justify-content:space-between; font-size:.86rem; padding:.15rem 0; color:var(--brown); }
.cd-row.total { font-weight:800; font-size:1.05rem; color:var(--green); border-top:1px dashed var(--cream-3); margin-top:.5rem; padding-top:.6rem; }
.cd-empty { text-align:center; color:var(--brown-light); padding:2.5rem 0; }
.cd-empty .e-ic { font-size:3rem; margin-bottom:.8rem; }

/* ---------- FLY TO CART ANIMATION ---------- */
.fly-target { transition:transform .6s cubic-bezier(.25,.8,.3,1); }
.flyer {
  width:36px; height:36px; border-radius:999px; background:var(--gold); position:fixed;
  z-index:500; pointer-events:none; transition:transform .6s cubic-bezier(.3,.7,.3,1), opacity .6s;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
}

/* slide-in keyframe for section reveal fallback */
@keyframes floatUp { from {opacity:0; transform:translateY(28px);} to {opacity:1; transform:none;} }

/* ---------- PAGE HEADER (listing) ---------- */
.page-hero {
  background:linear-gradient(120deg, var(--green-dark), var(--green));
  color:#fff; padding:3.4rem 0; position:relative; overflow:hidden;
}
.page-hero::after { content:''; position:absolute; right:-80px; top:-80px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.06); }
.page-hero h1 { color:#fff; font-size:clamp(1.8rem,4vw,2.6rem); position:relative; z-index:2; }
.page-hero p { opacity:.9; margin-top:.4rem; position:relative; z-index:2; }

/* ---------- FILTERS / LISTING TOOLBAR ---------- */
.listing-layout { display:grid; grid-template-columns:260px 1fr; gap:2rem; margin-top:2.5rem; align-items:start; }
.sidebar-card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.4rem; position:sticky; top:100px; }
.sidebar-card h4 { margin-bottom:1rem; font-size:1rem; }
.filter-group { border-top:1px solid var(--cream-3); padding-top:1rem; margin-top:1rem; }
.filter-group h5 { font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--brown-light); margin-bottom:.6rem; }
.check-list { display:flex; flex-direction:column; gap:.45rem; font-size:.88rem; }
.check-list label { display:flex; align-items:center; gap:.5rem; cursor:pointer; color:var(--brown); }
.check-list input { accent-color:var(--green); }
.price-range { display:flex; gap:.5rem; }
.price-range input { flex:1; padding:.5rem; border:1px solid var(--cream-3); border-radius:8px; font-size:.8rem; }
.filter-submit { margin-top:1rem; }
.sort-bar { display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.sort-bar .count { font-size:.9rem; color:var(--brown-light); }
.sort-bar select { padding:.55rem .9rem; border:1px solid var(--cream-3); border-radius:9px; background:#fff; font-size:.85rem; margin-left:auto; }

/* Mobile filter drawer + sticky filter bar (mobile only) */
.filter-toggle { display:none; align-items:center; gap:.45rem; padding:.55rem 1rem; border:1px solid var(--cream-3); border-radius:9px; background:#fff; font-size:.85rem; font-weight:600; color:var(--brown); cursor:pointer; }
.filter-toggle svg { width:16px; height:16px; }
.filter-count { display:none; min-width:20px; height:20px; padding:0 .35rem; border-radius:999px; background:var(--green); color:#fff; font-size:.72rem; font-weight:800; align-items:center; justify-content:center; }
.filter-overlay { position:fixed; inset:0; z-index:330; background:rgba(35,39,31,.5); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, visibility .25s; }
.filter-overlay.open { opacity:1; visibility:visible; pointer-events:auto; }
.filter-drawer { position:fixed; top:0; left:0; bottom:0; width:min(330px,88vw); z-index:340; background:#fff; transform:translateX(-105%); transition:transform .3s cubic-bezier(.3,.8,.3,1); display:flex; flex-direction:column; box-shadow:0 30px 70px rgba(35,39,31,.3); }
.filter-drawer.open { transform:translateX(0); }
.filter-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.25rem; border-bottom:1px solid var(--cream-3); }
.filter-drawer-head h4 { margin:0; font-size:1.02rem; }
.filter-drawer-close { width:34px; height:34px; border-radius:999px; background:var(--cream); border:none; color:var(--brown-light); font-size:1.05rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; }
.filter-drawer-close:hover { background:var(--green); color:#fff; }
.filter-drawer-body { flex:1; overflow-y:auto; padding:1.25rem; }

/* ---------- PRODUCT DETAIL ---------- */
.pd-layout { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-top:2rem; }
.pd-gallery { position:sticky; top:100px; align-self:start; }
.pd-main-img { border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow); aspect-ratio:1; overflow:hidden; cursor:zoom-in; }
.pd-main-img img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.pd-main-img.zoomed img { transform:scale(1.8); }
.pd-thumbs { display:flex; gap:.7rem; margin-top:.9rem; }
.pd-thumbs img { width:74px; height:74px; border-radius:10px; object-fit:cover; cursor:pointer; border:2px solid transparent; transition:border .2s; }
.pd-thumbs img.active, .pd-thumbs img:hover { border-color:var(--gold); }
.pd-info .pd-cat { color:var(--gold-dark); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; }
.pd-info h1 { font-size:clamp(1.5rem,3vw,2.1rem); margin:.4rem 0; }
.pd-rating { display:flex; align-items:center; gap:.4rem; color:var(--gold); font-size:.9rem; margin-bottom:1rem; }
.pd-price { display:flex; align-items:center; gap:.8rem; margin-bottom:.5rem; }
.pd-price .now { font-size:2rem; font-weight:800; color:var(--green); }
.pd-price .was { font-size:1.1rem; color:var(--brown-light); text-decoration:line-through; }
.pd-price .off { background:var(--gold-soft); color:var(--gold-dark); font-weight:800; padding:.2rem .6rem; border-radius:999px; font-size:.8rem; }
.pd-meta { font-size:.9rem; color:var(--brown-light); margin-bottom:1.2rem; }
.pd-meta b { color:var(--green); }
.pd-trust { display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.8rem; color:var(--brown-light); margin-bottom:1.6rem; }
.pd-trust span { display:flex; align-items:center; gap:.35rem; }
.pd-qty { display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
.pd-qty .qty-label { font-weight:600; font-size:.9rem; }
.qty-stepper { display:inline-flex; align-items:center; border:1px solid var(--cream-3); border-radius:10px; overflow:hidden; }
.qty-stepper button { width:40px; height:44px; border:none; background:#fff; font-size:1.2rem; color:var(--green); }
.qty-stepper button:hover { background:var(--cream); }

.pd-pincode { border:1px dashed var(--gold,#c9a227); border-radius:12px; padding:1rem 1.1rem; margin-bottom:1.4rem; background:#fffaf0; }
.pincode-label { font-weight:600; font-size:.9rem; color:var(--brown); display:block; margin-bottom:.6rem; }
.pincode-row { display:flex; gap:.5rem; }
.pincode-input { flex:1; min-width:0; padding:.7rem .9rem; border:1px solid var(--cream-3,#e6dfd3); border-radius:10px; font-size:.9rem; }
.pincode-input:focus { outline:none; border-color:var(--gold,#c9a227); }
.pincode-row .btn { white-space:nowrap; }
.qty-stepper input { width:52px; text-align:center; border:none; font-weight:700; font-size:1rem; height:44px; }
.pd-weight { display:flex; gap:.6rem; margin-bottom:1.6rem; }
.weight-chip { padding:.5rem 1rem; border-radius:10px; border:1px solid var(--cream-3); background:#fff; font-size:.85rem; cursor:pointer; }
.weight-chip.active { border-color:var(--green); background:var(--green-soft); color:var(--green); font-weight:700; }
.pd-actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.pd-desc { border-top:1px solid var(--cream-3); padding-top:1.3rem; }
.pd-desc h3 { margin-bottom:.6rem; font-size:1.05rem; }
.pd-desc p, .pd-desc li { color:var(--brown-light); font-size:.95rem; margin-bottom:.4rem; }

/* ---------- AUTH PAGES ---------- */
.auth-wrap { min-height:80vh; display:grid; place-items:center; padding:3rem 1rem; background:linear-gradient(160deg, var(--cream) 0%, var(--cream-2) 100%); }
.auth-card { background:#fff; border-radius:var(--radius-lg, 20px); box-shadow:var(--shadow-lg); width:min(440px,100%); padding:2.4rem; }
.auth-card .auth-logo { text-align:center; margin-bottom:1.6rem; }
.auth-card h2 { text-align:center; margin-bottom:.4rem; }
.auth-sub { text-align:center; color:var(--brown-light); font-size:.9rem; margin-bottom:1.8rem; }

.form-group { margin-bottom:1.1rem; }
.form-group label { display:block; font-size:.84rem; font-weight:600; color:var(--brown); margin-bottom:.4rem; }
.form-input {
  width:100%; padding:.75rem 1rem; border:1px solid var(--cream-3); border-radius:10px;
  font-size:.95rem; background:#fff; transition:border .2s, box-shadow .2s; color:var(--ink);
}
.form-input:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
textarea.form-input { resize:vertical; min-height:90px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
.form-hint { font-size:.78rem; color:var(--brown-light); margin-top:.3rem; }
.alert { padding:.8rem 1rem; border-radius:10px; font-size:.88rem; margin-bottom:1.1rem; }
.alert-error { background:#fdecea; color:var(--danger); border:1px solid #f5c6c0; }
.alert-success { background:#e6f4ea; color:var(--green-dark); border:1px solid #bfe3cb; }
.alert-info { background:var(--gold-soft); color:var(--gold-dark); border:1px solid #ecd99b; }

/* ---------- CART PAGE ---------- */
.cart-layout { display:grid; grid-template-columns:1fr 380px; gap:2rem; margin-top:2rem; align-items:start; }
.cart-table { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.cart-table table { width:100%; border-collapse:collapse; }
.cart-table th { background:var(--cream-2); text-align:left; padding:.9rem 1.2rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--brown-light); }
.cart-table td { padding:1rem 1.2rem; border-top:1px solid var(--cream-3); vertical-align:middle; }
.cart-row-product { display:flex; align-items:center; gap:.9rem; }
.cart-row-product img { width:70px; height:70px; border-radius:10px; object-fit:cover; }
.cart-row-product .n { font-weight:600; color:var(--brown); }
.cart-row-product .u { font-size:.75rem; color:var(--gold-dark); }
.summary-card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.8rem; position:sticky; top:100px; }
.summary-card h3 { margin-bottom:1.2rem; }
.sum-row { display:flex; justify-content:space-between; font-size:.92rem; padding:.35rem 0; color:var(--brown); }
.sum-row.total { font-weight:800; font-size:1.15rem; color:var(--green); border-top:1px dashed var(--cream-3); margin-top:.6rem; padding-top:.8rem; }
.sum-row .green { color:var(--green); font-weight:700; }
.sum-row .strike { text-decoration:line-through; color:var(--brown-light); }
.coupon-row { display:flex; gap:.5rem; margin:1rem 0; }

/* ---------- CHECKOUT ---------- */
.checkout-layout { display:grid; grid-template-columns:1.4fr 1fr; gap:2.2rem; margin-top:2rem; align-items:start; }
.step-card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.8rem; margin-bottom:1.6rem; }
.step-card h3 { display:flex; align-items:center; gap:.6rem; margin-bottom:1.2rem; }
.step-num { width:28px; height:28px; border-radius:999px; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.saved-addr { border:1px solid var(--cream-3); border-radius:10px; padding:.9rem 1rem; margin-bottom:.7rem; cursor:pointer; transition:all .2s; }
.saved-addr:hover { border-color:var(--green); }
.saved-addr.selected { border-color:var(--green); background:var(--green-soft); }
.saved-addr .a-name { font-weight:700; }
.saved-addr .a-detail { font-size:.85rem; color:var(--brown-light); }
.pay-option { display:flex; gap:1rem; margin-bottom:1rem; }
.pay-option label { flex:1; display:flex; align-items:center; gap:1rem; border:2px solid var(--cream-3); border-radius:12px; padding:1.2rem; cursor:pointer; transition:all .2s; background:#fff; }
.pay-option label:hover { border-color:var(--gold); }
.pay-option input:checked + label { border-color:var(--green); background:var(--green-soft); }
.pay-option input { display:none; }
.pay-option .p-ic { width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.pay-option .p-ic svg { width:26px; height:26px; }
.pay-option .p-title { font-weight:700; color:var(--brown); }
.pay-option .p-desc { font-size:.78rem; color:var(--brown-light); }

/* ---------- ORDER CONFIRMATION ---------- */
.confirm-wrap { min-height:80vh; display:grid; place-items:center; padding:3rem 1rem; }
.confirm-card { background:#fff; border-radius:20px; box-shadow:var(--shadow-lg); width:min(560px,100%); text-align:center; padding:3rem 2rem; }
.confirm-ic { width:90px; height:90px; border-radius:999px; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center; margin:0 auto 1.4rem; }
.confirm-ic svg { width:48px; height:48px; }
.confirm-card h2 { font-size:1.8rem; margin-bottom:.4rem; }
.confirm-card .ord-no { color:var(--gold-dark); font-weight:700; margin-bottom:.6rem; }
.pay-pill { display:inline-block; padding:.4rem 1rem; border-radius:999px; font-size:.8rem; font-weight:700; margin:.6rem 0; }
.pay-pill.cod { background:var(--gold-soft); color:var(--gold-dark); }
.pay-pill.paid { background:var(--green-soft); color:var(--green); }
.pay-pill.pending { background:#fdecea; color:var(--danger); }

/* ---------- USER PANEL ---------- */
.panel-layout { display:grid; grid-template-columns:240px 1fr; gap:2rem; margin-top:2rem; align-items:start; }
.panel-nav { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem; position:sticky; top:100px; }
.panel-nav a { display:flex; align-items:center; gap:.7rem; padding:.75rem .9rem; border-radius:10px; color:var(--brown); font-weight:500; font-size:.9rem; transition:all .2s; }
.panel-nav a:hover { background:var(--cream); color:var(--green); }
.panel-nav a.active { background:var(--green); color:#fff; }
.panel-card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.8rem; margin-bottom:1.4rem; }
.panel-card h3 { margin-bottom:1.1rem; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; }
.stat-card { background:var(--cream); border-radius:12px; padding:1.1rem; text-align:center; }
.stat-card b { display:block; font-size:1.4rem; color:var(--green); }
.stat-card span { font-size:.76rem; color:var(--brown-light); }
.order-row { border:1px solid var(--cream-3); border-radius:12px; padding:1rem; margin-bottom:.9rem; }
.order-row .o-head { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin-bottom:.4rem; }
.order-row .o-no { font-weight:700; color:var(--brown); }
.order-row .o-date { font-size:.8rem; color:var(--brown-light); }
.status-badge { display:inline-block; padding:.25rem .7rem; border-radius:999px; font-size:.74rem; font-weight:700; }
.st-pending{background:#fdecea;color:var(--danger);} .st-confirmed{background:var(--gold-soft);color:var(--gold-dark);}
.st-packed{background:#e3e9fb;color:#3b5bdb;} .st-shipped{background:#e9e0fa;color:#6f42c1;}
.st-delivered{background:var(--green-soft);color:var(--green);} .st-cancelled{background:#f1f1f1;color:var(--brown-light);}
.pay-cod{background:var(--gold-soft);color:var(--gold-dark);} .pay-paid{background:var(--green-soft);color:var(--green);} .pay-pending{background:#fdecea;color:var(--danger);}

/* ---------- OFFER BAR / BADGES ---------- */
.store-marquee { overflow:hidden; white-space:nowrap; }

/* ---------- FOOTER ---------- */
.site-footer { background:#23271f; color:#cfc9bb; margin-top:3rem; }
.footer-top { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:2rem; padding:3.4rem 0; }
.footer-brand p { font-size:.9rem; margin:1.1rem 0; line-height:1.7; }
.social-row { display:flex; gap:.6rem; }
.social-btn { width:40px; height:40px; border-radius:999px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff; transition:all .25s; }
.social-btn:hover { background:var(--gold); transform:translateY(-3px); }
.social-btn svg { width:18px; height:18px; }
.footer-col h5 { color:#fff; font-family:var(--font-sans); font-weight:700; margin-bottom:1.1rem; text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; }
.footer-col a { display:block; padding:.35rem 0; font-size:.88rem; color:#a79f92; transition:color .2s; }
.footer-col a:hover { color:var(--gold); }
.newsletter { display:flex; }
.newsletter input { flex:1; padding:.7rem 1rem; border:none; border-radius:9px 0 0 9px; font-size:.9rem; }
.newsletter button { border:none; padding:0 1.2rem; background:var(--gold); color:#fff; font-weight:700; border-radius:0 9px 9px 0; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:1.2rem 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.82rem; color:#8c8578; }
.footer-badges { display:flex; gap:.7rem; }
.fbadge { display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.06); padding:.4rem .8rem; border-radius:999px; font-size:.74rem; }

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float {
  position:fixed; bottom:24px; right:24px; z-index:500; width:58px; height:58px; border-radius:999px;
  background:#25d366; box-shadow:0 8px 22px rgba(37,211,102,.45);
  display:flex; align-items:center; justify-content:center; color:#fff; transition:transform .25s;
}
.wa-float:hover { transform:scale(1.1); }
.wa-float svg { width:30px; height:30px; }

/* ---------- TOAST ---------- */
.toast-wrap { position:fixed; top:90px; right:20px; z-index:600; display:flex; flex-direction:column; gap:.6rem; }
.toast { background:#fff; box-shadow:var(--shadow-lg); border-radius:10px; padding:.85rem 1.1rem; font-size:.88rem; display:flex; align-items:center; gap:.6rem; animation:toastIn .3s ease; min-width:240px; }
.toast.success { border-left:4px solid var(--green); }
.toast.error { border-left:4px solid var(--danger); }
@keyframes toastIn { from{opacity:0; transform:translateX(30px);} to{opacity:1; transform:none;} }

/* ---------- SEARCH OVERLAY (modal) ---------- */
.search-overlay {
  position:fixed; inset:0; z-index:350;
  background:rgba(35,39,31,.55); backdrop-filter:blur(4px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:9vh 1.2rem 2rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, visibility .25s;
}
.search-overlay.open { opacity:1; visibility:visible; pointer-events:auto; }
.search-panel {
  width:min(680px,100%); background:#fff; border-radius:18px;
  box-shadow:0 30px 70px rgba(35,39,31,.35);
  padding:1.7rem 1.8rem 1.9rem; position:relative;
  transform:translateY(-16px); transition:transform .28s cubic-bezier(.3,.8,.3,1);
  max-height:80vh; overflow-y:auto;
}
.search-overlay.open .search-panel { transform:none; }
.search-close {
  position:absolute; top:.75rem; right:.75rem; width:34px; height:34px; border-radius:999px;
  background:var(--cream); border:none; color:var(--brown-light); font-size:1.05rem;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.search-close:hover { background:var(--green); color:#fff; transform:rotate(90deg); }
.search-kicker {
  font-size:.68rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-dark); margin-bottom:.7rem;
}
.search-overlay-form {
  display:flex; align-items:center; gap:.6rem;
  border:2px solid var(--cream-3); border-radius:14px; padding:.3rem .4rem .3rem 1rem;
  background:#fff; transition:border .2s, box-shadow .2s;
}
.search-overlay-form:focus-within { border-color:var(--green); box-shadow:0 0 0 4px var(--green-soft); }
.search-overlay-form > svg { width:21px; height:21px; color:var(--brown-light); flex-shrink:0; }
.search-overlay-form input {
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-size:1rem; padding:.65rem 0; color:var(--ink);
}
.search-overlay-form input::placeholder { color:var(--brown-light); }
.btn-search { flex-shrink:0; padding:.7rem 1.3rem; }

/* Default suggestions */
.search-section-title {
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.15em;
  color:var(--brown-light); margin:1.35rem 0 .7rem;
}
.search-pills { display:flex; flex-wrap:wrap; gap:.5rem; }
.search-cats { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.55rem; }
.search-cat {
  display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; border-radius:12px;
  border:1px solid var(--cream-3); background:#fff; font-weight:600; font-size:.84rem;
  color:var(--brown); transition:all .18s;
}
.search-cat:hover { border-color:var(--green); background:var(--green-soft); color:var(--green); transform:translateY(-2px); }
.search-cat img { width:34px; height:34px; border-radius:9px; object-fit:cover; }
.search-cat-badge {
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg, var(--green-soft), var(--cream));
  color:var(--green); font-weight:800; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(47,107,79,.25);
}

/* Live results */
.search-results-title {
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  color:var(--brown-light); margin:1.25rem 0 .55rem;
}
.search-result {
  display:flex; align-items:center; gap:.85rem; padding:.6rem .7rem; border-radius:12px;
  transition:background .15s;
}
.search-result:hover, .search-result.active { background:var(--cream); }
.search-result > img { width:48px; height:48px; border-radius:11px; object-fit:cover; box-shadow:0 3px 8px rgba(74,63,53,.1); }
.sr-main { flex:1; min-width:0; }
.sr-name { font-weight:600; font-size:.9rem; color:var(--brown); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-unit { font-size:.72rem; color:var(--brown-light); }
.sr-price { text-align:right; flex-shrink:0; }
.sr-price .now { font-weight:800; color:var(--green); font-size:.95rem; }
.sr-price .was { font-size:.75rem; color:var(--brown-light); text-decoration:line-through; margin-left:.3rem; }
.sr-price .off { display:inline-block; font-size:.65rem; font-weight:800; color:#fff; background:var(--danger); padding:.08rem .4rem; border-radius:999px; margin-top:.12rem; }
.search-cats-from-results { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.5rem; margin-top:.3rem; }
.search-results-foot {
  margin-top:.8rem; padding-top:.8rem; border-top:1px dashed var(--cream-3); text-align:center;
}
.search-results-foot a { color:var(--green); font-weight:700; font-size:.88rem; }
.search-result-note { font-size:.72rem; color:var(--brown-light); margin-top:.9rem; }
.search-empty { text-align:center; padding:1.7rem 0; color:var(--brown-light); }
.search-empty .se-ic { font-size:2.2rem; margin-bottom:.4rem; }

@media (max-width: 860px) {
  .search-overlay { padding-top:5vh; padding-inline:.8rem; }
  .search-panel { max-height:88vh; padding:1.4rem 1.3rem 1.5rem; }
  .search-overlay-form { padding-left:.7rem; }
}

/* ---------- PAGINATION ---------- */
.pagination { display:flex; gap:.4rem; }
.pagination a, .pagination span { padding:.5rem .85rem; border-radius:9px; background:#fff; border:1px solid var(--cream-3); font-size:.85rem; color:var(--brown); transition:all .2s; min-width:38px; text-align:center; }
.pagination a:hover { border-color:var(--green); color:var(--green); }
.pagination .active { background:var(--green); color:#fff; border-color:var(--green); }

/* ---------- ORDER TRACKING ---------- */
.track-progress { display:flex; align-items:center; margin:1.4rem 0; }
.tp-step { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--brown-light); position:relative; flex:1; }
.tp-step:not(:last-child)::after { content:''; flex:1; height:3px; background:var(--cream-3); margin:0 .7rem; border-radius:3px; }
.tp-step.done { color:var(--green); font-weight:600; }
.tp-dot { width:24px; height:24px; border-radius:999px; background:var(--cream-3); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.tp-step.done .tp-dot { background:var(--green); color:#fff; }
.tp-step.done .tp-dot::after { content:'✓'; font-size:.7rem; }
.tp-step.current .tp-dot { background:var(--gold); color:#fff; box-shadow:0 0 0 5px var(--gold-soft); }

/* ---------- RESPONSIVE ---------- */
/* Compact header on medium/large laptops so all 6 categories fit without overflow */
@media (max-width: 1280px) {
  .header-main { gap:1rem; }
  .mega-nav { gap:.2rem; }
  .mega-nav li > a.mega-link { gap:.4rem; padding:.42rem .65rem .42rem .42rem; font-size:.82rem; }
  .mega-nav .mega-thumb { width:28px; height:28px; }
  .header-actions { gap:.4rem; }
}

/* Icon-only pills below 1200px so all 6 categories fit with logo + actions */
@media (max-width: 1200px) {
  .mega-nav { gap:.2rem; }
  .mega-nav .mega-label { display:none; }
  .mega-nav li > a.mega-link { padding:.42rem; }
  .mega-nav .mega-thumb { width:32px; height:32px; }
  .mega-panel { min-width:460px; grid-template-columns:168px 1fr; }
  .mega-feature { min-height:206px; }
  .mega-links { padding:1rem 1.1rem 1.2rem; }
  .mega-links-grid { grid-template-columns:1fr; gap:.1rem; }
}

@media (max-width: 1080px) {
  .footer-top { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .listing-layout { grid-template-columns:1fr; }
  .sidebar-card { display:none; position:static; }
  .filter-toggle { display:inline-flex; }
  .sort-bar { position:sticky; top:82px; z-index:120; background:rgba(250,248,243,.94); backdrop-filter:blur(8px); padding:.45rem 0; margin-bottom:1.1rem; }
  .cart-layout, .checkout-layout, .pd-layout, .panel-layout { grid-template-columns:1fr; }
  .pd-gallery { position:static; }
  /* Slim the header further: logo gains space */
  .logo-mark { width:40px; height:40px; border-radius:11px; }
  .logo-name { font-size:.98rem; }
  .logo-name span { display:none; }
  .logo .logo-img { height:44px; max-width:190px; }
  .icon-btn { width:38px; height:38px; }
  .auth-btn { padding:.48rem .75rem; font-size:.78rem; }
}

@media (min-width: 1081px) {
  .filter-drawer, .filter-overlay { display:none; }
}

@media (max-width: 860px) {
  .mega-nav { display:none; }
  .mobile-toggle { display:block; }
  .header-actions .auth-desktop { display:none; }
  .utility-links { display:none; }
}

/* ---------- USER ACCOUNT PANEL (responsive) ---------- */
@media (max-width: 760px) {
  .panel-layout { grid-template-columns:1fr; gap:1rem; margin-top:1.2rem; }
  .panel-nav { position:static; display:flex; flex-direction:row; gap:.4rem; overflow-x:auto; padding:.6rem; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
  .panel-nav a { flex:0 0 auto; white-space:nowrap; padding:.55rem .85rem; font-size:.82rem; gap:.4rem; }
  .stat-grid { grid-template-columns:repeat(2, 1fr); }
  .stat-card { padding:1rem; }
  .panel-card { padding:1.2rem; }
}

/* ---------- FOOTER responsive (prevent horizontal overflow) ---------- */
@media (max-width: 760px) {
  .footer-top { grid-template-columns:1fr; gap:1.6rem; padding:2.4rem 0; }
  .footer-bottom { flex-direction:column; text-align:center; gap:.6rem; }
  .footer-badges { flex-wrap:wrap; justify-content:center; }
}