/* Rapido × CashKaro deals storefront — redesigned landing.
   Design tokens mirror the Figma (Outfit primary type, Rapido blue/yellow,
   CashKaro orange, ruby-red loot ribbon). */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.cdnfonts.com/css/metropolis-2");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");

:root {
  --blue: #0036DA;
  --blue-deep: #0026A3;
  --blue-soft: #4E77FF;
  --rapido: #FFCC00;
  --btn-yellow: #F8CB19;   /* Grab Deal CTA (Figma) */
  --rapido-ink: #1A1A1A;
  --orange: #FF6D1D;

  --loot: #DA2760;         /* BK ruby-red loot ribbon (Figma token) */
  --dhamaka: #6F3AD8;

  --ink-1: #262626;
  --ink-2: #5C5C5C;
  --ink-3: #949494;
  --ink-body: #3D3D3D;     /* product-name copy (Figma) */

  --line: #ECECEC;
  --line-2: #E0E0E0;

  --bg-screen: #F5F7F9;
  --bg-card: #FFFFFF;
  --img-bg: #F2F2F2;

  --green: #029C4B;        /* discount / savings (Figma) */
  --green-bg: #E7F5EC;

  --shadow-card: 0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.06);
  --shadow-float: 0 8px 24px rgba(0,0,0,.22);
  --shadow-sheet: 0 -8px 40px rgba(0,0,0,.18);

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  --font: "Outfit", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-body: "Metropolis", "Outfit", -apple-system, system-ui, sans-serif;

  --app-w: 460px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: #E9EDF2;
  color: var(--ink-1);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }

.ms {
  font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal;
  font-feature-settings: "liga"; -webkit-font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 500; line-height: 1; user-select: none;
  display: inline-block; vertical-align: middle;
}
.ms.fill { font-variation-settings: "FILL" 1, "wght" 600; }

/* ── App shell (phone-width, centered on desktop preview) ── */
.app {
  max-width: var(--app-w);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg-screen);
  position: relative;
  overflow-x: clip;
  padding-bottom: 96px;
}

/* ── Boot loader ── */
.boot-loader {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--blue); color: #fff;
  transition: opacity .35s ease;
}
.boot-loader.hide { opacity: 0; pointer-events: none; }
.boot-logo { width: 150px; opacity: .98; }
.boot-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.28); border-top-color: #fff;
  animation: spin .8s linear infinite;
}
.boot-text { margin: 0; font-size: 13.5px; opacity: .85; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Hero region — background color themes to the active category (via --hdr) ── */
.hero-region {
  position: relative; isolation: isolate;
  background-color: var(--hdr, #0741EF);
  padding: 14px 16px 14px;
  color: #fff;
  transition: background-color .45s ease;
}
/* Subtle top highlight that works on any accent color. */
.hero-region::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%);
}
/* Figma topographic texture, blended softly onto the blue. */
.hero-region::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/bg-header.png") top center / 128% auto repeat-y;
  mix-blend-mode: soft-light; opacity: .8;
}
.brandbar { display: flex; align-items: center; gap: 10px; height: 34px; }
/* Rapido app-icon clipped inside the pill so only the wordmark shows (Figma Frame 2). */
.rapido-pill {
  position: relative; flex: 0 0 auto;
  width: 67px; height: 24px; border-radius: 16.83px; overflow: hidden;
  background: #F8CB19;
}
.rapido-pill img {
  position: absolute; left: 50%; top: -9.33px; transform: translateX(-50%);
  width: 42.43px; height: 42.43px;
}
.ck-logo { height: 20px; }

/* Search entry (looks like a field, opens the overlay) */
.searchbox {
  width: 100%; margin-top: 14px;
  display: flex; align-items: center; gap: 10px;
  background: #fff; color: var(--ink-3);
  border-radius: var(--r-pill); padding: 12px 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
.searchbox-ico { font-size: 22px; color: var(--ink-2); }
.searchbox-ph { font-size: 14px; display: inline-flex; align-items: baseline; }
.searchbox-term { display: inline-block; color: var(--ink-3); transition: transform .22s ease, opacity .22s ease; }
.searchbox-term.swap { opacity: 0; transform: translateY(-7px); }

/* ── Trust line (the "no fake deals" promise, under the search box) ── */
.trust-line {
  margin: 9px 2px 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--font); font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,.80); /* token: transparentWhite.80 */
}
.trust-ico { font-size: 14px; color: #47dbba; } /* token: fern.300 */
/* India flag replacing the word "India" in the trust line */
/* .trust-line is a flexbox, so vertical-align is ignored — nudge with transform. */
.flag-in { height: 12px; width: auto; transform: translateY(1px); border-radius: 2px; margin: 0 1px; box-shadow: 0 0 0 .5px rgba(255,255,255,.25); }

/* ── Hero carousel ── */
/* Full-bleed: negative margins punch through .hero-region's 16px side padding so
   the peeking side cards run to the actual screen edges (an inset peek reads as
   broken cards floating in a gap). The track's own 16px padding keeps the
   first/last slide resting inset at the scroll extremes. */
.hero-carousel { margin: 16px -16px 0; }
.hero-track {
  display: flex; gap: 12px;
  padding: 0 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide {
  scroll-snap-align: center; flex: 0 0 80%;
  position: relative; overflow: hidden;
  border-radius: 16px; border: 1.5px solid #FFFFFF;
  min-height: 128px; padding: 16px 15px;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(112.49deg, #DFEEB7 0%, #EFEFB8 98.7%); color: var(--ink-1);
  /* Depth: side slides sit well back (scaled-down frosted slivers at the edges),
     then grow + solidify as they centre — "coming from there into focus". The
     scale contrast is the main cue; the fade is secondary. */
  transform: scale(.8);
  opacity: .55;
  transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1);
}
.hero-slide.in-focus { transform: scale(1); opacity: 1; }
/* Side neighbours shrink toward the edge they peek from — the sliver stays pinned
   at the viewport edge instead of being pulled offscreen by the scale. */
.hero-slide.is-prev { transform-origin: right center; }
.hero-slide.is-next { transform-origin: left center; }
/* The red badge only shows on the focused slide — a stray badge fragment on a
   peeking side slide reads as visual garbage. */
.hero-slide .hero-badge { opacity: 0; transition: opacity .3s ease; }
.hero-slide.in-focus .hero-badge { opacity: 1; }
.hero-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; z-index: 1; }
.hero-title {
  font-family: var(--font); font-weight: 600; font-size: 15px; line-height: 1.25; color: var(--ink-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  max-width: 88%;
}
.hero-priceline { display: flex; align-items: baseline; gap: 8px; }
.hero-now { font-family: var(--font); font-weight: 800; font-size: 24px; letter-spacing: -.5px; }
.hero-mrp { font-size: 13px; color: var(--ink-2); text-decoration: line-through; }
.hero-off {
  align-self: center; /* inline in the price row now */
  background: linear-gradient(92.04deg, rgba(2,156,75,0) 11.58%, rgba(2,156,75,0.2) 98.12%);
  color: var(--green); font-family: var(--font); font-weight: 800;
  font-size: 12px; padding: 4px 9px; border-radius: 107px;
}
.hero-save {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  font-family: var(--font); font-weight: 600; font-size: 11.5px; color: var(--green);
}
.hero-save b { font-weight: 800; }
.hero-save .ms { font-size: 14px; }
.hero-img { flex: 0 0 108px; width: 108px; height: 100px; object-fit: contain; z-index: 1; }
/* Figma "Frame 4070": 100.5×28 flex-centred red tab hanging off the card top,
   rounded on its bottom corners; Outfit 600 10/11 white, centred. (Figma uses
   leading-trim to hit exactly 28px — unsupported in browsers, so ~1–2px taller.) */
.hero-badge {
  position: absolute; top: 0; right: 16px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 100.5px; min-height: 28px; padding: 5px 10.76px;
  background: #E62325; border-radius: 0 0 8px 8px;
  font-family: var(--font); font-weight: 600; font-size: 10px; line-height: 11px;
  color: #fff; text-align: center;
}
.hero-dots { display: flex; justify-content: center; gap: 6px; margin-top: 11px; }
.hero-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4);
  transition: all .25s ease; cursor: pointer;
}
.hero-dots i.on { width: 18px; border-radius: 3px; background: #fff; }

/* ── Category row ── */
/* The active category sits on a white "bump" (cat-indicator.svg) that rises out
   of the content sheet below, exactly like the mini-app Offers strip. */
/* Darker wave band behind the categories (Figma #0C36B3 = header darkened). The
   scalloped top edge is a repeating semicircle via ::before. Full-bleed to the
   hero edges; its bottom sits flush with the white sheet below. */
/* Clean mini-app Offers strip: solid themed background + a 4px white base bar at
   the bottom that the selector capsule sits on (and that blends into the sheet). */
.cat-band {
  position: sticky; top: 0; z-index: 30;
  /* Horizontal spacing lives on .cat-row (not here): the selector capsule is wider
     than an item and overhangs the first/last one by 26px — inside the scrollable
     row that space must be row padding, or the overhang gets clipped. */
  padding: 8px 0 0;
  background: var(--hdr, #0741EF);
  transition: background-color .45s ease;
}
.cat-band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 0;
  background: var(--bg-screen);
}
.cat-row {
  position: relative;
  display: flex; gap: 12px;
  /* 26px sides = (116px capsule − 64px item)/2, so the capsule's flare fits fully
     even when the first or last category is active. */
  overflow-x: auto; scrollbar-width: none; padding: 10px 26px 0;
}
.cat-row::-webkit-scrollbar { display: none; }
/* Sliding white selector capsule (mini-app category-selector-bg) behind the
   active circle, anchored to the strip bottom (sits on the 4px white base bar). */
.cat-ind {
  position: absolute; z-index: 1; left: 0; top: 2px; bottom: 0;
  width: 116px;
  /* Painted with --bg-screen through an SVG mask so the capsule is always the
     exact same colour as the base bar + sheet it merges into (no white seam). */
  background: var(--bg-screen);
  -webkit-mask: url("/assets/cat-indicator.svg") center / 100% 100% no-repeat;
  mask: url("/assets/cat-indicator.svg") center / 100% 100% no-repeat;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
  pointer-events: none;
}
/* No category selected (default all-deals feed) → the capsule stays hidden. */
.cat-ind.off { opacity: 0; }
/* Edge fog — themed gradient on the band edges hinting the strip scrolls.
   Toggled by JS (hidden at the hard start/end of the scroll range). */
.cat-fog {
  position: absolute; top: 0; bottom: 4px; width: 36px; z-index: 3;
  pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
.cat-fog--l { left: 0;  background: linear-gradient(90deg,  var(--hdr, #0741EF) 8%, transparent); }
.cat-fog--r { right: 0; background: linear-gradient(270deg, var(--hdr, #0741EF) 8%, transparent); }
.cat-fog.on { opacity: .92; }

.cat {
  position: relative; z-index: 2;
  flex: 0 0 auto; width: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; padding-bottom: 12px;
}
/* Instagram-style story avatar — the first circle, story-ONLY (never a nav tab).
   Real nested circles (ring → band-colour gap → icon), concentric by box model:
   no masks, no absolute offsets, geometrically a perfect circle.
   Ring = gradient.reward (saffron #ff6d1d → amber #fecf2d); slate.500 once seen. */
.story-avatar {
  position: relative; z-index: 2;
  flex: 0 0 auto; width: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; padding-bottom: 12px;
}
.sa-ring {
  position: relative; overflow: hidden;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .15s ease;
}
/* The gradient lives on a rotating layer behind the gap disc — Instagram's story
   palette (yellow → orange → pink → purple → blue), spinning slowly so the ring
   feels alive. Oversized so the square layer covers the circle at every angle. */
.sa-ring::before {
  content: ""; position: absolute; inset: -25%;
  background: conic-gradient(from 210deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
  animation: sa-spin 4.5s linear infinite;
}
@keyframes sa-spin { to { transform: rotate(360deg); } }
.story-avatar:active .sa-ring { transform: scale(.9); }
.story-avatar.story-seen .sa-ring::before { background: #c4c4c4; animation: none; } /* slate.500 */
.sa-gap {
  position: relative; z-index: 1;           /* above the rotating gradient layer */
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--hdr, #0741EF);          /* the "gap" is the band colour, like IG */
  display: grid; place-items: center;
  transition: background-color .45s ease;   /* follows the themed band */
}
.sa-ico {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(150deg, #FFB300, #FF5A1F);
  display: grid; place-items: center; overflow: hidden; /* clip the Lottie to the circle */
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.sa-ico .ms { color: #fff; font-size: 26px; }
.cat-ico {
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff; display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  position: relative; transition: transform .12s ease;
}
.cat:active .cat-ico { transform: scale(.94); }
.cat-ico img { width: 100%; height: 100%; object-fit: cover; }
.cat-ico .ms { font-size: 27px; color: var(--blue); }
.cat-empty { font-family: var(--font); font-weight: 800; font-size: 20px; color: #B9C2CF; }
.cat-label {
  width: 56px; font-size: 10px; line-height: 1.2; text-align: center; color: #fff; font-weight: 500;
  transition: color .25s ease;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat.active .cat-label { font-weight: 600; color: var(--ink-1); }

/* ── Light content sheet ── */
.sheet-top {
  position: relative; z-index: 2;
  background: var(--bg-screen);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-top: 0;
  padding: 16px 14px 8px;
  min-height: 60vh;
}

/* ── Deal of the Hour (full-width in-grid interrupter) ── */
.hour-deal {
  grid-column: 1 / -1;
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: linear-gradient(115deg, #101728 0%, #1A2440 62%, #23305C 100%);
  border-radius: 16px; color: #fff;
  cursor: pointer;
}
.hour-deal::after { /* soft yellow glow, top-right */
  content: ""; position: absolute; right: -30px; top: -46px; width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(248,203,25,.28), transparent 65%);
  pointer-events: none;
}
.hd-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hd-top { display: flex; align-items: center; gap: 8px; }
.hd-label {
  font-family: var(--font); font-weight: 800; font-size: 11px; letter-spacing: .6px;
  color: #F8CB19;
}
.hd-count {
  font-family: var(--font); font-weight: 700; font-size: 11px; font-variant-numeric: tabular-nums;
  background: rgba(248,203,25,.15); color: #F8CB19;
  border: 1px solid rgba(248,203,25,.4);
  padding: 2px 8px; border-radius: var(--r-pill);
}
.hd-name {
  font-family: var(--font); font-weight: 600; font-size: 13.5px; line-height: 1.3; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hd-priceline { display: flex; align-items: baseline; gap: 7px; }
.hd-now { font-family: var(--font); font-weight: 800; font-size: 19px; }
.hd-mrp { font-size: 12px; color: rgba(255,255,255,.55); text-decoration: line-through; }
.hd-off { font-family: var(--font); font-weight: 800; font-size: 12px; color: #4ADE80; }
.hd-cta {
  align-self: flex-start; margin-top: 2px;
  background: #F8CB19; color: #1F2430;
  font-family: var(--font); font-weight: 700; font-size: 12.5px;
  padding: 7px 14px; border-radius: var(--r-pill);
}
.hd-imgbox {
  flex: 0 0 92px; width: 92px; height: 92px; border-radius: 12px;
  background: #fff; display: grid; place-items: center; overflow: hidden;
  position: relative; z-index: 1;
}
.hd-imgbox img { width: 84px; height: 84px; object-fit: contain; }

/* ── Real social-proof badge (actual click-log taps) ── */
.taps-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: rgba(31,36,48,.82); color: #fff;
  font-family: var(--font); font-weight: 600; font-size: 10px; letter-spacing: .1px;
  padding: 3px 8px; border-radius: var(--r-pill);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

/* ── Surprise Me FAB ── */
.surprise-fab {
  position: fixed; right: 14px; bottom: 78px; z-index: 40;
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(140deg, #7A3BEA, #C42F6B);
  box-shadow: 0 6px 18px rgba(122,59,234,.45);
  display: grid; place-items: center;
}
/* Dice tumble: every ~4s the die hops and rolls two full turns with a bounce —
   reads as an actual dice roll, not a generic wiggle. */
.surprise-fab-emoji { font-size: 25px; display: block; animation: fab-roll 4.2s cubic-bezier(.3,.6,.3,1) infinite; }
.surprise-fab:active { transform: scale(.92); }
@keyframes fab-roll {
  0%, 66%  { transform: translateY(0) rotate(0deg); }
  72%      { transform: translateY(-9px) rotate(180deg); }
  78%      { transform: translateY(1px) rotate(360deg); }
  84%      { transform: translateY(-5px) rotate(540deg); }
  90%      { transform: translateY(0) rotate(690deg); }
  94%      { transform: translateY(-1px) rotate(720deg); }
  97%, 100% { transform: translateY(0) rotate(720deg); }
}

/* ── Today's Top 10 story viewer ──
   Canvas: cobalt.900 → cobalt.1000 (mini-app primitives); chrome uses
   transparentWhite tokens; CTA keeps the storefront's Grab-Deal yellow. */
.story-viewer {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column;
  background: linear-gradient(168deg, #181655 0%, #0a0f36 78%);
  animation: story-in .3s cubic-bezier(.2,.8,.2,1);
  touch-action: pan-y;
}
.story-viewer.hidden { display: none; }
@keyframes story-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.story-progress {
  display: flex; gap: 4px; padding: 12px 14px 0;
}
.story-progress i {
  flex: 1; height: 3px; border-radius: 999px;
  background: rgba(255,255,255,.24); /* transparentWhite.24 */
  overflow: hidden; position: relative;
}
.story-progress i::after {
  content: ""; position: absolute; inset: 0; transform: scaleX(var(--p, 0));
  transform-origin: left; background: #fff; border-radius: inherit;
}
.story-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 6px; }
.story-flame {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(140deg, #ff6d1d, #fecf2d); /* gradient.reward */
  display: grid; place-items: center;
}
.story-flame .ms { font-size: 20px; color: #fff; }
.story-headtxt { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.story-title { font-family: var(--font); font-weight: 700; font-size: 15px; color: #fff; }
.story-sub { font-family: var(--font); font-weight: 400; font-size: 11px; color: rgba(255,255,255,.50); }
.story-x {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff;
  display: grid; place-items: center;
}
.story-x .ms { font-size: 19px; }
.story-stage { flex: 1; display: flex; align-items: center; padding: 8px 22px; min-height: 0; }
.story-card {
  width: 100%; background: #fff; border-radius: 20px;
  padding: 16px 16px 18px; position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  animation: story-card-in .32s cubic-bezier(.2,.8,.2,1);
}
@keyframes story-card-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.story-rank {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font); font-weight: 800; font-size: 11px; color: #5c5c5c; /* slate.700 */
  background: #f5f7f9; border-radius: 999px; padding: 3px 9px;
}
.story-taps {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font); font-weight: 600; font-size: 10px; color: #1a7a39; /* fern.700 */
  background: #edfbf8; border-radius: 999px; padding: 3px 8px;
}
.story-img { width: 172px; height: 172px; object-fit: contain; margin-top: 12px; }
.story-name {
  font-family: var(--font); font-weight: 600; font-size: 14.5px; line-height: 1.35; color: var(--ink-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.story-priceline { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.story-now { font-family: var(--font); font-weight: 800; font-size: 26px; letter-spacing: -.4px; color: var(--ink-1); }
.story-mrp { font-size: 13px; color: var(--ink-2); text-decoration: line-through; }
.story-off { font-family: var(--font); font-weight: 800; font-size: 13px; color: var(--green); }
.story-save { font-size: 12.5px; font-weight: 600; color: #1a7a39; } /* fern.700 */
/* Invisible tap zones: left third = prev, rest = next (IG behaviour) */
.story-nav { position: absolute; top: 96px; bottom: 96px; width: 33%; z-index: 2; }
.story-nav--prev { left: 0; }
.story-nav--next { right: 0; width: 45%; }
.story-foot { padding: 0 22px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 9px; }
.story-actions { display: flex; gap: 10px; align-items: stretch; }
.story-share {
  flex: 0 0 auto; width: 50px; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff; /* transparentWhite.16 */
  display: grid; place-items: center;
}
.story-share .ms { font-size: 21px; }
.story-share:active { transform: scale(.92); }
.story-cta {
  flex: 1; background: var(--btn-yellow); color: var(--rapido-ink);
  font-family: var(--font); font-weight: 700; font-size: 15px;
  padding: 14px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(248,203,25,.35);
}
.story-cta:active { transform: scale(.98); }
.story-trust {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--font); font-size: 10.5px; color: rgba(255,255,255,.50);
}
.story-trust .ms { font-size: 13px; color: #47dbba; } /* fern.300 */

.sheet-title-ico { font-size: 19px; vertical-align: -4px; margin-right: 5px; color: #da2760; } /* rose.500 */

/* ── Surprise sheet body ── */
.sheet-card--surprise { padding-bottom: 12px; }
.sp-body { min-height: 240px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 16px 12px; }
.sp-img {
  width: 148px; height: 148px; border-radius: 16px;
  background: var(--bg-screen); display: grid; place-items: center; overflow: hidden;
  margin-bottom: 12px;
}
.sp-img img { width: 132px; height: 132px; object-fit: contain; }
.sp-name {
  font-family: var(--font); font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--ink-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 8px;
}
.sp-priceline { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.sp-now { font-family: var(--font); font-weight: 800; font-size: 24px; color: var(--ink-1); }
.sp-mrp { font-size: 13px; color: var(--ink-2); text-decoration: line-through; }
.sp-off { font-family: var(--font); font-weight: 800; font-size: 13px; color: var(--green); }
.sp-save { margin-top: 6px; font-size: 12.5px; color: var(--green); font-weight: 600; }
.sp-loading { margin: auto; font-size: 13px; color: var(--ink-2); }

/* ── Lottie mounts ── */
/* Top-10 badge inside the story-avatar circle (falls back to the flame icon). */
/* Fill the orange circle: the Lottie art has internal padding, so overscale it and
   let the circle (overflow:hidden) clip the edges. */
/* Transform the CONTAINER, not the svg: lottie-web sets an inline transform on the
   svg it injects, and inline styles beat this rule. Overscale to fill the circle, then
   nudge DOWN so the art's top stars aren't clipped by the circle's top edge. */
.sa-lottie { display: block; width: 100%; height: 100%; transform: translateY(-7%) scale(1.05); transform-origin: center; }
.sa-lottie svg { display: block; width: 100%; height: 100%; }
/* Gifting confetti: full-screen one-shot overlay, above content, below sheets (70). */
.confetti-lottie { position: fixed; inset: 0; z-index: 65; pointer-events: none; }
/* Dice-roll Lottie in the surprise sheet. */
.sp-die-lottie { width: 150px; height: 150px; }

/* ── Surprise roll: tumbling die while fetching (fallback when Lottie is absent) ── */
.sp-roll { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sp-die { font-size: 64px; line-height: 1; display: block; animation: sp-tumble .48s linear infinite; }
@keyframes sp-tumble {
  0%   { transform: rotate(0deg)   translateY(0)     scale(1); }
  25%  { transform: rotate(90deg)  translateY(-16px) scale(1.08); }
  50%  { transform: rotate(180deg) translateY(0)     scale(.94); }
  75%  { transform: rotate(270deg) translateY(-9px)  scale(1.04); }
  100% { transform: rotate(360deg) translateY(0)     scale(1); }
}
.sp-roll-txt { font-family: var(--font); font-weight: 600; font-size: 13px; color: var(--ink-2); }

/* ── Surprise reveal: deal springs in + brand-coloured particle burst ── */
.sp-reveal {
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  animation: sp-pop .55s cubic-bezier(.2, 1.5, .35, 1);
}
@keyframes sp-pop {
  0%   { transform: scale(.5) rotate(-5deg); opacity: 0; }
  60%  { transform: scale(1.07) rotate(1.5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.sp-burst { position: absolute; top: 74px; left: 50%; width: 0; height: 0; pointer-events: none; }
.sp-burst i { position: absolute; width: 9px; height: 9px; border-radius: 2.5px; opacity: 0; animation: sp-part .85s cubic-bezier(.15,.7,.4,1) forwards; }
@keyframes sp-part {
  0%   { opacity: 1; transform: translate(0, 0) scale(1.1) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.35) rotate(240deg); }
}
/* 12 particles fanning out — Rapido yellow, cobalt, green, rose, orange */
.sp-burst i:nth-child(1)  { background: #FFCC00; --dx: -96px;  --dy: -64px; }
.sp-burst i:nth-child(2)  { background: #0036DA; --dx: 92px;   --dy: -78px; animation-delay: .03s; }
.sp-burst i:nth-child(3)  { background: #029C4B; --dx: -70px;  --dy: 58px;  animation-delay: .05s; }
.sp-burst i:nth-child(4)  { background: #DA2760; --dx: 84px;   --dy: 48px;  animation-delay: .02s; }
.sp-burst i:nth-child(5)  { background: #FF6D1D; --dx: -110px; --dy: -8px;  animation-delay: .06s; }
.sp-burst i:nth-child(6)  { background: #FFCC00; --dx: 108px;  --dy: -16px; animation-delay: .04s; }
.sp-burst i:nth-child(7)  { background: #0036DA; --dx: -44px;  --dy: -96px; animation-delay: .07s; }
.sp-burst i:nth-child(8)  { background: #029C4B; --dx: 40px;   --dy: -102px; animation-delay: .01s; }
.sp-burst i:nth-child(9)  { background: #DA2760; --dx: -20px;  --dy: 84px;  animation-delay: .08s; }
.sp-burst i:nth-child(10) { background: #FF6D1D; --dx: 26px;   --dy: 78px;  animation-delay: .05s; }
.sp-burst i:nth-child(11) { background: #FFCC00; --dx: 64px;   --dy: 96px;  animation-delay: .09s; }
.sp-burst i:nth-child(12) { background: #0036DA; --dx: -84px;  --dy: 92px;  animation-delay: .04s; }

/* replay icon inside the "Roll again" button */
.fs-btn .ms { font-size: 18px; vertical-align: -4px; margin-right: 5px; }

@media (prefers-reduced-motion: reduce) {
  .surprise-fab-emoji { animation: none; }
  .sa-ring::before { animation: none; }
  .sp-die { animation: none; }
  .sp-reveal { animation: none; }
  .sp-burst { display: none; }
}

/* ── Sport selector (Sports & Fitness) — cobalt-toned sibling of the gift bar ── */
.sport-bar {
  margin: 2px 2px 12px;
  padding: 12px 14px 13px;
  background: linear-gradient(135deg, #ebf0ff 0%, #f5f8ff 60%, #fbfcff 100%); /* cobalt.50 wash */
  border: 1px solid #d3ddf9;  /* cobalt.150 */
  border-radius: 16px;
  animation: gift-in .35s cubic-bezier(.2,.8,.2,1);
}
.sport-bar.hidden { display: none; }
.sport-q {
  margin: 0 0 10px; font-family: var(--font);
  font-size: 13px; font-weight: 700; color: #0036da; /* cobalt.700 */
  display: flex; align-items: center; gap: 6px;
}
.sport-q-ico { font-size: 17px; color: #0741EF; }
.sport-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.sport-chips::-webkit-scrollbar { display: none; }
.sport-chip {
  flex: 0 0 auto;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: #414141; /* slate.800 */
  background: #fff; border: 1px solid #d3ddf9;
  padding: 7px 13px; border-radius: var(--r-pill);
  transition: background .2s ease, color .2s ease;
}
.sport-chip.active { background: #0741EF; border-color: #0741EF; color: #fff; font-weight: 700; }
.sport-chip:active { transform: scale(.96); }
/* "All Sports" carries its own tinted identity (cobalt.100 fill, cobalt text) so
   the collection pill reads differently from the individual sport chips. */
.sport-chip--all { background: #dce5fe; border-color: #aec3fd; color: #0036da; font-weight: 700; }
.sport-chip--all.active { background: #0741EF; border-color: #0741EF; color: #fff; }

/* ── Gifting recipient selector ── */
.gift-bar {
  margin: 2px 2px 12px;
  padding: 12px 14px 14px;
  background: linear-gradient(135deg, #FFF0F6 0%, #FFF7FA 55%, #FFFDF4 100%);
  border: 1px solid #F7D4E3;
  border-radius: 16px;
  animation: gift-in .35s cubic-bezier(.2,.8,.2,1);
}
.gift-bar.hidden { display: none; }
@keyframes gift-in {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.gift-q {
  margin: 0 0 10px; font-family: var(--font);
  font-size: 13px; font-weight: 700; color: #8A2B55; letter-spacing: .1px;
  display: flex; align-items: center; gap: 6px;
}
.gift-q-ico { font-size: 17px; color: #C42F6B; }
/* Segmented control: grid of 3 with a sliding gradient thumb behind the active tab. */
.gift-seg {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: #fff; border: 1px solid #F0D9E4;
  border-radius: var(--r-pill); padding: 3px;
  box-shadow: inset 0 1px 3px rgba(196,47,107,.06);
}
.gift-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / 3);
  background: linear-gradient(135deg, #E5457B, #C42F6B);
  border-radius: var(--r-pill);
  box-shadow: 0 2px 8px rgba(196,47,107,.35);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease, box-shadow .3s ease;
  pointer-events: none;
}
/* Recipient tint (subtle): the thumb shifts hue with the selection. */
.gift-seg[data-sel="men"] .gift-thumb {
  background: linear-gradient(135deg, #4670F6, #0741EF);   /* cobalt 400 → 500 */
  box-shadow: 0 2px 8px rgba(7,65,239,.32);
}
.gift-seg[data-sel="women"] .gift-thumb {
  background: linear-gradient(135deg, #F08AAD, #DA2760);   /* rose 300 → 500 */
  box-shadow: 0 2px 8px rgba(218,39,96,.32);
}
/* Whisper of colour on the inactive segment icons (hint, not shout). */
.gift-opt[data-for="men"]:not(.active) .ms { color: #4670F6; }
.gift-opt[data-for="women"]:not(.active) .ms { color: #E66492; }
.gift-opt {
  position: relative; z-index: 1;
  padding: 8px 0; border-radius: var(--r-pill);
  font-family: var(--font); font-size: 13px; font-weight: 600; color: #6B5560;
  transition: color .25s ease;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.gift-opt .ms { font-size: 16px; }
.gift-opt.active { color: #fff; font-weight: 700; }

/* ── Confetti poppers (Gifting landing) ── */
.confetti-layer {
  position: fixed; inset: 0; z-index: 80;
  pointer-events: none; overflow: hidden;
}
.confetti-p {
  position: absolute;
  opacity: 0;
  animation: confetti-fly var(--dur) cubic-bezier(.16,.6,.4,1) var(--delay) forwards;
}
@keyframes confetti-fly {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  30%  { opacity: 1; transform: translate(calc(var(--tx) * .5), var(--my)) rotate(calc(var(--rot) * .4)); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
}
@media (prefers-reduced-motion: reduce) {
  .gift-bar { animation: none; }
  .confetti-p { display: none; }
}

/* ── Price pills ── */
.price-pills {
  display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none;
  padding: 2px 2px 4px;
}
.price-pills::-webkit-scrollbar { display: none; }
.ppill {
  flex: 0 0 auto;
  border: 1.2px solid var(--line-2); background: #fff; color: var(--ink-1);
  font-family: var(--font); font-weight: 400; font-size: 12px; line-height: 16px;
  padding: 8px 16px; border-radius: var(--r-pill); white-space: nowrap;
  transition: all .12s ease;
}
.ppill.active { background: var(--rapido-ink); color: #fff; border-color: var(--rapido-ink); }

.result-meta { padding: 12px 4px 4px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }

/* ── Deal grid ── */
/* align-items:stretch (default) makes both cards in a row equal height; the fixed
   image box + 2-line title + reserved savings row keep every card identical. */
/* minmax(0,1fr) forces truly equal columns — a plain 1fr uses minmax(auto,1fr),
   so a long unbreakable word in one card would widen its whole column. */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }

.card {
  background: var(--bg-card); border-radius: var(--r-md); height: 100%; min-width: 0;
  box-shadow: var(--shadow-card); display: flex; flex-direction: column;
  position: relative; cursor: pointer; padding: 8px;
}
.card-imgwrap {
  position: relative; aspect-ratio: 144 / 124; background: var(--img-bg);
  border: 1px solid rgba(0,0,0,.02); border-radius: var(--r-sm); overflow: hidden;
}
/* Absolutely fill the box (a definite size) and let object-fit:contain scale the
   whole image down to fit — never cropped, whatever the source aspect ratio.
   padding gives breathing room; object-fit respects it. */
/* Static product image (the synced all-cards slide cycle was cut — distracting). */
.card-imgtrack { position: absolute; inset: 0; display: flex; }
.card-imgtrack img {
  flex: 0 0 100%; width: 100%; height: 100%;
  object-fit: contain; padding: 12px;
  mix-blend-mode: multiply; transition: opacity .2s;
}
.card-imgtrack img.img-broken { opacity: 0; }
.card-imgwrap img.img-broken { opacity: 0; }

/* Loot/Dhamaka ribbon */
.ribbon {
  position: absolute; top: 8px; left: 0; z-index: 2;
  font-family: var(--font); font-weight: 800; font-size: 9.5px; letter-spacing: .4px; color: #fff;
  padding: 4px 14px 4px 8px; background: var(--loot);
  clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%);
}
.ribbon.dhamaka { background: var(--dhamaka); }
.ribbon.deal { display: none; }

.share-btn {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  width: 22px; height: 22px; display: grid; place-items: center;
}
.share-btn .ms { font-size: 18px; color: var(--ink-1); }

/* Store-logo tab, bottom-left of the image (approximates the Figma store logo). */
/* White store tab (bottom-left of the image), holds the logo or a text fallback. */
.store-tab {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: #fff; border-top-right-radius: 12px;
  padding: 3px 10px 3px 7px; display: flex; align-items: center; min-height: 18px;
}
.store-tab--text { font-family: var(--font); font-weight: 700; font-size: 10.5px; line-height: 1; letter-spacing: -.1px; }
.store-logo { height: 13px; width: auto; max-width: 66px; object-fit: contain; display: block; }
/* Multi-image carousel dots (bottom-center of the product image). */

.card-body { padding: 12px 8px 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-name {
  font-family: var(--font); font-weight: 400; font-size: 12px; line-height: 1.3; color: var(--ink-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; height: 2.6em;
}
/* Fixed slot for the dashed divider + savings line so every card is identical
   height whether or not it carries a savings figure. */
.card-save { height: 28px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.card-name b { font-weight: 600; color: var(--ink-1); }
.card-price { display: flex; align-items: center; gap: 8px; height: 26px; }
.price-now { font-family: var(--font); font-weight: 700; font-size: 14px; color: #000; }
.price-mrp { font-size: 11px; color: var(--ink-3); text-decoration: line-through; }
.price-off {
  margin-left: auto; font-family: var(--font); font-weight: 800; font-size: 12px; color: var(--green);
  padding: 6.4px 10.7px; border-radius: 107px; white-space: nowrap;
  background: linear-gradient(92.04deg, rgba(2,156,75,0) 11.58%, rgba(2,156,75,0.2) 98.12%);
}
.divider { height: 0; border-top: 1px dashed var(--line-2); margin: 0 -2px; }
.usual {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font); font-size: 9.5px; font-weight: 400; color: var(--green);
}
.usual b { font-weight: 700; }
.usual .ms { font-size: 12px; }
.card-cta {
  margin: auto auto 4px; width: calc(100% - 4px);
  background: var(--btn-yellow); color: #000;
  font-family: var(--font); font-weight: 600; font-size: 12px;
  padding: 11px; border-radius: 11px; text-align: center;
  transition: filter .12s ease;
}
.card-cta:active { filter: brightness(.94); }

/* ── Skeleton ── */
.sk-card { background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-card); }
.sk-img { aspect-ratio: 1/1; background: #EEF1F4; }
.sk-line { height: 10px; border-radius: 5px; background: #EEF1F4; margin: 8px 10px; }
.sk-line.w70 { width: 70%; } .sk-line.w90 { width: 90%; } .sk-line.w40 { width: 40%; }
.sk-card, .sk-img, .sk-line { animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* ── Loader / empty / footer ── */
.sentinel { height: 1px; }
.loader { text-align: center; padding: 18px; color: var(--ink-2); font-size: 13px; }
.empty { text-align: center; padding: 48px 24px; color: var(--ink-2); }
.empty-ico { font-size: 46px; color: var(--ink-3); }
.empty-title { font-family: var(--font); font-weight: 700; font-size: 16px; color: var(--ink-1); margin: 12px 0 4px; }
.empty-sub { margin: 0 0 16px; font-size: 13px; }
.empty-reset {
  background: var(--blue); color: #fff; font-family: var(--font); font-weight: 600;
  padding: 10px 20px; border-radius: var(--r-pill);
}
.foot { padding: 24px 12px 16px; color: var(--ink-3); font-size: 11px; line-height: 1.5; text-align: center; }
.foot-love { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .1px; display: inline-flex; align-items: center; gap: 4px; justify-content: center; }
.foot-heart { font-style: normal; }
.foot-brand { display: inline-flex; align-items: center; text-decoration: none; }
.foot-logo { height: 15px; width: auto; display: block; }

/* ── Floating Filters | Sort bar ── */
.floatbar {
  position: fixed; z-index: 40; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: stretch;
  background: var(--rapido-ink); color: #fff; border-radius: var(--r-pill);
  box-shadow: var(--shadow-float); overflow: hidden;
}
.fb-btn {
  display: flex; align-items: center; gap: 7px; color: #fff;
  font-family: var(--font); font-weight: 600; font-size: 14px;
  padding: 12px 26px; position: relative;
}
.fb-btn .ms { font-size: 19px; }
.fb-div { width: 1px; background: rgba(255,255,255,.22); margin: 8px 0; }
.fb-badge {
  background: var(--rapido); color: var(--rapido-ink); font-size: 10px; font-weight: 800;
  min-width: 16px; height: 16px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px;
}

/* ── Search — a panel that drops directly below the bar (not a full top-sheet).
   White panel pinned to the top holds the search field + trending/results; the
   rest of the screen dims via the scrim below it. ── */
.search-overlay {
  position: fixed; inset: 0; z-index: 60;
  max-width: var(--app-w); margin: 0 auto;
  display: flex; flex-direction: column;
}
.so-panel {
  background: #fff; border-radius: 0 0 20px 20px;
  padding: 12px 0 16px; display: flex; flex-direction: column;
  max-height: 80vh; overflow-y: auto;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
  transform: translateY(-14px); opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.search-overlay.open .so-panel { transform: translateY(0); opacity: 1; }
.so-scrim { flex: 1; background: rgba(0,0,0,0); transition: background .25s ease; }
.search-overlay.open .so-scrim { background: rgba(0,0,0,.45); }
.so-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 12px;
}
.so-back { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-1); }
.so-back .ms { font-size: 24px; }
.so-field {
  flex: 1; display: flex; align-items: center; gap: 9px;
  background: var(--bg-screen); border-radius: var(--r-pill); padding: 10px 14px;
}
.so-field .so-ico { font-size: 21px; color: var(--ink-2); }
.so-field input { flex: 1; border: none; background: none; outline: none; font-size: 14.5px; font-family: var(--font-body); color: var(--ink-1); min-width: 0; }
.so-clear { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); }
.so-clear .ms { font-size: 18px; }
.so-spinner {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--line-2); border-top-color: var(--blue);
  animation: spin .7s linear infinite; display: none;
}
.search-overlay.searching .so-spinner { display: block; }

.so-trending { padding: 16px 16px 8px; }
.so-heading { font-family: var(--font); font-weight: 700; font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }
.so-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.so-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.2px solid var(--line-2); background: #fff; color: var(--ink-1);
  font-family: var(--font); font-weight: 600; font-size: 13px;
  padding: 9px 14px; border-radius: var(--r-pill);
}
.so-chip .ms { font-size: 16px; color: var(--green); }

.so-results { flex: 1; overflow-y: auto; padding: 14px; }
.so-results .grid { margin-top: 4px; }
.so-results .result-meta { padding: 0 2px 10px; }

/* Category suggestions above search results ("bab" → Baby Products) */
.so-cats { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 2px 12px; }
.so-cat {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.2px solid var(--line-2); background: #fff; color: var(--ink-1);
  font-family: var(--font); font-weight: 600; font-size: 13px;
  padding: 6px 10px 6px 6px; border-radius: var(--r-pill);
}
.so-cat-img {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  background: var(--bg-screen); flex: 0 0 26px;
}
.so-cat-initial { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink-2); }
.so-cat-go { font-size: 16px; color: var(--ink-3); margin-left: -2px; }

/* ── Bottom sheets (filter + detail) ── */
.sheet { position: fixed; inset: 0; z-index: 70; }
.sheet.hidden { display: none; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.42); opacity: 0; transition: opacity .2s ease; }
.sheet.open .sheet-scrim { opacity: 1; }
.sheet-card {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 100%);
  width: 100%; max-width: var(--app-w);
  background: #fff; border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
  max-height: 88vh; overflow-y: auto;
}
.sheet.open .sheet-card { transform: translate(-50%, 0); }
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 4px auto 6px; }
.sheet-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); background: var(--bg-screen); }
.sheet-title { font-family: var(--font); font-weight: 700; font-size: 18px; text-align: center; margin: 4px 0 12px; }

/* Filters sheet — fixed-height two-pane (rail + options) with pinned actions. */
.sheet-card--filter { height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
.fs-body { display: flex; flex: 1; min-height: 0; border-top: 1px solid var(--line); margin: 0 -18px; }
.fs-rail { width: 116px; flex: 0 0 auto; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding-top: 8px; }
.fs-tab {
  text-align: left; padding: 14px 18px; font-family: var(--font); font-weight: 600; font-size: 14px;
  color: var(--ink-2); border-left: 3px solid transparent;
}
.fs-tab.active { color: var(--blue); background: var(--bg-screen); border-left-color: var(--blue); font-weight: 700; }
.fs-pane { flex: 1; min-width: 0; overflow-y: auto; padding: 14px 18px; }
.fs-hint { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; line-height: 1.4; }
.fs-search {
  display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line-2);
  border-radius: var(--r-pill); padding: 9px 14px; margin-bottom: 12px;
}
.fs-search .ms { font-size: 18px; color: var(--ink-3); }
.fs-search input { flex: 1; border: none; outline: none; font-size: 13.5px; font-family: var(--font-body); color: var(--ink-1); min-width: 0; }

/* Checkbox rows (Store / Brands) */
.fs-checks { display: flex; flex-direction: column; }
.fs-check { display: flex; align-items: center; gap: 12px; padding: 11px 2px; text-align: left; font-size: 14px; color: var(--ink-1); }
.fs-box { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--line-2); display: grid; place-items: center; background: #fff; }
.fs-box .ms { font-size: 15px; color: #fff; opacity: 0; }
.fs-check.on .fs-box { background: var(--blue); border-color: var(--blue); }
.fs-check.on .fs-box .ms { opacity: 1; }
.fs-check.on .fs-check-label { color: var(--blue); font-weight: 600; }

/* Sort radios */
.fs-radios { display: flex; flex-direction: column; padding: 2px 0 6px; }
.fs-radio { display: flex; align-items: center; gap: 12px; padding: 13px 2px; text-align: left; font-size: 15px; color: var(--ink-1); border-bottom: 1px solid var(--line); }
.fs-dot { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); position: relative; }
.fs-radio.on .fs-dot { border-color: var(--blue); }
.fs-radio.on .fs-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--blue); }
.fs-radio.on .fs-radio-label { color: var(--blue); font-weight: 700; }

.fs-actions { display: flex; gap: 12px; padding-top: 12px; }
.fs-btn { flex: 1; padding: 14px; border-radius: var(--r-md); font-family: var(--font); font-weight: 700; font-size: 15px; }
.fs-btn--ghost { background: #fff; color: var(--ink-1); border: 1.4px solid var(--line-2); }
.fs-btn--primary { background: var(--btn-yellow); color: #000; }

/* ── Detail sheet body ── */
.detail-body { padding-bottom: 4px; }
.d-imgwrap { position: relative; aspect-ratio: 16/11; background: #F4F5F7; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 14px; }
.d-imgwrap img { max-width: 82%; max-height: 90%; object-fit: contain; mix-blend-mode: multiply; }
.d-store { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.d-store .dot { width: 8px; height: 8px; border-radius: 50%; }
.d-name { font-family: var(--font); font-weight: 600; font-size: 16px; line-height: 1.35; margin: 0 0 12px; }
.d-priceline { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.d-now { font-family: var(--font); font-weight: 800; font-size: 26px; letter-spacing: -.5px; }
.d-mrp { font-size: 15px; color: var(--ink-3); text-decoration: line-through; }
.d-off { font-family: var(--font); font-weight: 700; font-size: 14px; color: var(--green); }
.d-usual { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--green); background: var(--green-bg); padding: 6px 10px; border-radius: 8px; margin-bottom: 14px; }
.d-usual .ms { font-size: 16px; }
.d-cta {
  width: 100%; background: var(--rapido); color: var(--rapido-ink);
  font-family: var(--font); font-weight: 800; font-size: 15.5px;
  padding: 15px; border-radius: var(--r-md); margin-top: 6px;
}
.d-note { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; margin: 12px 2px 0; }

/* ── Toast ── */
.toast {
  position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%) translateY(12px);
  background: var(--rapido-ink); color: #fff; font-size: 13px; font-weight: 500;
  padding: 11px 18px; border-radius: var(--r-pill); box-shadow: var(--shadow-float);
  opacity: 0; pointer-events: none; transition: all .22s ease; z-index: 80; max-width: 88%; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: #C0272D; }

body.sheet-open, body.overlay-open { overflow: hidden; }