@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: #0F1419;
  --panel: #171D24;
  --panel-raised: #1D242C;
  --border: #2A323C;
  --text: #F5F7FA;
  --text-muted: #8B95A1;
  --mist: #7DD3E8;
  --mist-dim: rgba(125, 211, 232, 0.12);
  --coil: #FF8A4C;
  --coil-dim: rgba(255, 138, 76, 0.14);
  --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.22);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

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(15, 20, 25, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}

.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;
}

.logo-mark {
  width: 68px;
  height: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 20px;
  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: #1A0F08;
  padding-bottom: 12px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.nav-links a.btn-primary:hover { color: #1A0F08; }

/* ---------- 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; }

@media (max-width: 1024px) {
  .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: #1A0F08;
  box-shadow: 0 0 0 rgba(255,138,76,0);
}
.btn-primary:hover { box-shadow: 0 6px 24px rgba(255,138,76,0.25); }

.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(255,138,76,0); }
  50% { box-shadow: 0 0 22px rgba(255,138,76,0.35); }
}
@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(125, 211, 232, 0.16), 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;
}
.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; }

/* ---------- 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: #1A0F08;
  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: var(--text);
  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: var(--text);
  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: var(--text);
  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(125,211,232,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);
  flex-shrink: 0;
}
.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(125,211,232,0.03) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,138,76,0.03) 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-sm);
}
.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(255,138,76,0.25); 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.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: 0.88rem;
}
.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: 0.8rem;
  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 {
  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-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; }

.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);
  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; }
.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; }
.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: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); }
}

/* 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; }
}