/* ============================================================
   SWAGATHAM — Storefront styles
   Theme tokens are CSS variables; change them to re-skin instantly.
   ============================================================ */
:root {
  --radius: 1rem;
  --logo-height: 138px;       /* change this one value to resize the logo */
  --background: oklch(0.98 0.014 70);
  --foreground: oklch(0.25 0.04 40);
  --card: oklch(1 0 0);
  --muted: oklch(0.96 0.016 70);
  --muted-fg: oklch(0.5 0.04 50);

  /* Brand: deep saffron ORANGE primary + fresh GREEN secondary accent */
  --primary: oklch(0.62 0.19 47);          /* deep attractive saffron-orange */
  --primary-fg: oklch(0.99 0.02 80);
  --primary-dark: oklch(0.5 0.17 42);

  --green: oklch(0.55 0.13 150);           /* fresh green accent */
  --green-fg: oklch(0.98 0.02 150);
  --secondary: oklch(0.95 0.045 150);      /* pale green tint */
  --secondary-fg: oklch(0.38 0.1 150);

  --maroon: oklch(0.3 0.085 38);           /* deep warm brown (bars/footer) */
  --maroon-fg: oklch(0.97 0.02 70);
  --orange: oklch(0.7 0.19 55);            /* bright orange (badges/accents) */
  --sindoor: oklch(0.55 0.2 28);           /* Indian sindoor / vermilion red */
  --sindoor-fg: oklch(0.98 0.02 28);
  --turmeric: oklch(0.82 0.16 85);         /* turmeric yellow */
  --turmeric-fg: oklch(0.42 0.12 80);
  --orange-fg: oklch(0.45 0.18 45);
  --sky: oklch(0.78 0.1 225);
  --sky-fg: oklch(0.3 0.08 240);
  --destructive: oklch(0.55 0.22 27);
  --border: oklch(0.9 0.02 70);

  --shadow-soft: 0 4px 20px -6px oklch(0.4 0.13 40 / 0.18);
  --shadow-card: 0 12px 44px -12px oklch(0.4 0.15 40 / 0.28);
  --gradient-fresh: linear-gradient(135deg, oklch(0.68 0.2 55), oklch(0.55 0.18 33));   /* orange duo */
  --gradient-warm: linear-gradient(135deg, oklch(0.7 0.19 58), oklch(0.4 0.14 30));
  --gradient-green: linear-gradient(135deg, oklch(0.6 0.14 150), oklch(0.48 0.12 160));
  --gradient-hero: linear-gradient(150deg, oklch(0.4 0.13 36), oklch(0.28 0.09 32) 70%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { background: var(--background); color: var(--foreground);
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.6; }
h1,h2,h3,h4,.font-display { font-family: 'Fraunces', Georgia, serif; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
img { display: block; max-width: 100%; }
input, textarea, select { font-family: inherit; }

.wrap { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.text-gradient { background: var(--gradient-fresh); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.55rem 1.1rem; border-radius:999px; font-weight:700; font-size:.9rem;
  transition:all .18s; white-space:nowrap; }
.btn-primary { background:var(--primary); color:var(--primary-fg); }
.btn-primary:hover { background:var(--primary-dark); filter:none; transform:translateY(-1px); box-shadow:var(--shadow-soft); }
.btn-green-accent { background:var(--green); color:var(--green-fg); }
.btn-green-accent:hover { filter:brightness(1.08); transform:translateY(-1px); }
.btn-secondary { background:var(--secondary); color:var(--secondary-fg); }
.btn-outline { background:transparent; color:var(--foreground); border:1.5px solid var(--border); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.btn-ghost { background:transparent; color:var(--foreground); }
.btn-ghost:hover { background:var(--muted); }
.btn-green { background:#25D366; color:#fff; }
.btn-green:hover { background:#1ebe5b; }
.btn-lg { padding:.8rem 1.6rem; font-size:1rem; }
.btn-sm { padding:.35rem .8rem; font-size:.82rem; }
.btn-block { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none!important; }

/* Inputs */
.input, .textarea, select.input { width:100%; padding:.6rem .9rem; border:1.5px solid var(--border);
  border-radius:.75rem; background:var(--card); color:var(--foreground); font-size:.92rem; outline:none;
  transition:border-color .15s; }
.input:focus, .textarea:focus, select.input:focus { border-color:var(--primary); }
.input.rounded-full { border-radius:999px; padding-left:2.4rem; }
.textarea { resize:vertical; min-height:90px; }
label { display:block; font-size:.85rem; font-weight:600; margin-bottom:.35rem; }
.field { margin-bottom:1rem; }

/* Badges */
.badge { display:inline-block; padding:.2rem .7rem; border-radius:999px; font-size:.72rem; font-weight:700; }
.badge-primary { background:oklch(0.58 0.15 150 / .15); color:var(--primary); }
.badge-orange  { background:oklch(0.74 0.17 55 / .2);  color:var(--orange-fg); }
.badge-maroon  { background:oklch(0.4 0.13 22 / .1);   color:var(--maroon); }
.badge-sky     { background:oklch(0.78 0.1 225 / .2);  color:var(--sky-fg); }

/* Top bar + nav */
.topbar { background:linear-gradient(90deg, var(--sindoor), var(--primary) 50%, oklch(0.62 0.16 70));
  color:#fff; font-size:.78rem; font-weight:600;
  padding:.4rem 1.5rem; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  border-bottom:3px solid var(--green); }
.nav { position:sticky; top:0; z-index:100; background:oklch(0.99 0.008 95 / .9);
  backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:all .3s; }
.nav.scrolled { border-color:var(--border); box-shadow:var(--shadow-soft); }
.nav-inner { display:flex; align-items:center; gap:1rem; padding:.6rem 1.5rem; max-width:80rem; margin:0 auto; }
.logo { display:inline-flex; align-items:center; }
.logo-img { height:clamp(66px, 10vw, 150px); width:auto; max-width:min(62vw,440px); object-fit:contain; display:block; }
.nav-search { flex:1; position:relative; max-width:520px; }
.nav-search-icon { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); opacity:.6; }
.nav-actions { display:flex; align-items:center; gap:.5rem; }
.nav-cats { position:relative; }
.cat-menu { position:absolute; right:0; top:120%; background:var(--card); border:1px solid var(--border);
  border-radius:1rem; box-shadow:var(--shadow-card); padding:.5rem; min-width:240px; display:none; z-index:200;
  max-height:70vh; overflow:auto; }
.cat-menu.open { display:block; }
.cat-menu a { display:flex; justify-content:space-between; gap:.5rem; padding:.5rem .7rem; border-radius:.6rem; font-weight:600; font-size:.9rem; }
.cat-menu a:hover { background:var(--muted); }
.cat-count { background:var(--muted); color:var(--muted-fg); border-radius:999px; padding:0 .5rem; font-size:.75rem; }
.cart-btn { position:relative; background:#fff; color:var(--primary-dark); border:1.5px solid var(--primary); }
.cart-btn:hover { background:var(--primary); color:#fff; }
.cart-count { background:var(--primary); color:#fff; border-radius:999px; min-width:1.35rem; height:1.35rem;
  display:inline-flex; align-items:center; justify-content:center; font-size:.74rem; font-weight:800; padding:0 .35rem; }
.cart-btn:hover .cart-count { background:#fff; color:var(--primary-dark); }
.wish-btn { position:relative; }
.wish-count { background:var(--primary); color:#fff; border-radius:999px; min-width:1.35rem; height:1.35rem;
  display:inline-flex; align-items:center; justify-content:center; font-size:.74rem; font-weight:800; padding:0 .35rem; }

/* Hero */
.hero { background:var(--gradient-hero); color:#fff; padding:3.5rem 0 2.5rem; position:relative; overflow:hidden; }
.hero::after { content:""; position:absolute; inset:0; background:
  radial-gradient(ellipse at 85% 10%, oklch(0.72 0.2 60 / .35), transparent 55%),
  radial-gradient(ellipse at 5% 95%, oklch(0.55 0.14 150 / .28), transparent 55%); pointer-events:none; }
.hero-inner { display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; position:relative; z-index:1; }
.hero h1 { font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.05; color:#fff; }
.hero p { color:rgba(255,255,255,.82); font-size:1.05rem; margin:1rem 0 1.4rem; max-width:32rem; }
.hero-btns { display:flex; gap:.7rem; flex-wrap:wrap; }
.hero-stats { display:flex; gap:2rem; margin-top:1.8rem; }
.hero-stat-val { font-family:'Fraunces',serif; font-size:1.5rem; color:oklch(0.82 0.16 65); }
.hero-stat-label { font-size:.78rem; color:rgba(255,255,255,.7); }
.hero-img { border-radius:1.5rem; overflow:hidden; box-shadow:var(--shadow-card); aspect-ratio:4/3;
  background:var(--gradient-fresh); display:flex; align-items:center; justify-content:center; }
.hero-img span { font-size:7rem; filter:drop-shadow(0 8px 16px rgba(0,0,0,.2)); }
.hero .btn-outline { color:#fff; border-color:rgba(255,255,255,.55); }
.hero .btn-outline:hover { background:rgba(255,255,255,.14); border-color:#fff; color:#fff; }
.hero .badge-orange { background:rgba(255,255,255,.18); color:#fff; }

/* Section headers */
.section { padding:2.5rem 0; }
.section-eyebrow { color:var(--primary); font-weight:800; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.section-title { font-size:1.9rem; margin-top:.2rem; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:1.4rem; flex-wrap:wrap; gap:1rem; }

/* Category tiles */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:1rem; }
.cat-tile { background:var(--card); border:1px solid var(--border); border-radius:1.2rem; padding:1.2rem 1rem;
  text-align:center; transition:transform .2s, box-shadow .2s; }
.cat-tile:hover { transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:var(--primary); }
.cat-tile .emoji { font-size:2.4rem; }
.cat-tile .nm { font-weight:700; margin-top:.4rem; font-size:.95rem; }
.cat-tile .ct { color:var(--muted-fg); font-size:.78rem; }
.cat-tile.active { background:var(--gradient-green); color:#fff; border-color:transparent; }
.cat-tile.active .ct { color:rgba(255,255,255,.85); }

/* Offers strip */
.offer-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.offer-card { border-radius:1.2rem; padding:1.3rem; color:#fff; min-height:120px; display:flex; flex-direction:column;
  justify-content:space-between; box-shadow:var(--shadow-soft); }
.offer-card.primary { background:var(--gradient-fresh); }
.offer-card.maroon  { background:var(--gradient-warm); }
.offer-card.sky     { background:linear-gradient(135deg, var(--sky), oklch(0.5 0.1 235)); }
.offer-card.orange  { background:linear-gradient(135deg, var(--orange), oklch(0.55 0.16 40)); }
.offer-card .o-icon { font-size:1.6rem; }
.offer-card .o-title { font-family:'Fraunces',serif; font-size:1.2rem; }
.offer-card .o-sub { font-size:.85rem; opacity:.92; }

/* Product grid + cards */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.2rem; }
.product-card { background:var(--card); border:1px solid var(--border); border-radius:1.2rem; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .22s, box-shadow .22s; }
.product-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-card); }
.product-img { position:relative; aspect-ratio:1; overflow:hidden; background:#fff; cursor:zoom-in;
  display:flex; align-items:center; justify-content:center; padding:9%; box-sizing:border-box; }
.product-img img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; transition:transform .4s; }
.product-card:hover .product-img img { transform:scale(1.06); }
.product-img.grayscale img { filter:grayscale(1) opacity(.7); }
.product-badges { position:absolute; top:.6rem; left:.6rem; display:flex; gap:.3rem; flex-wrap:wrap; }
.discount-badge { background:var(--destructive); color:#fff; font-weight:800; font-size:.72rem; padding:.15rem .5rem; border-radius:999px; }
.tag-badge { background:rgba(255,255,255,.92); color:var(--foreground); font-size:.7rem; font-weight:700; padding:.15rem .5rem; border-radius:999px; text-transform:capitalize; }
.stock-dot { position:absolute; bottom:.6rem; right:.6rem; background:rgba(255,255,255,.92); font-size:.7rem; font-weight:700;
  padding:.15rem .5rem; border-radius:999px; }
.stock-dot.in { color:var(--green); } .stock-dot.out { color:var(--destructive); }
.zoom-hint { position:absolute; top:.6rem; left:.6rem; right:auto; background:rgba(0,0,0,.5); color:#fff; font-size:.68rem;
  padding:.1rem .45rem; border-radius:999px; opacity:0; transition:opacity .2s; pointer-events:none; z-index:1; }
.product-img:hover .zoom-hint { opacity:1; }
.product-body { padding:.85rem; display:flex; flex-direction:column; gap:.25rem; flex:1; }
.product-brand { font-size:.72rem; color:var(--muted-fg); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.product-name { font-size:1rem; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; }
.product-alt { font-size:.78rem; color:var(--orange-fg); font-style:italic; }
.product-meta { font-size:.78rem; color:var(--muted-fg); }
.rating-chip { font-size:.78rem; color:var(--muted-fg); white-space:nowrap; }
.product-stock-info { font-size:.74rem; font-weight:600; }
.stock-ok { color:var(--green); } .stock-low { color:var(--orange-fg); } .stock-out { color:var(--destructive); }
.product-footer { margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding-top:.5rem; }
.product-price { font-family:'Fraunces',serif; font-size:1.15rem; font-weight:700; }
.product-old-price { color:var(--muted-fg); text-decoration:line-through; font-size:.85rem; margin-left:.3rem; }

/* Toolbar (search/sort) */
.toolbar { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; margin-bottom:1.4rem; }
.toolbar .input { max-width:280px; }
.chip { padding:.35rem .8rem; border-radius:999px; border:1.5px solid var(--border); font-weight:600; font-size:.82rem; }
.chip.active { background:var(--primary); color:#fff; border-color:var(--primary); }

/* Cart drawer */
.drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .25s; z-index:300; }
.drawer-overlay.open { opacity:1; pointer-events:auto; }
.drawer { position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--background);
  box-shadow:-10px 0 40px rgba(0,0,0,.2); transform:translateX(100%); transition:transform .28s; z-index:310;
  display:flex; flex-direction:column; }
.drawer.open { transform:translateX(0); }
.drawer-head { padding:1.1rem 1.2rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.drawer-head h3 { font-size:1.3rem; }
.drawer-body { flex:1; overflow:auto; padding:1rem 1.2rem; }
.drawer-foot { border-top:1px solid var(--border); padding:1.1rem 1.2rem; }
.cart-row { display:flex; gap:.8rem; padding:.7rem 0; border-bottom:1px solid var(--border); }
.cart-row img { width:60px; height:60px; border-radius:.7rem; object-fit:cover; }
.cart-row .nm { font-weight:700; font-size:.9rem; }
.cart-row .meta { font-size:.78rem; color:var(--muted-fg); }
.qty { display:inline-flex; align-items:center; gap:.4rem; border:1.5px solid var(--border); border-radius:999px; padding:.1rem; }
.qty button { width:1.6rem; height:1.6rem; border-radius:999px; font-weight:800; }
.qty button:hover { background:var(--muted); }
.cart-empty { text-align:center; color:var(--muted-fg); padding:3rem 1rem; }
.summary-row { display:flex; justify-content:space-between; margin:.3rem 0; font-size:.92rem; }
.summary-row.total { font-weight:800; font-size:1.15rem; font-family:'Fraunces',serif; }

/* Toast */
#toast-container { position:fixed; bottom:5.5rem; left:50%; transform:translateX(-50%); z-index:400; display:flex; flex-direction:column; gap:.5rem; }
.toast { background:var(--maroon); color:#fff; padding:.7rem 1.1rem; border-radius:999px; font-weight:600; font-size:.88rem;
  box-shadow:var(--shadow-card); animation:toastIn .3s ease; }
@keyframes toastIn { from { opacity:0; transform:translateY(10px);} to {opacity:1; transform:translateY(0);} }

/* Floating WhatsApp */
.wa-float { position:fixed; bottom:1.4rem; right:1.4rem; z-index:250; background:#25D366; color:#fff;
  border-radius:999px; padding:.8rem 1.1rem; font-weight:700; box-shadow:0 10px 30px rgba(37,211,102,.4);
  display:inline-flex; align-items:center; gap:.5rem; }
.wa-float:hover { transform:translateY(-2px); }

/* Product detail */
.pd-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
.pd-img { border-radius:1.4rem; overflow:hidden; border:1px solid var(--border); cursor:zoom-in; background:#fff;
  display:flex; align-items:center; justify-content:center; padding:6%; box-sizing:border-box; aspect-ratio:1; }
.pd-img img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.pd-title { font-size:2rem; }
.pd-price { font-family:'Fraunces',serif; font-size:1.8rem; color:var(--primary); }
.pd-spec { display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; margin:1rem 0; font-size:.92rem; }
.pd-spec dt { color:var(--muted-fg); font-weight:600; }

/* Lightbox */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:500; cursor:zoom-out; padding:2rem; }
.lightbox.open { display:flex; }
.lightbox img { max-width:90vw; max-height:90vh; border-radius:1rem; box-shadow:0 20px 60px rgba(0,0,0,.5); }

/* Footer */
footer { background:var(--maroon); color:var(--maroon-fg); margin-top:3rem; padding:2.5rem 0 1.2rem; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:1.6rem; }
.footer-grid h4 { color:#fff; margin-bottom:.7rem; font-size:1.1rem; }
.footer-grid a, .footer-contact-item { color:rgba(255,255,255,.8); font-size:.9rem; display:block; margin:.3rem 0; }
.footer-grid a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.15); margin-top:1.6rem; padding-top:1rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-size:.82rem; color:rgba(255,255,255,.7); }

/* Flash + empty */
.flash { padding:.8rem 1rem; border-radius:.8rem; margin-bottom:1rem; font-weight:600; }
.flash.success { background:oklch(0.58 0.15 150 / .15); color:var(--primary); }
.flash.error { background:oklch(0.58 0.22 27 / .12); color:var(--destructive); }
.empty-state { text-align:center; padding:4rem 1rem; color:var(--muted-fg); }
.empty-state .big { font-size:3rem; }

/* Responsive */
@media (max-width:860px){
  .hero-inner, .pd-grid { grid-template-columns:1fr; }
  .hero-img { order:-1; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .nav-search { order:3; flex-basis:100%; max-width:none; }
  .nav-inner { flex-wrap:wrap; }
  .hide-sm { display:none; }
}
@media (max-width:520px){
  .footer-grid { grid-template-columns:1fr; }
  .hero-stats { gap:1.2rem; }
}

/* ---- Breadcrumbs & back button (page journey) ---- */
.crumbs-bar { border-bottom:1px solid var(--border); background:var(--card); }
.crumbs-inner { max-width:80rem; margin:0 auto; padding:.7rem 1.5rem; display:flex; align-items:center;
  gap:.9rem; flex-wrap:wrap; }
.back-btn { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .8rem; border-radius:999px;
  border:1.5px solid var(--border); font-weight:700; font-size:.82rem; color:var(--foreground); background:var(--card); }
.back-btn:hover { border-color:var(--primary); color:var(--primary); }
.breadcrumb { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:.85rem; color:var(--muted-fg); }
.breadcrumb a:hover { color:var(--primary); }
.breadcrumb .sep { opacity:.45; }
.breadcrumb .current { color:var(--foreground); font-weight:700; }

/* ---- Floating music toggle (ambient tanpura) ---- */
.music-btn { position:fixed; bottom:1.4rem; left:1.4rem; z-index:250; background:var(--maroon); color:#fff;
  border-radius:999px; padding:.7rem .95rem; font-weight:700; font-size:.85rem; box-shadow:var(--shadow-card);
  display:inline-flex; align-items:center; gap:.5rem; transition:transform .15s, background .2s; }
.music-btn:hover { transform:translateY(-2px); }
.music-btn.playing { background:var(--primary); }
.music-btn .eq { display:inline-flex; gap:2px; align-items:flex-end; height:14px; }
.music-btn .eq i { width:3px; height:4px; background:currentColor; border-radius:2px; }
.music-btn.playing .eq i { animation:eq 0.9s ease-in-out infinite; }
.music-btn.playing .eq i:nth-child(2){ animation-delay:.15s } .music-btn.playing .eq i:nth-child(3){ animation-delay:.3s }
@keyframes eq { 0%,100%{height:4px} 50%{height:14px} }
@media (max-width:520px){ .music-btn span.lbl { display:none; } }

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero-slider { position:relative; overflow:hidden; min-height:clamp(380px,46vw,520px); }
.hero-slide { position:absolute; inset:0; background:var(--g); color:#fff; opacity:0; visibility:hidden;
  transition:opacity .7s ease; display:flex; align-items:center; }
.hero-slide.active { opacity:1; visibility:visible; position:relative; }
.hero-slide::after { content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(ellipse at 85% 10%, oklch(0.75 0.2 60 / .25), transparent 55%),
  radial-gradient(ellipse at 5% 95%, oklch(0.6 0.14 150 / .22), transparent 55%); }
.hero-inner { display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center;
  position:relative; z-index:1; padding:2.5rem 0; }
.hero-copy .badge { margin-bottom:.8rem; }
.brand-word { font-family:'Fraunces',serif; font-weight:900; letter-spacing:-.01em; }
.hero-art { display:flex; align-items:center; justify-content:center; }
.art-svg { width:100%; max-width:380px; filter:drop-shadow(0 18px 30px rgba(0,0,0,.28)); }
.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px;
  border-radius:999px; border:none; background:rgba(255,255,255,.9); color:var(--maroon); font-size:1.6rem;
  font-weight:700; cursor:pointer; box-shadow:var(--shadow-soft); line-height:1; }
.hero-arrow.prev { left:1rem; } .hero-arrow.next { right:1rem; }
.hero-arrow:hover { background:#fff; }
.hero-dots { position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:.5rem; }
.hero-dots button { width:11px; height:11px; border-radius:999px; border:none; background:rgba(255,255,255,.5); cursor:pointer; padding:0; }
.hero-dots button.active { background:#fff; width:26px; }

/* ============================================================
   TOP PICKS / NEW ARRIVALS / FEATURED columns
   ============================================================ */
.picks-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.pick-col { background:var(--card); border:1px solid var(--border); border-radius:1.2rem; overflow:hidden; box-shadow:var(--shadow-soft); }
.pick-head { padding:1.1rem 1.3rem; color:#fff; }
.pick-head.green { background:var(--gradient-green); }
.pick-head.orange { background:var(--gradient-fresh); }
.pick-head.darkgreen { background:linear-gradient(135deg, oklch(0.42 0.1 155), oklch(0.3 0.08 158)); }
.ph-eyebrow { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; opacity:.9; }
.ph-title { font-family:'Fraunces',serif; font-size:1.5rem; font-weight:800; }
.pick-row { display:flex; align-items:center; gap:.8rem; padding:.8rem 1.1rem; border-top:1px solid var(--border); position:relative; }
.pick-thumb { flex-shrink:0; width:56px; height:56px; border-radius:.7rem; overflow:hidden; background:#fff;
  display:flex; align-items:center; justify-content:center; padding:4px; box-sizing:border-box; border:1px solid var(--border); }
.pick-thumb img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.pick-info { flex:1; min-width:0; }
.pick-name { font-weight:700; font-size:.92rem; color:var(--foreground); display:block; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pick-name:hover { color:var(--primary); }
.pick-meta { font-size:.76rem; color:var(--muted-fg); }
.pick-price { font-weight:800; color:var(--primary); font-size:.95rem; }
.pick-price .product-old-price { margin-left:.35rem; }
.pick-badge { display:inline-block; margin-top:.2rem; font-size:.62rem; font-weight:800; letter-spacing:.04em;
  padding:.1rem .45rem; border-radius:.35rem; color:#fff; }
.pick-badge.orange { background:var(--orange); } .pick-badge.green { background:var(--green); }
.pick-badge.sky { background:oklch(0.55 0.13 235); } .pick-badge.primary { background:var(--primary); }
.pick-add { flex-shrink:0; width:40px; height:40px; border-radius:999px; cursor:pointer;
  background:#fff; color:var(--green); border:1.6px solid var(--green); font-size:1.05rem;
  box-shadow:var(--shadow-soft); display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.pick-add:hover { background:var(--green); color:#fff; transform:translateY(-1px); }

/* ============================================================
   BEST SELLING CAROUSEL
   ============================================================ */
.carousel-nav { display:flex; gap:.5rem; }
.carousel-btn { width:40px; height:40px; border-radius:999px; border:1.5px solid var(--border); background:var(--card);
  font-size:1.4rem; color:var(--maroon); cursor:pointer; line-height:1; }
.carousel-btn:hover { border-color:var(--primary); color:var(--primary); }
.carousel { display:flex; gap:1.2rem; overflow-x:auto; scroll-behavior:smooth; padding-bottom:.6rem;
  scroll-snap-type:x mandatory; scrollbar-width:thin; }
.carousel::-webkit-scrollbar { height:8px; } .carousel::-webkit-scrollbar-thumb { background:var(--border); border-radius:999px; }
.carousel-item { flex:0 0 clamp(220px,70vw,260px); scroll-snap-align:start; }

/* ============================================================
   WHY CHOOSE SWAGATHAM
   ============================================================ */
.why-section { background:linear-gradient(180deg, transparent, oklch(0.96 0.02 150 / .5)); }
.why-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:2.5rem; align-items:center; }
.why-art .art-svg { max-width:360px; filter:drop-shadow(0 14px 24px rgba(0,0,0,.16)); }
.why-list { display:flex; flex-direction:column; gap:1.3rem; }
.why-item { display:flex; gap:1rem; align-items:flex-start; }
.why-check { flex-shrink:0; width:38px; height:38px; border-radius:999px; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; box-shadow:var(--shadow-soft); }
.why-item b { font-family:'Fraunces',serif; font-size:1.15rem; }
.why-item p { color:var(--muted-fg); font-size:.92rem; margin-top:.15rem; }

/* ============================================================
   WISHLIST heart + page
   ============================================================ */
.wish-toggle { position:absolute; top:.6rem; right:.6rem; z-index:2; width:34px; height:34px; border-radius:999px;
  border:none; cursor:pointer; background:rgba(255,255,255,.92); color:var(--destructive); font-size:1.15rem;
  line-height:1; box-shadow:var(--shadow-soft); transition:transform .15s; }
.wish-toggle:hover { transform:scale(1.12); }
.wish-toggle.active { background:var(--destructive); color:#fff; }
.wishlist-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.4rem; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:880px){
  .picks-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; } .why-art { max-width:300px; margin:0 auto; }
  .hero-inner { grid-template-columns:1fr; text-align:center; }
  .hero-art { order:-1; } .art-svg { max-width:240px; }
  .hero-copy .hero-btns { justify-content:center; }
}

/* ============================================================
   SUBNAV (header tabs)
   ============================================================ */
.subnav { background:var(--maroon); position:sticky; top:0; z-index:90; }
.subnav-inner { max-width:80rem; margin:0 auto; padding:0 1rem; display:flex; align-items:center; gap:.3rem; }
.subnav-links { display:flex; gap:.25rem; flex-wrap:wrap; flex:1; }
.subnav-links a { color:rgba(255,255,255,.85); font-weight:600; font-size:.86rem; letter-spacing:.2px;
  padding:.62rem .9rem; border-radius:.5rem; white-space:nowrap; transition:background .15s, color .15s;
  line-height:1.1; }
.subnav-links a:hover { color:#fff; background:rgba(255,255,255,.12); }
.subnav-links a.active { color:#fff; background:rgba(255,255,255,.18); box-shadow:inset 0 -2px 0 var(--orange); }
/* hamburger toggle (hidden on desktop) */
.subnav-toggle { display:none; align-items:center; gap:.5rem; background:transparent; border:none;
  color:#fff; font-weight:700; font-size:.9rem; padding:.7rem .4rem; cursor:pointer; }
.sn-bars, .sn-bars:before, .sn-bars:after { content:""; display:block; width:18px; height:2px;
  background:#fff; border-radius:2px; position:relative; }
.sn-bars:before { position:absolute; top:-6px; } .sn-bars:after { position:absolute; top:6px; }

@media (max-width: 860px) {
  .subnav-inner { flex-wrap:wrap; align-items:stretch; }
  .subnav-toggle { display:flex; }
  .subnav-links { display:none; flex-direction:column; flex-basis:100%; gap:0;
    padding:.3rem 0 .6rem; }
  .subnav-links.open { display:flex; }
  .subnav-links a { padding:.8rem .6rem; border-radius:.4rem; font-size:.95rem; }
  .subnav-links a + a { border-top:1px solid rgba(255,255,255,.08); }
}

/* ============================================================
   PROFESSIONAL HERO (real photo + text panel, no overlap)
   ============================================================ */
.hero-pro { display:grid; grid-template-columns:1.05fr .95fr; min-height:clamp(360px,42vw,500px); background:#0d0d0d; }
.hero-pro-media { position:relative; overflow:hidden; }
.hero-pro-media img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-pro-media::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 60%, oklch(0.3 0.085 38) 100%); }
.hero-pro-panel { background:var(--gradient-hero); color:#fff; display:flex; align-items:center; position:relative; }
.hero-pro-panel::before { content:""; position:absolute; inset:0; background:
  radial-gradient(ellipse at 80% 15%, oklch(0.72 0.2 60 / .25), transparent 55%); }
.hero-pro-inner { padding:2.6rem clamp(1.5rem,4vw,3rem); position:relative; z-index:1; max-width:34rem; }
.hero-pro-inner h1 { font-size:clamp(2rem,4.2vw,3.3rem); line-height:1.05; margin:.6rem 0 .8rem; color:#fff; }
.brand-word { font-family:'Fraunces',serif; font-weight:900; }
.hero-pro-inner p { color:rgba(255,255,255,.85); font-size:1.02rem; margin-bottom:1.4rem; }
.hero-trust { display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:1.4rem; font-size:.85rem;
  color:rgba(255,255,255,.85); font-weight:600; }
.btn-outline-light { background:transparent; border:1.5px solid rgba(255,255,255,.6); color:#fff; }
.btn-outline-light:hover { background:rgba(255,255,255,.14); border-color:#fff; }

/* bigger, bolder offer cards */
.offer-card.primary { background:var(--gradient-fresh); grid-column:span 2; padding:1.8rem 2rem; }
.offer-card.primary .o-icon { font-size:3rem; }
.offer-card.primary .o-title { font-size:1.7rem; }
.offer-card.primary .o-sub { font-size:1.05rem; }
.offer-card { padding:1.4rem 1.6rem; }
.offer-card .o-title { font-size:1.3rem; }

/* pre-order strip on vegetables */
.preorder-strip { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:var(--secondary); border:1px solid var(--border); border-radius:1rem; padding:.9rem 1.2rem; margin-bottom:1.2rem;
  font-size:.95rem; color:var(--secondary-fg); }

/* ============================================================
   QUICK-VIEW MODAL
   ============================================================ */
.qv-overlay { position:fixed; inset:0; background:rgba(20,10,5,.55); z-index:300; opacity:0; visibility:hidden; transition:.2s; }
.qv-overlay.open { opacity:1; visibility:visible; }
.qv-modal { position:fixed; z-index:301; left:50%; top:50%; transform:translate(-50%,-48%) scale(.97);
  width:min(820px,94vw); max-height:90vh; overflow:auto; background:var(--card); border-radius:1.4rem;
  box-shadow:var(--shadow-card); opacity:0; visibility:hidden; transition:.22s; }
.qv-modal.open { opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.qv-close { position:absolute; top:.8rem; right:.8rem; z-index:2; width:36px; height:36px; border-radius:999px;
  border:none; background:rgba(0,0,0,.06); cursor:pointer; font-size:1rem; }
.qv-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; padding:1.6rem; }
.qv-img { border-radius:1rem; overflow:hidden; background:var(--muted); aspect-ratio:1; cursor:zoom-in; }
.qv-img img { width:100%; height:100%; object-fit:cover; }
.qv-brand { color:var(--orange-fg); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; }
.qv-title { font-family:'Fraunces',serif; font-size:1.7rem; line-height:1.1; margin:.2rem 0; }
.qv-alt { color:var(--muted-fg); font-style:italic; margin-bottom:.6rem; }
.qv-price { font-size:1.6rem; font-weight:800; color:var(--primary); margin:.6rem 0; }
.qv-price .product-old-price { font-size:1rem; }
.qv-desc { color:var(--muted-fg); font-size:.92rem; line-height:1.55; margin:.6rem 0 1rem; }
.qv-spec { font-size:.86rem; margin:.5rem 0 1rem; }
.qv-spec div { display:flex; justify-content:space-between; padding:.3rem 0; border-bottom:1px solid var(--border); }
.qv-qty { display:inline-flex; align-items:center; border:1.5px solid var(--border); border-radius:.6rem; overflow:hidden; margin-right:.6rem; }
.qv-qty button { width:38px; height:40px; border:none; background:var(--muted); font-size:1.1rem; cursor:pointer; }
.qv-qty span { width:44px; text-align:center; font-weight:700; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-section { background:linear-gradient(180deg, oklch(0.96 0.02 70 / .6), transparent); }
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.testi-card { background:var(--card); border:1px solid var(--border); border-radius:1.2rem; padding:1.5rem;
  box-shadow:var(--shadow-soft); }
.testi-stars { color:#f5a623; margin-bottom:.6rem; }
.testi-card blockquote { font-size:.98rem; line-height:1.5; }
.testi-card figcaption { display:flex; align-items:center; gap:.7rem; margin-top:1rem; }
.testi-ava { width:42px; height:42px; border-radius:999px; background:var(--gradient-green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-family:'Fraunces',serif; }
.testi-card figcaption b { display:block; } .testi-card figcaption span { color:var(--muted-fg); font-size:.82rem; }

@media (max-width:880px){
  .hero-pro { grid-template-columns:1fr; } .hero-pro-media { min-height:220px; }
  .testi-grid { grid-template-columns:1fr; }
  .offer-card.primary { grid-column:span 1; }
  .qv-grid { grid-template-columns:1fr; }
}

/* ============================================================
   REWARDS DASHBOARD + CONTACT
   ============================================================ */
.reward-card { margin-top:1.4rem; border-radius:1.4rem; padding:1.6rem; color:#fff; box-shadow:var(--shadow-card);
  background:var(--gradient-warm); }
.reward-card.reward-gold { background:linear-gradient(135deg, oklch(0.72 0.15 80), oklch(0.5 0.13 55)); }
.reward-card.reward-silver { background:linear-gradient(135deg, oklch(0.7 0.02 250), oklch(0.45 0.02 250)); }
.reward-card.reward-bronze { background:linear-gradient(135deg, oklch(0.6 0.1 50), oklch(0.42 0.1 40)); }
.reward-top { display:flex; justify-content:space-between; align-items:flex-start; }
.reward-hello { opacity:.9; font-size:.9rem; }
.reward-tier { font-family:'Fraunces',serif; font-size:1.8rem; font-weight:800; }
.reward-points { text-align:center; background:rgba(255,255,255,.18); border-radius:1rem; padding:.5rem .9rem; }
.reward-points .n { font-family:'Fraunces',serif; font-size:1.7rem; font-weight:800; }
.reward-points .l { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
.reward-save { font-size:1.15rem; margin:1.1rem 0; }
.reward-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.reward-stats > div { background:rgba(255,255,255,.14); border-radius:.8rem; padding:.7rem; text-align:center; }
.reward-stats .rn { font-family:'Fraunces',serif; font-size:1.25rem; font-weight:800; }
.reward-stats .rl { font-size:.72rem; opacity:.85; }
.tier-ladder { display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap; }
.tier-ladder span { flex:1; min-width:120px; text-align:center; padding:.5rem; border-radius:.7rem; font-weight:700;
  font-size:.85rem; background:var(--muted); color:var(--muted-fg); border:1px solid var(--border); }
.tier-ladder span.on { background:var(--secondary); color:var(--secondary-fg); border-color:var(--green); }

.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.4rem; }
.contact-tile { display:flex; align-items:center; gap:.9rem; background:var(--card); border:1px solid var(--border);
  border-radius:1rem; padding:1.1rem; box-shadow:var(--shadow-soft); }
.contact-tile:hover { border-color:var(--primary); }
.contact-tile .ci { font-size:1.8rem; }
.contact-tile b { display:block; } .contact-tile span { color:var(--muted-fg); font-size:.88rem; }
@media (max-width:680px){ .contact-grid { grid-template-columns:1fr; } .preorder-layout { grid-template-columns:1fr !important; } }

/* ============================================================
   PHOTO HERO SLIDER (.phero)
   ============================================================ */
.phero { position:relative; overflow:hidden; height:clamp(420px,42vw,520px); background:#0d0d0d; }
.phero-slide { position:absolute; inset:0; display:grid; grid-template-columns:1.05fr .95fr;
  opacity:0; visibility:hidden; transition:opacity .6s ease; }
.phero-slide.active { opacity:1; visibility:visible; }
.phero-media { position:relative; overflow:hidden; }
.phero-media img { width:100%; height:100%; object-fit:cover; display:block; }
.phero-media::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 55%, oklch(0.3 0.085 38) 100%); }
.phero-panel { background:var(--gradient-hero); color:#fff; display:flex; align-items:center; position:relative; }
.phero-panel::before { content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 80% 15%, oklch(0.72 0.2 60 / .25), transparent 55%); }
.phero-inner { padding:2.4rem clamp(1.5rem,4vw,3rem); position:relative; z-index:1; max-width:34rem; }
.phero-inner h1 { font-size:clamp(2rem,4.2vw,3.2rem); line-height:1.05; margin:.6rem 0 .8rem; color:#fff; }
.phero-inner p { color:rgba(255,255,255,.85); font-size:1.02rem; margin-bottom:1.3rem; }
.phero-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:44px; height:44px;
  border-radius:999px; border:none; background:rgba(255,255,255,.92); color:var(--maroon); font-size:1.6rem;
  cursor:pointer; box-shadow:var(--shadow-soft); line-height:1; }
.phero-arrow.prev { left:1rem; } .phero-arrow.next { right:1rem; }
.phero-dots { position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); z-index:4; display:flex; gap:.5rem; }
.phero-dots button { width:11px; height:11px; border-radius:999px; border:none; background:rgba(255,255,255,.55); cursor:pointer; padding:0; }
.phero-dots button.active { background:#fff; width:26px; }
@media (max-width:880px){
  .phero { height:auto; }
  .phero-slide { position:relative; inset:auto; display:none; grid-template-columns:1fr; }
  .phero-slide.active { display:grid; }
  .phero-media { min-height:200px; }
  .phero-arrow { display:none; }
}

/* clickable offer cards */
.offer-card { cursor:pointer; text-decoration:none; transition:transform .15s, box-shadow .2s; position:relative; }
.offer-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-card); }
.offer-cta { position:absolute; right:1.2rem; bottom:.9rem; font-weight:800; font-size:.85rem; color:#fff; opacity:.95; }
.offer-card.primary .offer-cta { font-size:1rem; }

/* Why-choose real basket photo + brand overlay */
.why-photo { position:relative; border-radius:1.4rem; overflow:hidden; box-shadow:var(--shadow-card); }
.why-photo img { width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3; }
.why-photo-badge { position:absolute; left:1rem; bottom:1rem; background:rgba(255,255,255,.94);
  border-radius:1rem; padding:.6rem 1rem; box-shadow:var(--shadow-soft); text-align:center; }
.why-photo-badge .leaf { font-size:1.1rem; }
.why-photo-badge b { display:block; font-family:'Fraunces',serif; font-size:1.25rem; color:var(--green); line-height:1; }
.why-photo-badge span { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--maroon); }

/* testimonial avatar — white, bold, readable on darker green */
.testi-ava { background:linear-gradient(135deg, oklch(0.5 0.13 150), oklch(0.34 0.1 155)) !important;
  color:#fff !important; font-weight:800 !important; }

/* ============================================================
   PAGE HERO BANDS + Contact map / delivery checker
   ============================================================ */
.page-hero { background:var(--gradient-hero); color:#fff; position:relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 85% 10%, oklch(0.72 0.2 60 / .25), transparent 55%),
             radial-gradient(ellipse at 5% 95%, oklch(0.6 0.14 150 / .22), transparent 55%); }
.page-hero-inner { max-width:80rem; margin:0 auto; padding:2.4rem 1.5rem; position:relative; z-index:1;
  display:flex; align-items:center; gap:1.2rem; }
.page-hero .ph-emoji { font-size:3rem; filter:drop-shadow(0 6px 12px rgba(0,0,0,.25)); }
.page-hero h1 { font-family:'Fraunces',serif; font-size:clamp(1.8rem,3.5vw,2.6rem); color:#fff; }
.page-hero p { color:rgba(255,255,255,.85); margin-top:.25rem; max-width:40rem; }

.map-embed { border:0; width:100%; height:320px; border-radius:1.2rem; box-shadow:var(--shadow-soft); }
.deliv-check { background:var(--card); border:1px solid var(--border); border-radius:1.2rem; padding:1.4rem;
  box-shadow:var(--shadow-soft); }
.deliv-result { margin-top:.9rem; padding:.9rem 1rem; border-radius:.8rem; font-weight:600; display:none; }
.deliv-result.ok { display:block; background:var(--secondary); color:var(--secondary-fg); }
.deliv-result.no { display:block; background:oklch(0.95 0.05 27); color:var(--destructive); }
.about-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:1.6rem 0; }
.about-stat { background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1.1rem; text-align:center; box-shadow:var(--shadow-soft); }
.about-stat .n { font-family:'Fraunces',serif; font-size:1.8rem; color:var(--primary); }
.about-stat .l { font-size:.8rem; color:var(--muted-fg); font-weight:600; }
@media (max-width:680px){ .about-stats { grid-template-columns:1fr 1fr; } .page-hero-inner { flex-direction:column; text-align:center; } }

/* track timeline + help, loyalty tier cards */
.track-timeline { display:flex; justify-content:space-between; gap:.5rem; text-align:center; }
.track-step { flex:1; opacity:.35; }
.track-step.done { opacity:1; }
.track-ic { font-size:1.7rem; }
.track-lb { font-size:.78rem; font-weight:700; color:var(--muted-fg); }
.track-step.done .track-lb { color:var(--green); }
.track-help { margin-top:1.4rem; display:flex; flex-direction:column; gap:1rem; }
.th-item { display:flex; gap:.9rem; align-items:flex-start; background:var(--card); border:1px solid var(--border);
  border-radius:1rem; padding:1rem 1.1rem; box-shadow:var(--shadow-soft); }
.th-item span { font-size:1.5rem; } .th-item b { display:block; } .th-item p { color:var(--muted-fg); font-size:.88rem; }
.tier-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.2rem; }
.tier-card { background:var(--card); border:1px solid var(--border); border-radius:1.1rem; padding:1.3rem; text-align:center;
  box-shadow:var(--shadow-soft); }
.tier-card .tc-medal { font-size:2.4rem; }
.tier-card b { display:block; font-family:'Fraunces',serif; font-size:1.2rem; margin-top:.3rem; }
.tier-card span { color:var(--muted-fg); font-size:.82rem; }
@media (max-width:680px){ .tier-cards { grid-template-columns:1fr 1fr 1fr; } .contact-map-grid { grid-template-columns:1fr !important; }
  .about-intro { grid-template-columns:1fr !important; } }

/* Indian accent utilities + festive offer card */
.badge-turmeric { background:var(--turmeric); color:var(--turmeric-fg); }
.badge-sindoor { background:var(--sindoor); color:#fff; }
.subnav a.active { border-bottom-color:var(--turmeric); }
.offer-card.primary { background:linear-gradient(135deg, var(--sindoor), var(--primary) 60%, oklch(0.7 0.17 70)); }
.section-eyebrow { color:var(--sindoor); }
.why-check { background:var(--green); }
.hero-trust span { position:relative; }

/* ============================================================
   ORDER CARD + ZOMATO-STYLE JOURNEY TIMELINE
   ============================================================ */
.order-card { background:var(--card); border:1px solid var(--border); border-radius:1.2rem; padding:1.4rem;
  margin-top:1.2rem; box-shadow:var(--shadow-soft); }
.oc-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
  padding-bottom:1rem; border-bottom:1px solid var(--border); }
.oc-token { font-family:'Fraunces',serif; font-weight:800; font-size:1.3rem; color:var(--primary); }
.oc-total { text-align:right; font-family:'Fraunces',serif; font-weight:800; font-size:1.3rem; }
.oc-total span { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:.72rem; color:var(--muted-fg); }
.journey { margin:1.2rem 0; }
.journey-step { display:flex; gap:1rem; }
.journey-step .js-rail { position:relative; display:flex; flex-direction:column; align-items:center; }
.js-dot { width:38px; height:38px; border-radius:999px; background:var(--muted); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; z-index:1; }
.journey-step .js-rail::after { content:""; position:absolute; top:38px; bottom:-4px; width:3px; background:var(--border); }
.journey-step:last-child .js-rail::after { display:none; }
.journey-step.done .js-dot { background:var(--green); border-color:var(--green); }
.journey-step.done .js-rail::after { background:var(--green); }
.journey-step.current .js-dot { box-shadow:0 0 0 5px oklch(0.6 0.14 150 / .2); animation:pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 5px oklch(0.6 0.14 150 / .2);} 50%{ box-shadow:0 0 0 9px oklch(0.6 0.14 150 / .08);} }
.js-body { padding-bottom:1.4rem; }
.js-label { font-weight:700; }
.journey-step.done .js-label { color:var(--foreground); }
.journey-step:not(.done) .js-label { color:var(--muted-fg); }
.js-time { font-size:.8rem; color:var(--muted-fg); }
.journey-step.current .js-time { color:var(--green); font-weight:700; }
.oc-items { border-top:1px solid var(--border); padding-top:.8rem; }

/* ============================================================
   ACCOUNTS: auth cards, dashboard, bar chart, invoice
   ============================================================ */
.acct-btn { position:relative; }
.auth-card { background:var(--card); border:1px solid var(--border); border-radius:1.4rem; padding:2rem;
  box-shadow:var(--shadow-card); }
.auth-emoji { font-size:2.6rem; text-align:center; }
.acct-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:1.4rem; margin-top:1.4rem; }
.panel-card { background:var(--card); border:1px solid var(--border); border-radius:1.2rem; padding:1.3rem; box-shadow:var(--shadow-soft); }
.pc-title { font-family:'Fraunces',serif; font-size:1.2rem; margin-bottom:.8rem; }
.bar-chart { display:flex; align-items:flex-end; gap:.7rem; height:170px; padding-top:1.2rem; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.bar-val { font-size:.68rem; font-weight:700; color:var(--muted-fg); margin-bottom:.2rem; }
.bar { width:70%; min-height:3px; border-radius:.4rem .4rem 0 0; background:var(--gradient-fresh); transition:height .4s; }
.bar-lb { font-size:.74rem; color:var(--muted-fg); margin-top:.35rem; font-weight:600; }
.acct-table { width:100%; border-collapse:collapse; }
.acct-table th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-fg); padding:.7rem .9rem; border-bottom:1px solid var(--border); }
.acct-table td { padding:.7rem .9rem; border-bottom:1px solid var(--border); font-size:.9rem; }
.acct-table tr:last-child td { border-bottom:none; }
.pill { display:inline-block; padding:.12rem .55rem; border-radius:999px; font-size:.72rem; font-weight:700; }
.pill.green { background:oklch(0.58 0.15 150 / .15); color:var(--green); }
.pill.orange { background:oklch(0.74 0.17 55 / .2); color:var(--orange-fg); }
.pill.gray { background:var(--muted); color:var(--muted-fg); }

/* Invoice */
.invoice { background:#fff; border:1px solid var(--border); border-radius:1rem; padding:2rem; box-shadow:var(--shadow-soft); }
.inv-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; border-bottom:2px solid var(--border); padding-bottom:1rem; }
.inv-logo { height:64px; width:auto; max-width:240px; object-fit:contain; }
.inv-title { font-family:'Fraunces',serif; font-size:1.8rem; font-weight:800; color:var(--primary); text-align:right; }
.inv-parties { display:flex; justify-content:space-between; gap:1rem; margin:1.2rem 0; font-size:.9rem; }
.inv-table { width:100%; border-collapse:collapse; margin:1rem 0; }
.inv-table th { text-align:left; font-size:.74rem; text-transform:uppercase; color:var(--muted-fg); border-bottom:1px solid var(--border); padding:.5rem; }
.inv-table td { padding:.6rem .5rem; border-bottom:1px solid var(--border); font-size:.9rem; }
.inv-table th:last-child, .inv-table td:last-child, .inv-table th:nth-child(2), .inv-table td:nth-child(2), .inv-table th:nth-child(3), .inv-table td:nth-child(3) { text-align:right; }
.inv-totals { max-width:18rem; margin-left:auto; }
@media print {
  body * { visibility:hidden; }
  #invoice, #invoice * { visibility:visible; }
  #invoice { position:absolute; left:0; top:0; width:100%; border:none; box-shadow:none; }
  .no-print, .topbar, .nav, .subnav, .wa-float, .vidhya-launcher, .vidhya-chat, .music-btn, footer { display:none !important; }
}
@media (max-width:680px){ .acct-grid { grid-template-columns:1fr; } }



/* language switcher in top strip */
.topbar-right { display:flex; align-items:center; gap:1rem; }
.lang-switch { display:inline-flex; align-items:center; gap:.25rem; }
.lang-switch select { background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.35);
  border-radius:.4rem; font-size:.76rem; font-weight:700; padding:.1rem .3rem; cursor:pointer; }
.lang-switch select option { color:#222; }

/* rewards "how it works" strip on account */
.rewards-how { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.4rem; }
.rh-item { display:flex; gap:.7rem; align-items:flex-start; background:var(--card); border:1px solid var(--border);
  border-radius:1rem; padding:1rem 1.1rem; box-shadow:var(--shadow-soft); }
.rh-item span { font-size:1.6rem; line-height:1; }
.rh-item b { display:block; } .rh-item p { color:var(--muted-fg); font-size:.84rem; }
@media (max-width:680px){ .rewards-how { grid-template-columns:1fr; } }

/* per-item notification bell */
.bell-toggle.on { background:var(--turmeric); color:var(--turmeric-fg); border-color:var(--turmeric); }

/* cart upsell / minimum-order progress banner */
.cart-progress{font-size:.86rem;line-height:1.35;padding:.6rem .75rem;border-radius:.7rem;margin-bottom:.7rem;
  background:rgba(46,160,67,.10);color:#1c6b2b;border:1px solid rgba(46,160,67,.25)}
.cart-progress.warn{background:rgba(214,120,16,.12);color:#9a4d06;border-color:rgba(214,120,16,.28)}
.cart-progress.ok{background:rgba(46,160,67,.14);color:#1c6b2b;border-color:rgba(46,160,67,.32)}
.btn.is-disabled{opacity:.5;pointer-events:none;filter:grayscale(.3)}
.checkout-alert{display:flex;gap:.6rem;align-items:flex-start;padding:.9rem 1rem;border-radius:.8rem;margin-bottom:1rem;
  background:rgba(214,120,16,.12);color:#9a4d06;border:1px solid rgba(214,120,16,.3);font-weight:600}

/* ---------- Pre-order redesign ---------- */
.po-contact{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1.1rem 1.2rem;margin:1.4rem 0 1rem;box-shadow:var(--shadow-soft)}
.po-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.po-contact input{padding:.7rem .8rem;border:1px solid var(--border);border-radius:.6rem;font:inherit;width:100%;background:var(--bg)}
.po-eyebrow{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--primary);margin:1.6rem 0 .8rem;display:flex;align-items:center;gap:.4rem}
.po-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1rem}
.po-card{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:.8rem;text-align:center;display:flex;flex-direction:column;gap:.5rem;box-shadow:var(--shadow-soft)}
.po-img{aspect-ratio:1;border-radius:.7rem;overflow:hidden;background:#fff}
.po-img img{width:100%;height:100%;object-fit:contain}
.po-name{font-weight:700;font-size:.92rem;line-height:1.25;min-height:2.3em;display:flex;align-items:center;justify-content:center}
.po-price{font-size:.86rem}
.po-size{padding:.5rem;border:1px solid var(--border);border-radius:.5rem;font:inherit;background:var(--bg)}
.po-counter{display:flex;align-items:center;justify-content:center;gap:.5rem}
.po-counter button{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--green);background:#fff;color:var(--green);font-size:1.1rem;font-weight:700;cursor:pointer;line-height:1}
.po-counter .po-n{min-width:1.4em;font-weight:700}
.po-add{margin-top:.2rem}

/* retention table */
.retain-table{width:100%;border-collapse:collapse;min-width:640px}
.retain-table th,.retain-table td{padding:.7rem .6rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.retain-table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-fg)}

@media (max-width:640px){
  .po-fields{grid-template-columns:1fr 1fr}
  .po-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.7rem}
  .po-eyebrow{font-size:1.1rem}
}

/* loyalty redemption line on reward card */
.reward-redeem{margin-top:.7rem;padding:.6rem .8rem;background:rgba(255,255,255,.16);border-radius:.7rem;font-size:.92rem}
.reward-redeem .muted{color:rgba(255,255,255,.8);font-size:.8rem;display:block;margin-top:.15rem}

/* checkout responsive grid */
.checkout-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:2rem;margin-top:1.4rem}
@media (max-width:760px){
  .checkout-grid{grid-template-columns:1fr;gap:1.2rem}
  .po-contact{padding:1rem}
}
@media (max-width:760px){ .about-intro{grid-template-columns:1fr !important;gap:1.2rem !important} }

/* columnar order line items (confirmation + tracking) — serial | name | weight | qty | amount */
.order-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .55rem;
  padding:.55rem 0;border-bottom:1px dashed var(--border);font-size:.92rem}
.order-line:last-of-type{border-bottom:none}
.order-line .ol-no{font-weight:700;color:var(--muted-fg);min-width:1.5rem}
.order-line .ol-name{font-weight:600}
.order-line .ol-sep{color:var(--border)}
.order-line .ol-unit{color:var(--muted-fg);font-size:.86rem;white-space:nowrap}
.order-line .ol-qty{color:var(--muted-fg);font-size:.86rem;white-space:nowrap}
.order-line .ol-amt{font-weight:700;white-space:nowrap;margin-left:auto;min-width:4.5rem;text-align:right}
@media (max-width:520px){
  .order-line .ol-amt{margin-left:auto}
}

/* pre-order: main grid + sticky basket */
.po-wrap{display:grid;grid-template-columns:1fr 320px;gap:1.6rem;align-items:start;margin-top:1.2rem}
.po-side{position:sticky;top:1rem;display:flex;flex-direction:column;gap:1rem}
.po-basket{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1rem 1.1rem;box-shadow:var(--shadow-soft)}
.po-basket h3{margin:0 0 .6rem;font-size:1.05rem;display:flex;align-items:center;gap:.5rem}
.po-li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.45rem 0;border-bottom:1px solid var(--border);font-size:.9rem}
.po-li:last-child{border-bottom:none}
.po-rm{background:none;border:none;color:var(--destructive);cursor:pointer;font-size:1rem;line-height:1}
.po-contact input{padding:.7rem .8rem;border:1px solid var(--border);border-radius:.6rem;font:inherit;width:100%;background:var(--bg)}
@media (max-width:820px){
  .po-wrap{grid-template-columns:1fr}
  .po-side{position:static}
}

/* how-points-work explainer */
.how-points{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.how-card{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1.1rem;text-align:center;box-shadow:var(--shadow-soft)}
.how-card .how-ic{font-size:1.8rem;margin-bottom:.4rem}
.how-card b{display:block;margin-bottom:.3rem;color:var(--primary)}
.how-card p{font-size:.85rem;color:var(--muted-fg);margin:0;line-height:1.4}
.how-eg{margin-top:1rem;padding:.9rem 1.1rem;background:rgba(214,120,16,.1);border-radius:.8rem;font-size:.9rem;color:#9a4d06}
@media (max-width:760px){ .how-grid{grid-template-columns:1fr 1fr} }

/* ---- full-bleed 7-image hero carousel ---- */
.phero-full{height:clamp(440px,46vw,560px)}
.phero-full .phero-slide{display:block;grid-template-columns:none}
.phero-full .phero-slide img{width:100%;height:100%;object-fit:cover;display:block}
.phero-full .phero-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;
  background:linear-gradient(to top,rgba(20,8,0,.62),rgba(20,8,0,.12) 38%,transparent 62%);pointer-events:none}
.phero-full .phero-overlay .phero-inner{pointer-events:auto;max-width:42rem;padding:0 clamp(1.2rem,4vw,3rem) clamp(1.4rem,4vw,2.6rem);color:#fff}
.phero-full .phero-tag{color:#fff;font-size:clamp(1.05rem,2.2vw,1.5rem);font-weight:700;margin:.5rem 0 1rem;
  text-shadow:0 2px 12px rgba(0,0,0,.6);max-width:30rem}
.phero-full .hero-btns{display:flex;flex-wrap:wrap;gap:.6rem}
@media (max-width:680px){
  .phero-full{height:clamp(360px,80vw,460px)}
  .phero-full .phero-slide{position:absolute;inset:0;display:none}
  .phero-full .phero-slide.active{display:block}
  .phero-full .phero-arrow{display:flex}
  .phero-full .hero-btns .btn{flex:1 1 auto;text-align:center}
}

/* promise section: two clean images (no overlap) */
.why-photo{display:grid;gap:1rem;position:static;overflow:visible;border-radius:0;box-shadow:none}
.why-photo-main{position:relative;border-radius:1.1rem;overflow:hidden;box-shadow:var(--shadow-card)}
.why-photo-main img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.why-photo-2{width:100%;border-radius:1.1rem;object-fit:cover;aspect-ratio:16/9;display:block;box-shadow:var(--shadow-card)}
@media (min-width:881px){
  .why-photo{grid-template-columns:1fr 1fr;align-items:stretch}
  .why-photo-main img,.why-photo-2{aspect-ratio:auto;height:100%;min-height:320px}
}

/* request-a-product */
.subnav-req{color:var(--sindoor,#c1272d)!important;font-weight:700}
.req-form{display:flex;flex-direction:column;gap:.7rem;margin-top:1.3rem;max-width:34rem}
.req-form input{padding:.8rem .9rem;border:1px solid var(--border);border-radius:.7rem;font:inherit;background:var(--card);width:100%}
.req-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.req-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.req-chip{background:var(--card);border:1px dashed var(--border);border-radius:999px;padding:.35rem .8rem;font-size:.85rem;color:var(--muted-fg)}
.req-banner{margin:2rem auto 0;max-width:var(--wrap,72rem);background:linear-gradient(120deg,#fff3e6,#ffe9d6);
  border:1px solid rgba(214,120,16,.25);border-radius:1.2rem;padding:1.4rem 1.6rem;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:1rem}
.req-banner .rb-txt b{font-family:var(--font-display);font-size:1.3rem;color:var(--primary);display:block}
.req-banner .rb-txt span{color:var(--muted-fg);font-size:.95rem}
@media (max-width:560px){ .req-row{grid-template-columns:1fr} .req-banner{flex-direction:column;text-align:center} }

/* footer social icons */
.footer-social{display:flex;gap:.6rem;margin-top:.7rem}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;transition:.15s}
.footer-social a:hover{background:#fff;color:var(--primary);transform:translateY(-2px)}

/* pre-order list line: serial | name | weight | qty */
.po-li-txt{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .45rem;font-size:.88rem}
.po-li-no{font-weight:700;color:var(--muted-fg)}
.po-li-name{font-weight:600}
.po-li-sep{color:var(--border)}
.po-li-unit,.po-li-qty{color:var(--muted-fg)}

/* pre-order contact form fields */
.po-field{margin-bottom:.7rem}
.po-field label{display:block;font-size:.82rem;font-weight:600;color:var(--fg);margin-bottom:.25rem}
.po-field input{width:100%}
.po-help{display:block;font-size:.76rem;color:var(--muted-fg);margin-top:.25rem}

/* subscription page */
.sub-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.4rem 0 1.6rem}
.sub-perk{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1rem;text-align:center}
.sub-perk span{font-size:1.7rem}
.sub-perk b{display:block;margin:.3rem 0 .15rem}
.sub-perk p{font-size:.82rem;color:var(--muted-fg);margin:0}
.sub-form{display:flex;flex-direction:column;gap:.9rem}
.sub-field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.35rem}
.sub-field input{width:100%;padding:.8rem .9rem;border:1px solid var(--border);border-radius:.7rem;font:inherit;background:var(--card)}
.seg{display:flex;flex-wrap:wrap;gap:.6rem}
.seg-opt{display:inline-flex;align-items:center;gap:.4rem;padding:.7rem 1rem;border:1.5px solid var(--border);border-radius:.7rem;cursor:pointer;font-weight:600;background:var(--card)}
.seg-opt:has(input:checked){border-color:var(--primary);background:rgba(214,120,16,.08);color:var(--primary)}
.seg-opt input{accent-color:var(--primary)}

/* support page */
.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.4rem 0}
.support-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;padding:1.4rem 1rem;
  background:var(--card);border:1px solid var(--border);border-radius:1.1rem;color:inherit;transition:.15s;box-shadow:var(--shadow-soft)}
.support-card:hover{transform:translateY(-3px);border-color:var(--primary)}
.support-card .sc-ic{font-size:2rem}
.support-card p{font-size:.85rem;color:var(--muted-fg);margin:0;word-break:break-word}
.support-hours{background:var(--card);border:1px solid var(--border);border-radius:1.1rem;padding:1.2rem 1.4rem;margin-top:.5rem}
.support-hours h3{margin:0 0 .6rem;font-size:1.05rem}
.sh-row{padding:.4rem 0;border-bottom:1px dashed var(--border);font-weight:600}
.sh-row:last-child{border-bottom:none}
@media (max-width:600px){
  .sub-perks,.support-grid{grid-template-columns:1fr}
}

/* footer credit (Arkanj) */
.footer-credit{border-top:1px solid rgba(255,255,255,.14);margin-top:.6rem;padding-top:.9rem;
  font-size:.8rem;color:rgba(255,255,255,.72);line-height:1.6;text-align:center}
.footer-credit a{color:#ffd9a8;font-weight:600}

/* subscribe subnav highlight */
.subnav-sub{color:#1c7d3a!important;font-weight:700}

/* ---- subscribe hero + success ---- */
.sub-hero{text-align:center;background:linear-gradient(135deg,#fff3e6,#ffe6d0 60%,#ffedd9);
  border:1px solid rgba(214,120,16,.2);border-radius:1.4rem;padding:2.2rem 1.5rem 2rem;margin-bottom:1.6rem;position:relative;overflow:hidden}
.sub-hero::after{content:"🥬🍎🌿";position:absolute;right:-6px;top:-10px;font-size:2.2rem;opacity:.25;transform:rotate(12deg)}
.sub-hero-badge{display:inline-block;background:#fff;color:var(--primary);font-weight:700;font-size:.8rem;
  padding:.4rem .9rem;border-radius:999px;box-shadow:var(--shadow-soft);margin-bottom:.7rem}
.sub-hero-title{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.3rem);margin:0 0 .5rem;color:#7a2e0e}
.sub-hero-sub{color:#9a5a2a;max-width:34rem;margin:0 auto;font-size:1rem}
.sub-success{text-align:center;background:linear-gradient(135deg,#eafaef,#dff5e6);border:1px solid rgba(46,160,67,.3);
  border-radius:1.4rem;padding:2.4rem 1.6rem}
.sub-success-ic{font-size:3rem;margin-bottom:.4rem}
.sub-success h2{font-family:var(--font-display);color:#1c6b2b;margin:0 0 .5rem;font-size:1.5rem}
.sub-success p{color:#2c7a43;max-width:30rem;margin:0 auto 1.2rem}
.sub-success-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* ---- social follow CTA band ---- */
.social-cta{background:linear-gradient(120deg,#fbe8d6,#fde9da);border-top:1px solid rgba(214,120,16,.18)}
.social-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:1.4rem 0;flex-wrap:wrap}
.social-cta-text b{display:block;font-family:var(--font-display);font-size:1.2rem;color:#7a2e0e}
.social-cta-text span{color:#9a5a2a;font-size:.92rem}
.social-cta-btns{display:flex;gap:.7rem;flex-wrap:wrap}
.social-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border-radius:999px;color:#fff;
  font-weight:700;font-size:.9rem;transition:.15s;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.social-pill:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(0,0,0,.18)}
.social-pill.ig{background:linear-gradient(45deg,#f09433,#e6683c 35%,#dc2743 55%,#cc2366 75%,#bc1888)}
.social-pill.fb{background:#1877f2}
@media (max-width:640px){.social-cta-inner{flex-direction:column;text-align:center}}

/* ---- separate Arkanj credit bar ---- */
.credit-bar{background:#1a1310;color:rgba(255,255,255,.7)}
.credit-bar-inner{display:flex;align-items:center;justify-content:center;gap:.6rem 1.4rem;
  padding:1.5rem 1rem 5.5rem;font-size:.82rem;flex-wrap:wrap;text-align:center;line-height:1.7;min-height:64px}
.credit-bar a{color:#ffb86b;font-weight:600;text-decoration:none}
.credit-bar a:hover{text-decoration:underline}
.credit-bar .cb-line{display:inline-flex;gap:.3rem;align-items:center}
@media (max-width:640px){
  .credit-bar-inner{flex-direction:column;text-align:center;gap:.45rem;padding:1.4rem 1rem 6.5rem}
}

/* ===== Chat with Vidhya ===== */
.vidhya-launcher{position:fixed;bottom:0;right:.6rem;z-index:300;background:transparent;border:none;
  cursor:pointer;padding:0;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 8px 18px rgba(122,46,14,.28));transition:.2s}
.vidhya-launcher[hidden]{display:none!important}
.vidhya-launcher:hover{transform:translateY(-4px)}
.vidhya-launcher .vl-full{height:172px;width:auto;display:block}
.vidhya-launcher .vl-bubble{position:absolute;top:-6px;right:78px;background:#fff;color:#7a2e0e;font-weight:700;
  font-size:.8rem;line-height:1.25;text-align:center;padding:.5rem .8rem;border-radius:1rem 1rem 0 1rem;
  box-shadow:0 6px 16px rgba(0,0,0,.16);white-space:nowrap;animation:vfloat 2.6s ease-in-out infinite}
.vidhya-launcher .vl-bubble:after{content:"";position:absolute;bottom:-7px;right:8px;border:7px solid transparent;
  border-top-color:#fff;border-bottom:0}
@keyframes vfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.vidhya-launcher .vl-tag{position:absolute;bottom:14px;left:-6px;background:linear-gradient(135deg,#d9531e,#e8821e);
  color:#fff;border-radius:999px;padding:.2rem .6rem;display:flex;flex-direction:column;line-height:1;text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,.2)}
.vidhya-launcher .vl-tag b{font-size:.74rem}
.vidhya-launcher .vl-tag small{font-size:.6rem;opacity:.9}

.vidhya-chat{position:fixed;bottom:1.3rem;right:1.3rem;z-index:301;width:370px;max-width:calc(100vw - 1.6rem);
  height:min(560px,78vh);background:#fff;border-radius:1.3rem;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(122,46,14,.35);border:1px solid rgba(214,120,16,.25);animation:vslide .25s ease}
.vidhya-chat[hidden]{display:none!important}
@keyframes vslide{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.vc-head{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;
  background:linear-gradient(135deg,#d9531e,#e8821e);color:#fff}
.vc-head .vc-ava{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.6)}
.vc-meta{display:flex;flex-direction:column;line-height:1.2;flex:1}
.vc-meta b{font-size:1rem}
.vc-meta span{font-size:.74rem;opacity:.92;display:flex;align-items:center;gap:.3rem}
.vc-online{width:8px;height:8px;background:#8dffb0;border-radius:50%;display:inline-block}
.vc-close{background:transparent;border:none;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;opacity:.9}
.vc-close:hover{opacity:1}
.vc-body{flex:1;overflow-y:auto;padding:1rem;background:#fbf6ef;display:flex;flex-direction:column;gap:.7rem}
.vc-msg{display:flex;gap:.5rem;max-width:88%}
.vc-msg.bot{align-self:flex-start}
.vc-msg.user{align-self:flex-end;flex-direction:row-reverse}
.vc-msg .vc-mava{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;align-self:flex-end}
.vc-bubble{padding:.6rem .8rem;border-radius:1rem;font-size:.9rem;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.vc-msg.bot .vc-bubble{background:#fff;border:1px solid #efe4d4;border-bottom-left-radius:.3rem;color:#3a2c20}
.vc-msg.user .vc-bubble{background:linear-gradient(135deg,#d9531e,#e8821e);color:#fff;border-bottom-right-radius:.3rem}
.vc-bubble a.vc-link{display:inline-block;margin-top:.4rem;margin-right:.35rem;padding:.32rem .7rem;
  background:#1c7d3a;color:#fff;border-radius:999px;font-size:.78rem;font-weight:600;text-decoration:none}
.vc-bubble a.vc-link.alt{background:#25D366}
.vc-bubble a.vc-link .wa-ic{vertical-align:-2px;margin-right:.25rem}
.vc-typing{display:inline-flex;gap:3px;padding:.7rem .8rem}
.vc-typing span{width:7px;height:7px;background:#c9b7a3;border-radius:50%;animation:vbounce 1.2s infinite}
.vc-typing span:nth-child(2){animation-delay:.2s}.vc-typing span:nth-child(3){animation-delay:.4s}
@keyframes vbounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.vc-chips{display:flex;gap:.4rem;flex-wrap:wrap;padding:.5rem .8rem;background:#fbf6ef;border-top:1px solid #f0e7db}
.vc-chip{padding:.4rem .8rem;background:#fff;border:1.4px solid #e8d9c6;border-radius:999px;font-size:.8rem;
  font-weight:600;color:#8a4a1e;cursor:pointer;white-space:nowrap}
.vc-chip:hover{background:#fff1e2;border-color:#d9531e}
.vc-input{display:flex;gap:.5rem;padding:.6rem .7rem;border-top:1px solid #f0e7db;background:#fff}
.vc-input input{flex:1;padding:.6rem .8rem;border:1.5px solid #e6dccd;border-radius:999px;font:inherit;outline:none}
.vc-input input:focus{border-color:#d9531e}
.vc-send{width:42px;height:42px;flex:none;border:none;border-radius:50%;background:linear-gradient(135deg,#d9531e,#e8821e);
  color:#fff;font-size:1.05rem;cursor:pointer}
.vc-foot{font-size:.68rem;color:#a08a76;text-align:center;padding:.35rem;background:#fff}
.vc-foot a{color:#d9531e;font-weight:600}
@media (max-width:480px){
  .vidhya-launcher .vl-full{height:130px}
  .vidhya-launcher .vl-bubble{right:60px;font-size:.72rem;padding:.4rem .6rem}
  .vidhya-launcher .vl-tag b{font-size:.66rem}
  .vidhya-chat{bottom:.6rem;right:.6rem;left:.6rem;width:auto;height:82vh}
}

/* ============================================================
   QA PASS — mobile responsiveness, alignment & UI polish
   ============================================================ */
html, body { overflow-x: hidden; max-width: 100%; }
img { max-width: 100%; height: auto; }

/* Consistent product/offer cards: names reserve space, CTAs align at the bottom */
.product-card { display: flex; flex-direction: column; height: 100%; }
.product-body { flex: 1; display: flex; flex-direction: column; }
.product-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.5em; }
.product-footer { margin-top: auto; display: flex; align-items: center;
  justify-content: space-between; gap: .5rem; }
.product-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  image-rendering: auto; }

/* Out-of-stock buttons */
.btn-soldout { background: #ececec !important; color: #9a9a9a !important;
  border: 1px solid #dcdcdc !important; cursor: not-allowed; font-weight: 700; }
.pick-add-off { opacity: .4; cursor: not-allowed; }

/* Subscribe tab — high-visibility green pill so it stands out in the subnav */
.subnav .subnav-sub { background: #1c7d3a; color: #fff !important; border-radius: 999px;
  padding: .28rem .8rem !important; font-weight: 700; }
.subnav .subnav-sub:hover { background: #16652f; }
.subnav .subnav-sub.active { box-shadow: 0 0 0 2px rgba(255,255,255,.5) inset; }

/* Category dropdown: a real scrollable panel that sits above content */
.cat-menu { max-height: 70vh; overflow-y: auto; z-index: 500; }

@media (max-width: 768px) {
  /* keep the search bar on its own full-width row and always visible */
  .nav-inner { flex-wrap: wrap; }
  .nav-search { order: 3; flex-basis: 100%; max-width: none; }
  /* category menu becomes a fixed, self-contained panel — never hides the search */
  .cat-menu { position: fixed; left: 8px; right: 8px; top: 128px; width: auto;
    max-height: 62vh; box-shadow: 0 14px 44px rgba(0,0,0,.3); }
  /* music toggle: subtle, not competing with primary actions */
  .music-btn { transform: scale(.82); transform-origin: bottom left; opacity: .8;
    padding: .5rem .6rem; }
  /* Vidhya launcher: smaller so it doesn't cover product content or buttons */
  .vidhya-launcher .vl-full { height: 108px; }
  .vidhya-launcher .vl-bubble { display: none; }
  .vidhya-launcher .vl-tag { bottom: 10px; }
  /* chat panel fills the screen cleanly on phones */
  .vidhya-chat { bottom: .5rem; right: .5rem; left: .5rem; width: auto; height: 80vh; }
  /* trim the empty gap above the footer credit bar (launcher is smaller now) */
  .credit-bar-inner { padding: 1.2rem 1rem 4rem; }
}

@media (max-width: 480px) {
  .vidhya-launcher .vl-full { height: 96px; }
  .music-btn { transform: scale(.78); transform-origin: bottom left; }
  .subnav-inner { gap: .35rem; }
  /* two-up product grid stays readable on small phones */
  .product-grid, .grid-cards { grid-template-columns: repeat(2, 1fr) !important; gap: .7rem !important; }
}

/* Google sign-in button + separator */
.oauth-sep{display:flex;align-items:center;gap:.8rem;margin:1rem 0;color:var(--muted-fg);font-size:.85rem}
.oauth-sep:before,.oauth-sep:after{content:"";flex:1;height:1px;background:var(--border)}
.btn-google{background:#fff;color:#3c4043;border:1.5px solid #dadce0;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center}
.btn-google:hover{background:#f7f8f8;box-shadow:0 1px 4px rgba(0,0,0,.12)}

/* Referral — home band + account card */
.referral-band{background:linear-gradient(135deg,#fff3e6,#ffe8d1);border-top:1px solid #f2dcc2;border-bottom:1px solid #f2dcc2}
.referral-band-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.6rem 1.5rem;flex-wrap:wrap}
.rb-badge{display:inline-block;background:#1c7d3a;color:#fff;font-weight:700;font-size:.78rem;padding:.25rem .7rem;border-radius:999px}
.rb-title{font-family:var(--font-display,serif);color:#7a2e0e;font-size:1.5rem;margin:.4rem 0 .2rem}
.rb-sub{color:#6b5b4d;max-width:640px;font-size:.95rem}
.rb-cta{flex:none}
.referral-card{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  background:linear-gradient(135deg,#1c7d3a,#2ea043);color:#fff;border-radius:1rem;padding:1.3rem 1.4rem;margin:1rem 0}
.referral-card .ref-title{font-weight:800;font-size:1.15rem}
.referral-card .ref-sub{opacity:.95;font-size:.9rem;margin:.3rem 0 .5rem;max-width:420px}
.referral-card .ref-points{font-size:.95rem}
.referral-card .ref-right{text-align:center;background:rgba(255,255,255,.14);border-radius:.8rem;padding:.8rem 1rem;min-width:180px}
.referral-card .ref-code-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;opacity:.85}
.referral-card .ref-code{font-size:1.35rem;font-weight:800;letter-spacing:1px;margin:.2rem 0 .6rem;font-family:monospace}
@media (max-width:600px){ .referral-band-inner{flex-direction:column;text-align:center}
  .referral-card{flex-direction:column} .referral-card .ref-right{min-width:0} }

/* Homepage campaign banner photos */
.pick-banner{width:100%;height:110px;object-fit:cover;border-radius:12px;margin-bottom:.7rem}
.offer-card .o-photo{width:100%;height:120px;object-fit:cover;border-radius:10px;margin-bottom:.5rem}

/* Product weight/size variant selector */
.variant-opt{border:1.5px solid #e0d6c8;background:#fff;border-radius:.6rem;padding:.5rem .8rem;
  font-weight:600;cursor:pointer;font-size:.9rem;color:#3a2c20;transition:.15s}
.variant-opt:hover:not([disabled]){border-color:#d9531e}
.variant-opt.active{background:#fff1e2;border-color:#d9531e;color:#d9531e}
.variant-opt[disabled]{opacity:.5;cursor:not-allowed;text-decoration:line-through}

/* "from" price label for multi-weight products */
.from-label{font-size:.7rem;font-weight:600;color:var(--muted-fg,#8a7a6a);text-transform:uppercase;letter-spacing:.3px}

/* Mobile: centre the logo on its own row */
@media (max-width: 720px){
  .nav-inner{ flex-wrap:wrap; justify-content:center; row-gap:.4rem; }
  .logo{ order:-1; flex-basis:100%; justify-content:center; }
  .logo-img{ height:clamp(72px, 20vw, 120px); margin:0 auto; }
  .nav-search{ order:2; flex:1 1 100%; }
  .nav-actions{ order:3; flex-wrap:wrap; justify-content:center; }
}
/* Vidhya avatar & launcher — responsive sizes */
.vc-head .vc-ava{ width:clamp(48px,12vw,60px); height:clamp(48px,12vw,60px); }
.vidhya-launcher .vl-full{ height:clamp(140px,26vw,188px) !important; }

/* Cross-sell band (orders ↔ pre-orders) */
.xsell-band{background:linear-gradient(135deg,#fff7ed,#f3faf0);border-top:1px solid #f0e2cc;padding:1.4rem 0;margin-top:1.4rem}
.xsell-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;flex-wrap:wrap}
.xsell-emoji{font-size:1.8rem}
.xsell-title{font-weight:800;font-size:1.05rem;color:#3a2c20}
.xsell-sub{font-size:.85rem;color:#7a6650;max-width:46ch}
.xsell-cta{margin-left:auto;white-space:nowrap}
.xsell-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.xsell-card{background:#fff;border:1px solid #eee;border-radius:.8rem;overflow:hidden;text-decoration:none;
  color:inherit;transition:transform .15s,box-shadow .15s;display:block}
.xsell-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.xsell-img{position:relative;aspect-ratio:1;background:#fff;display:flex;align-items:center;justify-content:center;padding:8%}
.xsell-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.xsell-badge{position:absolute;top:.4rem;left:.4rem;background:var(--sindoor,#c1272d);color:#fff;font-size:.65rem;
  font-weight:700;padding:.1rem .4rem;border-radius:.3rem}
.xsell-name{font-weight:600;font-size:.82rem;padding:.4rem .6rem 0;color:#3a2c20;line-height:1.25}
.xsell-price{padding:0 .6rem .6rem;font-weight:700;color:#d9531e;font-size:.85rem}
@media (max-width:640px){ .xsell-grid{grid-template-columns:repeat(2,1fr)} .xsell-cta{margin-left:0;flex-basis:100%} }

/* Account tables: horizontal scroll on small screens (no clipping) */
.table-scroll{-webkit-overflow-scrolling:touch}
.acct-table{width:100%;border-collapse:collapse;min-width:560px}
.acct-table th,.acct-table td{padding:.6rem .7rem;text-align:left;border-bottom:1px solid #f0eae0;font-size:.85rem;white-space:nowrap}
.acct-table th{background:#faf6ee;font-size:.72rem;text-transform:uppercase;letter-spacing:.3px;color:#8a6f52}
.acct-table td.wrap-cell{white-space:normal;min-width:180px}
@media (max-width:640px){
  .table-scroll::after{content:"→ swipe";display:block;text-align:right;font-size:.68rem;color:#b0a08c;padding:.2rem .6rem}
}

/* Vidhya drag handle */
.vl-drag{position:absolute;top:2px;left:50%;transform:translateX(-50%);z-index:5;cursor:grab;
  background:rgba(0,0,0,.35);color:#fff;border-radius:6px;font-size:.8rem;line-height:1;padding:2px 8px;
  opacity:0;transition:opacity .2s;user-select:none;touch-action:none}
.vidhya-launcher:hover .vl-drag{opacity:1}
.vl-drag:active{cursor:grabbing}
@media (max-width:720px){ .vl-drag{opacity:.85} }