/* ============================================================
   Londondrug — Glassmorphism landing theme
   Scoped to body.home-glass so the rest of the store is untouched.
   Accessibility: AA palette (text ≥4.5:1). Glass panels are light +
   blurred so dark ink text stays high-contrast over the vibrant mesh.
   ============================================================ */

body.home-glass {
  /* Accessible accents (darker than the soft brand pinks so white text /
     coloured text meets WCAG AA — #EC4899 on white fails, #BE185D passes). */
  --g-primary: #BE185D;   /* white-on: ~5.9:1 */
  --g-accent:  #6D28D9;   /* on-white text: ~6.7:1 */
  --g-ink:     #2A1620;
  --glass-bg:      rgba(255, 255, 255, .55);
  --glass-bg-soft: rgba(255, 255, 255, .42);
  --glass-stroke:  rgba(255, 255, 255, .60);
  --glass-blur: saturate(160%) blur(18px);
  --glass-shadow: 0 30px 70px -34px rgba(123, 47, 247, .42);

  /* Full-page vibrant wash so frosted panels read everywhere, not just the hero */
  background:
    radial-gradient(62vw 62vw at 6% -12%, rgba(224, 69, 123, .18), transparent 60%),
    radial-gradient(56vw 56vw at 104% -4%, rgba(123, 47, 247, .15), transparent 60%),
    radial-gradient(52vw 52vw at 50% 118%, rgba(201, 162, 75, .13), transparent 55%),
    var(--cream);
  background-attachment: fixed;
}

/* ---- Frosted sticky nav (homepage only) ---- */
body.home-glass .nav {
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 8px 30px -24px rgba(22, 19, 26, .55);
}

/* ---- Hero ---- */
body.home-glass .hero { padding-top: 70px; }
body.home-glass .hero-mesh { opacity: 1; filter: blur(72px); }

/* dark text sits on its own frosted panel → guaranteed contrast over the mesh */
body.home-glass .hero-copy {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  border-radius: 26px;
  padding: 34px 34px 38px;
  box-shadow: var(--glass-shadow);
}
body.home-glass .hero-copy .eyebrow {
  -webkit-text-fill-color: var(--g-accent); /* override gradient-clip text for AA */
  color: var(--g-accent);
  background: none;
}
body.home-glass .hero-copy p { color: var(--ink-soft); }

/* glass frame around the product image */
body.home-glass .hero-card {
  padding: 10px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .28);
  border: 1px solid var(--glass-stroke);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 44px 90px -34px rgba(123, 47, 247, .55);
}
body.home-glass .hero-card img { border-radius: 18px; }

/* floating glass pills */
body.home-glass .hero-badge {
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  backdrop-filter: saturate(170%) blur(14px);
  border: 1px solid rgba(255, 255, 255, .7);
  color: var(--g-ink);
  box-shadow: 0 12px 34px -14px rgba(22, 19, 26, .4);
}

/* ---- Brand marquee ---- */
body.home-glass .marquee {
  background: rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-block: 1px solid rgba(255, 255, 255, .5);
}

/* ---- Product cards: subtle glass ---- */
body.home-glass .card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border: 1px solid var(--glass-stroke);
}

/* ---- Promo panels: keep their colour, add a glass sheen + legibility scrim ---- */
body.home-glass .promo {
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 34px 80px -34px rgba(123, 47, 247, .55);
}
body.home-glass .promo::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .22), transparent 42%),
    linear-gradient(0deg, rgba(0, 0, 0, .28), transparent 55%); /* bottom scrim → text AA */
}
body.home-glass .promo > * { position: relative; z-index: 1; }

/* ---- Value cards ---- */
body.home-glass .value {
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border: 1px solid var(--glass-stroke);
  border-radius: 18px;
  padding: 24px 22px;
  box-shadow: 0 22px 54px -34px rgba(22, 19, 26, .42);
}
body.home-glass .value .k {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 12px;
  background: rgba(109, 40, 217, .10);
  color: var(--g-accent);
}
body.home-glass .value .k svg { width: 26px; height: 26px; }

/* ---- Glass secondary button ---- */
body.home-glass .btn-light {
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65);
  color: var(--ink);
}

/* ---- Accessibility: visible focus, reduced motion, no-blur fallback ---- */
body.home-glass a:focus-visible,
body.home-glass button:focus-visible {
  outline: 3px solid var(--g-accent);
  outline-offset: 2px;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  body.home-glass .blob,
  body.home-glass .hero-badge { animation: none !important; }
}

/* If the browser can't blur, fall back to opaque surfaces so text stays readable */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  body.home-glass .nav,
  body.home-glass .hero-copy,
  body.home-glass .hero-badge,
  body.home-glass .card,
  body.home-glass .value,
  body.home-glass .btn-light { background: rgba(255, 255, 255, .94); }
}