/* ==========================================================================
   GENERATED by build.js — do not edit. Edit src/css/*.css and rebuild.
   ========================================================================== */

/* ========================================================================
   01-tokens.css
   ======================================================================== */
/* ==========================================================================
   VAPE EMPIRE — 01 TOKENS
   Single source of truth: colour, type, space, radius, shadow, motion, z-index.
   Also where Bootstrap's own variables are re-pointed at our palette, so the
   framework's grid, offcanvas, modal and utilities inherit the brand without
   any component being restyled twice.
   ========================================================================== */

/* ==========================================================================
   ⬇⬇  THEME DIAL — the two ramps the whole site is drawn from  ⬇⬇
   INK is the near-black used for type, headers and dark sections.
   GOLD is the champagne accent: eyebrows, prices, rules, primary buttons.
   Change a ramp here and every section, badge and shadow follows.
   ========================================================================== */
:root {
  /* ---------- Ink (black / charcoal) ---------- */
  --ve-ink-950: #08080a;
  --ve-ink-900: #0e0e11;
  --ve-ink-800: #16161a;
  --ve-ink-700: #1f1f24;
  --ve-ink-600: #2c2c33;
  --ve-ink-500: #3d3d45;
  --ve-ink-400: #6b6b75;
  --ve-ink-300: #9a9aa3;
  --ve-ink-200: #c9c9d0;
  --ve-ink-100: #e6e6ea;
  --ve-ink-50: #f4f4f6;

  /* ---------- Gold / champagne ---------- */
  --ve-gold-700: #6f521f;
  --ve-gold-600: #8c6b2f;
  --ve-gold-500: #a8873f;
  --ve-gold-400: #c6a15b;
  --ve-gold-300: #d9bc81;
  --ve-gold-200: #e9d5a9;
  --ve-gold-100: #f3e8cf;
  --ve-gold-50: #faf4e6;

  /* ---------- Surfaces ---------- */
  --ve-white: #ffffff;
  --ve-cream: #faf8f4;
  --ve-champagne: #f5efe3;

  /* ---------- Status ---------- */
  --ve-success: #2f7d5d;
  --ve-danger: #a13c34;

  /* ---------- Live chat ----------
     Deliberately outside the ink/gold system. The chat button floats over both
     the white body and the ink footer, so anything drawn from the site palette
     disappears against one of them. Amethyst reads as an invitation rather
     than a brand element, and never collides with the WhatsApp green above it. */
  --ve-chat-500: #6b4bd6;
  --ve-chat-400: #8163e4;
  --ve-shadow-chat: 0 4px 10px rgba(107, 75, 214, 0.28), 0 16px 34px -12px rgba(107, 75, 214, 0.55);

  /* ---------- Type ---------- */
  --ve-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ve-font-display: "Cormorant Garamond", ui-serif, "Iowan Old Style", Georgia, serif;

  /* Fluid display sizes — clamp so headings never need a media query */
  --ve-fs-hero: clamp(2.75rem, 1.6rem + 4.4vw, 4.1rem);
  --ve-fs-h2: clamp(2rem, 1.4rem + 2.2vw, 2.6rem);
  --ve-fs-h3: clamp(1.4rem, 1.2rem + 0.9vw, 1.75rem);
  --ve-fs-body: 0.9375rem;
  --ve-fs-sm: 0.875rem;
  --ve-fs-xs: 0.8125rem;
  --ve-fs-2xs: 0.75rem;
  --ve-fs-3xs: 0.6875rem;
  --ve-fs-4xs: 0.625rem;

  /* The wide-tracked uppercase label that recurs across the whole site */
  --ve-track-eyebrow: 0.22em;
  --ve-track-wide: 0.16em;

  /* ---------- Space ---------- */
  --ve-gutter: 1.25rem;         /* horizontal page padding, mobile */
  --ve-gutter-lg: 3rem;         /* horizontal page padding, desktop */
  --ve-max: 86rem;              /* the site's measure */
  --ve-max-wide: 104rem;
  --ve-max-narrow: 86rem;
  --ve-section-y: 5rem;
  --ve-section-y-lg: 7rem;

  /* ---------- Radius ---------- */
  --ve-r-sm: 0.375rem;
  --ve-r-md: 0.5rem;
  --ve-r-lg: 0.75rem;
  --ve-r-xl: 1rem;
  --ve-r-pill: 999px;

  /* ---------- Elevation — soft, so cards never need a border ---------- */
  --ve-shadow-card: 0 1px 2px rgba(16, 16, 20, 0.04), 0 12px 32px -14px rgba(16, 16, 20, 0.14);
  --ve-shadow-lift: 0 2px 6px rgba(16, 16, 20, 0.05), 0 28px 56px -20px rgba(16, 16, 20, 0.22);
  --ve-shadow-menu: 0 24px 64px -20px rgba(8, 8, 10, 0.28);
  --ve-shadow-gold: 0 12px 28px -12px rgba(198, 161, 91, 0.9);

  /* ---------- Motion ---------- */
  --ve-ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --ve-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ve-t-fast: 0.3s;
  --ve-t-mid: 0.5s;
  --ve-t-slow: 0.9s;

  /* ---------- Z-index scale — every layered thing draws from here ---------- */
  --ve-z-header: 50;
  --ve-z-menu: 55;
  --ve-z-drawer: 70;
  --ve-z-cart: 80;
  --ve-z-toast: 90;
  --ve-z-gate: 100;
}

/* ==========================================================================
   BOOTSTRAP BRIDGE
   Bootstrap 5.3 reads its own custom properties at runtime, so re-pointing
   them here is enough to brand the grid, buttons, offcanvas, modal, accordion
   and every utility class without overriding their rules one by one.
   ========================================================================== */
:root {
  --bs-body-font-family: var(--ve-font-sans);
  --bs-body-font-size: var(--ve-fs-body);
  --bs-body-color: var(--ve-ink-900);
  --bs-body-color-rgb: 14, 14, 17;
  --bs-body-bg: var(--ve-white);
  --bs-body-bg-rgb: 255, 255, 255;

  --bs-emphasis-color: var(--ve-ink-950);
  --bs-secondary-color: var(--ve-ink-500);
  --bs-tertiary-color: var(--ve-ink-400);

  --bs-border-color: var(--ve-ink-100);
  --bs-border-color-translucent: rgba(14, 14, 17, 0.08);
  --bs-border-radius: var(--ve-r-md);
  --bs-border-radius-sm: var(--ve-r-sm);
  --bs-border-radius-lg: var(--ve-r-lg);
  --bs-border-radius-xl: var(--ve-r-xl);
  --bs-border-radius-pill: var(--ve-r-pill);

  --bs-primary: var(--ve-gold-400);
  --bs-primary-rgb: 198, 161, 91;
  --bs-dark: var(--ve-ink-950);
  --bs-dark-rgb: 8, 8, 10;
  --bs-success: var(--ve-success);
  --bs-success-rgb: 47, 125, 93;
  --bs-danger: var(--ve-danger);
  --bs-danger-rgb: 161, 60, 52;

  --bs-link-color: var(--ve-ink-900);
  --bs-link-color-rgb: 14, 14, 17;
  --bs-link-hover-color: var(--ve-gold-600);
  --bs-link-hover-color-rgb: 140, 107, 47;

  --bs-focus-ring-color: rgba(198, 161, 91, 0.45);
  --bs-focus-ring-width: 2px;

  /* Our gutters are wider than Bootstrap's default 1.5rem — the white space
     is the whole point of the layout. */
  --bs-gutter-x: 1.5rem;
}

/* Bootstrap's pagination hardcodes its own blue rather than reading
   --bs-primary, so it needs restyling by hand to match the ink/gold system. */
.pagination { gap: 0.375rem; }
.pagination .page-link {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--ve-r-md) !important;
  color: var(--ve-ink-700);
  transition: all var(--ve-t-fast) var(--ve-ease-lux);
}
.pagination .page-link:hover,
.pagination .page-link:focus {
  background: var(--ve-gold-50);
  border-color: var(--ve-gold-300);
  color: var(--ve-gold-700);
  box-shadow: none;
}
.pagination .page-item.active .page-link {
  background: var(--ve-gold-400);
  border-color: var(--ve-gold-400);
  color: var(--ve-ink-950);
}
.pagination .page-item.disabled .page-link {
  background: transparent;
  border-color: var(--bs-border-color);
  color: var(--ve-ink-300);
}


/* ========================================================================
   02-base.css
   ======================================================================== */
/* ==========================================================================
   VAPE EMPIRE — 02 BASE
   Element defaults, typography, focus, motion and the handful of text
   utilities the design leans on everywhere.
   ========================================================================== */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--ve-ink-200) transparent;
}

body {
  background-color: var(--ve-white);
  color: var(--ve-ink-900);
  font-family: var(--ve-font-sans);
  font-size: var(--ve-fs-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Locked while a drawer, overlay or the age gate owns the screen */
body.ve-locked {
  overflow: hidden;
}

::selection {
  background-color: var(--ve-gold-200);
  color: var(--ve-ink-950);
}

:focus-visible {
  outline: 2px solid var(--ve-gold-400);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- type ---- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ve-font-display);
  font-weight: 500;
  color: var(--ve-ink-950);
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0;
}

h1 { font-size: var(--ve-fs-hero); line-height: 1.04; letter-spacing: -0.02em; }
h2 { font-size: var(--ve-fs-h2); }
h3 { font-size: var(--ve-fs-h3); }

p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ve-t-fast) var(--ve-ease-lux);
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, svg {
  max-width: 100%;
  display: block;
}

address {
  font-style: normal;
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, select, textarea {
  font: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--ve-ink-100);
  margin: 0;
  opacity: 1;
}

/* ----------------------------------------------------------- utilities ---- */

/* The recurring luxury signature: wide-tracked uppercase micro-label */
.ve-eyebrow {
  font-size: var(--ve-fs-3xs);
  line-height: 1;
  font-weight: 500;
  letter-spacing: var(--ve-track-eyebrow);
  text-transform: uppercase;
}

.ve-display { font-family: var(--ve-font-display); }
.ve-nums { font-variant-numeric: tabular-nums; }

.ve-gold { color: var(--ve-gold-500); }
.ve-gold-400 { color: var(--ve-gold-400); }
.ve-muted { color: var(--ve-ink-500); }
.ve-faint { color: var(--ve-ink-400); }
.ve-ink { color: var(--ve-ink-950); }

/* Short gold rule that sits beside an eyebrow */
.ve-tick {
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--ve-gold-400);
  flex: none;
}

/* Full-width hairline that fades out at both ends */
.ve-rule-gold {
  height: 1px;
  background-image: linear-gradient(to right, transparent, var(--ve-gold-300), transparent);
  border: 0;
}

/* Underline that sweeps in from the left on hover */
.ve-sweep {
  position: relative;
}
.ve-sweep::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 100%;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ve-ease-lux);
}
.ve-sweep:hover::after,
a:hover > .ve-sweep::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Horizontal scrollers (tab rails, chip rows) without a visible scrollbar */
.ve-no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ve-no-scrollbar::-webkit-scrollbar { display: none; }

/* Several components set an explicit `display`, which would otherwise beat the
   [hidden] attribute. Toggling `hidden` must always win. */
[hidden] { display: none !important; }

.ve-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard users get the skip link; everyone else never sees it */
.ve-skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: var(--ve-z-gate);
  background: var(--ve-ink-950);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--ve-r-sm);
  font-size: var(--ve-fs-3xs);
  letter-spacing: var(--ve-track-wide);
  text-transform: uppercase;
  transition: top var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-skip-link:focus { top: 1rem; }

/* ---------------------------------------------------------- animation ---- */

@keyframes ve-fade-up {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes ve-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ve-scale-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes ve-slide-in-right {
  from { opacity: 0; transform: translate3d(2rem, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* Drives the hero's slide-duration indicator */
@keyframes ve-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Two identical brand tracks scrolling as one */
@keyframes ve-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.ve-anim-fade-up { animation: ve-fade-up 0.7s var(--ve-ease-lux) both; }
.ve-anim-fade-in { animation: ve-fade-in 0.5s var(--ve-ease-lux) both; }
.ve-anim-scale-in { animation: ve-scale-in 0.35s var(--ve-ease-lux) both; }

/* Sections lifted in as they enter the viewport (see main.js).
   Gated on .ve-js — set by an inline script in <head> — so that with
   JavaScript off the content is simply there rather than invisible forever. */
.ve-js .ve-reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.8s var(--ve-ease-lux), transform 0.8s var(--ve-ease-lux);
}
.ve-js .ve-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ve-js .ve-reveal { opacity: 1; transform: none; }
}


/* ========================================================================
   03-layout.css
   ======================================================================== */
/* ==========================================================================
   VAPE EMPIRE — 03 LAYOUT
   The page shell: measure, announcement bar, header, mega-menu, drawers,
   overlays and footer. Everything that frames a page rather than fills it.
   ========================================================================== */

/* ------------------------------------------------------------- measure ---- */

.ve-wrap {
  width: 100%;
  max-width: var(--ve-max);
  margin-inline: auto;
  padding-inline: var(--ve-gutter);
}
.ve-wrap--wide { max-width: var(--ve-max-wide); }
.ve-wrap--narrow { max-width: var(--ve-max-narrow); }

.ve-section { padding-block: var(--ve-section-y); }
.ve-section--tight { padding-block: 3.5rem; }
.ve-section--cream { background: var(--ve-cream); }
.ve-section--champagne { background: var(--ve-champagne); }
.ve-section--ink { background: var(--ve-ink-950); color: var(--ve-ink-300); }
.ve-section--edged { border-bottom: 1px solid var(--ve-ink-100); }

/* --------------------------------------------------- announcement bar ---- */

.ve-announce {
  position: relative;
  height: 2.25rem;
  overflow: hidden;
  background: var(--ve-ink-950);
  color: #fff;
}
.ve-announce__track {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-width: var(--ve-max);
  margin-inline: auto;
  padding-inline: var(--ve-gutter);
}
.ve-announce__msg {
  position: absolute;
  text-align: center;
  font-size: var(--ve-fs-3xs);
  letter-spacing: 0.12em;
  color: var(--ve-ink-200);
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.7s var(--ve-ease-lux), transform 0.7s var(--ve-ease-lux);
}
.ve-announce__msg.is-active {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------- header ---- */

.ve-header {
  position: sticky;
  top: 0;
  z-index: var(--ve-z-header);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow var(--ve-t-mid) var(--ve-ease-lux);
}
.ve-header.is-scrolled {
  box-shadow: 0 1px 0 rgba(14, 14, 17, 0.06), 0 8px 28px -20px rgba(14, 14, 17, 0.4);
}

.ve-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--ve-max);
  margin-inline: auto;
  padding-inline: var(--ve-gutter);
  height: 4.75rem;
  transition: height var(--ve-t-mid) var(--ve-ease-lux);
}
.ve-header.is-scrolled .ve-header__bar { height: 4rem; }

/* ---- logo lockup ---- */

.ve-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  flex: none;
}
.ve-logo__crown {
  width: 5rem;
  height: 5rem;
  color: var(--ve-gold-400);
  flex: none;
  transition: transform var(--ve-t-mid) var(--ve-ease-lux);
}
.ve-logo:hover .ve-logo__crown { transform: translateY(-2px); }
.ve-logo__text { display: flex; flex-direction: column; line-height: 1; }
.ve-logo__word {
  font-family: var(--ve-font-display);
  font-weight: 500;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--ve-ink-950);
}
.ve-logo__sub {
  margin-top: 0.25rem;
  font-size: 0.45rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  line-height: 1;
  color: var(--ve-ink-300);
}
.ve-header.is-scrolled .ve-logo__crown { width: 1.5rem; height: 1.5rem; }
.ve-header.is-scrolled .ve-logo__word { font-size: 0.9rem; }
.ve-header.is-scrolled .ve-logo__sub { font-size: 0.4rem; }

.ve-logo--light .ve-logo__word { color: #fff; }
.ve-logo--light .ve-logo__sub { color: var(--ve-ink-400); }

/* ---- primary navigation ---- */

.ve-nav {
  display: none;
  align-items: center;
  margin-left: auto;
}
.ve-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  padding: 0.75rem 0.75rem;
  font-size: var(--ve-fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ve-ink-600);
}
.ve-nav__link:hover,
.ve-nav__item.is-open .ve-nav__link { color: var(--ve-ink-950); }

.ve-nav__link svg {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--ve-ink-300);
  transition: transform 0.4s var(--ve-ease-lux), color var(--ve-t-fast);
}
.ve-nav__item.is-open .ve-nav__link svg {
  transform: rotate(180deg);
  color: var(--ve-gold-500);
}
/* Gold underline that grows from the left when a panel opens */
.ve-nav__link::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.375rem;
  height: 1px;
  background: var(--ve-gold-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ve-ease-lux);
}
.ve-nav__item.is-open .ve-nav__link::after { transform: scaleX(1); }

/* ---- header actions ---- */

.ve-actions {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin-left: auto;
}
.ve-nav + .ve-actions { margin-left: 0.5rem; }

.ve-iconbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ve-r-pill);
  color: var(--ve-ink-700);
  transition: background-color var(--ve-t-fast), color var(--ve-t-fast);
}
.ve-iconbtn:hover {
  background: var(--ve-ink-50);
  color: var(--ve-ink-950);
}
.ve-iconbtn svg { width: 1.15rem; height: 1.15rem; }

.ve-iconbtn__badge {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: none;
  place-items: center;
  min-width: 1rem;
  height: 1rem;
  padding-inline: 0.25rem;
  border-radius: var(--ve-r-pill);
  background: var(--ve-gold-400);
  color: var(--ve-ink-950);
  font-size: 0.5625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ve-iconbtn__badge.is-shown { display: grid; }

/* Icon buttons that only appear above sm, and those that vanish above lg.
   Scoped to .ve-iconbtn because they restore `display:grid`, not `block`. */
.ve-iconbtn.ve-hide-sm { display: none; }
.ve-iconbtn.ve-hide-lg { display: grid; }

/* Anything else that is mobile/tablet only (the shop's Filters button). */
.ve-lg-down { display: inline-flex; }

/* ---- mega-menu panel ---- */

.ve-mega {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: var(--ve-z-menu);
  display: none;
  overflow: hidden;
  border-top: 1px solid var(--ve-ink-100);
  background: var(--ve-white);
  opacity: 0;
  transform: translateY(-0.5rem);
  pointer-events: none;
  transition: opacity 0.4s var(--ve-ease-lux), transform 0.4s var(--ve-ease-lux);
}
.ve-mega.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  box-shadow: var(--ve-shadow-menu);
}
.ve-mega__inner {
  display: grid;
  gap: 2.5rem;
  max-width: var(--ve-max);
  margin-inline: auto;
  padding: 2.75rem var(--ve-gutter-lg);
  grid-template-columns: 1.1fr 1fr 1.15fr;
  align-items: start;
}
.ve-mega__panel { display: none; }
.ve-mega__panel.is-active { display: contents; }

.ve-mega__lead {
  margin-top: 0.75rem;
  max-width: 20rem;
  font-size: var(--ve-fs-xs);
  line-height: 1.7;
  color: var(--ve-ink-500);
}
.ve-mega__list { margin-top: 1.5rem; }
.ve-mega__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.5rem 0.5rem 0;
  border-radius: var(--ve-r-sm);
  font-size: var(--ve-fs-body);
  color: var(--ve-ink-700);
}
.ve-mega__list a:hover { color: var(--ve-ink-950); }
.ve-mega__list a svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--ve-gold-500);
  opacity: 0;
  transform: translateX(-0.5rem);
  transition: all 0.4s var(--ve-ease-lux);
}
.ve-mega__list a:hover svg { opacity: 1; transform: none; }

.ve-mega__brands {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
}
.ve-mega__brands a {
  display: block;
  padding-block: 0.5rem;
  font-size: var(--ve-fs-sm);
  color: var(--ve-ink-500);
}
.ve-mega__brands a:hover { color: var(--ve-gold-600); }

.ve-mega__all {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--ve-fs-3xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ve-track-wide);
  color: var(--ve-ink-900);
}
.ve-mega__all svg { width: 0.875rem; height: 0.875rem; color: var(--ve-gold-500); }

.ve-mega__pick {
  border-radius: var(--ve-r-lg);
  background: var(--ve-cream);
  padding: 1.25rem;
}
.ve-mega__pick-link { display: flex; gap: 1.25rem; margin-top: 1rem; }
.ve-mega__pick-art {
  width: 8rem;
  height: 8rem;
  flex: none;
  border-radius: var(--ve-r-md);
  overflow: hidden;
  transition: transform 0.7s var(--ve-ease-lux);
}
.ve-mega__pick-link:hover .ve-mega__pick-art { transform: scale(1.05); }
.ve-mega__pick-body { display: flex; flex-direction: column; justify-content: center; }
.ve-mega__pick-name {
  margin-top: 0.5rem;
  font-size: var(--ve-fs-body);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ve-ink-900);
}
.ve-mega__pick-link:hover .ve-mega__pick-name { color: var(--ve-gold-600); }
.ve-mega__pick-note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ve-ink-100);
  font-size: var(--ve-fs-xs);
  line-height: 1.7;
  color: var(--ve-ink-500);
}

/* ------------------------------------------------------------- drawers ---- */

/* Shared scrim for the mobile nav, the cart and the search overlay */
.ve-scrim {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 10, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ve-t-fast) var(--ve-ease-lux), visibility var(--ve-t-fast);
}

.ve-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--ve-z-drawer);
  visibility: hidden;
  pointer-events: none;
}
.ve-overlay.is-open { visibility: visible; pointer-events: auto; }
.ve-overlay.is-open .ve-scrim { opacity: 1; visibility: visible; }

.ve-panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: 88%;
  max-width: 24rem;
  background: var(--ve-white);
  box-shadow: var(--ve-shadow-menu);
  transform: translateX(100%);
  transition: transform 0.42s var(--ve-ease-lux);
}
.ve-overlay.is-open .ve-panel { transform: none; }

.ve-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ve-ink-100);
}
.ve-panel__body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.ve-panel__foot { border-top: 1px solid var(--ve-ink-100); padding: 1.25rem; }

/* ---- mobile nav ---- */

.ve-mnav > li { border-bottom: 1px solid var(--ve-ink-100); }
.ve-mnav__row { display: flex; align-items: center; }
.ve-mnav__link {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.875rem;
  padding-block: 1rem;
  font-size: var(--ve-fs-body);
  font-weight: 500;
  color: var(--ve-ink-900);
}
.ve-mnav__link svg { width: 1.25rem; height: 1.25rem; color: var(--ve-gold-500); }
.ve-mnav__toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--ve-ink-400);
}
.ve-mnav__toggle svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.4s var(--ve-ease-lux);
}
.ve-mnav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.ve-mnav__sub {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--ve-t-mid) var(--ve-ease-lux), opacity var(--ve-t-mid);
}
.ve-mnav__sub.is-open { grid-template-rows: 1fr; opacity: 1; }
.ve-mnav__sub > ul { overflow: hidden; }
.ve-mnav__sub a {
  display: block;
  padding: 0.625rem 0 0.625rem 2.1rem;
  font-size: var(--ve-fs-sm);
  color: var(--ve-ink-500);
}
.ve-mnav__sub a:hover { color: var(--ve-gold-600); }
.ve-mnav__sub li:last-child { padding-bottom: 0.75rem; }

.ve-mnav-secondary {

  padding-top: 1.5rem;

}
.ve-mnav-secondary a {
  display: block;
  padding-block: 0.625rem;
  font-size: var(--ve-fs-sm);
  color: var(--ve-ink-500);
}

/* ---- search overlay ---- */

.ve-search { z-index: var(--ve-z-drawer); }
.ve-search__box {
  position: relative;
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  padding: 6rem var(--ve-gutter) 0;
}
.ve-search__card {
  overflow: hidden;
  border-radius: var(--ve-r-xl);
  background: var(--ve-white);
  box-shadow: var(--ve-shadow-menu);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity var(--ve-t-fast) var(--ve-ease-lux), transform var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-overlay.is-open .ve-search__card { opacity: 1; transform: none; }

.ve-search__field {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-inline: 1.5rem;
  border-bottom: 1px solid var(--ve-ink-100);
}
.ve-search__field > svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--ve-ink-400); }
.ve-search__input {
  height: 4rem;
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  font-size: var(--ve-fs-body);
  color: var(--ve-ink-900);
}
.ve-search__input::placeholder { color: var(--ve-ink-300); }

.ve-search__results { max-height: 52vh; overflow-y: auto; padding: 0.5rem; }
.ve-search__hit {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: var(--ve-r-lg);
  transition: background-color var(--ve-t-fast);
}
.ve-search__hit:hover { background: var(--ve-cream); }
.ve-search__hit-art { width: 3.5rem; height: 3.5rem; flex: none; border-radius: var(--ve-r-md); overflow: hidden; }
.ve-search__hit-body { min-width: 0; flex: 1; }
.ve-search__hit-name {
  margin-top: 0.375rem;
  font-size: var(--ve-fs-sm);
  font-weight: 500;
  color: var(--ve-ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ve-search__empty { padding: 1.75rem 1.5rem; }
.ve-search__chips { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---- cart drawer ---- */

.ve-cartdrawer { z-index: var(--ve-z-cart); }
.ve-cartdrawer .ve-panel { max-width: 28rem; width: 100%; }

/* -------------------------------------------------------------- footer ---- */

.ve-footer {
  background: var(--ve-ink-950);
  color: var(--ve-ink-300);
}
.ve-footer__grid {
  display: grid;
  gap: 3.5rem;
  padding-top: 5rem;
}
.ve-footer__lead {
  margin-top: 1.5rem;
  max-width: 24rem;
  font-size: var(--ve-fs-sm);
  line-height: 1.75;
  color: var(--ve-ink-400);
}
.ve-footer__brand { display: flex; align-items: center; gap: 0.75rem; }
.ve-footer__brand svg { width: 2.25rem; height: 2.25rem; color: var(--ve-gold-400); }
.ve-footer__brand span {
  font-family: var(--ve-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #fff;
}
.ve-footer__contact { margin-top: 2rem; font-size: var(--ve-fs-sm); }
.ve-footer__contact > * + * { margin-top: 0.75rem; }
.ve-footer__contact a { color: var(--ve-ink-200); }
.ve-footer__contact a:hover { color: var(--ve-gold-300); }

.ve-footer__social { margin-top: 2rem; display: flex; gap: 0.5rem; }
.ve-footer__social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--ve-r-pill);
  color: var(--ve-ink-300);
  transition: all 0.4s var(--ve-ease-lux);
}
.ve-footer__social a:hover {
  border-color: rgba(198, 161, 91, 0.6);
  color: var(--ve-gold-300);
}
.ve-footer__social svg { width: 1.05rem; height: 1.05rem; }

.ve-footer__col h3 {
  font-family: var(--ve-font-sans);
  font-size: var(--ve-fs-3xs);
  font-weight: 500;
  letter-spacing: var(--ve-track-eyebrow);
  text-transform: uppercase;
  color: var(--ve-gold-400);
}
.ve-footer__col ul { margin-top: 1.5rem; }
.ve-footer__col li + li { margin-top: 0.875rem; }
.ve-footer__col a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--ve-fs-sm);
  color: var(--ve-ink-400);
}
.ve-footer__col a:hover { color: #fff; }
.ve-footer__col a svg {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--ve-gold-400);
  opacity: 0;
  transform: translateX(-0.25rem);
  transition: all 0.4s var(--ve-ease-lux);
}
.ve-footer__col a:hover svg { opacity: 1; transform: none; }

.ve-footer__compliance {
  margin-top: 4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--ve-r-lg);
  padding: 1.25rem 1.5rem;
  font-size: var(--ve-fs-2xs);
  line-height: 1.7;
  color: var(--ve-ink-500);
}
.ve-footer__compliance strong { color: var(--ve-ink-300); font-weight: 500; }

.ve-footer__base {
  margin-top: 2.5rem;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.ve-footer__pay { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ve-footer__pay span {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--ve-r-sm);
  padding: 0.375rem 0.625rem;
  font-size: var(--ve-fs-3xs);
  letter-spacing: 0.04em;
  color: var(--ve-ink-400);
}
.ve-footer__copy { font-size: var(--ve-fs-2xs); color: var(--ve-ink-500); }


/* ========================================================================
   04-components.css
   ======================================================================== */
/* ==========================================================================
   VAPE EMPIRE — 04 COMPONENTS
   The reusable parts: buttons, headings, product cards, price, badges,
   form controls, chips, tabs, accordions, toast and the age gate.
   ========================================================================== */

/* ------------------------------------------------------------- buttons ---- */

.ve-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding-inline: 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--ve-r-sm);
  font-size: var(--ve-fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-btn svg { width: 1rem; height: 1rem; flex: none; }
.ve-btn:disabled,
.ve-btn.is-disabled { pointer-events: none; opacity: 0.4; }

.ve-btn--sm { height: 2.25rem; padding-inline: 1rem; font-size: var(--ve-fs-3xs); }
.ve-btn--lg { height: 3.25rem; padding-inline: 2rem; }
.ve-btn--block { width: 100%; }

/* The primary commerce action — solid champagne gold under ink type */
.ve-btn--gold {
  background: var(--ve-gold-400);
  color: var(--ve-ink-950);
}
.ve-btn--gold:hover {
  background: var(--ve-gold-300);
  color: var(--ve-ink-950);
  box-shadow: var(--ve-shadow-gold);
}
.ve-btn--gold:active { background: var(--ve-gold-500); }

.ve-btn--ink {
  background: var(--ve-ink-900);
  color: #fff;
}
.ve-btn--ink:hover {
  background: var(--ve-ink-700);
  color: #fff;
  box-shadow: 0 12px 28px -14px rgba(14, 14, 17, 0.8);
}

.ve-btn--outline {
  border-color: var(--ve-ink-200);
  color: var(--ve-ink-900);
}
.ve-btn--outline:hover {
  border-color: var(--ve-ink-900);
  background: var(--ve-ink-900);
  color: #fff;
}

.ve-btn--ghost { color: var(--ve-ink-700);    background-color: antiquewhite; }
.ve-btn--ghost:hover { background: var(--ve-ink-50); color: var(--ve-ink-950); }

/* For use over ink surfaces */
.ve-btn--light {
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.ve-btn--light:hover { border-color: var(--ve-gold-300); color: var(--ve-gold-200); }

/* ------------------------------------------------- section heading ---- */

.ve-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.ve-head__main { max-width: 40rem; }
.ve-head__eyebrow { display: flex; align-items: center; gap: 0.75rem; color: var(--ve-gold-500); }
.ve-head__title { margin-top: 1rem; font-size: var(--ve-fs-h2); }
.ve-head__desc {
  margin-top: 1rem;
  font-size: var(--ve-fs-body);
  line-height: 1.7;
  color: var(--ve-ink-500);
}
.ve-head__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  font-size: var(--ve-fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ve-track-wide);
  color: var(--ve-ink-500);
}
.ve-head__link:hover { color: var(--ve-gold-600); }
.ve-head__link svg { width: 1rem; height: 1rem; transition: transform var(--ve-t-mid) var(--ve-ease-lux); }
.ve-head__link:hover svg { transform: translateX(0.25rem); }

.ve-head--center { align-items: center; text-align: center; }
.ve-head--center .ve-head__eyebrow { justify-content: center; }

.ve-head--dark .ve-head__title { color: #fff; }
.ve-head--dark .ve-head__desc { color: var(--ve-ink-300); }
.ve-head--dark .ve-head__eyebrow { color: var(--ve-gold-400); }
.ve-head--dark .ve-head__link { color: var(--ve-ink-300); }
.ve-head--dark .ve-head__link:hover { color: var(--ve-gold-300); }

/* --------------------------------------------------------- page hero ---- */

.ve-pagehero {
  border-bottom: 1px solid var(--ve-ink-100);
  background: var(--ve-cream);
  padding-block: 3.5rem 3rem;
}
.ve-pagehero__title { margin-top: 1rem; font-size: var(--ve-fs-h2); }
.ve-pagehero__desc {
  margin-top: 1rem;
  max-width: 42rem;
  font-size: var(--ve-fs-body);
  line-height: 1.75;
  color: var(--ve-ink-500);
}

.ve-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--ve-fs-2xs);
  color: var(--ve-ink-400);
}
.ve-crumbs a:hover { color: var(--ve-gold-600); }
.ve-crumbs [aria-current="page"] { color: var(--ve-ink-700); }
.ve-crumbs span[aria-hidden] { color: var(--ve-ink-200); }

/* ---------------------------------------------------------- product art ---- */

/* Generated silhouette artwork — see assets/js/visual.js. Fixed square frame
   so a grid reads as one catalogue rather than a patchwork of stock images. */
.ve-art {
  position: relative;
  overflow: hidden;
  background: var(--ve-cream);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.ve-art svg, .ve-art img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------- product card ---- */

/* Deliberately borderless: separation comes from white space and a shadow
   that only appears on hover, which is what keeps a dense grid calm. */
.ve-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.75rem;
  border-radius: var(--ve-r-lg);
  background: var(--ve-white);
  transition: box-shadow var(--ve-t-mid) var(--ve-ease-lux);
}
.ve-card:hover { box-shadow: var(--ve-shadow-lift); }

.ve-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--ve-r-md);
}
.ve-card__media .ve-art {
  transition: transform var(--ve-t-slow) var(--ve-ease-lux);
}
.ve-card:hover .ve-card__media .ve-art { transform: scale(1.045); }
.ve-card.is-out .ve-art { opacity: 0.7; filter: saturate(0.35); }

.ve-card__flags {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  pointer-events: none;
}
.ve-flag {
  border-radius: var(--ve-r-pill);
  padding: 0.25rem 0.625rem;
  font-size: 0.5625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  backdrop-filter: blur(4px);
  background: rgba(8, 8, 10, 0.9);
  color: var(--ve-gold-200);
}
.ve-flag--light { background: rgba(255, 255, 255, 0.9); color: var(--ve-ink-700); }

.ve-card__wish {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ve-r-pill);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  color: var(--ve-ink-600);
  transition: all var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-card__wish:hover { background: #fff; box-shadow: var(--ve-shadow-card); }
.ve-card__wish svg { width: 1.05rem; height: 1.05rem; }
.ve-card__wish.is-on { color: var(--ve-gold-500); }
.ve-card__wish.is-on svg { fill: var(--ve-gold-400); }

.ve-card__quick {
  position: absolute;
  inset-inline: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  transition: all var(--ve-t-mid) var(--ve-ease-lux);
}
.ve-card__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 2.5rem;
  border-radius: var(--ve-r-sm);
  background: rgba(8, 8, 10, 0.92);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: var(--ve-fs-3xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  transition: background-color var(--ve-t-fast), color var(--ve-t-fast);
}
.ve-card__add:hover { background: var(--ve-gold-400); color: var(--ve-ink-950); }
.ve-card__add svg { width: 1rem; height: 1rem; }
.ve-card__add--notify { background: rgba(255, 255, 255, 0.95); color: var(--ve-ink-800); }
.ve-card__add--notify:hover { background: var(--ve-ink-900); color: #fff; }
.ve-card__add.is-done { background: var(--ve-ink-100); color: var(--ve-ink-500); pointer-events: none; }

.ve-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1rem 0.25rem 0.25rem;
}
.ve-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ve-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--ve-fs-3xs);
  color: var(--ve-ink-400);
}
.ve-card__rating svg { width: 0.75rem; height: 0.75rem; color: var(--ve-gold-400); }
.ve-card__name {
  margin-top: 0.5rem;
  font-family: var(--ve-font-sans);
  font-size: var(--ve-fs-body);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ve-ink-900);
}
.ve-card__name a:hover { color: var(--ve-gold-600); }
/* Stretched link keeps the whole card clickable without nesting anchors */
.ve-card__name a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ve-card__foot { margin-top: auto; padding-top: 0.75rem; }

/* --------------------------------------------------------------- price ---- */

.ve-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.625rem;
}
.ve-price__now {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ve-ink-950);
}
.ve-price__was {
  font-size: var(--ve-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ve-ink-300);
  text-decoration: line-through;
}
.ve-price__off {
  border-radius: var(--ve-r-pill);
  background: var(--ve-gold-100);
  padding: 0.125rem 0.5rem;
  font-size: var(--ve-fs-4xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ve-gold-700);
}
.ve-price--lg .ve-price__now { font-size: 1.5rem; }
.ve-price--lg .ve-price__was { font-size: 1rem; }
.ve-price--sm .ve-price__now { font-size: var(--ve-fs-sm); }
.ve-price--sm .ve-price__was { font-size: var(--ve-fs-2xs); }

/* ---------------------------------------------------------- stock badge ---- */

.ve-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--ve-fs-3xs);
  font-weight: 500;
}
.ve-stock::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--ve-r-pill);
  background: currentColor;
}
.ve-stock--in-stock { color: var(--ve-success); }
.ve-stock--low-stock { color: var(--ve-gold-600); }
.ve-stock--out-of-stock { color: var(--ve-danger); }
.ve-stock--pre-order { color: var(--ve-ink-500); }

/* --------------------------------------------------------------- chips ---- */

.ve-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--ve-ink-100);
  border-radius: var(--ve-r-pill);
  padding: 0.5rem 1rem;
  font-size: var(--ve-fs-xs);
  color: var(--ve-ink-600);
  background: transparent;
  transition: all var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-chip:hover { border-color: var(--ve-gold-300); color: var(--ve-gold-600); }
.ve-chip.is-on {
  border-color: var(--ve-ink-950);
  background: var(--ve-ink-950);
  color: #fff;
}
.ve-chip__x { font-size: 1rem; line-height: 1; }

/* --------------------------------------------------------------- forms ---- */

.ve-field { display: block; }
.ve-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--ve-fs-3xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ve-track-wide);
  color: var(--ve-ink-500);
}
.ve-input, .ve-select, .ve-textarea {
  width: 100%;
  height: 3.25rem;
  padding-inline: 1.125rem;
  border: 1px solid var(--ve-ink-200);
  border-radius: var(--ve-r-sm);
  background: var(--ve-white);
  font-size: var(--ve-fs-body);
  color: var(--ve-ink-900);
  outline: none;
  transition: border-color var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-input::placeholder, .ve-textarea::placeholder { color: var(--ve-ink-300); }
.ve-input:focus, .ve-select:focus, .ve-textarea:focus { border-color: var(--ve-gold-400); }
.ve-textarea { height: auto; min-height: 7rem; padding-block: 0.875rem; resize: vertical; line-height: 1.6; }

.ve-select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b75' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  cursor: pointer;
}

.ve-check {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-block: 0.4375rem;
  font-size: var(--ve-fs-sm);
  color: var(--ve-ink-600);
  cursor: pointer;
}
.ve-check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--ve-gold-500);
  cursor: pointer;
  flex: none;
}
.ve-check:hover { color: var(--ve-ink-950); }
.ve-check__count { margin-left: auto; font-size: var(--ve-fs-3xs); color: var(--ve-ink-300); }

/* ------------------------------------------------------- qty stepper ---- */

.ve-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ve-ink-100);
  border-radius: var(--ve-r-sm);
}
.ve-qty button {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--ve-ink-600);
  transition: color var(--ve-t-fast);
}
.ve-qty button:hover { color: var(--ve-ink-950); }
.ve-qty button:disabled { opacity: 0.3; pointer-events: none; }
.ve-qty button svg { width: 0.875rem; height: 0.875rem; }
.ve-qty__value {
  width: 2rem;
  text-align: center;
  font-size: var(--ve-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ve-ink-900);
}
.ve-qty--lg button { width: 3rem; height: 3rem; }
.ve-qty--lg .ve-qty__value { width: 2.75rem; font-size: var(--ve-fs-body); }

/* ---------------------------------------------------------------- tabs ---- */

.ve-tabs {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--ve-ink-100);
}
.ve-tab {
  position: relative;
  flex: none;
  white-space: nowrap;
  padding: 0.875rem 1rem;
  font-size: var(--ve-fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ve-ink-400);
  transition: color var(--ve-t-fast);
}
.ve-tab:first-child { padding-left: 0; }
.ve-tab:hover { color: var(--ve-ink-700); }
.ve-tab.is-on { color: var(--ve-ink-950); }
.ve-tab::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  height: 1px;
  background: var(--ve-gold-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ve-t-mid) var(--ve-ease-lux);
}
.ve-tab:first-child::after { left: 0; }
.ve-tab.is-on::after { transform: scaleX(1); }

.ve-tabpanel { display: none; }
.ve-tabpanel.is-on { display: block; animation: ve-fade-in 0.5s var(--ve-ease-lux) both; }

/* ----------------------------------------------------------- accordion ---- */

.ve-acc__item { border-bottom: 1px solid var(--ve-ink-100); }
.ve-acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding-block: 1.375rem;
  text-align: left;
  font-size: var(--ve-fs-body);
  font-weight: 500;
  color: var(--ve-ink-900);
}
.ve-acc__btn:hover { color: var(--ve-gold-600); }
.ve-acc__btn svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--ve-ink-400);
  transition: transform 0.4s var(--ve-ease-lux);
}
.ve-acc__btn[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--ve-gold-500); }
.ve-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ve-t-mid) var(--ve-ease-lux);
}
.ve-acc__panel.is-open { grid-template-rows: 1fr; }
.ve-acc__panel > div { overflow: hidden; }
.ve-acc__panel p {
  padding-bottom: 1.375rem;
  max-width: 54rem;
  font-size: var(--ve-fs-sm);
  line-height: 1.8;
  color: var(--ve-ink-500);
}

/* ---------------------------------------------------------------- misc ---- */

.ve-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
}
.ve-empty__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--ve-r-pill);
  background: var(--ve-cream);
  color: var(--ve-gold-500);
}
.ve-empty__icon svg { width: 1.5rem; height: 1.5rem; }
.ve-empty h3 { margin-top: 1.5rem; font-size: 1.25rem; }
.ve-empty p { margin-top: 0.5rem; font-size: var(--ve-fs-sm); color: var(--ve-ink-500); }

.ve-note {
  border-radius: var(--ve-r-lg);
  background: var(--ve-cream);
  padding: 1.25rem 1.5rem;
  font-size: var(--ve-fs-xs);
  line-height: 1.75;
  color: var(--ve-ink-500);
}

/* ------------------------------------------------------- floating stack ---
   One fixed column in the bottom-right corner. Back-to-top only joins the
   stack once the page has scrolled, and the others hold their place either
   way, so nothing jumps as it appears.
   -------------------------------------------------------------------------- */

.ve-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: var(--ve-z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.625rem;
}

.ve-fab__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: var(--ve-r-pill);
  box-shadow: var(--ve-shadow-card);
  transition: transform var(--ve-t-fast) var(--ve-ease-lux),
              background var(--ve-t-fast) var(--ve-ease-lux),
              color var(--ve-t-fast) var(--ve-ease-lux),
              opacity var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-fab__btn:hover { transform: translateY(-2px); }
.ve-fab__btn svg { width: 1.4rem; height: 1.4rem; }

/* Back to top — absent until it is useful. The hairline ring is what keeps an
   ink button visible where it floats over the ink footer. */
.ve-fab__btn--top {
  background: var(--ve-ink-950);
  color: #fff;
  box-shadow: var(--ve-shadow-card), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
}
.ve-fab__btn--top.is-shown { opacity: 1; visibility: visible; transform: none; }
.ve-fab__btn--top.is-shown:hover { transform: translateY(-2px); }
.ve-fab__btn--top:hover { background: var(--ve-gold-400); color: var(--ve-ink-950); }
.ve-fab__btn--top svg { width: 1.2rem; height: 1.2rem; }

.ve-fab__btn--wa { background: var(--ve-success); color: #fff; }
.ve-fab__btn--wa:hover { color: #fff; }
.ve-fab__btn--wa svg { width: 1.5rem; height: 1.5rem; }

.ve-fab__btn--chat {
  background: var(--ve-chat-500);
  color: #fff;
  box-shadow: var(--ve-shadow-chat);
}
.ve-fab__btn--chat:hover { background: var(--ve-chat-400); color: #fff; }
.ve-fab__btn--chat svg { width: 1.5rem; height: 1.5rem; }

/* The glyph swaps to a cross while the panel is open */
.ve-fab__icon-close { display: none; }
.ve-fab__btn--chat.is-open .ve-fab__icon-open { display: none; }
.ve-fab__btn--chat.is-open .ve-fab__icon-close { display: block; }

/* Unread marker — cleared the first time the panel is opened */
.ve-fab__dot {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--ve-r-pill);
  background: var(--ve-gold-300);
  box-shadow: 0 0 0 2px var(--ve-chat-500);
  opacity: 0;
  transition: opacity var(--ve-t-fast) var(--ve-ease-lux),
              box-shadow var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-fab__dot.is-shown { opacity: 1; }
.ve-fab__btn--chat:hover .ve-fab__dot { box-shadow: 0 0 0 2px var(--ve-chat-400); }

/* With the panel open the launcher is the only control that still makes sense
   in the corner — the other two would sit on top of the conversation. Dropping
   them from the flow leaves the chat button in the corner for the panel to
   anchor above. */
.ve-fab.is-chatting .ve-fab__btn--wa,
.ve-fab.is-chatting .ve-fab__btn--top { display: none; }

/* Label on hover — desktop only, where a pointer exists to hover with */
.ve-fab__tip {
  position: absolute;
  right: calc(100% + 0.625rem);
  white-space: nowrap;
  padding: 0.375rem 0.75rem;
  border-radius: var(--ve-r-pill);
  background: var(--ve-ink-950);
  color: #fff;
  font-size: var(--ve-fs-3xs);
  letter-spacing: var(--ve-track-wide);
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0.375rem);
  transition: all var(--ve-t-fast) var(--ve-ease-lux);
  pointer-events: none;
}
.ve-fab__btn:hover .ve-fab__tip { opacity: 1; visibility: visible; transform: none; }

/* ------------------------------------------------------------ live chat ---- */

.ve-chat {
  position: fixed;
  right: 1.25rem;
  bottom: 5.25rem;   /* clears the 3rem launcher plus the stack's own offset */
  z-index: var(--ve-z-cart);
  display: flex;
  flex-direction: column;
  width: min(22rem, calc(100vw - 2.5rem));
  max-height: min(32rem, calc(100vh - 8rem));
  border-radius: var(--ve-r-xl);
  background: var(--ve-white);
  box-shadow: var(--ve-shadow-menu);
  overflow: hidden;
  opacity: 0;
  transform: translateY(0.75rem) scale(0.98);
  transform-origin: bottom right;
  transition: opacity var(--ve-t-fast) var(--ve-ease-lux),
              transform var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-chat.is-open { opacity: 1; transform: none; }

.ve-chat__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  background: var(--ve-ink-950);
  color: #fff;
}
.ve-chat__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ve-r-pill);
  background: rgba(198, 161, 91, 0.16);
  color: var(--ve-gold-400);
}
.ve-chat__avatar svg { width: 1.25rem; height: 1.25rem; }
.ve-chat__id { min-width: 0; flex: 1; }
.ve-chat__name {
  font-family: var(--ve-font-display);
  font-size: 1.0625rem;
  line-height: 1.2;
}
.ve-chat__status {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.1875rem;
  font-size: var(--ve-fs-4xs);
  letter-spacing: 0.06em;
  color: var(--ve-ink-300);
}
.ve-chat__pulse {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--ve-r-pill);
  background: #48c78e;
  animation: ve-chat-pulse 2s var(--ve-ease-soft) infinite;
}
@keyframes ve-chat-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.ve-chat__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--ve-r-pill);
  background: transparent;
  color: var(--ve-ink-300);
  transition: color var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-chat__x:hover { color: #fff; }
.ve-chat__x svg { width: 1rem; height: 1rem; }

.ve-chat__log {
  flex: 1;
  overflow-y: auto;
  padding: 1.125rem;
  background: var(--ve-cream);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.ve-chat__msg {
  max-width: 85%;
  padding: 0.625rem 0.875rem;
  border-radius: var(--ve-r-lg);
  font-size: var(--ve-fs-xs);
  line-height: 1.6;
  animation: ve-chat-in 0.32s var(--ve-ease-lux) both;
}
.ve-chat__msg--them {
  align-self: flex-start;
  border-bottom-left-radius: var(--ve-r-sm);
  background: var(--ve-white);
  color: var(--ve-ink-800);
  box-shadow: var(--ve-shadow-card);
}
.ve-chat__msg--me {
  align-self: flex-end;
  border-bottom-right-radius: var(--ve-r-sm);
  background: var(--ve-ink-950);
  color: #fff;
}
.ve-chat__time {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--ve-fs-4xs);
  color: var(--ve-ink-400);
}
.ve-chat__msg--me .ve-chat__time { color: rgba(255, 255, 255, 0.5); }

@keyframes ve-chat-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

/* Typing indicator, styled as one of their bubbles */
.ve-chat__typing {
  align-self: flex-start;
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--ve-r-lg);
  border-bottom-left-radius: var(--ve-r-sm);
  background: var(--ve-white);
  box-shadow: var(--ve-shadow-card);
}
.ve-chat__typing span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--ve-r-pill);
  background: var(--ve-ink-300);
  animation: ve-chat-bounce 1.2s var(--ve-ease-soft) infinite;
}
.ve-chat__typing span:nth-child(2) { animation-delay: 0.15s; }
.ve-chat__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ve-chat-bounce {
  0%, 60%, 100% { transform: none; opacity: 0.4; }
  30% { transform: translateY(-0.25rem); opacity: 1; }
}

.ve-chat__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.75rem 1.125rem 0;
}
.ve-chat__quick:empty { display: none; }
.ve-chat__quick button {
  border: 1px solid var(--ve-ink-100);
  border-radius: var(--ve-r-pill);
  background: var(--ve-white);
  padding: 0.375rem 0.75rem;
  font-size: var(--ve-fs-3xs);
  color: var(--ve-ink-700);
  transition: all var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-chat__quick button:hover {
  border-color: var(--ve-gold-400);
  background: var(--ve-gold-50);
  color: var(--ve-gold-700);
}

.ve-chat__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.125rem;
}
.ve-chat__input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--ve-ink-100);
  border-radius: var(--ve-r-pill);
  background: var(--ve-white);
  padding: 0.625rem 1rem;
  font-size: var(--ve-fs-xs);
  color: var(--ve-ink-900);
  transition: border-color var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-chat__input:focus { outline: 0; border-color: var(--ve-gold-400); }
.ve-chat__input::placeholder { color: var(--ve-ink-300); }
.ve-chat__send {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: var(--ve-r-pill);
  background: var(--ve-gold-400);
  color: var(--ve-ink-950);
  transition: background var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-chat__send:hover { background: var(--ve-gold-300); }
.ve-chat__send svg { width: 1.05rem; height: 1.05rem; }

.ve-chat__foot {
  padding: 0 1.125rem 1rem;
  font-size: var(--ve-fs-4xs);
  color: var(--ve-ink-400);
}
.ve-chat__foot a { color: var(--ve-ink-700); text-decoration: underline; text-underline-offset: 2px; }
.ve-chat__foot a:hover { color: var(--ve-gold-600); }

/* Identity gate — asked once before the first message, then remembered
   in localStorage so returning visitors go straight to the chat panel. */
.ve-chat-gate {
  border: 0;
  border-radius: var(--ve-r-xl);
  overflow: hidden;
}
.ve-chat-gate .modal-body { padding: 2.25rem 2rem; }
.ve-chat-gate__head { text-align: center; margin-bottom: 1.5rem; }
.ve-chat-gate__icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.75rem;
  border-radius: var(--ve-r-pill);
  background: rgba(107, 75, 214, 0.12);
  color: var(--ve-chat-500);
  font-size: 1.25rem;
}
.ve-chat-gate__title {
  font-family: var(--ve-font-display);
  font-size: 1.375rem;
  color: var(--ve-ink-950);
  margin: 0 0 0.375rem;
}
.ve-chat-gate__sub {
  font-size: var(--ve-fs-sm);
  color: var(--ve-ink-400);
  margin: 0;
}
.ve-chat-gate__field { margin-bottom: 1rem; }
.ve-chat-gate__field label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: var(--ve-fs-xs);
  font-weight: 600;
  color: var(--ve-ink-700);
}
.ve-chat-gate__field .form-control {
  border-radius: var(--ve-r-md);
  border-color: var(--ve-ink-100);
  padding: 0.625rem 0.875rem;
}
.ve-chat-gate__field .form-control:focus {
  border-color: var(--ve-chat-500);
  box-shadow: 0 0 0 0.2rem rgba(107, 75, 214, 0.15);
}
.ve-chat-gate__submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  border-radius: var(--ve-r-pill);
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  background: var(--ve-chat-500);
  color: #fff;
  font-weight: 600;
  transition: background var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-chat-gate__submit:hover { background: var(--ve-chat-400); }

/* Toast */
.ve-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: var(--ve-z-toast);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-radius: var(--ve-r-pill);
  background: var(--ve-ink-950);
  color: #fff;
  font-size: var(--ve-fs-xs);
  box-shadow: var(--ve-shadow-menu);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 1rem);
  transition: all var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-toast.is-shown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ve-toast svg { width: 1.05rem; height: 1.05rem; color: var(--ve-gold-400); }

/* ------------------------------------------------------------- age gate ---- */

.ve-gate {
  position: fixed;
  inset: 0;
  z-index: var(--ve-z-gate);
  display: none;
  align-items: center;
  justify-content: center;
  padding-inline: var(--ve-gutter);
  background: rgba(8, 8, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.ve-gate.is-open { display: flex; animation: ve-fade-in 0.5s var(--ve-ease-lux) both; }
.ve-gate__card {
  width: 100%;
  max-width: 28rem;
  border-radius: var(--ve-r-xl);
  background: var(--ve-white);
  padding: 2.75rem 2rem;
  text-align: center;
  box-shadow: var(--ve-shadow-menu);
  animation: ve-scale-in 0.35s var(--ve-ease-lux) both;
}
.ve-gate__crown { width: 2.75rem; height: 2.75rem; margin-inline: auto; color: var(--ve-gold-400); }
.ve-gate__title { margin-top: 1rem; font-size: 2rem; line-height: 1.15; }
.ve-gate__body { margin-top: 1rem; font-size: var(--ve-fs-sm); line-height: 1.7; color: var(--ve-ink-500); }
.ve-gate__actions { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.ve-gate__fine { margin-top: 1.75rem; font-size: var(--ve-fs-3xs); line-height: 1.7; color: var(--ve-ink-400); }
.ve-gate__fine a { color: var(--ve-ink-600); text-decoration: underline; text-underline-offset: 2px; }
.ve-gate__step { display: none; }
.ve-gate__step.is-on { display: block; }


/* ========================================================================
   05-sections.css
   ======================================================================== */
/* ==========================================================================
   VAPE EMPIRE — 05 SECTIONS
   Page-specific composition: the home sections, the shop, the product
   detail, the cart and the editorial pages.
   ========================================================================== */

/* ============================================================ HOME: hero ==
   Split layout: editorial type on white, the product lit on an ink plinth. */

.ve-hero { position: relative; border-bottom: 1px solid var(--ve-ink-100); }
.ve-hero__grid { display: grid; }
/* Grid/flex items default to min-width:auto, so their content's intrinsic
   size can force the hero wider than the viewport on the narrowest phones. */
.ve-hero__visual, .ve-hero__content { min-width: 0; }

/* ---- the lit side ---- */

.ve-hero__visual {
  position: relative;
  overflow: hidden;
  background: var(--ve-ink-950);
  order: 1;
}
.ve-hero__glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--ve-t-slow) var(--ve-ease-lux);
}
.ve-hero__glow.is-on { opacity: 1; }
/* Pool of light behind the plinth, tinted by the slide's accent */
.ve-hero__glow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34rem;
  height: 34rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--slide-accent, var(--ve-gold-400));
  opacity: 0.28;
  filter: blur(100px);
}
.ve-hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, transparent 0%, rgba(8, 8, 10, 0.55) 72%);
}
.ve-hero__rings {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ve-hero__rings span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: block;
}
.ve-hero__rings span:nth-child(1) { width: 26rem; height: 26rem; border: 1px solid rgba(255, 255, 255, 0.07); }
.ve-hero__rings span:nth-child(2) { width: 34rem; height: 34rem; border: 1px solid rgba(255, 255, 255, 0.04); }
.ve-hero__crown {
  position: absolute;
  left: 50%;
  top: 2.25rem;
  transform: translateX(-50%);
  width: 3.5rem;
  height: 3.5rem;
  color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.ve-hero__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20.5rem;
  padding-inline: 2rem;
}
.ve-hero__plinth {
  position: absolute;
  opacity: 0;
  transform: translateY(1.25rem) scale(0.95);
  transition: opacity var(--ve-t-slow) var(--ve-ease-lux), transform var(--ve-t-slow) var(--ve-ease-lux);
  pointer-events: none;
}
.ve-hero__plinth.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ve-hero__frame {
  border-radius: var(--ve-r-xl);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.625rem;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(2px);
}
.ve-hero__frame .ve-art {
  width: 13rem;
  height: 13rem;
  border-radius: var(--ve-r-lg);
  background: transparent;
}
.ve-hero__caption {
  margin-top: 1.25rem;
  text-align: center;
  font-size: var(--ve-fs-4xs);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.4);
}

/* ---- the editorial side ---- */

.ve-hero__content {
  position: relative;
  order: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem var(--ve-gutter);
}
.ve-hero__slide {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.7s var(--ve-ease-lux), transform 0.7s var(--ve-ease-lux);
}
.ve-hero__slide:not(.is-on) {
  position: absolute;
  pointer-events: none;
}
.ve-hero__slide.is-on { position: relative; opacity: 1; transform: none; }

.ve-hero__eyebrow { display: flex; align-items: center; gap: 0.75rem; color: var(--ve-gold-500); }
.ve-hero__eyebrow .ve-tick { width: 2rem; }
.ve-hero__title { margin-top: 1.75rem; max-width: 36rem; }
.ve-hero__title span { color: var(--ve-gold-500); }
.ve-hero__body {
  margin-top: 1.75rem;
  max-width: 28rem;
  font-size: var(--ve-fs-body);
  line-height: 1.75;
  color: var(--ve-ink-500);
}
.ve-hero__cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.ve-hero__controls { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.ve-hero__arrows { display: flex; gap: 0.25rem; }
.ve-hero__arrow {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--ve-ink-100);
  border-radius: var(--ve-r-pill);
  color: var(--ve-ink-500);
  transition: all var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-hero__arrow:hover { border-color: var(--ve-ink-900); color: var(--ve-ink-950); }
.ve-hero__arrow svg { width: 1rem; height: 1rem; }

.ve-hero__dots { display: flex; align-items: center; gap: 1rem; }
.ve-hero__dot { display: flex; align-items: center; gap: 0.625rem; }
.ve-hero__dot-num {
  font-size: var(--ve-fs-3xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ve-track-wide);
  color: var(--ve-ink-300);
  transition: color var(--ve-t-fast);
}
.ve-hero__dot:hover .ve-hero__dot-num { color: var(--ve-ink-500); }
.ve-hero__dot.is-on .ve-hero__dot-num { color: var(--ve-ink-900); }
.ve-hero__dot-rail {
  position: relative;
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--ve-ink-100);
}
.ve-hero__dot-fill {
  position: absolute;
  inset: 0;
  background: var(--ve-gold-400);
  transform-origin: left;
  transform: scaleX(0);
}
/* Duration must match HERO_DURATION in assets/js/main.js. */
.ve-hero__dot.is-on .ve-hero__dot-fill { animation: ve-progress 5s linear forwards; }
.ve-hero.is-paused .ve-hero__dot.is-on .ve-hero__dot-fill {
  animation-play-state: paused;
}

/* ====================================================== HOME: campaigns ==
   Artwork only, sliding on its own. The track holds two identical passes of
   the same posters and translates by exactly half its width, so the moment the
   first pass leaves, the second is already sitting where it started — the loop
   has no seam and no JavaScript. */

.ve-promos {
  padding-block: 2.75rem;
  background: var(--ve-cream);
  border-bottom: 1px solid var(--ve-ink-100);
}
/* A real scroll container rather than a translated track: that is what lets a
   phone swipe it and a mouse throw it, with the drift just nudging scrollLeft
   a fraction of a pixel per frame. */
.ve-promos__rail {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  /* Vertical only — horizontal padding would offset the half-width the loop
     wraps on. The room is for the cards' own shadow. */
  padding-block: 0.75rem;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.ve-promos__rail.is-dragging {
  cursor: grabbing;
  user-select: none;
}
/* While being thrown, the posters must not swallow the pointer as links */
.ve-promos__rail.is-dragging .ve-promo { pointer-events: none; }
.ve-promos__rail img { -webkit-user-drag: none; user-drag: none; }

.ve-promos__track {
  display: flex;
  width: max-content;
}

/* Spacing is a margin rather than a flex `gap`: the track translates by half
   its own width, and only an equal per-card stride makes those two halves
   line up exactly. A gap leaves half of one short and the loop visibly jumps. */
.ve-promo {
  position: relative;
  flex: 0 0 auto;
  width: 15.5rem;
  margin-right: 1rem;
  aspect-ratio: 2 / 3;
  border-radius: var(--ve-r-lg);
  overflow: hidden;
  background: var(--ve-ink-950);
  box-shadow: var(--ve-shadow-card);
  transition: transform var(--ve-t-fast) var(--ve-ease-lux),
              box-shadow var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-promo:hover { transform: translateY(-3px); box-shadow: var(--ve-shadow-lift); }

/* The client's own poster fills the card edge to edge */
.ve-promo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder until that artwork lands: the campaign's colour pooled behind
   the product, lit the way the hero lights it. */
.ve-promo__glow {
  position: absolute;
  top: -30%;
  right: -30%;
  width: 110%;
  height: 110%;
  border-radius: 50%;
  background: var(--promo-accent, var(--ve-gold-400));
  opacity: 0.42;
  filter: blur(60px);
  pointer-events: none;
}
.ve-promo__art { position: absolute; inset: 0; }
/* The art is drawn at the card's own ratio, so it fills it rather than sitting
   in it — the same edge-to-edge crop the client's poster will get. */
.ve-promo__art .ve-art {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: transparent;
}

/* ==================================================== HOME: trust badges == */

.ve-trust { display: grid; gap: 2.5rem; }
.ve-trust__item svg { width: 1.75rem; height: 1.75rem; color: var(--ve-gold-500); }
.ve-trust__item h3 {
  margin-top: 1.25rem;
  font-family: var(--ve-font-sans);
  font-size: var(--ve-fs-body);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.ve-trust__item p {
  margin-top: 0.625rem;
  max-width: 24ch;
  font-size: var(--ve-fs-xs);
  line-height: 1.7;
  color: var(--ve-ink-500);
}

/* ================================================== HOME: category grid == */

.ve-cats { display: grid; gap: 1rem; margin-top: 3.5rem; }
.ve-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--ve-r-lg);
  background: var(--ve-white);
  padding: 2rem;
  transition: box-shadow var(--ve-t-mid) var(--ve-ease-lux);
}
.ve-cat:hover { box-shadow: var(--ve-shadow-lift); }
/* Ink wash that rises from the bottom on hover */
.ve-cat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ve-ink-950);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--ve-t-mid) var(--ve-ease-lux);
}
.ve-cat:hover::before { transform: scaleY(1); }
.ve-cat > * { position: relative; }

.ve-cat__top { display: flex; align-items: flex-start; justify-content: space-between; }
.ve-cat__top svg {
  width: 2rem;
  height: 2rem;
  color: var(--ve-gold-500);
  transition: transform var(--ve-t-mid) var(--ve-ease-lux), color var(--ve-t-mid);
}
.ve-cat:hover .ve-cat__top svg { transform: translateY(-2px); color: var(--ve-gold-300); }
.ve-cat__count {
  font-size: var(--ve-fs-3xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ve-track-wide);
  color: var(--ve-ink-300);
  transition: color var(--ve-t-mid);
}
.ve-cat:hover .ve-cat__count { color: var(--ve-ink-500); }
.ve-cat__name {
  margin-top: 2.25rem;
  font-size: 1.5rem;
  transition: color var(--ve-t-mid);
}
.ve-cat:hover .ve-cat__name { color: #fff; }
.ve-cat__tag {
  margin-top: 0.625rem;
  font-size: var(--ve-fs-xs);
  line-height: 1.7;
  color: var(--ve-ink-500);
  transition: color var(--ve-t-mid);
}
.ve-cat:hover .ve-cat__tag { color: var(--ve-ink-300); }
.ve-cat__go {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--ve-fs-3xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ve-track-wide);
  color: var(--ve-ink-400);
  transition: color var(--ve-t-mid);
}
.ve-cat:hover .ve-cat__go { color: var(--ve-gold-300); }
.ve-cat__go svg { width: 0.875rem; height: 0.875rem; transition: transform var(--ve-t-mid) var(--ve-ease-lux); }
.ve-cat:hover .ve-cat__go svg { transform: translateX(0.25rem); }

/* ===================================================== product grid ====== */

.ve-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.75rem;
  row-gap: 2rem;
}
.ve-grid--roomy { row-gap: 3rem; }

/* One card per row on phones — two abreast leaves each card too narrow to
   read comfortably below 576px. */
@media (max-width: 575.98px) {
  .ve-grid { grid-template-columns: 1fr; }
}

/* ================================================ HOME: empire standard == */

.ve-standard { position: relative; overflow: hidden; background: var(--ve-ink-950); }
.ve-standard__glow {
  position: absolute;
  right: -10rem;
  top: -10rem;
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  background: rgba(198, 161, 91, 0.12);
  filter: blur(130px);
  pointer-events: none;
}
.ve-standard__grid { position: relative; display: grid; gap: 3.5rem; }
.ve-standard__crown { width: 2.5rem; height: 2.5rem; color: var(--ve-gold-400); }
.ve-standard__title { margin-top: 1.5rem; max-width: 30rem; color: #fff; font-size: var(--ve-fs-h2); }
.ve-standard__title span { display: block; color: var(--ve-gold-400); }
.ve-standard__body {
  margin-top: 1.75rem;
  max-width: 30rem;
  font-size: var(--ve-fs-body);
  line-height: 1.75;
  color: var(--ve-ink-400);
}
.ve-pillar {
  display: flex;
  gap: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: 2rem;
}
.ve-pillar:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ve-pillar__n {
  font-family: var(--ve-font-display);
  font-size: 1.75rem;
  line-height: 1;
  color: rgba(198, 161, 91, 0.6);
  transition: color var(--ve-t-mid);
}
.ve-pillar:hover .ve-pillar__n { color: var(--ve-gold-400); }
.ve-pillar h3 {
  font-family: var(--ve-font-sans);
  font-size: 1.0625rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0;
}
.ve-pillar p {
  margin-top: 0.75rem;
  max-width: 34rem;
  font-size: var(--ve-fs-sm);
  line-height: 1.75;
  color: var(--ve-ink-400);
}

/* ================================================== HOME: brand strip ==== */

.ve-brands { border-block: 1px solid var(--ve-ink-100); padding-block: 2.25rem; }
.ve-brands__label {
  margin-bottom: 2rem;
  text-align: center;
  font-size: var(--ve-fs-4xs);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--ve-ink-300);
}
.ve-brands__mask {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.ve-brands__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: ve-marquee 38s linear infinite;
}
.ve-brands__mask:hover .ve-brands__track { animation-play-state: paused; }
.ve-brands__track span {
  white-space: nowrap;
  padding-inline: 2.25rem;
  font-family: var(--ve-font-display);
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  color: var(--ve-ink-300);
  transition: color var(--ve-t-mid);
}
.ve-brands__track span:hover { color: var(--ve-ink-700); }

/* ==================================================== HOME: newsletter === */

.ve-news { text-align: center; max-width: 40rem; margin-inline: auto; }
.ve-news__crown { width: 2.25rem; height: 2.25rem; margin-inline: auto; color: var(--ve-gold-500); }
.ve-news__title { margin-top: 1.75rem; font-size: var(--ve-fs-h2); }
.ve-news__body {
  margin: 1rem auto 0;
  max-width: 28rem;
  font-size: var(--ve-fs-body);
  line-height: 1.75;
  color: var(--ve-ink-600);
}
.ve-news__form {
  margin: 2.5rem auto 0;
  max-width: 32rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ve-news__done {
  margin-top: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: var(--ve-r-pill);
  background: var(--ve-white);
  padding: 1rem 1.75rem;
  box-shadow: var(--ve-shadow-card);
  font-size: var(--ve-fs-sm);
  color: var(--ve-ink-800);
}
.ve-news__done svg { width: 1.25rem; height: 1.25rem; color: var(--ve-success); }
.ve-news__fine { margin-top: 1.25rem; font-size: var(--ve-fs-3xs); color: var(--ve-ink-400); }

/* ============================================================== SHOP ===== */

.ve-shop { display: grid; gap: 2.5rem; align-items: start; padding-block: 3rem 5rem; }

/* Hidden behind the Filters button until lg, where the rail is always open. */
.ve-shop__filters { display: none; }
.ve-shop__filters.is-open { display: block; }

.ve-filters__group + .ve-filters__group {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ve-ink-100);
}
.ve-filters__title {
  font-size: var(--ve-fs-3xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ve-track-wide);
  color: var(--ve-ink-950);
  margin-bottom: 0.875rem;
}
.ve-filters__range { display: flex; align-items: center; gap: 0.75rem; }
.ve-filters__range input { text-align: center; height: 2.75rem; padding-inline: 0.5rem; }

.ve-shop__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ve-ink-100);
}
.ve-shop__count { font-size: var(--ve-fs-xs); color: var(--ve-ink-500); }
.ve-shop__count strong { color: var(--ve-ink-950); font-weight: 500; }
.ve-shop__tools { display: flex; align-items: center; gap: 0.75rem; }
.ve-shop__sort { height: 2.5rem; width: auto; min-width: 12rem; font-size: var(--ve-fs-xs); }
.ve-shop__active { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 1.25rem; }
.ve-shop__results { margin-top: 2rem; }

/* ==================================================== PRODUCT DETAIL ===== */

.ve-pd { display: grid; gap: 2.5rem; padding-block: 2.5rem; }
.ve-pd__gallery { display: grid; gap: 0.75rem; }
.ve-pd__main {
  border-radius: var(--ve-r-lg);
  overflow: hidden;
  background: var(--ve-cream);
}
.ve-pd__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.ve-pd__thumb {
  border-radius: var(--ve-r-md);
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color var(--ve-t-fast);
}
.ve-pd__thumb.is-on { border-color: var(--ve-gold-400); }

.ve-pd__brand { color: var(--ve-ink-400); }
.ve-pd__title { margin-top: 0.75rem; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.4rem); }
.ve-pd__meta { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.ve-pd__stars { display: inline-flex; align-items: center; gap: 0.25rem; }
.ve-pd__stars svg { width: 0.875rem; height: 0.875rem; color: var(--ve-gold-400); }
.ve-pd__stars span { margin-left: 0.375rem; font-size: var(--ve-fs-2xs); color: var(--ve-ink-400); }
.ve-pd__sku { font-size: var(--ve-fs-2xs); color: var(--ve-ink-300); }
.ve-pd__price { margin-top: 1.5rem; }
.ve-pd__short {
  margin-top: 1.25rem;
  font-size: var(--ve-fs-body);
  line-height: 1.75;
  color: var(--ve-ink-500);
}
.ve-pd__variants { margin-top: 1.75rem; }
.ve-pd__variant-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.ve-pd__buy { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ve-pd__buy .ve-btn--gold { flex: 1; min-width: 12rem; }
.ve-pd__assurance {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ve-ink-100);
  display: grid;
  gap: 1rem;
}
.ve-pd__assurance li { display: flex; align-items: center; gap: 0.75rem; font-size: var(--ve-fs-xs); color: var(--ve-ink-500); }
.ve-pd__assurance svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--ve-gold-500); }
.ve-pd__assurance i { font-size: 1.125rem; flex: none; color: var(--ve-gold-500); }

.ve-pd__tabs { padding-block: 3rem 4rem; }
.ve-pd__prose { max-width: 52rem; margin-top: 2rem; }
.ve-pd__prose p { font-size: var(--ve-fs-body); line-height: 1.85; color: var(--ve-ink-600); }
.ve-pd__prose h4 {
  margin-top: 2rem;
  font-family: var(--ve-font-sans);
  font-size: var(--ve-fs-3xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ve-track-wide);
  color: var(--ve-gold-600);
}
.ve-pd__highlights { margin-top: 1rem; display: grid; gap: 0.75rem; }
.ve-pd__highlights li { display: flex; gap: 0.75rem; font-size: var(--ve-fs-sm); color: var(--ve-ink-600); }
.ve-pd__highlights svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.25rem; color: var(--ve-success); }

.ve-specs { margin-top: 2rem; max-width: 42rem; }
.ve-specs__row {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--ve-ink-100);
  font-size: var(--ve-fs-sm);
}
.ve-specs__row dt { color: var(--ve-ink-400); }
.ve-specs__row dd { margin: 0; color: var(--ve-ink-900); text-align: right; }

.ve-review { padding-block: 1.75rem; border-bottom: 1px solid var(--ve-ink-100); }
.ve-review__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ve-review__author { font-size: var(--ve-fs-sm); font-weight: 500; color: var(--ve-ink-900); }
.ve-review__verified {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--ve-fs-4xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ve-success);
}
.ve-review__verified svg { width: 0.75rem; height: 0.75rem; }
.ve-review__date { margin-left: auto; font-size: var(--ve-fs-2xs); color: var(--ve-ink-300); }
.ve-review h4 { margin-top: 0.75rem; font-family: var(--ve-font-sans); font-size: var(--ve-fs-sm); font-weight: 500; letter-spacing: 0; }
.ve-review p { margin-top: 0.5rem; font-size: var(--ve-fs-sm); line-height: 1.75; color: var(--ve-ink-500); }

/* ============================================================== CART ===== */

.ve-cartline { display: flex; gap: 1rem; padding-block: 1.25rem; border-bottom: 1px solid var(--ve-ink-100); }
.ve-cartline__art { width: 5.5rem; height: 5.5rem; flex: none; border-radius: var(--ve-r-md); overflow: hidden; }
.ve-cartline__body { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.ve-cartline__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.ve-cartline__name {
  margin-top: 0.375rem;
  display: block;
  font-size: var(--ve-fs-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ve-ink-900);
}
.ve-cartline__name:hover { color: var(--ve-gold-600); }
.ve-cartline__variant { margin-top: 0.25rem; font-size: var(--ve-fs-2xs); color: var(--ve-ink-400); }
.ve-cartline__x {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border: 1px solid var(--ve-ink-100);
  border-radius: var(--ve-r-sm);
  color: var(--ve-ink-300);
  transition: color var(--ve-t-fast), border-color var(--ve-t-fast);
}
.ve-cartline__x:hover { color: var(--ve-danger); border-color: var(--ve-danger); }
.ve-cartline__x svg { width: 1rem; height: 1rem; }
.ve-cartline__x i { font-size: 1rem; }
.ve-cartline__foot {
  margin-top: auto;
  padding-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.ve-cartline__total { font-size: var(--ve-fs-sm); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ve-ink-950); }

.ve-freeship { padding: 1rem 1.5rem; border-bottom: 1px solid var(--ve-ink-100); }
.ve-freeship p { font-size: var(--ve-fs-2xs); color: var(--ve-ink-500); }
.ve-freeship strong { color: var(--ve-ink-900); font-weight: 500; }
.ve-freeship__rail {
  margin-top: 0.625rem;
  height: 0.25rem;
  border-radius: var(--ve-r-pill);
  background: var(--ve-ink-100);
  overflow: hidden;
}
.ve-freeship__fill {
  height: 100%;
  border-radius: var(--ve-r-pill);
  background: var(--ve-gold-400);
  transition: width 0.7s var(--ve-ease-lux);
}

.ve-summary {
  border-radius: var(--ve-r-lg);
  background: var(--ve-cream);
  padding: 1.75rem;
}
.ve-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--ve-fs-sm);
  color: var(--ve-ink-500);
}
.ve-summary__row + .ve-summary__row { margin-top: 0.75rem; }
.ve-summary__row span:last-child { font-variant-numeric: tabular-nums; color: var(--ve-ink-900); }
.ve-summary__total {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ve-ink-200);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.ve-summary__total span:last-child {
  font-family: var(--ve-font-display);
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ve-ink-950);
}

/* ---- promo code ---- */

.ve-coupon {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--ve-ink-200);
}
.ve-coupon__form { display: flex; gap: 0.5rem; }
.ve-coupon__input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--ve-fs-xs);
}
.ve-coupon__input::placeholder { text-transform: none; letter-spacing: normal; }
.ve-coupon__btn { flex: none; padding-inline: 1.25rem; }

.ve-coupon__applied {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: var(--ve-r-md);
  border: 1px solid rgba(47, 125, 93, 0.28);
  background: rgba(47, 125, 93, 0.07);
  padding: 0.75rem 0.875rem;
}
.ve-coupon__applied > svg {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--ve-success);
}
.ve-coupon__applied > div { flex: 1; min-width: 0; }
.ve-coupon__code {
  font-size: var(--ve-fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ve-ink-900);
}
.ve-coupon__label {
  margin-top: 0.125rem;
  font-size: var(--ve-fs-3xs);
  line-height: 1.5;
  color: var(--ve-ink-500);
}
.ve-coupon__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: var(--ve-r-pill);
  background: transparent;
  color: var(--ve-ink-400);
  transition: color var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-coupon__x:hover { color: var(--ve-danger); }
.ve-coupon__x svg { width: 0.85rem; height: 0.85rem; }

.ve-coupon__msg {
  margin-top: 0.625rem;
  font-size: var(--ve-fs-3xs);
  line-height: 1.5;
  color: var(--ve-danger);
}
.ve-coupon__msg.is-ok { color: var(--ve-success); }

/* ---- the codes, listed on the deals page ---- */

.ve-codes { display: grid; gap: 0.75rem; margin-top: 2.5rem; }
.ve-code {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px dashed var(--ve-ink-200);
  border-radius: var(--ve-r-lg);
  background: var(--ve-white);
  padding: 1rem 1.25rem;
}
.ve-code__tag {
  flex: none;
  border-radius: var(--ve-r-sm);
  background: var(--ve-ink-950);
  padding: 0.4rem 0.75rem;
  font-size: var(--ve-fs-3xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  color: var(--ve-gold-400);
}
.ve-code__body { min-width: 0; }
.ve-code__label {
  font-size: var(--ve-fs-sm);
  font-weight: 500;
  color: var(--ve-ink-900);
}
.ve-code__note {
  margin-top: 0.125rem;
  font-size: var(--ve-fs-3xs);
  line-height: 1.5;
  color: var(--ve-ink-500);
}

.ve-pay { display: grid; gap: 0.625rem; margin-top: 0.75rem; }
.ve-pay label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--ve-ink-200);
  border-radius: var(--ve-r-sm);
  padding: 0.875rem 1.125rem;
  font-size: var(--ve-fs-sm);
  cursor: pointer;
  transition: border-color var(--ve-t-fast);
}
.ve-pay label:has(input:checked) { border-color: var(--ve-gold-400); background: var(--ve-gold-50); }
.ve-pay input { accent-color: var(--ve-gold-500); }
.ve-pay small { margin-left: auto; font-size: var(--ve-fs-3xs); color: var(--ve-ink-400); }

/* ========================================================== EDITORIAL ==== */

.ve-prose { max-width: 46rem; }
.ve-prose p { font-size: var(--ve-fs-body); line-height: 1.85; color: var(--ve-ink-600); }
.ve-prose p + p { margin-top: 1.25rem; }
.ve-prose h3 { margin-top: 2.75rem; font-size: var(--ve-fs-h3); }
.ve-prose blockquote {
  margin: 2.5rem 0;
  padding-left: 1.75rem;
  border-left: 2px solid var(--ve-gold-400);
  font-family: var(--ve-font-display);
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--ve-ink-800);
}

.ve-stats { display: grid; gap: 2rem; }
.ve-stat__n {
  font-family: var(--ve-font-display);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--ve-gold-500);
}
.ve-stat__l {
  margin-top: 0.75rem;
  font-size: var(--ve-fs-xs);
  line-height: 1.7;
  color: var(--ve-ink-500);
}

.ve-contact-card {
  border-radius: var(--ve-r-lg);
  background: var(--ve-cream);
  padding: 1.75rem;
}
.ve-contact-card svg { width: 1.5rem; height: 1.5rem; color: var(--ve-gold-500); }
.ve-contact-card h3 { margin-top: 1rem; font-size: 1.25rem; }
.ve-contact-card p { margin-top: 0.5rem; font-size: var(--ve-fs-xs); line-height: 1.7; color: var(--ve-ink-500); }
.ve-contact-card a {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--ve-fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ve-track-wide);
  color: var(--ve-ink-900);
}
.ve-contact-card a:hover { color: var(--ve-gold-600); }

.ve-track__result { margin-top: 1.5rem; }

/* --------------------------------------------------------------- blog ---- */

.ve-blog-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
/* Search and Recent Posts stay together as one column and sit above the
   article list until the layout has room to place that column beside it —
   below that, stacking it after a long article buries it off-screen.
   align-items:start matters: without it, "main" spanning the row the sidebar
   column shares would stretch the shorter column to match a tall article,
   opening a blank gap between the search box and Recent Posts. */
.ve-blog-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "sidebar" "main";
  align-items: start;
  gap: 3rem;
}
.ve-blog-sidebar-col { grid-area: sidebar; display: flex; flex-direction: column; gap: 2rem; }
.ve-blog-main { grid-area: main; }

.ve-blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.875rem;
  border-radius: var(--ve-r-xl);
  background: var(--ve-white);
  transition: box-shadow var(--ve-t-mid) var(--ve-ease-lux);
}
.ve-blog-card:hover { box-shadow: var(--ve-shadow-lift); }
.ve-blog-card__media { position: relative; overflow: hidden; border-radius: var(--ve-r-lg); }
.ve-blog-card__media .ve-art { aspect-ratio: 4 / 3; transition: transform var(--ve-t-slow) var(--ve-ease-lux); }
.ve-blog-card:hover .ve-blog-card__media .ve-art { transform: scale(1.06); }
.ve-blog-card__date,
.ve-blog-card__read {
  position: absolute;
  top: 0.75rem;
  border-radius: var(--ve-r-pill);
  padding: 0.3rem 0.75rem;
  font-size: var(--ve-fs-4xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  backdrop-filter: blur(4px);
}
.ve-blog-card__date {
  left: 0.75rem;
  background: rgba(8, 8, 10, 0.85);
  color: var(--ve-gold-200);
}
.ve-blog-card__read {
  right: 0.75rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ve-ink-700);
}
.ve-blog-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.375rem 0.375rem 0.375rem; }
.ve-blog-card__title {
  position: relative;
  font-size: 1.3rem;
  line-height: 1.3;
  transition: color var(--ve-t-fast) var(--ve-ease-lux);
}
.ve-blog-card__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.ve-blog-card:hover .ve-blog-card__title { color: var(--ve-gold-600); }
.ve-blog-card__excerpt {
  margin-top: 0.75rem;
  font-size: var(--ve-fs-sm);
  line-height: 1.75;
  color: var(--ve-ink-500);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ve-blog-card__link {
  position: relative;
  margin-top: auto;
  padding-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  font-size: var(--ve-fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ve-track-wide);
  color: var(--ve-ink-900);
}
.ve-blog-card:hover .ve-blog-card__link { color: var(--ve-gold-600); }
.ve-blog-card:hover .ve-blog-card__link .ve-sweep::after { transform: scaleX(1); transform-origin: left; }
.ve-blog-card__link i { font-size: 0.7rem; transition: transform var(--ve-t-fast) var(--ve-ease-lux); }
.ve-blog-card:hover .ve-blog-card__link i { transform: translateX(4px); }

.ve-article__media { overflow: hidden; border-radius: var(--ve-r-lg); aspect-ratio: 16 / 9; background: var(--ve-cream); }
.ve-article__media img { width: 100%; height: 100%; object-fit: cover; }
.ve-article__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  font-size: var(--ve-fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ve-track-wide);
  color: var(--ve-gold-500);
}
.ve-article__title { margin-top: 0.75rem; font-size: var(--ve-fs-h2); line-height: 1.2; }
.ve-article__body { margin-top: 2rem; font-size: 1rem; line-height: 1.85; color: var(--ve-ink-700); }
.ve-article__body p { margin-bottom: 1.25rem; }
.ve-article__body h2, .ve-article__body h3 { margin: 2rem 0 1rem; }
.ve-article__body ul, .ve-article__body ol { margin: 0 0 1.25rem 1.25rem; }
.ve-article__body img { width: 100%; border-radius: var(--ve-r-md); margin-block: 1.5rem; }
.ve-article__body blockquote {
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  border-left: 3px solid var(--ve-gold-400);
  background: var(--ve-cream);
  border-radius: 0 var(--ve-r-md) var(--ve-r-md) 0;
  font-family: var(--ve-font-display);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--ve-ink-800);
}

.ve-article__share { display: flex; align-items: center; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--ve-ink-100); }
.ve-article__share span { font-size: var(--ve-fs-2xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ve-track-wide); color: var(--ve-ink-500); }
.ve-share { display: flex; gap: 0.5rem; }
.ve-share a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ve-r-pill);
  background: var(--ve-cream);
  color: var(--ve-ink-700);
  transition: background-color var(--ve-t-fast), color var(--ve-t-fast);
}
.ve-share a:hover { background: var(--ve-ink-950); color: var(--ve-gold-300); }

.ve-sidebar__search { position: relative; }
.ve-sidebar__search .ve-input { padding-right: 3rem; }
.ve-sidebar__search button {
  position: absolute;
  right: 0.375rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ve-r-sm);
  color: var(--ve-ink-500);
}
.ve-sidebar__search button:hover { color: var(--ve-gold-600); }

.ve-sidebar__card { border-radius: var(--ve-r-lg); background: var(--ve-cream); padding: 1.75rem; }
.ve-sidebar__card h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: var(--ve-track-wide);
  color: var(--ve-ink-700);
}
.ve-sidebar__card h3::after { content: ""; flex: 1; height: 1px; background: var(--ve-ink-100); }

.ve-recent { margin-top: 1.5rem; display: flex; flex-direction: column; }
.ve-recent__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 1rem;
  border-top: 1px solid var(--ve-ink-100);
}
.ve-recent__item:first-child { padding-top: 0; border-top: none; }
.ve-recent__index {
  flex: none;
  width: 1.5rem;
  font-family: var(--ve-font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ve-gold-400);
}
.ve-recent__thumb { flex: none; width: 3.5rem; height: 3.5rem; border-radius: var(--ve-r-md); overflow: hidden; background: var(--ve-white); }
.ve-recent__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ve-t-mid) var(--ve-ease-lux); }
.ve-recent__item:hover .ve-recent__thumb img { transform: scale(1.08); }
.ve-recent__title { font-size: var(--ve-fs-xs); line-height: 1.4; color: var(--ve-ink-900); transition: color var(--ve-t-fast) var(--ve-ease-lux); }
.ve-recent__item:hover .ve-recent__title { color: var(--ve-gold-600); }
.ve-recent__date { display: block; margin-top: 0.375rem; font-size: var(--ve-fs-4xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ve-ink-400); }

/* --------------------------------------------------------- error page ---- */

.ve-error-page {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: var(--ve-cream);
  overflow: hidden;
}
.ve-error-page::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--ve-gold-100), transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0.7;
  pointer-events: none;
}
.ve-error-page__top { position: relative; padding: 1.75rem var(--ve-gutter); }
.ve-error-page__main {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem var(--ve-gutter) 4rem;
}
.ve-error__mark {
  font-family: var(--ve-font-display);
  font-size: clamp(6rem, 4rem + 9vw, 11rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ve-gold-400);
}
@supports (-webkit-text-stroke: 1px black) {
  .ve-error__mark { color: transparent; -webkit-text-stroke: 1.5px var(--ve-gold-400); }
}
.ve-error__eyebrow { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1rem; color: var(--ve-gold-600); }
.ve-error__title { margin-top: 1.25rem; font-size: var(--ve-fs-h2); max-width: 34rem; }
.ve-error__desc { margin-top: 1rem; max-width: 30rem; font-size: var(--ve-fs-body); line-height: 1.7; color: var(--ve-ink-500); }
.ve-error__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.5rem; }


/* ========================================================================
   06-responsive.css
   ======================================================================== */
/* ==========================================================================
   VAPE EMPIRE — 06 RESPONSIVE
   Everything above is written mobile-first; this file only widens things.
   Breakpoints follow Bootstrap's so the grid utilities stay in step:
   sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400
   ========================================================================== */

/* ============================================================= < 768px ==== */
/* A Bootstrap `.row` pulls itself outward by half its gutter. Our page gutter
   is only 1.25rem on phones, so a `g-5` row (3rem → −1.5rem each side) pokes
   past it. Columns are stacked at this width anyway, so cap the horizontal
   gutter and leave the vertical one — which is the spacing we actually wanted. */
@media (max-width: 767.98px) {
  .ve-wrap .row { --bs-gutter-x: 1.5rem; }

  /* The 80px crown + full wordmark is sized for desktop breathing room;
     on a phone it crowds the search/cart/menu icons past the edge of the
     viewport and forces a horizontal scrollbar site-wide. */
  .ve-header__bar { gap: 0.75rem; }
  .ve-logo__crown { width: 2.25rem; height: 2.25rem; }
  .ve-logo__word { font-size: 0.85rem; letter-spacing: 0.12em; }

  /* The floating stack keeps the corner but shrinks, and the chat panel goes
     near-full-width — a 22rem card on a 360px phone leaves no margin. */
  .ve-fab { right: 1rem; bottom: 1rem; gap: 0.5rem; }
  .ve-fab__btn { width: 2.75rem; height: 2.75rem; }
  .ve-fab__tip { display: none; }

  .ve-chat {
    right: 1rem;
    left: 1rem;
    bottom: 4.5rem;
    width: auto;
    max-height: calc(100vh - 7rem);
  }
}

/* A tooltip that needs a hover is noise on a touch screen. */
@media (hover: none) {
  .ve-fab__tip { display: none; }
}

/* ============================================================= ≥ 576px ==== */
@media (min-width: 576px) {
  .ve-iconbtn.ve-hide-sm { display: grid; }

  .ve-grid { column-gap: 1.25rem; }
  .ve-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
  .ve-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
  .ve-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ve-card { padding: 1rem; }
  .ve-gate__card { padding-inline: 3rem; }
  .ve-news__form { flex-direction: row; }
  .ve-news__form .ve-input { flex: 1; }
  .ve-hero__stage { height: 23rem; }
  .ve-hero__frame .ve-art { width: 16rem; height: 16rem; }
  .ve-hero__content { padding-inline: 2.5rem; }
  .ve-promo { width: 17rem; }
  .ve-pd__thumbs { grid-template-columns: repeat(4, 1fr); }
  .ve-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ve-brands__track span { padding-inline: 3rem; font-size: 1.5rem; }
}

/* ============================================================= ≥ 768px ==== */
@media (min-width: 768px) {
  :root {
    --ve-gutter: 2rem;
    --ve-section-y: 6rem;
  }

  .ve-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .ve-head--center { flex-direction: column; align-items: center; }

  .ve-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ve-footer__base { flex-direction: row; align-items: center; justify-content: space-between; }
  .ve-pagehero { padding-block: 4.5rem 4rem; }

  .ve-pd { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; padding-block: 3rem; }
  .ve-pd__assurance { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ve-cats { gap: 1rem; }

  /* Quick-add and wishlist stay hidden until hover on pointer devices;
     on touch they are always visible (the mobile default above). */
  .ve-card__quick { opacity: 0; transform: translateY(0.75rem); }
  .ve-card:hover .ve-card__quick,
  .ve-card:focus-within .ve-card__quick { opacity: 1; transform: none; }
  .ve-card__wish { opacity: 0; transform: translateY(0.25rem); }
  .ve-card:hover .ve-card__wish,
  .ve-card:focus-within .ve-card__wish,
  .ve-card__wish.is-on { opacity: 1; transform: none; }
}

/* ============================================================= ≥ 992px ==== */
@media (min-width: 992px) {
  :root {
    --ve-gutter: var(--ve-gutter-lg);
    --ve-section-y: var(--ve-section-y-lg);
  }

  .ve-nav { display: flex; }
  .ve-iconbtn.ve-hide-lg { display: none; }
  .ve-lg-down { display: none; }
  .ve-mega { display: block; }

  .ve-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 3rem; }
  .ve-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ve-blog-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; row-gap: 3rem; }

  .ve-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ve-trust__item + .ve-trust__item {
    border-left: 1px solid var(--ve-ink-100);
    padding-left: 2.5rem;
  }

  .ve-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .ve-hero__grid { grid-template-columns: 1.02fr 1fr; }
  .ve-hero__visual { order: 2; min-height: 31rem; }
  .ve-hero__content { order: 1; padding: 3.5rem 4rem 3.5rem var(--ve-gutter-lg); }
  .ve-hero__stage { height: 100%; padding-block: 3.5rem; }
  .ve-hero__frame .ve-art { width: 430px; height: 430px; }
  .ve-hero__controls { margin-top: 2.75rem; }

  /* Full-bleed by design — the marquee reads as a strip, not a boxed row. */
  .ve-promos { padding-block: 3.25rem; }
  .ve-promo { width: 18rem; }

  .ve-standard__grid { grid-template-columns: 0.9fr 1.1fr; gap: 5rem; }

  .ve-footer__grid { grid-template-columns: 1.35fr 1fr 1fr 1fr; padding-top: 6rem; }

  .ve-shop { grid-template-columns: 16rem minmax(0, 1fr); gap: 3.5rem; }
  .ve-shop__filters { display: block; position: sticky; top: 6rem; }

  .ve-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .ve-cart-layout { grid-template-columns: minmax(0, 1fr) 22rem; gap: 3rem; }
  .ve-summary--sticky { position: sticky; top: 6rem; }

  .ve-blog-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    grid-template-areas: "main sidebar";
    gap: 3rem;
  }
  .ve-sidebar--sticky { position: sticky; top: 6rem; align-self: start; }
}

/* ============================================================ ≥ 1200px ==== */
@media (min-width: 1200px) {
  .ve-nav__link { padding-inline: 1rem; }
  .ve-nav__link::after { left: 1rem; right: 1rem; }

  /* Align the hero's text column with the site measure rather than the
     viewport, so the headline sits on the same rail as every section below. */
  .ve-hero__content {
    padding-left: max(var(--ve-gutter-lg), calc((100vw - var(--ve-max)) / 2 + var(--ve-gutter-lg)));
  }
}

/* ------------------------------------------------------------ printing --- */
@media print {
  .ve-header, .ve-announce, .ve-footer, .ve-overlay,
  .ve-fab, .ve-chat, .ve-toast, .ve-gate { display: none !important; }
  body { background: #fff; }
}