@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg: #0A0F16;
  --panel: #121A24;
  --panel-raised: #19232F;
  --border: #263241;
  --text: #EFF4F8;
  --text-muted: #8DA0B3;
  --mist: #4DC9F0;
  --mist-dim: rgba(77, 201, 240, 0.14);
  --coil: #2F8FD1;
  --coil-dim: rgba(47, 143, 209, 0.16);
  --radius: 10px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* 8pt spacing scale — use these instead of one-off pixel values */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 128px;

  /* Shared easing for interaction transitions (not ambient/looping animations) */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Typography scale — use these instead of one-off font-sizes */
  --fs-hero: clamp(2.4rem, 5vw, 3.8rem);
  --fs-h1: clamp(1.7rem, 3vw, 2.1rem);
  --fs-h2: 1.8rem;
  --fs-h3: 1.15rem;
  --fs-body-lg: 1.1rem;
  --fs-body: 1rem;
  --fs-small: 0.9rem;
  --fs-xs: 0.82rem;
  --lh-tight: 1.15;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* Elevation scale — neutral ambient shadows for raised surfaces.
     Colored glow shadows (mist/coil) stay separate as brand accents. */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.42);
}

* { box-sizing: border-box; }

/* The `hidden` attribute must always win over any component's own display
   rule (e.g. `.chat-widget-prechat { display: flex }`), or a toggled panel
   can end up stacked underneath the thing it was supposed to replace. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h2); }
.detail-title { font-size: var(--fs-h1); margin-top: 8px; }
.faq-question { font-size: var(--fs-h3); margin-bottom: 0.4em; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-3);
}

/* ---------- Header ---------- */
.nicotine-banner {
  background: #05070A;
  color: var(--text);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.01em;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.site-header.scrolled {
  background: rgba(10, 15, 22, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.32);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.logo-mark {
  width: 52px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: 16px;
  align-items: center;
}

.lang-switcher { position: relative; }
.lang-switcher-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-switcher-toggle:hover { border-color: var(--mist); color: var(--mist); }
.lang-switcher-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px;
  min-width: 140px;
  z-index: 200;
}
.lang-switcher-menu.open { display: block; }
.lang-switcher-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: var(--fs-small);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-switcher-menu a:hover { background: var(--panel); color: var(--text); }
.lang-switcher-menu a.active { color: var(--mist); font-weight: 600; }

.mobile-lang-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 8px 0;
}
.mobile-lang-list a {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.mobile-lang-list a.active { color: var(--mist); border-color: var(--mist); }

.nav-links a {
  position: relative;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  transition: color 0.2s;
  padding-bottom: 4px;
  white-space: nowrap;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--mist);
  transition: width 0.25s var(--ease);
}

.nav-links a:hover, .nav-links a.active { color: var(--mist); }
.nav-links a:not(.btn):hover::after,
.nav-links a.active:not(.btn)::after { width: 100%; }

/* .nav-links a is more specific than .btn-primary alone, so without this
   override the button here would inherit the nav's muted text color and
   4px padding-bottom instead of its own styles. */
.nav-links a.btn-primary {
  color: #F4FBFF;
  padding-bottom: 12px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.nav-links a.btn-primary:hover { color: #F4FBFF; }

/* ---------- Mobile menu ---------- */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}
.mobile-menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  margin: 0 auto;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.mobile-menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  top: 72px;
  right: 0;
  width: min(280px, 80vw);
  height: calc(100vh - 72px);
  background: var(--panel);
  border-left: 1px solid var(--border);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a {
  color: var(--text-muted);
  padding: 12px 10px;
  border-radius: 8px;
  font-weight: 500;
}
.mobile-nav a:hover { background: var(--mist-dim); color: var(--mist); }
.mobile-nav a.btn { text-align: center; margin-top: 8px; }

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,13,16,0.6);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-nav-backdrop.open { opacity: 1; pointer-events: auto; }

/* Raised from 1024px: three more nav items (Vape Finder, Guides, the
   wishlist icon) push the full desktop nav wider, so the hamburger now
   needs to take over sooner to avoid squeezing the logo. */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .mobile-menu-toggle { display: flex; }
}

.btn {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--fs-small);
  cursor: pointer;
  border: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  font-family: var(--font-body);
  box-shadow: var(--shadow-sm);
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-primary {
  background: var(--coil);
  color: #F4FBFF;
  box-shadow: 0 0 0 rgba(77,201,240,0);
}
.btn-primary:hover { box-shadow: 0 6px 24px rgba(77,201,240,0.3); }

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-secondary:hover { border-color: var(--mist); color: var(--mist); }

.btn-sm { padding: 8px 16px; font-size: 0.85rem; }

/* ---------- Hero with vapor animation ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--sp-7) 0 var(--sp-6);
  text-align: center;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(15,20,25,0.55) 0%, rgba(15,20,25,0.8) 65%, rgba(15,20,25,0.97) 100%),
    url('/img/hero-bg.png') center / cover no-repeat;
  background-color: var(--bg); /* fallback while the image loads or if it's missing */
}

.vapor-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

#smoke-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  opacity: 0.45;
}

.hero-content { position: relative; z-index: 1; }

/* Staggered entrance for hero content */
.hero-enter {
  opacity: 0;
  transform: translateY(18px);
  animation: heroEnter 0.7s ease forwards;
}
.hero-enter.d1 { animation-delay: 0.05s; }
.hero-enter.d2 { animation-delay: 0.18s; }
.hero-enter.d3 { animation-delay: 0.31s; }
.hero-enter.d4 { animation-delay: 0.44s; }

@keyframes heroEnter {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-enter { animation: none; opacity: 1; transform: none; }
}

.eyebrow {
  display: inline-block;
  color: var(--mist);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
  padding: 6px 14px;
  border: 1px solid var(--mist-dim);
  border-radius: 999px;
  background: var(--mist-dim);
}

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: var(--lh-tight);
  max-width: 760px;
  margin: 0 auto var(--sp-2);
}

.hero p.lead {
  color: var(--text-muted);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  max-width: 560px;
  margin: 0 auto var(--sp-4);
}

.hero-actions { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }

@media (max-width: 600px) {
  .hero { padding: 72px 0 56px; }
  .section { padding: var(--sp-5) 0; }
}

.btn-primary.pulse {
  animation: pulseGlow 2.6s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(77,201,240,0); }
  50% { box-shadow: 0 0 22px rgba(77,201,240,0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary.pulse { animation: none; }
}

/* ---------- Trust strip ---------- */
.trust-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
}
.trust-strip span { display: flex; align-items: center; gap: 8px; }
.trust-strip span:not(:last-child)::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border);
  margin-left: 20px;
}
.trust-strip a { color: var(--mist); }
@media (max-width: 700px) {
  .trust-strip span:not(:last-child)::after { display: none; }
}

/* ---------- Trusted brands marquee ---------- */
.trusted-brands {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trusted-brands-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: brandMarquee 30s linear infinite;
}
.trusted-brands:hover .trusted-brands-track { animation-play-state: paused; }
.trusted-brands-track span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.2s;
}
.trusted-brands-track span:hover { color: var(--mist); }

@keyframes brandMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .trusted-brands-track { animation: none; }
  .trusted-brands { overflow-x: auto; }
}

/* ---------- Section ---------- */
.section { padding: var(--sp-7) 0; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--sp-4);
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.section-head h2 { font-size: var(--fs-h2); }
.section-head p { color: var(--text-muted); margin: 0; line-height: var(--lh-relaxed); }

/* ---------- Product grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-3);
}

.product-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.product-card:hover {
  border-color: var(--mist);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(77, 201, 240, 0.18), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.product-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--panel-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  overflow: hidden;
}
.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.trending-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  background: rgba(10, 15, 22, 0.72);
  backdrop-filter: blur(4px);
  color: var(--mist);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--mist-dim);
  letter-spacing: 0.02em;
}
.thumb-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  opacity: 0.55;
}
.thumb-placeholder svg { opacity: 0.7; }
.thumb-placeholder span { font-size: 0.78rem; }
.gallery-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  opacity: 0.55;
}
.product-card:hover .product-thumb img { transform: scale(1.08); }

/* Card hover wisp — a curl of smoke rising off the card on hover */
.card-wisp {
  position: absolute;
  bottom: 60%;
  left: 50%;
  width: 60px;
  height: 90px;
  margin-left: -30px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(220,224,228,0.5), transparent 70%);
  filter: blur(3px);
  transition: opacity 0.3s ease;
  z-index: 2;
}
.product-card:hover .card-wisp {
  opacity: 1;
  animation: cardWispRise 1.8s ease-in-out infinite;
}
@keyframes cardWispRise {
  0% { transform: translateY(10px) translateX(0) scale(0.8); opacity: 0; }
  20% { opacity: 0.8; }
  100% { transform: translateY(-40px) translateX(8px) scale(1.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card-wisp { display: none; }
}

/* Click puff — small smoke burst from click point on buttons */
.puff-particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(circle, rgba(240,242,245,0.85), rgba(240,242,245,0) 70%);
  animation: puffRise 0.7s ease-out forwards;
}
@keyframes puffRise {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0.8; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .puff-particle { display: none; }
}

/* Scroll-reveal utility, applied via JS */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.product-info { padding: var(--sp-2); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-brand { color: var(--mist); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.product-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); }
.product-price { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); color: var(--coil); }
.product-meta { color: var(--text-muted); font-size: var(--fs-xs); margin-top: auto; }
.badge-out { color: #FF6B6B; font-size: var(--fs-xs); font-weight: 600; }

.type-icon-target { display: inline-flex; align-items: center; gap: 5px; }
.type-icon { width: 14px; height: 14px; stroke: var(--text-muted); flex-shrink: 0; }

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 48px;
}
.pagination-page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.9rem;
  border: 1px solid var(--border);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.pagination-page:hover { border-color: var(--mist); color: var(--mist); }
.pagination-page.active { background: var(--mist); color: #06181d; border-color: var(--mist); font-weight: 600; }

/* ---------- Filters ---------- */
.filter-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.filter-bar select, .filter-bar input[type="text"] {
  background: var(--panel-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.filter-bar select:focus, .filter-bar input:focus { outline: 2px solid var(--mist); }

/* ---------- Pill filter tabs ---------- */
.pill-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.pill-tab {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-muted);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.pill-tab:hover { border-color: var(--mist); color: var(--mist); }
.pill-tab.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.category-tabs .pill-tab {
  font-size: 0.95rem;
  padding: 12px 22px;
}
.category-tabs .pill-tab.active {
  background: var(--coil);
  color: #F4FBFF;
  border-color: var(--coil);
}

/* ---------- Product detail ---------- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 800px) {
  .product-detail { grid-template-columns: 1fr; }
}
.detail-gallery {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: pan-y;
}
.detail-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.detail-gallery-wrap { display: flex; flex-direction: column; }
.gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.gallery-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--panel-raised);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s var(--ease);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb.active { border-color: var(--mist); }
.gallery-thumb:hover { border-color: var(--mist); }

.gallery-expand {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15,20,25,0.55);
  border: none;
  color: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.gallery-expand:hover { background: rgba(15,20,25,0.8); transform: scale(1.06); }

.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 13, 17, 0.94);
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: transparent;
  border: none;
  color: #F5F5F5;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}
.lightbox-close:hover { color: var(--mist); }

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15,20,25,0.5);
  border: none;
  color: #F5F5F5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-arrow.prev { left: 12px; }
.gallery-arrow.next { right: 12px; }
.gallery-arrow:hover { background: rgba(196,82,42,0.35); }

.gallery-smoke-wipe {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 60% 90% at 30% 40%, rgba(230,232,236,0.9), transparent 60%),
    radial-gradient(ellipse 50% 80% at 70% 60%, rgba(230,232,236,0.8), transparent 65%);
  filter: blur(10px);
}
.gallery-smoke-wipe.active {
  animation: smokeWipe 0.5s ease-in-out;
}
@keyframes smokeWipe {
  0% { opacity: 0; transform: scale(0.9); }
  45% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-smoke-wipe.active { animation: none; opacity: 0; }
}
.spec-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
.spec-row .label { color: var(--text-muted); }
.detail-price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--coil); margin: 4px 0 4px; }
.price-currency-note { color: var(--text-muted); font-size: var(--fs-xs); margin: 0 0 16px; }

.color-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.color-swatch {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.color-swatch:hover { border-color: var(--mist); color: var(--mist); }
.color-swatch.active { border-color: var(--coil); background: var(--coil-dim); color: var(--coil); }

.qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  width: fit-content;
}
.qty-stepper button {
  background: var(--panel);
  border: none;
  color: var(--text);
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.qty-stepper button:hover { background: var(--panel-raised); color: var(--mist); }
.qty-stepper input {
  width: 48px;
  height: 44px;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: var(--panel-raised);
  color: var(--text);
  text-align: center;
  font-size: var(--fs-body);
  -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
}
.testimonial-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.testimonial-rating { color: var(--coil); letter-spacing: 2px; font-size: 0.95rem; }
.testimonial-quote { color: var(--text); font-size: var(--fs-body); line-height: var(--lh-relaxed); flex: 1; margin: 0; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-author img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.testimonial-avatar-fallback {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mist-dim);
  color: var(--mist);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-display);
  flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: var(--fs-small); }
.testimonial-author span { display: block; color: var(--text-muted); font-size: var(--fs-xs); }

/* ---------- Chat interface (order support + admin inquiries) ---------- */
.chat-shell {
  display: flex;
  flex-direction: column;
  height: 65vh;
  min-height: 420px;
  max-height: 640px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-raised);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  flex-shrink: 0;
  z-index: 2;
  position: relative;
}
.chat-header strong { display: block; font-size: 0.95rem; }
.chat-header span { display: block; color: var(--text-muted); font-size: 0.78rem; margin-top: 2px; }
.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mist-dim);
  color: var(--mist);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-display);
  flex-shrink: 0;
}
.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background:
    radial-gradient(circle at 20% 20%, rgba(77,201,240,0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(77,201,240,0.05) 0%, transparent 40%),
    var(--bg);
}
.chat-bubble-row { display: flex; margin: 4px 0; }
.chat-bubble-row.from-them { justify-content: flex-start; }
.chat-bubble-row.from-me { justify-content: flex-end; }
.chat-bubble {
  max-width: 72%;
  padding: 9px 13px;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}
.msg-ticks-slot { display: inline-flex; transition: opacity 0.2s var(--ease); }
.chat-bubble-row.from-them .chat-bubble { background: var(--panel-raised); border-bottom-left-radius: 3px; }
.chat-bubble-row.from-me .chat-bubble { background: var(--coil-dim); border: 1px solid rgba(47,143,209,0.3); border-bottom-right-radius: 3px; }
.chat-bubble-sender { display: block; font-size: 0.72rem; font-weight: 700; color: var(--mist); margin-bottom: 2px; }
.chat-bubble p { margin: 0; color: var(--text); line-height: 1.45; font-size: 0.92rem; white-space: pre-wrap; word-break: break-word; }
.chat-bubble-time { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 4px; color: var(--text-muted); font-size: 0.68rem; }
.msg-ticks { display: inline-flex; align-items: center; }
.msg-ticks.sent { color: var(--text-muted); }
.msg-ticks.delivered { color: var(--text-muted); }
.msg-ticks.seen { color: var(--mist); }
.chat-bubble-sending { padding: 12px 16px; display: flex; align-items: center; }
.typing-dots { display: inline-flex; gap: 4px; }
.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typingBounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.chat-send-error {
  text-align: center;
  color: #FF6B6B;
  font-size: 0.78rem;
  margin: 6px auto;
}

.chat-bubble-image {
  display: block;
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
}
.chat-bubble.has-image { padding: 8px; }
.chat-attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.chat-attach-btn:hover { color: var(--mist); background: var(--panel); }
.chat-image-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--panel-raised);
}
.chat-image-preview[hidden] { display: none; }
.chat-image-preview img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.chat-image-preview button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--panel);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.chat-image-preview button:hover { color: var(--text); }

.chat-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--panel-raised);
  flex-shrink: 0;
}
.chat-composer input[type="text"] {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--text);
  font-size: 16px;
}
.chat-composer input[type="text"]:focus { outline: none; border-color: var(--mist); }
.chat-agent-select {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 12px;
  color: var(--text-muted);
  font-size: 16px;
  max-width: 130px;
  flex-shrink: 0;
}

/* Conversation list (admin) */
.chat-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; max-width: 640px; }
.chat-list-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.15s var(--ease);
}
.chat-list-row:last-child { border-bottom: none; }
.chat-list-row:hover { background: var(--panel-raised); }
.chat-list-row.unread strong { color: var(--text); }
.chat-list-row:not(.unread) strong { color: var(--text-muted); font-weight: 600; }
.chat-list-row-link { position: absolute; inset: 0; z-index: 1; }
.chat-list-body { flex: 1; min-width: 0; }
.chat-list-top { display: flex; justify-content: space-between; gap: 10px; }
.chat-list-time { color: var(--text-muted); font-size: 0.75rem; flex-shrink: 0; }
.chat-list-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.chat-list-preview {
  color: var(--text-muted);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-list-row.unread .chat-list-preview { color: var(--text); }
.chat-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coil); flex-shrink: 0; }
.chat-list-ref { display: block; color: var(--mist); font-size: 0.7rem; font-family: var(--font-display); margin-top: 3px; }
.chat-list-delete-form { position: relative; z-index: 2; flex-shrink: 0; }
.chat-list-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.chat-list-delete-btn:hover { background: rgba(255,90,90,0.12); color: #ff6b6b; }

.chat-thread-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.chat-thread-delete-btn:hover { background: rgba(255,90,90,0.1); color: #ff6b6b; border-color: rgba(255,90,90,0.3); }
.chat-thread-delete-btn.is-unblock:hover { background: rgba(62,207,110,0.12); color: #3ecf6e; border-color: rgba(62,207,110,0.35); }
@media (max-width: 480px) {
  .chat-thread-delete-btn span { display: none; }
  .chat-thread-delete-btn { padding: 8px; }
}
.chat-blocked-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,90,90,0.15);
  color: #ff8a8a;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}
.chat-blocked-banner {
  padding: 10px 18px;
  background: rgba(255,90,90,0.1);
  border-bottom: 1px solid rgba(255,90,90,0.25);
  color: #ff8a8a;
  font-size: 0.8rem;
  text-align: center;
  flex-shrink: 0;
}
.chat-list-block-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.chat-list-block-btn:hover { background: rgba(255,90,90,0.12); color: #ff6b6b; }
.chat-list-block-btn.is-unblock:hover { background: rgba(62,207,110,0.12); color: #3ecf6e; }
.chat-list-row.is-blocked { opacity: 0.72; }

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.whatsapp-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: whatsappPulse 2.4s ease-out infinite;
  z-index: -1;
}
@keyframes whatsappPulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.8); opacity: 0; }
}
.whatsapp-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-lg); }
@media (max-width: 600px) {
  .whatsapp-float { bottom: 16px; right: 16px; width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float::before { animation: none; display: none; }
}

.variant-photo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.variant-photo-row:last-child { border-bottom: none; }
.variant-photo-row .variant-label {
  min-width: 130px;
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 500;
}
.variant-photo-row .variant-existing-thumb {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.variant-photo-row input[type="file"] {
  flex: 1;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.flavor-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.flavor-tag { background: var(--coil-dim); color: var(--coil); border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; }

/* ---------- Forms ---------- */
.form-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  max-width: 560px;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-small); color: var(--text-muted); }
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  color-scheme: dark;
  padding: var(--sp-1) 14px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none;
  border-color: var(--mist);
  box-shadow: 0 0 0 3px var(--mist-dim);
}
.form-group input.field-invalid, .form-group textarea.field-invalid {
  border-color: #FF6B6B;
}
.form-group input.field-invalid:focus, .form-group textarea.field-invalid:focus {
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.18);
}
.field-error-msg {
  display: block;
  color: #FF6B6B;
  font-size: var(--fs-xs);
  margin-top: 6px;
}
.form-error { color: #FF6B6B; margin-bottom: var(--sp-2); font-size: var(--fs-small); }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.pack-option-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.pack-option-row input[type="text"] { flex: 2; }
.pack-option-row input[type="number"] { flex: 1; }
.pack-option-row .pack-option-remove { flex-shrink: 0; }
.checkbox-row input { width: auto; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 56px 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
}
.footer-logo { font-size: 1.05rem; margin-bottom: 4px; }
.footer-tagline { color: var(--text-muted); font-size: 0.86rem; line-height: var(--lh-relaxed); margin: 0; max-width: 280px; }
.footer-heading {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-links-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-links-col a {
  color: var(--text);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.footer-links-col a:hover { color: var(--mist); }
.footer-brand p { color: var(--text-muted); font-size: 0.88rem; max-width: 320px; margin: 0; }
.footer-col h4 {
  color: var(--text);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.footer-col a { color: var(--text-muted); font-size: 0.9rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--mist); }

.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.footer-contact-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.footer-contact-icon svg { width: 16px; height: 16px; stroke: var(--text-muted); }
.footer-contact-row strong { display: block; color: var(--text); font-size: 0.88rem; }
.footer-contact-row span { color: var(--text-muted); font-size: 0.88rem; }

.footer-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 24px;
  border-top: 1px solid var(--border);
  justify-content: center;
}
.footer-links-row a { color: var(--text-muted); font-size: 0.85rem; }
.footer-links-row a:hover { color: var(--mist); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
}

/* ---------- Accessibility & interaction polish ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--mist);
  outline-offset: 2px;
}
.btn:active { transform: translateY(0) scale(0.97); }

/* ---------- Age gate ---------- */
.age-gate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 13, 16, 0.96);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.age-gate-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  max-width: 420px;
  text-align: center;
}
.age-gate-card h2 { font-size: 1.4rem; }
.age-gate-card p { color: var(--text-muted); font-size: 0.9rem; }
.age-gate-actions { display: flex; gap: 12px; margin-top: 24px; justify-content: center; }

/* ---------- Admin ---------- */
.admin-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.admin-sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 24px;
}
.admin-sidebar a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-size: 0.9rem;
}
.admin-sidebar a:hover, .admin-sidebar a.active { background: var(--mist-dim); color: var(--mist); }
.admin-main { padding: 32px; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.admin-table th { color: var(--text-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.admin-actions { display: flex; gap: 8px; }
.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.bulk-toolbar span { color: var(--text-muted); font-size: 0.85rem; margin-right: auto; }
.empty-state { text-align: center; padding: 80px 20px; color: var(--text-muted); }

@media (max-width: 700px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
}

/* These two blocks are placed at the very end of the file on purpose —
   .section-head and .footer-links-col both have base (non-mobile) rules
   defined earlier with equal specificity, so an override needs to come
   later in the file to actually win, regardless of which media query
   "sounds" more specific. Do not move these earlier without re-checking. */
@media (max-width: 600px) {
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--sp-3);
  }
  .section-head > a.btn { margin-top: 4px; }
}

@media (max-width: 700px) {
  .footer-links-col {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 12px 20px;
  }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
}

/* Mobile-wide scale-down: headings and controls were too large relative
   to a phone screen, making everything feel cramped against the edges.
   Overriding the typography tokens here means every element using them
   (h1/h2/h3, section titles, product names, etc.) shrinks consistently
   without having to hunt down each individual rule. Placed at the very
   end for the same cascade-order reason as the blocks above. */
@media (max-width: 600px) {
  :root {
    --fs-hero: clamp(1.7rem, 7vw, 2.2rem);
    --fs-h1: 1.35rem;
    --fs-h2: 1.3rem;
    --fs-h3: 1rem;
    --fs-body-lg: 1rem;
  }

  .pill-tab {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .category-tabs .pill-tab {
    font-size: 0.86rem;
    padding: 9px 16px;
  }
  .filter-bar {
    padding: 14px;
    gap: 10px;
  }
  .btn {
    padding: 10px 18px;
    font-size: 0.88rem;
  }
  .detail-price { font-size: 1.25rem; }
}

@media (max-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .product-info { padding: 10px; gap: 4px; }
  .product-name { font-size: 0.92rem; }
  .product-brand { font-size: 0.68rem; }
  .product-price { font-size: 0.85rem; }
}

@media (max-width: 600px) {
  .container { padding: 0 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .typing-dots span { animation: none; opacity: 0.8; }
}

/* ---------- Admin mobile responsiveness ---------- */
@media (max-width: 700px) {
  .admin-main { padding: 20px 16px; }

  /* Turn the product table into stacked cards instead of a cramped,
     horizontally-scrolling table — much easier to read and tap on a phone. */
  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--panel);
  }
  .admin-table td {
    border-bottom: none;
    padding: 7px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .admin-table td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .admin-table td.admin-actions {
    justify-content: flex-start;
    gap: 8px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }

  /* Chat shell needs to use most of the viewport height on a phone,
     not a fixed desktop-sized box */
  .chat-shell { height: 70vh; min-height: 380px; }
}

/* ---------- Admin topbar + mobile drawer ---------- */
.admin-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.admin-menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.admin-menu-toggle span {
  width: 18px;
  height: 2px;
  background: var(--text);
  margin: 0 auto;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.admin-menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.admin-menu-toggle.open span:nth-child(2) { opacity: 0; }
.admin-menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.admin-mobile-drawer {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 260px;
  max-width: 80vw;
  background: var(--panel);
  border-left: 1px solid var(--border);
  z-index: 1100;
  padding: 80px 20px 20px;
  flex-direction: column;
  gap: 4px;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease);
}
.admin-mobile-drawer.open { display: flex; transform: translateX(0); }
.admin-mobile-drawer a {
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--text-muted);
}
.admin-mobile-drawer a:hover { background: var(--panel-raised); color: var(--text); }

.admin-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1090;
}
.admin-drawer-backdrop.open { display: block; }

@media (max-width: 700px) {
  .admin-topbar { display: flex; }
}

/* ---------- Admin chat: full-screen takeover on mobile, like WhatsApp ---------- */
.chat-header-back {
  display: none;
  color: var(--text);
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .admin-chat-page { padding: 0; }
  .admin-chat-page .chat-back-link { display: none; }
  .admin-chat-page .chat-shell {
    margin-top: 0 !important;
    height: 100dvh;
    max-height: none;
    min-height: 0;
    border: none;
    border-radius: 0;
  }
  .chat-header-back { display: flex; }
  /* The chat itself becomes the whole screen — the persistent topbar/hamburger
     underneath it is redundant while a conversation is open, exactly like
     WhatsApp shows only the conversation, not the app's own chrome, once
     you're inside a chat. */
  body:has(.admin-chat-page) .admin-topbar {
    display: none;
  }
}

/* ---------- Admin: unread chat badge + push-enable button ---------- */
.admin-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--coil);
  color: #1a0f08;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.admin-enable-push-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-raised);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.admin-enable-push-btn:hover { background: var(--mist-dim); transform: translateY(-2px); }
.admin-enable-push-btn[hidden] { display: none; }
.admin-test-push-btn { bottom: 68px; }
@media (max-width: 700px) {
  .admin-test-push-btn { bottom: 62px; }
}
.admin-test-push-result {
  position: fixed;
  bottom: 112px;
  left: 20px;
  z-index: 950;
  max-width: 260px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.76rem;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.admin-test-push-result.is-ok { color: #3ecf6e; border-color: rgba(62,207,110,0.3); }
.admin-test-push-result.is-error { color: #ff8a8a; border-color: rgba(255,90,90,0.3); }
.admin-test-push-result[hidden] { display: none; }
@media (max-width: 700px) { .admin-test-push-result { bottom: 106px; left: 16px; } }
@media (max-width: 700px) {
  .admin-enable-push-btn { bottom: 16px; left: 16px; font-size: 0.78rem; padding: 9px 14px; }
}

/* ---------- Chat: file attachment bubble (documents, not just photos) ---------- */
.chat-file-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
  color: inherit;
  text-decoration: none;
  margin-bottom: 4px;
}
.chat-bubble.has-file { padding: 8px; }
.chat-file-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--mist-dim);
  color: var(--mist);
}
.chat-file-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-file-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.chat-file-ext { font-size: 0.7rem; color: var(--text-muted); }
.chat-image-preview-name {
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* ============================================================
   Wishlist, Compare, and Vape Finder Quiz — added on top of the
   Nimbus-derived styles above. Kept together at the end of the
   file so they're easy to find and adjust as a unit.
   ============================================================ */

/* ---------- Toast ---------- */
.ea-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 0.88rem;
  font-weight: 500;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
.ea-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Product card wishlist/compare buttons ---------- */
.card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(10, 15, 22, 0.55);
  color: #F4FBFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.card-action-btn:hover { transform: scale(1.08); background: rgba(10, 15, 22, 0.8); }
.card-action-btn.wishlist-toggle.is-active { color: #FF6B8B; background: rgba(255, 107, 139, 0.16); }
.card-action-btn.wishlist-toggle.is-active svg { fill: #FF6B8B; }
.card-action-btn.compare-toggle.is-active { color: var(--mist); background: var(--mist-dim); }

/* Product detail page's own wishlist/compare buttons (not card overlays) */
#detail-wishlist-btn.is-active, #detail-compare-btn.is-active {
  border-color: var(--mist);
  color: var(--mist);
}

/* ---------- Floating compare bar ---------- */
.ea-compare-bar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 900;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 92vw;
}
.ea-compare-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ea-compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mist-dim);
  color: var(--text);
  border: 1px solid var(--mist-dim);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 0.8rem;
  max-width: 160px;
}
.ea-compare-chip button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
}
.ea-compare-chip button:hover { color: var(--text); }
.ea-compare-bar-actions { display: flex; gap: 8px; }

@media (max-width: 640px) {
  .ea-compare-bar { flex-direction: column; align-items: stretch; }
  .ea-compare-bar-actions { justify-content: flex-end; }
}

/* ---------- Comparison table (compare.ejs) ---------- */
.compare-table-wrap { overflow-x: auto; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.compare-table th, .compare-table td {
  border: 1px solid var(--border);
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  font-size: 0.9rem;
}
.compare-table thead th {
  background: var(--panel-raised);
  min-width: 200px;
}
.compare-table tbody th {
  background: var(--panel-raised);
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.compare-product-header { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.compare-product-header img {
  width: 100%;
  max-width: 140px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ---------- Vape Finder Quiz ---------- */
.quiz-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.quiz-progress {
  display: flex;
  gap: 6px;
  margin-bottom: var(--sp-3);
}
.quiz-progress-step {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
}
.quiz-progress-step.is-done { background: var(--mist); }
.quiz-question { display: none; }
.quiz-question.is-active { display: block; }
.quiz-question h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: var(--sp-3);
}
.quiz-option {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-raised);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  font-size: 0.92rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.quiz-option:hover { transform: translateY(-2px); border-color: var(--mist); }
.quiz-option.is-selected { border-color: var(--mist); background: var(--mist-dim); color: var(--mist); }
.quiz-nav { display: flex; justify-content: space-between; margin-top: var(--sp-2); }
.quiz-results-intro { text-align: center; margin-bottom: var(--sp-3); }
.quiz-loading { text-align: center; padding: var(--sp-4) 0; color: var(--text-muted); }

/* ---------- Guides ---------- */
.guide-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.guide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--mist); }
.guide-card h3 { font-size: var(--fs-h3); margin: 6px 0; }
.guide-card p { color: var(--text-muted); font-size: 0.9rem; line-height: var(--lh-normal); }
.guide-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mist);
}
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3); }
.guide-article { max-width: 720px; margin: 0 auto; line-height: var(--lh-relaxed); }
.guide-article h1 { margin-bottom: 6px; }
.guide-article .guide-meta { color: var(--text-muted); font-size: 0.85rem; margin-bottom: var(--sp-3); }
.guide-article p { margin-bottom: var(--sp-2); }
.guide-article h2 { font-size: var(--fs-h3); margin: var(--sp-4) 0 var(--sp-1); }

.nav-wishlist-link {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  transition: color 0.2s var(--ease);
}
.nav-wishlist-link:hover { color: var(--mist); }