/* OTT BAZAAR — minimal custom CSS (Tailwind handles the rest) */

body {
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: #ffffff;
  color: #101828;
}

/* Glass effect: background ONLY (cards, header and tiles stay solid) */
.ob-bg-blob {
  display: none;
  position: fixed;
  border-radius: 9999px;
  filter: blur(90px);
  pointer-events: none;
  z-index: -1;
}
.ob-bg-blob-1 { width: 520px; height: 520px; left: -140px; top: 8%; background: rgba(59, 130, 246, 0.35); }
.ob-bg-blob-2 { width: 440px; height: 440px; right: -120px; top: 42%; background: rgba(27, 110, 243, 0.22); }
.ob-bg-blob-3 { width: 380px; height: 380px; left: 30%; bottom: -140px; background: rgba(30, 64, 175, 0.35); }
.ob-bg-blob-4 { width: 360px; height: 360px; right: 18%; top: 16%; background: rgba(255, 255, 255, 0.08); }
.ob-bg-blob-5 { width: 300px; height: 300px; left: 8%; bottom: 18%; background: rgba(59, 130, 246, 0.18); }

/* Gradient placeholder for products without an image */
.placeholder-gradient {
  background: #1B6EF3;
}

/* ---------- Hero slider ---------- */
.hero-slide {
  transition: opacity 0.7s ease-in-out;
}
/* ---------- Hero: 9:16 portrait promo carousel ---------- */
.hero-track {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.hero-track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.hero-dots-dark .hero-dot {
  background: #d1d5db;
}
.hero-dots-dark .hero-dot.active {
  background: #1B6EF3;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  padding: 0;
}
.hero-dot.active {
  width: 26px;
  background: #ffffff;
}
.hero-arrow {
  transition: background 0.25s ease, transform 0.25s ease;
}
.hero-arrow:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.06);
}

/* ---------- Toast ---------- */
#toast-wrap {
  pointer-events: none;
}
.toast-in {
  animation: toastIn 0.25s ease-out;
}
.toast-out {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-slide { transition: none; }
}

/* ---------- Small badges ---------- */
.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.22rem 0.65rem;
  border-radius: 9999px;
  line-height: 1.2;
}
.badge-red { background: #fee2e2; color: #b91c1c; }
.badge-amber { background: #fef3c7; color: #b45309; }
.badge-green { background: #DBEAFE; color: #1B6EF3; }
.badge-blue { background: #dbeafe; color: #1B6EF3; }
.badge-gray { background: #f3f4f6; color: #4b5563; }

/* ---------- Utilities ---------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Keep number inputs tidy */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'] { -moz-appearance: textfield; appearance: textfield; }

/* Focus ring for form fields (subtle green) */
.field:focus {
  outline: none;
  border-color: #1B6EF3;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* ============================================================
   Dark mode — TopUp Hub style: pure black + admin-set accent.
   [data-theme="dark"] is forced on by boot() (initTheme).
   Admin → Settings → Accent color sets --accent for every
   visitor (default TopUp Hub yellow #ffca00); --accent-text
   flips black/white by luminance in app.js.
   ============================================================ */
:root { --accent: #ffca00; --accent-text: #000000; }
[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] body { background-color: #050505; background-image: none; color: #f5f5f5; }

/* Surfaces */
[data-theme="dark"] .bg-white { background-color: #0d0d0d !important; }
[data-theme="dark"] .bg-gray-50 { background-color: #0a0a0a !important; }
[data-theme="dark"] .bg-gray-100 { background-color: #141414 !important; }
[data-theme="dark"] .bg-gray-200 { background-color: #1f1f1f !important; }
[data-theme="dark"] .bg-brand-950 { background-color: #0a0a0a !important; }
[data-theme="dark"] [class*="bg-white/90"] { background-color: rgba(5,5,5,.92) !important; }
[data-theme="dark"] [class*="bg-white/60"] { background-color: rgba(13,13,13,.6) !important; }

/* Accent tints (chips, soft backgrounds) — must come BEFORE the
   solids below: "bg-brand-50" is a substring of "bg-brand-500",
   and equal-specificity rules resolve in source order. */
[data-theme="dark"] [class*="bg-brand-50"],
[data-theme="dark"] [class*="bg-brand-100"],
[data-theme="dark"] [class*="bg-brand-200"],
[data-theme="dark"] [class*="bg-accent-50"],
[data-theme="dark"] [class*="bg-accent-100"] { background-color: color-mix(in srgb, var(--accent) 14%, transparent) !important; }

/* Accent solids (buttons, pills, highlights). Substring matching
   also catches hover:/focus: variants, which keep the accent. */
[data-theme="dark"] [class*="bg-brand-500"],
[data-theme="dark"] [class*="bg-brand-600"],
[data-theme="dark"] [class*="bg-brand-700"],
[data-theme="dark"] [class*="bg-brand-800"],
[data-theme="dark"] [class*="bg-accent-500"],
[data-theme="dark"] [class*="bg-accent-600"],
[data-theme="dark"] [class*="bg-accent-700"] { background-color: var(--accent) !important; color: var(--accent-text) !important; }

/* White text inside an accent solid flips to accent-text too,
   so yellow buttons never carry unreadable white text. */
[data-theme="dark"] [class*="bg-brand-500"] .text-white,
[data-theme="dark"] [class*="bg-brand-600"] .text-white,
[data-theme="dark"] [class*="bg-brand-700"] .text-white,
[data-theme="dark"] [class*="bg-brand-800"] .text-white,
[data-theme="dark"] [class*="bg-accent-500"] .text-white,
[data-theme="dark"] [class*="bg-accent-600"] .text-white,
[data-theme="dark"] [class*="bg-accent-700"] .text-white,
[data-theme="dark"] .ob-band .text-white { color: var(--accent-text) !important; }

/* Text */
[data-theme="dark"] .text-gray-900 { color: #f5f5f5 !important; }
[data-theme="dark"] .text-gray-800 { color: #e5e5e5 !important; }
[data-theme="dark"] .text-gray-700 { color: #d4d4d4 !important; }
[data-theme="dark"] .text-gray-600 { color: #a3a3a3 !important; }
[data-theme="dark"] .text-gray-500 { color: #737373 !important; }
[data-theme="dark"] .text-gray-400 { color: #525252 !important; }
[data-theme="dark"] .text-gray-300 { color: #d4d4d4 !important; }
[data-theme="dark"] .text-gray-200 { color: #e5e5e5 !important; }
[data-theme="dark"] .text-gray-100 { color: #f5f5f5 !important; }

[data-theme="dark"] [class*="text-brand-"],
[data-theme="dark"] [class*="text-accent-"] { color: var(--accent) !important; }

/* Borders */
[data-theme="dark"] .border-gray-100 { border-color: #1f1f1f !important; }
[data-theme="dark"] .border-gray-200 { border-color: #262626 !important; }
[data-theme="dark"] .border-gray-300 { border-color: #262626 !important; }
[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1f1f1f !important; }
[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #262626 !important; }
[data-theme="dark"] [class*="border-brand-100"],
[data-theme="dark"] [class*="border-brand-200"],
[data-theme="dark"] [class*="border-brand-300"],
[data-theme="dark"] [class*="border-accent-100"] { border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; }
[data-theme="dark"] [class*="border-brand-400"],
[data-theme="dark"] [class*="border-brand-500"],
[data-theme="dark"] [class*="border-brand-600"] { border-color: var(--accent) !important; }

/* Rings + checkbox accent */
[data-theme="dark"] [class*="ring-brand-"] { --tw-ring-color: var(--accent) !important; }
[data-theme="dark"] [class*="accent-brand-"] { accent-color: var(--accent) !important; }

/* Header / footer */
[data-theme="dark"] header { background: rgba(0,0,0,.92) !important; border-color: #1f1f1f !important; }
[data-theme="dark"] footer { background: #000000 !important; }

/* Forms */
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background-color: #0d0d0d !important; color: #f5f5f5 !important; border-color: #262626 !important;
}
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #525252 !important; }
[data-theme="dark"] .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }

/* Support chat */
[data-theme="dark"] #support-panel { background: #0d0d0d !important; border-color: #1f1f1f !important; }
[data-theme="dark"] #support-channels { background: #0d0d0d !important; border-color: #1f1f1f !important; }

/* Shadows soften in dark mode */
[data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-lg, [data-theme="dark"] .shadow-xl, [data-theme="dark"] .shadow-2xl {
  box-shadow: 0 4px 18px rgba(0,0,0,.45) !important;
}

/* OTTBazaar custom components */
[data-theme="dark"] .ob-eyebrow { color: var(--accent); }
[data-theme="dark"] .ob-band { background: var(--accent); color: var(--accent-text); box-shadow: 0 20px 50px color-mix(in srgb, var(--accent) 28%, transparent); }
[data-theme="dark"] .ob-band-accent { background: var(--accent); }
[data-theme="dark"] .ob-btn-red { background: var(--accent); color: var(--accent-text); box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 30%, transparent); }
[data-theme="dark"] .ob-btn-red:hover { background: color-mix(in srgb, var(--accent) 88%, #000); box-shadow: 0 16px 32px color-mix(in srgb, var(--accent) 38%, transparent); }
[data-theme="dark"] .ob-cat-btn { background: var(--accent); color: var(--accent-text); }
[data-theme="dark"] .ob-cat-btn:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
[data-theme="dark"] .ob-icon-tile { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
[data-theme="dark"] .ob-step-num { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
[data-theme="dark"] .ob-trust-card { background: #0d0d0d; border-color: #1f1f1f; }
[data-theme="dark"] .ob-trust-card:hover { box-shadow: 0 16px 32px color-mix(in srgb, var(--accent) 14%, transparent); }
[data-theme="dark"] .ob-pastel { border-color: #1f1f1f; }
[data-theme="dark"] .ob-pastel:hover { box-shadow: 0 16px 32px color-mix(in srgb, var(--accent) 16%, transparent); }
[data-theme="dark"] .ob-pastel-1, [data-theme="dark"] .ob-pastel-2, [data-theme="dark"] .ob-pastel-3 { background: #0d0d0d; }
[data-theme="dark"] .ob-cat-tile { background: #0d0d0d; border-color: #1f1f1f; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
[data-theme="dark"] a.ob-cat-tile:hover { box-shadow: 0 18px 36px color-mix(in srgb, var(--accent) 18%, transparent); }
[data-theme="dark"] .placeholder-gradient { background: var(--accent); }
[data-theme="dark"] .hero-dots-dark .hero-dot.active { background: var(--accent); }
[data-theme="dark"] .badge-blue { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
[data-theme="dark"] .badge-green { background: rgba(34,197,94,.15); color: #4ade80; }
[data-theme="dark"] .badge-red { background: rgba(239,68,68,.15); color: #f87171; }
[data-theme="dark"] .badge-amber { background: rgba(245,158,11,.15); color: #fbbf24; }
[data-theme="dark"] .badge-gray { background: #1f1f1f; color: #a3a3a3; }
[data-theme="dark"] .nk-name { color: #f5f5f5; }
[data-theme="dark"] .nk-desc, [data-theme="dark"] .nk-note { color: #a3a3a3; }
[data-theme="dark"] .nk-rnum { color: #f5f5f5; }
[data-theme="dark"] .nk-rcount { color: #a3a3a3; }
[data-theme="dark"] .nk-pill { background: #1f1f1f; color: #f5f5f5; }
[data-theme="dark"] .nk-pill small { color: #a3a3a3; }
[data-theme="dark"] .nk-strike { color: #737373; }
[data-theme="dark"] .nk-tag { background: var(--accent); color: var(--accent-text); }
[data-theme="dark"] .nk-buy { background: var(--accent); color: var(--accent-text); }
[data-theme="dark"] .nk-buy:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
[data-theme="dark"] .nk-buy:disabled { background: #1f1f1f; color: #525252; }

/* "Hot right now" slide layout: horizontal snap-scroll carousel (Admin → Settings → Hot right now layout). */
#featured-grid.featured-slide{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px}
#featured-grid.featured-slide::-webkit-scrollbar{display:none}
#featured-grid.featured-slide>*{flex:0 0 auto;width:44vw;max-width:200px;scroll-snap-align:start}
@media (min-width:640px){#featured-grid.featured-slide>*{width:200px;max-width:none}}

/* ============================================================
   OTTBazaar homepage sections (ported from mlbbstore.in mg-*
   styles, bond-blue #1B6EF3 theme).
   ============================================================ */

/* Eyebrow labels: small uppercase label above section headings */
.ob-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1B6EF3;
}

/* Promo band: solid green with red accent + decorative rings */
.ob-band {
  background: #1B6EF3;
  border-radius: 26px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(27, 110, 243, 0.28);
}
.ob-band-accent {
  background: #1B6EF3;
}
.ob-ring {
  position: absolute;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
.ob-btn-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #1B6EF3;
  color: #ffffff;
  font-weight: 800;
  border-radius: 9999px;
  padding: 0.85rem 1.9rem;
  font-size: 0.95rem;
  box-shadow: 0 12px 28px rgba(27, 110, 243, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  border: none;
  cursor: pointer;
}
.ob-btn-red:hover { background: #1660d9; transform: translateY(-1px); box-shadow: 0 16px 32px rgba(27, 110, 243, 0.38); }
.ob-btn-red:active { transform: scale(0.98); }

/* Trust cards ("Why shop with us") */
.ob-trust-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ob-trust-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(27, 110, 243, 0.14); }
.ob-icon-tile {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 16px;
  background: #EFF6FF;
  box-shadow: 0 4px 12px rgba(20, 23, 31, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
  color: #1B6EF3;
}

/* How-it-works step numbers */
.ob-step-num {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: #DBEAFE;
  color: #1B6EF3;
  font-weight: 800;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Pastel cards for category rail / how-it-works (green-tinted) */
.ob-pastel {
  border-radius: 18px;
  border: 1px solid rgba(20, 23, 31, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ob-pastel:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(27, 110, 243, 0.16); }
.ob-pastel-1 { background: #EFF6FF; }
.ob-pastel-2 { background: #EFF6FF; }
.ob-pastel-3 { background: #f7faf7; }

/* Category tiles */
.ob-cat-tile {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 8px rgba(20, 23, 31, 0.04);
}
a.ob-cat-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(27, 110, 243, 0.18);
}
.ob-cat-btn {
  display: block;
  width: 100%;
  padding: 0.65rem 0;
  border-radius: 12px;
  background: #1B6EF3;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  transition: background 0.2s ease, transform 0.15s ease;
}
.ob-cat-btn:hover { background: #1660d9; }
.ob-cat-btn:active { transform: scale(0.98); }

@media (max-width: 767px) {
  .ob-band { border-radius: 20px; }
}

/* Dark mode for new sections (black + accent, matching the block above) */
[data-theme="dark"] .ob-trust-card { background: #0d0d0d !important; border-color: #1f1f1f !important; }
[data-theme="dark"] .ob-pastel { background: #0d0d0d !important; }
[data-theme="dark"] .ob-cat-tile { background: #0d0d0d !important; border-color: #1f1f1f !important; }
[data-theme="dark"] .ob-icon-tile { background: color-mix(in srgb, var(--accent) 14%, transparent) !important; color: var(--accent); }
[data-theme="dark"] .ob-step-num { background: color-mix(in srgb, var(--accent) 14%, transparent) !important; color: var(--accent); }
[data-theme="dark"] .ob-band [class*="text-[#101828]"] { color: var(--accent-text) !important; }

/* Bond-style product card in dark mode (custom classes, not utilities) */
[data-theme="dark"] .nk-card { background: #0d0d0d; box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.5); }
[data-theme="dark"] .nk-card:hover { box-shadow: 0 18px 36px color-mix(in srgb, var(--accent) 18%, transparent); }
[data-theme="dark"] .nk-imgwrap { background: #141414; }
[data-theme="dark"] .nk-bm { background: #1f1f1f; color: #f5f5f5; }
[data-theme="dark"] .nk-bm.saved svg { fill: var(--accent); }

/* Bond-style product card: soft white card. All colours live
   in these custom classes so the dark-mode utility overrides can't restyle
   the card (they target .bg-white / .text-gray-* utilities, not .nk-*). */
.nk-card { display:flex; flex-direction:column; height:100%; background:#ffffff; border-radius:18px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.08); transition:transform .2s, box-shadow .2s; }
.nk-card:hover { transform:translateY(-4px); box-shadow:0 18px 36px rgba(27,110,243,0.18); }
.nk-imgwrap { position:relative; aspect-ratio:1/1; overflow:hidden; background:#f3f4f6; }
.nk-imgwrap img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.nk-card:hover .nk-imgwrap img { transform:scale(1.035); }
.nk-ph { display:flex; align-items:center; justify-content:center; height:100%; font-size:3rem; font-weight:800; color:#9ca3af; }
.nk-tag { position:absolute; top:.75rem; left:.75rem; background:#1B6EF3; color:#fff; font-size:11px; font-weight:700; padding:.3rem .65rem; border-radius:9999px; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.nk-bm { position:absolute; top:.6rem; right:.6rem; width:2.25rem; height:2.25rem; border-radius:9999px; background:#ffffff; color:#111827; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.25); border:0; cursor:pointer; }
.nk-bm svg { width:1.15rem; height:1.15rem; }
.nk-bm.saved svg { fill:#111827; }
.nk-dots { position:absolute; bottom:.6rem; left:0; right:0; display:flex; justify-content:center; gap:.3rem; }
.nk-dot { width:.45rem; height:.45rem; border-radius:9999px; background:rgba(255,255,255,.55); padding:0; border:0; cursor:pointer; }
.nk-dot.on { background:#ffffff; }
.nk-oos { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); }
.nk-oos span { background:#fff; color:#111827; font-size:12px; font-weight:700; padding:.4rem .9rem; border-radius:9999px; }
.nk-body { padding:.9rem 1rem 1rem; flex:1; display:flex; flex-direction:column; }
.nk-name { color:#0f172a; font-weight:800; line-height:1.25; }
.nk-desc { color:#6b7280; font-size:13px; line-height:1.45; margin-top:.25rem; }
.nk-rating { display:flex; align-items:center; gap:.35rem; margin-top:.3rem; font-size:13px; }
.nk-stars { color:#f59e0b; letter-spacing:.05em; }
.nk-rnum { color:#111827; font-weight:800; }
.nk-rcount { color:#6b7280; font-weight:600; }
.nk-foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:auto; padding-top:.8rem; flex-wrap:wrap; }
.nk-pill { background:#f3f4f6; color:#111827; font-weight:800; font-size:14px; padding:.45rem .8rem; border-radius:9999px; white-space:nowrap; }
.nk-pill small { font-weight:600; font-size:11px; color:#6b7280; }
.nk-strike { color:#9ca3af; font-size:12px; text-decoration:line-through; }
.nk-buy { background:#1B6EF3; color:#fff; font-weight:700; font-size:13px; padding:.55rem 1rem; border-radius:9999px; display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; border:0; cursor:pointer; }
.nk-buy:disabled { background:#e5e7eb; color:#9ca3af; cursor:not-allowed; }
.nk-buy:hover { background:#1660d9; }
.nk-note { color:#6b7280; font-size:11px; font-weight:600; margin-top:.4rem; }

/* ============================================================
   TopUp Hub layout port (homepage posters, marquee, quick
   tiles, floating bottom nav). Storefront is always dark, so
   these are scoped under [data-theme="dark"].
   ============================================================ */

/* Poster cards: slanted 16/11 art window + angled offer strip,
   transparent card (no box/panel), caps name, yellow price. */
[data-theme="dark"] .nk-card { background: transparent; box-shadow: none; }
[data-theme="dark"] .nk-card:hover { transform: none; box-shadow: none; }
[data-theme="dark"] .nk-card:active { transform: scale(.98); }
[data-theme="dark"] .nk-imgwrap { aspect-ratio: 1/1; background: #141414; }
.nk-strip { display: flex; align-items: center; justify-content: center; gap: 5px; position: relative; z-index: 2; margin: -13px 3px 0; padding: 5px 8px; clip-path: polygon(3.5% 0, 100% 0, 96.5% 100%, 0 100%); color: #000; font-size: 10.5px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.nk-strip.hot { background: linear-gradient(90deg, #ff8a00, #ffc400); }
.nk-strip.sell { background: #17d2e8; }
[data-theme="dark"] .nk-body { padding: .9rem .25rem 0; }
[data-theme="dark"] .nk-name { text-transform: uppercase; letter-spacing: .02em; }
[data-theme="dark"] .nk-pill { background: transparent; color: var(--accent); padding-left: 0; padding-right: 0; font-size: 15px; }

/* Product grids: TopUp phone rhythm (16px rows, 10px cols). */
@media (max-width: 860px) {
  [data-theme="dark"] #featured-grid, [data-theme="dark"] #results-grid, [data-theme="dark"] #ai-grid, [data-theme="dark"] #ott-grid, [data-theme="dark"] #popular-grid { gap: 16px 10px; }
}

/* Section heads: compact TopUp size. */
[data-theme="dark"] .ob-eyebrow + h2 { font-size: 20px; }
[data-theme="dark"] .ob-eyebrow + h2 + p { font-size: 13px; }

/* Welcome marquee under the banner (gold bar, scrolling). */
[data-theme="dark"] .ob-marquee { background: var(--accent); color: var(--accent-text); overflow: hidden; white-space: nowrap; border-radius: 10px; }
[data-theme="dark"] .ob-marquee-track { display: inline-flex; animation: ob-marquee 24s linear infinite; will-change: transform; }
[data-theme="dark"] .ob-marquee-track span { padding: 8px 0; font-size: 13px; font-weight: 800; letter-spacing: .02em; }
@keyframes ob-marquee { to { transform: translateX(-50%); } }
[data-theme="dark"] .ob-marquee:hover .ob-marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { [data-theme="dark"] .ob-marquee-track { animation: none; } }

/* Quick tiles under the banner (Wallet / Orders / Saved / Support). */
[data-theme="dark"] .ob-quicktiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
[data-theme="dark"] .ob-quicktiles a { background: #0d0d0d; border: 1px solid #1f1f1f; border-radius: 14px; padding: 12px 4px; text-align: center; font-size: 12px; font-weight: 700; color: #f5f5f5; display: flex; flex-direction: column; gap: 6px; align-items: center; text-decoration: none; }
[data-theme="dark"] .ob-quicktiles a:active { transform: scale(.97); }
[data-theme="dark"] .ob-quicktiles .qt-ico { font-size: 20px; line-height: 1; }

/* Floating bottom nav (phones only, TopUp style). */
.ob-bottomnav { display: none; }
@media (max-width: 860px) {
  [data-theme="dark"] .ob-bottomnav { display: block; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(6px + env(safe-area-inset-bottom)); z-index: 40; width: min(98%, 560px); background: #000; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 20px; box-shadow: 0 6px 20px rgba(0,0,0,.6); padding: 6px 8px; }
  [data-theme="dark"] .ob-bottomnav nav { display: flex; justify-content: space-around; }
  [data-theme="dark"] .ob-bottomnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; border-radius: 14px; text-decoration: none; color: #fff; font-size: 10px; font-weight: 600; width: 20%; min-height: 48px; justify-content: center; }
  [data-theme="dark"] .ob-bottomnav svg { width: 20px; height: 20px; fill: currentColor; }
  [data-theme="dark"] .ob-bottomnav a.on { background: var(--accent); color: var(--accent-text); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
  [data-theme="dark"] .ob-bottomnav a:active { transform: scale(.94); }
  /* Clearance for the nav + lift the support bubble above it. */
  [data-theme="dark"] main { padding-bottom: 96px; }
  [data-theme="dark"] footer { padding-bottom: 110px; }
  [data-theme="dark"] #support-btn { bottom: 92px; }
  [data-theme="dark"] #support-panel { bottom: 92px; }
}

/* ============================================================
   Phone-friendly pass (Nov 2026): plain static CSS, not Tailwind
   utilities, so it also applies to markup rendered by JS after
   page load (orders / wallet tables). Desktop is untouched:
   every rule below lives inside a max-width media query.
   ============================================================ */

/* Stacked-card tables (account / reseller orders, wallet txns):
   thead hides, each row becomes a card with a small label above
   every value (from the cell's data-label). */
@media (max-width: 640px) {
  table.mob-cards, table.mob-cards tbody { display: block; width: 100%; }
  table.mob-cards thead { display: none; }
  table.mob-cards tr { display: block; border: 1px solid #1f1f1f; border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: #0d0d0d; }
  table.mob-cards td { display: block; width: 100%; padding: 3px 0; border: 0; }
  table.mob-cards td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #737373; margin-bottom: 1px; }
}

@media (max-width: 860px) {
  /* Toasts must clear the floating bottom nav (they sit at bottom-5). */
  #toast-wrap { bottom: 92px; }
  /* Thumb-sized card + gallery targets (desktop unchanged). */
  .nk-buy { padding: .7rem 1.1rem; }
  .nk-bm { width: 2.75rem; height: 2.75rem; }
  #gal-prev, #gal-next { width: 44px; height: 44px; }
  /* Blog post bodies are raw admin HTML: keep media + code inside. */
  .post-body { overflow-wrap: break-word; }
  .post-body img { max-width: 100%; height: auto; }
  .post-body pre { overflow-x: auto; }
  .post-body table { display: block; overflow-x: auto; }
}

/* ============================================================
   App-style product tiles on phones (4 per row, 2026-11-07):
   image + name + price only. The Buy / rating / gallery-dot /
   strike / currency-note rows are hidden on phones — the tile
   itself links to the product page, where the full buy flow
   lives. Desktop and tablet are untouched.
   ============================================================ */
@media (max-width: 640px) {
  .nk-card { border-radius: 12px; }
  .nk-body { padding: .45rem .1rem 0; }
  [data-theme="dark"] .nk-body { padding: .45rem .1rem 0; }
  .nk-foot { padding-top: .3rem; }
  .nk-pill { font-size: 12px; }
  [data-theme="dark"] .nk-pill { font-size: 12px; }
  .nk-pill small { font-size: 10px; }
  .nk-buy, .nk-rating, .nk-dots, .nk-strike, .nk-note { display: none; }
  .nk-ph { font-size: 1.75rem; }
  .nk-oos span { font-size: 10px; padding: .3rem .6rem; }
}