/* SatvicBites - Client Facing UI (light, fast) */
:root{
  /* SatvicBites brand palette (derived from logo) */
  --bg:#FFF7E6;            /* warm cream */
  --ink:#3B2A1A;           /* deep brown for body text */
  --muted:#6B4F3A;

  --yellow:#F2C84B;        /* Pitambari Yellow */
  --green:#1F8A5B;         /* emerald green */
  --coral:#E4574D;         /* red-coral headings */
  --teal:#128C7E;          /* accent teal */

  --softY:rgba(242,200,75,.24);
  --softT:rgba(18,140,126,.12);
  --softG:rgba(31,138,91,.12);
  --shadow:0 18px 45px rgba(2,23,53,.10); --shadow2:0 10px 22px rgba(2,23,53,.08);
  --r:18px; --r2:26px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(1100px 650px at 15% -10%,var(--softT),transparent 60%),
    radial-gradient(900px 600px at 90% 10%,var(--softG),transparent 55%),
    radial-gradient(900px 700px at 40% 110%,var(--softY),transparent 60%),
    var(--bg);
}

h1,h2,h3{color:var(--coral)}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.muted{color:var(--muted)}
.small{font-size:13px}
.skip{position:absolute;left:-999px;top:10px;padding:10px 12px;border-radius:999px;background:var(--softT);border:1px solid rgba(18,140,126,.35)}
.skip:focus{left:16px;z-index:999}

.topbar{background:linear-gradient(90deg,rgba(242,200,75,.30),rgba(18,140,126,.16),rgba(31,138,91,.14));border-bottom:1px solid rgba(59,42,26,.10)}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(59,42,26,.16);font-weight:800;font-size:13px}
.topbar__right{display:flex;gap:12px;flex-wrap:wrap;font-weight:800;font-size:13px}
.topbar__right a{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(59,42,26,.16)}

.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid rgba(59,42,26,.10)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{width:60px;height:60px;object-fit:contain;border-radius:18px;padding:4px;background:#fff;border:1px solid rgba(59,42,26,.18)}
.brand__text strong{display:block;line-height:1.1}
.brand__text span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nav a{font-size:14px;padding:10px 10px;border-radius:12px}
.nav a:hover{background:rgba(31,138,91,.10);color:var(--green)}
.navToggle{display:none;padding:10px 12px;border-radius:14px;border:1px solid rgba(59,42,26,.18);background:rgba(255,255,255,.9);cursor:pointer;font-size:18px}
.mobileMenu{border-top:1px solid rgba(59,42,26,.10);padding:12px 0;display:none;gap:10px}
.mobileMenu a{padding:12px 12px;border-radius:14px;background:var(--softY);border:1px solid rgba(242,200,75,.35)}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 14px;border-radius:999px;border:1px solid rgba(15,23,42,.14);font-weight:900;font-size:14px;transition:transform .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn--solid{background:linear-gradient(135deg,var(--green),rgba(31,138,91,.78));border-color:rgba(31,138,91,.65);color:#fff;box-shadow:0 10px 24px rgba(31,138,91,.22)}
.btn--ghost{background:var(--softY);border-color:rgba(242,200,75,.45)}
.btn--full{width:100%}

.hero{padding:28px 0 10px}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:16px;align-items:start}
.kicker{display:inline-flex;padding:8px 12px;border-radius:999px;background:linear-gradient(135deg,rgba(22,163,74,.10),rgba(14,165,233,.10));border:1px solid rgba(22,163,74,.20);font-weight:900;font-size:13px;margin:0 0 12px}
.hero h1{margin:0 0 10px;font-size:clamp(28px,4vw,48px);line-height:1.08;letter-spacing:-0.02em}
.lead{margin:0 0 14px;color:var(--muted);line-height:1.75;max-width:70ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}

.bannerCard{border-radius:var(--r2);overflow:hidden;border:1px solid rgba(15,23,42,.12);background:rgba(255,255,255,.92);box-shadow:var(--shadow)}
.bannerCard img{width:100%;height:360px;object-fit:cover;display:block}

.marketRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.marketBtn{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid rgba(15,23,42,.12);box-shadow:var(--shadow2);font-weight:900;font-size:13px}
.marketBtn:hover{border-color:rgba(37,99,235,.28)}
.marketBtn.isDisabled{opacity:.55;cursor:not-allowed}
.dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.dot--a{background:linear-gradient(135deg,#ffb703,#fb8500)}
.dot--m{background:linear-gradient(135deg,#f472b6,#a78bfa)}
.dot--f{background:linear-gradient(135deg,#60a5fa,#2563eb)}

.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.trust__item{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:18px;background:rgba(255,255,255,.92);border:1px solid rgba(15,23,42,.10);box-shadow:var(--shadow2)}
.trust__item span{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;background:rgba(22,163,74,.14);border:1px solid rgba(22,163,74,.22);font-weight:900}
.trust__item strong{display:block;font-size:13px}
.trust__item small{display:block;color:var(--muted);margin-top:3px}

.section{padding:34px 0}
.section--soft{background:linear-gradient(180deg,rgba(14,165,233,.06),rgba(242,200,75,.10),rgba(22,163,74,.06));border-top:1px solid rgba(15,23,42,.08);border-bottom:1px solid rgba(15,23,42,.08)}
.section__head h2,.section__head h1{margin:0 0 8px;font-size:clamp(22px,2.8vw,34px)}
.section__head p{margin:0;color:var(--muted);line-height:1.7;max-width:88ch}

.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
.panel{padding:18px;border-radius:var(--r2);border:1px solid rgba(15,23,42,.12);background:rgba(255,255,255,.92);box-shadow:var(--shadow2)}
.panel h3{margin:0 0 8px}
.panel p{margin:0;line-height:1.8}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.card{border-radius:var(--r2);overflow:hidden;background:#fff;border:1px solid rgba(15,23,42,.12);box-shadow:var(--shadow2);display:flex;flex-direction:column}
.card__img{display:block}
/* ✅ Responsive images for ANY size/ratio */
.card__img img{
  width:100%;
  height:240px;
  object-fit:contain; /* show full product */
  background:linear-gradient(135deg,rgba(242,200,75,.10),rgba(14,165,233,.08));
  display:block;
  padding:10px;
}
.card__body{padding:14px}
.card__body h3{margin:0 0 6px;font-size:16px}

.variantRow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.chip{padding:7px 10px;border-radius:999px;background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.16);font-weight:900;font-size:12px}
.actions{display:flex;gap:10px;flex-wrap:wrap}

.detail{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.detail__img img{
  width:100%;
  height:460px;
  object-fit:contain; /* ✅ for any image ratio */
  padding:12px;
  background:linear-gradient(135deg,rgba(242,200,75,.10),rgba(14,165,233,.08));
  border-radius:var(--r2);
  border:1px solid rgba(15,23,42,.12);
  box-shadow:var(--shadow2);
}
.desc{margin-top:12px;line-height:1.8}
.variantCard{padding:12px;border-radius:18px;border:1px solid rgba(15,23,42,.12);background:rgba(255,255,255,.92);box-shadow:var(--shadow2);min-width:220px}
.priceRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.price{font-weight:900;font-size:18px}
.mrp{text-decoration:line-through;color:var(--muted);font-weight:800}
.out{padding:6px 10px;border-radius:999px;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.18);font-weight:800;font-size:12px}
.instock{padding:6px 10px;border-radius:999px;background:rgba(22,163,74,.10);border:1px solid rgba(22,163,74,.20);font-weight:800;font-size:12px}

.cta{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:center;padding:18px;border-radius:var(--r2);border:1px solid rgba(15,23,42,.12);background:rgba(255,255,255,.92);box-shadow:var(--shadow2)}
.cta__card{border-radius:20px;border:1px solid rgba(15,23,42,.12);background:linear-gradient(135deg,rgba(242,200,75,.18),rgba(22,163,74,.08),rgba(14,165,233,.08));padding:14px}
.cta__item{display:flex;justify-content:space-between;gap:10px;padding:10px 10px;border-radius:16px;background:rgba(255,255,255,.75);border:1px solid rgba(15,23,42,.08);margin-bottom:10px}

.legal{max-width:980px}
.legal__content p{line-height:1.85;color:var(--ink)}
.legal__content h3{margin-top:18px;margin-bottom:10px}

.footer{border-top:1px solid rgba(15,23,42,.10);background:rgba(255,255,255,.90);padding:22px 0}
.footer__grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:14px}
.footer__grid a{display:block;margin-top:10px;color:var(--muted)}
.footer__grid a:hover{color:var(--blue)}
.footer__bottom{padding-top:10px}

@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr}
  .vgrid{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav{display:none}
  .navToggle{display:inline-flex}
}


.badge{display:inline-flex;min-width:22px;height:22px;align-items:center;justify-content:center;border-radius:999px;background:var(--yellow);border:1px solid rgba(170,128,0,.25);color:var(--brown);font-weight:900;font-size:12px;margin-left:6px;padding:0 7px}

/* Discount badges */
.card__img,.detail__img{position:relative}
.badge{white-space:nowrap}
.badge--corner{position:absolute;top:12px;left:12px;height:auto;padding:8px 10px;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.10)}
.cartGrid{display:grid;grid-template-columns:1.3fr .7fr;gap:14px;align-items:start}
.cartItem{display:grid;grid-template-columns:88px 1fr 140px;gap:12px;padding:12px;border-radius:18px;border:1px solid rgba(15,23,42,.10);background:rgba(255,255,255,.95);margin-bottom:12px}
.cartImg img{width:88px;height:88px;object-fit:contain;background:linear-gradient(135deg,rgba(242,200,75,.10),rgba(14,165,233,.08));border-radius:16px;border:1px solid rgba(15,23,42,.10);padding:8px}
.cartActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.cartTotal{text-align:right}
.cartMini{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed rgba(15,23,42,.14)}
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.input,.select{width:100%;padding:12px 12px;border-radius:14px;border:1px solid rgba(15,23,42,.14);background:rgba(255,255,255,.92);font-weight:700}
.span2{grid-column:span 2}
.qty{width:80px;padding:10px 10px;border-radius:12px;border:1px solid rgba(15,23,42,.14);background:rgba(255,255,255,.92);font-weight:800}
.qtyRow{display:flex;align-items:center;gap:10px;margin:12px 0}
.sumBox{margin-top:14px;padding:14px;border-radius:20px;border:1px solid rgba(15,23,42,.12);background:linear-gradient(135deg,rgba(242,200,75,.18),rgba(22,163,74,.08),rgba(14,165,233,.08))}
.sumRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 4px}
.sumRow--big{font-size:18px;font-weight:900;border-top:1px dashed rgba(15,23,42,.18);margin-top:6px;padding-top:12px}
.buyForm{margin-top:14px}
@media (max-width:980px){.cartGrid{grid-template-columns:1fr}.cartItem{grid-template-columns:88px 1fr}.cartTotal{text-align:left}}

/* Responsive navigation */
@media (max-width: 900px){
  .nav{display:none}
  .navToggle{display:inline-flex}
  .mobileMenu:not([hidden]){display:grid}
}

/* Footer legal links */
.footer__tiny{font-size:12px;color:var(--muted)}
.footer__tiny a{color:var(--muted);text-decoration:none}
.footer__tiny a:hover{text-decoration:underline}

/* --- Product Gallery (multi-image) --- */
.gallery{position:relative;}
.zoomWrap{position:relative;overflow:hidden;border-radius:18px;cursor:zoom-in;}
.gallery__main{width:100%;height:420px;object-fit:contain;background:#fff;border-radius:18px;border:1px solid rgba(0,0,0,0.08);padding:10px;}
.gallery__main{transition:transform 180ms ease;will-change:transform,transform-origin;}
.gallery__main.isZoomed{transform:scale(2.2);}
.gallery__controls{position:absolute;top:12px;right:12px;display:flex;gap:8px;}
.btn--icon{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:12px;}
.gallery__thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.thumb{border:1px solid rgba(0,0,0,0.10);border-radius:14px;padding:6px;background:#fff;cursor:pointer;}
.thumb img{width:72px;height:72px;object-fit:cover;border-radius:10px;display:block;}
.thumb--active{outline:2px solid rgba(0,0,0,0.35);}

/* Lightbox modal */
.noScroll{overflow:hidden;}
.imgModal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.72);z-index:9999;padding:20px;}
.imgModal.open{display:flex;}
.imgModal__inner{max-width:min(980px, 96vw);max-height:92vh;background:#fff;border-radius:18px;padding:12px;}
.imgModal__inner img{max-width:100%;max-height:88vh;display:block;object-fit:contain;border-radius:12px;}
.imgModal__close{position:fixed;top:14px;right:16px;font-size:32px;line-height:1;background:transparent;border:0;color:#fff;cursor:pointer;}

/* --- Reviews --- */
.reviewList{display:flex;flex-direction:column;gap:12px;}
.review{border:1px solid rgba(0,0,0,0.08);border-radius:18px;padding:12px;background:#fff;}
.review__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.review__title{margin:6px 0;font-weight:700;}
.stars{letter-spacing:2px;margin:6px 0;}

/* --- Notices --- */
.notice{border-radius:14px;padding:10px 12px;margin-bottom:12px;}
.notice--error{background:rgba(255,0,0,0.06);border:1px solid rgba(255,0,0,0.18);}