/* ==========================================================================
   Storefront + customer account styles (Bootstrap 5.3 + tokens below)
   Brand colour comes from Settings (inline --brand on <html>).
   ========================================================================== */

@font-face {
  font-family: 'Anek Latin';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  font-stretch: 75% 125%;
  src: url('../vendor/fonts/anek-latin-latin-wdth-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anek Latin';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  font-stretch: 75% 125%;
  src: url('../vendor/fonts/anek-latin-latin-ext-wdth-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anek Gujarati';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  font-stretch: 75% 125%;
  src: url('../vendor/fonts/anek-gujarati-gujarati-wdth-normal.woff2') format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0A80-0AFF, U+200C-200D, U+25CC, U+A830-A839;
}

:root {
  --brand: #2874f0;
  --brand-ink: #ffffff;
  --brand-strong: #1c5fd4;
  --brand-soft: #eef4ff;
  --brand-line: #b8d0fa;
  --marigold: #ff9f00;
  --marigold-ink: #ffffff;
  --marigold-soft: #fff7e6;
  --fk-orange: #fb641b;
  --ink: #212121;
  --ink-2: #353c4e;
  --muted: #878787;
  --line: #e0e0e0;
  --line-strong: #c2c2c2;
  --canvas: #f1f3f6;
  --paper: #ffffff;
  --success: #388e3c;
  --success-soft: #e7f8ec;
  --danger: #ff4343;
  --danger-soft: #fdecec;
  --radius-xs: 2px;
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 4px;
  --font: 'Anek Latin', 'Anek Gujarati', Roboto, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --header-h: 56px;

  --bs-body-font-family: var(--font);
  --bs-body-font-size: 0.95rem;
  --bs-body-line-height: 1.5;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--canvas);
  --bs-border-color: var(--line);
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: 40, 116, 240;
  --bs-link-hover-color: var(--brand-strong);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius);
  --bs-focus-ring-color: color-mix(in srgb, var(--brand) 35%, transparent);
}

[data-bs-theme='dark'] {
  --ink: #e9ecf2;
  --ink-2: #c3c9d6;
  --muted: #9aa2b4;
  --line: #2a3040;
  --line-strong: #394055;
  --canvas: #0f1219;
  --paper: #171b25;
  --brand-soft: color-mix(in srgb, var(--brand) 22%, #171b25);
  --brand-line: color-mix(in srgb, var(--brand) 50%, #171b25);
  --marigold-soft: #33280f;
  --success-soft: #11291f;
  --danger-soft: #331718;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--canvas);
  --bs-border-color: var(--line);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-link-color: color-mix(in srgb, var(--brand) 55%, #fff);
  --bs-link-hover-color: color-mix(in srgb, var(--brand) 40%, #fff);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { scroll-padding-top: calc(var(--header-h) + 48px); }
body { font-family: var(--font); font-stretch: 100%; background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-stretch: 94%; font-weight: 700; letter-spacing: -0.005em; line-height: 1.2; color: var(--ink); }
h1, .h1 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); }
h2, .h2 { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); }
h3, .h3 { font-size: 1.1rem; }
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; border-radius: 2px; }
.text-muted, .text-secondary { color: var(--muted) !important; }
.small, small { font-size: 0.84rem; }
.num { font-variant-numeric: tabular-nums; }
.surface { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .06); }
.page { padding-block: 1rem 3rem; }
.page-head { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: .75rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); }
.page-head h1 { margin: 0; font-size: 1.35rem; }
.page-head p { color: var(--muted); margin: .3rem 0 0; max-width: 72ch; font-size: .88rem; }
.container-store { max-width: 1360px; margin-inline: auto; padding-inline: 12px; }
@media (min-width: 992px) { .container-store { padding-inline: 18px; } }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 2000; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--radius-sm); }
.skip-link:focus { top: 8px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Buttons follow Flipkart style */
.btn { font-weight: 600; border-radius: var(--radius-sm); letter-spacing: .01em; }
.btn-primary {
  --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-color: var(--brand-ink);
  --bs-btn-hover-bg: var(--brand-strong); --bs-btn-hover-border-color: var(--brand-strong); --bs-btn-hover-color: var(--brand-ink);
  --bs-btn-active-bg: var(--brand-strong); --bs-btn-active-border-color: var(--brand-strong); --bs-btn-active-color: var(--brand-ink);
  --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); --bs-btn-disabled-color: var(--brand-ink);
  --bs-btn-focus-shadow-rgb: 40, 116, 240;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .18);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand-line); --bs-btn-hover-bg: var(--brand-soft);
  --bs-btn-hover-color: var(--brand-strong); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand-soft);
  --bs-btn-active-color: var(--brand-strong); --bs-btn-active-border-color: var(--brand);
}
[data-bs-theme='dark'] .btn-outline-primary { --bs-btn-color: color-mix(in srgb, var(--brand) 55%, #fff); --bs-btn-hover-color: #fff; }
.btn-marigold {
  --bs-btn-bg: var(--marigold); --bs-btn-border-color: var(--marigold); --bs-btn-color: #fff;
  --bs-btn-hover-bg: #e68f00; --bs-btn-hover-border-color: #e68f00; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #cc7f00; --bs-btn-active-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2);
}
.btn-fk-cart {
  --bs-btn-bg: #ff9f00; --bs-btn-border-color: #ff9f00; --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: #f09500; --bs-btn-hover-border-color: #f09500; --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: #d98700; --bs-btn-active-color: #ffffff;
  text-transform: uppercase; font-weight: 700; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2);
}
.btn-fk-buy {
  --bs-btn-bg: #fb641b; --bs-btn-border-color: #fb641b; --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: #e85812; --bs-btn-hover-border-color: #e85812; --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: #d14e0f; --bs-btn-active-color: #ffffff;
  text-transform: uppercase; font-weight: 700; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2);
}
.fk-view-all { font-size: .8rem; font-weight: 700; padding: .42rem .95rem; text-transform: uppercase; letter-spacing: .02em; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2); }
.btn-ghost { --bs-btn-color: var(--ink-2); --bs-btn-hover-bg: color-mix(in srgb, var(--ink) 6%, transparent); --bs-btn-hover-color: var(--ink); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; }
.btn-lg { padding: .75rem 1.35rem; font-size: .98rem; }
.form-control, .form-select { border-color: var(--line-strong); background-color: var(--paper); border-radius: var(--radius-sm); }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--brand) 18%, transparent); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-label { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; color: var(--ink-2); }
.badge-soft { font-weight: 600; padding: .35em .6em; border-radius: 3px; }
.badge-primary { background: var(--brand-soft); color: var(--brand-strong); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-warning, .badge-orange { background: var(--marigold-soft); color: #8a5300; }
.badge-info, .badge-indigo { background: #e9edfd; color: #3546b5; }
.badge-secondary { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); }
[data-bs-theme='dark'] .badge-info, [data-bs-theme='dark'] .badge-indigo { background: #1d2547; color: #aab6ff; }
[data-bs-theme='dark'] .badge-warning, [data-bs-theme='dark'] .badge-orange { color: #ffcf7a; }

/* --------------------------------------------------------------------------
   Price block — Flipkart style: bold selling price, strikethrough MRP, green % off
   -------------------------------------------------------------------------- */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .45rem; font-variant-numeric: tabular-nums; }
.price-now { font-weight: 700; font-size: 1.15rem; line-height: 1.1; color: var(--ink); }
.price-mrp { color: var(--muted); font-size: .84rem; line-height: 1; }
.price-mrp s { text-decoration-thickness: 1px; }
.price-off {
  align-self: baseline; display: inline-block; background: transparent; color: var(--success);
  font-weight: 700; font-size: .84rem; line-height: 1; padding: 0;
}
.price-lg .price-now { font-size: clamp(1.65rem, 1.4rem + .8vw, 2rem); }
.price-lg .price-mrp { font-size: 1rem; }
.price-lg .price-off { font-size: 1rem; }
.price-sm .price-now { font-size: 1.02rem; }
.price-note { font-size: .8rem; color: var(--muted); }

.rating-chip { display: inline-flex; align-items: center; gap: .2rem; background: var(--success); color: #fff; font-weight: 700; font-size: .75rem; line-height: 1; padding: .22rem .42rem; border-radius: 3px; }
.rating-chip .bi { font-size: .65rem; }
.rating-chip.is-low { background: #ff9f00; }
.fk-assured { display: inline-flex; align-items: center; gap: .18rem; background: #eef4ff; color: #2874f0; border: 1px solid #d0e0fc; font-size: .68rem; font-weight: 800; font-style: italic; padding: .1rem .38rem; border-radius: 3px; white-space: nowrap; }
.fk-assured .bi { color: #2874f0; font-size: .72rem; font-style: normal; }
.stars { color: var(--marigold); letter-spacing: 1px; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Header — Flipkart Blue Topbar + White Category Bar
   -------------------------------------------------------------------------- */
.announce { background: #172337; color: #f1f3f7; font-size: .8rem; text-align: center; padding: .28rem 1rem; font-weight: 500; }
.announce a { color: #ffe500; }
.site-header { position: sticky; top: 0; z-index: 1030; background: var(--paper); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12); }
.fk-topbar { background: var(--brand); color: #ffffff; }
.header-row { display: flex; align-items: center; gap: .85rem; min-height: var(--header-h); padding-block: .35rem; }
.brand-mark { display: inline-flex; flex-direction: column; justify-content: center; text-decoration: none; color: #ffffff; line-height: 1.05; white-space: nowrap; }
.brand-mark:hover { color: #ffffff; }
.brand-mark img { max-height: 36px; width: auto; }
.brand-main { font-weight: 800; font-style: italic; font-size: 1.35rem; letter-spacing: -.01em; color: #ffffff; }
.brand-sub { font-size: .68rem; font-style: italic; color: #f0f0f0; font-weight: 500; margin-top: 1px; }
.brand-plus { color: #ffe500; font-weight: 700; }
.header-search { flex: 1; max-width: 580px; position: relative; }
.header-search .form-control { height: 38px; padding: 0 2.75rem 0 .95rem; border-radius: 2px; background: #ffffff; border: 0; font-size: .9rem; color: #212121; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23); }
.header-search .form-control::placeholder { color: #878787; }
.header-search .form-control:focus { background: #ffffff; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .3); }
.header-search .search-btn { position: absolute; right: 0; top: 0; bottom: 0; width: 42px; border: 0; background: transparent; color: var(--brand); font-size: 1.05rem; display: grid; place-items: center; cursor: pointer; }
.suggest { position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 0 0 2px 2px; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2); padding: .35rem 0; z-index: 1050; max-height: 70vh; overflow: auto; }
.suggest a { display: flex; align-items: center; gap: .75rem; padding: .45rem .85rem; color: var(--ink); text-decoration: none; font-size: .9rem; }
.suggest a:hover, .suggest a.is-active { background: var(--brand-soft); color: var(--brand); }
.suggest img { width: 36px; height: 36px; object-fit: contain; border-radius: 2px; background: #fff; }
.suggest .suggest-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--muted); padding: .35rem .85rem .15rem; }
.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.fk-login-btn { display: inline-flex; align-items: center; justify-content: center; background: #ffffff; color: var(--brand); font-weight: 700; font-size: .92rem; padding: .35rem 2rem; border-radius: 2px; text-decoration: none; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2); white-space: nowrap; height: 34px; }
.fk-login-btn:hover { background: #f8faff; color: var(--brand-strong); }
.header-action { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .65rem; border-radius: 2px; color: #ffffff; text-decoration: none; font-size: .92rem; font-weight: 600; background: none; border: 0; white-space: nowrap; }
.header-action .bi { font-size: 1.15rem; line-height: 1; }
.header-action:hover { background: rgba(255, 255, 255, .12); color: #ffffff; }
.count-badge { position: absolute; top: 0; right: .15rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .28rem; border-radius: 999px; background: #ff6161; border: 1.5px solid #ffffff; color: #ffffff; font-size: .65rem; font-weight: 700; line-height: .95rem; text-align: center; font-variant-numeric: tabular-nums; }
.count-badge:empty, .count-badge[data-count='0'] { display: none; }
.deliver-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid rgba(255, 255, 255, .32); border-radius: 2px; padding: .28rem .65rem; font-size: .8rem; color: #ffffff; background: rgba(255, 255, 255, .08); white-space: nowrap; }
.deliver-chip strong { color: #ffe500; font-variant-numeric: tabular-nums; }
.deliver-chip:hover { background: rgba(255, 255, 255, .16); color: #ffffff; }
.mobile-search { padding: 0 0 .55rem; }

/* Category aisle under the header */
.aisle { background: var(--paper); border-bottom: 1px solid var(--line); }
.aisle-scroll { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; padding-block: .3rem; align-items: center; }
.aisle-scroll::-webkit-scrollbar { display: none; }
.aisle a, .aisle .aisle-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 2px; color: var(--ink); text-decoration: none; font-size: .86rem; font-weight: 600; border: 0; background: none; white-space: nowrap; }
.aisle a:hover, .aisle .aisle-btn:hover, .aisle a.active { color: var(--brand); background: var(--brand-soft); }
.aisle .bi { font-size: .92rem; color: var(--brand); }
.mega { width: min(980px, 96vw); padding: 1.25rem; border-radius: 2px; border-color: var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.mega-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.25rem 1.5rem; }
.mega-grid h4 { font-size: .95rem; margin: 0 0 .4rem; }
.mega-grid h4 a { color: var(--ink); text-decoration: none; }
.mega-grid ul { list-style: none; padding: 0; margin: 0; }
.mega-grid li a { display: block; color: var(--muted); text-decoration: none; padding: .15rem 0; font-size: .86rem; }
.mega-grid li a:hover, .mega-grid h4 a:hover { color: var(--brand); }

/* Mobile bottom navigation */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; background: var(--paper); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -1px 6px rgba(0, 0, 0, .08); }
.bottom-nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .45rem 0 .4rem; color: var(--muted); text-decoration: none; font-size: .7rem; font-weight: 600; }
.bottom-nav a .bi { font-size: 1.25rem; }
.bottom-nav a.active { color: var(--brand); }
.bottom-nav .count-badge { right: calc(50% - 1.35rem); top: .2rem; }
@media (max-width: 991.98px) { body.has-bottom-nav { padding-bottom: calc(62px + env(safe-area-inset-bottom)); } }

/* --------------------------------------------------------------------------
   Home — Flipkart Top Category Card, Banner Slider & White Section Cards
   -------------------------------------------------------------------------- */
.fk-cat-card { background: var(--paper); border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1); padding: .75rem 1rem; margin-bottom: .65rem; }
.cat-strip { display: flex; justify-content: space-around; align-items: flex-start; gap: 1rem; overflow-x: auto; scrollbar-width: none; }
.cat-strip::-webkit-scrollbar { display: none; }
.cat-tile { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .4rem; text-decoration: none; color: var(--ink); text-align: center; font-weight: 600; font-size: .85rem; line-height: 1.2; min-width: 76px; }
.cat-tile .cat-img-wrap { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #f5f8fe; border: 1px solid #e6eefc; display: grid; place-items: center; transition: transform .2s ease, border-color .2s ease; }
.cat-tile .cat-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.cat-tile .cat-all-icon { color: var(--brand); font-size: 1.5rem; }
.cat-tile:hover { color: var(--brand); }
.cat-tile:hover .cat-img-wrap { transform: translateY(-2px); border-color: var(--brand); }

.hero { position: relative; border-radius: 2px; overflow: hidden; background: var(--ink); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12); }
.hero .carousel-item { position: relative; }
.hero-media { aspect-ratio: 3.4 / 1; width: 100%; object-fit: cover; display: block; }
.hero-copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(1.25rem, 4vw, 3.5rem); max-width: min(50%, 560px); color: #fff; }
.hero-copy h2 { color: #fff; font-size: clamp(1.45rem, 1rem + 2.2vw, 2.8rem); font-weight: 800; line-height: 1.08; margin: 0 0 .5rem; }
.hero-copy p { font-size: clamp(.92rem, .85rem + .35vw, 1.15rem); margin: 0 0 1rem; color: rgba(255, 255, 255, .9); }
.hero .carousel-indicators { justify-content: center; margin-bottom: .65rem; }
.hero .carousel-indicators [data-bs-target] { width: 18px; height: 4px; border-radius: 2px; border: 0; }
.fk-carousel-btn { width: 44px; height: 96px; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .95); color: #212121; opacity: 1; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .25); font-size: 1.35rem; }
.fk-carousel-btn:hover { background: #ffffff; color: var(--brand); opacity: 1; }
.carousel-control-prev.fk-carousel-btn { border-radius: 0 4px 4px 0; }
.carousel-control-next.fk-carousel-btn { border-radius: 4px 0 0 4px; }
@media (max-width: 767.98px) {
  .hero-media { aspect-ratio: 16 / 9; object-position: 88% center; }
  .hero-copy { position: static; max-width: none; padding: 1rem 1.1rem 2.2rem; background: #172337; }
  .hero-copy h2 { font-size: 1.45rem; }
  .hero-copy p { font-size: .9rem; margin-bottom: .85rem; }
  .fk-carousel-btn { width: 32px; height: 64px; font-size: 1rem; }
}

.section { margin-top: .85rem; }
.fk-section-card { background: var(--paper); border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .08); overflow: hidden; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.fk-section-card .section-head { padding: .9rem 1.25rem; border-bottom: 1px solid #f0f0f0; margin-bottom: 0; }
.fk-section-card > :not(.section-head) { padding: 1rem 1.25rem; }
.section-head h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.section-sub { display: block; font-size: .8rem; color: var(--muted); margin-top: .1rem; }
.section-head a:not(.btn) { white-space: nowrap; font-weight: 600; text-decoration: none; }

.flash-band { background: var(--paper); border-top: 3px solid var(--marigold); }
.flash-band h2 { display: flex; align-items: center; gap: .45rem; }
.countdown { display: inline-flex; gap: .25rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.countdown span { background: #ff4343; color: #fff; border-radius: 3px; padding: .15rem .4rem; min-width: 2rem; text-align: center; font-size: .92rem; line-height: 1.1; }
.countdown small { display: block; font-size: .58rem; font-weight: 600; color: rgba(255, 255, 255, .88); }

.shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(172px, 46%); gap: .85rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.shelf > * { scroll-snap-align: start; }
@media (min-width: 768px) { .shelf { grid-auto-columns: minmax(195px, calc((100% - 2.55rem) / 4)); } }
@media (min-width: 1200px) { .shelf { grid-auto-columns: calc((100% - 3.4rem) / 5); } }

.promo-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .promo-grid { grid-template-columns: repeat(2, 1fr); } }
.promo { position: relative; display: block; border-radius: 2px; overflow: hidden; color: #fff; text-decoration: none; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12); }
.promo img { width: 100%; aspect-ratio: 12 / 5; object-fit: cover; display: block; transition: transform .3s ease; }
.promo:hover img { transform: scale(1.02); }
.promo-copy { position: absolute; inset: 0; padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; max-width: 58%; }
.promo-copy h3 { color: #fff; font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); font-weight: 800; margin: 0 0 .35rem; }
.promo-copy p { margin: 0 0 .8rem; color: rgba(255, 255, 255, .9); font-size: .9rem; }
.promo-copy span { display: inline-block; align-self: flex-start; background: #ffffff; color: var(--ink); font-size: .8rem; font-weight: 700; padding: .3rem .75rem; border-radius: 2px; text-decoration: none; }

.brand-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.brand-row a { display: flex; align-items: center; justify-content: center; height: 72px; background: var(--paper); border: 1px solid var(--line); border-radius: 2px; padding: .75rem; text-decoration: none; color: var(--ink); }
.brand-row a:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.brand-row img { max-height: 42px; width: auto; }

.quote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: .85rem; }
.quote { background: #fafbfd; border: 1px solid var(--line); border-radius: 2px; padding: 1rem 1.1rem; margin: 0; }
.quote p { margin: .4rem 0 .6rem; color: var(--ink-2); font-size: .9rem; }
.quote footer { font-size: .82rem; color: var(--muted); }
.quote footer a { color: var(--brand); text-decoration: none; }

.newsletter { display: grid; gap: 1rem; align-items: center; background: linear-gradient(90deg, #1e5bc6 0%, #2874f0 100%); color: #ffffff; border-radius: 2px; padding: clamp(1.25rem, 2.5vw, 1.85rem); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12); }
.newsletter h2 { color: #ffffff; margin: 0 0 .25rem; }
.newsletter p { margin: 0; opacity: .9; font-size: .9rem; }
.newsletter .form-control { border: 0; height: 42px; border-radius: 2px; }
@media (min-width: 992px) { .newsletter { grid-template-columns: 1.2fr 1fr; } }

.trust-row { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--paper); border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .06); }
@media (min-width: 992px) { .trust-row { grid-template-columns: repeat(4, 1fr); } }
.trust-row > div { display: flex; gap: .7rem; align-items: center; padding: .75rem 1rem; font-size: .84rem; color: var(--muted); }
.trust-row > div + div { border-left: 1px solid var(--line); }
@media (max-width: 991.98px) { .trust-row > div:nth-child(3) { border-left: 0; } .trust-row > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
.trust-row .bi { font-size: 1.45rem; color: var(--brand); }
.trust-row strong { display: block; color: var(--ink); font-size: .88rem; }

/* --------------------------------------------------------------------------
   Product tile — Flipkart Card Style
   -------------------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; } }
@media (min-width: 1200px) { .tiles.tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--paper); border: 1px solid #f0f0f0; border-radius: 2px; padding: .75rem; transition: box-shadow .2s ease, transform .2s ease; }
.tile:hover { box-shadow: 0 3px 16px 0 rgba(0, 0, 0, .11); transform: translateY(-2px); z-index: 3; }
.tile-media { position: relative; display: block; border-radius: 2px; overflow: hidden; background: #ffffff; aspect-ratio: 1; }
.tile-media img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .25s ease; }
.tile:hover .tile-media img { transform: scale(1.04); }
.tile-flag { position: absolute; left: .5rem; top: .5rem; background: var(--brand); color: #fff; font-size: .68rem; font-weight: 700; text-transform: uppercase; padding: .18rem .45rem; border-radius: 2px; z-index: 2; }
.tile-flag.is-flash { background: #fb641b; color: #fff; }
.tile-flag.is-out { background: #606265; color: #fff; }
.tile-wish { position: absolute; right: .45rem; top: .45rem; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid #f0f0f0; background: var(--paper); color: #c2c2c2; display: grid; place-items: center; z-index: 2; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.tile-wish:hover { color: var(--danger); }
.tile-wish.is-on { color: var(--danger); }
.tile-wish.is-on .bi-heart::before { content: '\f415'; }
.tile-body { padding-top: .65rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.tile-brand { font-size: .75rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.tile-name { font-size: .9rem; font-weight: 500; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.tile-name a { color: var(--ink); text-decoration: none; }
.tile:hover .tile-name a { color: var(--brand); }
.tile-name a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.tile-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; font-size: .78rem; color: var(--muted); font-weight: 600; margin-top: .1rem; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: auto; padding-top: .35rem; }
.tile-add { position: relative; z-index: 2; flex: 0 0 auto; width: 2.15rem; height: 2.15rem; border-radius: 2px; border: 1px solid var(--brand-line); background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.tile-add:hover { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.tile-add .bi { font-size: 1.05rem; }
.tile-out .tile-media img { opacity: .5; }

/* --------------------------------------------------------------------------
   Listing — Flipkart White Sidebar & Results Container
   -------------------------------------------------------------------------- */
.crumbs { font-size: .8rem; margin-bottom: .65rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; padding: 0; margin: 0; color: var(--muted); }
.crumbs li + li::before { content: '›'; margin-right: .3rem; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }
.listing { display: grid; gap: .75rem; }
@media (min-width: 992px) { .listing { grid-template-columns: 270px minmax(0, 1fr); gap: .85rem; } }
.filters { align-self: start; background: var(--paper); border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .06); padding: 1rem; }
@media (min-width: 992px) { .filters { position: sticky; top: calc(var(--header-h) + 52px); max-height: calc(100vh - var(--header-h) - 68px); overflow: auto; } }
.filter-group { border-bottom: 1px solid #f0f0f0; padding: .85rem 0; }
.filter-group:first-child { padding-top: 0; }
.filter-group h3 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); margin: 0 0 .55rem; }
.filter-group .form-check { margin-bottom: .3rem; font-size: .88rem; }
.filter-group .form-check-label { display: flex; justify-content: space-between; gap: .5rem; width: 100%; }
.filter-group .count { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.filter-group .form-check { display: flex; gap: .5rem; padding-left: 0; }
.filter-group .form-check .form-check-input { margin: .2rem 0 0; flex: 0 0 auto; float: none; }
.swatches { display: flex; flex-wrap: wrap; gap: .45rem; }
.swatch { position: relative; }
.swatch input { position: absolute; opacity: 0; inset: 0; }
.swatch span { display: block; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--brand); }
.swatch input:focus-visible + span { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; inset: 0; }
.chip-check span { display: inline-block; padding: .28rem .65rem; border: 1px solid var(--line-strong); border-radius: 2px; font-size: .82rem; font-weight: 600; cursor: pointer; background: var(--paper); }
.chip-check input:checked + span { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
.chip-check input:focus-visible + span { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); }
[data-results] { background: var(--paper); border: 1px solid var(--line); border-radius: 2px; padding: 1rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .06); }
.listing-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: .75rem; margin-bottom: 1rem; border-bottom: 1px solid #f0f0f0; }
.listing-bar .result-count { color: var(--ink); font-weight: 600; font-size: .9rem; }
.active-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.active-filters a { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-radius: 2px; background: #f0f2f5; border: 1px solid var(--line); font-size: .8rem; color: var(--ink); text-decoration: none; }
.active-filters a:hover { border-color: var(--danger); color: var(--danger); }
.is-loading { opacity: .55; pointer-events: none; transition: opacity .15s; }
.price-inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: .4rem; align-items: center; }
.listing-banner img { border-radius: 2px; aspect-ratio: 5 / 1; object-fit: cover; width: 100%; }

/* --------------------------------------------------------------------------
   Product page — Flipkart PDP Card
   -------------------------------------------------------------------------- */
.pdp { display: grid; gap: 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: 2px; padding: clamp(1rem, 2.5vw, 1.5rem); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .08); }
@media (min-width: 992px) { .pdp { grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); gap: 2rem; align-items: start; } }
.gallery { display: grid; gap: .75rem; }
@media (min-width: 992px) { .gallery { position: sticky; top: calc(var(--header-h) + 56px); grid-template-columns: 68px minmax(0, 1fr); } .gallery-thumbs { order: -1; flex-direction: column; } }
.gallery-main { position: relative; border-radius: 2px; border: 1px solid #f0f0f0; overflow: hidden; background: #ffffff; aspect-ratio: 1; cursor: zoom-in; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s ease; transform-origin: var(--zx, 50%) var(--zy, 50%); }
.gallery-main.is-zoomed img { transform: scale(2); }
.gallery-thumbs { display: flex; gap: .45rem; overflow-x: auto; }
.gallery-thumbs button { flex: 0 0 64px; height: 64px; padding: 2px; border: 2px solid #f0f0f0; border-radius: 2px; overflow: hidden; background: #ffffff; }
.gallery-thumbs button.active { border-color: var(--brand); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pdp-brand { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: .82rem; letter-spacing: .03em; text-decoration: none; }
.pdp-brand:hover { color: var(--brand); }
.pdp h1 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); font-weight: 500; line-height: 1.35; margin: .25rem 0 .5rem; }
.pdp-rating { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .86rem; font-weight: 600; color: var(--muted); margin-bottom: .75rem; }
.pdp-rating a { color: var(--muted); text-decoration: none; }
.pdp-rating a:hover { color: var(--brand); }
.pdp-block { padding: .95rem 0; border-top: 1px solid #f0f0f0; }
.tax-note { color: var(--muted); font-size: .8rem; margin-top: .25rem; }
.opt-label { font-weight: 700; font-size: .88rem; margin-bottom: .45rem; color: var(--muted); }
.opt-label span { font-weight: 700; color: var(--ink); }
.opt-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.opt { min-width: 3rem; padding: .45rem .85rem; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--paper); font-weight: 600; font-size: .88rem; color: var(--ink); }
.opt:hover { border-color: var(--brand); }
.opt.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.opt.is-unavailable { color: var(--muted); text-decoration: line-through; border-style: dashed; }
.opt-color { width: 2.3rem; height: 2.3rem; min-width: 0; padding: 0; border-radius: 50%; border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--line-strong); }
.opt-color.active { box-shadow: 0 0 0 2px var(--brand); background: inherit; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--paper); }
.qty button { width: 2.3rem; height: 2.6rem; border: 0; background: none; font-size: 1.05rem; color: var(--ink-2); }
.qty input { width: 2.8rem; border: 0; text-align: center; font-weight: 700; background: none; font-variant-numeric: tabular-nums; color: var(--ink); }
.qty input:focus { outline: none; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.buy-row { display: grid; grid-template-columns: auto 1fr 1fr; gap: .6rem; align-items: center; }
@media (max-width: 429.98px) {
  .buy-row { grid-template-columns: 1fr 1fr; }
  .buy-row .qty { grid-column: 1 / -1; justify-self: start; }
  .buy-row .btn { padding-inline: .75rem; }
}
.stock-line { font-size: .9rem; font-weight: 600; margin-top: .6rem; }
.stock-line.is-low { color: #b45f00; }
.stock-line.is-out { color: var(--danger); }
.pin-check { display: flex; gap: .5rem; }
.pin-check .form-control { max-width: 180px; }
.pin-result { font-size: .9rem; margin-top: .5rem; }
.perks { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: .92rem; color: var(--ink-2); }
.perks .bi { color: var(--brand); margin-right: .4rem; }
.highlights { padding-left: 1.1rem; margin: 0; color: var(--ink-2); }
.highlights li { margin-bottom: .3rem; }
.spec-table { width: 100%; font-size: .94rem; }
.spec-table th { width: 38%; color: var(--muted); font-weight: 600; padding: .55rem .75rem .55rem 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.spec-table td { padding: .55rem 0; border-bottom: 1px solid var(--line); }
.prose { max-width: 72ch; color: var(--ink-2); }
.prose h2, .prose h3 { margin-top: 1.4rem; }
.prose .ql-align-center { text-align: center; } .prose .ql-align-right { text-align: right; } .prose .ql-align-justify { text-align: justify; }
.review-summary { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .review-summary { grid-template-columns: 220px 1fr; } }
.review-score { font-size: 3rem; font-weight: 800; font-stretch: 78%; line-height: 1; }
.bar-row { display: grid; grid-template-columns: 2.4rem 1fr 2.5rem; gap: .5rem; align-items: center; font-size: .85rem; color: var(--muted); }
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--success); }
.review { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.review h4 { font-size: 1rem; margin: .35rem 0 .25rem; }
.review p { margin: 0 0 .4rem; color: var(--ink-2); }
.review .who { font-size: .82rem; color: var(--muted); }
.review .reply { margin-top: .6rem; padding: .6rem .8rem; border-left: 3px solid var(--brand-line); background: var(--brand-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .9rem; }
.sticky-buy { position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 1020; background: var(--paper); border-top: 1px solid var(--line); padding: .6rem 16px; display: none; align-items: center; gap: .75rem; }
.sticky-buy.is-visible { display: flex; }
@media (min-width: 992px) { .sticky-buy { display: none !important; } }

/* --------------------------------------------------------------------------
   Cart & checkout
   -------------------------------------------------------------------------- */
.cart-layout, .checkout-layout { display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .cart-layout, .checkout-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 2rem; align-items: start; } .summary-col { position: sticky; top: calc(var(--header-h) + 60px); } }
.line { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: .9rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }
.line img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--radius-sm); background: #eef1f5; }
.line-name { font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.3; }
.line-variant { font-size: .85rem; color: var(--muted); }
.line-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; }
.line-error { font-size: .85rem; color: var(--danger); font-weight: 600; margin-top: .3rem; }
.link-btn { border: 0; background: none; padding: 0; color: var(--muted); font-size: .88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--danger); }
.totals { display: grid; gap: .5rem; font-size: .95rem; }
.totals > div { display: flex; justify-content: space-between; gap: 1rem; }
.totals dt { font-weight: 400; color: var(--ink-2); }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.totals .grand { border-top: 1px dashed var(--line-strong); padding-top: .75rem; margin-top: .25rem; font-size: 1.15rem; font-weight: 800; font-stretch: 86%; }
.totals .grand dt { color: var(--ink); font-weight: 800; }
.savings { color: var(--success); font-weight: 600; font-size: .9rem; }
.free-ship { font-size: .88rem; color: var(--ink-2); }
.free-ship .bar { margin-top: .4rem; height: 6px; }
.free-ship .bar span { background: var(--brand); }
.coupon-list { display: grid; gap: .5rem; }
.coupon { display: flex; justify-content: space-between; align-items: center; gap: .75rem; border: 1px dashed var(--brand-line); border-radius: var(--radius-sm); padding: .55rem .75rem; font-size: .88rem; }
.coupon code { color: var(--brand-strong); background: var(--brand-soft); padding: .15rem .45rem; border-radius: 4px; font-weight: 700; font-family: var(--font); font-stretch: 90%; }
.step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
.step-title { display: flex; align-items: center; gap: .6rem; font-size: 1.1rem; margin: 0 0 1rem; }
.step-title .n { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: .9rem; font-weight: 800; }
.choice { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; background: var(--paper); }
.choice + .choice { margin-top: .5rem; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.choice input { margin-top: .3rem; flex: 0 0 auto; }
.choice .choice-body { flex: 1; min-width: 0; }
.choice .choice-title { font-weight: 700; display: flex; justify-content: space-between; gap: .5rem; }
.choice .choice-text { font-size: .88rem; color: var(--muted); }
.choice.is-disabled { opacity: .55; cursor: not-allowed; }
.secure-note { display: flex; align-items: center; gap: .4rem; justify-content: center; font-size: .82rem; color: var(--muted); margin-top: .75rem; }

/* --------------------------------------------------------------------------
   Orders, timeline, account
   -------------------------------------------------------------------------- */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 1.1rem 1.75rem; }
.timeline li::before { content: ''; position: absolute; left: .42rem; top: 1rem; bottom: -.1rem; width: 2px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ''; position: absolute; left: 0; top: .2rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--paper); border: 3px solid var(--line-strong); }
.timeline li.done::after { border-color: var(--success); background: var(--success); }
.timeline li.done::before { background: var(--success); }
.timeline li.current::after { border-color: var(--brand); }
.timeline li.cancel::after { border-color: var(--danger); background: var(--danger); }
.timeline .t-title { font-weight: 700; }
.timeline .t-meta { font-size: .82rem; color: var(--muted); }
.account { display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .account { grid-template-columns: 250px minmax(0, 1fr); gap: 2rem; align-items: start; } .account-nav { position: sticky; top: calc(var(--header-h) + 60px); } }
.account-nav { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem; }
.account-nav .who { padding: .75rem .75rem 1rem; border-bottom: 1px solid var(--line); margin-bottom: .4rem; }
.account-nav .who strong { display: block; font-stretch: 90%; font-size: 1.05rem; }
.account-nav a { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: var(--radius-sm); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .94rem; }
.account-nav a:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.account-nav a.active { background: var(--brand-soft); color: var(--brand-strong); }
.account-nav .bi { font-size: 1.1rem; }
@media (max-width: 991.98px) {
  .account-nav { display: flex; overflow-x: auto; padding: .35rem; gap: .2rem; scrollbar-width: none; }
  .account-nav .who { display: none; }
  .account-nav a { flex: 0 0 auto; white-space: nowrap; }
}
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.stat-row > div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }
.stat-row strong { display: block; font-size: 1.6rem; font-weight: 800; font-stretch: 80%; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-row span { font-size: .85rem; color: var(--muted); }
.order-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.order-card + .order-card { margin-top: .9rem; }
.order-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
.order-card-head .label { color: var(--muted); font-size: .78rem; display: block; }
.order-thumbs { display: flex; gap: .5rem; padding: 1rem; align-items: center; }
.order-thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); background: #eef1f5; }
.empty { text-align: center; padding: 3rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.empty .bi { font-size: 2.6rem; color: var(--brand); }
.empty h2 { font-size: 1.3rem; margin: .75rem 0 .35rem; }
.empty p { color: var(--muted); margin: 0 auto 1.1rem; max-width: 46ch; }
.address-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; height: 100%; }
.address-card.is-default { border-color: var(--brand-line); }
.msg { max-width: 85%; padding: .7rem .9rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.msg.mine { margin-left: auto; background: var(--brand-soft); border-color: var(--brand-line); }
.msg .meta { font-size: .78rem; color: var(--muted); margin-bottom: .25rem; }
.auth-wrap { max-width: 440px; margin: 0 auto; }
.auth-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.25rem, 4vw, 2rem); }
.auth-card h1 { font-size: 1.7rem; }
.divider-text { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .85rem; margin: 1.1rem 0; }
.divider-text::before, .divider-text::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.success-mark { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); color: var(--success); font-size: 2rem; }

/* --------------------------------------------------------------------------
   Footer (Flipkart dark navy #172337), toasts, misc
   -------------------------------------------------------------------------- */
.site-footer { margin-top: 2rem; background: #172337; color: #fff; border-top: 1px solid #454d5e; padding: 2.5rem 0 1.25rem; font-size: .78rem; }
.footer-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr 1.4fr; } }
.site-footer h3 { font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: #878787; margin: 0 0 .75rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .38rem; }
.site-footer a { color: #fff; text-decoration: none; font-weight: 500; font-size: .78rem; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-divider-col { border-top: 1px solid #454d5e; padding-top: 1.25rem; }
@media (min-width: 768px) { .footer-divider-col { border-top: 0; padding-top: 0; border-left: 1px solid #454d5e; padding-left: 1.75rem; } }
.footer-contact-text { color: #fff; font-size: .78rem; line-height: 1.6; }
.footer-contact-text a { color: #2874f0; font-weight: 600; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid #454d5e; margin-top: 2rem; padding-top: 1.25rem; color: #fff; font-size: .82rem; }
.footer-bottom-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.footer-bottom-links a, .footer-bottom-links span { display: inline-flex; align-items: center; gap: .4rem; color: #fff; font-size: .82rem; text-decoration: none; }
.footer-bottom-links .bi { color: #ffe500; font-size: .95rem; }
.social { display: flex; gap: .6rem; }
.social a { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid #454d5e; color: #fff; font-size: .95rem; }
.social a:hover { background: #2874f0; border-color: #2874f0; text-decoration: none; }
.pay-methods { display: flex; flex-wrap: wrap; gap: .35rem; }
.pay-methods span { background: #fff; color: #172337; border-radius: 3px; padding: .15rem .5rem; font-size: .72rem; font-weight: 700; }
.toast-stack { position: fixed; z-index: 1090; right: 16px; top: calc(var(--header-h) + 12px); display: grid; gap: .5rem; width: min(380px, calc(100vw - 32px)); }
@media (max-width: 991.98px) { .toast-stack { top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); left: 16px; right: 16px; width: auto; } }
.toast-msg { display: flex; align-items: flex-start; gap: .6rem; background: var(--ink); color: #fff; padding: .8rem 1rem; border-radius: var(--radius-sm); box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .5); font-size: .94rem; }
.toast-msg .bi { font-size: 1.1rem; }
.toast-msg.is-error { background: #7f1d1d; }
.toast-msg.is-success .bi { color: #6ee7b7; }
.toast-msg a { color: #fff; font-weight: 700; }
.toast-msg button { margin-left: auto; background: none; border: 0; color: rgba(255, 255, 255, .7); }
.cookie-bar { position: fixed; z-index: 1080; left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; display: flex; gap: 1rem; align-items: center; box-shadow: 0 20px 40px -20px rgba(21, 25, 37, .4); font-size: .9rem; }
@media (min-width: 992px) { .cookie-bar { bottom: 16px; } }
.cookie-bar .btn { white-space: nowrap; flex-shrink: 0; }
.wa-float { position: fixed; z-index: 1025; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); width: 3.2rem; height: 3.2rem; border-radius: 50%; background: #1fa855; color: #fff; display: grid; place-items: center; font-size: 1.6rem; text-decoration: none; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.wa-float:hover { color: #fff; background: #178f47; }
@media (min-width: 992px) { .wa-float { bottom: 24px; } }
.offcanvas { --bs-offcanvas-bg: var(--paper); }
.mini-line { display: grid; grid-template-columns: 64px 1fr; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.mini-line img { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; background: #eef1f5; }
.error-page { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.error-code { font-size: clamp(4rem, 3rem + 6vw, 8rem); font-weight: 800; font-stretch: 75%; line-height: 1; color: var(--brand); }
.map-embed { width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: var(--radius); }
.faq-group + .faq-group { margin-top: 2rem; }
.accordion { --bs-accordion-bg: var(--paper); --bs-accordion-border-color: var(--line); --bs-accordion-active-bg: var(--brand-soft); --bs-accordion-active-color: var(--brand-strong); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 20%, transparent); }
.accordion-button { font-weight: 600; }
.table { --bs-table-bg: transparent; }
.pagination { --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-color: var(--ink-2); --bs-pagination-bg: var(--paper); --bs-pagination-border-color: var(--line); --bs-pagination-hover-color: var(--brand); }

/* Star rating input (radios reversed so :checked ~ label fills to the left) */
.star-input { border: 0; padding: 0; margin: 0; }
.star-input-row { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.star-input-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input-row label { font-size: 1.7rem; line-height: 1; color: var(--line-strong); cursor: pointer; padding: 0 .1rem; }
.star-input-row input:checked ~ label, .star-input-row label:hover, .star-input-row label:hover ~ label { color: var(--marigold); }
.star-input-row input:focus-visible + label { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); border-radius: 4px; }

/* Visible form controls on the light canvas */
.form-check-input { border: 1.5px solid #98a2b3; }
.form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 18%, transparent); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; }
.min-w-0 { min-width: 0; }