:root {
  --brand: #9F1239; --brand-dark: #7F0F2E; --brand-soft: #FDECEF;
  --ink: #1C1022; --muted: #5A4A55; --line: #EADDE2; --ground: #FFF8F0; --card: #FFFFFF;
  --saffron: #FBBF24; --teal: #0F766E; --purple: #4C1D95; --green: #0F6B3A; --amber: #B45309;
  --radius: 16px;
  font-family: 'Plus Jakarta Sans', 'Noto Sans Tamil', system-ui, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); }
body { min-height: 100vh; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); }
img { max-width: 100%; }
.wrap { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--ground); }
.pad { padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Buttons */
.btn { min-height: 48px; border: none; border-radius: 12px; padding: 0 18px; font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-ghost { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: default; }
.icon-btn { width: 44px; height: 44px; border-radius: 22px; border: none; display: inline-flex; align-items: center; justify-content: center; background: transparent; cursor: pointer; color: inherit; text-decoration: none; position: relative; }
.chip { flex: none; min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.badge { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 12px; white-space: nowrap; }
.tone-red { background: #FDE2E7; color: var(--brand); } .tone-amber { background: #FEF3C7; color: #92400E; }
.tone-teal { background: #E0F2F1; color: var(--teal); } .tone-purple { background: #EDE4FB; color: var(--purple); }
.tone-gray { background: #EEE8EB; color: var(--muted); }

/* Header */
.top { background: var(--brand); color: #fff; padding: 18px 16px 18px; border-radius: 0 0 24px 24px; display: flex; flex-direction: column; gap: 12px; }
.top-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.top .icon-btn { background: rgba(255,255,255,.18); color: #fff; }
.top small { font-size: 13px; opacity: .9; }
.top h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.4px; }
.count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--saffron); color: var(--ink); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.search { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--muted); border-radius: 14px; padding: 0 14px; height: 48px; }
.search input { border: none; outline: none; flex: 1; font-size: 15px; background: transparent; color: var(--ink); min-width: 0; }
.subbar { display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.subbar h2 { margin: 0; font-size: 19px; font-weight: 800; }
.demo { background: var(--saffron); color: var(--ink); font-size: 13px; font-weight: 700; text-align: center; padding: 6px 12px; }
.closed { background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; text-align: center; padding: 10px 12px; }

/* Offer banner */
.offer { margin: 16px 16px 0; min-height: 176px; border-radius: 22px; padding: 20px; display: flex; gap: 12px; align-items: center; transition: background .3s; }
.offer .txt { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.offer .kick { font-size: 11px; font-weight: 800; letter-spacing: .8px; padding: 4px 8px; border-radius: 6px; }
.offer h3 { margin: 0; font-size: 23px; font-weight: 800; line-height: 1.15; letter-spacing: -.3px; }
.offer p { margin: 0; font-size: 14px; opacity: .92; }
.offer .go { min-height: 44px; padding: 0 18px; border-radius: 22px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 800; text-decoration: none; border: none; cursor: pointer; }
.offer .art { flex: none; width: 92px; height: 92px; border-radius: 46px; display: flex; align-items: center; justify-content: center; }
.th-saffron { background: #FBBF24; color: #1C1022; } .th-saffron .kick { background: #1C1022; color: #FBBF24; } .th-saffron .go { background: #1C1022; color: #fff; } .th-saffron .art { background: rgba(28,16,34,.1); }
.th-purple { background: #4C1D95; color: #fff; } .th-purple .kick { background: #FBBF24; color: #1C1022; } .th-purple .go { background: #fff; color: #4C1D95; } .th-purple .art { background: rgba(255,255,255,.14); }
.th-red { background: #B91C1C; color: #fff; } .th-red .kick { background: #fff; color: #B91C1C; } .th-red .go { background: #FBBF24; color: #1C1022; } .th-red .art { background: rgba(255,255,255,.14); }
.th-teal { background: #0F766E; color: #fff; } .th-teal .kick { background: #FBBF24; color: #1C1022; } .th-teal .go { background: #fff; color: #0F766E; } .th-teal .art { background: rgba(255,255,255,.14); }
.dots { display: flex; justify-content: center; gap: 0; margin-top: 4px; }
.dots button { width: 36px; height: 28px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dots span { display: block; height: 8px; width: 8px; border-radius: 4px; background: #D9C7CE; transition: width .2s; }
.dots .on span { width: 24px; background: var(--brand); }

/* Categories */
.cats { display: flex; gap: 14px; padding: 8px 16px 0; overflow-x: auto; }
.cat { flex: none; border: none; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; cursor: pointer; min-width: 64px; }
.cat .c { width: 64px; height: 64px; border-radius: 32px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; border: 2px solid transparent; }
.cat.on .c { border-color: var(--ink); }
.cat .c.has-img { background: #fff !important; overflow: hidden; box-shadow: 0 2px 8px rgba(28,16,34,.08); }
.cat .cimg { width: 100%; height: 100%; object-fit: contain; padding: 6px; border-radius: 50%; }
.cat b { max-width: 84px; text-align: center; line-height: 1.2; }
.cat b { font-size: 12px; }

/* New arrivals */
.newbox { margin: 20px 16px 0; border-radius: 20px; background: var(--teal); color: #fff; padding: 18px 0 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.newbox .hd { display: flex; justify-content: space-between; align-items: center; padding-right: 18px; }
.newbox .tag { background: var(--saffron); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .8px; padding: 4px 8px; border-radius: 6px; }
.newbox h3 { margin: 6px 0 0; font-size: 20px; font-weight: 800; }
.hscroll { display: flex; gap: 10px; overflow-x: auto; padding-right: 18px; }
.mini { flex: none; width: 132px; background: #fff; color: var(--ink); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.mini .pimg { height: 88px; }
.mini b { font-size: 13px; line-height: 1.25; }
.mini .pr { font-size: 14px; font-weight: 800; color: var(--teal); }

/* Product grid */
.sec-h { display: flex; justify-content: space-between; align-items: baseline; padding: 20px 16px 10px; }
.sec-h h3 { margin: 0; font-size: 18px; font-weight: 800; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 16px 24px; }
@media (min-width: 520px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { background: #fff; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); box-shadow: 0 2px 8px rgba(28,16,34,.08); position: relative; }
.card .pimg { height: 116px; }
.card b { font-size: 14px; line-height: 1.3; }
.card .meta { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.card .pr { font-size: 15px; font-weight: 800; }
.off { position: absolute; top: 16px; left: 16px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 6px; }
.stock { font-size: 12px; font-weight: 700; color: var(--green); }
.stock.low { color: var(--amber); } .stock.out { color: var(--muted); }
.pimg { width: 100%; border-radius: 12px; object-fit: cover; display: block; background: #F1E8EC; }
.pimg.ph { display: flex; align-items: center; justify-content: center; color: rgba(28,16,34,.35); font-size: 34px; font-weight: 800; }
.empty { padding: 40px 16px; text-align: center; color: var(--muted); }

/* Bottom nav */
.nav { position: sticky; bottom: 0; margin-top: auto; background: #fff; border-top: 1px solid var(--line); display: flex; justify-content: space-around; padding: 6px 0 calc(8px + env(safe-area-inset-bottom)); z-index: 5; }
.nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; min-height: 44px; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; position: relative; }
.nav a.on { color: var(--brand); font-weight: 800; }
.nav .count { top: -4px; right: 10px; }

/* Product page */
.pdp-img { position: relative; }
.pdp-img .pimg { height: 340px; border-radius: 0; }
.gal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: #fff; }
.gal::-webkit-scrollbar { display: none; }
.gal .pimg { flex: 0 0 100%; scroll-snap-align: center; object-fit: contain; background: #fff; }
.pdp-img > .pimg { object-fit: contain; background: #fff; }
.gal-count { position: absolute; top: 300px; right: 12px; background: rgba(28,16,34,.6); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.gal-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px 0; scrollbar-width: none; }
.gal-thumbs button { flex: none; width: 56px; height: 56px; padding: 2px; border: 2px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.gal-thumbs button.on { border-color: var(--brand); }
.gal-thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pdesc { font-size: 14px; line-height: 1.55; white-space: pre-line; color: var(--ink); }
.pdp-img .icon-btn { position: absolute; top: 16px; left: 16px; background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.pdp { padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.pdp .cat-l { font-size: 13px; font-weight: 600; color: var(--muted); }
.pdp h2 { margin: 2px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -.3px; }
.price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-row .now { font-size: 26px; font-weight: 800; }
.price-row s { color: var(--muted); font-size: 14px; }
.price-row .save { color: var(--green); font-weight: 800; font-size: 14px; }
.note { font-size: 13px; color: var(--muted); }
.sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.size { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.size.on { border: 2px solid var(--brand); background: var(--brand-soft); color: var(--brand); }
.instock { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: #E8F5EE; color: var(--green); font-size: 14px; font-weight: 700; }
.instock.out { background: #EEE8EB; color: var(--muted); }
.buybar { position: sticky; bottom: 0; margin-top: auto; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: center; z-index: 5; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; height: 48px; background: #fff; }
.qty button { width: 44px; height: 46px; border: none; background: transparent; font-size: 20px; cursor: pointer; }
.qty span { min-width: 24px; text-align: center; font-weight: 800; }

/* Cart */
.box { background: #fff; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; }
.line { display: flex; gap: 12px; align-items: center; }
.line .pimg { width: 64px; height: 64px; flex: none; }
.line .ph { font-size: 22px; }
.line .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.line .info b { font-size: 15px; }
.line .qty { height: 40px; align-self: flex-start; }
.line .qty button { width: 40px; height: 38px; font-size: 18px; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opt { min-height: 64px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; cursor: pointer; }
.opt b { font-size: 14px; } .opt small { font-size: 12px; color: var(--muted); }
.opt.on { border: 2px solid var(--brand); background: var(--brand-soft); }
.opt:disabled { opacity: .5; cursor: default; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; }
.field input, .field textarea, .field select { min-height: 48px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 15px; background: #fff; width: 100%; }
.field textarea { min-height: 76px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sum { display: flex; justify-content: space-between; font-size: 14px; }
.sum span:first-child { color: var(--muted); }
.sum.total { font-size: 17px; font-weight: 800; } .sum.total span:first-child { color: var(--ink); }
.hr { height: 1px; background: var(--line); }
.err { background: #FDE2E7; color: var(--brand-dark); padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.secure { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }

/* Order page */
.hero { background: var(--brand); color: #fff; padding: 24px 20px; display: flex; flex-direction: column; gap: 6px; }
.hero .ok { width: 48px; height: 48px; border-radius: 24px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; }
.hero h2 { margin: 4px 0 0; font-size: 22px; font-weight: 800; }
.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: 14px; }
.step .rail { display: flex; flex-direction: column; align-items: center; }
.step .dot { width: 16px; height: 16px; border-radius: 8px; border: 2px solid var(--line); background: #fff; flex: none; }
.step .bar { width: 2px; flex: 1; min-height: 26px; background: var(--line); }
.step.done .dot { background: var(--brand); border-color: var(--brand); }
.step.done .bar { background: var(--brand); }
.step .t { padding-bottom: 16px; display: flex; flex-direction: column; gap: 2px; }
.step .t b { font-size: 15px; } .step:not(.done) .t b { color: var(--muted); }
.step .t small { font-size: 13px; color: var(--muted); }

#toast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 700; font-size: 14px; opacity: 0; pointer-events: none; transition: all .2s; z-index: 50; max-width: 90vw; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.spinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 60px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

.modal { position: fixed; inset: 0; background: rgba(28,16,34,.55); display: flex; align-items: flex-end; justify-content: center; padding: 16px; z-index: 60; }
.modal .sheet { background: #fff; color: var(--ink); border-radius: 18px; padding: 18px; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 600px) { .modal { align-items: center; } }
.btn:focus-visible, .chip:focus-visible, .opt:focus-visible, .size:focus-visible, .icon-btn:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; }

/* Ratings */
.stars { color: #D97706; letter-spacing: 1px; line-height: 1; }
.stars .off-s { color: #E5D9DE; }
.rate { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.rate small { font-size: 12px; font-weight: 600; }
.linkish { background: none; border: none; padding: 0; cursor: pointer; color: var(--brand); font-weight: 700; text-decoration: underline; min-height: 32px; }
.rate.linkish { color: var(--muted); text-decoration: none; margin-top: 4px; }
.reviews { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.reviews h3 { margin: 0; font-size: 18px; }
.rev-sum { display: flex; gap: 18px; align-items: center; }
.big-r { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.big-r b { font-size: 34px; font-weight: 800; line-height: 1; }
.big-r small { font-size: 12px; color: var(--muted); }
.bars { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.bars div { display: flex; align-items: center; gap: 8px; }
.bars i { flex: 1; height: 8px; border-radius: 4px; background: #F1E8EC; overflow: hidden; display: block; }
.bars em { display: block; height: 100%; background: #D97706; }
.rev { background: #fff; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.rev-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.rev p { margin: 0; font-size: 14px; line-height: 1.5; }
.rv { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.rv.done { flex-direction: row; justify-content: space-between; align-items: center; }
.star-pick { display: flex; gap: 2px; }
.star-pick button { width: 44px; height: 44px; border: none; background: none; font-size: 30px; color: #E5D9DE; cursor: pointer; padding: 0; }
.star-pick button.on { color: #D97706; }

/* EMI */
.emi-tag { font-size: 11px; font-weight: 700; color: var(--purple); }
.emi { border: 1px solid #DDD0F3; background: #F7F2FE; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.emi-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.emi-h b { display: block; color: var(--purple); font-size: 15px; }
.emi-h small { font-size: 12px; color: var(--muted); }
.emi-t { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.emi-t th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 700; padding: 4px 0; }
.emi-t td { padding: 6px 0; border-top: 1px solid #E6DAF7; }

/* Shipping info, checkout extras */
.ship-info { display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 14px; padding: 12px 14px; font-size: 13px; color: var(--muted); }
.ship-info div { display: flex; gap: 10px; align-items: center; }
.ship-info svg { flex: none; color: var(--teal); }
.ship-info b { color: var(--ink); }
.opts3 { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.addr-pick { display: flex; flex-direction: column; gap: 8px; }
.addr { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-height: 48px; }
.addr.on { border: 2px solid var(--brand); background: var(--brand-soft); }
.addr small, .addr-row small { font-size: 13px; color: var(--muted); display: block; }
.warn-box { background: #FEF3C7; color: #78350F; border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.warn-box .linkish { color: #78350F; }

/* Profile */
.hero.prof { flex-direction: row; align-items: center; gap: 14px; }
.avatar { width: 60px; height: 60px; border-radius: 30px; background: var(--saffron); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; flex: none; }
.addr-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.addr-row > div { min-width: 0; }
.link-row { flex-direction: row !important; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.link-row span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.link-row small { font-size: 13px; color: var(--muted); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-size: 14px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--brand); }
.size:has(input:focus-visible) { outline: 3px solid var(--saffron); outline-offset: 2px; }

/* Product highlights + All details (Flipkart-style) */
.pcard { border-top: 8px solid #F4EEF1; margin: 0 -16px; padding: 16px 16px 4px; }
.pcard h3 { margin: 0 0 12px; font-size: 17px; font-weight: 800; }
.hl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hl li { display: flex; gap: 14px; align-items: center; }
.hl-i { flex: none; width: 40px; height: 40px; border-radius: 10px; background: #F4EEF1; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.hl small, .sgrid small { display: block; font-size: 12px; color: var(--muted); }
.hl b { font-size: 15px; font-weight: 600; }
.det-h { all: unset; cursor: pointer; display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 44px; }
.det-h h3 { margin: 0; }
.chev { font-size: 20px; color: var(--muted); transition: transform .2s; }
.chev.up { transform: rotate(180deg); }
.pills { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 12px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pills button { flex: none; border: 1px solid var(--line); background: #F7F3F5; color: var(--ink); border-radius: 10px; padding: 9px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 40px; }
.pills button.on { background: #1C1022; border-color: #1C1022; color: #fff; }
.det-body { padding-bottom: 12px; }
.sg h4 { margin: 14px 0 8px; font-size: 15px; font-weight: 800; }
.sg:first-child h4 { margin-top: 2px; }
.sgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.sgrid > div { padding: 9px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.sgrid > div.wide { grid-column: 1 / -1; }
.sgrid span { font-size: 14.5px; overflow-wrap: anywhere; }
.seemore { display: block; margin: 14px auto 4px; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 18px; font: inherit; font-weight: 700; cursor: pointer; min-height: 40px; }

/* Filters & sorting on the home page */
.fbar { display: flex; align-items: center; gap: 8px; padding: 0 16px 10px; }
.fcount { font-size: 13px; color: var(--muted); font-weight: 600; margin-right: auto; }
.fbtn { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; color: var(--ink); }
.fbtn.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.fsort select { min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 14px; font-weight: 600; padding: 0 8px; max-width: 46vw; color: var(--ink); }
.fpanel { margin: 0 16px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.fpanel b { font-size: 13px; }
.fchips { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 10px; }
.fpanel .fchips { padding: 0; }
.fchip { min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink); }
.fchip.on { background: #1C1022; border-color: #1C1022; color: #fff; }
.grid .more { grid-column: 1 / -1; }
.pr small { font-size: 11px; font-weight: 600; color: var(--muted); }

/* WhatsApp & share */
.btn-wa { background: #1FA855; color: #fff; }
.social { gap: 10px; }
.social .btn { min-height: 46px; font-size: 14px; }
.wa-float { position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); width: 54px; height: 54px; border-radius: 50%; background: #1FA855; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.22); z-index: 6; }
.wa-float svg { width: 28px; height: 28px; }

/* Size buttons with their own price */
.size:has(small) { padding-top: 6px; padding-bottom: 6px; line-height: 1.25; height: auto; }
.size small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.size.on small { color: inherit; }

/* Coupon */
.coupon-row { display: flex; gap: 8px; margin-top: 6px; }
.coupon-row input { flex: 1; min-width: 0; }

/* Festival sale countdown */
.salebar { margin: 12px 16px 0; padding: 12px 14px; border-radius: 16px; background: linear-gradient(120deg, #4C1D95, #9F1239); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.salebar.live { background: linear-gradient(120deg, #B91C1C, #EA580C); }
.salebar .kick { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; opacity: .9; }
.salebar b { font-size: 15px; }
.salebar .cd { text-align: right; }
.salebar .cd small { display: block; font-size: 11px; opacity: .85; }
.salebar .cd span { font-size: 15px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.salebar .cd i { font-style: normal; background: rgba(255,255,255,.2); border-radius: 6px; padding: 1px 5px; font-weight: 800; }
.salebar.compact { margin: 0; }
.sale-tag { position: absolute; top: 8px; right: 8px; background: #EA580C; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 6px; }
.pr s.was { font-size: 12px; font-weight: 600; color: var(--muted); }

/* Voice search */
.search { position: relative; }
.search .mic { flex: none; width: 40px; height: 40px; border: none; border-radius: 50%; background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.search .mic.on { background: #DC2626; color: #fff; animation: micpulse 1s infinite; }
@keyframes micpulse { 50% { box-shadow: 0 0 0 8px rgba(220,38,38,.2); } }

/* Notify me */
.alert-link { align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; font-weight: 700; }
.alert-ok { color: var(--green); display: flex; gap: 6px; align-items: center; font-weight: 600; }
.good-news { margin: 12px 16px 0; border: 2px solid var(--green); }
.gn-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; font-weight: 700; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); }
.gn-row span { color: var(--green); font-weight: 600; text-align: right; }

/* Scratch card */
.scratch { text-align: center; }
.sc-wrap { position: relative; height: 170px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #FFF7ED, #FDE2E7); border: 1px solid var(--line); touch-action: none; }
.sc-prize { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px; }
.sc-prize .big { font-size: 30px; font-weight: 900; color: var(--brand); }
.sc-prize .code { font-size: 13px; }
.sc-prize .btn { min-height: 40px; font-size: 13px; margin-top: 4px; }
#sc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.sc-tap { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 12px; z-index: 2; background: rgba(255,255,255,.7); padding: 2px 8px; border-radius: 6px; }

/* Refer & earn, rewards */
.refer { background: linear-gradient(135deg, #FEF3C7, #FDE2E7); }
.ref-code { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 2px dashed var(--brand); border-radius: 12px; padding: 10px 14px; }
.ref-code span { font-size: 13px; color: var(--muted); }
.ref-code b { font-size: 22px; letter-spacing: .08em; color: var(--brand); }
.reward { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.reward small { display: block; font-size: 12px; color: var(--muted); }
.reward .btn { min-height: 40px; font-size: 13px; }

/* Colour options */
.colors label b { font-weight: 800; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); background: #fff; padding: 3px; cursor: pointer; }
.swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.swatch.pic { width: 60px; height: 60px; border-radius: 12px; }
.swatch.pic img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; display: block; }
.swatch.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.dots-c { display: flex; align-items: center; gap: 4px; }
.dots-c i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.dots-c small { font-size: 11px; color: var(--muted); font-weight: 600; }

/* Logo next to the shop name */
.brand-h { display: flex; align-items: center; gap: 10px; }
.brand-h img { flex: none; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }

/* Wishlist heart on product photo */
.pdp-img .heart { left: auto; right: 16px; color: #C4B5BD; }
.pdp-img .heart.on { color: #E11D48; }

/* Quick links on home */
.qlinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 16px 0; }
.qlinks a { background: #fff; border-radius: 14px; padding: 10px 8px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; box-shadow: 0 2px 8px rgba(28,16,34,.06); min-height: 44px; }
.qlinks span { font-size: 22px; line-height: 1.2; }
.qlinks b { font-size: 13px; }
.qlinks small { font-size: 11px; color: var(--muted); }
.recent { margin-top: 6px; }
.recent .hscroll { padding: 0 16px 6px; }

/* Delivery by pincode */
.pin-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pin-row label { display: flex; align-items: center; gap: 8px; }
.pin-row input { width: 110px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }

/* Visit page, enquiry done */
.visit-hero { flex-direction: row !important; align-items: center; gap: 14px; }
.visit-hero img { border-radius: 14px; flex: none; }
.visit-hero small { display: block; color: var(--muted); font-size: 13px; }
.done-box { align-items: center; text-align: center; color: var(--green); }
.done-box b { color: var(--ink); font-size: 17px; }

/* Buy bar with Add to cart + Buy now */
.buybar .btn { min-width: 0; padding: 0 10px; }

/* Compare */
.cmp-btn { min-height: 44px; font-size: 14px; }
.cmp-btn.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.cmpbar { position: sticky; bottom: 0; z-index: 6; margin: 0; background: #1C1022; color: #fff; display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.cmpbar span { font-size: 13px; font-weight: 600; flex: 1; }
.cmpbar .linkish { color: #fff; font-size: 13px; }
.cmpbar .btn { min-height: 40px; background: #fff; color: #1C1022; font-size: 14px; }
.cmp-thumbs { display: flex; }
.cmp-thumbs .pimg { width: 34px; height: 34px; border-radius: 8px; border: 2px solid #1C1022; margin-left: -8px; background: #fff; object-fit: contain; }
.cmp-thumbs .pimg:first-child { margin-left: 0; }
.cmp-thumbs .pimg.ph span { font-size: 14px; }
.cmp-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.cmp { display: grid; background: #fff; border-radius: 16px; overflow: hidden; min-width: min-content; }
.cmp > div { padding: 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; overflow-wrap: anywhere; }
.cmp-l { font-weight: 700; color: var(--muted); font-size: 12.5px !important; background: #FAF6F8; position: sticky; left: 0; z-index: 1; }
.cmp-g { background: #F4EEF1; font-weight: 800; font-size: 13px !important; color: var(--ink); }
.cmp-head { position: relative; display: flex; flex-direction: column; gap: 8px; }
.cmp-head a { color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.cmp-head .pimg { height: 96px; object-fit: contain; background: #fff; }
.cmp-head b { font-size: 13px; line-height: 1.3; }
.cmp-head .btn { min-height: 38px; font-size: 13px; padding: 0 8px; }
.cmp-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(28,16,34,.75); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; z-index: 2; }
.cmp-price { font-size: 17px; display: block; }
.cmp .save { color: var(--green); font-weight: 700; }
.cmp .badge { margin-top: 4px; display: inline-block; }
.cmpbar.on-home { bottom: calc(62px + env(safe-area-inset-bottom)); }
.cmpbar.on-pdp { bottom: calc(74px + env(safe-area-inset-bottom)); }

/* Rider screen */
.rider-hero { flex-direction: row; align-items: center; gap: 12px; background: #1C1022; }
.rider-hero img { border-radius: 12px; }
.collect { font-size: 16px; padding: 10px 12px; border-radius: 12px; background: #FEF3C7; color: #92400E; }
.collect b { font-size: 20px; }
.collect.paid { background: #DCFCE7; color: #166534; }
.big-btn { min-height: 58px; font-size: 18px; }
.live { flex-direction: row !important; align-items: center; gap: 10px; flex-wrap: wrap; }
.dot-live { width: 12px; height: 12px; border-radius: 50%; background: #16A34A; animation: micpulse 1.2s infinite; box-shadow: 0 0 0 0 rgba(22,163,74,.4); }
.otp-in { font-size: 28px; letter-spacing: .5em; text-align: center; min-height: 56px; border: 2px solid var(--line); border-radius: 12px; font-weight: 800; }

/* Customer: rider card on the order page */
.rider-card .otp { font-size: 26px; font-weight: 900; letter-spacing: .3em; color: var(--brand); }
.rider-card iframe { width: 100%; height: 220px; border: 0; border-radius: 12px; }

/* Buy-together combo */
.combo { background: #fff; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); }
.combo-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.combo-h h3 { margin: 0; font-size: 17px; font-weight: 800; }
.combo-badge { background: #E7F6EE; color: var(--green); font-weight: 800; font-size: 12px; padding: 4px 8px; border-radius: 8px; white-space: nowrap; }
.combo-pics { display: flex; align-items: center; gap: 6px; }
.combo-pics a { flex: 1 1 0; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 4px; background: #fff; transition: opacity .15s; }
.combo-pics a.dim { opacity: .35; }
.combo-pics .pimg { height: 76px; width: 100%; object-fit: contain; border-radius: 8px; }
.combo-pics .plus { flex: none; font-size: 20px; font-weight: 800; color: var(--muted); }
.combo-list { display: flex; flex-direction: column; gap: 2px; }
.combo-it { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; cursor: pointer; min-height: 44px; }
.combo-it:first-child { border-top: none; }
.combo-it input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brand); flex: none; }
.combo-it span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.combo-it b { font-weight: 700; line-height: 1.3; }
.combo-it .pr { flex: none; font-weight: 800; }
.combo-it.out { opacity: .6; cursor: default; }
.combo-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 12px; }
.combo-foot > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.combo-foot .note { width: 100%; font-size: 12px; }
.combo-foot .now { font-size: 20px; font-weight: 800; }
.combo-foot s { color: var(--muted); font-size: 13px; }
.combo-foot .save { color: var(--green); font-weight: 800; font-size: 13px; }
.combo-foot .btn { flex: none; }
.oos { color: var(--brand); font-size: 11px; font-weight: 700; }

/* Similar products */
.similar { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.similar .sec-h { display: flex; justify-content: space-between; align-items: center; padding: 0; }
.similar h3 { margin: 0; font-size: 18px; font-weight: 800; }
.similar .hscroll { margin: 0 -16px; padding: 0 16px 6px; }
.mini.sim { position: relative; width: 140px; border: 1px solid var(--line); }
.mini.sim .off { position: absolute; top: 8px; left: 8px; background: var(--green); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 6px; }
.mini.sim b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini.sim .rate small { font-size: 11px; color: var(--muted); }

/* Compare with similar items (product page) */
.qcmp { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.qcmp .sec-h { padding: 0; }
.qcmp .cmp-wrap { margin: 0 -16px; padding: 0 16px; }
.qcmp .cmp-head .pimg { height: 84px; }
.qcmp .cmp-head b { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qcmp .cmp-head .badge { display: table; margin-bottom: 3px; background: var(--brand-soft); color: var(--brand); font-size: 10px; }
.qcmp .cmp-v.this, .qcmp .cmp-head.this { background: #FFFBF3; }
.qcmp .cmp-v { font-size: 12px; }
.qcmp .cmp-head > div { display: flex; flex-direction: column; gap: 6px; }

/* All categories: left rail + tiles */
.nav a { min-width: 56px; }
.cart-ic { position: relative; }
.cart-ic .count { top: 2px; right: 2px; }
.catpage { display: grid; grid-template-columns: 92px 1fr; align-items: start; flex: 1; }
.rail { position: sticky; top: 73px; max-height: calc(100vh - 73px - 64px); overflow-y: auto; background: #F4EEF1; display: flex; flex-direction: column; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail-it { flex: none; position: relative; border: none; background: transparent; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; border-bottom: 1px solid #EADDE2; min-height: 44px; }
.rail-it b { font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.25; }
.rail-it.on { background: #fff; }
.rail-it.on::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--brand); }
.rail-it.on b { color: var(--brand); font-weight: 800; }
.rail-pic { flex: none; width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; color: var(--ink); overflow: hidden; }
.rail-pic img { width: 100%; height: 100%; object-fit: contain; padding: 4px; background: #fff; }
.rail-pic.foryou img { padding: 0; border-radius: 16px; }
.cpane { background: #fff; min-height: calc(100vh - 137px); padding: 14px 12px 24px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cpane h3 { margin: 10px 0 8px; font-size: 16px; font-weight: 800; }
.cat-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cat-top h2 { margin: 0; font-size: 19px; font-weight: 800; }
.ctiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
.ctile { border: none; background: none; padding: 0; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; cursor: pointer; min-width: 0; font: inherit; }
.ct-pic { position: relative; width: 100%; aspect-ratio: 1; border-radius: 16px; background: #F5F3FA; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 2px; }
.ct-pic .pimg { width: 100%; height: 100%; object-fit: contain; padding: 6px; border-radius: 16px; }
.ct-pic .pimg.ph span { font-size: 24px; }
.ct-pic svg { width: 30px; height: 30px; color: var(--teal); }
.ct-ic { font-size: 30px; line-height: 1; }
.ct-ic.big { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.3px; }
.ct-ic.arrow { font-size: 32px; color: var(--purple); font-weight: 700; }
.ct-l { font-size: 26px; font-weight: 800; color: var(--muted); }
.ctile b { font-size: 12px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ctile small { font-size: 11px; color: var(--muted); }
.ctile .ct-pr { color: var(--teal); font-weight: 800; font-size: 12px; }
.tb { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background: var(--green); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; padding: 3px 7px; border-radius: 6px 6px 0 0; white-space: nowrap; }
.tb.sale { background: #B91C1C; }
.tb.new { background: var(--purple); }
.tb.best { background: var(--amber); }

/* Search: button in header, sticky mini bar, search screen */
.search .s-open { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; display: flex; align-items: center; gap: 10px; color: var(--muted); font: inherit; font-size: 15px; text-align: left; cursor: pointer; padding: 0; }
.search .s-open span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-top { position: fixed; top: 0; left: 50%; transform: translate(-50%, -110%); width: 100%; max-width: 560px; z-index: 20; background: var(--brand); padding: 8px 12px; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: transform .2s ease; }
.mini-top.show { transform: translate(-50%, 0); }
.mini-top img { flex: none; border-radius: 8px; }
.mini-top .s-open { flex: 1; min-width: 0; height: 42px; border: none; border-radius: 12px; background: #fff; color: var(--muted); display: flex; align-items: center; gap: 8px; padding: 0 12px; font: inherit; font-size: 14px; cursor: pointer; }
.mini-top .icon-btn { color: #fff; background: rgba(255,255,255,.18); flex: none; }
@media (prefers-reduced-motion: reduce) { .mini-top { transition: none; } }
.sbar { position: sticky; top: 0; z-index: 10; background: var(--brand); display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 4px; }
.sbar > .icon-btn { color: #fff; flex: none; }
.sbar .sfield { flex: 1; min-width: 0; height: 46px; padding: 0 6px 0 12px; gap: 8px; }
.sbar .sfield input { font-size: 16px; }
.sbar .sfield input::-webkit-search-cancel-button { display: none; }
.sbar .sx { flex: none; width: 34px; height: 34px; border: none; border-radius: 50%; background: #F1EAEE; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.sbar .mic { width: 36px; height: 36px; }
.sbar .sgo { flex: none; min-height: 46px; padding: 0 14px; background: var(--saffron); color: var(--ink); }
.sbar .sgo:hover { background: #F59E0B; }
.sres { flex: 1; padding-bottom: 12px; }
.sg-sec { padding: 14px 16px 2px; }
.sg-h { display: flex; justify-content: space-between; align-items: center; }
.sg-h h3 { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-top { padding: 14px 16px 4px; }
.sg-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 0 14px; min-height: 38px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sg-chip.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.sg-chip svg { width: 14px; height: 14px; }
.sg-tip { padding: 14px 16px; }
.sg-close { padding: 10px 16px 0; margin: 0; }
.sg-list { display: flex; flex-direction: column; background: #fff; margin: 10px 0 0; border-top: 1px solid var(--line); }
.sg-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); min-height: 64px; }
.sg-item .pimg { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: contain; background: #fff; }
.sg-item .pimg.ph span { font-size: 18px; }
.sg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sg-name { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-name b { font-weight: 800; color: var(--brand); }
.sg-txt small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-pr { flex: none; text-align: right; font-weight: 800; font-size: 14px; display: flex; flex-direction: column; align-items: flex-end; }
.sg-all { margin: 12px 16px 0; width: calc(100% - 32px); }
.sg-empty { padding: 30px 16px; }

/* Collapsed header: name + search icon */
.mini-top .mt-name { flex: 1; min-width: 0; color: #fff; font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-top .mt-search { background: #fff; color: var(--brand); }
.mini-top .mt-search svg { width: 20px; height: 20px; }
.pdp-img .pdp-search { left: auto; right: 72px; }

/* v6: bottom menu with filled active icons */
.nav { padding: 4px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(28,16,34,.06); }
.nav a { min-width: 0; flex: 1; gap: 1px; font-size: 11.5px; padding-top: 2px; }
.nav .ni { position: relative; width: 52px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.nav a.on .ni { background: var(--brand-soft); }
.nav .ni .f { fill: transparent; transition: fill .2s; }
.nav a.on .ni .f { fill: currentColor; fill-opacity: .18; }
.nav .ni .count { top: -2px; right: 4px; }
/* pinned search bar (header shrinks on scroll) */
.mini-top { gap: 10px; }
.mini-top .s-open { height: 40px; }
.hint-rot { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hint-rot.roll { animation: hintroll .45s ease; }
@keyframes hintroll { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hint-rot.roll { animation: none; } .nav .ni, .nav .ni .f { transition: none; } }
/* illustrated icons */
.art-ic { display: block; }
.qlinks .ql-ic { display: flex; height: auto; }
.qlinks .ql-ic .art-ic { width: 40px; height: 40px; }
.ct-pic .art-ic { width: 62%; height: 62%; }
.sg-h h3 { display: flex; align-items: center; gap: 6px; }
.sg-chip svg { flex: none; }

/* Help & support, policies */
.menu-list { gap: 0; padding-bottom: 4px; }
.menu-list > b { margin-bottom: 4px; }
.link-row.plain { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); min-height: 56px; background: none; box-shadow: none; border-radius: 0; }
.link-row.plain:first-of-type { border-top: none; }
.link-row.plain .art-ic { flex: none; width: 38px; height: 38px; }
.link-row.plain > span:not([aria-hidden]) { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.link-row.plain small { color: var(--muted); font-size: 12.5px; }
.link-row.plain > span[aria-hidden] { color: var(--muted); font-size: 22px; }
.care-hero { flex-direction: row !important; align-items: center; gap: 14px; }
.care-hero .art-ic { width: 52px; height: 52px; }
.care-hero b { font-size: 18px; display: block; }
.care-hero small { color: var(--muted); font-size: 13px; }
.care-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.care-btn { background: #fff; border-radius: 14px; padding: 12px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 3px; box-shadow: 0 2px 8px rgba(28,16,34,.06); min-height: 96px; }
.care-btn svg { width: 30px; height: 30px; color: var(--brand); }
.care-btn.wa svg { color: #128C7E; }
.care-btn b { font-size: 15px; }
.care-btn small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.faq details { border-top: 1px solid var(--line); }
.faq details:first-of-type { border-top: none; }
.faq summary { cursor: pointer; list-style: none; padding: 12px 28px 12px 0; font-weight: 700; font-size: 14.5px; position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 9px; font-size: 22px; font-weight: 600; color: var(--brand); }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.policy h3 { margin: 14px 0 4px; font-size: 16px; font-weight: 800; }
.policy h3:first-child { margin-top: 0; }
.policy p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: #3B2A36; }
.policy-links { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0 4px; }
.policy-links a, .site-foot a { font-size: 13px; font-weight: 700; }
.site-foot { margin: 24px 16px 8px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); text-align: center; align-items: center; }
.site-foot b { color: var(--ink); font-size: 13px; }
.site-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 6px; }

/* Deal of the day */
.deal { margin: 16px 16px 0; border-radius: 20px; background: linear-gradient(135deg, #1C1022 0%, #4C1D95 100%); color: #fff; padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 6px 20px rgba(76,29,149,.25); }
.deal-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.deal-k { display: inline-flex; align-items: center; gap: 6px; background: var(--saffron); color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .6px; padding: 5px 10px; border-radius: 8px; }
.deal .cd { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.deal .cd small { opacity: .8; }
.deal .cd i { font-style: normal; background: rgba(255,255,255,.16); border-radius: 6px; padding: 2px 5px; font-weight: 800; }
.deal-b { display: flex; gap: 12px; background: #fff; color: var(--ink); border-radius: 16px; padding: 10px; text-decoration: none; }
.deal-pic { position: relative; flex: none; width: 120px; }
.deal-pic .pimg { width: 120px; height: 120px; object-fit: contain; border-radius: 12px; background: #fff; }
.deal-pic .off { position: absolute; top: 4px; left: 4px; background: var(--green); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 6px; }
.deal-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.deal-t b { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal-pr { display: flex; align-items: baseline; gap: 8px; }
.deal-pr .now { font-size: 22px; font-weight: 800; color: var(--brand); }
.deal-pr s { color: var(--muted); font-size: 13px; }
.deal-t small { color: var(--amber); font-weight: 700; font-size: 12px; }
.deal-go { margin-top: auto; min-height: 40px; font-size: 14px; align-self: flex-start; padding: 0 14px; }
.deal-tag { background: #4C1D95 !important; }
.dealbar { background: linear-gradient(135deg, #1C1022, #4C1D95) !important; color: #fff; }

/* Product video */
.pvideo h3 { display: flex; align-items: center; gap: 8px; }
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: none; padding: 0; border-radius: 14px; overflow: hidden; background: #000; cursor: pointer; }
.yt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-btn { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); background: #E11D48; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.yt-btn::after { content: ''; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
/* Review photos */
.rv-photos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-add { min-height: 40px; font-size: 13px; cursor: pointer; }
.rv-thumbs { display: flex; gap: 6px; align-items: center; }
.rv-thumbs img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.rv-thumbs small { color: var(--muted); font-size: 11px; }
.rev-ph { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.rev-ph img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.cust-ph { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cust-ph .hscroll { padding: 0; }
.cust-ph img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; display: block; flex: none; }

/* Product questions & answers */
.qa { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.qa-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.qa-h h3 { margin: 0; font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.qa-ask { min-height: 40px; font-size: 13px; padding: 0 12px; }
.qa-it { background: #fff; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.qa-it p { margin: 0; font-size: 14px; line-height: 1.45; }
.qa-a { color: #3B2A36; }
.qa-a b { color: var(--green); }
.qa-form .row2 { align-items: end; }
.qa-ans textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; }
.qa-ans .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* Karthik Coins */
.coins-box { gap: 8px; }
.coins-h { display: flex; align-items: center; gap: 12px; }
.coins-h .art-ic { width: 40px; height: 40px; flex: none; }
.coins-h > div > b { font-size: 15px; display: block; }
.coins-h small { color: var(--muted); font-size: 12.5px; }
.coins-earn { color: var(--amber) !important; font-weight: 600; }
.coins-wallet { background: linear-gradient(135deg, #FFF7DB, #FEF3C7); border: 1px solid #FCD34D; }
.cw-top { display: flex; align-items: center; gap: 14px; }
.cw-top > div { display: flex; flex-direction: column; }
.cw-top b { font-size: 34px; font-weight: 800; line-height: 1.1; color: #7C2D12; }
.cw-top small { color: #92400E; font-size: 12.5px; font-weight: 600; }
.cw-log { display: flex; flex-direction: column; border-top: 1px dashed #FCD34D; margin-top: 4px; }
.cw-log > div { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed #FDE68A; font-size: 13px; }
.cw-log span { display: flex; flex-direction: column; }
.cw-log small { color: var(--muted); font-size: 11.5px; }
.cw-log .plus { color: var(--green); } .cw-log .minus { color: var(--brand); }

/* Notifications card + cart nudge */
.push-card { gap: 10px; }
.push-h { display: flex; align-items: center; gap: 12px; }
.push-h .art-ic { width: 42px; height: 42px; flex: none; }
.push-h b { display: block; font-size: 15px; }
.push-h small { color: var(--muted); font-size: 12.5px; }
.cart-nudge { position: relative; margin: 14px 16px 0; display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid var(--saffron); border-radius: 16px; padding: 10px 40px 10px 10px; text-decoration: none; color: var(--ink); box-shadow: 0 4px 14px rgba(251,191,36,.25); }
.cart-nudge .pimg { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: contain; background: #fff; }
.cart-nudge > span:not(.btn) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cart-nudge b { font-size: 14px; }
.cart-nudge small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-nudge .btn { min-height: 38px; font-size: 13px; padding: 0 12px; flex: none; }
.cn-x { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: none; background: transparent; font-size: 20px; color: var(--muted); cursor: pointer; }

/* Language switch */
.top-row { align-items: center; }
.top-row > div:first-child { flex: 1; min-width: 0; }
.lang-pill { flex: none; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.lang-box .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lang-box .seg button { min-height: 44px; border: none; background: #fff; font: inherit; font-weight: 700; cursor: pointer; color: var(--ink); }
.lang-box .seg button.on { background: var(--brand); color: #fff; }
html[lang="ta"] body { line-height: 1.45; }
html[lang="ta"] .nav a { font-size: 10.5px; }
html[lang="ta"] .btn { font-size: 14px; }

/* First-time welcome */
#ob-wrap { position: fixed; inset: 0; z-index: 90; background: #FFF8F0; transition: opacity .3s ease; }
#ob-wrap.out { opacity: 0; }
.ob { max-width: 560px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; padding: 16px 24px calc(24px + env(safe-area-inset-bottom)); position: relative; }
.ob-skip { position: absolute; top: 14px; right: 16px; z-index: 2; border: none; background: none; font: inherit; font-weight: 700; color: var(--muted); min-height: 44px; padding: 0 10px; cursor: pointer; }
.ob-slide { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; animation: ob-in .35s ease both; }
.ob-art { width: 260px; height: 230px; border-radius: 50%; background: radial-gradient(circle, #FDE2E7 0%, #FFF8F0 70%); display: flex; align-items: center; justify-content: center; }
.ob-slide h2 { margin: 8px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.4px; color: var(--ink); }
.ob-slide p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 340px; }
.ob-lang img { border-radius: 22px; box-shadow: 0 8px 22px rgba(159,18,57,.25); }
.ob-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 340px; margin-top: 10px; }
.ob-langs button { border: 2px solid var(--line); background: #fff; border-radius: 18px; padding: 18px 10px; display: flex; flex-direction: column; gap: 4px; align-items: center; cursor: pointer; font: inherit; color: var(--ink); }
.ob-langs button b { font-size: 22px; }
.ob-langs button small { color: var(--muted); }
.ob-langs button.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.ob-foot { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.ob-dots { display: flex; gap: 6px; }
.ob-dots i { width: 8px; height: 8px; border-radius: 4px; background: #E7D8DE; transition: width .25s; }
.ob-dots i.on { width: 24px; background: var(--brand); }
@keyframes ob-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ob-slide { animation: none; } }

/* No-internet screen: scooter out of petrol, delivery boy walks */
#offline { position: fixed; inset: 0; z-index: 95; background: #FFF8F0; display: flex; align-items: center; justify-content: center; padding: 24px; transition: opacity .35s ease; }
#offline.out { opacity: 0; }
.nf-box { max-width: 360px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nf-scene { position: relative; width: 100%; padding-top: 34px; overflow: hidden; }
.nf-art { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; overflow: hidden; }
.nf-art g { transform-box: fill-box; }
.nf-bubble { position: absolute; right: 2%; top: 0; background: #fff; border: 2px solid var(--brand); color: var(--brand); font-weight: 800; font-size: 13px; padding: 6px 10px; border-radius: 14px 14px 4px 14px; box-shadow: 0 4px 12px rgba(0,0,0,.08); animation: nf-bob 1.6s ease-in-out infinite; }
.nf-body { animation: nf-cough 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.nf-rider { opacity: 0; transition: opacity .2s; }
.nf-smoke circle { fill: #94A3B8; stroke: #64748B; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.nf-smoke circle:nth-child(1) { animation: nf-sputter 2.4s ease-out infinite 1.9s; }
.nf-bob { animation: nf-step .9s ease-in-out infinite; }
.nf-limb { transform-origin: 50% 8%; }
.nf-leg1, .nf-arm2 { animation: nf-swing .9s ease-in-out infinite; }
.nf-leg2, .nf-arm1 { animation: nf-swing .9s ease-in-out infinite -.45s; }
.nf-sweat { animation: nf-sweat 1.8s ease-in infinite; }
.nf-gauge { width: 120px; height: 70px; }
.nf-needle { transform-origin: 60px 62px; animation: nf-needle 2.4s ease-in-out infinite; }
#offline h2 { margin: 6px 0 0; font-size: 24px; font-weight: 800; }
#offline p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
#offline .btn { min-width: 180px; margin-top: 6px; }
#offline.shake .nf-box { animation: nf-shake .4s; }
/* back online: the boy jumps on, smoke puffs from the silencer and the scooter zooms off */
#offline.going .nf-walker { animation: nf-hop .35s ease-in forwards; }
#offline.going .nf-rider { opacity: 1; transition-delay: .3s; }
#offline.going .nf-stand { display: none; }
#offline.going .nf-scoot { animation: nf-drive 1.9s cubic-bezier(.6,0,.85,.35) .7s forwards; }
#offline.going .nf-shadow { opacity: 0; transition: opacity .3s .7s; }
#offline.going .nf-body { animation: nf-rumble .12s linear infinite; }
#offline.going .nf-wheel { animation: nf-spin .35s linear infinite; transform-origin: center; }
#offline.going .nf-smoke circle { animation: nf-puff .7s ease-out infinite; }
#offline.going .nf-smoke circle:nth-child(2) { animation-delay: .23s; } #offline.going .nf-smoke circle:nth-child(3) { animation-delay: .46s; }
#offline.going .nf-needle { animation: nf-fill .6s ease forwards; }
#offline.going .nf-road { animation: nf-road .4s linear infinite; }
#offline.going .btn, #offline.going small { visibility: hidden; }
@keyframes nf-cough { 0%, 80%, 100% { transform: none; } 84% { transform: translateY(-2px) rotate(-.8deg); } 88% { transform: translateY(1px); } 92% { transform: translateY(-1px) rotate(.5deg); } }
@keyframes nf-step { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-2.5px); } }
@keyframes nf-swing { 0%, 100% { transform: rotate(24deg); } 50% { transform: rotate(-24deg); } }
@keyframes nf-sweat { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-6px, 14px); } }
@keyframes nf-hop { to { opacity: 0; transform: translate(-60px, -14px) scale(.85); } }
@keyframes nf-needle { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
@keyframes nf-fill { to { transform: rotate(150deg); } }
@keyframes nf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes nf-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes nf-rumble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes nf-spin { to { transform: rotate(360deg); } }
@keyframes nf-puff { 0% { opacity: .95; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(-30px, -18px) scale(1.7); } }
@keyframes nf-sputter { 0%, 70%, 100% { opacity: 0; transform: scale(.4); } 80% { opacity: .7; transform: translate(-8px, -4px) scale(.9); } 95% { opacity: 0; transform: translate(-16px, -10px) scale(1.3); } }
@keyframes nf-drive { 0% { transform: translateX(0); } 15% { transform: translateX(-12px); } 100% { transform: translateX(420px); } }
@keyframes nf-road { to { stroke-dashoffset: -30; } }
@media (prefers-reduced-motion: reduce) { #offline * { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }

/* ═════════ Royal maroon & gold theme ═════════ */
:root { --gold: #FBBF24; --gold-l: #FDE68A; --maroon-d: #4A0B2A; }
body { background: #FFF8F0; }
/* headers */
header.top { background: radial-gradient(120% 140% at 90% 0%, #C81E4E 0%, #9F1239 50%, #7A0E2C 100%) !important; border-bottom: 3px solid var(--gold); }
header.top .search, .mini-top .s-open { box-shadow: 0 0 0 2px rgba(251,191,36,.55), 0 6px 14px rgba(0,0,0,.18); }
.brand-h img { box-shadow: 0 0 0 2px var(--gold); border-radius: 10px; }
.subbar { background: linear-gradient(90deg, #9F1239, #7A0E2C); color: #fff; border-bottom: 3px solid var(--gold); }
.subbar h2, .subbar > a, .subbar > button, .subbar .icon-btn { color: #fff !important; }
.subbar .icon-btn { background: rgba(255,255,255,.12) !important; }
.hero { background: radial-gradient(120% 140% at 90% 0%, #C81E4E 0%, #9F1239 50%, #7A0E2C 100%) !important; border-bottom: 3px solid var(--gold); }
.hero .ok { box-shadow: 0 0 0 2px var(--gold); }
/* sections, cards, buttons */
.sec-h h3 { color: #9F1239; position: relative; padding-bottom: 6px; }
.sec-h h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 2px; background: var(--gold); }
.sec-h a { color: #9F1239; font-weight: 800; }
.cat .c { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(251,191,36,.7) !important; }
.cat.on .c { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9F1239 !important; }
.card { border: 1px solid #F5E6C8; box-shadow: 0 4px 12px rgba(80,10,30,.07); }
.card .pr { color: #9F1239; }
.qlinks a { border-top: 3px solid var(--gold); }
.box { border-top: 3px solid var(--gold); box-shadow: 0 4px 14px rgba(80,10,30,.06); }
.sum.total span { color: #9F1239; }
.btn-primary { background: linear-gradient(180deg, #C81E4E, #9F1239) !important; color: #FDE68A !important; }
/* bottom menu */
.nav { background: var(--maroon-d) !important; border-top: 2px solid var(--gold) !important; }
.nav a { color: #E9C9D3 !important; }
.nav a.on { color: var(--gold-l) !important; }
.nav a.on .ni { background: rgba(251,191,36,.18) !important; }
/* categories rail */
.rail { background: #FBEFE3; }
.rail-it.on { background: #fff; }
.rail-it.on::before { background: var(--gold) !important; width: 5px; }
.rail-it.on b { color: #9F1239; }
/* product page */
.pdp-img { background: radial-gradient(120% 90% at 50% 35%, #FFF7E8 0%, #FBE3C2 38%, #C81E4E 78%, #9F1239 100%); overflow: hidden; }
.pdp-img .gal, .pdp-img .gal .pimg, .pdp-img > .pimg { background: transparent !important; }
.pdp-img::before { content: ""; position: absolute; left: 50%; top: 175px; width: 290px; height: 290px; margin: -145px; border-radius: 50%; border: 3px solid rgba(251,191,36,.7); box-shadow: 0 0 0 14px rgba(251,191,36,.15), 0 0 60px rgba(251,191,36,.45) inset; pointer-events: none; }
.pdp-img .pimg { mix-blend-mode: multiply; filter: drop-shadow(0 18px 18px rgba(80,10,30,.35)); }
.pdp { background: #FFF8F0; border-radius: 26px 26px 0 0; margin-top: -26px; position: relative; box-shadow: 0 -8px 24px rgba(80,10,30,.18); }
.pdp .cat-l { display: inline-block; background: #9F1239; color: #FDE68A; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.pdp h2 { color: #4A0B2A; }
.price-row { background: linear-gradient(90deg, #9F1239, #C81E4E); color: #fff; border-radius: 16px; padding: 12px 16px; box-shadow: 0 8px 18px rgba(159,18,57,.3); }
.price-row .now { color: #FDE68A; font-size: 30px; }
.price-row s { color: #FBCFE8; }
.price-row .save { background: var(--gold); color: #4A0B2A; padding: 3px 10px; border-radius: 999px; }
.pdp .emi { background: #fff; border: 1.5px solid var(--gold); }
.pdp .emi-h b { color: #9F1239; }
.pdp .instock:not(.out) { background: linear-gradient(90deg, #DCFCE7, #F0FDF4); border: 1px solid #86EFAC; }
.ship-info, .combo, .qcmp { background: #fff; border: none !important; border-radius: 18px !important; box-shadow: 0 4px 14px rgba(80,10,30,.08); border-top: 4px solid var(--gold) !important; }
.pcard { background: #fff; border: none; margin: 0; border-radius: 18px; box-shadow: 0 4px 14px rgba(80,10,30,.08); border-top: 4px solid #9F1239; padding: 16px; }
.pcard h3, .combo h3, .qa h3, .reviews h3, .similar h3, .qcmp h3 { color: #9F1239; }
.qa, .reviews { background: #fff; border-radius: 18px; padding: 16px; border-top: 4px solid var(--gold); box-shadow: 0 4px 14px rgba(80,10,30,.08); }
.hl-i { background: linear-gradient(135deg, #FDE68A, #FBBF24); color: #7C2D12; border-radius: 50%; }
.details button.on { background: #9F1239 !important; color: #FDE68A !important; border-color: #9F1239 !important; }
/* Add to cart / Buy now bar stays plain white */
.buybar { background: #fff; border-top: 1px solid var(--line); }
.buybar .btn-ghost { background: #fff; color: #9F1239; border: 2px solid #9F1239; }
.pdp-img .gal-thumbs { padding-bottom: 38px; position: relative; z-index: 1; }
/* Royal: home category band */
.cat-band { margin: 16px 16px 0; background: linear-gradient(180deg, #FFFFFF 0%, #FFF3E0 100%); border-radius: 20px; border-top: 3px solid var(--gold); box-shadow: 0 6px 16px rgba(80,10,30,.08); padding: 4px 0 14px; overflow: hidden; }
.cat-band-h { padding: 12px 14px 4px; }
.cat-band .cats { padding: 10px 14px 4px; gap: 12px; scrollbar-width: none; }
.cat-band .cats::-webkit-scrollbar { display: none; }
.cat-band .cat { min-width: 70px; }
.cat-band .cat .c { width: 62px; height: 62px; background: radial-gradient(circle at 35% 30%, #FFFBF2, #FBE3C2) !important; color: #9F1239 !important; font-size: 22px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(251,191,36,.75), 0 6px 12px rgba(80,10,30,.12) !important; transition: transform .15s; }
.cat-band .cat .c.has-img { background: #fff !important; }
.cat-band .cat:first-child .c { background: radial-gradient(circle at 35% 30%, #C81E4E, #7A0E2C) !important; color: var(--gold-l) !important; }
.cat-band .cat b { color: #4A0B2A; font-weight: 600; }
.cat-band .cat.on .c { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #9F1239, 0 8px 16px rgba(159,18,57,.28) !important; transform: translateY(-2px); }
.cat-band .cat.on b { color: #9F1239; font-weight: 800; }
.cat-band .cat.on b::after { content: ""; display: block; width: 18px; height: 3px; border-radius: 2px; background: var(--gold); margin: 4px auto 0; }
.cat-band .cat:active .c { transform: scale(.94); }
/* Royal: footer */
.site-foot { margin: 28px 0 0; padding: 26px 20px 22px; border-top: 3px solid var(--gold); border-radius: 26px 26px 0 0; background: radial-gradient(120% 120% at 85% 0%, #C81E4E 0%, #9F1239 45%, #4A0B2A 100%); color: #F5D0DC; gap: 8px; position: relative; overflow: hidden; }
.site-foot::before { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; border: 2px solid rgba(251,191,36,.25); box-shadow: 0 0 0 18px rgba(251,191,36,.06); }
.sf-brand { display: flex; align-items: center; gap: 12px; text-align: left; }
.sf-brand img { border-radius: 12px; box-shadow: 0 0 0 2px var(--gold), 0 6px 14px rgba(0,0,0,.25); }
.sf-brand b { display: block; color: #fff; font-size: 20px; font-weight: 800; }
.sf-brand small { color: var(--gold-l); font-size: 12.5px; font-weight: 600; }
.sf-tag { margin: 2px 0 0; color: var(--gold-l); font-weight: 700; font-size: 13.5px; }
.sf-addr { font-size: 12.5px; color: #F5D0DC; max-width: 300px; }
.sf-acts { display: flex; gap: 10px; margin: 8px 0 2px; }
.sf-acts a { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; padding: 10px 8px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(251,191,36,.45); color: #fff; text-decoration: none; font-size: 12px; font-weight: 700; }
.sf-acts a svg { color: var(--gold); }
.sf-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.sf-trust span { background: rgba(0,0,0,.18); border-radius: 999px; padding: 5px 10px; font-size: 11.5px; font-weight: 700; color: #FDE68A; }
.site-foot nav { margin-top: 10px; padding-top: 12px; border-top: 1px dashed rgba(251,191,36,.4); width: 100%; }
.site-foot nav a { color: #fff; font-weight: 600; font-size: 12.5px; text-decoration: none; opacity: .9; }
.site-foot nav a:hover { text-decoration: underline; }
.sf-copy { color: #E9C9D3; font-size: 11.5px; margin-top: 6px; opacity: .8; }
/* Bank offers */
.bk { flex: none; display: inline-block; width: 34px; height: 34px; border-radius: 9px; color: #fff; font: 800 9.5px/34px Inter, sans-serif; text-align: center; letter-spacing: .02em; }
.bo { background: #fff; border: 1px solid #A7F3D0; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.bo h4 { margin: 0; font-size: 15px; color: #065F46; }
.bo-best { background: linear-gradient(90deg, #ECFDF5, #F0FDF4); border: 1px dashed #10B981; border-radius: 10px; padding: 8px 10px; font-size: 13.5px; color: #065F46; }
.bo-best b { font-size: 17px; color: #047857; }
.bo-best span { color: var(--muted); font-size: 12.5px; }
.bo-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; }
.bo-tc { font-size: 12px; font-weight: 800; color: var(--brand); margin-left: 4px; }
.bo-terms { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); background: #F8FAFC; border-radius: 8px; padding: 6px 8px; }
.bo-more { font-size: 13px; font-weight: 800; color: var(--brand); align-self: flex-start; }
.bo-pick { display: flex; flex-direction: column; gap: 8px; }
.bo-opt { display: flex; gap: 10px; align-items: center; border: 1.5px solid #EADFE3; border-radius: 12px; padding: 9px 10px; font-size: 13.5px; }
.bo-opt.on { border-color: #10B981; background: #F0FDF4; }
.bo-opt small { display: block; color: var(--muted); font-size: 12px; }
.bo-opt .sv { margin-left: auto; font-weight: 800; color: #047857; white-space: nowrap; text-align: right; }
.bo-opt .sv small { color: var(--muted); font-weight: 600; }
.bo-cart .bo-best, .box .bo-best { margin-top: 4px; }

/* ═════════ Desktop / laptop layout ═════════ */
.dtop { display: none; }
.co-main, .co-side { display: contents; }
@media (min-width: 1024px) {
  :root { --dtop-h: 72px; }
  body { background: #F6EFE7; }
  .dtop { display: block; position: sticky; top: 0; z-index: 30; background: radial-gradient(120% 160% at 85% 0%, #C81E4E 0%, #9F1239 45%, #7A0E2C 100%); border-bottom: 3px solid var(--gold); box-shadow: 0 6px 18px rgba(74,11,42,.18); }
  .dtop-in { max-width: 1240px; margin: 0 auto; height: var(--dtop-h); padding: 0 24px; display: flex; align-items: center; gap: 24px; }
  .dt-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; flex: none; }
  .dt-brand img { border-radius: 11px; box-shadow: 0 0 0 2px var(--gold); }
  .dt-brand b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; }
  .dt-brand small { display: block; font-size: 12px; color: var(--gold-l); font-weight: 600; }
  .dt-search { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 0 6px 0 14px; height: 46px; box-shadow: 0 0 0 2px rgba(251,191,36,.55); color: var(--muted); }
  .dt-search input { flex: 1; min-width: 0; border: none; outline: none; font: inherit; font-size: 15px; background: transparent; color: var(--ink); height: 100%; }
  .dt-search .btn { min-height: 36px; height: 36px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
  .dt-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
  .dt-links a, .dt-lang { color: #F5D0DC; text-decoration: none; font-weight: 700; font-size: 14.5px; padding: 9px 12px; border-radius: 10px; background: none; border: none; cursor: pointer; font-family: inherit; position: relative; display: flex; align-items: center; gap: 6px; }
  .dt-links a:hover, .dt-lang:hover { background: rgba(255,255,255,.1); color: #fff; }
  .dt-links a.on { color: var(--gold-l); background: rgba(251,191,36,.16); }
  .dt-lang { border: 1.5px solid rgba(255,255,255,.45); padding: 6px 12px; margin: 0 6px; }
  .dt-cart { background: rgba(255,255,255,.12) !important; color: #fff !important; }
  .dt-cart svg { width: 20px; height: 20px; }
  .dt-cart .count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--gold); color: #4A0B2A; font: 800 11px/20px Inter, sans-serif; text-align: center; font-style: normal; padding: 0 5px; }

  /* page container */
  .wrap { max-width: 1240px; background: transparent; padding: 0 24px 0; }
  .nav { display: none !important; }
  .mini-top { display: none !important; }
  .wa-float { bottom: 28px; right: 28px; }
  .cmpbar.on-home, .cmpbar.on-pdp { bottom: 0; }
  .subbar { top: var(--dtop-h); border-radius: 0 0 16px 16px; }
  .rail { top: calc(var(--dtop-h) + 73px); max-height: calc(100vh - var(--dtop-h) - 90px); }

  /* home: the mobile header is replaced by the top bar */
  header.top { display: none; }
  .offer { margin: 22px 0 0; min-height: 230px; padding: 32px 40px; border-radius: 26px; }
  .offer h3 { font-size: 34px; }
  .dots { margin-top: 8px; }
  .cat-band { margin: 22px 0 0; }
  .cat-band .cats { gap: 22px; padding: 12px 20px 6px; }
  .qlinks { padding: 18px 0 0; gap: 16px; }
  .qlinks a { flex-direction: row; justify-content: center; gap: 12px; padding: 16px; text-align: left; }
  .newbox { margin-left: 0 !important; margin-right: 0 !important; }
  .sec-h { padding: 28px 0 12px; }
  #fbar { padding: 0; }
  .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; padding: 0 0 32px; }
  .card { transition: transform .15s, box-shadow .15s; }
  .card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(80,10,30,.14); }
  .card .pimg { height: 170px; }
  .site-foot { margin: 36px -24px 0; border-radius: 28px 28px 0 0; padding: 36px 24px 28px; }

  /* product page: photo left, details right */
  #app:has(> main.pdp) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; padding-top: 24px; }
  #app:has(> main.pdp) > :not(.pdp-img):not(main.pdp):not(.buybar) { grid-column: 1 / -1; }
  .pdp-img { grid-column: 1; grid-row: 1 / span 2; position: sticky !important; top: calc(var(--dtop-h) + 20px); border-radius: 28px; box-shadow: 0 12px 30px rgba(80,10,30,.18); }
  .pdp-img .pimg { height: 480px !important; }
  .pdp-img::before { top: 245px; width: 380px; height: 380px; margin: -190px; }
  .gal-count { top: 440px; }
  .pdp-img .gal-thumbs { padding-bottom: 16px; justify-content: center; }
  main.pdp { grid-column: 2; grid-row: 1; margin-top: 0; border-radius: 28px; box-shadow: 0 8px 24px rgba(80,10,30,.1); padding: 26px 24px; }
  .pdp h2 { font-size: 30px; }
  .buybar { grid-column: 2; grid-row: 2; border-radius: 18px; margin: 14px 0 24px; border: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(80,10,30,.08); bottom: 12px; }

  /* cart: details left, summary right */
  #checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; padding: 20px 0 32px; }
  .co-main, .co-side { display: flex; flex-direction: column; gap: 12px; }
  .co-side { position: sticky; top: calc(var(--dtop-h) + 80px); }

  /* simple pages read better narrower */
  #app:has(> .subbar):not(:has(#checkout)):not(:has(.catpage)):not(:has(.pdp)) > :not(.subbar):not(nav) { max-width: 860px; margin-left: auto; margin-right: auto; width: 100%; }
  .catpage { grid-template-columns: 200px 1fr; gap: 20px; padding-top: 16px; }
  .rail { border-radius: 18px; background: #fff; }
  .cpane { border-radius: 18px; }
  .cpane .ctiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 14px; }
  .cpane { padding: 20px 22px 28px; }
  #app:has(> .hero.prof) > :not(.nav) { max-width: 860px; margin-left: auto; margin-right: auto; width: 100%; }
  #app:has(> .hero.prof) > .hero { border-radius: 0 0 22px 22px; }
  .sbar { display: none !important; }
}
@media (min-width: 1400px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ═════════ Big-store desktop features (Flipkart / Amazon style) ═════════ */
.dsk-only, .fside, .hero-nav, .dt-cats { display: none; }
.listing { display: block; }
@media (min-width: 1024px) {
  :root { --dtop-h: 116px; }
  .dsk-only { display: block; }
  .eta.dsk-only { display: flex; }
  .dtop-in { height: 72px; }
  /* category strip + mega menu */
  .dt-cats { display: block; background: rgba(0,0,0,.18); border-top: 1px solid rgba(255,255,255,.1); }
  .dtc-in { max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 44px; display: flex; align-items: center; gap: 2px; }
  .dt-cats a, .mega-btn { color: #FBE7EC; text-decoration: none; font-size: 13.5px; font-weight: 600; padding: 8px 12px; border-radius: 8px; white-space: nowrap; background: none; border: none; cursor: pointer; font-family: inherit; }
  .dt-cats a:hover, .mega-btn:hover, .mega:focus-within .mega-btn { background: rgba(255,255,255,.12); color: #fff; }
  .dtc-sp { flex: 1; }
  .mega { position: relative; }
  .mega-btn { font-weight: 800; color: var(--gold-l); background: rgba(251,191,36,.14); }
  .mega-panel { position: absolute; top: 100%; left: 0; margin-top: 6px; width: min(1100px, calc(100vw - 48px)); background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(40,6,20,.28); border-top: 4px solid var(--gold); padding: 22px 26px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 26px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .15s; z-index: 40; }
  .mega:hover .mega-panel, .mega:focus-within .mega-panel { opacity: 1; visibility: visible; transform: none; }
  .mg-col { display: flex; flex-direction: column; gap: 2px; }
  .mega-panel a { color: #374151; padding: 4px 0; font-weight: 500; font-size: 13.5px; border-radius: 0; }
  .mega-panel a:hover { color: #9F1239; background: none; text-decoration: underline; }
  .mega-panel .mg-h { color: #9F1239; font-weight: 800; font-size: 14.5px; border-bottom: 2px solid #FDE68A; margin-bottom: 4px; }
  .mega-panel .mg-h small { color: #9CA3AF; font-weight: 600; }
  .mega-panel .mg-p { color: #047857; }

  /* hero slider */
  .offer { position: relative; min-height: 300px; padding: 40px 80px; }
  .offer .art { width: 180px; height: 180px; }
  .offer .art svg { width: 110px; height: 110px; }
  .offer p { font-size: 17px; }
  .hero-nav { display: flex; position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: #4A0B2A; font-size: 30px; line-height: 1; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.18); z-index: 3; }
  .hero-nav.prev { left: 16px; } .hero-nav.next { right: 16px; }
  .hero-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }

  /* product rows */
  .dsk-rows { margin-top: 10px; }
  .drow { background: #fff; border-radius: 22px; padding: 18px 20px 20px; margin-top: 22px; box-shadow: 0 6px 18px rgba(80,10,30,.07); border-top: 3px solid var(--gold); }
  .drow-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
  .drow-h h3 { margin: 0; font-size: 21px; font-weight: 800; color: #4A0B2A; }
  .drow-h small { color: var(--muted); font-size: 13px; }
  .drow.deals { background: linear-gradient(135deg, #FFF7ED 0%, #fff 45%); }
  .dl-timer { font-size: 13.5px; font-weight: 700; color: #9F1239; background: #FFF1F4; border: 1px solid #FBCFE8; padding: 6px 12px; border-radius: 999px; }
  .dl-timer b { font-variant-numeric: tabular-nums; font-size: 15px; }
  .drow-wrap { position: relative; }
  .drow-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 16px) / 6); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
  .drow-track::-webkit-scrollbar { display: none; }
  .rnav { position: absolute; top: 38%; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #EADFE3; background: #fff; color: #4A0B2A; font-size: 26px; cursor: pointer; box-shadow: 0 6px 14px rgba(0,0,0,.14); z-index: 2; display: flex; align-items: center; justify-content: center; }
  .rnav.prev { left: -14px; } .rnav.next { right: -14px; }
  .rcard { scroll-snap-align: start; display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: var(--ink); border-radius: 16px; padding: 10px; transition: .15s; }
  .rcard:hover { background: #FFF8F0; transform: translateY(-3px); }
  .rc-pic { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; background: #FAF7F4; border-radius: 14px; overflow: hidden; }
  .rc-pic .pimg { height: 140px !important; width: 100%; object-fit: contain; background: transparent; }
  .rc-pic em { position: absolute; left: 8px; top: 8px; background: #16A34A; color: #fff; font-style: normal; font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: 6px; }
  .rcard b { font-size: 13.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 35px; }
  .rc-pr { font-weight: 800; font-size: 16px; color: #9F1239; }
  .rc-pr s { color: #9CA3AF; font-weight: 500; font-size: 12.5px; }
  .rc-rate { font-size: 12px; font-weight: 700; color: #fff; background: #16A34A; align-self: flex-start; padding: 2px 7px; border-radius: 5px; }
  .rc-rate small { font-weight: 600; opacity: .85; }
  .ptiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .ptile { border-radius: 18px; padding: 16px; text-decoration: none; color: #4A0B2A; display: flex; flex-direction: column; gap: 2px; min-height: 150px; transition: .15s; position: relative; overflow: hidden; }
  .ptile:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(80,10,30,.12); }
  .ptile b { font-size: 17px; font-weight: 800; }
  .ptile small { color: #6B7280; font-weight: 600; }
  .pt-pics { display: flex; margin-top: auto; gap: 4px; }
  .pt-pics .pimg { width: 54px !important; height: 54px !important; object-fit: contain; background: #fff; border-radius: 12px; padding: 4px; }
  .btiles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
  .btile { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); padding: 12px 6px; border-radius: 16px; transition: .15s; }
  .btile:hover { background: #FFF8F0; }
  .btile span { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; color: #9F1239; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(251,191,36,.6); }
  .btile b { font-size: 14px; } .btile small { color: var(--muted); font-size: 12px; }

  /* listing with filter sidebar */
  .listing { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
  .fside { display: block; position: sticky; top: calc(var(--dtop-h) + 16px); max-height: calc(100vh - var(--dtop-h) - 32px); overflow-y: auto; background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 4px 14px rgba(80,10,30,.07); border-top: 3px solid var(--gold); scrollbar-width: thin; }
  .fs-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .fs-h b { font-size: 17px; color: #4A0B2A; }
  .fs-sec { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
  .fs-sec:last-child { border-bottom: none; }
  .fs-sec h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; }
  .fs-opt { display: flex; align-items: center; gap: 9px; background: none; border: none; padding: 6px 4px; border-radius: 8px; font: inherit; font-size: 14px; color: #374151; cursor: pointer; text-align: left; }
  .fs-opt:hover { background: #FFF8F0; }
  .fs-opt i { flex: none; width: 16px; height: 16px; border-radius: 5px; border: 2px solid #CBB8C0; }
  .fs-opt.on { color: #9F1239; font-weight: 700; }
  .fs-opt.on i { background: #9F1239; border-color: #9F1239; box-shadow: inset 0 0 0 2px #fff; }
  .fs-opt small { margin-left: auto; color: #9CA3AF; font-size: 12px; }
  .lmain .fbtn, .lmain .fpanel { display: none !important; }
  .lmain .fbar { padding: 0 0 12px; }
  .lmain .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #sres .listing { padding: 0 0 24px; }

  /* product page extras */
  .eta { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #EFF6FF; color: #1E3A8A; font-size: 14px; border: 1px solid #BFDBFE; }
  .eta svg { flex: none; color: #2563EB; }
  .pdp-img .pimg { transition: transform .15s ease; cursor: zoom-in; }
  .pdp-img .pimg.zoom { transform: scale(2); }
  .pdp-img { overflow: hidden; }
}
@media (min-width: 1400px) { .lmain .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }