/* =========================================================
   Nexsky Landing Page – Modern Luxe Redesign
   Full rebuild: luxury navbar, theme‑proof, animated
   (Fonts: IRANSans (body), BZarBd (hero heading))
========================================================= */

/* ---------- IRANSans Web Font ---------- */
@font-face {
  font-family: 'IRANSans';
  src: url("/static/fonts/iransans/IRANSansWeb_UltraLight.068169d2ab5f.woff2") format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSans';
  src: url("/static/fonts/iransans/IRANSansWeb_Light.f7e4be98d20e.woff2") format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSans';
  src: url("/static/fonts/iransans/IRANSansWeb.0b5055ac3573.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSans';
  src: url("/static/fonts/iransans/IRANSansWeb_Medium.9c66b762719d.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSans';
  src: url("/static/fonts/iransans/IRANSansWeb_Bold.43a0ecf3c7f2.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSans';
  src: url("/static/fonts/iransans/IRANSansWeb_Black.f477dd9634c9.woff2") format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* ---------------------------------------- */

/* ---------- Custom Properties ---------- */
:root {
  --bg-deep: #03050a;
  --bg-card: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --accent-cyan: #00f0ff;
  --accent-rose: #ff0055;
  --accent-purple: #8a2be2;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.75);
  --radius-xl: 1.6rem;
  --radius-lg: 1.25rem;
  --radius-md: 0.9rem;
  --radius-sm: 0.7rem;
  --transition-main: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  --font-main: 'IRANSans', 'Tahoma', 'Arial', sans-serif;   /* body font */

  /* Navbar specific */
  --nav-bg: rgba(10, 10, 12, 0.45);
  --nav-border: rgba(255, 255, 255, 0.12);
  --nav-link-color: rgba(255, 255, 255, 0.9);
  --nav-hover-bg: rgba(255, 255, 255, 0.08);
}

/* ---------- Reset & Base ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  background:
    radial-gradient(circle at 18% 10%, rgba(0,240,255,0.12), transparent 18%),
    radial-gradient(circle at 84% 15%, rgba(255,0,85,0.12), transparent 20%),
    radial-gradient(circle at 50% 80%, rgba(138,43,226,0.08), transparent 22%),
    var(--bg);
  color: var(--text-primary);
  font-family: var(--font-main);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  transition: background 0.4s ease, color 0.4s ease;
}

/* ---------- Background Layers ---------- */
#starfield {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.bg-aura {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  display: none !important;
}
.bg-aura::before,
.bg-aura::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  opacity: 0.2;
  animation: none !important;
}
.bg-aura::before {
  width: 80vmax;
  height: 80vmax;
  background: radial-gradient(circle, var(--accent-rose) 0%, transparent 70%);
  top: -30%;
  left: -20%;
  animation-delay: 0s;
}
.bg-aura::after {
  width: 70vmax;
  height: 70vmax;
  background: radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);
  bottom: -30%;
  right: -20%;
  animation-delay: -12s;
}

/* ---------- Page Wrapper ---------- */
.page-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 0 0 3rem;
}

/* =============================================================
   MODERN LUXURY NAVBAR
============================================================= */
.lux-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: background 0.3s, box-shadow 0.3s;
  overflow: visible;
  isolation: isolate;
}
.lux-navbar > * {
  position: relative;
  z-index: 1;
}
.lux-navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 240, 255, 0.15) 0%,
    rgba(138, 43, 226, 0.1) 25%,
    rgba(255, 0, 85, 0.08) 50%,
    rgba(0, 240, 255, 0.05) 75%,
    rgba(138, 43, 226, 0.1) 100%
  );
  background-size: 300% 300%;
  animation: gradientShift 8s ease infinite;
  z-index: 0;
}
.lux-navbar::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-cyan) 20%,
    var(--accent-purple) 50%,
    var(--accent-cyan) 80%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 1;
}
.lux-navbar.scrolled {
  background: rgba(3, 5, 10, 0.82);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}
.lux-navbar.scrolled::after {
  opacity: 1;
}

.nav-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.45rem clamp(1rem, 2.5vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav-logo .logo-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s, filter 0.3s;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
}
.nav-logo .logo-icon img,
.nav-logo .logo-icon svg,
.nav-logo .logo-icon .logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.logo-img {
  height: 36px;
  width: auto;
  transition: filter 0.3s;
}

/* Desktop links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-item {
  padding: 10px 18px;
  border-radius: 12px;
  color: var(--nav-link-color);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-main);
  cursor: pointer;
  white-space: nowrap;
}
.nav-item:hover,
.nav-item.active {
  background: rgba(0, 240, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.nav-item.active {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.3);
  color: var(--accent-cyan);
}

/* Controls (theme, lite, auth) */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.icon-btn:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 20px rgba(0,240,255,0.3);
  background: rgba(0, 240, 255, 0.08);
}
.icon-btn.active {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.4);
  color: var(--accent-cyan);
}

/* Auth pills */
.nav-auth-desktop {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.auth-pill {
  padding: 10px 18px;
  border-radius: 28px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  background: transparent;
  border: 1.5px solid rgba(0, 240, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.auth-pill:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(0, 240, 255, 0.05);
  box-shadow: 0 0 20px rgba(0,240,255,0.2);
  transform: translateY(-1px);
}
.logout-pill {
  background: rgba(255, 0, 85, 0.1);
  border-color: rgba(255, 0, 85, 0.25);
  color: #ff6b9d;
}
.logout-pill:hover {
  background: rgba(255, 0, 85, 0.2);
  color: #fff;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: auto;
  height: auto;
  border: none;
  background: none;
  cursor: pointer;
  padding: 8px;
  color: var(--text-primary);
  transition: color 0.2s ease;
}
.hamburger:hover {
  color: var(--accent-cyan);
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: 0.3s ease;
}
.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu actions hidden on desktop */
.nav-actions-mobile {
  display: none;
}

/* ---- LIGHT MODE Navbar Adjustments ---- */
body.light-mode {
  --bg-deep: #f4f7f9;
  --bg: #f1f5f9;
  --bg-card: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(15, 23, 42, 0.08);
  --text-primary: #1e293b;
  --text-secondary: rgba(30, 41, 59, 0.7);
  --accent-cyan: #d81b3f;
  --accent-rose: #d9004d;
  --accent-purple: #7209b7;

  --nav-bg: rgba(244, 247, 249, 0.85);
  --nav-border: rgba(15, 23, 42, 0.1);
  --nav-link-color: rgba(30, 41, 59, 0.85);
  --nav-hover-bg: rgba(216, 27, 63, 0.08);
}
body.light-mode .bg-aura::before,
body.light-mode .bg-aura::after { opacity: 0.08; filter: blur(150px); }
body.light-mode .lux-navbar {
  background: rgba(244, 247, 249, 0.85);
  box-shadow: 0 5px 20px rgba(15, 23, 42, 0.05);
}
body.reduced-visual-effects .lux-navbar,
body.reduced-visual-effects .lux-navbar::before,
body.reduced-visual-effects .lux-navbar::after {
  animation: none !important;
}
body.reduced-visual-effects .lux-navbar {
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.light-mode.reduced-visual-effects .lux-navbar {
  background: rgba(255, 255, 255, 0.96);
}
body.light-mode .nav-item {
  color: rgba(30, 41, 59, 0.8);
}
body.light-mode .nav-item:hover,
body.light-mode .nav-item.active {
  background: rgba(216, 27, 63, 0.08);
  border-color: rgba(216, 27, 63, 0.2);
  color: #0f172a;
}
body.light-mode .nav-item.active {
  background: rgba(216, 27, 63, 0.12);
  color: #0077b6;
}
body.light-mode .icon-btn {
  color: rgba(30, 41, 59, 0.8);
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.6);
}
body.light-mode .icon-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.2);
}
body.light-mode .icon-btn.active {
  background: rgba(216, 27, 63, 0.1);
  border-color: rgba(216, 27, 63, 0.3);
  color: #008b99;
}
body.light-mode .auth-pill {
  color: rgba(30, 41, 59, 0.9);
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(15, 23, 42, 0.12);
}
body.light-mode .auth-pill:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.2);
  color: #0f172a;
}
body.light-mode .logout-pill {
  background: rgba(255, 0, 85, 0.06);
  border-color: rgba(255, 0, 85, 0.2);
  color: #d9004d;
}
body.light-mode .logout-pill:hover {
  background: rgba(255, 0, 85, 0.12);
  color: #b3003d;
}
body.light-mode .hamburger span { background: #1e293b; }

/* ---------- Stories Bar ---------- */
.stories-bar {
  width: 100%;
  max-width: 1200px;
  margin: 0.25rem auto 1rem;
  padding: 0.25rem 0;
}
.stories-scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.25rem 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.stories-scroll::-webkit-scrollbar { display: none; }

.store-stories-shell {
  display: flex;
  flex-shrink: 0;
  margin: 0 auto;
}
.store-stories-track {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;
}
.store-story-card {
  flex: 0 0 auto;
  width: 70px;
  text-align: center;
}
.store-story-trigger {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  padding: 0;
}
.store-story-media {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  padding: 2px;
}
.store-story-media img,
.store-story-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.store-story-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--accent-cyan);
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
}
/* Hide story titles on landing — circles only, cleaner rail */
.store-story-info { display: none; }

.store-story-info strong {
  font-size: 0.7rem;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
  color: var(--text-secondary);
}
.store-story-info span { display: none; }

.store-story-viewer {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  overflow: auto;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(14px);
  transition: opacity 0.25s ease;
  place-items: center;
}
.store-story-viewer.active { display: grid; }
.store-story-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
}
.store-story-viewer-panel {
  position: relative;
  width: min(100%, 980px);
  max-width: 1000px;
  max-height: calc(100vh - 3rem);
  margin: auto;
  border-radius: 1.25rem;
  overflow: hidden;
  background: rgba(10, 16, 32, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  z-index: 2;
}
.store-story-viewer-close,
.store-story-close {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.store-story-viewer-close:hover,
.store-story-close:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(1.05);
}
.store-story-viewer-media {
  width: 100%;
  min-height: 50vh;
  max-height: 70vh;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05070f;
}
.store-story-viewer-media img,
.store-story-viewer-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.store-story-viewer-content {
  padding: 1.75rem 2rem 2rem;
  color: #f7f7fb;
}
.store-story-viewer-content h3 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.1;
}
.store-story-viewer-content p {
  margin: 0 0 1.25rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.8;
  font-size: 1rem;
}
.store-story-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  color: #020617;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.store-story-cta:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

/* ---------- Hero (scaled down for desktop) ---------- */
.hero {
  text-align: center;
  margin: 1rem 0 0.5rem;
  width: min(100%, 860px);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeInUp 1s ease forwards;
}
.hero h1 {
  font-family: 'BZarBd', 'Tahoma', 'Arial', sans-serif;
  font-size: clamp(2.2rem, 6vw, 4rem);   /* scaled down from huge 6.5rem */
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #ffffff 20%, var(--accent-cyan) 60%, var(--accent-purple) 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 40px rgba(0, 240, 255, 0.3));
  line-height: 1.1;
  margin-bottom: 0.2em;
}
.hero .brand {
  font-size: 0.95rem;
  letter-spacing: 0.6em;
  text-transform: uppercase;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.hero .brand::before,
.hero .brand::after {
  content: '';
  height: 1px;
  width: 60px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  opacity: 0.6;
}
.hero .tagline {
  margin-top: 1rem;
  font-size: 1rem;           /* reduced from 1.25rem */
  font-weight: 300;
  color: rgba(255, 255, 255, 0.75);
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Split Cards (compact desktop) ---------- */
.cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: stretch;
  width: min(100%, 1080px);
  margin: 1.5rem 0 3rem;
}
.card-glass {
  flex: 1 1 320px;
  max-width: 480px;
  position: relative;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid transparent;
  overflow: hidden;
  transition: all var(--transition-main);
  padding: 1.8rem 1.5rem;          /* reduced from 2.5rem 2rem */
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  transform: translateY(0);
  isolation: isolate;
}
.card-glass.bg-image { background-color: transparent !important; }

.card-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.12) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 1;
}
.card-glass:hover::before { opacity: 1; }

.card-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 1;
}
.card-glass:hover::after { opacity: 1; }
.card-glass:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.6);
}

.card-glass .card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  z-index: 2;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.card-glass .icon {
  font-size: 2.2rem;          /* reduced from 2.8rem */
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.4));
  line-height: 1;
}
.card-glass h2 {
  font-size: 1.6rem;          /* reduced from 2.2rem */
  font-weight: 800;
  line-height: 1.2;
}
.card-glass .desc {
  color: var(--text-secondary);
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  flex-grow: 1;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  padding: 1rem 1.2rem;
  border: 1px solid rgba(255,255,255,0.04);
}
.card-glass .cta-btn {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1.5rem;
  border-radius: 3rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.4px;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  backdrop-filter: blur(10px);
  z-index: 3;
  text-align: center;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.card-glass .cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.6s ease;
}
.card-glass:hover .cta-btn {
  background: #ffffff;
  color: #03050a;
  border-color: #ffffff;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
.card-glass:hover .cta-btn::before { left: 100%; }
.card-glass .cta-btn i { transition: transform 0.3s ease; }
.card-glass:hover .cta-btn i { transform: translateX(-4px); }

.card-physical .icon {
  background: linear-gradient(135deg, var(--accent-rose), #ff6b9d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 15px rgba(255, 0, 85, 0.4));
}
.card-physical:hover { box-shadow: 0 35px 70px rgba(255, 0, 85, 0.2); }
.card-physical:hover::after { background: linear-gradient(135deg, var(--accent-rose), #ff6b9d); }
.card-digital .icon {
  background: linear-gradient(135deg, var(--accent-cyan), #7df9ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.card-digital:hover { box-shadow: 0 35px 70px rgba(0, 240, 255, 0.2); }

.card-glass .landing-card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
  background: none !important;
  transform: scale(1.01);
  will-change: transform;
}

.card-glass > .card-content,
.card-glass > .cta-btn {
  position: relative;
  z-index: 2;
}

/* ---------- Stats Strip (scaled) ---------- */
.stats-strip {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 960px;
  margin: 0 0 3rem;
}
.stat-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;          /* reduced */
  text-align: center;
  min-width: 140px;
  flex: 1;
  transition: var(--transition-main);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
  transform: scaleX(0);
  transition: transform 0.4s ease;
}
.stat-card:hover {
  border-color: rgba(0, 240, 255, 0.3);
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 240, 255, 0.1);
}
.stat-card:hover::before { transform: scaleX(1); }
.stat-num {
  font-size: 2rem;               /* reduced from 2.4rem */
  font-weight: 900;
  background: linear-gradient(135deg, #60f3ff, #00f0ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 4px;
  font-weight: 500;
}

/* ---------- Product Showcase (scaled + light mode fix) ---------- */
.showcase-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 0 3rem;
}
.section-header {
  text-align: center;
  margin-bottom: 2rem;
}
.badge {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.badge-glow {
  background: rgba(0,240,255,0.12);
  color: var(--accent-cyan);
  border: 1px solid rgba(0,240,255,0.25);
  box-shadow: 0 0 15px rgba(0,240,255,0.1);
}
.section-header h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);   /* scaled down */
  font-weight: 900;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #fff, var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-header p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 480px;
  margin: 0 auto;
}
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.showcase-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: var(--transition-main);
  display: flex;
  flex-direction: column;
}
.showcase-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-cyan);
  box-shadow: 0 20px 40px rgba(0,240,255,0.15);
}
.showcase-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
}
.showcase-img img,
.showcase-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.showcase-card:hover .showcase-img img,
.showcase-card:hover .showcase-img video { transform: scale(1.08); }
.showcase-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: rgba(255,255,255,0.15);
}
.showcase-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(0,240,255,0.2);
  backdrop-filter: blur(10px);
  color: var(--accent-cyan);
  border: 1px solid rgba(0,240,255,0.3);
}
.showcase-badge.physical {
  background: rgba(255,0,85,0.2);
  color: var(--accent-rose);
  border-color: rgba(255,0,85,0.3);
}
.showcase-body {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
}
.showcase-body h3 {
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  line-height: 1.4;
}
.showcase-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
}
.showcase-price {
  font-weight: 800;
  color: var(--accent-cyan);
  font-size: 1rem;
}
.badge-discount {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 0, 85, 0.18);
  border: 1px solid rgba(255, 0, 85, 0.3);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}

/* ---------- Blog Banner ---------- */
.blog-banner {
  width: 90%;
  max-width: 820px;
  background: rgba(15, 15, 25, 0.5);
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin: 1rem 0 3rem;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.blog-banner:hover {
  background: rgba(30, 30, 45, 0.65);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}
.blog-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(0,240,255,0.05), transparent, rgba(255,0,85,0.05));
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.blog-banner:hover::after { opacity: 1; }
.blog-thumb {
  width: 70px;
  height: 70px;
  border-radius: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: rgba(255,255,255,0.3);
}
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-info {
  flex: 1;
  min-width: 200px;
}
.blog-info .category-badge {
  display: inline-block;
  padding: 0.2rem 0.9rem;
  border-radius: 2rem;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(0,240,255,0.12);
  color: var(--accent-cyan);
  margin-bottom: 0.4rem;
}
.blog-info h4 { font-size: 1.1rem; margin-bottom: 0.3rem; color: #fff; font-weight: 700; }
.blog-info .meta {
  display: flex;
  gap: 0.8rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  flex-wrap: wrap;
}
.blog-info .excerpt {
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  margin-top: 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-banner .btn-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 0.65rem 1.8rem;
  border-radius: 2.5rem;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-weight: 500;
}
.blog-banner .btn-outline:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);
}
.blog-banner .btn-outline i { transition: transform 0.3s ease; }
.blog-banner .btn-outline:hover i { transform: translateX(-4px); }

/* ---------- Features Grid ---------- */
.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 1000px;
  margin: 0 0 3rem;
}
.feature-item {
  flex: 1 1 200px;
  text-align: center;
  padding: 1.5rem 1.2rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.4s ease;
}
.feature-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
.feature-item i {
  font-size: 2.2rem;
  margin-bottom: 0.8rem;
  color: var(--accent-cyan);
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.5));
  display: inline-block;
  transition: transform 0.3s ease;
}
.feature-item:hover i { transform: scale(1.1); }
.feature-item h5 { font-weight: 700; margin-bottom: 0.5rem; font-size: 1.1rem; }
.feature-item p { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.7; }

/* ---------- Newsletter ---------- */
.newsletter-section {
  width: 100%;
  max-width: 650px;
  margin: 1.5rem 0 3rem;
}
.newsletter-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(0,240,255,0.15);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.newsletter-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0,240,255,0.05) 0%, transparent 60%);
  pointer-events: none;
}
.newsletter-card h2 {
  font-weight: 900;
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  position: relative;
}
.newsletter-card p {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  position: relative;
  font-size: 0.9rem;
}
.newsletter-form {
  display: flex;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}
.newsletter-form input {
  flex: 1;
  min-width: 220px;
  padding: 12px 20px;
  border-radius: 40px;
  border: 1.5px solid rgba(0,240,255,0.3);
  background: rgba(0,0,0,0.3);
  color: #fff;
  font-size: 0.95rem;
  font-family: var(--font-main);
  outline: none;
  transition: 0.3s;
}
.newsletter-form input:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 15px rgba(0,240,255,0.3);
  background: rgba(0,0,0,0.5);
}
.newsletter-btn {
  padding: 12px 28px;
  border-radius: 40px;
  border: none;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: 0.3s;
  font-family: var(--font-main);
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,240,255,0.2);
}
.newsletter-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,240,255,0.4);
  filter: brightness(1.1);
}

/* ---------- Footer ---------- */
.footer {
  margin-top: auto;
  padding: 2rem 0 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
}

/* ---------- Animations ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   LIGHT MODE – Full Override (includes product card fix)
============================================================= */
body.light-mode .card-glass {
  background: rgba(255, 255, 255, 0.6);
  border-color: transparent;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
}
body.light-mode .card-glass.bg-image { background-color: transparent !important; }
body.light-mode .card-glass .desc {
  background: rgba(255, 255, 255, 0.8);
  color: rgba(15, 23, 42, 0.8);
  border-color: rgba(15, 23, 42, 0.05);
}
body.light-mode .card-glass:hover {
  border-color: transparent;
  box-shadow: 0 30px 60px rgba(216, 27, 63, 0.1);
}
body.light-mode .card-glass::after {
  background: linear-gradient(135deg, #d81b3f, #7209b7);
}
body.light-mode .hero h1 {
  background: linear-gradient(135deg, #1e293b 20%, #d81b3f 60%, #7209b7 90%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(216, 27, 63, 0.2));
}
body.light-mode .hero .tagline { color: rgba(15, 23, 42, 0.7); }
body.light-mode .hero .brand { color: rgba(15, 23, 42, 0.55); }
body.light-mode .hero .brand::before,
body.light-mode .hero .brand::after {
  background: linear-gradient(90deg, transparent, #d81b3f, transparent);
  opacity: 0.5;
}
body.light-mode .section-header h2 {
  background: linear-gradient(135deg, #1e293b, #d81b3f);
  -webkit-background-clip: text;
  background-clip: text;
}
body.light-mode .badge-glow {
  color: #d81b3f;
  border-color: rgba(216, 27, 63, 0.3);
  box-shadow: 0 0 12px rgba(216, 27, 63, 0.1);
}
body.light-mode .stat-card {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
}
body.light-mode .stat-card:hover {
  border-color: rgba(216, 27, 63, 0.3);
  box-shadow: 0 15px 30px rgba(216, 27, 63, 0.1);
}
body.light-mode .stat-num {
  background: linear-gradient(135deg, #0077b6, #d81b3f);
  -webkit-background-clip: text;
  background-clip: text;
}
/* FIX: product cards light background */
body.light-mode .showcase-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
}
body.light-mode .showcase-card:hover {
  border-color: #d81b3f;
  box-shadow: 0 20px 40px rgba(216, 27, 63, 0.1);
}
body.light-mode .showcase-img {
  background: rgba(255,255,255,0.2);   /* lighten the dark overlay */
}
body.light-mode .showcase-body h3 { color: #1e293b; }
body.light-mode .showcase-price { color: #0077b6; }
body.light-mode .blog-banner {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 15px 30px rgba(15, 23, 42, 0.05);
}
body.light-mode .blog-info h4 { color: #1e293b; }
body.light-mode .blog-info .meta { color: rgba(15, 23, 42, 0.6); }
body.light-mode .blog-info .excerpt { color: rgba(15, 23, 42, 0.75); }
body.light-mode .feature-item {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.03);
}
body.light-mode .feature-item:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(15, 23, 42, 0.15);
}
body.light-mode .newsletter-card {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(216, 27, 63, 0.2);
}
body.light-mode .newsletter-form input {
  background: rgba(255, 255, 255, 0.9);
  color: #1e293b;
  border-color: rgba(15, 23, 42, 0.15);
}
body.light-mode .newsletter-form input:focus {
  border-color: #d81b3f;
  box-shadow: 0 0 12px rgba(216, 27, 63, 0.2);
}
body.light-mode .newsletter-btn {
  background: linear-gradient(135deg, #d81b3f, #7209b7);
}
body.light-mode .card-glass .cta-btn {
  background: rgba(255, 255, 255, 0.6);
  color: #1e293b;
  border-color: rgba(15, 23, 42, 0.15);
}
body.light-mode .card-glass:hover .cta-btn {
  background: #1e293b;
  color: #fff;
  border-color: #1e293b;
  box-shadow: 0 10px 25px rgba(30, 41, 59, 0.2);
}
body.light-mode .blog-banner .btn-outline {
  border-color: rgba(15, 23, 42, 0.2);
  color: #1e293b;
}
body.light-mode .blog-banner .btn-outline:hover {
  background: #1e293b;
  color: #fff;
  border-color: #1e293b;
}

/* ========== REDUCED VISUAL EFFECTS (Light Mode) ========== */
body.reduced-visual-effects .bg-aura::before,
body.reduced-visual-effects .bg-aura::after,
body.reduced-visual-effects .hero-content,
body.reduced-visual-effects [class*="fadeInUp"] {
  animation: none !important;
  transition: none !important;
}

body.reduced-visual-effects .hero .tagline,
body.reduced-visual-effects .hero .brand,
body.reduced-visual-effects .section-header,
body.reduced-visual-effects .card-glass,
body.reduced-visual-effects .showcase-card,
body.reduced-visual-effects .blog-banner,
body.reduced-visual-effects .feature-item,
body.reduced-visual-effects .newsletter-card {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

body.reduced-visual-effects .hero .brand::before,
body.reduced-visual-effects .hero .brand::after {
  animation: none !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .nav-auth-desktop { display: none; }
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: rgba(10, 10, 12, 0.85);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    flex-direction: column;
    align-items: flex-start;
    padding: 5rem 2rem 2rem;
    transition: right 0.35s ease;
    box-shadow: -10px 0 30px rgba(0,0,0,0.6);
    z-index: 999;
    gap: 0.3rem;
    border-left: 1px solid var(--nav-border);
  }
  .nav-links.active { right: 0; }
  .nav-item {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
  }
  .hamburger { display: flex; }
  .nav-actions-mobile {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1.5rem;
    gap: 0.4rem;
  }
}
@media (max-width: 768px) {
  .page-wrapper { padding: 1rem 1rem 3rem; }
  .stories-bar { margin-bottom: 1.5rem; }
  .store-story-card { width: 64px; }
  .store-story-media { width: 60px; height: 60px; }
  .hero { margin: 1rem 0 2rem; }
  .hero h1 { font-size: 2.1rem; }
  .hero .brand { font-size: 0.8rem; letter-spacing: 0.32em; }
  .hero .tagline { font-size: 0.95rem; }
  .cards-grid { flex-direction: column; align-items: center; gap: 1.5rem; margin: 1.5rem 0 3rem; }
  .card-glass { max-width: 100%; width: 100%; padding: 1.5rem; min-height: 320px; }
  .card-glass h2 { font-size: 1.4rem; }
  .card-glass .icon { font-size: 2rem; }
  .card-glass .desc { font-size: 0.9rem; line-height: 1.55; padding: 0.9rem; margin-bottom: 1.2rem; }
  .card-glass .cta-btn { padding: 0.8rem 1.2rem; font-size: 0.9rem; width: 100%; margin-top: auto; }
  .stats-strip { gap: 12px; margin-bottom: 3rem; }
  .stat-card { padding: 1.2rem 1rem; min-width: 120px; }
  .stat-num { font-size: 1.8rem; }
  .stat-label { font-size: 0.8rem; }
  .showcase-section { margin-bottom: 3rem; }
  .section-header { margin-bottom: 2rem; }
  .section-header h2 { font-size: 1.6rem; }
  .showcase-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 1rem; }
  .showcase-body { padding: 1rem; }
  .showcase-body h3 { font-size: 0.9rem; }
  .showcase-price { font-size: 0.95rem; }
  .blog-banner { flex-direction: column; text-align: center; padding: 1.5rem; width: 100%; gap: 1rem; }
  .blog-thumb { width: 60px; height: 60px; margin: 0 auto; }
  .blog-info { width: 100%; }
  .blog-info h4 { font-size: 1.1rem; }
  .blog-info .meta { justify-content: center; font-size: 0.75rem; }
  .blog-banner .btn-outline { width: 100%; justify-content: center; padding: 0.8rem 1.5rem; }
  .features { flex-direction: column; align-items: center; gap: 1rem; }
  .feature-item { width: 100%; max-width: 350px; padding: 1.5rem 1rem; }
  .feature-item i { font-size: 2rem; }
  .feature-item h5 { font-size: 1.1rem; }
  .newsletter-section { margin: 1.5rem 0 3rem; }
  .newsletter-card { padding: 2rem 1.5rem; }
  .newsletter-card h2 { font-size: 1.5rem; }
  .newsletter-form { flex-direction: column; align-items: stretch; gap: 10px; }
  .newsletter-form input, .newsletter-btn { width: 100%; min-width: 0; }
}
@media (max-width: 640px) {
  .hero h1 { font-size: 2rem; }
  .card-glass { padding: 1.2rem; min-height: 280px; }
  .card-glass h2 { font-size: 1.4rem; }
  .card-glass .desc { font-size: 0.9rem; }
  .card-glass .cta-btn { font-size: 0.9rem; padding: 0.8rem 1rem; }
  .showcase-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .showcase-card { display: flex; flex-direction: column; min-height: 0; }
  .showcase-body { padding: 1rem; }
  .showcase-body h3 { font-size: 0.95rem; }
  .showcase-price { font-size: 0.95rem; }
  .badge-discount { font-size: 0.75rem; padding: 0.35rem 0.75rem; }
  .stat-card { min-width: 100px; padding: 1rem 0.5rem; }
  .stat-num { font-size: 1.5rem; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 2rem; }
  .card-glass { padding: 1.2rem; min-height: 280px; }
  .card-glass h2 { font-size: 1.4rem; }
  .card-glass .desc { font-size: 0.9rem; }
  .card-glass .cta-btn { font-size: 0.9rem; padding: 0.8rem 1rem; }
  .showcase-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .showcase-body h3 { font-size: 0.95rem; }
  .showcase-price { font-size: 0.95rem; }
  .badge-discount { font-size: 0.75rem; padding: 0.35rem 0.75rem; }
  .stat-card { min-width: 100px; padding: 1rem 0.5rem; }
  .stat-num { font-size: 1.5rem; }
}

/* Optimisation: disable expensive backdrop filters on small screens */
@media (max-width: 768px) {
  .landing-body .navbar,
  .landing-body .card-glass,
  .landing-body .stat-card,
  .landing-body .showcase-card,
  .landing-body .blog-banner,
  .landing-body .feature-item,
  .landing-body .newsletter-card,
  .landing-body .showcase-badge,
  .landing-body .blog-info .category-badge,
  .landing-body .store-story-media,
  .landing-body .store-story-viewer-panel,
  .landing-body .store-story-viewer-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}



/* Make landing-card background image cover the full card */
.card-glass.bg-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Make landing cards behave like responsive hero slides */
@media (min-width: 769px) {
  .cards-grid {
    align-items: stretch;
  }
  .card-glass {
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
  }
}

/* Ensure media always covers the full card */
.card-glass.bg-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.card-glass .landing-card-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Force landing cards to be fully responsive, like two hero slides */
.cards-grid {
  align-items: stretch !important;
}

.card-glass {
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

@media (max-width: 768px) {
  .cards-grid {
    flex-direction: column !important;
  }
  .card-glass {
    aspect-ratio: 16 / 10 !important;   /* same as home hero on mobile */
    width: 100% !important;
    min-height: 0 !important;
  }
}

.card-glass.bg-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.card-glass .landing-card-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   ULTIMATE LANDING HERO CARDS – HOME HERO BEHAVIOUR
   ========================================================= */

/* Desktop / tablet: two equal hero cards */
@media (min-width: 769px) {
  .cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: min(100%, 1080px) !important;
    margin: 1.5rem auto 3rem !important;
  }

  .card-glass {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box;
    overflow: hidden;
  }
}

/* Mobile: single column, full-width hero card */
@media (max-width: 768px) {
  .cards-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin: 1.5rem auto 3rem !important;
  }

  .card-glass {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    aspect-ratio: 16 / 10 !important;   /* same as home hero mobile */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box;
    overflow: hidden;
  }
}

/* Ensure media always covers the full card */
.card-glass.bg-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.card-glass .landing-card-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}




/* =========================================================
   LANDING SPLIT CARDS – RESPONSIVE TEXT & CTA FIX
   Fixes text/icon/desc/cta scaling on zoomed mobile
   ========================================================= */

.card-glass .card-header {
  gap: clamp(0.5rem, 2vw, 0.8rem);
  margin-bottom: clamp(0.75rem, 2vw, 1.2rem);
}

.card-glass .icon {
  font-size: clamp(1.5rem, 5vw, 2.2rem) !important;
  flex-shrink: 0;
}

.card-glass h2 {
  font-size: clamp(1.1rem, 3.5vw, 1.6rem) !important;
  line-height: 1.35;
  word-break: break-word;
}

.card-glass .desc {
  font-size: clamp(0.8rem, 2.5vw, 1rem) !important;
  line-height: 1.8;
  padding: clamp(0.7rem, 2vw, 1rem) clamp(0.8rem, 2.5vw, 1.2rem) !important;
  margin-bottom: clamp(0.8rem, 2vw, 1.5rem) !important;
  white-space: normal;
  word-break: break-word;
}

.card-glass .cta-btn {
  font-size: clamp(0.8rem, 2.5vw, 1rem) !important;
  padding: clamp(0.65rem, 2vw, 0.8rem) clamp(0.9rem, 3vw, 1.5rem) !important;
  white-space: normal !important;
  text-align: center;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 1vw, 0.6rem);
}

.card-glass .cta-btn i {
  font-size: 0.9em;
}

/* Mobile: allow cards to size naturally based on content */
@media (max-width: 768px) {
  .cards-grid {
    width: 100% !important;
    margin: 1.25rem 0 2.5rem !important;
    gap: 1.25rem !important;
  }

  .card-glass {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(1.1rem, 4vw, 1.5rem) !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .card-glass .card-content {
    width: 100%;
  }
}

/* Small phones / high zoom */
@media (max-width: 480px) {
  .card-glass {
    padding: clamp(1rem, 4.5vw, 1.2rem) !important;
  }

  .card-glass h2 {
    font-size: clamp(1.1rem, 5vw, 1.35rem) !important;
  }

  .card-glass .desc {
    font-size: clamp(0.8rem, 4vw, 0.95rem) !important;
  }

  .card-glass .cta-btn {
    font-size: clamp(0.78rem, 4vw, 0.92rem) !important;
  }
}


/* =========================================================
   LANDING SPLIT CARDS – FIXED 16:10 RATIO + CONTAINER QUERIES
   Cards stay static; inner content scales with card width.
   ========================================================= */

/* Force 16:10 ratio on all screens */
.card-glass {
  container-type: inline-size;
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

/* Override any mobile aspect-ratio:auto from previous block */
@media (max-width: 768px) {
  .card-glass {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

/* Container-query-based font and padding scaling */
@supports (container-type: inline-size) {
  .card-glass .card-header {
    gap: clamp(0.4rem, 2cqw, 0.8rem) !important;
    margin-bottom: clamp(0.5rem, 2.5cqw, 1.2rem) !important;
  }

  .card-glass .icon {
    font-size: clamp(1.4rem, 7cqw, 2.2rem) !important;
    flex-shrink: 0;
  }

  .card-glass h2 {
    font-size: clamp(1rem, 5cqw, 1.6rem) !important;
    line-height: 1.3;
    word-break: break-word;
  }

  .card-glass .desc {
    font-size: clamp(0.75rem, 3.5cqw, 1rem) !important;
    line-height: 1.75;
    padding: clamp(0.5rem, 2.5cqw, 1rem) clamp(0.6rem, 3cqw, 1.2rem) !important;
    margin-bottom: clamp(0.5rem, 2.5cqw, 1.5rem) !important;
    white-space: normal;
    word-break: break-word;
    flex-grow: 1;
  }

  .card-glass .cta-btn {
    font-size: clamp(0.75rem, 3.5cqw, 1rem) !important;
    padding: clamp(0.5rem, 2.5cqw, 0.8rem) clamp(0.8rem, 4cqw, 1.5rem) !important;
    white-space: normal !important;
    text-align: center;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.3rem, 1.5cqw, 0.6rem);
  }

  .card-glass .cta-btn i {
    font-size: 0.9em;
  }
}

/* Fallback for older browsers without container queries */
@supports not (container-type: inline-size) {
  .card-glass .icon { font-size: clamp(1.5rem, 5vw, 2.2rem) !important; }
  .card-glass h2 { font-size: clamp(1.1rem, 3.5vw, 1.6rem) !important; }
  .card-glass .desc { font-size: clamp(0.8rem, 2.5vw, 1rem) !important; }
  .card-glass .cta-btn { font-size: clamp(0.8rem, 2.5vw, 1rem) !important; }
}


/* =========================================================
   EXTREME ZOOM / ULTRA-SMALL LANDING CARD
   Hide descriptive content, show only CTA button
   ========================================================= */

/* Container query: card width below 280px */
@container (max-width: 280px) {
  .card-glass .card-content {
    display: none !important;
  }

  .card-glass .cta-btn {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    min-width: 70% !important;
    margin: 0 !important;
    z-index: 5 !important;
    font-size: clamp(0.75rem, 5cqw, 1rem) !important;
    padding: clamp(0.6rem, 3cqw, 0.9rem) clamp(1rem, 5cqw, 1.5rem) !important;
    white-space: nowrap !important;
  }
}

/* Fallback for browsers without container queries */
@media (max-width: 320px) {
  .card-glass .card-content {
    display: none !important;
  }

  .card-glass .cta-btn {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    min-width: 70% !important;
    margin: 0 !important;
    z-index: 5 !important;
    font-size: 0.85rem !important;
    padding: 0.7rem 1.2rem !important;
    white-space: nowrap !important;
  }
}


/* =========================================================
   EXTREME ZOOM FIX REVISION
   Keep title/header visible; hide only description;
   CTA remains at the bottom of the card.
========================================================= */

@container (max-width: 280px) {
  .card-glass .card-content {
    display: flex !important;
    flex-direction: column;
    flex-grow: 1;
  }

  .card-glass .desc {
    display: none !important;
  }

  .card-glass .cta-btn {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: auto 0 0 0 !important;
    z-index: 3 !important;
    white-space: normal !important;
  }

  .card-glass h2 {
    font-size: clamp(1rem, 6cqw, 1.3rem) !important;
  }

  .card-glass .icon {
    font-size: clamp(1.2rem, 7cqw, 1.8rem) !important;
  }
}

/* Fallback for browsers without container queries */
@media (max-width: 320px) {
  .card-glass .card-content {
    display: flex !important;
    flex-direction: column;
    flex-grow: 1;
  }

  .card-glass .desc {
    display: none !important;
  }

  .card-glass .cta-btn {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: auto 0 0 0 !important;
    z-index: 3 !important;
    white-space: normal !important;
  }
}


/* =========================================================
   LANDING SHOWCASE PRODUCT CARDS – MOBILE HORIZONTAL STYLE
   Matches home product cards on small screens.
========================================================= */

@media (max-width: 768px) {
  .showcase-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .showcase-card {
    flex-direction: row !important;
    min-height: 0 !important;
    padding: 0.75rem !important;
    border-radius: 1.5rem !important;
    align-items: stretch !important;
  }

  .showcase-card .showcase-img {
    flex: 0 0 120px !important;
    width: 120px !important;
    height: 120px !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    margin-left: 0.75rem !important;
    aspect-ratio: auto !important;
  }

  .showcase-card .showcase-img img,
  .showcase-card .showcase-img video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .showcase-badge {
    top: 8px !important;
    right: 8px !important;
    padding: 4px 10px !important;
    font-size: 0.7rem !important;
  }

  .showcase-card .showcase-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 0.2rem 0 !important;
    gap: 0.5rem !important;
    min-width: 0;
  }

  .showcase-card .showcase-body h3 {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .showcase-card .showcase-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: auto !important;
  }

  .showcase-card .showcase-price {
    font-size: 0.95rem !important;
  }

  .showcase-card .badge-discount {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.75rem !important;
  }
}

@media (max-width: 480px) {
  .showcase-card .showcase-img {
    flex: 0 0 100px !important;
    width: 100px !important;
    height: 100px !important;
  }

  .showcase-card .showcase-body h3 {
    font-size: 0.9rem !important;
  }

  .showcase-card .showcase-price {
    font-size: 0.9rem !important;
  }
}


/* =========================================================
   LANDING SHOWCASE CARD TITLE/DESC – HOME-STYLE
   Adds title wrapper, toggle, and description.
========================================================= */

.showcase-body .title-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.showcase-body .product-title {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 0.35rem;
}

.showcase-body .product-title.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.showcase-body .title-toggle {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--accent-cyan);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.showcase-body .title-toggle:hover {
  background: rgba(0, 240, 255, 0.2);
}

.showcase-body .card-desc {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.light-mode .showcase-body .product-title {
  color: #1e293b;
}

body.light-mode .showcase-body .card-desc {
  color: rgba(30, 41, 59, 0.7);
}

/* Expand behavior for landing showcase card */
.showcase-card.title-expanded-card {
  overflow: visible !important;
  z-index: 5;
  position: relative;
}

/* Mobile: horizontal home-style card */
@media (max-width: 768px) {
  .showcase-body .product-title {
    -webkit-line-clamp: 1;
  }

  .showcase-body .card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .showcase-card.title-expanded-card .product-title {
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}


/* =========================================================
   LANDING SHOWCASE TITLE FULL EXPAND FIX
   Ensures full title is visible when expanded.
========================================================= */

.showcase-card.title-expanded-card {
  overflow: visible !important;
  height: auto !important;
}

.showcase-card.title-expanded-card .showcase-body .product-title {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: vertical !important;
  overflow: visible !important;
  max-height: none !important;
  white-space: normal !important;
}

.showcase-card.title-expanded-card .showcase-body .title-toggle {
  color: var(--accent-cyan);
}


/* =========================================================
   STORY VIEWER SCROLL + LIGHT THEME FIX
   ========================================================= */

/* Enable vertical scrolling in viewer */
.store-story-viewer {
  align-items: start !important;
  padding: 1rem !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.store-story-viewer-panel {
  max-height: calc(100vh - 2rem) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 1rem auto !important;
}

.store-story-viewer-media {
  flex-shrink: 0 !important;
  min-height: 30vh !important;
  max-height: 50vh !important;
}

.store-story-viewer-content {
  flex-shrink: 0 !important;
  padding: 1.5rem 1.75rem 2rem !important;
}

.store-story-viewer-content h3 {
  margin-bottom: 0.75rem !important;
  line-height: 1.3 !important;
  word-break: break-word;
}

.store-story-viewer-content p {
  margin-bottom: 1.25rem !important;
  line-height: 1.8 !important;
  white-space: normal !important;
  word-break: break-word;
  max-height: 40vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 4px;
}

.store-story-cta {
  flex-shrink: 0 !important;
  margin-top: 0.5rem !important;
}

/* Mobile story viewer */
@media (max-width: 768px) {
  .store-story-viewer {
    padding: 0.75rem !important;
  }

  .store-story-viewer-panel {
    max-height: calc(100vh - 1.5rem) !important;
  }

  .store-story-viewer-media {
    min-height: 32vh !important;
    max-height: 42vh !important;
  }

  .store-story-viewer-content {
    padding: 1.25rem 1rem 1.5rem !important;
  }

  .store-story-viewer-content h3 {
    font-size: 1.25rem !important;
  }

  .store-story-viewer-content p {
    max-height: 35vh;
  }
}

/* Horizontal story rail scroll snap */
.stories-scroll {
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.stories-scroll::-webkit-scrollbar {
  display: none;
}

.store-story-card {
  scroll-snap-align: start;
}

/* Light theme story viewer */
body.light-mode .store-story-viewer-panel {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  color: #0f172a !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.25) !important;
}

body.light-mode .store-story-viewer-media {
  background: #eef2f7 !important;
}

body.light-mode .store-story-viewer-content {
  color: #0f172a !important;
}

body.light-mode .store-story-viewer-content h3 {
  color: #0f172a !important;
}

body.light-mode .store-story-viewer-content p {
  color: rgba(15, 23, 42, 0.72) !important;
}

body.light-mode .store-story-close {
  background: rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}

body.light-mode .store-story-cta {
  background: linear-gradient(135deg, #d81b3f, #7209b7) !important;
  color: #ffffff !important;
}

/* Light theme story rail */
body.light-mode .store-story-info strong {
  color: #0f172a !important;
}

body.light-mode .store-story-placeholder {
  background: rgba(15, 23, 42, 0.06) !important;
  color: #d81b3f !important;
}


/* =========================================================
   LANDING AI ASSISTANT SECTION
   Compact, responsive, theme-aware
   ========================================================= */

.landing-ai-section {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
    box-sizing: border-box;
}

.landing-ai-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-xl, 1.6rem);
    padding: clamp(1rem, 3vw, 1.5rem);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.landing-ai-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.landing-ai-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-cyan, #00f0ff), var(--accent-purple, #8a2be2));
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 8px 20px rgba(0, 240, 255, 0.18);
}

.landing-ai-heading .badge {
    display: inline-block;
    margin-bottom: 4px;
}

.landing-ai-heading h2 {
    font-size: clamp(1.05rem, 3vw, 1.35rem);
    font-weight: 900;
    line-height: 1.4;
    color: #fff;
    margin: 0;
}

.landing-ai-messages {
    max-height: 280px;
    min-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg, 1.25rem);
}

.landing-ai-welcome {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(0, 240, 255, 0.08);
    color: var(--text-secondary, rgba(255, 255, 255, 0.75));
    font-size: 0.88rem;
    line-height: 1.7;
}

.landing-ai-welcome i {
    color: var(--accent-cyan, #00f0ff);
    font-size: 1.2rem;
    margin-top: 2px;
}

.landing-ai-message {
    display: flex;
    flex-direction: column;
}

.landing-ai-user {
    align-items: flex-end;
}

.landing-ai-assistant {
    align-items: flex-start;
}

.landing-ai-bubble {
    max-width: 90%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 0.86rem;
    line-height: 1.75;
    word-break: break-word;
}

.landing-ai-user .landing-ai-bubble {
    background: rgba(0, 240, 255, 0.12);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.landing-ai-assistant .landing-ai-bubble {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    border-bottom-left-radius: 4px;
}

.landing-ai-product-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin: 2px 0 8px;
}

.landing-ai-product-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 12px;
    background: rgba(0, 240, 255, 0.06);
    border: 1px solid rgba(0, 240, 255, 0.18);
    text-decoration: none;
    color: inherit;
    transition: 0.2s ease;
}

.landing-ai-product-card:hover {
    background: rgba(0, 240, 255, 0.12);
    border-color: var(--accent-cyan, #00f0ff);
}

.landing-ai-product-card img {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.landing-ai-product-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.landing-ai-product-title {
    font-size: 0.82rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-ai-product-price {
    white-space: nowrap;
    font-weight: 800;
    font-size: 0.8rem;
    color: #fff;
}

.landing-ai-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.landing-ai-form input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
}

.landing-ai-form input:focus {
    border-color: var(--accent-cyan, #00f0ff);
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.12);
}

.landing-ai-form button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--accent-cyan, #00f0ff), var(--accent-purple, #8a2be2));
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: 0.2s ease;
}

.landing-ai-form button:hover {
    filter: brightness(1.08);
}

.landing-ai-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 0, 85, 0.25);
    background: rgba(255, 0, 85, 0.08);
    color: #ff6b9d;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.landing-ai-clear:hover {
    background: rgba(255, 0, 85, 0.16);
    border-color: rgba(255, 0, 85, 0.45);
}

/* Light mode */
body.light-mode .landing-ai-card {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
}

body.light-mode .landing-ai-heading h2 {
    color: #0f172a;
}

body.light-mode .landing-ai-messages {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.08);
}

body.light-mode .landing-ai-welcome {
    background: rgba(6, 152, 214, 0.08);
    color: rgba(15, 23, 42, 0.72);
}

body.light-mode .landing-ai-user .landing-ai-bubble {
    background: rgba(6, 152, 214, 0.10);
    color: #0f172a;
}

body.light-mode .landing-ai-assistant .landing-ai-bubble {
    background: rgba(15, 23, 42, 0.05);
    color: #0f172a;
}

body.light-mode .landing-ai-form input {
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.12);
}

body.light-mode .landing-ai-product-card {
    background: rgba(6, 152, 214, 0.06);
    border-color: rgba(6, 152, 214, 0.18);
}

body.light-mode .landing-ai-product-price {
    color: #000;
}

@media (max-width: 768px) {
    .landing-ai-section {
        padding: 0 0.5rem;
        margin-bottom: 2rem;
    }

    .landing-ai-card {
        padding: 1rem;
    }

    .landing-ai-messages {
        max-height: 240px;
    }

    .landing-ai-heading h2 {
        font-size: 1rem;
    }

    .landing-ai-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 1.25rem;
    }
}


/* =========================================================
   LANDING AI TYPING DOTS
   ========================================================= */

.landing-ai-bubble .ai-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    animation: landingAiTyping 1.2s infinite;
}

.landing-ai-bubble .ai-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.landing-ai-bubble .ai-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes landingAiTyping {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

body.light-mode .landing-ai-bubble .ai-dot {
    background: rgba(15, 23, 42, 0.45);
}


/* =========================================================
   LUX LANDING AI OVERRIDE
   Premium glass card + fullscreen/minimize controls
   ========================================================= */

.landing-ai-section {
    max-width: 820px;
}

.landing-ai-card {
    position: relative;
    background: linear-gradient(135deg, rgba(18, 25, 48, 0.92), rgba(5, 8, 18, 0.98));
    border: 1px solid rgba(0, 240, 255, 0.16);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(0, 240, 255, 0.05);
    overflow: hidden;
}

.landing-ai-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 0%, rgba(0, 240, 255, 0.14), transparent 35%),
        radial-gradient(circle at 85% 100%, rgba(138, 43, 226, 0.12), transparent 40%);
    pointer-events: none;
    z-index: 0;
}

.landing-ai-card > * {
    position: relative;
    z-index: 1;
}

.landing-ai-header {
    margin-bottom: 1.1rem;
}

.landing-ai-actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.landing-ai-action-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    border: 1px solid rgba(0, 240, 255, 0.25);
    background: rgba(0, 240, 255, 0.07);
    color: var(--accent-cyan, #00f0ff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.landing-ai-action-btn:hover {
    background: rgba(0, 240, 255, 0.15);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
    transform: translateY(-1px);
}

.landing-ai-messages {
    background: rgba(4, 7, 16, 0.60);
    border-color: rgba(0, 240, 255, 0.10);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.30);
}

.landing-ai-form input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 240, 255, 0.18);
}

.landing-ai-form button {
    box-shadow: 0 8px 20px rgba(0, 240, 255, 0.20);
}

/* Fullscreen state */
.landing-ai-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    z-index: 2147483000 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: clamp(1rem, 3vw, 2rem) !important;
    overflow-y: auto !important;
}

.landing-ai-fullscreen .landing-ai-messages {
    flex: 1 1 auto;
    max-height: none !important;
}

/* Minimized state */
.landing-ai-minimized .landing-ai-messages,
.landing-ai-minimized .landing-ai-form,
.landing-ai-minimized .landing-ai-clear {
    display: none !important;
}

/* Light mode lux */
body.light-mode .landing-ai-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.98));
    border-color: rgba(6, 152, 214, 0.16);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.10), 0 0 30px rgba(6, 152, 214, 0.05);
}

body.light-mode .landing-ai-card::before {
    background:
        radial-gradient(circle at 15% 0%, rgba(6, 152, 214, 0.10), transparent 35%),
        radial-gradient(circle at 85% 100%, rgba(114, 9, 183, 0.08), transparent 40%);
}

body.light-mode .landing-ai-messages {
    background: rgba(255, 255, 255, 0.80);
    border-color: rgba(6, 152, 214, 0.12);
    box-shadow: none;
}

body.light-mode .landing-ai-action-btn {
    border-color: rgba(6, 152, 214, 0.25);
    background: rgba(6, 152, 214, 0.06);
    color: #d81b3f;
}


/* =========================================================
   LANDING AI FULLSCREEN STACKING + LIGHT COLORS FINAL FIX
   ========================================================= */

/* Fix fullscreen panel going behind navbar */
body:has(.landing-ai-fullscreen) .main-container,
body:has(.landing-ai-fullscreen) .page-wrapper {
    position: static !important;
    z-index: auto !important;
    overflow: visible !important;
}

.landing-ai-fullscreen {
    max-height: 100dvh !important;
    justify-content: flex-start !important;
    padding-top: clamp(1rem, 4vw, 2rem) !important;
}

/* Clear button centered + fixed size in fullscreen */
.landing-ai-fullscreen .landing-ai-clear {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    width: auto !important;
    min-width: 140px !important;
    margin: 12px auto 0 !important;
    padding: 8px 18px !important;
    font-size: 0.85rem !important;
    border-radius: 999px !important;
}

/* Vibrant light mode for landing AI section */
body.light-mode .landing-ai-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 50%, #eef7ff 100%) !important;
    border: 1px solid rgba(6, 152, 214, 0.22) !important;
    box-shadow:
        0 25px 60px rgba(15, 23, 42, 0.12),
        0 0 35px rgba(6, 152, 214, 0.10) !important;
}

body.light-mode .landing-ai-card::before {
    background:
        radial-gradient(circle at 15% 0%, rgba(255, 45, 85, 0.16), transparent 38%),
        radial-gradient(circle at 85% 100%, rgba(124, 58, 237, 0.13), transparent 42%) !important;
}

body.light-mode .landing-ai-header {
    color: #0f172a !important;
}

body.light-mode .landing-ai-heading h2 {
    color: #0f172a !important;
}

body.light-mode .landing-ai-icon {
    background: linear-gradient(135deg, #ff5577, #8b5cf6) !important;
    box-shadow: 0 8px 20px rgba(255, 45, 85, 0.22) !important;
    color: #ffffff !important;
}

body.light-mode .landing-ai-messages {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(6, 152, 214, 0.14) !important;
    box-shadow: inset 0 0 24px rgba(6, 152, 214, 0.04) !important;
}

body.light-mode .landing-ai-welcome {
    background: linear-gradient(135deg, rgba(6, 152, 214, 0.10), rgba(124, 58, 237, 0.07)) !important;
    color: #334155 !important;
    border: 1px solid rgba(6, 152, 214, 0.10);
}

body.light-mode .landing-ai-welcome i {
    color: #ff2d55 !important;
}

body.light-mode .landing-ai-user .landing-ai-bubble {
    background: linear-gradient(135deg, #e0f2fe, #dbeafe) !important;
    color: #0f172a !important;
    border: 1px solid rgba(6, 152, 214, 0.12);
}

body.light-mode .landing-ai-assistant .landing-ai-bubble {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
    color: #1e293b !important;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

body.light-mode .landing-ai-form input {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(6, 152, 214, 0.20) !important;
}

body.light-mode .landing-ai-form input:focus {
    border-color: #ff2d55 !important;
    box-shadow: 0 0 0 4px rgba(255, 45, 85, 0.12) !important;
}

body.light-mode .landing-ai-form button {
    background: linear-gradient(135deg, #ff5577, #8b5cf6) !important;
    box-shadow: 0 8px 20px rgba(255, 45, 85, 0.22) !important;
}

body.light-mode .landing-ai-clear {
    background: rgba(219, 39, 119, 0.07) !important;
    border-color: rgba(219, 39, 119, 0.22) !important;
    color: #be185d !important;
}

body.light-mode .landing-ai-clear:hover {
    background: rgba(219, 39, 119, 0.12) !important;
    border-color: rgba(219, 39, 119, 0.40) !important;
}

body.light-mode .landing-ai-product-card {
    background: rgba(6, 152, 214, 0.07) !important;
    border-color: rgba(6, 152, 214, 0.20) !important;
}

body.light-mode .landing-ai-product-card:hover {
    background: rgba(6, 152, 214, 0.12) !important;
    border-color: #ff2d55 !important;
}

body.light-mode .landing-ai-product-price {
    color: #a80023 !important;
}

body.light-mode .landing-ai-action-btn {
    background: rgba(6, 152, 214, 0.07) !important;
    border-color: rgba(6, 152, 214, 0.22) !important;
    color: #ff2d55 !important;
}

body.light-mode .landing-ai-action-btn:hover {
    background: rgba(6, 152, 214, 0.14) !important;
    box-shadow: 0 0 16px rgba(6, 152, 214, 0.20) !important;
}

body.light-mode .landing-ai-bubble .ai-dot {
    background: rgba(255, 45, 85, 0.55) !important;
}


/* =========================================================
   LANDING AI DISCLAIMER
   ========================================================= */

.landing-ai-disclaimer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px 0 0;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid rgba(0, 240, 255, 0.12);
    color: var(--text-secondary, rgba(255, 255, 255, 0.70));
    font-size: 0.78rem;
    text-align: center;
    line-height: 1.7;
}

.landing-ai-disclaimer i {
    color: var(--accent-cyan, #00f0ff);
    font-size: 0.85rem;
}

/* Light mode */
body.light-mode .landing-ai-disclaimer {
    background: rgba(6, 152, 214, 0.05);
    border-color: rgba(6, 152, 214, 0.12);
    color: rgba(15, 23, 42, 0.65);
}

body.light-mode .landing-ai-disclaimer i {
    color: #ff2d55;
}


/* =========================================================
   LANDING AI CHAT ALIGNMENT RTL SWAP
   User -> right, AI -> left in RTL
   ========================================================= */

.landing-ai-user {
    align-items: flex-start !important;   /* right in RTL */
}

.landing-ai-assistant {
    align-items: flex-end !important;     /* left in RTL */
}


/* =========================================================
   LANDING AI EXTREME ZOOM MOBILE FIX
   Compact layout for very narrow / heavily zoomed screens.
   ========================================================= */

@media (max-width: 600px) {
    .landing-ai-section {
        padding: 0 0.25rem !important;
        margin-bottom: 2rem !important;
    }

    .landing-ai-card {
        padding: 0.75rem !important;
        border-radius: 1.25rem !important;
    }

    .landing-ai-header {
        gap: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    .landing-ai-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 12px !important;
        font-size: 1rem !important;
    }

    .landing-ai-heading h2 {
        font-size: 0.95rem !important;
    }

    .landing-ai-heading .badge {
        font-size: 0.68rem !important;
        padding: 3px 10px !important;
    }

    .landing-ai-actions {
        gap: 4px !important;
    }

    .landing-ai-action-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 10px !important;
        font-size: 0.85rem !important;
    }

    .landing-ai-messages {
        max-height: 220px !important;
        min-height: 80px !important;
        padding: 6px !important;
        gap: 8px !important;
        border-radius: 1rem !important;
    }

    .landing-ai-welcome {
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
    }

    .landing-ai-bubble {
        max-width: 94% !important;
        padding: 7px 10px !important;
        font-size: 0.78rem !important;
        border-radius: 12px !important;
    }

    .landing-ai-product-card {
        padding: 6px !important;
        gap: 8px !important;
    }

    .landing-ai-product-card img {
        width: 36px !important;
        height: 36px !important;
        border-radius: 8px !important;
    }

    .landing-ai-product-title {
        font-size: 0.75rem !important;
    }

    .landing-ai-product-price {
        font-size: 0.72rem !important;
    }

    .landing-ai-form {
        gap: 6px !important;
        margin-top: 8px !important;
    }

    .landing-ai-form input {
        padding: 9px 12px !important;
        font-size: 0.82rem !important;
    }

    .landing-ai-form button {
        width: 38px !important;
        height: 38px !important;
        font-size: 0.9rem !important;
    }

    .landing-ai-clear {
        margin-top: 8px !important;
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
    }

    .landing-ai-disclaimer {
        font-size: 0.68rem !important;
        padding: 4px 8px !important;
        margin-top: 8px !important;
    }

    .landing-ai-fullscreen {
        padding: 0.75rem !important;
    }

    .landing-ai-fullscreen .landing-ai-messages {
        max-height: none !important;
        min-height: 120px !important;
    }
}

@media (max-width: 380px) {
    .landing-ai-header {
        align-items: flex-start !important;
    }

    .landing-ai-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    .landing-ai-heading h2 {
        font-size: 0.88rem !important;
    }

    .landing-ai-action-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
    }

    .landing-ai-messages {
        max-height: 180px !important;
    }

    .landing-ai-bubble {
        font-size: 0.74rem !important;
    }

    .landing-ai-form input {
        font-size: 0.78rem !important;
        padding: 8px 10px !important;
    }
}


/* =========================================================
   LANDING AI DESKTOP CENTERED FULLSCREEN
   Desktop/tablet: centered lux panel
   Mobile: true fullscreen
   ========================================================= */

@media (min-width: 769px) {
    .landing-ai-fullscreen {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(920px, calc(100vw - 2rem)) !important;
        max-width: 100% !important;
        height: min(90vh, 820px) !important;
        max-height: 90vh !important;
        border-radius: 24px !important;
        padding: clamp(1rem, 2.5vw, 1.5rem) !important;
        margin: 0 !important;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55) !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 768px) {
    .landing-ai-fullscreen {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        padding: 0.75rem !important;
        margin: 0 !important;
    }
}


/* =========================================================
   LANDING AI BUBBLE MATCH SUPPORT
   Exactly copy support AI chat formatting and markdown styles.
   ========================================================= */

.landing-ai-bubble {
    max-width: 85% !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
    word-break: break-word !important;
}

.landing-ai-user .landing-ai-bubble {
    background: rgba(0,240,255,0.12) !important;
    color: var(--text, #fff) !important;
    border-bottom-left-radius: 4px !important;
}

.landing-ai-assistant .landing-ai-bubble {
    background: rgba(255,255,255,0.06) !important;
    color: var(--text-secondary, #e2e8f0) !important;
    border-bottom-right-radius: 4px !important;
}

/* Markdown styles copied from support AI */
.landing-ai-bubble h2,
.landing-ai-bubble h3,
.landing-ai-bubble h4 {
    margin: 8px 0 4px !important;
    color: var(--text, #fff) !important;
    line-height: 1.4 !important;
}

.landing-ai-bubble h2 { font-size: 1.1rem !important; }
.landing-ai-bubble h3 { font-size: 1rem !important; }
.landing-ai-bubble h4 { font-size: 0.95rem !important; }

.landing-ai-bubble ul,
.landing-ai-bubble ol {
    margin: 6px 0 !important;
    padding-inline-start: 20px !important;
}

.landing-ai-bubble li {
    margin-bottom: 4px !important;
}

.landing-ai-bubble a {
    color: var(--primary-light, #00f0ff) !important;
    text-decoration: underline !important;
}

.landing-ai-bubble code {
    background: rgba(0, 240, 255, 0.1) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: monospace !important;
    direction: ltr !important;
}

.landing-ai-bubble pre {
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    padding: 8px !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    direction: ltr !important;
    text-align: left !important;
}

.landing-ai-bubble pre code {
    background: none !important;
    padding: 0 !important;
}

/* Colorful Markdown */
.landing-ai-bubble strong {
    color: #fbbf24 !important;
    font-weight: 800 !important;
}

.landing-ai-bubble h2 {
    color: var(--primary-light, #00f0ff) !important;
    font-weight: 900 !important;
}

.landing-ai-bubble h3 {
    color: var(--accent-light, #a855f7) !important;
    font-weight: 800 !important;
}

.landing-ai-bubble h4 {
    color: var(--rose, #ff0055) !important;
    font-weight: 800 !important;
}

.landing-ai-bubble em {
    color: #f472b6 !important;
}

.landing-ai-bubble a {
    color: #38bdf8 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

.landing-ai-bubble li::marker {
    color: var(--primary-light, #00f0ff) !important;
    font-weight: bold !important;
}

.landing-ai-bubble blockquote {
    border-right: 3px solid var(--primary-light, #00f0ff) !important;
    color: #cbd5e1 !important;
    padding-right: 10px !important;
    margin: 8px 0 !important;
    background: rgba(0,240,255,0.05) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
}

/* Light mode */
body.light-mode .landing-ai-bubble strong {
    color: #b45309 !important;
}

body.light-mode .landing-ai-bubble h2 {
    color: #a80023 !important;
}

body.light-mode .landing-ai-bubble h3 {
    color: #7c3aed !important;
}

body.light-mode .landing-ai-bubble h4 {
    color: #be185d !important;
}

body.light-mode .landing-ai-bubble a {
    color: #ff2d55 !important;
}

body.light-mode .landing-ai-bubble li::marker {
    color: #ff2d55 !important;
}


/* =========================================================
   LIGHT MODE LANDING SPLIT CARD HIGHLIGHT FIX
   Physical -> red, Digital -> blue on hover/touch
========================================================= */

body.light-mode .card-physical:hover,
body.light-mode .card-physical:active {
  border-color: transparent;
  box-shadow: 0 30px 60px rgba(217, 0, 77, 0.16);
}

body.light-mode .card-physical:hover::after,
body.light-mode .card-physical:active::after {
  background: linear-gradient(135deg, #d9004d, #ff6b9d);
}

body.light-mode .card-digital:hover,
body.light-mode .card-digital:active {
  border-color: transparent;
  box-shadow: 0 30px 60px rgba(216, 27, 63, 0.16);
}

body.light-mode .card-digital:hover::after,
body.light-mode .card-digital:active::after {
  background: linear-gradient(135deg, #d81b3f, #ff8099);
}


/* =========================================================
   INSTAGRAM-STYLE STORY VIEWER NAVIGATION
   Desktop next/prev indicators, touch swipe remains gesture-only
========================================================= */

.store-story-prev,
.store-story-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.store-story-prev { left: 1rem; }
.store-story-next { right: 1rem; }

@media (min-width: 769px) and (hover: hover) {
  .store-story-prev,
  .store-story-next {
    display: flex;
  }

  .store-story-prev:hover,
  .store-story-next:hover {
    background: rgba(255, 255, 255, 0.22);
    color: var(--accent-cyan, #00f0ff);
  }
}

body.light-mode .store-story-prev,
body.light-mode .store-story-next {
  background: rgba(15, 23, 42, 0.10);
  color: #0f172a;
}

body.light-mode .store-story-prev:hover,
body.light-mode .store-story-next:hover {
  background: rgba(15, 23, 42, 0.18);
  color: #d81b3f;
}


/* =========================================================
   STORY VIEWER TOUCH + RTL NAV FIX
========================================================= */

.store-story-viewer-panel {
  touch-action: pan-y !important;
}

.store-story-prev {
  left: auto !important;
  right: 1rem !important;
}

.store-story-next {
  right: auto !important;
  left: 1rem !important;
}


/* =========================================================
   STORY VIEWER FULLSCREEN BUTTON + MODE
========================================================= */

.store-story-fullscreen {
  position: absolute;
  top: 1rem;
  left: 4.5rem;
  z-index: 6;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.store-story-fullscreen:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.05);
}

body.light-mode .store-story-fullscreen {
  background: rgba(15, 23, 42, 0.10);
  color: #0f172a;
}

body.light-mode .store-story-fullscreen:hover {
  background: rgba(15, 23, 42, 0.18);
  color: #d81b3f;
}

/* Fullscreen mode */
.store-story-viewer.store-story-viewer-fullscreen {
  padding: 0 !important;
}

.store-story-viewer.store-story-viewer-fullscreen .store-story-viewer-panel {
  width: 100vw !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.store-story-viewer.store-story-viewer-fullscreen .store-story-viewer-media {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  aspect-ratio: auto !important;
}

.store-story-viewer.store-story-viewer-fullscreen .store-story-viewer-content {
  flex-shrink: 0 !important;
  max-height: 35vh !important;
  overflow-y: auto !important;
}


/* =========================================================
   LANDING HERO PREMIUM REBUILD
   Dynamic aurora hero, performance-safe.
   ========================================================= */

.hero {
  position: relative;
  width: min(100%, 960px);
  margin: 1.25rem 0 0.75rem;
  padding: 2.5rem 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  isolation: isolate;
  overflow: visible;
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(90px);
  opacity: 0.28;
  will-change: transform;
}

.hero::before {
  width: 340px;
  height: 340px;
  top: -120px;
  right: -80px;
  background: radial-gradient(circle, var(--accent-cyan), transparent 65%);
  animation: heroOrbFloat 14s ease-in-out infinite alternate;
}

.hero::after {
  width: 300px;
  height: 300px;
  bottom: -130px;
  left: -70px;
  background: radial-gradient(circle, var(--accent-rose), transparent 65%);
  animation: heroOrbFloatAlt 18s ease-in-out infinite alternate;
}

@keyframes heroOrbFloat {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-20px, 18px, 0) scale(1.08); }
}

@keyframes heroOrbFloatAlt {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(18px, -20px, 0) scale(0.95); }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 1rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.8rem;
  font-weight: 500;
}

.hero-eyebrow::before {
  content: '✦';
  color: var(--accent-cyan);
  font-size: 0.9rem;
}

.hero h1 {
  position: relative;
  font-family: 'BZarBd', 'Tahoma', 'Arial', sans-serif;
  font-size: clamp(2.5rem, 7.5vw, 4.8rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.04em;
  margin: 0 0 0.6rem;
  background: linear-gradient(120deg, #ffffff 0%, var(--accent-cyan) 35%, var(--accent-purple) 60%, #ffffff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: heroTextShine 7s linear infinite;
  filter: drop-shadow(0 0 30px rgba(0, 240, 255, 0.35));
}

@keyframes heroTextShine {
  from { background-position: 0% center; }
  to   { background-position: 220% center; }
}

.hero .brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 0.5rem;
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.12);
}

.hero .brand::before,
.hero .brand::after {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  opacity: 0.8;
}

.hero .tagline {
  margin-top: 1rem;
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 1rem;
  font-weight: 400;
  max-width: 560px;
  line-height: 1.8;
}

/* Light mode */
body.light-mode .hero h1 {
  background: linear-gradient(120deg, #0f172a 0%, #d81b3f 35%, #7209b7 60%, #0f172a 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(6, 152, 214, 0.25));
}

body.light-mode .hero .brand {
  color: rgba(15, 23, 42, 0.8);
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(6, 152, 214, 0.25);
  box-shadow: 0 0 18px rgba(6, 152, 214, 0.10);
}

body.light-mode .hero .brand::before,
body.light-mode .hero .brand::after {
  background: linear-gradient(90deg, transparent, #d81b3f, transparent);
}

body.light-mode .hero .tagline {
  color: rgba(15, 23, 42, 0.68);
  background: rgba(255, 255, 255, 0.60);
  border-color: rgba(15, 23, 42, 0.08);
}

body.light-mode .hero-eyebrow {
  color: rgba(15, 23, 42, 0.68);
  background: rgba(255, 255, 255, 0.60);
  border-color: rgba(15, 23, 42, 0.08);
}

body.light-mode .hero-eyebrow::before {
  color: #d81b3f;
}

/* Reduced motion */
body.reduced-visual-effects .hero::before,
body.reduced-visual-effects .hero::after,
body.reduced-visual-effects .hero h1 {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .hero h1 {
    animation: none !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero {
    padding: 2rem 0.75rem 1.5rem;
  }

  .hero h1 {
    font-size: clamp(2.2rem, 10vw, 3rem);
  }

  .hero .brand {
    letter-spacing: 0.3em;
    font-size: 0.8rem;
  }

  .hero .tagline {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }
}


/* Force BZarBd only for landing hero main title */
.hero h1 {
  font-family: 'BZarBd', 'Tahoma', 'Arial', sans-serif !important;
}


/* =========================================================
   BZarBd FONT FACE FOR LANDING HERO MAIN TITLE
   ========================================================= */
@font-face {
  font-family: 'BZarBd';
  src: url("/static/fonts/BZarBd.6de4bc57e786.ttf") format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

.hero h1 {
  font-family: 'BZarBd', 'Tahoma', 'Arial', sans-serif !important;
}


/* =========================================================
   LANDING HERO SPACING FIX
   Reduce top gap between story bar and hero.
   ========================================================= */
.hero {
  margin: 0.25rem 0 0.75rem !important;
  padding-top: 0.5rem !important;
}

.stories-bar {
  margin-bottom: 0.25rem !important;
}

@media (max-width: 768px) {
  .hero {
    padding-top: 0.75rem !important;
  }

  .stories-bar {
    margin-bottom: 0.25rem !important;
  }
}


/* =========================================================
   LANDING HERO GPU PERFORMANCE FIX
   Disable dynamic animations and heavy blur.
   ========================================================= */
.hero::before,
.hero::after,
.hero h1 {
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}

.hero::before,
.hero::after {
  filter: blur(48px) !important;
  opacity: 0.20 !important;
}

.hero h1 {
  background-size: 100% auto !important;
}

/* =========================================================
   LUX LIGHT LANDING FINAL
   ========================================================= */
body.light-mode {
  --bg-deep: #eef4fb;
  --bg: #eef4fb;
  --bg-card: rgba(255,255,255,0.78);
  --glass-border: rgba(15,23,42,0.10);
  --text-primary: #0b1220;
  --text-secondary: rgba(11,18,32,0.72);
  --accent-cyan: #d81b3f;
  --accent-rose: #e11d48;
  --accent-purple: #7c3aed;
}

body.light-mode .lux-navbar {
  background: rgba(255,255,255,0.82);
  border-color: rgba(15,23,42,0.10);
  box-shadow: 0 12px 30px rgba(15,23,42,0.08);
}

body.light-mode .card-glass {
  background: rgba(255,255,255,0.80);
  border-color: rgba(15,23,42,0.10);
  box-shadow: 0 20px 50px rgba(15,23,42,0.10);
}

body.light-mode .card-glass .desc {
  background: rgba(255,255,255,0.86);
  color: rgba(11,18,32,0.72);
  border-color: rgba(15,23,42,0.08);
}

body.light-mode .card-glass .cta-btn {
  background: rgba(255,255,255,0.76);
  color: #0b1220;
  border-color: rgba(15,23,42,0.16);
}

body.light-mode .card-glass:hover .cta-btn {
  background: #0b1220;
  color: #ffffff;
  border-color: #0b1220;
}

body.light-mode .stat-card,
body.light-mode .showcase-card,
body.light-mode .blog-banner,
body.light-mode .feature-item,
body.light-mode .newsletter-card {
  background: rgba(255,255,255,0.82);
  border-color: rgba(15,23,42,0.10);
  box-shadow: 0 10px 30px rgba(15,23,42,0.07);
}

body.light-mode .showcase-card:hover,
body.light-mode .stat-card:hover,
body.light-mode .feature-item:hover,
body.light-mode .blog-banner:hover {
  background: rgba(255,255,255,0.96);
  border-color: rgba(255,45,85,0.35);
  box-shadow: 0 18px 45px rgba(255,45,85,0.14);
}

body.light-mode .hero .brand,
body.light-mode .hero .tagline,
body.light-mode .hero-eyebrow {
  background: rgba(255,255,255,0.72);
  border-color: rgba(15,23,42,0.10);
  color: rgba(11,18,32,0.70);
}

body.light-mode .hero .brand::before,
body.light-mode .hero .brand::after {
  background: linear-gradient(90deg, transparent, #d81b3f, transparent);
}


/* =========================================================
   LIGHT NAV OPACITY FIX
   ========================================================= */
body.light-mode .lux-navbar,
body.light-mode .lux-navbar.scrolled {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
}


/* =========================================================
   COOL BLUE WHITER BACKGROUND FINAL
   ========================================================= */
body.light-mode:not(.reduced-visual-effects) {
  background:
    radial-gradient(circle at 15% 0%, rgba(255,45,85,0.10), transparent 28%),
    radial-gradient(circle at 85% 12%, rgba(225,29,72,0.08), transparent 30%),
    radial-gradient(circle at 18% 55%, rgba(255,45,85,0.05), transparent 32%),
    radial-gradient(circle at 82% 65%, rgba(225,29,72,0.04), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(255,45,85,0.05), transparent 38%),
    linear-gradient(160deg, #ffffff 0%, #fbfdff 35%, #ffffff 65%, #fdf2f5 100%) !important;
}


/* ==========================================================================
   SAFE MOBILE LIGHT-MODE PERFORMANCE FIX (Appended)
   - Reduces expensive backdrop-filter, blur, and gradients on small screens.
   - Does NOT hide or modify media elements.
   - Does NOT override .card-glass background-image.
   ========================================================================== */
@media (max-width: 768px) {
  body.light-mode {
    background: #f1f5f9 !important;
    background-image: none !important;
  }

  body.light-mode .lux-navbar,
  body.light-mode .stat-card,
  body.light-mode .showcase-card,
  body.light-mode .blog-banner,
  body.light-mode .feature-item,
  body.light-mode .newsletter-card,
  body.light-mode .landing-ai-card,
  body.light-mode .store-story-viewer-panel,
  body.light-mode .store-story-viewer-backdrop,
  body.light-mode .support-panel,
  body.light-mode .category-sheet,
  body.light-mode .search-dialog,
  body.light-mode .navbar,
  body.light-mode .bottom-nav,
  body.light-mode .mobile-nav,
  body.light-mode .mega-menu,
  body.light-mode .mega-menu-catalog,
  body.light-mode .user-dropdown,
  body.light-mode .search-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
  }

  body.light-mode .card-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* background-image intentionally NOT changed */
  }

  body.light-mode .hero h1,
  body.light-mode .hero .brand,
  body.light-mode .hero .tagline,
  body.light-mode .section-header h2,
  body.light-mode .landing-ai-icon {
    filter: none !important;
  }
}


/* =========================================================
   FULLSCREEN STORY VIEWER + TEXT OVERLAY ON MEDIA
   Mobile-first, vertical media fills screen, dark readable text.
========================================================= */

.store-story-viewer-panel {
  position: relative;
}

.store-story-viewer-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.65) 55%, transparent 100%);
  padding: 2.5rem 1.5rem 1.5rem;
  color: #ffffff;
  pointer-events: none;
}

.store-story-viewer-content > * {
  pointer-events: auto;
}

.store-story-viewer-content h3,
.store-story-viewer-content p,
.store-story-viewer-content a {
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.store-story-text-toggle {
  position: absolute;
  top: 1rem;
  left: 8rem;
  z-index: 6;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.store-story-text-toggle:hover {
  background: rgba(255,255,255,0.18);
  transform: scale(1.05);
}

body.light-mode .store-story-text-toggle {
  background: rgba(15,23,42,0.10);
  color: #0f172a;
}

body.light-mode .store-story-text-toggle:hover {
  background: rgba(15,23,42,0.18);
  color: #d81b3f;
}

.hide-story-text .store-story-viewer-content {
  display: none !important;
}

/* Mobile: always fullscreen, vertical media fills viewport */
@media (max-width: 768px) {
  .store-story-viewer {
    padding: 0 !important;
  }

  .store-story-viewer-panel {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .store-story-viewer-media {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    height: auto !important;
  }

  .store-story-viewer-content {
    flex-shrink: 0 !important;
    max-height: 45vh !important;
    overflow-y: auto !important;
    position: absolute !important;
    bottom: 0 !important;
  }

  .store-story-text-toggle {
    top: 0.75rem !important;
    left: 5.5rem !important;
    width: 38px !important;
    height: 38px !important;
  }
}


/* =========================================================
   GLOBAL FULLSCREEN STORY VIEWER (desktop/tablet/mobile)
   Overrides any earlier media queries.
========================================================= */
.store-story-viewer {
  padding: 0 !important;
}

.store-story-viewer-panel {
  position: relative;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.store-story-viewer-media {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  height: auto !important;
}

.store-story-viewer-content {
  flex-shrink: 0 !important;
  max-height: 45vh !important;
  overflow-y: auto !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 4 !important;
}

/* Ensure text toggle button is always visible */
.store-story-text-toggle {
  display: flex !important;
}

body.light-mode .store-story-text-toggle {
  background: rgba(15, 23, 42, 0.10);
  color: #0f172a;
}

body.light-mode .store-story-text-toggle:hover {
  background: rgba(15, 23, 42, 0.18);
  color: #d81b3f;
}


/* Progress bar on top of story viewer */
.store-story-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 7;
  background: rgba(255,255,255,0.15);
}
.store-story-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
  transition: width 0.1s linear;
}


/* =========================================================
   STORY VIEWER BUTTONS ALIGNMENT
   Close at right, text toggle at left.
========================================================= */
.store-story-close {
  top: 1rem !important;
  right: 1rem !important;
  left: auto !important;
  z-index: 6 !important;
  width: 42px !important;
  height: 42px !important;
}

.store-story-text-toggle {
  top: 1rem !important;
  left: 1rem !important;
  right: auto !important;
  z-index: 6 !important;
  width: 42px !important;
  height: 42px !important;
}

@media (max-width: 768px) {
  .store-story-close {
    top: 0.75rem !important;
    right: 0.75rem !important;
    width: 38px !important;
    height: 38px !important;
  }

  .store-story-text-toggle {
    top: 0.75rem !important;
    left: 0.75rem !important;
    width: 38px !important;
    height: 38px !important;
  }
}


/* Prevent long-press selection/callout on story media */
.store-story-viewer-media img,
.store-story-viewer-media video {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  pointer-events: auto !important;
}


/* =========================================================
   STORY VIEWER LIGHT MODE TEXT OVERLAY BACKGROUND
   White gradient for readability with dark text.
========================================================= */
body.light-mode .store-story-viewer-content {
  background: linear-gradient(to top, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.82) 55%, transparent 100%) !important;
  text-shadow: none !important;
}

body.light-mode .store-story-viewer-content h3,
body.light-mode .store-story-viewer-content p,
body.light-mode .store-story-viewer-content a {
  text-shadow: none !important;
}


/* ===== LANDING BOTTOM NAV STRONG GLASS BLUR ===== */
@media (max-width: 1160px) {
  body.light-mode .bottom-nav {
    background: rgba(255, 255, 255, 0.58) !important;
    -webkit-backdrop-filter: blur(52px) saturate(200%) !important;
    backdrop-filter: blur(52px) saturate(200%) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
  }
}

/* =========================================================
   LANDING — SERVICES-OFF REBUILD (2026-09-18)
   - single-column physical card (digital card removed)
   - AI curated shelf
   - 4-tile blog grid (image-only)
   - newsletter section removed
   ========================================================= */

/* ---------- Cards grid: single wide card ---------- */
.cards-grid {
  grid-template-columns: 1fr !important;
}
.cards-grid .card-glass {
  min-height: 420px;
}
@media (max-width: 768px) {
  .cards-grid .card-glass { min-height: 320px; }
}
@media (max-width: 480px) {
  .cards-grid .card-glass { min-height: 260px; }
}

/* ---------- AI curated shelf ---------- */
.curated-section {
  margin: 3.5rem 0 2rem;
  padding: 0;
}
.curated-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.curated-header h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  margin: 0 0 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-primary, #f1f5f9);
}
.curated-header h2 i {
  color: var(--accent-cyan, #38bdf8);
  font-size: 0.9em;
}
.curated-header p {
  margin: 0;
  color: var(--text-secondary, rgba(238,242,255,0.72));
  font-size: 0.9rem;
}
.curated-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.2rem;
  border: 1px solid rgba(56,189,248,0.28);
  border-radius: 999px;
  color: var(--accent-cyan, #38bdf8);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  background: rgba(56,189,248,0.06);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  font-family: 'JetBrains Mono', monospace;
}
.curated-view-all:hover {
  background: rgba(56,189,248,0.14);
  border-color: rgba(56,189,248,0.5);
  transform: translateY(-2px);
}
.curated-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}
@media (max-width: 600px) {
  .curated-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}

.curated-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.15rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.25,1,0.5,1), box-shadow 0.35s ease, border-color 0.35s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.curated-card:hover {
  transform: translateY(-5px);
  border-color: rgba(56,189,248,0.45);
  box-shadow: 0 20px 40px -18px rgba(56,189,248,0.28);
}
.curated-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: rgba(255,255,255,0.03);
  overflow: hidden;
}
.curated-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25,1,0.5,1);
}
.curated-card:hover .curated-media img { transform: scale(1.05); }
.curated-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--text-muted, rgba(238,242,255,0.6));
  background: rgba(56,189,248,0.04);
}
.curated-badge {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  padding: 0.2rem 0.7rem;
  background: #ef4444;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.curated-info {
  padding: 0.85rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.curated-info h3 {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  color: var(--text-primary, #f1f5f9);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.curated-price {
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-cyan, #38bdf8);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.curated-price .price-old {
  color: var(--text-muted, rgba(238,242,255,0.5));
  text-decoration: line-through;
  font-weight: 500;
  font-size: 0.78rem;
}
.curated-price .price-now { color: #ef4444; }
body.light-mode .curated-card {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.07);
}
body.light-mode .curated-card:hover {
  border-color: rgba(168,0,35,0.4);
  box-shadow: 0 20px 40px -18px rgba(168,0,35,0.2);
}
body.light-mode .curated-header h2 { color: #0f172a; }
body.light-mode .curated-header h2 i { color: #a80023; }
body.light-mode .curated-header p { color: #475569; }
body.light-mode .curated-info h3 { color: #0f172a; }
body.light-mode .curated-price { color: #a80023; }
body.light-mode .curated-view-all {
  color: #a80023;
  border-color: rgba(168,0,35,0.3);
  background: rgba(168,0,35,0.06);
}
body.light-mode .curated-view-all:hover {
  background: rgba(168,0,35,0.14);
  border-color: rgba(168,0,35,0.55);
}

/* ---------- Blog grid (4-tile, image-only) ---------- */
.blog-grid-section {
  margin: 2.5rem 0 3rem;
}
.blog-grid-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.blog-grid-header h2 {
  font-size: clamp(1.3rem, 2.8vw, 1.75rem);
  font-weight: 800;
  margin: 0 0 0.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-primary, #f1f5f9);
}
.blog-grid-header h2 i { color: var(--accent-cyan, #38bdf8); font-size: 0.9em; }
.blog-grid-header p {
  margin: 0;
  color: var(--text-secondary, rgba(238,242,255,0.72));
  font-size: 0.9rem;
}
.blog-grid-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.2rem;
  border: 1px solid rgba(56,189,248,0.28);
  border-radius: 999px;
  color: var(--accent-cyan, #38bdf8);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  background: rgba(56,189,248,0.06);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  font-family: 'JetBrains Mono', monospace;
}
.blog-grid-view-all:hover {
  background: rgba(56,189,248,0.14);
  border-color: rgba(56,189,248,0.5);
  transform: translateY(-2px);
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 768px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}
.blog-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 1.15rem;
  overflow: hidden;
  text-decoration: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.4s cubic-bezier(0.25,1,0.5,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.blog-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(56,189,248,0.4);
  box-shadow: 0 18px 35px -15px rgba(56,189,248,0.3);
}
.blog-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25,1,0.5,1);
}
.blog-tile:hover img { transform: scale(1.06); }
.blog-tile-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, rgba(238,242,255,0.5));
  font-size: 2rem;
  background: rgba(56,189,248,0.04);
}
.blog-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted, rgba(238,242,255,0.6));
  padding: 2.5rem 1rem;
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 1rem;
}
body.light-mode .blog-grid-header h2 { color: #0f172a; }
body.light-mode .blog-grid-header h2 i { color: #a80023; }
body.light-mode .blog-grid-header p { color: #475569; }
body.light-mode .blog-grid-view-all {
  color: #a80023;
  border-color: rgba(168,0,35,0.3);
  background: rgba(168,0,35,0.06);
}
body.light-mode .blog-grid-view-all:hover {
  background: rgba(168,0,35,0.14);
  border-color: rgba(168,0,35,0.55);
}
body.light-mode .blog-tile {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.07);
}
body.light-mode .blog-tile:hover {
  border-color: rgba(168,0,35,0.4);
  box-shadow: 0 18px 35px -15px rgba(168,0,35,0.2);
}

/* =========================================================
   LANDING — REFINED (2026-09-18)
   - Single wide card via :has() when grid has one card
   - Curated shelf restyled to neon-glass language
   - Blog grid tiles restyled to match
   - Section rhythm so reordered content breathes
   Append-only. Nothing above is removed or overridden globally.
   ========================================================= */

/* ---------- Wide single card ---------- */
.cards-grid:has(> .card-glass:only-of-type) {
  width: min(100%, 1200px) !important;
  max-width: 1200px !important;
}
.cards-grid:has(> .card-glass:only-of-type) .card-glass {
  max-width: 100% !important;
  flex: 1 1 100% !important;
  aspect-ratio: 21 / 9 !important;
  min-height: 380px;
}
@media (max-width: 768px) {
  .cards-grid:has(> .card-glass:only-of-type) .card-glass {
    aspect-ratio: 4 / 3 !important;
    min-height: 300px;
  }
}

/* ---------- Section rhythm for direct children of page-wrapper ---------- */
.page-wrapper > .curated-section,
.page-wrapper > .blog-grid-section {
  width: min(100%, 1200px);
  margin: 1rem 0 3rem;
}

/* ---------- Curated shelf — neon glass ---------- */
.curated-section { padding: 0; }
.curated-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.curated-header h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 900;
  margin: 0 0 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: linear-gradient(135deg, #fff 20%, var(--accent-cyan) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.curated-header h2 i {
  color: var(--accent-cyan);
  -webkit-text-fill-color: var(--accent-cyan);
  font-size: 0.9em;
}
.curated-header p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.curated-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.2rem;
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 999px;
  color: var(--accent-cyan);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  background: rgba(0, 240, 255, 0.06);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.curated-view-all:hover {
  background: rgba(0, 240, 255, 0.14);
  border-color: rgba(0, 240, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 12px 25px -10px rgba(0, 240, 255, 0.35);
}
.curated-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.15rem;
}
@media (max-width: 640px) {
  .curated-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}
.curated-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-main), border-color var(--transition-main), box-shadow var(--transition-main);
}
.curated-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-cyan);
  box-shadow: 0 20px 40px rgba(0, 240, 255, 0.15);
}
.curated-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.curated-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.curated-card:hover .curated-media img { transform: scale(1.06); }
.curated-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.15);
  background: rgba(0, 240, 255, 0.04);
}
.curated-badge {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  padding: 5px 12px;
  background: rgba(255, 0, 85, 0.85);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  letter-spacing: 0.02em;
}
.curated-info {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.curated-info h3 {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.curated-price {
  margin-top: auto;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--accent-cyan);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.curated-price .price-old {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
  font-weight: 500;
  font-size: 0.8rem;
}
.curated-price .price-now { color: var(--accent-rose); }

body.light-mode .curated-card {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(15, 23, 42, 0.08);
}
body.light-mode .curated-card:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 20px 40px rgba(216, 27, 63, 0.15);
}
body.light-mode .curated-info h3 { color: #1e293b; }
body.light-mode .curated-placeholder { color: rgba(15, 23, 42, 0.2); }
body.light-mode .curated-price .price-old { color: rgba(15, 23, 42, 0.4); }

/* ---------- Blog grid — neon glass ---------- */
.blog-grid-section {
  width: min(100%, 1200px);
  margin: 1rem 0 3rem;
}
.blog-grid-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.blog-grid-header h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 900;
  margin: 0 0 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: linear-gradient(135deg, #fff 20%, var(--accent-cyan) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.blog-grid-header h2 i {
  color: var(--accent-cyan);
  -webkit-text-fill-color: var(--accent-cyan);
  font-size: 0.9em;
}
.blog-grid-header p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.blog-grid-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.2rem;
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 999px;
  color: var(--accent-cyan);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  background: rgba(0, 240, 255, 0.06);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-grid-view-all:hover {
  background: rgba(0, 240, 255, 0.14);
  border-color: rgba(0, 240, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 12px 25px -10px rgba(0, 240, 255, 0.35);
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 768px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}
.blog-tile {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform var(--transition-main), border-color var(--transition-main), box-shadow var(--transition-main);
  text-decoration: none;
}
.blog-tile:hover {
  transform: translateY(-4px);
  border-color: var(--accent-cyan);
  box-shadow: 0 18px 35px rgba(0, 240, 255, 0.18);
}
.blog-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.blog-tile:hover img { transform: scale(1.06); }
.blog-tile-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.15);
  font-size: 1.75rem;
  background: rgba(0, 240, 255, 0.04);
}
.blog-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-secondary);
  padding: 2.5rem 1rem;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
}
body.light-mode .blog-tile {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(15, 23, 42, 0.08);
}
body.light-mode .blog-tile:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 18px 35px rgba(216, 27, 63, 0.18);
}
body.light-mode .blog-tile-placeholder { color: rgba(15, 23, 42, 0.15); }
body.light-mode .blog-grid-empty { border-color: rgba(15, 23, 42, 0.1); }
/* Light-mode h2 for blog grid — dark gradient so it's visible on the
   light page background. Mirrors the curated-header fix at the end
   of this file. */
body.light-mode .blog-grid-header h2 {
  background: linear-gradient(135deg, #0f172a 20%, var(--accent-cyan) 70%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
body.light-mode .blog-grid-header h2 i {
  color: var(--accent-cyan) !important;
  -webkit-text-fill-color: var(--accent-cyan) !important;
}


/* Kill backdrop filters on mobile for new elements */
@media (max-width: 768px) {
  .landing-body .curated-card,
  .landing-body .curated-badge {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* =========================================================
   LANDING — v6 CURATED SHELF (2026-09-18)
   Copies home.css product card + slider rules VERBATIM,
   scoped under #curated so nothing else is affected.
   ========================================================= */

/* Local tokens so home.css rules resolve correctly */
#curated {
  --surface: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.15);
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.6);
  --primary: #00f0ff;
  --primary-light: #60f3ff;
  --bg-secondary: rgba(10, 14, 29, 0.95);
  --shadow-glow: 0 20px 40px rgba(0, 240, 255, 0.15);
  --transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-smooth: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  --primary-rgb: 0, 240, 255;
  margin: 1rem 0 3rem;
}

body.light-mode #curated {
  --surface: rgba(255, 255, 255, 0.75);
  --surface-hover: rgba(255, 255, 255, 0.95);
  --border: rgba(15, 23, 42, 0.08);
  --border-light: rgba(15, 23, 42, 0.15);
  --text: #0f172a;
  --text-muted: rgba(15, 23, 42, 0.55);
  --primary: #a80023;
  --primary-light: #ff2d55;
  --bg-secondary: #f1f5f9;
  --shadow-glow: 0 20px 40px rgba(168, 0, 35, 0.15);
  --primary-rgb: 3, 105, 161;
}

/* Fallback grid before JS adds .product-slider */
#curated .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* Card shell (verbatim from home.css) */
#curated .product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-smooth), height 0.3s ease;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
#curated .product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-glow);
  border-color: var(--border-light);
  background: var(--surface-hover);
}

/* Image slot — uniform size for any image */
#curated .card-img-wrap {
  position: relative;
  aspect-ratio: 1 / 0.85;
  overflow: hidden;
  background: var(--bg-secondary);
}
#curated .card-img-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.8rem;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
#curated .product-card:hover .card-img-inner { transform: scale(1.08); }
#curated .card-img-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#curated .emoji-bg {
  position: absolute;
  font-size: 14rem;
  opacity: 0.06;
  pointer-events: none;
}
#curated .badge-discount {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: auto;
  left: auto;
  z-index: 5;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--primary);
  color: #03050a;
  font-size: 0.75rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Card body */
#curated .card-body {
  padding: 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
#curated .title-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
#curated .product-title {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 4px;
  transition: max-height 0.3s ease;
}
#curated .title-toggle {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--primary-light);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
#curated .title-toggle:hover { background: rgba(0, 240, 255, 0.2); }
#curated .card-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 12px;
  line-height: 1.5;
}
#curated .card-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}
#curated .card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
#curated .card-price {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--primary-light);
}
#curated .card-price .currency {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-right: 2px;
}
#curated .card-price del {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 6px;
}
#curated .btn-card {
  padding: 8px 18px;
  border-radius: 25px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: var(--transition);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  text-decoration: none;
  display: inline-block;
  width: 100%;
  text-align: center;
  border: 1px solid transparent;
}
#curated .btn-card:hover {
  background: rgba(var(--primary-rgb), 0.15);
  border-color: var(--primary);
  color: var(--primary);
}
body.light-mode #curated .btn-card {
  background: rgba(15, 23, 42, 0.05);
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.12);
}
body.light-mode #curated .btn-card:hover {
  background: rgba(6, 152, 214, 0.12);
  color: #a80023;
  border-color: rgba(6, 152, 214, 0.28);
}

/* Slider state (verbatim from home.css) */
#curated .product-grid.product-slider {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  gap: 16px !important;
  padding-bottom: 14px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-x pan-y !important;
  align-items: stretch !important;
}
#curated .product-grid.product-slider::-webkit-scrollbar { display: none !important; }
#curated .product-grid.product-slider > .product-card {
  flex: 0 0 280px !important;
  max-width: 280px !important;
  min-width: 0 !important;
  scroll-snap-align: start !important;
}

#curated .product-slider-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}
#curated .product-slider-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.25);
  background: rgba(0, 240, 255, 0.06);
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
#curated .product-slider-btn:hover {
  background: rgba(0, 240, 255, 0.14);
  border-color: rgba(0, 240, 255, 0.55);
}
#curated .product-slider-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
}
#curated .product-slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
#curated .product-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}
#curated .product-slider-dot.active {
  width: 22px;
  background: var(--primary, #00f0ff);
}
body.light-mode #curated .product-slider-btn {
  border-color: rgba(6, 152, 214, 0.25);
  background: rgba(6, 152, 214, 0.06);
  color: #0f172a;
}
body.light-mode #curated .product-slider-btn:hover {
  background: rgba(6, 152, 214, 0.14);
  border-color: rgba(6, 152, 214, 0.55);
}
body.light-mode #curated .product-slider-dot { background: rgba(15, 23, 42, 0.25); }
body.light-mode #curated .product-slider-dot.active { background: #ff2d55; }

/* Mobile horizontal cards + swipe, no arrows */
@media (max-width: 768px) {
  #curated .product-grid.product-slider > .product-card {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
  }
  #curated .product-slider-nav { display: none !important; }
  #curated .product-slider-dots { min-height: 20px !important; margin-top: 8px !important; }

  #curated .product-card {
    flex-direction: row !important;
    min-height: 0 !important;
    padding: 0.75rem !important;
    border-radius: 1.5rem !important;
    align-items: stretch !important;
  }
  #curated .product-card .card-img-wrap {
    flex: 0 0 120px !important;
    width: 120px !important;
    height: 120px !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    margin-left: 0.75rem !important;
    position: relative !important;
    aspect-ratio: auto !important;
  }
  #curated .product-card .card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 0.2rem 0 !important;
  }
  #curated .product-card .product-title {
    -webkit-line-clamp: 1 !important;
    font-size: 0.95rem !important;
  }
  #curated .product-card .card-desc {
    -webkit-line-clamp: 1 !important;
    display: block !important;
    font-size: 0.8rem !important;
    margin-bottom: 6px !important;
  }
  #curated .product-card .card-footer { margin-bottom: 0.4rem !important; }
  #curated .product-card .btn-card {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.8rem !important;
  }
}

/* =========================================================
   LANDING — v7 CURATED TITLE TOGGLE + EXPAND
   ========================================================= */

#curated .product-title.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}
#curated .product-card.title-expanded-card {
  overflow: visible !important;
  z-index: 5;
  position: relative;
  height: auto !important;
}
@media (max-width: 768px) {
  #curated .product-card .product-title {
    -webkit-line-clamp: 1;
  }
  #curated .product-card.title-expanded-card .product-title {
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  #curated .title-toggle {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
}

/* =========================================================
   LANDING — v8 GATEWAY CARDS LAYOUT (2026-09-18)
   Desktop: asymmetric grid (big left 1.618fr / side 1fr × 2 rows)
   Tablet + mobile: horizontal slider, all cards equal width
   ========================================================= */

/* ---------- DESKTOP: asymmetric grid ---------- */
@media (min-width: 1025px) {
  .cards-grid {
    display: grid !important;
    grid-template-columns: 1.618fr 1fr !important;
    grid-template-rows: auto !important;
    gap: 1.5rem !important;
    width: min(100%, 1200px) !important;
    max-width: 1200px !important;
    margin: 1.5rem 0 3rem !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    flex-wrap: nowrap !important;
  }

  .cards-grid > .landing-big {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    aspect-ratio: 16 / 10 !important;
    max-width: none !important;
    flex: unset !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .cards-grid > .cards-grid-side {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: grid !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 1.5rem !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }

  .cards-grid-side > .card-glass {
    aspect-ratio: unset !important;
    max-width: none !important;
    flex: unset !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 1.5rem 1.4rem !important;
  }
}

/* ---------- TABLET + MOBILE: horizontal slider, equal cards ---------- */
@media (max-width: 1024px) {
  /* Mobile + tablet: physical card on top (full-width, big),
     two secondary cards below side-by-side. No slider. */
  .cards-grid {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.5rem 0 3rem !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  /* Big physical card on top */
  .cards-grid > .landing-big {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    scroll-snap-align: none !important;
  }

  /* Two secondary cards below, side-by-side */
  .cards-grid-side {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .cards-grid-side > .card-glass {
    width: 100% !important;
    max-width: 100% !important;
    flex: unset !important;
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 1.1rem 1rem !important;
    border-radius: var(--radius-lg) !important;
    scroll-snap-align: none !important;
  }

  /* Smaller, contained CTA on the 2 small cards */
  .cards-grid-side .cta-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 0.78rem !important;
    padding: 0.55rem 0.9rem !important;
  }

  .card-secondary-body h3 {
    font-size: 1rem !important;
  }
  .card-secondary-body p {
    font-size: 0.78rem !important;
  }
}


/* ---------- Centered CTA pill on all gateway cards ---------- */
.cards-grid .card-glass .cta-btn {
  width: auto !important;
  min-width: 180px;
  max-width: 260px;
  align-self: center;
  margin: 1rem auto 0 !important;
}

/* ---------- Body copy on secondary cards ---------- */
.card-secondary-body {
  position: relative;
  z-index: 3;
  margin-top: auto;
  margin-bottom: 0.5rem;
}
.card-secondary-body h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.35rem;
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.card-secondary-body p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  max-width: 40ch;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
/* OLIVER-LANDING-CARD-WHITE-V1: مجله نکساسکای + دستیار هوشمند cards keep
   white text in light mode — the background images are dark/busy enough. */
body.light-mode .card-secondary-body h3 {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important;
}
body.light-mode .card-secondary-body p {
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Secondary cards flex-justify so the CTA/body sit at bottom */
.card-glass.card-secondary {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}


/* =========================================================
   LANDING — v9 MOBILE STACK (2026-09-18)
   Mobile only (<=767px): physical on top, blog below it,
   AI below that. Tablet (768-1024) unchanged.
   ========================================================= */
@media (max-width: 767px) {
  /* Stack the two secondary cards vertically */
  .cards-grid-side {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    width: 100% !important;
  }

  /* Each secondary card: full-width horizontal BAR (wide + short).
     3/1 = clearly shorter than the physical card's 16/9 (~68% shorter). */
  .cards-grid-side > .card-glass {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 3 / 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0.85rem 1rem !important;
    border-radius: var(--radius-lg) !important;
  }

  /* Compact CTA so it fits inside the short bar */
  .cards-grid-side .cta-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-top: 0.35rem !important;
    font-size: 0.7rem !important;
    padding: 0.35rem 0.85rem !important;
    align-self: flex-start !important;
  }

  /* Trim type so nothing overflows the short bar */
  .card-secondary-body {
    margin-top: auto !important;
    margin-bottom: 0.15rem !important;
  }
  .card-secondary-body h3 {
    font-size: 0.95rem !important;
    margin-bottom: 0.15rem !important;
    line-height: 1.2 !important;
  }
  .card-secondary-body p {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
  }
}


/* =========================================================
   LANDING — v10 MOBILE FORCE (2026-09-18)
   Uses explicit height (not aspect-ratio) + high specificity
   to make the difference unmistakable on mobile.
   ========================================================= */
@media (max-width: 767px) {

  /* Physical (big): kept proportional to viewport width, bounded. */
  body .cards-grid > .landing-big {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 180px !important;
    max-height: 300px !important;
    flex: 0 0 auto !important;
  }

  /* Secondary cards: SMALL horizontal bars.
     Explicit height via clamp — no aspect-ratio involved. */
  body .cards-grid-side > .card-glass.card-secondary {
    height: clamp(96px, 24vw, 132px) !important;
    min-height: 96px !important;
    max-height: 132px !important;
    aspect-ratio: auto !important;
    flex: 0 0 auto !important;
    padding: 0.7rem 0.95rem !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
  }

  /* Compact typography so nothing overflows the short bar */
  body .cards-grid-side > .card-glass.card-secondary .card-secondary-body {
    margin-top: auto !important;
    margin-bottom: 0.1rem !important;
  }
  body .cards-grid-side > .card-glass.card-secondary .card-secondary-body h3 {
    font-size: 0.9rem !important;
    margin: 0 0 0.1rem !important;
    line-height: 1.15 !important;
  }
  body .cards-grid-side > .card-glass.card-secondary .card-secondary-body p {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  /* Tiny CTA */
  body .cards-grid-side > .card-glass.card-secondary .cta-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    align-self: flex-start !important;
    font-size: 0.65rem !important;
    padding: 0.3rem 0.7rem !important;
    margin: 0.3rem 0 0 !important;
    line-height: 1 !important;
  }

  /* Tighter gap between the two bars */
  body .cards-grid-side {
    gap: 0.7rem !important;
  }
}


/* =========================================================
   LANDING — v11 PHYSICAL CTA BOTTOM-CENTER (mobile)
   Push the physical card's CTA to the bottom-center of the card.
   Desktop unchanged.
   ========================================================= */
@media (max-width: 767px) {
  body .cards-grid > .landing-big .cta-btn {
    margin: auto auto 1.25rem !important;   /* top:auto pushes to bottom, L/R auto centers */
    align-self: center !important;
    width: auto !important;
    min-width: 180px !important;
    max-width: 260px !important;
    font-size: 0.85rem !important;
    padding: 0.6rem 1.2rem !important;
  }
}


/* =========================================================
   LANDING — v12 MOBILE OVERFLOW-PROOF (2026-09-18)
   Mobile horizontal cards grow with content (no fixed height).
   Typography uses clamp() so it stays inside the card at any
   font-size / zoom level.
   ========================================================= */
@media (max-width: 767px) {

  /* Card grows with content instead of clipping at a fixed height. */
  body .cards-grid-side > .card-glass.card-secondary {
    height: auto !important;
    min-height: clamp(84px, 22vw, 120px) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: clamp(0.55rem, 2.4vw, 0.9rem) clamp(0.75rem, 3vw, 1.05rem) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }

  /* Titles: scale but with a hard ceiling so they never blow out. */
  body .cards-grid-side > .card-glass.card-secondary .card-secondary-body h3 {
    font-size: clamp(0.78rem, 3.2vw + 0.35rem, 0.95rem) !important;
    line-height: 1.2 !important;
    margin: 0 0 0.15rem !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* Body copy: same treatment, tighter. */
  body .cards-grid-side > .card-glass.card-secondary .card-secondary-body p {
    font-size: clamp(0.62rem, 2.6vw + 0.25rem, 0.75rem) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* CTA: compact and contained. */
  body .cards-grid-side > .card-glass.card-secondary .cta-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-self: flex-start !important;
    font-size: clamp(0.6rem, 2.4vw + 0.2rem, 0.72rem) !important;
    padding: 0.3rem 0.75rem !important;
    margin: 0.3rem 0 0 !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Also guard the physical card's CTA + tagline against overflow. */
  body .cards-grid > .landing-big .cta-btn {
    font-size: clamp(0.72rem, 3vw + 0.3rem, 0.9rem) !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}


/* =========================================================
   LANDING — v13 MOBILE BARS (fixed small height + text clamps)
   Restores small horizontal bars. Text truncates instead of
   growing the card. No overflow at any font-size / zoom.
   ========================================================= */
@media (max-width: 767px) {

  /* SMALL fixed height. Content that doesn't fit gets clipped. */
  body .cards-grid-side > .card-glass.card-secondary {
    height: clamp(84px, 22vw, 116px) !important;
    min-height: 0 !important;
    max-height: 116px !important;
    aspect-ratio: auto !important;
    flex: 0 0 auto !important;
    padding: 0.65rem 0.9rem !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }

  /* Title: clamp to 1 line (ellipsis if longer) */
  body .cards-grid-side > .card-glass.card-secondary .card-secondary-body h3 {
    font-size: clamp(0.8rem, 3vw + 0.3rem, 0.92rem) !important;
    line-height: 1.15 !important;
    margin: 0 0 0.15rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
  }

  /* Description: clamp to 1 line (ellipsis if longer) */
  body .cards-grid-side > .card-glass.card-secondary .card-secondary-body p {
    font-size: clamp(0.62rem, 2.4vw + 0.2rem, 0.72rem) !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
  }

  /* CTA: tiny, clipped if it doesn't fit */
  body .cards-grid-side > .card-glass.card-secondary .cta-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-self: flex-start !important;
    font-size: clamp(0.58rem, 2vw + 0.2rem, 0.68rem) !important;
    padding: 0.25rem 0.65rem !important;
    margin: 0.25rem 0 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}


/* =========================================================
   LANDING — v14 MOBILE FIXED-FONT BARS (2026-09-18)
   - font-size in absolute px (never scales with viewport/root)
   - -webkit-text-size-adjust: 100% (kills mobile auto-inflation)
   - card height locked small
   - text truncates with ellipsis instead of pushing card taller
   ========================================================= */
@media (max-width: 767px) {

  body .cards-grid-side > .card-glass.card-secondary {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    aspect-ratio: auto !important;
    flex: 0 0 auto !important;
    padding: 9px 14px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  body .cards-grid-side > .card-glass.card-secondary .card-secondary-body {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  body .cards-grid-side > .card-glass.card-secondary .card-secondary-body h3 {
    font-size: 13px !important;
    line-height: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  body .cards-grid-side > .card-glass.card-secondary .card-secondary-body p {
    font-size: 11px !important;
    line-height: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  body .cards-grid-side > .card-glass.card-secondary .cta-btn {
    font-size: 10px !important;
    line-height: 12px !important;
    height: 24px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    align-self: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
}


/* =========================================================
   LANDING — v15 HIDE SECONDARY CTAs (2026-09-18)
   The two secondary cards (blog + AI) no longer need a button.
   Physical card keeps its CTA.
   ========================================================= */
.cards-grid-side > .card-glass.card-secondary .cta-btn {
  display: none !important;
}


/* =========================================================
   LANDING — v16 PHYSICAL CTA BOTTOM (all viewports)
   The physical card's CTA sits at bottom-center on every screen
   size (desktop, tablet, mobile). Overrides the earlier
   margin-top rule that pinned it to the top.
   ========================================================= */
.cards-grid > .landing-big .cta-btn {
  margin: auto auto 1.25rem !important;   /* top auto = push down; sides auto = center */
  align-self: center !important;
}


/* =========================================================
   LANDING — v17 TIGHTEN L/R PADDING (2026-09-18)
   Nearly edge-to-edge on all viewports.
   ========================================================= */
body .page-wrapper {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

@media (max-width: 768px) {
  body .page-wrapper {
    padding: 1rem 6px 3rem !important;
  }
}

/* AI section had its own 1rem / 0.5rem / 0.25rem horizontal padding */
body .landing-ai-section {
  padding-left: 6px !important;
  padding-right: 6px !important;
}
@media (max-width: 768px) {
  body .landing-ai-section {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}
@media (max-width: 600px) {
  body .landing-ai-section {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}

/* =========================================================
   LANDING — v18 CURATED HEADER + TRANSPARENT SECTION (2026-09-18)
   1. Fix invisible h2 in light mode (white gradient on light bg).
   2. Force curated section fully transparent (no dark panel).
   ========================================================= */

/* Force curated section transparent in both modes — kill any
   dark panel/background/shadow between the page and the cards. */
.products-section.curated-section,
#curated,
.page-wrapper > .curated-section {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Light-mode h2: use a dark gradient so it's visible on the
   light page background. */
body.light-mode .curated-header h2 {
  background: linear-gradient(135deg, #0f172a 20%, var(--accent-cyan) 70%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
body.light-mode .curated-header h2 i {
  color: var(--accent-cyan) !important;
  -webkit-text-fill-color: var(--accent-cyan) !important;
}

/* =========================================================
   LANDING — v19 PRODUCT CARD HIGHLIGHT (2026-09-18)
   Hover / touch highlight on curated product cards.
   - Dark mode:  cyber purple (#b026ff)
   - Light mode: red (#dc2626)
   Also handles :active for touch devices and :focus-visible
   for keyboard nav.
   ========================================================= */

/* Dark mode (default) — cyber purple */
body #curated .product-card:hover,
body #curated .product-card:active,
body #curated .product-card:focus-visible {
  border-color: #b026ff !important;
  box-shadow:
    0 0 0 2px rgba(176, 38, 255, 0.55),
    0 22px 45px -18px rgba(176, 38, 255, 0.65) !important;
  outline: none !important;
}

/* Light mode — red */
body.light-mode #curated .product-card:hover,
body.light-mode #curated .product-card:active,
body.light-mode #curated .product-card:focus-visible {
  border-color: #dc2626 !important;
  box-shadow:
    0 0 0 2px rgba(220, 38, 38, 0.45),
    0 22px 45px -18px rgba(220, 38, 38, 0.5) !important;
  outline: none !important;
}

/* Touch devices: hover is sticky on mobile; reset the ring when idle
   but keep it while :active (finger down). This uses @media (hover:none)
   so only true touch UIs get this — mouse UIs unaffected. */
@media (hover: none) {
  body #curated .product-card:not(:active):not(:focus-visible) {
    border-color: var(--border, rgba(255, 255, 255, 0.08));
    box-shadow: none;
  }
  body.light-mode #curated .product-card:not(:active):not(:focus-visible) {
    border-color: var(--border, rgba(15, 23, 42, 0.08));
    box-shadow: none;
  }
}

/* =========================================================
   LANDING — v20 CURATED SLIDER BREATHING ROOM (2026-09-18)
   The product-slider uses overflow-y: hidden (needed for the
   horizontal scroll), which was clipping the hover lift + its
   glow shadow. Add vertical padding inside the slider so the
   zoom / lift / shadow all render fully.
   Also pad the section itself for outer breathing room.
   ========================================================= */

/* Outer section spacing */
.products-section.curated-section,
#curated {
  padding-top: 1.5rem !important;
  padding-bottom: 2.5rem !important;
}

/* Inner slider: room for the lift + glow above and below the row */
#curated .product-grid.product-slider {
  padding-top: 18px !important;
  padding-bottom: 22px !important;
}

/* Header: a bit more space so the section title doesn't crowd */
#curated .curated-header {
  margin-bottom: 1.25rem !important;
}

/* Mobile: tighter but still roomy enough for the lift */
@media (max-width: 768px) {
  .products-section.curated-section,
  #curated {
    padding-top: 1rem !important;
    padding-bottom: 1.75rem !important;
  }
  #curated .product-grid.product-slider {
    padding-top: 14px !important;
    padding-bottom: 18px !important;
  }
}

/* =========================================================
   LANDING — v21 CURATED SHADOW CLEANUP + CYAN/BLUE HOVER
   (2026-09-18)
   1. Remove any default (non-hover) gray shadow on the curated
      cards and their container.
   2. Replace purple hover glow (dark mode) with cyan.
   3. Light-mode hover: deep sky blue (#0284c7) — visible on
      white, matches --accent-cyan palette of light mode.
   ========================================================= */

/* Kill default non-hover shadow on the cards + container.
   Only applies when NOT hovered / active / focused. */
body #curated .product-card:not(:hover):not(:active):not(:focus-visible) {
  box-shadow: none !important;
}
body #curated .product-grid,
body #curated .product-grid.product-slider {
  box-shadow: none !important;
}

/* Dark mode hover: CYAN */
body:not(.light-mode) #curated .product-card:hover,
body:not(.light-mode) #curated .product-card:active,
body:not(.light-mode) #curated .product-card:focus-visible {
  border-color: #00f0ff !important;
  box-shadow:
    0 0 0 2px rgba(0, 240, 255, 0.55),
    0 22px 45px -18px rgba(0, 240, 255, 0.7) !important;
  outline: none !important;
}

/* Light mode hover: deep sky blue */
body.light-mode #curated .product-card:hover,
body.light-mode #curated .product-card:active,
body.light-mode #curated .product-card:focus-visible {
  border-color: #ff2d55 !important;
  box-shadow:
    0 0 0 2px rgba(255, 45, 85, 0.5),
    0 22px 45px -18px rgba(255, 45, 85, 0.6) !important;
  outline: none !important;
}

/* =========================================================
   LANDING — v22 SLIDER NAV TRANSPARENT (2026-09-18)
   The product-slider-nav sits below the cards. Any opaque bg
   or high z-index hides the hover glow that extends downward.
   Make it fully transparent + push behind the cards.
   ========================================================= */

#curated .product-slider-nav {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  position: relative !important;
  z-index: 0 !important;   /* behind the cards (which get z-index 5 on hover) */
  pointer-events: none;    /* let clicks pass through the empty area */
  padding: 0 !important;
}

/* Re-enable pointer events on the buttons only */
#curated .product-slider-nav > .product-slider-btn {
  pointer-events: auto;
}

#curated .product-slider-dots {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  position: relative !important;
  z-index: 0 !important;
}

/* Give the cards a small lift so their shadow renders over the nav */
#curated .product-card {
  position: relative;
  z-index: 1;
}
#curated .product-card:hover,
#curated .product-card:active,
#curated .product-card:focus-visible {
  z-index: 5 !important;
}

/* Extra breathing room so the shadow has somewhere to land */
#curated .product-slider-nav {
  margin-top: 10px !important;
}

/* =========================================================
   LANDING — v23 SLIDER SHADOW ROOM (2026-09-18)
   Increase bottom padding on the product slider so the
   downward hover glow is not clipped by overflow-y: hidden.
   Applies to desktop, tablet, and mobile.
   ========================================================= */

#curated .product-grid.product-slider {
  padding-top: 20px !important;
  padding-bottom: 60px !important;
}

/* Dots wrap also gets transparent + no clip */
#curated .product-slider-dots {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin-top: 8px !important;
}

/* Tablet + mobile: keep proportional room */
@media (max-width: 1024px) {
  #curated .product-grid.product-slider {
    padding-top: 18px !important;
    padding-bottom: 55px !important;
  }
}

@media (max-width: 768px) {
  #curated .product-grid.product-slider {
    padding-top: 16px !important;
    padding-bottom: 50px !important;
  }
  #curated .product-slider-dots {
    margin-top: 6px !important;
  }
}


/* =================================================================
   STORY-VIEWER-OVERLAY-RESPONSIVE
   Final override for .store-story-viewer-content.
   Fixes: text covering media, oversized fonts/padding on mobile.
   Keeps the Instagram-style bottom overlay, but caps its height,
   uses fluid clamp() typography, and smoothes the gradient so the
   media remains visible above the text.
   ================================================================= */

.store-story-viewer-content {
    padding: clamp(1rem, 2.5vw, 1.5rem) clamp(0.9rem, 3vw, 1.5rem)
             calc(clamp(0.85rem, 2.5vw, 1.15rem) + env(safe-area-inset-bottom, 0px)) !important;
    max-height: min(38vh, 320px);
    max-height: min(38dvh, 320px);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.90) 0%,
        rgba(0, 0, 0, 0.72) 45%,
        rgba(0, 0, 0, 0.32) 78%,
        transparent 100%) !important;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.store-story-viewer-content:empty {
    display: none !important;
}

.store-story-viewer-content h3 {
    font-size: clamp(1.02rem, 3.6vw, 1.35rem) !important;
    line-height: 1.25 !important;
    margin: 0 0 0.4rem !important;
    font-weight: 800 !important;
    text-wrap: balance;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.store-story-viewer-content p {
    font-size: clamp(0.82rem, 2.4vw, 0.95rem) !important;
    line-height: 1.55 !important;
    margin: 0 0 0.75rem !important;
    color: rgba(255, 255, 255, 0.88) !important;
    text-wrap: pretty;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.store-story-cta {
    font-size: clamp(0.78rem, 2.2vw, 0.9rem) !important;
    padding: clamp(0.6rem, 1.8vw, 0.85rem) clamp(1rem, 3vw, 1.35rem) !important;
}

.store-story-viewer-content h3,
.store-story-viewer-content p,
.store-story-viewer-content a {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important;
}

body.light-mode .store-story-viewer-content {
    background: linear-gradient(to top,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 255, 255, 0.78) 45%,
        rgba(255, 255, 255, 0.32) 78%,
        transparent 100%) !important;
    color: #0f172a !important;
}

body.light-mode .store-story-viewer-content p {
    color: rgba(15, 23, 42, 0.80) !important;
}

.store-story-viewer-content::-webkit-scrollbar { width: 4px; }
.store-story-viewer-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 2px;
}

@media (max-width: 640px) {
    .store-story-viewer-content {
        max-height: 34vh;
        max-height: 34dvh;
        padding: 0.85rem 0.85rem calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
    }
    .store-story-viewer-content h3 {
        font-size: clamp(0.98rem, 4vw, 1.15rem) !important;
    }
    .store-story-viewer-content p {
        font-size: clamp(0.78rem, 3.2vw, 0.88rem) !important;
        margin-bottom: 0.6rem !important;
    }
}

@media (max-width: 360px) {
    .store-story-viewer-content {
        padding: 0.7rem 0.7rem calc(0.65rem + env(safe-area-inset-bottom, 0px)) !important;
    }
    .store-story-viewer-content h3 { font-size: 0.95rem !important; }
    .store-story-viewer-content p {
        font-size: 0.76rem !important;
        line-height: 1.45 !important;
    }
}

@media (max-height: 500px) {
    .store-story-viewer-content {
        max-height: 45vh;
        max-height: 45dvh;
        padding: 0.5rem 0.75rem !important;
    }
    .store-story-viewer-content h3 {
        font-size: 0.95rem !important;
        margin-bottom: 0.2rem !important;
    }
    .store-story-viewer-content p {
        font-size: 0.78rem !important;
        margin-bottom: 0.4rem !important;
        line-height: 1.4 !important;
    }
    .store-story-cta {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.9rem !important;
    }
}


/* =================================================================
   STORY-VIEWER-SHEET-MOBILE
   On mobile/tablet (<1160px), the text overlay becomes a peek sheet:
   only a 44px strip is visible at the bottom of the story viewer.
   Swipe up -> reveal full text. Swipe down -> hide.
   Desktop is untouched.
   ================================================================= */
@media (max-width: 1160px) {
    .store-story-viewer-content {
        transform: translateY(calc(100% - 44px));
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
        padding-top: 44px !important;
        max-height: 68vh !important;
        max-height: 68dvh !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        pointer-events: auto !important;
    }
    .store-story-viewer-content.is-revealed {
        transform: translateY(0);
    }
    .store-story-viewer-content::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.55);
        z-index: 5;
        pointer-events: none;
    }
    .store-story-viewer-content::after {
        content: '↑ متن استوری'; /* STORY-SHEET-INDICATOR-FIX */
        position: absolute;
        top: 22px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.72rem;
        color: rgba(255, 255, 255, 0.72);
        pointer-events: none;
        z-index: 5;
        white-space: nowrap;
        transition: opacity 0.2s;
    }
    .store-story-viewer-content.is-revealed::before,
    .store-story-viewer-content.is-revealed::after {
        opacity: 0;
    }
    body.light-mode .store-story-viewer-content::before {
        background: rgba(15, 23, 42, 0.35);
    }
    body.light-mode .store-story-viewer-content::after {
        color: rgba(15, 23, 42, 0.72);
    }
}
@media (max-width: 1160px) and (max-height: 500px) {
    .store-story-viewer-content {
        padding-top: 32px !important;
        max-height: 80vh !important;
        max-height: 80dvh !important;
    }
    .store-story-viewer-content::before { top: 8px; }
    .store-story-viewer-content::after {
        top: 16px;
        font-size: 0.65rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .store-story-viewer-content {
        transition: none !important;
    }
}


/* =================================================================
   STORY-SHEET-INDICATOR-V2
   Larger, more visible peek indicator + asymmetric transitions.
   Reveal = smooth 0.4s. Hide = fast 0.22s (instant vanish on scroll-down).
   ================================================================= */
@media (max-width: 1160px) {
    .store-story-viewer-content {
        transition: transform 0.22s ease-out !important;
    }
    .store-story-viewer-content.is-revealed {
        transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .store-story-viewer-content::before {
        top: 10px !important;
        width: 56px !important;
        height: 6px !important;
        border-radius: 4px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.45), 0 0 4px rgba(0, 0, 0, 0.35) !important;
        animation: story-sheet-pulse 2s ease-in-out infinite !important;
    }

    .store-story-viewer-content::after {
        top: 24px !important;
        padding: 4px 14px !important;
        border-radius: 999px !important;
        background: rgba(0, 0, 0, 0.55) !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.2px !important;
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
        animation: story-sheet-pulse-text 2s ease-in-out infinite !important;
    }

    .store-story-viewer-content.is-revealed::before,
    .store-story-viewer-content.is-revealed::after {
        animation: none !important;
    }

    body.light-mode .store-story-viewer-content::before {
        background: rgba(15, 23, 42, 0.75) !important;
        box-shadow: 0 0 12px rgba(15, 23, 42, 0.25), 0 0 4px rgba(0, 0, 0, 0.08) !important;
    }
    body.light-mode .store-story-viewer-content::after {
        background: rgba(255, 255, 255, 0.92) !important;
        color: #0f172a !important;
        text-shadow: none !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15) !important;
    }

    @keyframes story-sheet-pulse {
        0%, 100% { transform: translateX(-50%) scaleX(1);   opacity: 1;   }
        50%      { transform: translateX(-50%) scaleX(0.85); opacity: 0.75; }
    }
    @keyframes story-sheet-pulse-text {
        0%, 100% { transform: translateX(-50%) translateY(0);     opacity: 1;    }
        50%      { transform: translateX(-50%) translateY(-2px);  opacity: 0.82; }
    }

    @media (prefers-reduced-motion: reduce) {
        .store-story-viewer-content::before,
        .store-story-viewer-content::after { animation: none !important; }
    }
}


/* =================================================================
   STORY-TEXT-ALIGN-V2
   Final override. Two fixes:
   1) RTL alignment: force direction + text-align, drop text-wrap:balance
      on paragraphs (fights Persian), generous Persian line-heights.
   2) Contrast: stronger bottom gradients in both themes so text reads
      over light OR dark media without changing layout.
   ================================================================= */

.store-story-viewer-content {
    text-align: right !important;
    direction: rtl !important;
    padding-inline-start: 0 !important;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.82) 35%,
        rgba(0, 0, 0, 0.48) 70%,
        rgba(0, 0, 0, 0.10) 92%,
        transparent 100%) !important;
}

.store-story-viewer-content h3,
.store-story-viewer-content p {
    text-align: right !important;
    direction: rtl !important;
    unicode-bidi: plaintext !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    word-spacing: normal !important;
    letter-spacing: 0 !important;
    text-wrap: pretty !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
}

.store-story-viewer-content h3 {
    line-height: 1.5 !important;
    margin: 0 0 0.5rem 0 !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85),
                 0 0 12px rgba(0, 0, 0, 0.45) !important;
}

.store-story-viewer-content p {
    line-height: 1.85 !important;
    margin: 0 0 0.85rem 0 !important;
    color: rgba(255, 255, 255, 0.96) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75),
                 0 0 10px rgba(0, 0, 0, 0.35) !important;
}

.store-story-cta {
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
    text-shadow: none !important;
}

body.light-mode .store-story-viewer-content {
    background: linear-gradient(to top,
        rgba(255, 255, 255, 0.99) 0%,
        rgba(255, 255, 255, 0.95) 35%,
        rgba(255, 255, 255, 0.62) 70%,
        rgba(255, 255, 255, 0.15) 92%,
        transparent 100%) !important;
    color: #0b1220 !important;
}

body.light-mode .store-story-viewer-content h3 {
    color: #0b1220 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9),
                 0 0 12px rgba(255, 255, 255, 0.6) !important;
}

body.light-mode .store-story-viewer-content p {
    color: #1e293b !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85),
                 0 0 10px rgba(255, 255, 255, 0.5) !important;
}

body.light-mode .store-story-cta {
    text-shadow: none !important;
}


/* =================================================================
   STORY-PEEK-60PX
   Peek strip: 44px -> 60px so the handle + hint pill have clearance.
   Sheet still slides up the same distance (transform math is in JS).
   ================================================================= */
@media (max-width: 1160px) {
    .store-story-viewer-content {
        transform: translateY(calc(100% - 60px)) !important;
        padding-top: 60px !important;
    }
    .store-story-viewer-content.is-revealed {
        transform: translateY(0) !important;
    }
    .store-story-viewer-content::before {
        top: 14px !important;
        width: 56px !important;
        height: 6px !important;
    }
    .store-story-viewer-content::after {
        top: 30px !important;
    }
}
@media (max-width: 1160px) and (max-height: 500px) {
    .store-story-viewer-content {
        padding-top: 52px !important;
    }
    .store-story-viewer-content::before { top: 10px !important; }
    .store-story-viewer-content::after { top: 24px !important; }
}


/* =================================================================
   STORY-DARK-ONLY
   Force the landing story viewer to always render in dark theme,
   regardless of body.light-mode. Overrides every prior light-mode
   story rule (viewer panel, content, buttons, indicator). Desktop,
   tablet, and mobile behave identically.
   The .store-story-viewer-* classes are unique to landing so no
   other page is affected.
   ================================================================= */

body.light-mode .store-story-viewer-panel {
    background: #0b1220 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f7f7fb !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
}

body.light-mode .store-story-viewer-backdrop {
    background: rgba(0, 0, 0, 0.85) !important;
}

body.light-mode .store-story-viewer-media {
    background: #000 !important;
}

body.light-mode .store-story-viewer-content {
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.82) 35%,
        rgba(0, 0, 0, 0.48) 70%,
        rgba(0, 0, 0, 0.10) 92%,
        transparent 100%) !important;
    color: #ffffff !important;
}

body.light-mode .store-story-viewer-content h3 {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85),
                 0 0 12px rgba(0, 0, 0, 0.45) !important;
}

body.light-mode .store-story-viewer-content p {
    color: rgba(255, 255, 255, 0.96) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75),
                 0 0 10px rgba(0, 0, 0, 0.35) !important;
}

body.light-mode .store-story-viewer-content::before {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.45),
                0 0 4px rgba(0, 0, 0, 0.35) !important;
}

body.light-mode .store-story-viewer-content::after {
    background: rgba(0, 0, 0, 0.55) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.60) !important;
    box-shadow: none !important;
}

body.light-mode .store-story-close,
body.light-mode .store-story-text-toggle,
body.light-mode .store-story-fullscreen,
body.light-mode .store-story-prev,
body.light-mode .store-story-next {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body.light-mode .store-story-close:hover,
body.light-mode .store-story-text-toggle:hover,
body.light-mode .store-story-fullscreen:hover,
body.light-mode .store-story-prev:hover,
body.light-mode .store-story-next:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

body.light-mode .store-story-cta {
    color: #020617 !important;
    text-shadow: none !important;
}

body.light-mode .store-story-progress {
    background: rgba(255, 255, 255, 0.22) !important;
}

body.light-mode .store-story-progress-bar {
    background: #ffffff !important;
}

/* Landing rail: keep circles dark in light mode */
body.light-mode .store-story-card {
    background: #0b1220 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

body.light-mode .store-story-placeholder {
    background: linear-gradient(135deg, #111827, #334155) !important;
    color: #94a3b8 !important;
}


/* =================================================================
   STORY-CIRCLE-CLEAN
   Remove the square dark background behind the story circles on
   the landing rail. The circle image must stand alone with a
   clean circular clip -- no visible corners, in either theme.
   ================================================================= */

.store-story-card,
.store-story-trigger {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.store-story-media,
.store-story-media img,
.store-story-media video,
.store-story-placeholder {
    border-radius: 50% !important;
    overflow: hidden !important;
    background: transparent !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Kill any leftover square background from any theme-specific rule */
body.light-mode .store-story-card,
body.light-mode .store-story-trigger,
body.light-mode .store-story-media,
body.light-mode .store-story-placeholder,
body.dark-mode .store-story-card,
body.dark-mode .store-story-trigger {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Keep the gradient ring (if any) but as a circular outline only */
.store-story-trigger::before,
.store-story-trigger::after {
    border-radius: 50% !important;
}


/* =================================================================
   STORY-RAIL-FINAL-FIX
   Overrides the two regressions from STORY-CIRCLE-CLEAN and
   STORY-DARK-ONLY:
     1) Restores the Instagram-style gradient ring on .store-story-media
        (which the previous patch turned transparent).
     2) Kills the square dark background on .store-story-card
        (the actual source of the "square corners").
     3) Restores the progress bar to its cyan gradient (was overridden
        to solid white).
   ================================================================= */

/* 1. Media circle -- restore gradient ring + 2px padding */
.store-story-media {
    width: 66px !important;
    height: 66px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important;
    padding: 2px !important;
    box-sizing: border-box !important;
}

.store-story-media img,
.store-story-media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
    background: #0b1220 !important;
}

.store-story-placeholder {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--accent-cyan, #00f0ff) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
}

@media (max-width: 768px) {
    .store-story-media {
        width: 60px !important;
        height: 60px !important;
    }
}

/* 2. Card wrapper -- fully transparent, no square, no border */
.store-story-card,
.store-story-trigger,
body.light-mode .store-story-card,
body.light-mode .store-story-trigger,
body.light-mode .store-story-media,
body.dark-mode .store-story-card,
body.dark-mode .store-story-trigger {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 50% !important;
}

/* keep the gradient ring even under light-mode overrides */
body.light-mode .store-story-media {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important;
    padding: 2px !important;
}

/* 3. Progress bar -- restore cyan gradient, override the white */
.store-story-progress,
body.light-mode .store-story-progress {
    background: rgba(255, 255, 255, 0.20) !important;
}

.store-story-progress-bar,
body.light-mode .store-story-progress-bar {
    background: linear-gradient(90deg, #ff2d55, #a855f7) !important;
}


/* =========================================================
   THEODOR-LANDING-BOTNAV-NOBLUR-V1
   Landing page only. Removes backdrop-filter from the mobile
   bottom-nav. Does NOT touch any animation (chevron nudge,
   hamburger pulse, ripple) - only blur + underlying background
   opacity, which becomes opaque so content behind doesn't bleed.
   Specificity 0-2-2 beats landing.css:4345 (0-2-1) and
   base.css:5506 (0-1-0).
   ========================================================= */

@media (max-width: 1160px) {
    html body .bottom-nav {
        background: rgba(10, 14, 26, 0.96) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    html body.light-mode .bottom-nav {
        background: rgba(255, 255, 255, 0.98) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* END THEODOR-LANDING-BOTNAV-NOBLUR-V1 */


/* =========================================================
   THEODOR-LANDING-GRADIENT-FIX-V1
   Landing page only. Kills the per-frame background-position
   animation on the top navbar and announcement bar (a
   300%-sized gradient repaints the whole region every frame),
   and reduces hero-orb blur on mobile.
   Gradients/orbs stay visible - only the per-frame repaint
   cost is removed.
   Does NOT touch: botnav chevron nudge, hamburger pulse,
   FAB icon/gradient/halo, ripple, backdrop-filter, or any
   interactive animation.
   ========================================================= */

@media (max-width: 1160px) {
    /* gradientShift animates background-position across a
       300%x300% gradient = full-region repaint every frame.
       Static position keeps the visual, drops the per-frame cost. */
    html body .navbar::before,
    html body .announcement-bar::before {
        animation: none !important;
        -webkit-animation: none !important;
        background-position: 50% 50% !important;
    }

    /* Hero orbs: 48px blur is expensive to composite every paint.
       20px keeps the soft glow at a fraction of the cost. */
    html body .hero::before,
    html body .hero::after {
        filter: blur(20px) !important;
    }
}

/* END THEODOR-LANDING-GRADIENT-FIX-V1 */


/* =========================================================
   THEODOR-CURATED-CARD-MOBILE-V1
   Landing #curated mobile cards: title gets 2 lines, image
   shrinks 120 -> 104, description hidden on mobile, price
   pinned to bottom. Same specificity as landing.css:5304
   block; wins by source order.
   Mobile only. Does NOT touch: hover, title-toggle,
   title-expanded-card, animations, other pages.
   ========================================================= */

@media (max-width: 768px) {
    #curated .product-card .card-img-wrap {
        flex: 0 0 104px !important;
        width: 104px !important;
        height: 104px !important;
        margin-left: 0.6rem !important;
        border-radius: 0.9rem !important;
    }

    #curated .product-card .card-body {
        padding: 0 !important;
        gap: 0.3rem !important;
        justify-content: flex-start !important;
    }

    #curated .product-card .title-wrapper {
        align-items: flex-start;
    }

    #curated .product-card .product-title {
        -webkit-line-clamp: 2 !important;
        font-size: 0.9rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0 !important;
    }

    #curated .product-card .card-desc {
        display: none !important;
    }

    #curated .product-card .card-bottom {
        margin-top: auto !important;
    }

    #curated .product-card .card-footer {
        margin-bottom: 0.35rem !important;
    }

    #curated .product-card .card-price {
        font-size: 1rem !important;
    }

    #curated .product-card .btn-card {
        font-size: 0.7rem !important;
        padding: 6px 10px !important;
    }
}

/* END THEODOR-CURATED-CARD-MOBILE-V1 */


/* =========================================================
   THEODOR-CURATED-VERTICAL-V1
   Mobile #curated cards become VERTICAL: image on top,
   title below, short description below title, price at
   bottom. Reverses the horizontal mobile layout.
   Specificity 1,1,1 beats mobile-product-cards-fix.css
   (body .product-card, 0,1,1) and landing.css:5314
   (#curated .product-card, 1,1,0) by both specificity
   and source order.
   Mobile only (max-width 768px). Desktop untouched.
   ========================================================= */

@media (max-width: 768px) {
    body #curated .product-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0 !important;
        gap: 0 !important;
        min-height: 0 !important;
    }

    body #curated .product-card .card-img-wrap {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 0.85 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    body #curated .product-card .card-img-inner img,
    body #curated .product-card .card-img-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    body #curated .product-card .card-body {
        padding: 12px 14px !important;
        gap: 0.35rem !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow: visible !important;
    }

    body #curated .product-card .title-wrapper {
        align-items: flex-start;
    }

    body #curated .product-card .product-title {
        -webkit-line-clamp: 2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
    }

    body #curated .product-card .card-desc {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        font-size: 0.78rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
    }

    body #curated .product-card .card-bottom {
        margin-top: auto !important;
        padding-top: 0.25rem !important;
    }

    body #curated .product-card .card-footer {
        margin-bottom: 0.35rem !important;
    }

    body #curated .product-card .card-price {
        font-size: 1rem !important;
    }

    body #curated .product-card .btn-card {
        font-size: 0.72rem !important;
        padding: 6px 12px !important;
    }

    body #curated .product-card.title-expanded-card .product-title {
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }
}

/* END THEODOR-CURATED-VERTICAL-V1 */


/* =========================================================
   THEODOR-CURATED-SHRINK-V1
   1) Smaller mobile cards: narrower columns, shorter image,
      tighter padding and font sizes.
   2) Fix blue corner bug: restore overflow: hidden on
      .title-expanded-card so the card-img-wrap background
      no longer shows outside the rounded shell.
   Mobile only. Desktop untouched.
   ========================================================= */

@media (max-width: 768px) {
    /* Clip rounded corners even when title expands */
    body #curated .product-card.title-expanded-card {
        overflow: hidden !important;
    }

    /* Smaller card footprint: narrower column */
    body #curated .product-grid.product-slider > .product-card {
        flex: 0 0 72% !important;
        max-width: 72% !important;
    }

    /* Shorter image area */
    body #curated .product-card .card-img-wrap {
        aspect-ratio: 1 / 0.72 !important;
    }

    /* Tighter body padding + spacing */
    body #curated .product-card .card-body {
        padding: 8px 10px !important;
        gap: 0.22rem !important;
    }

    /* Smaller title */
    body #curated .product-card .product-title {
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
    }

    /* Smaller description */
    body #curated .product-card .card-desc {
        font-size: 0.7rem !important;
        line-height: 1.4 !important;
    }

    body #curated .product-card .card-bottom {
        padding-top: 0.15rem !important;
    }

    body #curated .product-card .card-footer {
        margin-bottom: 0.25rem !important;
    }

    body #curated .product-card .card-price {
        font-size: 0.9rem !important;
    }

    body #curated .product-card .btn-card {
        font-size: 0.65rem !important;
        padding: 4px 10px !important;
    }
}

/* END THEODOR-CURATED-SHRINK-V1 */


/* =========================================================
   THEODOR-CURATED-POLISH-V1
   1) Slider: give the first/last card focus-ring room. Adds
      horizontal padding inside the scroller so the box-shadow
      ring (0 0 0 2px + glow) is not clipped at the start or
      end of the scroll range. scroll-padding keeps snap-align
      edge matched to the visible edge.
   2. Bloody red discount badge, both light and dark mode,
      scoped to product cards only.
   Mobile-first; desktop reads the same rules harmlessly.
   ========================================================= */

@media (max-width: 768px) {
    body #curated .product-grid.product-slider {
        padding-inline: 16px !important;
        scroll-padding-inline: 16px !important;
    }
}

body #curated .badge-discount,
body .product-card .badge-discount {
    background: #8b0000 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* END THEODOR-CURATED-POLISH-V1 */


/* =========================================================
   THEODOR-GPU-MOBILE-PERF-V1
   Mobile-only GPU cost removal. Desktop unaffected.
   Kills: hero orb infinite float animations + will-change
   burn (blur already reduced by GRADIENT-FIX-V1),
   hero h1 7s shine animation + heavy 30px drop-shadow.
   Does NOT touch button/keyframe animations.
   ========================================================= */
@media (max-width: 1160px) {
  html body .hero::before,
  html body .hero::after {
    animation: none !important;
    -webkit-animation: none !important;
    will-change: auto !important;
  }
  html body .hero h1 {
    animation: none !important;
    -webkit-animation: none !important;
    filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.20)) !important;
  }
}
/* END THEODOR-GPU-MOBILE-PERF-V1 */


/* =========================================================
   THEODOR-FIREFOX-MOBILE-PERF-V1
   Firefox Mobile blur removal. Desktop unaffected.
   Button animations untouched. Backgrounds untouched so
   nothing visually breaks - only the compositor re-sample
   is removed.
   ========================================================= */
@media (max-width: 1160px) {
  html body .nav-logo .logo-icon,
  html body .icon-btn,
  html body .auth-pill,
  html body .hero-eyebrow,
  html body .hero .brand,
  html body .card-glass,
  html body .card-glass .desc,
  html body .card-glass .cta-btn,
  html body .stat-card,
  html body .showcase-card,
  html body .showcase-badge,
  html body .blog-banner,
  html body .feature-item,
  html body .newsletter-card,
  html body .store-story-viewer,
  html body .store-story-next,
  html body .curated-card,
  html body .curated-badge,
  html body #curated .badge-discount,
  html body.light-mode .lux-navbar.scrolled {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* Reduce hero orb blur further for Gecko (was 20px from GRADIENT-FIX-V1) */
  html body .hero::before,
  html body .hero::after {
    filter: blur(8px) !important;
  }
}
/* END THEODOR-FIREFOX-MOBILE-PERF-V1 */


/* =========================================================
   THEODOR-MOBILE-CARD-OPAQUE-V1
   Landing cards sat on a flat dark body so 3-5% white alpha
   was fine. The tiled background image now shows through cards
   and washes text out. Mobile-only overrides. Desktop unaffected.
   .bg-image cards (media backgrounds) excluded via :not(.bg-image).
   ========================================================= */
@media (max-width: 1160px) {
  html body .card-glass:not(.bg-image),
  html body .stat-card,
  html body .showcase-card,
  html body .feature-item,
  html body .newsletter-card,
  html body .curated-card,
  html body .blog-tile,
  html body .landing-ai-card {
    background-color: rgba(12, 16, 26, 0.88) !important;
  }
  html body .blog-banner {
    background-color: rgba(10, 14, 24, 0.88) !important;
  }
  html body .card-glass .desc {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }

  html body.light-mode .card-glass:not(.bg-image),
  html body.light-mode .stat-card,
  html body.light-mode .showcase-card,
  html body.light-mode .feature-item,
  html body.light-mode .newsletter-card,
  html body.light-mode .curated-card,
  html body.light-mode .blog-tile,
  html body.light-mode .landing-ai-card {
    background-color: rgba(255, 255, 255, 0.90) !important;
  }
  html body.light-mode .blog-banner {
    background-color: rgba(255, 255, 255, 0.90) !important;
  }
  html body.light-mode .card-glass .desc {
    background-color: rgba(255, 255, 255, 0.92) !important;
  }
  html body.light-mode .card-glass .cta-btn {
    background-color: rgba(255, 255, 255, 0.92) !important;
  }
}
/* END THEODOR-MOBILE-CARD-OPAQUE-V1 */

/* =========================================================
   OLIVER-SLIDER-FADE-V8
   Same edge-fade mask applied to the curated products slider
   on the landing page. Symmetric 6% / 94% stops — RTL-safe.
   ========================================================= */
#curated .product-grid.product-slider {
    -webkit-mask-image: linear-gradient(90deg, transparent 0px, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0px, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
/* END OLIVER-SLIDER-FADE-V8 */

/* =========================================================
   OLIVER-CURATED-WIDEN-V14
   Landing curated shelf + blog grid were capped to 1200px
   (rule .page-wrapper > .curated-section at ~L4692). This
   block widens both to fill the viewport on desktop so they
   match the home page edge-to-edge layout. Padding preserved.
   Mobile unaffected (base padding already fills).
   ========================================================= */
.page-wrapper > .curated-section,
.page-wrapper > .blog-grid-section {
    width: 100% !important;
    max-width: none !important;
}
/* END OLIVER-CURATED-WIDEN-V14 */

/* =========================================================
   OLIVER-SLIDER-DESK-PAD-V15
   Desktop only: same 32px L/R padding on the curated products
   slider on the landing page.
   ========================================================= */
@media (min-width: 769px) {
    #curated .product-grid.product-slider {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}
/* END OLIVER-SLIDER-DESK-PAD-V15 */

/* =========================================================
   OLIVER-LANDING-TITLES-CENTER-V1
   Stack header rows vertically + center. Matches the podcast
   section layout. Applies to curated-shelf + blog-grid only.
   ========================================================= */
.page-wrapper > .curated-section .curated-header,
.page-wrapper > .blog-grid-section .blog-grid-header,
.curated-section .curated-header,
.blog-grid-section .blog-grid-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
.page-wrapper > .curated-section .curated-header > div,
.curated-section .curated-header > div,
.blog-grid-section .blog-grid-header > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.curated-section .curated-header h2,
.blog-grid-section .blog-grid-header h2 {
  justify-content: center !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.curated-section .curated-header p,
.blog-grid-section .blog-grid-header p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 640px;
}
.curated-section .curated-view-all,
.blog-grid-section .blog-grid-view-all {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 720px) {
  .curated-section .curated-header h2,
  .blog-grid-section .blog-grid-header h2 {
    font-size: clamp(1.2rem, 4.5vw, 1.5rem) !important;
  }
}