/* ============================================================
   SWAGATHAM — Storefront styles
   Theme tokens are CSS variables; change them to re-skin instantly.
   ============================================================ */
:root {
  --radius: 1rem;
  --logo-height: 120px;       /* 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:var(--logo-height); width:auto; max-width:420px; 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:var(--muted); cursor:zoom-in; }
.product-img img { width:100%; height:100%; object-fit:cover; 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; right:.6rem; background:rgba(0,0,0,.45); color:#fff; font-size:.7rem;
  padding:.1rem .45rem; border-radius:999px; opacity:0; transition:opacity .2s; }
.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:var(--muted); }
.pd-img img { width:100%; aspect-ratio:1; object-fit:cover; }
.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:var(--muted); }
.pick-thumb img { width:100%; height:100%; object-fit:cover; }
.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; gap:.3rem; overflow-x:auto;
  scrollbar-width:none; }
.subnav-inner::-webkit-scrollbar { display:none; }
.subnav a { color:rgba(255,255,255,.82); font-weight:700; font-size:.86rem; padding:.7rem .85rem;
  white-space:nowrap; border-bottom:3px solid transparent; }
.subnav a:hover { color:#fff; }
.subnav a.active { color:#fff; border-bottom-color:var(--orange); }

/* ============================================================
   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, .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; } }