/* ============================================================
   DEHLEEZ FLAVOURS — Site styles (Threshold direction)
   Depends on tokens.css. Production, responsive.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--cream-100); color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--red-100); }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 32px; }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-sm { padding: clamp(40px, 5vw, 64px) 0; }

/* ---------- Type ---------- */
.display { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--charcoal); margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; color: var(--charcoal); margin: 0; line-height: var(--lh-snug); }
p { margin: 0 0 1em; }
.eyebrow { font: var(--weight-semi) 13px/1 var(--font-body); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--primary-red); display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; height: 1px; width: 28px; background: currentColor; opacity: .55; }
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { content: ""; height: 1px; width: 28px; background: currentColor; opacity: .55; }
.eyebrow.gold { color: var(--gold-600); }
.eyebrow.on-red { color: var(--gold-400); }
.lead { font-size: var(--fs-lead); line-height: 1.62; color: var(--text-muted); }
.muted { color: var(--text-muted); }
.sec-head { text-align: center; max-width: 640px; margin: 0 auto clamp(36px,4vw,56px); }
.sec-head h2 { font-size: var(--fs-h2); margin: 16px 0 14px; }
.sec-head p { margin: 0; }

/* ---------- Buttons ---------- */
.btn { font: var(--weight-semi) 15px/1 var(--font-body); letter-spacing: 0.02em; border: none; cursor: pointer;
  padding: 16px 28px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; transition: background .18s, color .18s, box-shadow .18s, transform .18s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary-red); color: var(--cream-50); }
.btn-primary:hover { background: var(--deep-red); box-shadow: var(--shadow-md); }
.btn-gold { background: var(--gold-500); color: #3a2c0c; }
.btn-gold:hover { background: var(--gold-400); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--primary-red); box-shadow: inset 0 0 0 1.5px var(--primary-red); }
.btn-ghost:hover { background: var(--primary-red); color: var(--cream-50); }
.btn-ghost.on-red { color: var(--cream-50); box-shadow: inset 0 0 0 1.5px rgba(251,243,226,0.5); }
.btn-ghost.on-red:hover { background: rgba(251,243,226,0.12); }
.btn-block { width: 100%; }
.btn-lg { padding: 18px 34px; font-size: 16px; }
.btn-sm { padding: 11px 18px; font-size: 13.5px; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--cream-300); color: var(--ink-400); cursor: not-allowed; box-shadow: none; }
.btn-link { font: var(--weight-semi) 14px/1 var(--font-body); color: var(--primary-red); text-decoration: none; display: inline-flex; gap: 9px; align-items: center; letter-spacing: 0.08em; text-transform: uppercase; }
.btn-link .ar { transition: transform .2s; }
.btn-link:hover .ar { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; }
.topbar { background: var(--deep-red); color: var(--cream-100); font-size: 12px; letter-spacing: 0.05em; transition: height .25s, opacity .2s; height: 36px; overflow: hidden; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.topbar b { font-weight: 500; }
.topbar .sep { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.topbar .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold-400); }
.mainbar { background: var(--cream-100); border-bottom: 1px solid var(--cream-300); transition: box-shadow .25s, background .25s; }
.mainbar .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); transition: height .25s; }
.brand img { height: 42px; transition: height .25s; }
.mainnav { display: flex; gap: 30px; }
.mainnav a { font: var(--weight-med) 14.5px/1 var(--font-body); text-decoration: none; color: var(--charcoal); letter-spacing: 0.01em; position: relative; padding: 6px 0; }
.mainnav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1.5px; background: var(--primary-red); transition: right .22s; }
.mainnav a:hover { color: var(--primary-red); }
.mainnav a:hover::after, .mainnav a.active::after { right: 0; }
.headicons { display: flex; align-items: center; gap: 18px; color: var(--charcoal); }
.headicons .ic { display: inline-flex; cursor: pointer; background: none; border: none; color: inherit; padding: 0; }
.headicons svg { width: 22px; height: 22px; }
.cart-ic { position: relative; }
.cart-ic .cnt { position: absolute; top: -8px; right: -9px; background: var(--primary-red); color: #fff; font: 700 10px/1 var(--font-body); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; }
.burger { display: none; }
/* scrolled state */
.site-header.scrolled .topbar { height: 0; opacity: 0; }
.site-header.scrolled .mainbar { box-shadow: var(--shadow-md); }
.site-header.scrolled .mainbar .wrap { height: var(--header-h-scrolled); }
.site-header.scrolled .brand img { height: 34px; }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(43,20,12,0.45); opacity: 0; transition: opacity .25s; }
.drawer-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 300px; max-width: 84vw; background: var(--cream-50); transform: translateX(-100%); transition: transform .28s; padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.drawer.open { visibility: visible; }
.drawer.open .drawer-scrim { opacity: 1; }
.drawer.open .drawer-panel { transform: none; }
.drawer-panel a { font: var(--weight-med) 17px/1 var(--font-body); color: var(--charcoal); text-decoration: none; padding: 14px 8px; border-bottom: 1px solid var(--cream-200); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.drawer-head img { height: 34px; }
.drawer-close { background: none; border: none; cursor: pointer; color: var(--charcoal); }

/* ---------- Arch helpers ---------- */
.arch-clip { clip-path: url(#archWindow); }
.arch-outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.arch-outline path { fill: none; stroke: var(--gold-500); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.spice-ph { background:
   radial-gradient(120% 120% at 30% 8%, #C9763B 0%, #9B3C1E 42%, #5E2310 82%); }
.spice-ph.b { background: radial-gradient(120% 120% at 70% 10%, #B98E38 0%, #7A5418 46%, #3F2C0C 86%); }
.spice-ph.c { background: radial-gradient(120% 120% at 40% 12%, #8E1A1D 0%, #5E1113 50%, #360A0B 88%); }

/* ---------- Trust band ---------- */
.trustband { background: var(--cream-50); border-top: 1px solid var(--cream-300); border-bottom: 1px solid var(--cream-300); }
.trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.trust .pill-item { display: flex; align-items: center; gap: 13px; padding: 26px 34px; }
.trust .pill-item + .pill-item { border-left: 1px solid var(--cream-300); }
.trust .pi-ic { width: 32px; height: 32px; color: var(--primary-red); flex: none; }
.trust .pi-tx { font: var(--weight-semi) 14px/1.25 var(--font-body); color: var(--charcoal); }
.trust.on-red { }
.trust.on-red .pi-tx { color: var(--cream-100); }
.trust.on-red .pi-ic { color: var(--gold-400); }
.trust.on-red .pill-item + .pill-item { border-color: var(--border-onred); }

/* veg mark */
.veg { width: 18px; height: 18px; border: 2px solid var(--veg-green); background: #fff; display: inline-grid; place-items: center; border-radius: 3px; flex: none; }
.veg::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--veg-green); }

/* ---------- Product card (arch-capped) ---------- */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.pcard { background: var(--surface); border: 1px solid var(--cream-300); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .22s, transform .22s, border-color .22s; position: relative; text-decoration: none; color: inherit; }
.pcard:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); border-color: var(--cream-400); }
.pcard-media { position: relative; height: 270px; display: block; }
.pcard-niche { position: absolute; left: 18px; right: 18px; top: 14px; bottom: 0; background: linear-gradient(180deg, var(--cream-100), var(--cream-200)); clip-path: url(#archWindow); }
.pcard-archline { position: absolute; left: 18px; right: 18px; top: 14px; bottom: 0; }
.pcard-archline path { fill: none; stroke: var(--gold-400); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.pcard-media img.pack { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); height: 224px; width: auto; filter: drop-shadow(0 12px 18px rgba(63,30,12,0.18)); transition: transform .25s; }
.pcard:hover .pcard-media img.pack { transform: translateX(-50%) translateY(-4px); }
.pcard-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pcard-cat { font: var(--weight-semi) 10.5px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-700); }
.pcard-name { font: 400 21px/1.1 var(--font-display); color: var(--charcoal); }
.pcard-hindi { font: var(--weight-med) 13px/1 var(--font-body); color: var(--text-soft); }
.pcard-foot { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcard-price { font: var(--weight-semi) 17px/1 var(--font-body); color: var(--charcoal); display: flex; align-items: baseline; gap: 8px; }
.pcard-price .was { font-weight: 500; font-size: 14px; color: var(--ink-400); text-decoration: line-through; }
.pcard-add { width: 42px; height: 42px; border-radius: 50%; background: var(--cream-100); border: 1.5px solid var(--cream-400); color: var(--primary-red); display: grid; place-items: center; cursor: pointer; transition: .18s; flex: none; }
.pcard-add:hover { background: var(--primary-red); color: #fff; border-color: var(--primary-red); }
.pcard-add svg { width: 19px; height: 19px; }
/* badges on card */
.pbadge { position: absolute; z-index: 3; top: 16px; left: 16px; font: var(--weight-bold) 10.5px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; }
.pbadge.sale { background: var(--primary-red); color: #fff; }
.pbadge.new { background: var(--gold-500); color: #3a2c0c; }
.pcard .veg { position: absolute; z-index: 3; top: 16px; right: 16px; }
/* out of stock */
.pcard.oos .pcard-media img.pack { filter: grayscale(1) opacity(.6); }
.pcard.oos .pcard-add { opacity: .4; pointer-events: none; }
.oos-tag { position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(43,20,12,0.82); color: var(--cream-50);
  font: var(--weight-semi) 12px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; }

.pcard.is-hover { box-shadow: var(--shadow-card); transform: translateY(-3px); border-color: var(--cream-400); }
.pcard.is-hover .pcard-media img.pack { transform: translateX(-50%) translateY(-4px); }

/* ---------- Stamp ---------- */
.stamp svg { width: 100%; height: 100%; display: block; }

/* ---------- Footer ---------- */
.site-footer { background: var(--deep-red); color: var(--cream-100); position: relative; }
.footer-arch { display: flex; justify-content: center; }
.footer-arch svg { width: 120px; height: 40px; margin-top: -20px; }
.footer-main { padding: 64px 0 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-brand img { height: 46px; margin-bottom: 18px; filter: brightness(0) invert(1); opacity: .96; }
.footer-brand p { color: rgba(251,243,226,0.72); font-size: 14px; max-width: 280px; }
.fcol h4 { font: var(--weight-bold) 11px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-400); margin-bottom: 18px; font-family: var(--font-body); }
.fcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.fcol a { color: rgba(251,243,226,0.82); text-decoration: none; font-size: 14.5px; }
.fcol a:hover { color: var(--gold-400); }
.fcontact { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; color: rgba(251,243,226,0.85); }
.fcontact .row { display: flex; align-items: center; gap: 12px; }
.fcontact svg { width: 18px; height: 18px; color: var(--gold-400); flex: none; }
.fsocial { display: flex; gap: 12px; margin-top: 6px; }
.fsocial a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-onred); display: grid; place-items: center; }
.fsocial svg { width: 18px; height: 18px; color: var(--cream-100); }
.fsocial a:hover { background: rgba(251,243,226,0.1); }
.footer-bottom { border-top: 1px solid var(--border-onred); padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bottom small { color: rgba(251,243,226,0.6); font-size: 12.5px; letter-spacing: 0.02em; }
.pay { display: flex; gap: 8px; align-items: center; }
.pay span { background: rgba(251,243,226,0.92); color: var(--deep-red); font: var(--weight-bold) 10px/1 var(--font-body); letter-spacing: 0.04em; padding: 6px 9px; border-radius: 4px; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font: var(--weight-semi) 12.5px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.field input, .field textarea, .field select { font-family: var(--font-body); font-size: 15px; color: var(--charcoal); background: var(--surface);
  border: 1.5px solid var(--cream-400); border-radius: var(--radius-sm); padding: 13px 15px; transition: border-color .18s, box-shadow .18s; }
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-400); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--primary-red); box-shadow: 0 0 0 3px rgba(164,30,34,0.12); }
.field.error input, .field.error textarea { border-color: var(--error); box-shadow: 0 0 0 3px rgba(192,57,43,0.12); }
.field .err-msg { font-size: 12.5px; color: var(--error); display: none; }
.field.error .err-msg { display: block; }

/* ---------- Qty + weight selectors ---------- */
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--cream-400); border-radius: var(--radius-sm); overflow: hidden; }
.qty button { width: 42px; height: 46px; background: var(--cream-50); border: none; cursor: pointer; color: var(--charcoal); font-size: 18px; display: grid; place-items: center; }
.qty button:hover { background: var(--cream-200); color: var(--primary-red); }
.qty input { width: 48px; height: 46px; text-align: center; border: none; border-left: 1.5px solid var(--cream-300); border-right: 1.5px solid var(--cream-300); font: var(--weight-semi) 15px/1 var(--font-body); color: var(--charcoal); }
.weights { display: flex; gap: 10px; }
.weights button { flex: 1; padding: 14px 10px; background: var(--surface); border: 1.5px solid var(--cream-400); border-radius: var(--radius-sm); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px; transition: .16s; }
.weights button .w { font: var(--weight-semi) 15px/1 var(--font-body); color: var(--charcoal); }
.weights button .wp { font: var(--weight-med) 12.5px/1 var(--font-body); color: var(--text-soft); }
.weights button:hover { border-color: var(--gold-500); }
.weights button.sel { border-color: var(--primary-red); background: var(--red-100); }
.weights button.sel .w { color: var(--primary-red); }

/* ---------- Breadcrumb ---------- */
.crumb { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-soft); }
.crumb a { text-decoration: none; color: var(--text-muted); }
.crumb a:hover { color: var(--primary-red); }
.crumb .s { opacity: .5; }

/* ---------- Section divider (arch ornament) ---------- */
.arch-divider { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--gold-500); margin: 0 auto; max-width: 360px; }
.arch-divider .ln { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-400)); }
.arch-divider .ln.r { background: linear-gradient(90deg, var(--gold-400), transparent); }
.arch-divider svg { width: 30px; height: 34px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 860px) {
  .mainnav, .headicons .ic.search-ic, .topbar .sep.left { display: none; }
  .burger { display: inline-flex; }
  .user-ic { display: none; }
  .brand { margin: 0 auto; }
  .mainbar .wrap { height: 62px; }
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .pcard-media { height: 220px; }
  .pcard-media img.pack { height: 178px; }
  .trust { display: grid; grid-template-columns: 1fr 1fr; }
  .trust .pill-item { padding: 18px 20px; justify-content: flex-start; }
  .trust .pill-item + .pill-item { border-left: none; }
  .trust .pill-item:nth-child(even) { border-left: 1px solid var(--cream-300); }
  .trust .pill-item:nth-child(n+3) { border-top: 1px solid var(--cream-300); }
  .trust.on-red .pill-item:nth-child(even) { border-left: 1px solid var(--border-onred); }
  .trust.on-red .pill-item:nth-child(n+3) { border-top: 1px solid var(--border-onred); }
  .section { padding: 56px 0; }
  .wrap, .wrap-narrow { padding: 0 20px; }
}
@media (max-width: 520px) {
  .pgrid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .footer-main { grid-template-columns: 1fr; }
}