/* =============================================================
   KeepKash Homepage — Design Tokens & Base Styles
   PBI-01: CSS custom properties only, no component styles yet.
   All values lifted verbatim from TONE in direction-safe.jsx
   and the spacing/typography spec in README.md.
   ============================================================= */

/* ── Google Fonts are loaded by _HomepageLayout.cshtml ──────── */

/* ── 1. Color tokens ──────────────────────────────────────────
   Source: TONE object in direction-safe.jsx + README token table
   ─────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --kk-bg:           #FAF6EE;
  --kk-bg-gradient:  radial-gradient(1200px 600px at 20% 0%, #E5DCF8 0%, transparent 55%),
                     radial-gradient(1000px 500px at 100% 8%, #F0E7FC 0%, transparent 60%),
                     linear-gradient(180deg, #F4EFFA 0%, #FAF6EE 35%, #FAF6EE 100%);
  --kk-paper:        #FFFFFF;
  /* A card's surface when it sits inside a .kk-section--paper section (so it
     can't use --kk-paper itself -- that's the section's own background).
     Light mode: --kk-bg already reads as a gentle warm-vs-white contrast.
     Dark mode redefines this to something LIGHTER than --kk-paper instead
     (see the [data-theme="dark"] block) so the card still reads as raised,
     not sunken -- --kk-bg there is much darker than --kk-paper, which
     looked like a hole cut into the section rather than a card on top of it. */
  --kk-paper-raised: var(--kk-bg);

  /* Text */
  --kk-ink:          #2A2A2A;
  --kk-ink-soft:     #6B6B6B;
  --kk-ink-very:     #9A9A9A;

  /* Borders */
  --kk-line:         #ECE5D2;

  /* Brand green */
  --kk-green:        #6FA831;
  --kk-green-dark:   #558220;
  --kk-green-soft:   #E9F4D9;
  --kk-green-dark-on-dark: #9FD66A; /* used for Kash wordmark on navy bg */

  /* Charcoal */
  --kk-charcoal:     #3F3F3F;

  /* Brand purple */
  --kk-purple:       #6E5DDA;
  --kk-purple-soft:  #EFEBFD;
  --kk-purple-dark:  #5345B5;

  /* Accent tints */
  --kk-peach:        #FFE0D2;
  --kk-pink:         #FFD8E4;
  --kk-mint:         #CDEFD9;
  --kk-butter:       #FFF1B8;

  /* Footer */
  --kk-navy:         #2B2F4D;

  /* ── 2. Typography tokens ──────────────────────────────────
     Fonts: Geist (display/headings), Inter (body),
     Geist Mono (code/kbd), Fraunces (serif accent),
     Noto Naskh Arabic (Arabic wordmarks)
     ───────────────────────────────────────────────────────── */
  --font-display:  'Geist', 'Inter', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-mono:     'Geist Mono', 'Courier New', monospace;
  --font-serif:    'Fraunces', Georgia, serif;
  --font-arabic:   'Noto Naskh Arabic', serif;

  /* Type scale (approximated from JSX inline values + README) */
  --text-xs:    11px;   /* meta, chips */
  --text-sm:    13px;   /* topbar, small labels */
  --text-base:  14px;   /* body default */
  --text-md:    16px;   /* body large, section subtitles */
  --text-lg:    18px;   /* card titles h3 small */
  --text-xl:    22px;   /* card titles h3, nav wordmark */
  --text-2xl:   28px;   /* card titles h3 large */
  --text-3xl:   36px;   /* section h2 small */
  --text-4xl:   44px;   /* section h2 large, extension h2 */
  --text-5xl:   60px;   /* hero h1 */
  --text-rate:  64px;   /* hot-deals rate number */

  /* Letter-spacing scale */
  --ls-tight:   -0.035em;
  --ls-snug:    -0.03em;
  --ls-normal:  -0.02em;
  --ls-wide:    0.06em;
  --ls-wider:   0.12em;

  /* Line-height */
  --lh-hero:    1.0;
  --lh-heading: 1.1;
  --lh-body:    1.55;

  /* ── 3. Spacing & layout tokens ────────────────────────────
     Source: README "Spacing & Radii" section + JSX padding values
     ───────────────────────────────────────────────────────── */
  --container-max:  1320px;
  --container-pad:  32px;   /* horizontal gutter */
  --section-py:     60px;   /* section vertical padding */

  /* Radii */
  --radius-pill:    999px;  /* buttons, pills, chips */
  --radius-sm:      8px;    /* small chips */
  --radius-md:      12px;   /* coupon code box, kbd */
  --radius-card:    16px;   /* store cards */
  --radius-card-lg: 22px;   /* hot-deal cards */
  --radius-panel:   32px;   /* hero, extension banner, referral */
  --radius-step:    20px;   /* how-it-works step cards */

  /* Interaction surface (hover backgrounds) */
  --kk-surface:     #F0EBE0;   /* slightly darker than --kk-bg for visible hover */

  /* Card borders & shadows */
  --card-border:    1px solid var(--kk-line);
  --shadow-card:    0 8px 18px -10px rgba(78, 61, 218, 0.18);   /* cards on cream bg */
  --shadow-card-wh: 0 14px 28px -14px rgba(0, 0, 0, 0.30);     /* cards on white bg */

  /* Button padding */
  --btn-py-sm:  8px;
  --btn-py:     12px;
  --btn-py-lg:  15px;
  --btn-px-sm:  14px;
  --btn-px:     20px;
  --btn-px-lg:  28px;

  /* ── 4. Hot-deals gradient palettes (indexed 0–4) ──────────
     Assigned by card index in _HotDeals.cshtml (CSS vars
     aren't iterable, so the palettes are declared as
     individual props and the Razor view picks by index).
     ───────────────────────────────────────────────────────── */
  --deal-0-bg:      linear-gradient(135deg, #6E5DDA, #5345B5);
  --deal-0-chip-bg: #FFF1B8;
  --deal-0-chip-fg: #2A2A2A;

  --deal-1-bg:      linear-gradient(135deg, #FF8A65, #E63946);
  --deal-1-chip-bg: #FFE0D2;
  --deal-1-chip-fg: #A8341A;

  --deal-2-bg:      linear-gradient(135deg, #2BAB6C, #558220);
  --deal-2-chip-bg: #FFF1B8;
  --deal-2-chip-fg: #2A2A2A;

  --deal-3-bg:      linear-gradient(135deg, #F7B538, #E89500);
  --deal-3-chip-bg: #FFFFFF;
  --deal-3-chip-fg: #2A2A2A;

  --deal-4-bg:      linear-gradient(135deg, #4577A8, #28548A);
  --deal-4-chip-bg: #FFF1B8;
  --deal-4-chip-fg: #2A2A2A;

  /* ── 5. Recommended-section gradient palettes (indexed 0–3) */
  --rec-0-bg: linear-gradient(135deg, #FF8A65, #E63946);
  --rec-1-bg: linear-gradient(135deg, #2BAB6C, #558220);
  --rec-2-bg: linear-gradient(135deg, #F7B538, #E89500);
  --rec-3-bg: linear-gradient(135deg, #6E5DDA, #5345B5);

  /* ── 6. Category accent colors (coupon strips + chips) ─────
     fashion=#B83466, travel=#1E4E8C, books=purpleDark,
     education=greenDark (from README §7 Coupons spec)
     ───────────────────────────────────────────────────────── */
  --cat-fashion-accent:   #B83466;
  --cat-travel-accent:    #1E4E8C;
  --cat-books-accent:     #5345B5;
  --cat-education-accent: #558220;

  /* ── 7. Hero slide background gradients ────────────────────
     Source: slide definitions in kk-sections-1.jsx
     ───────────────────────────────────────────────────────── */
  --hero-0-grad: linear-gradient(135deg, #6E5DDA 0%, #8A7AF5 55%, #A38DF7 100%);
  --hero-1-grad: linear-gradient(135deg, #3D8B37 0%, #6FA831 55%, #8FCC4D 100%);
  --hero-2-grad: linear-gradient(135deg, #E8521C 0%, #F07030 55%, #F5975A 100%);
  --hero-3-grad: linear-gradient(135deg, #5345B5 0%, #6E5DDA 55%, #8A7AF5 100%);

  /* ── 8. Transition & animation timing ──────────────────────*/
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --carousel-fade:     0.6s ease;
  --carousel-bg:       0.8s ease;

  /* ── 9. Fill/surface tokens ─────────────────────────────────
     Type/icon color vs. large-fill color are separate tokens on
     purpose: dark mode lifts --kk-green/--kk-purple so they read
     as type on a dark ground, which would wash out as a big
     filled button. Filled buttons, badge plates and big colored
     cards use the *-surface pair instead. Equal to the type
     token in light mode; deepened in dark (see [data-theme=dark]).
     ───────────────────────────────────────────────────────── */
  --kk-green-surface:  var(--kk-green);
  --kk-purple-surface: var(--kk-purple);

  /* Sticky/glass chrome and form fields */
  --kk-glass:      rgba(255, 255, 255, .70);
  --kk-glass-soft: rgba(255, 255, 255, .55);
  --kk-field:      #FBF9F3;

  /* ── 10. Fixed tokens — identical in both themes ────────────
     For ink/fills that sit on a white or bright plate (a chip on
     a purple gradient card, an icon plate on the green wallet
     card): those plates never darken, so the ink on them must
     never lift either. Using --kk-ink/--kk-purple/--kk-green
     there instead of these would go illegible in dark mode.
     ───────────────────────────────────────────────────────── */
  --kk-ink-on-light:     #2A2A2A;
  --kk-purple-on-light:  #5345B5;
  --kk-green-on-light:   #558220;
  --kk-amber-on-light:   #8A6D00;
  --kk-on-color:         #FFFFFF;
  --kk-butter-bright:    #FFF1B8;
  --kk-mint-bright:      #CDEFD9;
  --kk-peach-bright:     #FFE0D2;
  --kk-pink-bright:      #FFD8E4;
  --kk-purple-grad-dark: #5345B5;  /* dark end of the brand-panel gradient, never lifted */

  /* ── 11. Category tile grounds ──────────────────────────────
     Indexed 1-10, assigned by tile position in _Categories.cshtml
     (same reason as the hot-deals palettes above — CSS vars
     aren't iterable). Order/values from THEMING.md's category-
     tile table: Hot deals, Big sale, 50% sale, Fashion,
     Electronics, Travel, Beauty, Home, Books, Food.
     ───────────────────────────────────────────────────────── */
  --kk-cat-1:  #FFE6D8;
  --kk-cat-2:  #FFF4C9;
  --kk-cat-3:  var(--kk-purple-soft);
  --kk-cat-4:  var(--kk-pink);
  --kk-cat-5:  var(--kk-mint);
  --kk-cat-6:  #D6EAFF;
  --kk-cat-7:  #FFE2EC;
  --kk-cat-8:  var(--kk-green-soft);
  --kk-cat-9:  #EAE0FF;
  --kk-cat-10: #FFE7C8;
}

/* ── Dark theme ───────────────────────────────────────────────
   Same custom properties, dark values, swapped by [data-theme]
   on <html> (see keepkash-home.js). Equal CSS specificity to
   :root, later in source order, so it wins for anything it
   redeclares; anything it doesn't touch (the fixed tokens above,
   decorative gradients, --kk-charcoal — used only for decorative
   scene-illustration ink/borders in this codebase, not general
   chrome text) falls through to the :root value in both themes.
   Source: ClaudeDesign/handoff_keepkash/THEMING.md
   ─────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --kk-bg:          #0F0D16;
  --kk-bg-gradient: radial-gradient(1200px 600px at 20% 0%, rgba(143,127,243,.20) 0%, transparent 55%),
                    radial-gradient(1000px 500px at 100% 8%, rgba(110,93,218,.13) 0%, transparent 60%),
                    linear-gradient(180deg, #15121F 0%, #0F0D16 35%, #0F0D16 100%);
  --kk-paper:       #211D2C;
  /* Deliberately neutral (no purple tint), unlike --kk-paper/--kk-bg -- a
     different HUE from the section it sits on reads as a clearly separate
     surface at a glance, not just "a bit lighter." */
  --kk-paper-raised: #2B2B30;

  --kk-ink:         #F4F2F9;
  --kk-ink-soft:    #A9A3BA;
  --kk-ink-very:    #736D86;

  --kk-line:        #2C2839;

  --kk-green:       #93D24A;
  --kk-green-dark:  #A9DE6B;
  --kk-green-soft:  #1C2A13;

  --kk-purple:      #8F7FF3;
  --kk-purple-soft: #241F3A;
  --kk-purple-dark: #B7A6FF;

  --kk-green-surface:  #3C7A1E;
  --kk-purple-surface: #4B3CA6;

  --kk-peach:  #33221B;
  --kk-pink:   #331E28;
  --kk-mint:   #17291F;
  --kk-butter: #302811;

  --kk-navy: #12101A;

  --kk-glass:      rgba(21, 18, 31, .78);
  --kk-glass-soft: rgba(21, 18, 31, .55);
  --kk-field:      #1F1B2A;
  --kk-surface:    #201C2B; /* hover backgrounds */

  --shadow-card: none; /* dark elevation = --kk-paper lifting off --kk-bg + the --kk-line hairline */

  /* Category tile grounds — richer, more saturated dark chips than a plain
     darkened pastel, so they read as jewel-tone accents rather than mud.
     All 10 are given explicit values here (rather than letting 3/4/5/8
     inherit from --kk-purple-soft etc.) so this palette can be tuned on
     its own without affecting the other components that share those tokens. */
  --kk-cat-1:  #4A2E1C;
  --kk-cat-2:  #4A3B14;
  --kk-cat-3:  #2E2650;
  --kk-cat-4:  #47223A;
  --kk-cat-5:  #163826;
  --kk-cat-6:  #16283E;
  --kk-cat-7:  #3A1F2C;
  --kk-cat-8:  #1F3318;
  --kk-cat-9:  #2B2350;
  --kk-cat-10: #3A2A12;

  color-scheme: dark;
}

/* ── Base resets ──────────────────────────────────────────────
   Scoped to .kk-page so the homepage styles never bleed
   into other pages that share a render path.
   ─────────────────────────────────────────────────────────── */
.kk-page *,
.kk-page *::before,
.kk-page *::after {
  box-sizing: border-box;
}

.kk-page {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--kk-ink);
  background: var(--kk-bg);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.kk-page a {
  color: inherit;
  text-decoration: none;
}

/* :not([hidden]) -- author CSS always outranks the browser's own UA stylesheet
   regardless of specificity, so this blanket display:block was silently
   defeating the native [hidden] attribute on every img/svg in the page (the
   hero's play/pause icon swap, most visibly: both icons stayed display:block
   and visible no matter which one JS set .hidden = true on). */
.kk-page img:not([hidden]),
.kk-page svg:not([hidden]) {
  display: block;
}

/* Belt-and-suspenders: inline <svg> doesn't get the browser's own
   [hidden] -> display:none default the way other elements do (verified: even
   a bare <svg hidden> with no site CSS at all computes display:inline here),
   so [hidden] alone silently does nothing on an svg. Force it explicitly. */
svg[hidden] {
  display: none;
}

/* Decorative mockup illustrations (hero scenes, app/extension previews, the
   referral wallet cards) draw copy with hardcoded x coordinates and mostly
   no text-anchor, authored assuming LTR. Under the page's inherited RTL
   direction, <text> with the implicit "start" anchor flips to anchor from
   the right, clipping or overlapping the very labels it's meant to show.
   Forcing LTR fixes the anchor/position math for everything in these SVGs,
   English or Arabic alike: a single Arabic phrase is one RTL bidi run and
   still shapes/orders its own characters correctly regardless of the
   paragraph's base direction -- only which edge "start" anchors to changes,
   which is exactly the math these hardcoded coordinates were authored for. */
.kk-page svg text {
  direction: ltr;
}

/* ── Container utility ────────────────────────────────────────
   .kk-container: centered, max 1320px, 32px horizontal gutter.
   Use on every section's inner wrapper.
   ─────────────────────────────────────────────────────────── */
.kk-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  width: 100%;
}

/* ── Section wrapper ──────────────────────────────────────────
   .kk-section: 60px top+bottom padding.
   .kk-section--paper: switches background to white.
   ─────────────────────────────────────────────────────────── */
.kk-section {
  padding-block: var(--section-py);
}

.kk-section--paper {
  background: var(--kk-paper);
}

/* ── Typography helpers ───────────────────────────────────────
   Heading scale classes (h1–h3 equivalent).
   Component CSS will compose from these.
   ─────────────────────────────────────────────────────────── */
.kk-h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-hero);
  margin: 0;
}

.kk-h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-heading);
  margin: 0;
  color: var(--kk-ink);
}

.kk-h2--lg {
  font-size: var(--text-4xl);
}

.kk-h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--ls-normal);
  margin: 0;
}

/* ── Brand accent span ─────────────────────────────────────────
   <span class="kk-accent">Kash</span> inside any "KeepKash" wordmark.
   On light bg: greenDark (#558220). On navy bg: --kk-green-dark-on-dark.
   ─────────────────────────────────────────────────────────── */
.kk-accent {
  color: var(--kk-green-dark);
}

.kk-dark .kk-accent,
.kk-on-dark .kk-accent {
  color: var(--kk-green-dark-on-dark);
}

/* ── Pill / chip helpers ──────────────────────────────────────
   Base chip: tight padding, pill radius, uppercase small caps.
   Colour modifiers set bg/fg.
   ─────────────────────────────────────────────────────────── */
.kk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
}

.kk-chip--green  { background: var(--kk-green);      color: #fff; }
.kk-chip--green-soft { background: var(--kk-green-soft); color: var(--kk-green-dark); }
.kk-chip--purple { background: var(--kk-purple);     color: #fff; }
.kk-chip--purple-soft { background: var(--kk-purple-soft); color: var(--kk-purple-dark); }
.kk-chip--peach  { background: var(--kk-peach);      color: #C24A1A; }
.kk-chip--butter { background: var(--kk-butter);     color: var(--kk-ink); }

/* ── Button helpers ───────────────────────────────────────────
   .kk-btn: base pill button, inline-flex centred.
   Modifiers: --primary (green), --ghost (line border), --dark (ink fill).
   ─────────────────────────────────────────────────────────── */
.kk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.kk-btn:hover {
  filter: brightness(0.94);
}

.kk-btn--primary {
  background: var(--kk-green);
  color: #fff;
}

/* --kk-green is brightened in dark mode so it reads as an accent against dark
   backgrounds (text/icons) -- but that same bright value fails as a button
   FILL under white text. Pin the CTA to the punchier light-mode green in
   both themes instead of letting it follow the accent token. */
[data-theme="dark"] .kk-btn--primary {
  background: #6FA831;
}

.kk-btn--ghost {
  background: var(--kk-paper);
  color: var(--kk-ink);
  border: var(--card-border);
}

.kk-btn.kk-btn--dark {
  background: var(--kk-navy);
  color: #fff;
}

.kk-btn--purple-soft {
  background: var(--kk-purple-soft);
  color: var(--kk-purple-dark);
}

.kk-btn--sm {
  padding: var(--btn-py-sm) var(--btn-px-sm);
  font-size: var(--text-xs);
}

.kk-btn--lg {
  padding: var(--btn-py-lg) var(--btn-px-lg);
  font-size: var(--text-md);
}

/* ── Card lift on hover ───────────────────────────────────────
   Attach to any card that should lift 2px on hover.
   ─────────────────────────────────────────────────────────── */
.kk-card-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.kk-card-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* ── Section header row ───────────────────────────────────────
   .kk-section-head: flex row, space-between, aligned to end.
   Used by Categories, HotDeals, Stores, Coupons, Recommended.
   ─────────────────────────────────────────────────────────── */
.kk-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-block-end: 24px;
  gap: 16px;
}

.kk-section-head__title-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kk-section-head__meta {
  font-size: var(--text-sm);
  color: var(--kk-ink-soft);
}

.kk-section-head__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--kk-ink);
  white-space: nowrap;
}

/* ── Carousel nav pair ────────────────────────────────────────
   Round prev/next button pair used in HotDeals, Recommended.
   ─────────────────────────────────────────────────────────── */
.kk-nav-arrows {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.kk-nav-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: filter var(--transition-fast);
}

.kk-nav-arrow:hover {
  filter: brightness(0.9);
}

.kk-nav-arrow--prev {
  background: var(--kk-paper);
  border: var(--card-border);
  color: var(--kk-ink);
}

.kk-nav-arrow--next {
  /* --kk-navy is near-black in dark mode (meant for panels sitting on the
     page background, not a button floating over it), so this button all but
     disappeared there. --kk-purple is already brightened per-theme for
     exactly this "accent control on either background" use. */
  background: var(--kk-purple);
  color: #fff;
}

/* ── Monospace code display ────────────────────────────────────
   Used by coupon code box and the nav search ⌘K hint.
   ─────────────────────────────────────────────────────────── */
.kk-mono {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: 0.1em;
}

.kk-kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px 6px;
  background: var(--kk-bg);
  border: var(--card-border);
  border-radius: var(--radius-md);
  color: var(--kk-ink-soft);
}

/* ── Hero fade-in keyframe ────────────────────────────────────
   Applied via .kk-slide-enter on slide change (PBI-08).
   Respects prefers-reduced-motion.
   ─────────────────────────────────────────────────────────── */
@keyframes kkFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes kkFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

.kk-slide-enter {
  animation: kkFade var(--carousel-fade) ease both;
}

/* ── TopBar (PBI-04) ──────────────────────────────────────────
   Utility strip: email left · country+lang pills · auth right.
   Glass effect: translucent white + blur. Sticky at top.
   ─────────────────────────────────────────────────────────── */
.kk-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--kk-glass-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--kk-line);
}

.kk-topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 10px;
}

.kk-topbar__start {
  display: flex;
  align-items: center;
}

.kk-topbar__email {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--kk-ink-soft);
  transition: color var(--transition-fast);
}

.kk-topbar__email:hover {
  color: var(--kk-ink);
}

/* ── Topbar brand / logo ─────────────────────────────────────── */
.kk-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--kk-ink);
}

.kk-topbar__brand-icon {
  display: block;
  flex-shrink: 0;
}

.kk-topbar__brand-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.kk-topbar__end {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kk-topbar__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--kk-paper);
  border: var(--card-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--kk-ink);
  cursor: pointer;
  transition: filter var(--transition-fast);
}

.kk-topbar__pill:hover {
  filter: brightness(0.95);
}

.kk-topbar__divider {
  width: 1px;
  height: 16px;
  background: var(--kk-line);
  margin-inline: 4px;
  flex-shrink: 0;
}

/* Wallet chip, notification button, and the avatar-bearing user chip -- moved here from
   profile.css (which only Profile.cshtml loads) so _TopBar.cshtml can use the same richer
   user-area treatment on every logged-in page, not just Profile. */
.kk-wallet-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  background: var(--kk-green-soft);
  border: 1px solid rgba(111, 168, 49, 0.2);
  border-radius: var(--radius-pill);
  font-weight: 600;
  color: var(--kk-green-dark);
  cursor: pointer;
  text-decoration: none;
  font-size: 13.5px;
  font-family: var(--font-display);
  transition: filter var(--transition-fast);
}

.kk-wallet-chip:hover {
  filter: brightness(0.95);
}

.kk-wallet-chip__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--kk-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
}

.kk-notif-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--kk-paper);
  border: 1px solid var(--kk-line);
  color: var(--kk-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: filter var(--transition-fast);
}

.kk-notif-btn:hover {
  filter: brightness(0.96);
}

.kk-notif-badge {
  position: absolute;
  top: 6px;
  inset-inline-end: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E63946;
  /* Ring matches the button's own background so the dot reads as a cutout notch --
     was hardcoded #fff, which left a bright white halo around the dot in dark mode. */
  border: 2px solid var(--kk-paper);
  pointer-events: none;
}

.kk-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 4px 4px;
  background: var(--kk-paper);
  border: 1px solid var(--kk-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--kk-ink);
  font-family: inherit;
  transition: filter var(--transition-fast);
}

.kk-user-chip:hover {
  filter: brightness(0.96);
}

.kk-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kk-purple), var(--kk-green));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  user-select: none;
}

.kk-topbar__already {
  font-size: var(--text-sm);
  color: var(--kk-ink-soft);
  white-space: nowrap;
}

.kk-topbar__login {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--kk-ink);
  transition: color var(--transition-fast);
}

.kk-topbar__login:hover {
  color: var(--kk-purple);
}

/* ── Theme toggle ─────────────────────────────────────────────── */
.kk-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--kk-paper);
  border: var(--card-border);
  border-radius: var(--radius-pill);
  color: var(--kk-ink);
  cursor: pointer;
  transition: filter var(--transition-fast);
}

.kk-theme-toggle:hover {
  filter: brightness(0.95);
}

/* Three classes (0,3,0) to beat .kk-page svg:not([hidden]) { display: block }
   (0,2,1) -- that rule's :not([hidden]) counts as an attribute selector, so
   it outranks a plain two-class rule here and both icons render at once. */
.kk-theme-toggle .kk-theme-toggle__icon.kk-theme-toggle__icon--moon { display: none; }
[data-theme="dark"] .kk-theme-toggle .kk-theme-toggle__icon--sun { display: none; }
[data-theme="dark"] .kk-theme-toggle .kk-theme-toggle__icon--moon { display: block; }

/* ── Topbar dropdowns ─────────────────────────────────────────── */
.kk-topbar__dropdown {
  position: relative;
}

.kk-topbar__dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  min-width: max-content;
  max-height: 280px;
  overflow-y: auto;
  background: var(--kk-paper);
  border: var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  list-style: none;
  margin: 0;
  padding: 4px;
  z-index: 10000;
}

.kk-topbar__dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--kk-ink);
  cursor: pointer;
  text-align: start;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.kk-topbar__dropdown-item:hover {
  background: var(--kk-surface);
}

.kk-topbar__dropdown--lang .kk-topbar__dropdown-item {
  justify-content: center;
}

.kk-topbar__chevron {
  transition: transform var(--transition-fast);
}

[data-dropdown][data-open] .kk-topbar__chevron {
  transform: rotate(180deg);
}

/* ── Flag images ──────────────────────────────────────────────
   Flags have mixed aspect ratios (1.4:1 – 2:1). Use contain so
   the full flag is always visible without clipping.
   ─────────────────────────────────────────────────────────── */
.kk-flag {
  display: inline-block;
  width: 22px;
  height: 15px;
  object-fit: contain;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--kk-line);   /* fills letterbox for 2:1 flags */
}

/* ── Page loader / spinner ────────────────────────────────────
   Shown during XHR calls that trigger a full-page reload
   (country switch, language switch). JS adds .is-active.
   ─────────────────────────────────────────────────────────── */
.kk-page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kk-glass);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.kk-page-loader.is-active {
  opacity: 1;
  pointer-events: all;
}

.kk-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--kk-line);
  border-top-color: var(--kk-purple);
  border-radius: 50%;
  animation: kkSpin 0.7s linear infinite;
}

@keyframes kkSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .kk-spinner { animation-duration: 2s; }
}

/* ── Hero (PBI-06) ────────────────────────────────────────────
   4-slide auto-rotating carousel. Gradient card, 2-col grid.
   Scenes are absolutely-positioned SVG compositions.
   JS lives in keepkash-home.js.
   ─────────────────────────────────────────────────────────── */
.kk-hero {
  padding-block: 48px 60px;
  overflow: hidden;
  position: relative;
}

/* ── Card ── */
.kk-hero__card {
  border-radius: var(--radius-panel);
  min-height: 440px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: background var(--carousel-bg);
}

/* ── Decorative blobs ── */
.kk-hero__blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.kk-hero__blob--1 {
  width: 280px; height: 280px;
  background: rgba(255,255,255,0.08);
  top: -80px; inset-inline-end: 120px;
}
.kk-hero__blob--2 {
  width: 180px; height: 180px;
  background: rgba(255,255,255,0.06);
  bottom: -40px; inset-inline-start: 380px;
}
.kk-hero__dots-bg {
  position: absolute;
  inset-inline-end: 380px;
  bottom: 40px;
  opacity: 0.4;
  pointer-events: none;
}

/* ── Copy panel ── */
.kk-hero__copy {
  padding: 64px;
  position: relative;
  z-index: 2;
  color: #fff;
}

.kk-hero__kicker[hidden] {
  /* Author CSS always outranks the browser's own [hidden] -> display:none
     default (same reason the hero play/pause icon fix below exists), so the
     explicit display: inline-flex two lines down needs an explicit opt-out. */
  display: none;
}
.kk-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  margin-block-end: 24px;
  backdrop-filter: blur(8px);
  /* It's an <a> only so the referral slide's kicker can link to /invite --
     other slides render it with no href attribute, so it's inert there. */
  text-decoration: none;
}

.kk-hero__kicker-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--kk-mint);
  box-shadow: 0 0 12px var(--kk-mint);
  flex-shrink: 0;
}

.kk-hero__h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-hero);
  margin: 0;
  color: #fff;
}

.kk-hero__hl {
  /* color set per-slide via inline style / JS */
}

.kk-hero__body {
  font-size: 17px;
  margin-block-start: 24px;
  line-height: var(--lh-body);
  max-width: 460px;
  color: rgba(255,255,255,0.85);
}

.kk-hero__body b,
.kk-hero__body i { color: #fff; }

.kk-hero__ctas {
  display: flex;
  gap: 12px;
  margin-block-start: 32px;
  flex-wrap: wrap;
}

.kk-hero__cta-a {
  background: #fff;
  /* color set per-slide via inline style / JS */
  border: none;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--transition-fast);
  white-space: nowrap;
}
.kk-hero__cta-a:hover { filter: brightness(0.94); }

.kk-hero__cta-b {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 15px 24px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: filter var(--transition-fast);
  white-space: nowrap;
}
.kk-hero__cta-b:hover { filter: brightness(1.12); }

/* ── Scene wrapper ── */
.kk-hero__scene-wrap {
  position: relative;
  height: 440px;
  padding: 32px 32px 32px 0;
}

/* ── Scene shared ── */
.kk-hero__scene {
  position: absolute;
  inset: 0;
  padding: 32px 32px 32px 0;
}

/* ── Scene 0: refund ── */
.kk-scene0__badge {
  position: absolute;
  top: 60px; inset-inline-end: 80px;
  width: 180px; height: 180px;
  background: #fff;
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.35);
  transform: rotate(-6deg);
}
.kk-scene0__badge img {
  width: 120px; height: 120px;
  object-fit: contain;
}

.kk-scene0__coin {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--kk-charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--kk-charcoal);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.3);
}

.kk-scene0__receipt {
  position: absolute;
  bottom: 36px; inset-inline-end: 40px;
  background: #fff;
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.3);
  transform: rotate(4deg);
  display: flex;
  align-items: center;
  gap: 12px;
}
.kk-scene0__receipt-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--kk-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kk-scene0__receipt-label {
  font-size: 10px;
  /* Fixed white card background regardless of theme -- see the matching
     comment on .kk-scene2__receipt-label for why this is a hardcoded color
     rather than the theme-reactive --kk-ink-soft token. */
  color: #6B6B6B;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.kk-scene0__receipt-amount {
  font-family: var(--font-display);
  font-weight: 700;
  color: #6FA831;
  font-size: 17px;
  letter-spacing: -0.01em;
}

/* ── Scene 1: partners ── */
.kk-scene1__counter {
  position: absolute;
  top: 10px; inset-inline-end: 100px;
  background: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.25);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transform: rotate(-3deg);
  z-index: 3;
}
.kk-scene1__counter-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  color: var(--kk-green);
  letter-spacing: -0.025em;
  line-height: 1;
}
.kk-scene1__counter-label {
  font-size: 11px;
  color: var(--kk-ink-soft);
  font-weight: 600;
  line-height: 1.1;
}

.kk-scene1__tile {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 14px 32px -12px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 175px;
}
.kk-scene1__wordmark {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.kk-scene1__rate {
  background: var(--kk-green-soft);
  color: var(--kk-green-dark);
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

/* ── Scene 2: Black Friday ── */
.kk-scene2__badge {
  position: absolute;
  top: 50px; inset-inline-end: 90px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: #fff;
  border: 6px dashed var(--kk-peach);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.35);
  transform: rotate(-8deg);
  text-align: center;
}
.kk-scene2__badge-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #A8341A;
  letter-spacing: 0.08em;
}
.kk-scene2__badge-rate {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 800;
  color: #C24A1A;
  letter-spacing: -0.04em;
  line-height: 1;
}
.kk-scene2__badge-pct { font-size: 36px; }
.kk-scene2__badge-sub {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--kk-ink-soft);
  font-weight: 600;
}

.kk-scene2__tag {
  position: absolute;
  /* Fixed, not --kk-butter: that token goes near-black in dark mode (meant for
     subtle UI chrome, not a decoration on this always-bright gradient hero),
     which made this "-40% off" tag go dark and low-contrast. */
  background: #FFF1B8;
  border: 2px solid var(--kk-charcoal);
  border-radius: 10px;
  padding: 10px 14px 10px 22px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.3);
  font-family: var(--font-display);
}
.kk-scene2__tag--1 {
  top: 30px; inset-inline-end: 320px;
  transform: rotate(-12deg);
}
.kk-scene2__tag--2 {
  top: 260px; inset-inline-end: 250px;
  background: #fff;
  transform: rotate(6deg);
}
.kk-scene2__tag-hole {
  position: absolute;
  left: 8px; top: 50%;
  margin-block-start: -4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--kk-charcoal);
}
.kk-scene2__tag-event {
  font-weight: 800;
  font-size: 13px;
  color: var(--kk-charcoal);
  letter-spacing: -0.02em;
}
.kk-scene2__tag-value {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.03em;
}

.kk-scene2__receipt {
  position: absolute;
  bottom: 30px; inset-inline-end: 30px;
  background: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: 0 14px 32px -10px rgba(0,0,0,0.3);
  transform: rotate(-4deg);
  min-width: 200px;
}
.kk-scene2__receipt-label {
  font-size: 10px;
  /* This card's background is a hardcoded #fff regardless of site theme (it's
     a paper-receipt prop), so its text uses fixed light-mode ink colors too --
     the theme-reactive --kk-ink tokens turn near-white in dark mode, which
     made this unreadable on the always-white card. */
  color: #6B6B6B;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-block-end: 6px;
}
.kk-scene2__receipt-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #2A2A2A;
  padding-block: 3px;
}
.kk-scene2__receipt-row--total {
  color: #6FA831;
  font-weight: 700;
  border-block-start: 1px dashed var(--kk-line);
  margin-block-start: 4px;
  padding-block-start: 6px;
}
.kk-scene2__receipt-sum {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: #2A2A2A;
  margin-block-start: 8px;
  letter-spacing: -0.02em;
}

/* ── Scene 3: referral ── */
.kk-scene3__card {
  position: absolute;
  background: #fff;
  border: var(--card-border);
  border-radius: 16px;
  padding: 16px;
  width: 180px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.25);
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  align-items: center;
}
.kk-scene3__card--you {
  top: 50px; inset-inline-end: 250px;
  transform: rotate(-5deg);
}
.kk-scene3__card--friend {
  bottom: 60px; inset-inline-end: 30px;
  transform: rotate(6deg);
}
.kk-scene3__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  grid-row: 1;
}
.kk-scene3__name {
  font-size: 13px;
  font-weight: 700;
  /* .kk-scene3__card has a hardcoded #fff background regardless of site
     theme -- see the matching comment on .kk-scene2__receipt-label. */
  color: #2A2A2A;
  line-height: 1.1;
}
.kk-scene3__sub {
  font-size: 10px;
  color: #6B6B6B;
}
.kk-scene3__balance {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: #2A2A2A;
  letter-spacing: -0.02em;
  margin-block-start: 8px;
}
.kk-scene3__credit {
  grid-column: 1 / -1;
  font-size: 11px;
  color: #6FA831;
  font-weight: 700;
  margin-block-start: 2px;
}
.kk-scene3__badge {
  position: absolute;
  top: 50%; inset-inline-end: 140px;
  transform: translateY(-50%);
  z-index: 2;
  width: 110px; height: 110px;
  border-radius: 30px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.35);
}
.kk-scene3__badge img {
  width: 70px; height: 70px;
  object-fit: contain;
}
.kk-scene3__chip {
  position: absolute;
  /* Fixed, not --kk-butter -- see .kk-scene2__tag above for why. */
  background: #FFF1B8;
  border: 2px solid var(--kk-charcoal);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--kk-charcoal);
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.3);
}
.kk-scene3__chip--top {
  top: 30px; inset-inline-end: 70px;
  transform: rotate(8deg);
}
.kk-scene3__chip--btm {
  bottom: 16px; inset-inline-end: 220px;
  background: #CDEFD9; /* fixed, not --kk-mint -- see .kk-scene2__tag above */
  transform: rotate(-6deg);
}
.kk-scene3__arrows {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ── Dot indicators ── */
.kk-hero__indicator-row {
  position: absolute;
  bottom: 24px;
  inset-inline-start: 64px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.kk-hero__dot {
  width: 10px; height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width var(--transition-base), background var(--transition-base);
}
.kk-hero__dot--active {
  width: 32px;
  background: #fff;
}

/* ── Prev / pause / next controls ── */
.kk-hero__controls {
  position: absolute;
  bottom: 24px;
  inset-inline-end: 24px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.kk-hero__ctrl {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: filter var(--transition-fast);
}
.kk-hero__ctrl:hover { filter: brightness(1.15); }

/* ── Nav (PBI-05) ─────────────────────────────────────────────
   Two-row sticky nav:
   Row 1 — logo · search · invite pill
   Row 2 — section links (Home / Stores / Coupons …)
   Glass: rgba(255,255,255,0.7) + blur(10px). Stacks below TopBar.
   ─────────────────────────────────────────────────────────── */
:root {
  --kk-topbar-h: 63px; /* actual rendered height of .kk-topbar -- keep in sync or .kk-nav's sticky top overlaps it once both are pinned */
}

.kk-nav {
  position: sticky;
  top: var(--kk-topbar-h);
  z-index: 20;
  background: var(--kk-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--kk-line);
  padding-block-start: 18px;
}

/* ── Row shared ── */
.kk-nav__row {
  display: flex;
  align-items: center;
}

/* ── Row 1 ── */
.kk-nav__row--top {
  gap: 28px;
  padding-block-end: 14px;
}

.kk-nav__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.kk-nav__icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.kk-nav__wordmark {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--kk-ink);
  line-height: 1;
}

.kk-nav__search {
  flex: 1;
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--kk-paper);
  border: var(--card-border);
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  color: var(--kk-ink-soft);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.kk-nav__search:focus-within {
  border-color: var(--kk-purple);
  box-shadow: 0 0 0 3px var(--kk-purple-soft);
}

.kk-nav__search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--kk-ink);
  background: transparent;
  min-width: 0;
}

.kk-nav__search-input::placeholder {
  color: var(--kk-ink-soft);
}

.kk-nav__invite {
  flex-shrink: 0;
  font-size: var(--text-sm);
}

/* ── Row 2 ── */
.kk-nav__row--links {
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}

.kk-nav__row--links::-webkit-scrollbar {
  display: none;
}

.kk-nav__link {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--kk-ink);
  padding-block-end: 12px;
  white-space: nowrap;
  border-block-end: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}

.kk-nav__link:hover {
  color: var(--kk-purple);
}

.kk-nav__link--active {
  color: var(--kk-purple);
  font-weight: 600;
  border-block-end-color: var(--kk-purple);
}

/* ── Categories (PBI-07) ──────────────────────────────────────
   5-column × 2-row tile grid. Each tile has a --cat-bg CSS var
   set inline for background tint, flat SVG icon, label + meta.
   ─────────────────────────────────────────────────────────── */
.kk-categories {
  background: var(--kk-paper);
}

.kk-cat__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.kk-cat__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 12px 18px;
  background: var(--cat-bg, #F5F5F5);
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.kk-cat__tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.kk-cat__icon-wrap {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kk-cat__label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--kk-ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Category icon PNGs are dark line-art drawn for light tile grounds —
   invert them in dark mode so they don't go near-invisible on the now-dark
   tile backgrounds. Soften the label too: full-bright --kk-ink reads as
   glary bold-white against these muted chips. */
[data-theme="dark"] .kk-cat__icon-wrap img {
  filter: invert(1);
}
[data-theme="dark"] .kk-cat__label {
  color: rgba(244, 242, 249, 0.85);
}

.kk-cat__meta {
  font-size: 11px;
  color: var(--kk-ink-soft);
  margin-block-start: -4px;
}

/* ── Hot Deals (PBI-08) ───────────────────────────────────────
   5 gradient cards, one per palette (0–4), defined in :root.
   Palette 3 (amber/jamalon) is light so text flips to dark.
   ─────────────────────────────────────────────────────────── */
.kk-deals__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.kk-deal-card {
  border-radius: var(--radius-card-lg);
  display: flex;
  flex-direction: column;
  min-height: 260px;
  position: relative;
  overflow: hidden;
}

/* In light mode, a white logo panel against the page's own near-white background
   (--kk-line is very close to --kk-bg there) leaves these cards' edges barely
   visible, so the white panel reads as just floating on the page instead of
   looking like part of a card. Thicker, higher-contrast, light-mode-only border
   for every card that has one of these white logo panels. Dark mode already has
   enough contrast (paper-raised cards on a much darker page) and isn't touched. */
:root:not([data-theme="dark"]) .kk-deal-card,
:root:not([data-theme="dark"]) .kk-rec-card,
:root:not([data-theme="dark"]) .kk-stores__featured,
:root:not([data-theme="dark"]) .kk-coupon-grid .kk-coupon-card,
:root:not([data-theme="dark"]) .kk-coupon-tile {
  border: 1.5px solid rgba(0, 0, 0, 0.14);
}

/* Full-width white panel for the logo, matching Exclusive Coupons -- padding
   moves from .kk-deal-card itself to .kk-deal-card__body so this panel can
   sit flush with the card's edges. */
.kk-deal-card__logo-panel {
  background: #FFFFFF;
  /* Fixed height (not content-driven padding) so every card in the row gets
     an identical white panel regardless of that store's logo's own aspect
     ratio -- a short/wide logo was otherwise leaving a visibly shorter panel
     than a taller one next to it. */
  height: 92px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kk-deal-card__logo-img {
  max-height: 48px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

.kk-deal-card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.kk-deal-card--0 { background: var(--deal-0-bg); }
.kk-deal-card--1 { background: var(--deal-1-bg); }
.kk-deal-card--2 { background: var(--deal-2-bg); }
.kk-deal-card--3 { background: var(--deal-3-bg); }
.kk-deal-card--4 { background: var(--deal-4-bg); }

.kk-deal-card__chip {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-block-end: 10px;
}

.kk-deal-card--0 .kk-deal-card__chip { background: var(--deal-0-chip-bg); color: var(--deal-0-chip-fg); }
.kk-deal-card--1 .kk-deal-card__chip { background: var(--deal-1-chip-bg); color: var(--deal-1-chip-fg); }
.kk-deal-card--2 .kk-deal-card__chip { background: var(--deal-2-chip-bg); color: var(--deal-2-chip-fg); }
.kk-deal-card--3 .kk-deal-card__chip { background: var(--deal-3-chip-bg); color: var(--deal-3-chip-fg); }
.kk-deal-card--4 .kk-deal-card__chip { background: var(--deal-4-chip-bg); color: var(--deal-4-chip-fg); }

.kk-deal-card__mark {
  margin-block-end: auto;
}

.kk-deal-card__rate-wrap {
  /* auto -- pins rate/CTA to the bottom of .kk-deal-card__body regardless of
     whether .kk-deal-card__mark (fallback text, no logo) is present above it */
  margin-block-start: auto;
}

.kk-deal-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: rgba(255, 255, 255, 0.72);
  margin-block-end: 2px;
}

.kk-deal-card--3 .kk-deal-card__label { color: rgba(0, 0, 0, 0.5); }

.kk-deal-card__rate {
  font-family: var(--font-display);
  font-size: var(--text-rate);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
}

.kk-deal-card--3 .kk-deal-card__rate { color: var(--kk-charcoal); }

.kk-deal-card__pct { font-size: 32px; font-weight: 700; }

.kk-deal-card__sub {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.7);
  margin-block-start: 4px;
}

.kk-deal-card--3 .kk-deal-card__sub { color: rgba(0, 0, 0, 0.5); }

.kk-deal-card__cta {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin-block-start: 18px;
  transition: color var(--transition-fast);
}

.kk-deal-card--3 .kk-deal-card__cta { color: rgba(0, 0, 0, 0.65); }
.kk-deal-card__cta:hover { color: #fff; }
.kk-deal-card--3 .kk-deal-card__cta:hover { color: var(--kk-charcoal); }

/* ── Stores (PBI-09) ──────────────────────────────────────────
   Top row: featured banner (2fr) + 10-card grid (5fr).
   Second row: 6-card full-width grid.
   ─────────────────────────────────────────────────────────── */
/* Every card in this section uses the same "big card" treatment now (per
   explicit request) -- background is set inline per-card from a cycling
   palette (see _Stores.cshtml), so .kk-stores__featured's own background
   below is just a fallback. */
.kk-stores__big-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.kk-stores__featured {
  background: linear-gradient(160deg, #6E5DDA 0%, #5345B5 100%);
  border-radius: var(--radius-card-lg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 300px;
}

/* Full-width white panel for the logo, matching Exclusive Coupons -- padding
   moves from .kk-stores__featured itself to .kk-stores__featured-body so this
   panel can sit flush with the card's edges (above the decorative blob, which
   stays full-bleed underneath via position:absolute). */
.kk-stores__featured-logo-panel {
  background: #FFFFFF;
  /* Fixed height (not content-driven padding) -- see .kk-rec-card__logo-panel */
  height: 84px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.kk-stores__featured-logo-img {
  max-height: 44px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.kk-stores__featured-body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.kk-stores__featured-blob {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 110% 5%, rgba(255,255,255,0.14), transparent 60%);
  pointer-events: none;
}

.kk-stores__featured-mark { margin-block-end: 12px; }

.kk-stores__featured-rate {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
}

.kk-stores__featured-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  margin-block-start: 4px;
}

.kk-stores__sort {
  -webkit-appearance: none;
  appearance: none;
  background: var(--kk-paper);
  border: var(--card-border);
  border-radius: var(--radius-pill);
  padding: var(--btn-py-sm) var(--btn-px-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--kk-ink);
  cursor: pointer;
}

/* ── Coupons (PBI-10) ─────────────────────────────────────────
   3-column grid. Accent strip (6px) at card top. Dashed code
   box with JS copy button that flips to .kk-copied state.
   ─────────────────────────────────────────────────────────── */
.kk-coupons {
  background: var(--kk-paper);
}

.kk-coupon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Scoped to .kk-coupon-grid (not bare .kk-coupon-card): _CouponCardItem.cshtml
   (the Store Detail page's coupon list) reuses the literal class name
   "kk-coupon-card" for an unrelated layout, with its own background/border
   rule later in this file -- same specificity, later in source order, so it
   was silently winning over this block and undoing every color change here. */
.kk-coupon-grid .kk-coupon-card {
  border-radius: var(--radius-card);
  border: var(--card-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* This section (.kk-section--paper) uses --kk-paper as ITS OWN background,
     so the card must use a different token or it's invisible against its
     own section. --kk-paper-raised handles both directions: a touch darker
     than paper in light mode, a touch lighter in dark mode -- so the card
     reads as raised off the section in both themes instead of sunken. */
  background: var(--kk-paper-raised);
}

/* --kk-line is darker than --kk-paper-raised in dark mode now, so the
   shared --card-border would blend into the card instead of edging it.
   A light hairline gives it a crisp, deliberate edge instead. */
[data-theme="dark"] .kk-coupon-grid .kk-coupon-card {
  border-color: rgba(255, 255, 255, 0.08);
}

.kk-coupon-card__strip {
  height: 6px;
  flex-shrink: 0;
}

/* Store logos are arbitrary external assets -- many are dark marks on a
   transparent background, illegible on a colored card in either theme.
   A plain white panel behind just the logo (not the whole card) guarantees
   every logo stays legible, deliberately the same in light and dark mode. */
.kk-coupon-card__logo-panel {
  background: #FFFFFF;
  /* Fixed height (not content-driven padding) so an empty placeholder panel
     (no logo) renders the same size as one with a logo image inside. */
  height: 68px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kk-coupon-card__logo-img {
  max-height: 32px;
  max-width: 70%;
  width: auto;
  object-fit: contain;
  display: block;
}

.kk-coupon-card__body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kk-coupon-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kk-coupon-card__chip {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.kk-coupon-card__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--kk-ink);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}

.kk-coupon-card__code-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px dashed var(--kk-line);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}

.kk-coupon-card__code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--kk-ink);
}

.kk-coupon-card__copy-btn {
  flex-shrink: 0;
  background: var(--kk-purple-soft);
  color: var(--kk-purple-dark);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.kk-coupon-card__copy-btn:hover { filter: brightness(0.92); }

.kk-coupon-card__copy-btn.kk-copied {
  background: var(--kk-green-soft);
  color: var(--kk-green-dark);
}

.kk-coupon-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-start: auto;
}

.kk-coupon-card__expires {
  font-size: var(--text-xs);
  color: var(--kk-ink-soft);
}

.kk-coupon-card__rate {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--kk-green-dark);
  letter-spacing: -0.02em;
}

/* ── How It Works (PBI-11) ────────────────────────────────────
   4 steps in equal columns with a dotted connector between icons.
   Number badge sits top-right of each icon box.
   ─────────────────────────────────────────────────────────── */
.kk-how__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  padding-block-start: 12px;
}

.kk-how__steps::before {
  content: '';
  position: absolute;
  top: 52px;
  left: calc(12.5% + 24px);
  right: calc(12.5% + 24px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--kk-purple) 0, var(--kk-purple) 6px, transparent 6px, transparent 14px);
  opacity: 0.2;
}

.kk-how__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: 20px;
  position: relative;
  z-index: 1;
}

.kk-how__step-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-step);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: 22px;
  position: relative;
  flex-shrink: 0;
}

.kk-how__step-num {
  position: absolute;
  top: -8px;
  inset-inline-end: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--kk-purple);
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--kk-paper);
}

.kk-how__step-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--kk-ink);
  margin-block-end: 8px;
  letter-spacing: -0.02em;
}

.kk-how__step-body {
  font-size: 13px;
  color: var(--kk-ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* ── Extension Banner (PBI-12) ────────────────────────────────
   Full-width navy panel with gradient blobs.
   Left: copy + CTA. Right: browser SVG mockup.
   ─────────────────────────────────────────────────────────── */
.kk-ext-section {
  background: var(--kk-bg);
}

.kk-ext__panel {
  background: var(--kk-navy);
  border-radius: var(--radius-panel);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 60px 64px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.kk-ext__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px at -10% 110%, rgba(110,93,218,0.3), transparent 55%),
    radial-gradient(500px at 110% -20%, rgba(111,168,49,0.08), transparent 55%);
  pointer-events: none;
}

/* ── Recommended (PBI-13) ─────────────────────────────────────
   4 gradient cards using --rec-N-bg palettes.
   Palette 2 (amber) is light, so text flips to dark.
   ─────────────────────────────────────────────────────────── */
.kk-rec__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.kk-rec-card {
  border-radius: var(--radius-card-lg);
  display: flex;
  flex-direction: column;
  min-height: 220px;
  position: relative;
  overflow: hidden;
}

/* Full-width white panel for the logo, matching Exclusive Coupons -- padding
   moves from .kk-rec-card itself to .kk-rec-card__body so this panel can sit
   flush with the card's edges. */
.kk-rec-card__logo-panel {
  background: #FFFFFF;
  /* Fixed height (not content-driven padding) so every card in the row gets
     an identical white panel regardless of that store's logo's own aspect
     ratio -- a short/wide logo was otherwise leaving a visibly shorter panel
     than a taller one next to it. */
  height: 92px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kk-rec-card__logo-img {
  max-height: 48px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

.kk-rec-card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.kk-rec-card--0 { background: var(--rec-0-bg); }
.kk-rec-card--1 { background: var(--rec-1-bg); }
.kk-rec-card--2 { background: var(--rec-2-bg); }
.kk-rec-card--3 { background: var(--rec-3-bg); }

.kk-rec-card__chip {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-block-end: 10px;
  background: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.9);
}

.kk-rec-card--2 .kk-rec-card__chip {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}

.kk-rec-card__mark { margin-block-end: auto; }

/* auto -- pins rate/CTA to the bottom of .kk-rec-card__body regardless of
   whether the chip/.kk-rec-card__mark (fallback text, no logo) is present above it */
.kk-rec-card__rate-wrap { margin-block-start: auto; }

.kk-rec-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: rgba(255, 255, 255, 0.72);
  margin-block-end: 2px;
}

.kk-rec-card--2 .kk-rec-card__label { color: rgba(0, 0, 0, 0.5); }

.kk-rec-card__rate {
  font-family: var(--font-display);
  font-size: var(--text-rate);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
}

.kk-rec-card--2 .kk-rec-card__rate { color: var(--kk-charcoal); }

.kk-rec-card__pct { font-size: 32px; font-weight: 700; }

.kk-rec-card__sub {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.7);
  margin-block-start: 4px;
}

.kk-rec-card--2 .kk-rec-card__sub { color: rgba(0, 0, 0, 0.5); }

.kk-rec-card__cta {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin-block-start: 18px;
  transition: color var(--transition-fast);
}

.kk-rec-card--2 .kk-rec-card__cta { color: rgba(0, 0, 0, 0.65); }
.kk-rec-card__cta:hover { color: #fff; }
.kk-rec-card--2 .kk-rec-card__cta:hover { color: var(--kk-charcoal); }

/* ── Referral (PBI-14) ────────────────────────────────────────
   Purple-soft tinted panel, two columns.
   Left: offer copy + stat pair + share-link input.
   Right: illustrated SVG of two overlapping wallet cards.
   ─────────────────────────────────────────────────────────── */
.kk-ref__panel {
  background: var(--kk-purple-soft);
  border-radius: var(--radius-panel);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 60px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.kk-ref__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(500px at 110% 0%, rgba(110,93,218,0.14), transparent 55%),
    radial-gradient(400px at -10% 100%, rgba(110,93,218,0.08), transparent 55%);
  pointer-events: none;
}

.kk-ref__stats {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: var(--kk-paper);
  border-radius: var(--radius-card);
  border: var(--card-border);
  max-width: 340px;
}

.kk-ref__stat-value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  color: var(--kk-purple);
  letter-spacing: -0.04em;
  line-height: 1;
}

.kk-ref__stat-label {
  font-size: 12px;
  color: var(--kk-ink-soft);
  margin-block-start: 4px;
  max-width: 80px;
  line-height: 1.3;
}

.kk-ref__stat-divider {
  width: 1px;
  height: 44px;
  background: var(--kk-line);
  flex-shrink: 0;
}

.kk-ref__link-row {
  margin-block-start: 24px;
}

.kk-ref__link-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--kk-paper);
  border: var(--card-border);
  border-radius: var(--radius-pill);
  padding: 8px 8px 8px 20px;
  max-width: 380px;
}

.kk-ref__link-url {
  flex: 1;
  font-size: 13px;
  color: var(--kk-ink-soft);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── App CTA (PBI-15) ─────────────────────────────────────────
   Two columns: left copy + app store badges, right phone mockup.
   ─────────────────────────────────────────────────────────── */
.kk-app__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.kk-app__badges {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.kk-app__badge-img--apple  { height: 48px; }
.kk-app__badge-img--google { height: 50px; }

.kk-app__badge {
  display: inline-flex;
  border-radius: 9px;
  overflow: hidden;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.kk-app__badge:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.kk-app__visual {
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 28px 48px rgba(110,93,218,0.22));
}

/* ── Footer (PBI-16) ──────────────────────────────────────────
   Navy background. 4-column grid: brand (2fr) + 3 link cols.
   Bottom bar: copyright left, legal links right.
   ─────────────────────────────────────────────────────────── */
.kk-footer {
  background: var(--kk-navy);
  padding-block: 64px 36px;
}

.kk-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-block-end: 52px;
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

.kk-footer__logo-link {
  display: inline-block;
  margin-block-end: 16px;
}

.kk-footer__wordmark {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}

.kk-footer__kash {
  color: var(--kk-green-dark-on-dark);
}

.kk-footer__tagline {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.52);
  line-height: 1.65;
  margin-block-end: 24px;
  max-width: 280px;
}

.kk-footer__socials {
  display: flex;
  gap: 10px;
}

.kk-footer__social-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.kk-footer__social-btn:hover {
  opacity: 0.82;
}

/* X's mark is just the glyph itself -- white, no enclosing shape.
   Compound class selector so this beats .kk-page a { color: inherit }
   (0,2,0 vs 0,1,1) -- a single class alone loses that fight, which is
   why this only showed up as broken in light mode (inherit resolves to
   the light theme's dark ink color there). */
.kk-footer__social-btn.kk-footer__social-btn--x {
  color: #fff;
}

/* Instagram's white glyph needs the same specificity bump as X, for the
   same reason -- it's also an inline SVG using currentColor. */
.kk-footer__social-btn.kk-footer__social-btn--ig {
  color: #fff;
}

/* Facebook and LinkedIn are rendered from Meta's / LinkedIn's own official
   asset files, which already contain their complete mark (blue circle, blue
   "in" badge). No extra background/shape is added behind them -- just the
   logo, per brand usage rules. */

/* Footer email link */
.kk-footer .kk-footer__email-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  margin-block-end: 20px;
  transition: color var(--transition-fast);
}
.kk-footer .kk-footer__email-link:hover { color: #fff; }

/* Footer app store badges */
.kk-footer__apps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 20px;
}
.kk-footer__app-badge img {
  display: block;
  border-radius: 8px;
}
.kk-footer__app-badge--apple img  { height: 36px; }
.kk-footer__app-badge--google img { height: 38px; }

.kk-footer__col-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-block-end: 18px;
}

.kk-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.kk-footer__links a {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition-fast);
}

.kk-footer__links a:hover {
  color: #fff;
}

.kk-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block-start: 32px;
  gap: 16px;
  flex-wrap: wrap;
}

.kk-footer__copy {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.32);
}

.kk-footer__legal {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.kk-footer__legal a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.32);
  transition: color var(--transition-fast);
}

.kk-footer__legal a:hover {
  color: rgba(255, 255, 255, 0.65);
}

/* =============================================================
   Responsive breakpoints — desktop-first, three tiers:
     1024px  tablet
      640px  mobile
      400px  small mobile
   ============================================================= */

/* ── Shared spacing & type ─────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --container-pad: 24px;
    --section-py:    52px;
  }
}

@media (max-width: 640px) {
  :root {
    --container-pad: 16px;
    --section-py:    40px;
  }

  .kk-h2      { font-size: 26px; }
  .kk-h2--lg  { font-size: 30px; }

  .kk-section-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── TopBar ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .kk-topbar__brand-name { display: none; }
  .kk-topbar__divider    { display: none; }
  .kk-topbar__already    { display: none; }
}

/* ── Nav ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .kk-nav__search { max-width: 380px; }
}

@media (max-width: 640px) {
  .kk-nav__search    { display: none; }
  .kk-nav__invite    { display: none; }
  .kk-nav__row--top  { gap: 0; }
}

/* ── Hero ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .kk-hero__h1   { font-size: 48px; }
  .kk-hero__copy { padding: 48px; }
}

@media (max-width: 768px) {
  .kk-hero__card          { grid-template-columns: 1fr; }
  .kk-hero__copy          { padding: 40px 28px 64px; }
  .kk-hero__h1            { font-size: 40px; }
  .kk-hero__scene-wrap    { display: none; }
  .kk-hero__indicator-row { inset-inline-start: 28px; bottom: 20px; }
  .kk-hero__controls      { inset-inline-end: 16px; bottom: 20px; }
}

@media (max-width: 480px) {
  .kk-hero__h1   { font-size: 34px; }
  .kk-hero__body { font-size: 15px; }
  .kk-hero__copy { padding: 32px 20px 60px; }
  .kk-hero__cta-a,
  .kk-hero__cta-b { font-size: 13px; padding: 13px 20px; }
}

/* ── Categories ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .kk-cat__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kk-cat__tile { padding: 16px 8px 14px; }
}

/* ── Hot Deals → scroll row on tablet / mobile ─────────────── */
@media (max-width: 1024px) {
  .kk-deals__grid {
    grid-template-columns: repeat(5, clamp(180px, 44vw, 230px));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block-end: 8px;
  }
  .kk-deals__grid::-webkit-scrollbar { display: none; }
  .kk-deal-card { scroll-snap-align: start; flex-shrink: 0; }
}

/* ── Stores ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .kk-stores__big-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .kk-stores__big-grid  { grid-template-columns: 1fr; }
  .kk-stores__featured  { min-height: 220px; }
}

/* ── Coupons ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .kk-coupon-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .kk-coupon-grid { grid-template-columns: 1fr; }
}

/* ── How It Works ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .kk-how__steps         { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .kk-how__steps::before { display: none; }
}

@media (max-width: 480px) {
  .kk-how__steps { grid-template-columns: 1fr; gap: 28px; }
}

/* ── Extension Banner ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .kk-ext__panel  { grid-template-columns: 1fr; padding: 44px; }
  .kk-ext__visual { display: none; }
}

@media (max-width: 640px) {
  .kk-ext__panel { padding: 32px 28px; border-radius: var(--radius-card-lg); }
}

/* ── Recommended → scroll row on tablet / mobile ───────────── */
@media (max-width: 1024px) {
  .kk-rec__grid {
    grid-template-columns: repeat(4, clamp(180px, 44vw, 230px));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block-end: 8px;
  }
  .kk-rec__grid::-webkit-scrollbar { display: none; }
  .kk-rec-card { scroll-snap-align: start; flex-shrink: 0; }
}

/* ── Referral ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .kk-ref__panel  { grid-template-columns: 1fr; padding: 44px; }
  .kk-ref__visual { display: none; }
}

@media (max-width: 640px) {
  .kk-ref__panel        { padding: 32px 24px; border-radius: var(--radius-card-lg); }
  .kk-ref__stats        { flex-direction: column; gap: 12px; }
  .kk-ref__stat-divider { width: 100%; height: 1px; }
  .kk-ref__link-input   { max-width: none; }
}

/* ── App CTA ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .kk-app__grid   { grid-template-columns: 1fr; }
  .kk-app__visual { display: none; }
}

/* ── Footer ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .kk-footer__grid     { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
  .kk-footer__brand    { grid-column: 1 / -1; }
  .kk-footer__tagline  { max-width: none; }
}

@media (max-width: 640px) {
  .kk-footer           { padding-block: 48px 28px; }
  .kk-footer__grid     { grid-template-columns: 1fr 1fr; gap: 28px; }
  .kk-footer__bottom   { flex-direction: column; align-items: flex-start; gap: 12px; }
  .kk-footer__legal    { gap: 16px; }
}

@media (max-width: 400px) {
  .kk-footer__grid { grid-template-columns: 1fr; }
}

/* ── Search results page (PBI-SR1) ───────────────────────────
   /{culture}/search — stores section + coupons section.
   Cards are placeholder quality; full redesign in PBI-S1/C1.
   ─────────────────────────────────────────────────────────── */
.kk-search-page { padding-block: 48px 72px; }

.kk-search__header { margin-bottom: 32px; }
.kk-search__title  {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--ls-snug);
  color: var(--kk-ink);
  margin-bottom: 6px;
}
.kk-search__query  { color: var(--kk-purple); }
.kk-search__meta   { font-size: var(--text-sm); color: var(--kk-ink-soft); }

/* Search term highlight */
mark.kk-highlight {
  background: var(--kk-butter);
  color: var(--kk-ink);
  border-radius: 2px;
  padding: 0 2px;
  font-style: normal;
}

/* Category filter chips */
.kk-search__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}

.kk-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  background: var(--kk-paper);
  border: var(--card-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--kk-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.kk-filter-chip:hover    { background: var(--kk-surface); }
.kk-filter-chip--active  {
  background: var(--kk-purple);
  border-color: var(--kk-purple);
  color: #fff;
}

.kk-filter-chip--fav { gap: 6px; }
.kk-filter-chip__fav-icon { display: block; flex-shrink: 0; }

/* Section layout */
.kk-search__section      { margin-bottom: 52px; }
.kk-search__section-hd   {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: var(--card-border);
}
.kk-search__section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--kk-ink);
}
.kk-search__count {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--kk-ink-soft);
  margin-inline-start: 6px;
}
.kk-search__see-all {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--kk-purple);
  white-space: nowrap;
  text-decoration: none;
}
.kk-search__see-all:hover { text-decoration: underline; }

.kk-search__no-section {
  color: var(--kk-ink-soft);
  font-size: var(--text-sm);
  margin-bottom: 32px;
}

.kk-search__more {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* ── Store cards grid (placeholder — full design in PBI-S1) ── */
.kk-scard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.kk-scard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  background: var(--kk-paper);
  border: var(--card-border);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--kk-ink);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.kk-scard:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.kk-scard__logo-wrap {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kk-scard__logo {
  max-width: 100%;
  max-height: 52px;
  object-fit: contain;
}
.kk-scard__name {
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  color: var(--kk-ink);
}
.kk-scard__rate {
  font-size: var(--text-xs);
  color: var(--kk-green-dark);
  font-weight: 600;
  text-align: center;
}

/* ── Coupon cards list (placeholder — full design in PBI-C1) ── */
.kk-ccard__list { display: flex; flex-direction: column; gap: 12px; }

.kk-ccard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--kk-paper);
  border: var(--card-border);
  border-radius: var(--radius-card);
  flex-wrap: wrap;
}

.kk-ccard__logo {
  width: 48px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}
.kk-ccard__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.kk-ccard__store  { font-size: var(--text-xs); color: var(--kk-ink-soft); }
.kk-ccard__name   { font-size: var(--text-sm); font-weight: 600; color: var(--kk-ink); }
.kk-ccard__saving { font-size: var(--text-xs); color: var(--kk-green-dark); font-weight: 600; }

.kk-ccard__code-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.kk-ccard__code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 4px 10px;
  background: var(--kk-bg);
  border: var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--kk-ink);
  letter-spacing: 0.06em;
}

/* Badge */
.kk-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}
.kk-badge--exclusive {
  background: var(--kk-purple-soft);
  color: var(--kk-purple-dark);
}

/* ── Empty state ── */
.kk-search__empty {
  text-align: center;
  padding: 80px 16px;
  color: var(--kk-ink-soft);
}
.kk-search__empty-icon    { margin-bottom: 20px; color: var(--kk-line); }
.kk-search__empty-title   { font-size: var(--text-xl); font-weight: 700; color: var(--kk-ink); margin-bottom: 8px; }
.kk-search__empty-body    { font-size: var(--text-sm); margin-bottom: 28px; }
.kk-search__empty-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .kk-scard__grid { grid-template-columns: repeat(2, 1fr); }
  .kk-ccard       { flex-direction: column; align-items: flex-start; }
  .kk-ccard__code-wrap { width: 100%; justify-content: flex-start; }
  .kk-search__section-hd { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ── Hot Deals page (PBI-H1) ─────────────────────────────────
   /{culture}/hot-deals — editorial destination.
   ─────────────────────────────────────────────────────────── */

/* Page header */
.kk-hd-page { padding-bottom: 72px; }

.kk-hd-header {
  background: var(--kk-bg-gradient);
  padding-block: 40px 36px;
  margin-bottom: 36px;
}
.kk-hd-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.kk-hd-header__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  color: var(--kk-ink);
  margin-bottom: 6px;
}
.kk-hd-header__sub {
  font-size: var(--text-sm);
  color: var(--kk-ink-soft);
}

/* Sort bar */
.kk-hd-sort {
  display: flex;
  gap: 4px;
  background: var(--kk-paper);
  border: var(--card-border);
  border-radius: var(--radius-pill);
  padding: 4px;
  flex-shrink: 0;
}
.kk-hd-sort__opt {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--kk-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.kk-hd-sort__opt:hover         { color: var(--kk-ink); background: var(--kk-surface); }
.kk-hd-sort__opt--active       { background: var(--kk-purple); color: #fff; }

/* ── Deal badges ── */
.kk-hd-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}
.kk-hd-badge--exclusive { background: var(--kk-purple-soft); color: var(--kk-purple-dark); }
.kk-hd-badge--stacked   { background: var(--kk-mint);        color: #1a5c35; }
.kk-hd-badge--boosted   { background: var(--kk-butter);      color: #7a5500; }
.kk-hd-badge--flash     { background: var(--kk-peach);       color: #8b2a00; }
.kk-hd-badge--deal      { background: var(--kk-bg);          color: var(--kk-ink-soft); border: var(--card-border); }

/* Product-specific label */
.kk-hd-product-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--kk-purple);
  background: var(--kk-purple-soft);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.kk-hd-product-label::before { content: "🛍"; font-size: 10px; }

/* ── Hero — Deal of the Day ──
   Constrained to a max-width instead of stretching across the full container
   -- at full bleed this card's actual content (a logo, a line of text, a
   rate) left most of the row as plain empty background. Sized and spaced
   like a prominent card instead, with a bigger logo treatment to match. */
.kk-hd-hero {
  max-width: 620px;
  background: var(--kk-paper);
  border: var(--card-border);
  border-radius: var(--radius-panel);
  margin-bottom: 32px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* Full-width white panel, same idea as the deal/coupon cards below it on this
   page -- a small inline logo read as an afterthought next to the heading;
   its own dedicated band gives the store mark the same weight those cards
   give theirs. */
.kk-hd-hero__logo-panel {
  background: #fff;
  padding: 28px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kk-hd-hero__logo {
  max-width: 220px;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.kk-hd-hero__body { display: grid; gap: 10px; padding: 28px 36px 32px; }
.kk-hd-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--kk-ink-soft);
}
.kk-hd-hero__store-name { font-size: var(--text-base); font-weight: 600; color: var(--kk-ink-soft); }
.kk-hd-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--kk-ink);
  letter-spacing: var(--ls-snug);
}
.kk-hd-hero__desc   { font-size: var(--text-sm); color: var(--kk-ink-soft); }
.kk-hd-hero__saving { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kk-hd-hero__rate   { font-size: var(--text-xl); font-weight: 800; color: var(--kk-green-dark); }
.kk-hd-hero__extra  { font-size: var(--text-sm); font-weight: 600; color: var(--kk-purple); }

.kk-hd-hero__countdown-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
}
.kk-hd-hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Countdown */
.kk-hd-countdown__label { font-size: var(--text-xs); color: var(--kk-ink-soft); }
.kk-countdown {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--kk-ink);
  background: var(--kk-bg);
  border: var(--card-border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  display: inline-block;
}
.kk-countdown--urgent { color: #8b2a00; background: var(--kk-peach); border-color: transparent; }
.kk-countdown--expired { color: var(--kk-ink-very); text-decoration: line-through; }

/* Code wrap */
.kk-hd-code-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kk-hd-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: 6px 14px;
  background: var(--kk-bg);
  border: var(--card-border);
  border-radius: var(--radius-sm);
  letter-spacing: 0.08em;
  color: var(--kk-ink);
}

/* ── Expiring today strip ── */
.kk-hd-urgent {
  background: var(--kk-paper);
  border: 1px solid var(--kk-peach);
  border-radius: var(--radius-card-lg);
  padding: 24px;
  margin-bottom: 40px;
}
.kk-hd-urgent__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: #8b2a00;
  margin-bottom: 18px;
}

/* ── Deals grid -- cards reuse .kk-coupon-tile (see the Coupons listing page
   rules below); only the grid wrapper and an urgent-strip accent live here. ── */
.kk-coupon-tile__list--compact {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.kk-coupon-tile--urgent { border-color: var(--kk-peach); }

.kk-coupon-tile__countdown-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Main section header ── */
.kk-hd-main__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--kk-ink);
  margin-bottom: 20px;
}

/* ── Empty state ── */
.kk-hd-empty {
  text-align: center;
  padding: 80px 16px;
  color: var(--kk-ink-soft);
}
.kk-hd-empty__icon    { font-size: 52px; display: block; margin-bottom: 16px; }
.kk-hd-empty__title   { font-size: var(--text-xl); font-weight: 700; color: var(--kk-ink); margin-bottom: 8px; }
.kk-hd-empty__body    { font-size: var(--text-sm); margin-bottom: 28px; }
.kk-hd-empty__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .kk-hd-header__inner  { flex-direction: column; gap: 16px; }
  .kk-hd-hero           { padding: 24px 20px; }
  .kk-hd-hero__title    { font-size: var(--text-xl); }
  .kk-coupon-tile__list--compact { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 480px) {
  .kk-coupon-tile__list--compact { grid-template-columns: 1fr; }
  .kk-hd-sort           { flex-wrap: wrap; border-radius: var(--radius-card); }
}

/* ── Stores page (PBI-S1) ────────────────────────────────────
   /{culture}/stores — full store directory with filters.
   ─────────────────────────────────────────────────────────── */

.kk-stores-page { padding-bottom: 72px; }

/* Page header */
.kk-stores__header {
  background: var(--kk-bg-gradient);
  padding-block: 40px 36px;
  margin-bottom: 0;
}
.kk-stores__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  color: var(--kk-ink);
  margin-bottom: 6px;
}
.kk-stores__subtitle { font-size: var(--text-sm); color: var(--kk-ink-soft); }

/* Filter bar */
.kk-stores__filters {
  padding-block: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-bottom: var(--card-border);
  margin-bottom: 32px;
}
.kk-stores__filter-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.kk-stores__filter-group--sort { margin-inline-start: auto; }
.kk-stores__filter-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--kk-ink-soft);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  white-space: nowrap;
  flex-shrink: 0;
}
.kk-stores__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.kk-stores__chips::-webkit-scrollbar { display: none; }

/* Count summary */
.kk-stores__count {
  font-size: var(--text-sm);
  color: var(--kk-ink-soft);
  margin-bottom: 20px;
}

/* ── kk-store-card ── */
/* Store cards now reuse the .kk-deal-card visual system (white logo panel,
   colored body, big rate) from "This week's rate hikes" -- these rules add
   only what that system doesn't already have: the boosted ribbon, the
   favourite toggle, and the store-name text sitting above the rate. */
.kk-store-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 40px;
}

.kk-store-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.kk-deal-card--3 .kk-store-card__name { color: var(--kk-charcoal); }

/* Boosted ribbon */
.kk-store-card__ribbon {
  /* Moved to the opposite corner from the favourite heart so the two never
     overlap on a card that's both boosted and favouritable. */
  position: absolute;
  top: 10px;
  inset-inline-start: -22px;
  background: var(--kk-butter);
  color: #7a5500;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px 10px 2px 28px;
  transform: rotate(-35deg);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

/* Favourite heart -- a real outline/filled SVG heart instead of the Unicode
   ♡/♥ glyphs, which render with wildly inconsistent weight and crop badly
   across fonts/platforms. No badge backdrop, so a drop-shadow keeps the
   white outline readable whether it lands on the card's colored body or on
   its white logo panel (the icon sits at a fixed corner of the whole card,
   so it can land on either depending on the card's content). */
.kk-store-card__fav {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));
  transition: transform var(--transition-fast);
}
.kk-store-card__fav:hover { transform: scale(1.1); }
.kk-store-card__fav-icon  { display: block; width: 21px; height: 21px; }

.kk-store-card__fav--active {
  color: #e0245e;
}
.kk-store-card__fav--active .kk-store-card__fav-icon { fill: currentColor; }

/* ── Empty state ── */
.kk-stores__empty {
  text-align: center;
  padding: 72px 16px;
  color: var(--kk-ink-soft);
}
.kk-stores__empty svg    { margin-bottom: 16px; color: var(--kk-line); }
.kk-stores__empty-title  { font-size: var(--text-xl); font-weight: 700; color: var(--kk-ink); margin-bottom: 8px; }
.kk-stores__empty-body   { font-size: var(--text-sm); margin-bottom: 20px; }

/* ── Pagination ── */
.kk-stores__pager {
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.kk-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  background: var(--kk-paper);
  border: var(--card-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--kk-ink);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.kk-pager__btn:hover       { background: var(--kk-surface); }
.kk-pager__btn--active     { background: var(--kk-purple); border-color: var(--kk-purple); color: #fff; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .kk-stores__filter-group--sort { margin-inline-start: 0; }
  .kk-store-card__grid  { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .kk-stores__filters   { gap: 12px; }
}
@media (max-width: 400px) {
  .kk-store-card__grid  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ════════════════════════════════════════════════
   Store Detail page  (PBI-S2)
   ════════════════════════════════════════════════ */

.kk-detail-page { padding-block: 32px 64px; }

/* Breadcrumb */
.kk-detail__breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--kk-muted);
  margin-bottom: 20px;
}
.kk-detail__breadcrumb a { color: var(--kk-muted); text-decoration: none; }
.kk-detail__breadcrumb a:hover { color: var(--kk-ink); }

/* Hot-deal banner */
.kk-detail__hot-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--kk-butter, #fff8e1);
  border: 1px solid #f5c518;
  border-radius: var(--radius-card);
  font-size: var(--text-sm);
  margin-bottom: 20px;
}

/* Store header */
.kk-detail__header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px;
  background: var(--kk-paper);
  border: var(--card-border);
  border-radius: var(--radius-card);
  margin-bottom: 24px;
}
.kk-detail__logo-wrap {
  flex-shrink: 0;
  width: 96px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 8px;
}
.kk-detail__logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.kk-detail__meta { flex: 1; min-width: 0; }
.kk-detail__store-name { font-size: var(--text-xl); font-weight: 700; margin: 0 0 8px; }
.kk-detail__rate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.kk-detail__rate      { font-size: var(--text-lg); font-weight: 700; color: var(--kk-green, #1a7f4b); }
.kk-detail__rate-old  { font-size: var(--text-sm); color: var(--kk-muted); text-decoration: line-through; }
.kk-detail__best-saving {
  font-size: var(--text-sm);
  color: var(--kk-muted);
  margin-bottom: 16px;
}
.kk-detail__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.kk-detail__fav--active { color: var(--kk-red, #e53935); border-color: var(--kk-red, #e53935); }
.kk-detail__fav-icon {
  display: inline-flex;
  margin-inline-end: 4px;
}
.kk-detail__fav--active .kk-detail__fav-icon svg { fill: currentColor; }

/* How to earn KashBack */
.kk-detail__how-wrap {
  padding: 20px 24px;
  background: var(--kk-paper);
  border: var(--card-border);
  border-radius: var(--radius-card);
  margin-bottom: 24px;
}
.kk-detail__how-summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-base);
}
.kk-detail__how-summary::-webkit-details-marker { display: none; }
.kk-detail__how-steps { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; }
.kk-detail__step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 160px;
}
.kk-detail__step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--kk-purple);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kk-detail__step-text { font-size: var(--text-sm); color: var(--kk-muted); padding-top: 4px; }

/* Coupons section */
.kk-detail__coupons  { margin-bottom: 32px; }
.kk-detail__section-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Coupon card — redesigned layout (used in _CouponCardItem.cshtml) */
.kk-coupon-card__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.kk-coupon-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--kk-paper);
  border: var(--card-border);
  border-radius: var(--radius-card);
  transition: box-shadow var(--transition-fast);
}
.kk-coupon-card:hover        { box-shadow: var(--shadow-card); }
.kk-coupon-card--exclusive   { border-color: var(--kk-purple); }
.kk-coupon-card--product     { border-inline-start: 3px solid var(--kk-butter, #f5c518); }

.kk-coupon-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
/* White background so an arbitrary store logo stays legible against this
   card's own themed background, same as the homepage cards. */
.kk-coupon-card__logo {
  flex-shrink: 0;
  width: 44px;
  height: 30px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 3px;
}
.kk-coupon-card__head-text { flex: 1; min-width: 0; }
.kk-coupon-card__store     { display: block; font-weight: 600; font-size: var(--text-base); }
.kk-coupon-card__name      { display: block; font-size: var(--text-sm); color: var(--kk-muted); margin-top: 2px; }
.kk-coupon-card__head-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-shrink: 0;
}

/* badges row in Detail coupons (no logo) */
.kk-coupon-card__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.kk-coupon-card__saving-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.kk-coupon-card__rate     { font-weight: 700; color: var(--kk-green, #1a7f4b); font-size: var(--text-base); }
.kk-coupon-card__extra    { font-size: var(--text-sm); color: var(--kk-muted); }
.kk-coupon-card__combined { font-size: var(--text-sm); font-weight: 600; color: var(--kk-purple); }

.kk-coupon-card__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
}
.kk-coupon-card__code-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kk-coupon-card__expiry         { font-size: var(--text-xs); color: var(--kk-muted); }
.kk-coupon-card__expiry--urgent { color: var(--kk-red, #e53935); font-weight: 600; }

.kk-coupon-card__terms { margin-top: 4px; }
.kk-coupon-card__terms-toggle {
  font-size: var(--text-xs);
  color: var(--kk-muted);
  cursor: pointer;
  list-style: none;
}
.kk-coupon-card__terms-toggle::-webkit-details-marker { display: none; }
.kk-coupon-card__terms-body  { font-size: var(--text-xs); color: var(--kk-muted); margin-top: 6px; line-height: 1.5; }

/* Coupon sections (exclusive strip) */
.kk-coupon-section           { margin-bottom: 32px; }
.kk-coupon-section__title    { font-size: var(--text-base); font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.kk-coupon-section__title--sub { margin-top: 32px; }

/* Coupon listing page (/en/coupons) cards -- same visual language as the
   homepage's Exclusive Coupons cards (accent strip, white logo panel, dashed
   code box) but under its own "kk-coupon-tile" class family rather than the
   bare "kk-coupon-card" names above, which Stores/Detail.cshtml still reuses
   inline for its own, differently-styled coupon list. Reusing the same names
   here would silently restyle that page too. */
.kk-coupon-tile__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.kk-coupon-tile {
  border-radius: var(--radius-card);
  border: var(--card-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--kk-paper-raised);
  transition: box-shadow var(--transition-fast);
}
.kk-coupon-tile:hover        { box-shadow: var(--shadow-card); }
.kk-coupon-tile--exclusive   { border-color: var(--kk-purple); }
.kk-coupon-tile--product     { border-inline-start: 3px solid var(--kk-butter, #f5c518); }

[data-theme="dark"] .kk-coupon-tile {
  border-color: rgba(255, 255, 255, 0.08);
}

.kk-coupon-tile__strip { height: 6px; flex-shrink: 0; }

.kk-coupon-tile__logo-panel {
  background: #FFFFFF;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* In light mode the body below is near-white too (--kk-paper-raised is
     --kk-bg there), so this panel otherwise blends into it with no visible
     seam; the line is subtle enough to stay unobtrusive in dark mode, where
     the contrast against the dark body already reads the panel clearly. */
  border-bottom: 1px solid var(--kk-line);
}
.kk-coupon-tile__logo-img {
  max-height: 32px;
  max-width: 70%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Text-mark stand-in for stores with no logo image, so every card in a row
   keeps the same white-panel band instead of the no-logo ones starting flush
   with colored body content while their siblings have a logo up top. */
.kk-coupon-tile__logo-fallback {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--kk-charcoal);
  text-align: center;
}

.kk-coupon-tile__body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kk-coupon-tile__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.kk-coupon-tile__store { font-weight: 600; font-size: var(--text-base); }
.kk-coupon-tile__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

.kk-coupon-tile__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--kk-ink);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}

.kk-coupon-tile__saving-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.kk-coupon-tile__rate     { font-weight: 700; color: var(--kk-green, #1a7f4b); font-size: var(--text-base); }
.kk-coupon-tile__extra    { font-size: var(--text-sm); color: var(--kk-muted); }
.kk-coupon-tile__combined { font-size: var(--text-sm); font-weight: 600; color: var(--kk-purple); }
.kk-coupon-tile__saving-detail { font-size: var(--text-sm); color: var(--kk-muted); margin: 0; }

.kk-coupon-tile__code-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px dashed var(--kk-line);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}
.kk-coupon-tile__code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--kk-ink);
}
.kk-coupon-tile__copy-btn {
  flex-shrink: 0;
  background: var(--kk-purple-soft);
  color: var(--kk-purple-dark);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.kk-coupon-tile__copy-btn:hover { filter: brightness(0.92); }
.kk-coupon-tile__copy-btn.kk-copied {
  background: var(--kk-green-soft);
  color: var(--kk-green-dark);
}

.kk-coupon-tile__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-block-start: auto;
}
.kk-coupon-tile__expires         { font-size: var(--text-xs); color: var(--kk-ink-soft); }
.kk-coupon-tile__expires--urgent { color: var(--kk-red, #e53935); font-weight: 600; }

/* _CouponCardItem.cshtml's activate button: a full-bleed bar flush to the
   card's bottom edge, mirroring the logo panel's edge-to-edge treatment at
   the top, rather than an inset pill -- so it's a fixed landing spot in the
   same place on every card. border-radius: 0 relies on .kk-coupon-tile's own
   overflow: hidden + border-radius to clip just the bottom two corners. */
.kk-coupon-tile__cta {
  width: 100%;
  justify-content: center;
  border-radius: 0;
  padding: 14px 20px;
}

.kk-coupon-tile__terms { margin-top: 4px; }
.kk-coupon-tile__terms-toggle {
  font-size: var(--text-xs);
  color: var(--kk-muted);
  cursor: pointer;
  list-style: none;
}
.kk-coupon-tile__terms-toggle::-webkit-details-marker { display: none; }
.kk-coupon-tile__terms-body { font-size: var(--text-xs); color: var(--kk-muted); margin-top: 6px; line-height: 1.5; }

/* About / terms collapsible */
.kk-detail__about-wrap       { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.kk-detail__collapsible      { padding: 16px 20px; background: var(--kk-paper); border: var(--card-border); border-radius: var(--radius-card); }
.kk-detail__collapsible-summary { font-weight: 600; cursor: pointer; list-style: none; }
.kk-detail__collapsible-summary::-webkit-details-marker { display: none; }
.kk-detail__collapsible-body { font-size: var(--text-sm); color: var(--kk-muted); margin-top: 10px; line-height: 1.6; }

/* ── Similar stores strip (S2-9) ── */
.kk-detail__similar { margin-top: 40px; }

.kk-similar-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--kk-border, #e2e8f0) transparent;
}
.kk-similar-strip::-webkit-scrollbar       { height: 4px; }
.kk-similar-strip::-webkit-scrollbar-track { background: transparent; }
.kk-similar-strip::-webkit-scrollbar-thumb { background: var(--kk-border, #e2e8f0); border-radius: 2px; }

.kk-similar-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 14px 14px;
  width: 140px;
  background: var(--kk-paper);
  border: var(--card-border);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--kk-ink);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  text-align: center;
}
.kk-similar-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.kk-similar-card__logo-wrap {
  width: 64px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kk-similar-card__logo  { max-width: 64px; max-height: 42px; object-fit: contain; }
.kk-similar-card__name  { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.kk-similar-card__rate  { font-size: var(--text-xs); color: var(--kk-green, #1a7f4b); font-weight: 600; }

/* Detail page responsive */
@media (max-width: 768px) {
  .kk-detail__header     { flex-direction: column; gap: 16px; }
  .kk-detail__logo-wrap  { width: 72px; height: 48px; }
  .kk-detail__logo       { max-width: 72px; max-height: 48px; }
  .kk-detail__how-steps  { gap: 12px; }
  .kk-coupon-card__list  { grid-template-columns: 1fr; }
  .kk-coupon-tile__list  { grid-template-columns: 1fr; }
}

/* ── Lists (wishlist / gift registry) ── */

.kk-input, .kk-select, .kk-textarea {
  border: var(--card-border);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--kk-ink);
  background: var(--kk-paper);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.kk-input:focus, .kk-select:focus, .kk-textarea:focus {
  outline: none;
  border-color: var(--kk-purple);
  box-shadow: 0 0 0 3px var(--kk-purple-soft);
}

.kk-textarea { resize: vertical; min-height: 60px; }

.kk-list-create {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-block-end: 28px;
}

.kk-list-create .kk-input  { flex: 2; min-width: 200px; }
.kk-list-create .kk-select { flex: 1; min-width: 160px; }

.kk-lists__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.kk-lists__card {
  position: relative;
  border: var(--card-border);
  border-radius: var(--radius-card);
  padding: 20px;
  background: var(--kk-paper);
}

.kk-lists__card-link { text-decoration: none; color: inherit; display: block; }
.kk-lists__card-name  { font-size: var(--text-lg); font-weight: 700; margin-block: 10px 4px; }
.kk-lists__card-count { font-size: var(--text-sm); color: var(--kk-ink-soft); }

.kk-lists__card-delete {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
}

.kk-list-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: var(--card-border);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  margin-block-end: 12px;
}

.kk-list-item--purchased { opacity: 0.55; }
.kk-list-item--purchased .kk-list-item__name { text-decoration: line-through; }

.kk-list-item__check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-block-start: 2px;
  cursor: pointer;
}

.kk-list-item__body  { flex: 1; min-width: 0; }
.kk-list-item__name  { font-size: var(--text-base); font-weight: 700; }
.kk-list-item__price { color: var(--kk-purple-dark); font-weight: 600; margin-inline-start: 8px; }
.kk-list-item__notes { font-size: var(--text-sm); color: var(--kk-ink-soft); margin-block-start: 4px; }

.kk-list-item__store {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 10px;
  padding: 6px 12px;
  background: var(--kk-purple-soft);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
}

.kk-list-item__store img { max-height: 18px; max-width: 60px; object-fit: contain; }

.kk-list-item__remove { margin-inline-start: auto; }

.kk-add-item-form {
  border: var(--card-border);
  border-radius: var(--radius-card);
  padding: 20px;
  margin-block-start: 24px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.kk-add-item-form .kk-textarea,
.kk-add-item-form .kk-add-item-form__actions {
  grid-column: 1 / -1;
}

.kk-store-suggest {
  position: relative;
  grid-column: 1 / -1;
}

.kk-store-suggest__results {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--kk-paper);
  border: var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  max-height: 240px;
  overflow-y: auto;
  display: none;
}

.kk-store-suggest__results--open { display: block; }

.kk-store-suggest__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
}

.kk-store-suggest__item:hover { background: var(--kk-purple-soft); }
.kk-store-suggest__item img   { max-height: 20px; max-width: 60px; object-fit: contain; }

.kk-store-suggest__picked {
  display: none;
  align-items: center;
  gap: 8px;
  margin-block-start: 8px;
  font-size: var(--text-sm);
}

.kk-store-suggest__picked--visible { display: inline-flex; }

/* ── Tabs (first use: Activity page) ── */

.kk-tabs {
  display: flex;
  gap: 4px;
  border-bottom: var(--card-border);
  margin-block-end: 24px;
  overflow-x: auto;
}

.kk-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--kk-ink-soft);
  cursor: pointer;
  white-space: nowrap;
}

.kk-tab--active {
  color: var(--kk-purple);
  border-bottom-color: var(--kk-purple);
}

.kk-tab-panel[hidden] { display: none; }

/* ── Generic data table ── */

.kk-table-wrap {
  overflow-x: auto;
  border: var(--card-border);
  border-radius: var(--radius-card);
}

.kk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.kk-table th, .kk-table td {
  padding: 12px 16px;
  text-align: start;
  white-space: nowrap;
}

.kk-table thead th {
  background: var(--kk-purple-soft);
  color: var(--kk-ink);
  font-weight: 700;
}

.kk-table tbody tr:nth-child(even) { background: var(--kk-paper); }
.kk-table tfoot td { border-top: var(--card-border); }

/* ── Static/legal content pages (Privacy, Terms, About, FAQ, How) ── */

.kk-static-page {
  padding-block: 40px 64px;
}

.kk-static-page__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  margin-block-end: 8px;
}

.kk-static-page__subtitle {
  color: var(--kk-ink-soft);
  margin-block-end: 32px;
}

.kk-prose {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--kk-ink);
  max-width: 860px;
}

.kk-prose h1, .kk-prose h2, .kk-prose h3, .kk-prose h4 {
  font-family: var(--font-display);
  margin-block: 28px 12px;
}

.kk-prose p { margin-block-end: 14px; }

.kk-prose ul, .kk-prose ol {
  margin-block-end: 14px;
  padding-inline-start: 24px;
}

.kk-prose li { margin-block-end: 6px; }

.kk-prose a { color: var(--kk-purple); text-decoration: underline; }

.kk-prose strong, .kk-prose b { font-weight: 700; }

.kk-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: 14px;
}

.kk-prose table td, .kk-prose table th {
  border: var(--card-border);
  padding: 8px 12px;
  text-align: start;
}

/* ── Accordion (FAQ) ── */

.kk-accordion__item {
  border: var(--card-border);
  border-radius: var(--radius-card);
  margin-block-end: 12px;
  overflow: hidden;
}

.kk-accordion__trigger {
  appearance: none;
  background: none;
  border: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--kk-ink);
  text-align: start;
  cursor: pointer;
}

.kk-accordion__icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.kk-accordion__item[data-open="true"] .kk-accordion__icon {
  transform: rotate(45deg);
}

.kk-accordion__panel {
  padding: 0 20px 16px;
  color: var(--kk-ink-soft);
  line-height: 1.6;
}

.kk-accordion__panel[hidden] { display: none; }

/* ── Ticket detail / chat (TicketReplies) ── */

.kk-ticket-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 24px;
  border: var(--card-border);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  margin-block-end: 20px;
}

.kk-ticket-info dt {
  font-size: var(--text-sm);
  color: var(--kk-ink-soft);
}

.kk-ticket-info dd {
  margin: 0;
  font-weight: 600;
}

.kk-chat {
  max-height: 480px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: var(--card-border);
  border-radius: var(--radius-card);
  background: var(--kk-paper);
  margin-block-end: 20px;
}

.kk-msg { display: flex; flex-direction: column; max-width: 75%; }
.kk-msg--right { align-self: flex-end; align-items: flex-end; }
.kk-msg--left { align-self: flex-start; align-items: flex-start; }

.kk-msg__meta {
  font-size: var(--text-xs);
  color: var(--kk-ink-soft);
  margin-block-end: 4px;
}

.kk-msg__bubble {
  padding: 10px 14px;
  border-radius: var(--radius-card);
  line-height: 1.5;
}

.kk-msg--left .kk-msg__bubble { background: var(--kk-purple-soft); }
.kk-msg--right .kk-msg__bubble { background: var(--kk-paper); border: var(--card-border); }