/* The vapes site's look: B, Night shift (the owner's pick from the mockups of 8 November 2026, artifact
   7NwnvxHuvgths2SoCqpmvD). Every rule is under :root[data-site="vapes"], the mark the server puts on the vapes site's pages
   (site-identity.mjs vapesPage), so the main site never sees any of it. Dark ground, neon cyan and pink, product photos
   on white tiles (SalesGent's photos are shot on white). The site's own colour names are given their Night shift
   values first, then the places that name a light colour directly are set dark. */

:root[data-site="vapes"]{
  /* The ground, the surfaces and the type's colours are the trade-counter look's (vapes-counter.css): they are named
     here as well because the sign-in page and the page-not-found page load this file alone, and were a shade lighter
     and bluer than the rest of the site (the owner, 12 November 2026: "make it better and refine/polish it more").
     --v-neon is the gradient of a heading's first word, --v-type the one typeface, --v-read the colour of long text. */
  --v-ground:#05070c;--v-surf:#0c1018;--v-surf2:#151b27;--v-line:#232b3b;--v-line2:#3a465c;--v-ink:#f6f8fc;--v-dim:#a4afc4;
  --v-cyan:#22d3ee;--v-pink:#f472b6;--v-violet:#8b5cf6;--v-amber:#fbbf24;
  --v-neon:linear-gradient(95deg,#22d3ee 0%,#a78bfa 52%,#f472b6 100%);--v-type:Inter,system-ui,sans-serif;--v-read:#d3d9e6;--v-off:#66728c;
  --v-gradient:linear-gradient(90deg,#7c3aed,#d6246e);--v-field:#6377a0;--v-edge:#4a5b85;
  --paper:var(--v-surf);--cream:var(--v-ground);--orange:var(--v-cyan);--orange-dark:#06b6d4;--red:#fb7185;--action:var(--v-cyan);
  --on-orange:#001018;--ink:var(--v-ink);--muted:var(--v-dim);--faint:#7b89a6;--line:var(--v-line);--soft:var(--v-surf2);
  --green:#34d399;--green-soft:rgba(52,211,153,.12);--shelf-ink:var(--v-ink);--shelf-soft:var(--v-surf2);--shelf-rule:var(--v-line);
  color-scheme:dark;background:var(--v-ground);color:var(--v-ink);
}
:root[data-site="vapes"] body{background:var(--v-ground);color:var(--v-ink)}
:root[data-site="vapes"] ::selection{background:var(--v-cyan);color:#001018}

/* The nicotine warning across the top of every page (FDA wording; the owner's lawyer checks how it must appear). */
.nicotine-warning{display:none}
:root[data-site="vapes"] .nicotine-warning{display:block;background:#000;color:#fff;font:800 13px/1.35 Inter,system-ui,sans-serif;
  letter-spacing:.01em;text-align:center;padding:9px max(16px,env(safe-area-inset-right,0px)) 9px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid #26272b}

/* Main-site pieces with no place here: Hotspot Distributors' shipping ribbon and online discount, and the launch tour. */
:root[data-site="vapes"] .announcement-ribbon,:root[data-site="vapes"] [data-online-discount],:root[data-site="vapes"] .discount-note,
:root[data-site="vapes"] a[href="/tour"],:root[data-site="vapes"] .launch-bar{display:none!important}

/* Headings heavy and tight, in the site's one typeface (the trade-counter look, 12 November 2026; until then they asked
   for a second face that the site never loaded). A marked first word takes the gradient, further down. */
:root[data-site="vapes"] h1,:root[data-site="vapes"] .results-heading h2,:root[data-site="vapes"] .product-carousel .section-heading h2,
:root[data-site="vapes"] .customer-page h1,:root[data-site="vapes"] .customer-page h2{font-family:var(--v-type);font-weight:800;letter-spacing:-.03em}

/* Surfaces the main site paints white or cream directly. */
:root[data-site="vapes"] .site-header,:root[data-site="vapes"] .filters,:root[data-site="vapes"] select,:root[data-site="vapes"] .icon-button,
:root[data-site="vapes"] .results-mark,:root[data-site="vapes"] .site-footer,:root[data-site="vapes"] dialog,:root[data-site="vapes"] .drawer-header,
:root[data-site="vapes"] .variant-table thead th,:root[data-site="vapes"] .variant-stepper,:root[data-site="vapes"] .variant-order-footer,
:root[data-site="vapes"] .session-error,:root[data-site="vapes"] .session-cover,:root[data-site="vapes"] .age-gate,
:root[data-site="vapes"] .subcategory-dropdown,:root[data-site="vapes"] .menu-panel,:root[data-site="vapes"] .menu-cta,
:root[data-site="vapes"] .spotlight,:root[data-site="vapes"] .spotlight-chips li,:root[data-site="vapes"] .brand-pair,:root[data-site="vapes"] .deal-card,
:root[data-site="vapes"] .customer-field input,:root[data-site="vapes"] .customer-field select,:root[data-site="vapes"] .customer-field textarea,
:root[data-site="vapes"] .statement-quick button,:root[data-site="vapes"] .deal-prompt,:root[data-site="vapes"] label.cookie-choice,
:root[data-site="vapes"] .shelf-new .view-all,:root[data-site="vapes"] .shelf-best .view-all,:root[data-site="vapes"] .cart-deals,
:root[data-site="vapes"] .lotus-chip[aria-pressed=true]{background:var(--v-surf);color:var(--v-ink);border-color:var(--v-line)}
:root[data-site="vapes"] .cart-error,:root[data-site="vapes"] .cart-unavailable-hold,:root[data-site="vapes"] .customer-feedback[data-error=true]{background:rgba(244,114,182,.10);border-color:#7c2d5b}
:root[data-site="vapes"] input,:root[data-site="vapes"] textarea{background:var(--v-surf);color:var(--v-ink);border-color:var(--v-line2)}
:root[data-site="vapes"] input::placeholder,:root[data-site="vapes"] textarea::placeholder{color:#7b89a6}
:root[data-site="vapes"] .age-gate h2,:root[data-site="vapes"] .age-gate p,:root[data-site="vapes"] .age-gate{color:var(--v-ink)}
:root[data-site="vapes"] .document-page{background:#fff}

/* Header: dark, with a hairline under it and no shadow. The search and the cart's count are set further down and in
   vapes-counter.css. */
:root[data-site="vapes"] .site-header{border-bottom:1px solid var(--v-line);box-shadow:none}
:root[data-site="vapes"] .search input{background:transparent}

/* The menu bar: outlined pills, the open one a shade lighter (its edge and words are vapes-counter.css's; the cyan
   glow went with the trade-counter look); the Zero Nicotine pill in place of the Blue Lotus one. */
:root[data-site="vapes"] .cat-pill,:root[data-site="vapes"] .cat-pill--all,:root[data-site="vapes"] .brand-pill,
:root[data-site="vapes"] .category-links a.lotus-trigger{background:transparent;border:1px solid var(--v-line);color:var(--v-dim)}
:root[data-site="vapes"] .cat-pill:hover,:root[data-site="vapes"] .cat-pill[aria-expanded=true],:root[data-site="vapes"] .cat-pill.is-current,
:root[data-site="vapes"] .cat-pill--all:hover,:root[data-site="vapes"] .cat-pill--all[aria-expanded=true],
:root[data-site="vapes"] .category-links a.lotus-trigger.is-current,:root[data-site="vapes"] .category-links a.lotus-trigger:hover{background:var(--v-surf2)}
:root[data-site="vapes"] .lotus-mark{display:none}
:root[data-site="vapes"] .category-links a.lotus-trigger em,:root[data-site="vapes"] .tiny-tag.lotus-tiny,:root[data-site="vapes"] .lotus-tag{background:rgba(34,211,238,.12);color:var(--v-cyan)}
:root[data-site="vapes"] .category-links a.menu-item:hover,:root[data-site="vapes"] .category-links a.menu-item:focus-visible{background:var(--v-surf2)}
:root[data-site="vapes"] .lotus-hero{background:linear-gradient(120deg,#0f1630,#1b1240 55%,#2a0f33);color:var(--v-ink);border:1px solid var(--v-line)}

/* Photos sit on white (SalesGent's are shot on white). The cards themselves are drawn in vapes-counter.css. */
:root[data-site="vapes"] .product-card .product-image{overflow:hidden}
:root[data-site="vapes"] .detail-image,:root[data-site="vapes"] .variant-photo img,:root[data-site="vapes"] .variant-dialog-intro>img,
:root[data-site="vapes"] .campaign-main-photo img,:root[data-site="vapes"] .campaign-companion img{background:#fff}

/* The home page's sliding banner: the Night shift hero, a violet-to-magenta glow. */
:root[data-site="vapes"] .campaign-banner{background:transparent}
:root[data-site="vapes"] .campaign-banner .banner-slide,:root[data-site="vapes"] .campaign-storage,:root[data-site="vapes"] .campaign-textiles{
  background:radial-gradient(40% 60% at 80% 55%,rgba(139,92,246,.40),transparent 70%),radial-gradient(30% 40% at 15% 25%,rgba(34,211,238,.18),transparent 70%),linear-gradient(120deg,#0f1630,#1b1240 55%,#2a0f33);
  border:1px solid var(--v-line);border-radius:20px}
:root[data-site="vapes"] .campaign-banner h2{color:#fff}
:root[data-site="vapes"] .campaign-banner p,:root[data-site="vapes"] .campaign-textiles p{color:var(--v-dim)}
:root[data-site="vapes"] .campaign-main-photo{background:var(--v-surf);border:1px solid var(--v-line)}
:root[data-site="vapes"] .campaign-main-photo strong{color:var(--v-ink)}
:root[data-site="vapes"] .primary-button{border-color:transparent}

/* The sign-in page's ground. Its panels, fields and buttons, and the footer, are set with the rest of the site in the
   trade-counter look, further down. */
:root[data-site="vapes"] .login-page{background:var(--v-ground)}

/* Product page: the flavour table's rows, the "every flavour at once" stepper. */
:root[data-site="vapes"] .variant-table tbody tr:nth-child(odd){background:rgba(34,211,238,.04)}
:root[data-site="vapes"] .variant-table tbody tr{border-color:var(--v-line)}
:root[data-site="vapes"] .each-stepper{border-color:var(--v-cyan)}
:root[data-site="vapes"] .each-step:disabled{background:var(--v-surf2);color:var(--v-dim)}

/* Phone: the banner's link is underlined text there, so it takes the cyan rather than the button colours. */
@media (max-width:620px){:root[data-site="vapes"] .campaign-banner .banner-link{color:var(--v-cyan);background:none;box-shadow:none}}

/* The sign-in page: a document box lights a little when pointed at or dragged over, and one in error says so in rose. */
:root[data-site="vapes"] .upload-drop:hover,:root[data-site="vapes"] .upload-drop.is-over{background:var(--v-surf2)}
:root[data-site="vapes"] .registration-panel>p{color:var(--v-dim)}
:root[data-site="vapes"] .upload-field.has-error .upload-drop{color:#fda4af}

/* What the main site paints in its ink colour, which is light here: the notice that slides up, the skip link. */
:root[data-site="vapes"] .toast,:root[data-site="vapes"] .skip-link{background:var(--v-surf2);color:var(--v-ink);border:1px solid var(--v-line2);box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}

/* Only on the vapes site: the Puffs filter group. */
.vapes-only{display:none}
:root[data-site="vapes"] .vapes-only{display:block}

/* The nicotine brands' banner (vapes-look.js heroMarkup; the owner: "we need nic brands banner not the old banners"):
   the brand's name large in its own colour's glow, SHOP THE RANGE, two of its products floating on white tiles, and two
   soft lights drifting behind. It rotates with the banner's own controls. */
:root[data-site="vapes"] .vapes-hero .banner-slide.vapes-slide{position:relative;overflow:hidden;isolation:isolate;min-height:340px;display:grid;
  grid-template-columns:minmax(0,1fr) 46%;align-items:center;gap:24px;padding:40px 56px 70px;border-radius:22px;border:1px solid var(--v-line);
  background:radial-gradient(60% 85% at 82% 50%,color-mix(in srgb,var(--glow) 34%,transparent),transparent 72%),linear-gradient(120deg,#0b1024,#171036 55%,#22102e)}
:root[data-site="vapes"] .vh-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(46px);opacity:.5;pointer-events:none}
:root[data-site="vapes"] .vh-orb.a{width:360px;height:360px;background:var(--glow);right:6%;top:-30%;animation:vh-drift 16s ease-in-out infinite alternate}
:root[data-site="vapes"] .vh-orb.b{width:260px;height:260px;background:#22d3ee;left:-8%;bottom:-45%;opacity:.35;animation:vh-drift 21s ease-in-out infinite alternate-reverse}
:root[data-site="vapes"] .vh-copy{position:relative;min-width:0}
:root[data-site="vapes"] .vh-brand{margin:0;font:800 clamp(44px,6.2vw,92px)/.9 Inter,system-ui,sans-serif;letter-spacing:-.045em;text-transform:uppercase;color:#fff;
  max-width:9ch;text-wrap:balance;text-shadow:0 0 34px color-mix(in srgb,var(--glow) 75%,transparent),0 0 2px rgba(255,255,255,.8)}
:root[data-site="vapes"] .vapes-hero .vh-cta{margin-top:26px;display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;background:var(--v-cyan);color:#001018;
  font:800 13px/1 Inter,system-ui,sans-serif;letter-spacing:.1em;padding:15px 22px;border-radius:999px;box-shadow:0 0 26px rgba(34,211,238,.55)}
:root[data-site="vapes"] .vapes-hero .vh-cta:hover,:root[data-site="vapes"] .vapes-hero .vh-cta:focus-visible{background:#67e8f9;outline:none;box-shadow:0 0 34px rgba(34,211,238,.8)}
:root[data-site="vapes"] .vapes-hero .vh-cta svg{width:16px;height:16px}
:root[data-site="vapes"] .vh-fan{position:relative;height:290px}
:root[data-site="vapes"] .vh-tile{position:absolute;width:60%;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;background:#fff;border-radius:18px;
  box-shadow:0 34px 60px -22px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08);animation:vh-float 7s ease-in-out infinite}
:root[data-site="vapes"] .vh-tile.t0{left:2%;top:2%;rotate:-5deg}
:root[data-site="vapes"] .vh-tile.t1{right:0;top:24%;rotate:6deg;animation-delay:-3.5s}
:root[data-site="vapes"] .vh-tile img{width:88%;height:88%;object-fit:contain}
@keyframes vh-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-46px,34px) scale(1.18)}}
@keyframes vh-float{0%,100%{translate:0 0}50%{translate:0 -14px}}
@media (prefers-reduced-motion:reduce){:root[data-site="vapes"] .vh-orb,:root[data-site="vapes"] .vh-tile{animation:none}}
@media (max-width:620px){
  :root[data-site="vapes"] .vapes-hero .banner-slide.vapes-slide{min-height:250px;grid-template-columns:minmax(0,1fr) 44%;gap:10px;padding:26px 18px 58px}
  :root[data-site="vapes"] .vh-brand{font-size:clamp(30px,9.5vw,44px)}
  :root[data-site="vapes"] .vapes-hero .vh-cta{margin-top:16px;padding:11px 14px;font-size:11px;letter-spacing:.08em;background:var(--v-cyan);color:#001018;text-decoration:none}
  :root[data-site="vapes"] .vh-fan{height:170px}
  :root[data-site="vapes"] .vh-tile{width:72%;border-radius:14px}
}

/* The full check of the look, 12 November 2026: what could not be read, the main site's orange where it still showed,
   and edges that were lost on the dark ground. Each figure is the contrast measured in the browser.

   The main buttons keep the violet-to-pink gradient and their white words, on deeper stops: white was 4.23:1 on the
   violet end and 2.65:1 on the pink end, and is 5.70:1 and 4.85:1 on these. Hovering no longer brightens the button
   (that took the pink end under 4.5:1 again). The button is flat: it glowed violet and pink until the trade-counter
   look, which has no glows, reached every page (the owner, 12 November 2026: "make it better and refine/polish it
   more"). Saying so here also keeps the main site's orange glow off it. */
:root[data-site="vapes"] .primary-button{background:var(--v-gradient);color:#fff;box-shadow:none}
:root[data-site="vapes"] .primary-button:hover{filter:none;box-shadow:none}
:root[data-site="vapes"] .primary-button:active{box-shadow:none}
:root[data-site="vapes"] .primary-button:disabled{background:var(--v-surf2);color:var(--v-dim);box-shadow:none}

/* The main site's orange, wherever it still reached this site: glows, hovers, chips, shelf headings, tags, and the
   no-photo picture (an orange camera on cream), which is shown in grey here. */
:root[data-site="vapes"] .view-product-button:hover{background:rgba(34,211,238,.08)}
:root[data-site="vapes"] .filter-chip{background:rgba(34,211,238,.08);border-color:rgba(34,211,238,.32)}
:root[data-site="vapes"] .results-heading{--shelf-ink:var(--v-dim);--shelf-soft:var(--v-surf2);--shelf-rule:var(--v-line2)}
:root[data-site="vapes"] .shelf-new{--shelf-ink:var(--v-cyan);--shelf-soft:rgba(34,211,238,.12);--shelf-rule:var(--v-cyan)}
:root[data-site="vapes"] .shelf-best{--shelf-ink:var(--v-pink);--shelf-soft:rgba(244,114,182,.12);--shelf-rule:var(--v-pink)}
:root[data-site="vapes"] .advertisements .icon-button,:root[data-site="vapes"] .spotlight-more,:root[data-site="vapes"] .brand-pair,
:root[data-site="vapes"] .brand-pair:hover,:root[data-site="vapes"] .cart-deals{border-color:var(--v-line2)}
:root[data-site="vapes"] .spotlight-more:hover{background:rgba(34,211,238,.06)}
:root[data-site="vapes"] .brand-pair:hover{box-shadow:none}
:root[data-site="vapes"] .brand-pair::after{background:var(--v-line2)}
:root[data-site="vapes"] .cart-deal-meter{background:rgba(34,211,238,.18)}
:root[data-site="vapes"] .deal-ribbon{box-shadow:none}
:root[data-site="vapes"] .deal-tag{background:#001018;color:var(--v-pink)}
:root[data-site="vapes"] img[src*="/assets/products/placeholder"]{filter:grayscale(1)}

/* Tags on a product photo sit on the photo's white tile, so they are solid: the "0% nicotine" tag was cyan on a pale
   cyan tint there, 1.67:1, and is 10.7:1. */
:root[data-site="vapes"] .product-tag{background:#001018;color:var(--green)}
:root[data-site="vapes"] .product-tag.lotus-tag{background:#001018;color:var(--v-cyan)}
:root[data-site="vapes"] .product-tag.hot-tag{background:#001018;color:var(--v-pink)}

/* Dialogs (the policies on the sign-in page, saved lists, cookie settings, the flavour picker, the cart, the age
   check) were the colour of the panels behind them, with no border and a shadow that did not show. */
:root[data-site="vapes"] dialog[open]{border:1px solid var(--v-edge);box-shadow:0 30px 80px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.6)}
:root[data-site="vapes"] dialog::backdrop{background:rgba(2,4,10,.78)}
:root[data-site="vapes"] dialog.cart-dialog[open]{border-width:0 0 0 1px;box-shadow:-24px 0 70px rgba(0,0,0,.75)}

/* Focus rings that were black: white round the cyan age check buttons, cyan in the contact band, and the site's dark
   on-colour inside the cyan "every flavour" stepper. */
:root[data-site="vapes"] .age-gate-actions button:focus-visible,:root[data-site="vapes"] .age-gate-actions a:focus-visible{outline-color:#fff}
:root[data-site="vapes"] .footer-band a:focus-visible{outline-color:var(--v-cyan)}
:root[data-site="vapes"] .each-step:focus-visible,:root[data-site="vapes"] .cart-deal-add:focus-visible{outline-color:#001018}

/* Fields: the border was 1.21 to 1.72:1 against what is round it; this one is at least 3.5:1 on every surface the site
   has. Tick boxes and the checkout's round choices are drawn here in the same border, cyan when chosen. */
:root[data-site="vapes"] input,:root[data-site="vapes"] textarea,:root[data-site="vapes"] select,:root[data-site="vapes"] .search,
:root[data-site="vapes"] .customer-field input,:root[data-site="vapes"] .customer-field select,:root[data-site="vapes"] .customer-field textarea,
:root[data-site="vapes"] .access-field>input,:root[data-site="vapes"] .access-field select,:root[data-site="vapes"] .password-field,
:root[data-site="vapes"] .upload-drop,:root[data-site="vapes"] .variant-stepper,:root[data-site="vapes"] .stepper{border-color:var(--v-field)}
:root[data-site="vapes"] .search:focus-within,:root[data-site="vapes"] .upload-drop:hover,:root[data-site="vapes"] .upload-drop.is-over{border-color:var(--v-cyan)}
:root[data-site="vapes"] .upload-field.has-file .upload-drop{border-color:var(--green)}
:root[data-site="vapes"] .upload-field.has-error .upload-drop{border-color:var(--red)}
:root[data-site="vapes"] input[type=checkbox],:root[data-site="vapes"] input[type=radio]{-webkit-appearance:none;appearance:none;flex:none;min-width:16px;min-height:16px;padding:0;
  border:1.5px solid var(--v-field);border-radius:4px;background:var(--v-ground) center/100% no-repeat;cursor:pointer}
:root[data-site="vapes"] input[type=radio]{border-radius:50%}
:root[data-site="vapes"] input[type=checkbox]:checked{border-color:var(--v-cyan);background-color:var(--v-cyan);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l3 3 5.8-6.6' fill='none' stroke='%23001018' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:root[data-site="vapes"] input[type=radio]:checked{border-color:var(--v-cyan);background-image:radial-gradient(circle,var(--v-cyan) 0 42%,transparent 48%)}
:root[data-site="vapes"] input[type=checkbox]:disabled,:root[data-site="vapes"] input[type=radio]:disabled{opacity:.5;cursor:default}
:root[data-site="vapes"] .cookie-switch span{background:var(--v-field)}
:root[data-site="vapes"] .cookie-switch input:checked+span{background:var(--v-cyan)}
:root[data-site="vapes"] .cookie-switch input:checked+span::after{background:#001018}

/* The small photos in the menu panels were blended into the panel as on the main site's light panels, which on a
   dark panel left them nearly black: each sits on a white tile, as the cards' photos do. */
:root[data-site="vapes"] .menu-item img{mix-blend-mode:normal;background:#fff;border-radius:8px}

/* The Product Warnings page's links were the main site's dark orange, 2.64:1 on this ground. */
:root[data-site="vapes"] .product-warnings a:not(.primary-button),:root[data-site="vapes"] .product-warnings summary:hover{color:var(--v-cyan)}

/* The Zero Nicotine filter and its tag each on one line, as the rows round it. Brand initials on dark tiles in the
   site's own colours (cyan through violet to pink, by the brand's own number), the letters at 7:1 or more; six of the
   pastel tiles were under 4.5:1. */
:root[data-site="vapes"] .filter-options label:has(>.lotus-tiny){gap:6px;white-space:nowrap}
:root[data-site="vapes"] .tiny-tag.lotus-tiny{flex:none;padding:0 4px;font-size:10px;white-space:nowrap}
:root[data-site="vapes"] .brand-mark,:root[data-site="vapes"] .results-mark.letters{--tone:calc(var(--hue,0)*.5 + 170);
  background:hsl(var(--tone) 45% 15%);color:hsl(var(--tone) 90% 82%)}
:root[data-site="vapes"] .brand-mark{border:1px solid hsl(var(--tone) 45% 30%)}

/* ==================================================================================================================
   The rest of the site in the trade-counter look (the owner, 12 November 2026: "Looks good but make it better and
   refine/polish it more"). The home page, the grid, the cart and the product page were rebuilt in that look
   (vapes-counter.css, vapes-order.css); everything else still wore Night shift, so the site read as two designs. From
   here to the nicotine strength badges, every other page and piece is set the same way: the near-black ground, solid
   dark panels with hairline edges and no glow, very large tight headings with the first word in the gradient, one
   violet-to-pink button for the main action of a screen, outlined buttons for the others, and colour kept for links,
   states and a brand's own mark. Sizes keep to the look's scale: 12, 14, 16, 20, 28, 44, 60.
   ================================================================================================================== */

/* A heading's first word, wherever a page marks one. */
:root[data-site="vapes"] .key-word{background:var(--v-neon);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
:root[data-site="vapes"] ::selection{background:#a78bfa;color:#05070c}

/* ---------- The header ---------- */
:root[data-site="vapes"] .header-main{padding-block:14px}
:root[data-site="vapes"] .search{height:48px;padding:0 16px;border-radius:12px;background:var(--v-surf);color:var(--v-dim)}
:root[data-site="vapes"] .search svg{color:var(--v-dim)}
:root[data-site="vapes"] .search input{font-size:15px;color:var(--v-ink);text-overflow:ellipsis}
/* The one ring every page shows where the keyboard is: 3 px of cyan, as the product page has it. */
:root[data-site="vapes"] button:focus-visible,:root[data-site="vapes"] a:focus-visible,:root[data-site="vapes"] input:focus-visible,:root[data-site="vapes"] select:focus-visible,
:root[data-site="vapes"] summary:focus-visible,:root[data-site="vapes"] textarea:focus-visible{outline-width:3px}
/* While the phone's header is slid away, nothing of it hangs over the page: a list left open goes with it. */
:root[data-site="vapes"] body.header-tucked .site-header .subcategory-dropdown,:root[data-site="vapes"] body.header-tucked .site-header .menu-panel{visibility:hidden}
:root[data-site="vapes"] .search input::placeholder{color:var(--v-dim)}
:root[data-site="vapes"] .search:focus-within{outline:3px solid var(--v-cyan);outline-offset:2px}
:root[data-site="vapes"] .search:focus-within svg{color:var(--v-ink)}
:root[data-site="vapes"] .search kbd{padding:2px 7px;border-color:var(--v-line2);border-radius:6px;color:var(--v-dim)}
:root[data-site="vapes"] .header-actions{gap:6px}
:root[data-site="vapes"] .header-actions .plain-button{padding:0 12px;border-radius:10px;color:var(--v-ink);font-size:14px}
:root[data-site="vapes"] .header-actions .plain-button:hover{background:var(--v-surf2);color:#fff}
:root[data-site="vapes"] .header-actions .logout-button{min-height:44px;padding:0 6px 0 10px;color:var(--v-dim);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
:root[data-site="vapes"] .header-actions .logout-button:hover{color:var(--v-ink)}
:root[data-site="vapes"] .account-badge{border-color:var(--v-line2);background:var(--v-surf)}
:root[data-site="vapes"] .account-badge:hover{border-color:var(--v-ink)}
:root[data-site="vapes"] .account-badge .badge-avatar{background:var(--v-ink);color:#05070c}
:root[data-site="vapes"] .account-badge .badge-credit{color:var(--green)}

/* The pills: quiet outlines, as the home page has them. A brand keeps its own colour as the dot beside its name and
   nothing more; the pill to the main site is the quietest, being a way out and not a shelf. */
:root[data-site="vapes"] .category-links a.brand-pill{border:1px solid var(--v-line2);background:transparent;color:var(--v-ink);box-shadow:none;transition:border-color .15s ease,background-color .15s ease}
:root[data-site="vapes"] .category-links a.brand-pill:hover,:root[data-site="vapes"] .category-links a.brand-pill:focus-visible,
:root[data-site="vapes"] .category-links a.brand-pill[aria-expanded=true],:root[data-site="vapes"] .category-links a.brand-pill.is-current{border-color:var(--v-ink);background:var(--v-surf2);color:#fff;box-shadow:none;transform:none}
:root[data-site="vapes"] .category-links a.cat-pill.away-pill{border-color:var(--v-line);background:transparent;color:var(--v-dim)}
:root[data-site="vapes"] .cat-pill.away-pill b,:root[data-site="vapes"] .cat-pill.away-pill span{color:inherit;font-weight:700}
:root[data-site="vapes"] .category-links a.cat-pill.away-pill:hover,:root[data-site="vapes"] .category-links a.cat-pill.away-pill:focus-visible{border-color:var(--v-ink);background:transparent;color:var(--v-ink)}

/* What hangs from the bar: a category's list, a brand's showcase and All brands, each a solid dark sheet with a
   hairline edge, a little under its pill. */
:root[data-site="vapes"] .subcategory-dropdown{top:calc(100% + 6px);left:0;min-width:260px;padding:8px;border:1px solid var(--v-line2);border-radius:16px;background:var(--v-surf);box-shadow:0 24px 60px rgba(0,0,0,.7)}
:root[data-site="vapes"] .category-links .subcategory-dropdown a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:var(--v-ink);font-size:15px;font-weight:600}
:root[data-site="vapes"] .category-links .subcategory-dropdown a:first-child{margin-bottom:6px;border-bottom:1px solid var(--v-line);border-radius:10px 10px 0 0;font-weight:800;letter-spacing:-.01em}
:root[data-site="vapes"] .category-links .subcategory-dropdown a:hover,:root[data-site="vapes"] .category-links .subcategory-dropdown a:focus-visible,
:root[data-site="vapes"] .category-links .subcategory-dropdown a[aria-current]{background:var(--v-surf2);color:#fff}
:root[data-site="vapes"] .brands-dropdown{left:auto;right:0;padding:12px}
:root[data-site="vapes"] .brands-grid{gap:2px 12px}
:root[data-site="vapes"] .category-links .subcategory-dropdown a.brand-tile{gap:12px;min-height:52px;margin:0;padding:0 10px;border:0;border-radius:10px;font-weight:700}
:root[data-site="vapes"] .brand-mark{width:36px;height:36px;border-radius:10px;font-size:12px}
:root[data-site="vapes"] .brand-logo{width:36px;height:36px;border:0;border-radius:10px;background:#fff}
:root[data-site="vapes"] .brand-tile-count{font-size:13px;color:var(--v-dim);font-variant-numeric:tabular-nums}
:root[data-site="vapes"] .brands-empty{padding:14px;font-size:15px;color:var(--v-dim)}
:root[data-site="vapes"] .menu-panel{top:calc(100% + 6px);left:0;border:1px solid var(--v-line2);border-radius:16px;background:var(--v-surf);box-shadow:0 24px 60px rgba(0,0,0,.7)}
/* A showcase's own side: the brand's colour as a bar across the top, as on its cards, and its name in the big type. */
:root[data-site="vapes"] .category-links a.menu-feature{min-height:272px;gap:8px;padding:24px 20px 20px;border-right:1px solid var(--v-line);border-top:4px solid var(--c,var(--v-line2));background:var(--v-ground);color:var(--v-ink)}
:root[data-site="vapes"] .category-links a.menu-feature.lotus-feature{border-top-color:#a78bfa}
:root[data-site="vapes"] .brand-feature-logo{top:20px;left:20px;right:20px;height:104px;border-radius:12px;background:#fff}
:root[data-site="vapes"] .brand-feature-logo.on-dark{background:#000}
:root[data-site="vapes"] .menu-kicker{font:700 12px/1 var(--v-type);letter-spacing:.14em;color:var(--v-dim)}
:root[data-site="vapes"] .menu-feature strong{font:900 28px/1 var(--v-type);letter-spacing:-.04em;color:var(--v-ink)}
:root[data-site="vapes"] .menu-line{font-size:14px;line-height:1.4;color:var(--v-dim)}
:root[data-site="vapes"] .menu-cta{gap:8px;min-height:40px;margin-top:8px;padding:0 16px;border:0;border-radius:10px;background:var(--v-ink);color:#05070c;font:800 14px/1 var(--v-type)}
:root[data-site="vapes"] .category-links a.menu-feature:hover .menu-cta{background:#fff}
:root[data-site="vapes"] .menu-list{gap:2px 8px;padding:12px}
:root[data-site="vapes"] .category-links a.menu-item{gap:12px;padding:8px;border-radius:10px;color:var(--v-ink)}
:root[data-site="vapes"] .menu-item img{width:56px;height:56px}
:root[data-site="vapes"] .menu-item b{font:800 15px/1.25 var(--v-type);letter-spacing:-.015em}
:root[data-site="vapes"] .menu-item small{display:block;margin-top:3px;font-size:13px;color:var(--v-dim)}

/* The phone's slim bar while scrolling: the same ground and hairline, its three controls 44 px to tap. */
:root[data-site="vapes"] .tuck-actions{gap:8px}
:root[data-site="vapes"] .tuck-actions .icon-button{width:44px;height:44px;border-color:var(--v-line2);border-radius:12px;background:transparent;color:var(--v-ink)}
:root[data-site="vapes"] .tuck-actions .cart-button{min-height:44px;padding:0 12px;border:1px solid var(--v-line2);border-radius:12px;color:var(--v-ink)}

/* ---------- Search that finds nothing, and the end of a list ---------- */
:root[data-site="vapes"] .empty-results{padding:64px 20px 72px}
:root[data-site="vapes"] .empty-results>svg{width:28px;height:28px;margin-bottom:20px;color:var(--v-dim)}
:root[data-site="vapes"] .empty-results h3{font:900 44px/.95 var(--v-type);letter-spacing:-.04em;color:var(--v-ink)}
:root[data-site="vapes"] .empty-results p{margin:16px auto 24px;max-width:52ch;font-size:16px;line-height:1.5;color:var(--v-dim)}
:root[data-site="vapes"] .search-suggestions>span{font:700 12px/1 var(--v-type);letter-spacing:.14em;color:var(--v-dim)}
:root[data-site="vapes"] .empty-results .elsewhere{gap:12px 20px;margin:0 auto 24px;padding:16px 16px 16px 20px;border:1px solid var(--v-line2);border-radius:16px;background:var(--v-surf);color:var(--v-read);font-size:15px}
:root[data-site="vapes"] .empty-results .elsewhere b{color:var(--v-ink)}
:root[data-site="vapes"] .empty-results .elsewhere .primary-button{min-height:44px;padding:0 16px;border:1px solid var(--v-line2);background:transparent;color:var(--v-ink);font-size:14px}
:root[data-site="vapes"] .empty-results .elsewhere .primary-button:hover{border-color:var(--v-ink)}
:root[data-site="vapes"] .catalogue-end{padding:28px 0 48px;font-size:14px;color:var(--v-dim)}
:root[data-site="vapes"] .catalogue-end a{min-height:44px;margin-block:-12px;color:var(--v-ink);font-weight:600}

/* ---------- Account, checkout, help and information pages ---------- */
/* The page's title in the big type, its way back to the shelves an outlined button beside it. */
:root[data-site="vapes"] .customer-page{padding-block:40px 72px}
:root[data-site="vapes"] .customer-title{align-items:flex-end;gap:24px;margin-bottom:28px}
:root[data-site="vapes"] .customer-title h1{font:900 60px/.95 var(--v-type);letter-spacing:-.04em;color:var(--v-ink);text-wrap:balance}
:root[data-site="vapes"] .customer-title p{margin-top:14px;max-width:60ch;font-size:16px;line-height:1.4;color:var(--v-dim)}
:root[data-site="vapes"] .customer-title>a.text-button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--v-line2);border-radius:12px;color:var(--v-ink);font:700 14px/1 var(--v-type);text-decoration:none}
:root[data-site="vapes"] .customer-title>a.text-button:hover{border-color:var(--v-ink);color:#fff}
:root[data-site="vapes"] .customer-title>a.text-button svg{width:16px;height:16px}
:root[data-site="vapes"] .preview-notice{margin-bottom:32px;padding:12px 16px;border:1px solid var(--v-line);border-radius:12px;background:var(--v-surf);font-size:14px;line-height:1.5;color:var(--v-dim)}
:root[data-site="vapes"] .customer-layout{grid-template-columns:232px minmax(0,1fr);gap:48px}
:root[data-site="vapes"] .account-nav{gap:2px;padding:8px;border:1px solid var(--v-line);border-radius:16px;background:var(--v-surf)}
:root[data-site="vapes"] .account-nav a,:root[data-site="vapes"] .account-nav button{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:var(--v-dim);font:700 15px/1.2 var(--v-type)}
:root[data-site="vapes"] .account-nav [aria-current],:root[data-site="vapes"] .account-nav a:hover,:root[data-site="vapes"] .account-nav button:hover{background:var(--v-surf2);color:var(--v-ink)}
:root[data-site="vapes"] .customer-panel h2{margin-bottom:16px;font:800 28px/1.1 var(--v-type);letter-spacing:-.03em;color:var(--v-ink)}
:root[data-site="vapes"] .customer-panel h3{margin:28px 0 12px;font:800 20px/1.2 var(--v-type);letter-spacing:-.02em;color:var(--v-ink)}
:root[data-site="vapes"] .customer-panel p{max-width:68ch;font-size:15px;line-height:1.6}
:root[data-site="vapes"] .customer-panel .muted{color:var(--v-dim)}
:root[data-site="vapes"] .customer-panel form{margin-top:20px}
:root[data-site="vapes"] .customer-panel p a:not([class]){color:var(--v-cyan);text-decoration:underline;text-underline-offset:3px}
:root[data-site="vapes"] .customer-links{margin-block:28px;border-color:var(--v-line)}
:root[data-site="vapes"] .customer-links a{min-height:72px;padding:0 16px;border-color:var(--v-line);color:var(--v-ink);font:800 20px/1.2 var(--v-type);letter-spacing:-.02em;text-decoration:none}
:root[data-site="vapes"] .customer-links a:hover{background:var(--v-surf);color:#fff}
:root[data-site="vapes"] .customer-links svg{color:var(--v-dim)}

/* Buttons on these pages and in the dialogs: the gradient one for the screen's main action, flat; an outlined one
   beside it; and plain underlined words for the small actions in a list or a table. */
:root[data-site="vapes"] .customer-page .primary-button,:root[data-site="vapes"] .lists-dialog .primary-button,:root[data-site="vapes"] .info-dialog .primary-button,
:root[data-site="vapes"] .not-found .primary-button,:root[data-site="vapes"] .empty-results>.primary-button,:root[data-site="vapes"] .deal-prompt .primary-button{min-height:48px;padding:0 22px;border-radius:12px;font:800 15px/1 var(--v-type);transition:transform .16s ease}
:root[data-site="vapes"] .customer-page .text-button,:root[data-site="vapes"] .lists-dialog .text-button,:root[data-site="vapes"] .info-dialog .text-button{color:var(--v-ink);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
:root[data-site="vapes"] .customer-page .text-button:hover,:root[data-site="vapes"] .lists-dialog .text-button:hover,:root[data-site="vapes"] .info-dialog .text-button:hover{color:#fff}
:root[data-site="vapes"] .form-actions{gap:12px 16px;margin-top:28px}
:root[data-site="vapes"] .form-actions .primary-button{min-height:56px;min-width:240px;padding:0 28px;border-radius:12px;font-size:17px}
:root[data-site="vapes"] .form-actions .text-button{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 20px;border:1px solid var(--v-line2);border-radius:12px;font-size:15px;font-weight:700;text-decoration:none}
:root[data-site="vapes"] .form-actions .text-button:hover{border-color:var(--v-ink)}
@media (prefers-reduced-motion:no-preference){
  :root[data-site="vapes"] .customer-page .primary-button:hover:not(:disabled),:root[data-site="vapes"] .lists-dialog .primary-button:hover:not(:disabled),:root[data-site="vapes"] .access-submit:hover:not(:disabled),
  :root[data-site="vapes"] .age-gate-actions button:hover{transform:translateY(-1px)}
  :root[data-site="vapes"] .customer-page .primary-button:active:not(:disabled),:root[data-site="vapes"] .lists-dialog .primary-button:active:not(:disabled),:root[data-site="vapes"] .access-submit:active:not(:disabled),
  :root[data-site="vapes"] .age-gate-actions button:active{transform:scale(.98)}
}

/* Fields: a clear label over a 48 px field one step off the page, its border 3:1 or more, a cyan ring when in use. */
:root[data-site="vapes"] .form-grid{gap:20px}
:root[data-site="vapes"] .customer-field>span{margin-bottom:8px;font:700 14px/1.3 var(--v-type);color:var(--v-ink)}
:root[data-site="vapes"] .customer-field input,:root[data-site="vapes"] .customer-field select,:root[data-site="vapes"] .customer-field textarea{min-height:48px;padding:0 14px;border-width:1px;border-radius:12px;font-size:16px}
:root[data-site="vapes"] .customer-field textarea{min-height:140px;padding:12px 14px;line-height:1.5}
:root[data-site="vapes"] .customer-field input:focus-visible,:root[data-site="vapes"] .customer-field select:focus-visible,:root[data-site="vapes"] .customer-field textarea:focus-visible{border-color:var(--v-cyan);outline:3px solid var(--v-cyan);outline-offset:2px}

/* Checkout, the calmest part of the site: three plain steps, the form on the left, what is being ordered in one solid
   panel on the right with its subtotal as the one big figure. */
:root[data-site="vapes"] .checkout-steps{flex-wrap:wrap;gap:8px 28px;margin:0 0 36px;font:700 12px/1 var(--v-type);letter-spacing:.14em;text-transform:uppercase;color:var(--v-dim)}
:root[data-site="vapes"] .checkout-steps li{padding-bottom:12px;border-bottom:2px solid var(--v-line)}
:root[data-site="vapes"] .checkout-steps [aria-current]{border-color:var(--v-ink);color:var(--v-ink);font-weight:800}
:root[data-site="vapes"] .checkout-layout{grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:auto 1fr;gap:0 56px}
:root[data-site="vapes"] .customer-page .variant-selected{display:flex;align-items:center;gap:12px;min-height:44px;color:var(--v-ink);font-size:15px;font-weight:500;cursor:pointer}
:root[data-site="vapes"] .customer-page .variant-selected input{width:22px;height:22px;border-radius:6px}
:root[data-site="vapes"] .checkout-summary{padding:24px;border:1px solid var(--v-line2);border-radius:20px;background:var(--v-surf)}
:root[data-site="vapes"] .checkout-summary h2{margin-bottom:8px}
:root[data-site="vapes"] .checkout-summary li{gap:14px;padding:14px 0;border-color:var(--v-line)}
:root[data-site="vapes"] .checkout-summary img{width:56px;height:56px;border-radius:10px;background:#fff}
:root[data-site="vapes"] .checkout-summary li>div{font-size:14px;line-height:1.45;color:var(--v-dim)}
:root[data-site="vapes"] .checkout-summary li strong{color:var(--v-ink);font-weight:700}
:root[data-site="vapes"] .checkout-summary li>strong{font:800 16px/1 var(--v-type);font-variant-numeric:tabular-nums;white-space:nowrap}
:root[data-site="vapes"] .checkout-summary small{font-size:13px;color:var(--v-dim)}
:root[data-site="vapes"] .order-totals>div{align-items:baseline;padding-block:8px;font-size:15px;color:var(--v-dim)}
:root[data-site="vapes"] .order-totals strong{font:800 16px/1.2 var(--v-type);color:var(--v-ink);font-variant-numeric:tabular-nums}
:root[data-site="vapes"] .order-totals>div:last-of-type>strong,:root[data-site="vapes"] .checkout-summary .order-totals strong{font:900 28px/1 var(--v-type);letter-spacing:-.03em}
:root[data-site="vapes"] .order-totals p{margin-top:10px;font-size:13px;line-height:1.5;color:var(--v-dim)}
:root[data-site="vapes"] .checkout-summary .order-totals{max-width:none;margin:12px 0 4px}
:root[data-site="vapes"] .checkout-summary .text-button{display:inline-flex;align-items:center;min-height:44px}
:root[data-site="vapes"] .delivery-choices{margin-top:32px}
:root[data-site="vapes"] .delivery-choices legend{margin-bottom:14px;font:800 20px/1.2 var(--v-type);letter-spacing:-.02em;color:var(--v-ink)}
:root[data-site="vapes"] .delivery-choices label{gap:14px;margin-bottom:10px;padding:16px;border-color:var(--v-line2);border-radius:12px;background:var(--v-surf);color:var(--v-ink);font:700 16px/1.3 var(--v-type);cursor:pointer}
:root[data-site="vapes"] .delivery-choices label:hover,:root[data-site="vapes"] .delivery-choices label:has(input:checked){border-color:var(--v-ink)}
:root[data-site="vapes"] .delivery-choices label:has(input:checked){background:var(--v-surf2)}
:root[data-site="vapes"] .delivery-choices label:has(input:focus-visible){outline:3px solid var(--v-cyan);outline-offset:2px}
:root[data-site="vapes"] .delivery-choices input{width:20px;height:20px;margin-top:0}
:root[data-site="vapes"] .delivery-choices input:focus-visible{outline:none}
:root[data-site="vapes"] .delivery-choices small{margin-top:4px;font-size:14px;font-weight:400;line-height:1.45;color:var(--v-dim)}
:root[data-site="vapes"] .order-ack{gap:14px;margin:24px 0 8px;padding:16px;border-color:var(--v-line2);border-radius:12px;background:var(--v-surf)}
:root[data-site="vapes"] .order-ack input{width:22px;min-width:22px;height:22px;min-height:22px;padding:0;border-radius:6px}
:root[data-site="vapes"] .order-ack>span{font-size:15px;font-weight:500;line-height:1.5;color:var(--v-ink)}
:root[data-site="vapes"] .order-ack a{color:var(--v-cyan)}
:root[data-site="vapes"] .order-signature{margin:16px 0;padding:16px;border-color:var(--v-line);border-radius:12px;background:var(--v-surf)}
:root[data-site="vapes"] .order-signature-field input{font-size:18px;font-weight:600}
:root[data-site="vapes"] .order-signature-note{font-size:13px;color:var(--v-dim)}

/* What the page says back: one plain panel with a bar down its edge, green for done and rose for a problem. */
:root[data-site="vapes"] .customer-feedback{margin-bottom:24px;padding:14px 16px;border:1px solid var(--v-line2);border-left:4px solid var(--green);border-radius:12px;background:var(--v-surf);color:var(--v-ink);font-size:15px;line-height:1.5}
:root[data-site="vapes"] .customer-feedback[data-error=true]{border-color:var(--v-line2);border-left-color:#fb7185;background:var(--v-surf);color:#fda4af;font-weight:600}
:root[data-site="vapes"] .customer-feedback[data-tone=success]{padding:18px;border-color:var(--v-line2);border-left-color:var(--green)}
:root[data-site="vapes"] .customer-feedback[data-tone=success]>svg{color:#05070c}
:root[data-site="vapes"] .customer-feedback[data-tone=success]>strong{font:800 20px/1.2 var(--v-type);letter-spacing:-.02em}
:root[data-site="vapes"] .customer-empty{padding:56px 24px;border-color:var(--v-line);border-radius:20px;background:var(--v-surf)}
:root[data-site="vapes"] .customer-empty svg{width:28px;height:28px;margin-bottom:20px;color:var(--v-dim)}
:root[data-site="vapes"] .customer-empty h2{margin-bottom:0;font:900 44px/.95 var(--v-type);letter-spacing:-.04em}
:root[data-site="vapes"] .customer-empty p{margin:14px auto 24px;font-size:16px;line-height:1.5;color:var(--v-dim)}

/* Orders, statements and addresses: tables with small-capital headings over hairlines, figures in tabular numerals. */
:root[data-site="vapes"] .order-search{max-width:420px;margin-bottom:24px}
:root[data-site="vapes"] .order-table-wrap{border-color:var(--v-line)}
:root[data-site="vapes"] .order-table{font-size:15px}
:root[data-site="vapes"] .order-table th{padding:14px 12px;border-bottom:1px solid var(--v-line);background:none;font:700 12px/1 var(--v-type);letter-spacing:.14em;text-transform:uppercase;color:var(--v-dim)}
:root[data-site="vapes"] .order-table td{padding:16px 12px;border-color:var(--v-line);line-height:1.45}
:root[data-site="vapes"] .order-table a{color:var(--v-ink);font-weight:800;text-decoration:underline;text-underline-offset:3px}
:root[data-site="vapes"] .order-table small{margin-top:2px;font-size:13px;color:var(--v-dim)}
:root[data-site="vapes"] .order-table td.number{font-weight:700}
:root[data-site="vapes"] .status-label{padding:4px 10px;border:1px solid var(--v-line2);border-radius:999px;background:none;color:var(--v-ink);font:700 12px/1.3 var(--v-type)}
:root[data-site="vapes"] .order-meta{gap:16px;margin-block:24px}
:root[data-site="vapes"] .order-meta>div,:root[data-site="vapes"] .address-card,:root[data-site="vapes"] .deal-emails-setting{padding:20px;border-color:var(--v-line);border-radius:16px;background:var(--v-surf)}
:root[data-site="vapes"] .order-meta h3{margin:0 0 12px;font:700 12px/1 var(--v-type);letter-spacing:.14em;text-transform:uppercase;color:var(--v-dim)}
:root[data-site="vapes"] .order-meta p+h3{margin-top:20px}
:root[data-site="vapes"] .address-block{font-size:15px;line-height:1.6}
:root[data-site="vapes"] .order-tracking a{color:var(--v-cyan);text-decoration:underline;text-underline-offset:3px}
:root[data-site="vapes"] .profile-details dt{font:700 12px/1 var(--v-type);letter-spacing:.14em;text-transform:uppercase;color:var(--v-dim)}
:root[data-site="vapes"] .profile-details dd{margin-top:8px;font-size:16px}
:root[data-site="vapes"] .statement-cards>div{padding:18px;border-color:var(--v-line);border-radius:16px;background:var(--v-surf)}
:root[data-site="vapes"] .statement-cards span{margin-bottom:12px;font:700 12px/1 var(--v-type);letter-spacing:.14em;color:var(--v-dim)}
:root[data-site="vapes"] .statement-cards strong{font:900 28px/1 var(--v-type);letter-spacing:-.03em}
:root[data-site="vapes"] .statement-cards .is-due{color:#fda4af}
:root[data-site="vapes"] .statement-quick button{min-height:44px;padding:0 14px;border-color:var(--v-line2);border-radius:12px;color:var(--v-ink);font:700 14px/1 var(--v-type)}
:root[data-site="vapes"] .statement-quick button:hover,:root[data-site="vapes"] .statement-quick button[aria-pressed=true]{border-color:var(--v-ink);color:var(--v-ink)}
:root[data-site="vapes"] .statement-quick button[aria-pressed=true]{background:var(--v-surf2)}
:root[data-site="vapes"] .deal-emails-setting{margin-top:32px}
:root[data-site="vapes"] .deal-emails-setting h2{font-size:20px}
:root[data-site="vapes"] .deal-emails-choice strong{font-size:16px}
:root[data-site="vapes"] .deal-emails-detail,:root[data-site="vapes"] .deal-emails-note{font-size:14px;color:var(--v-dim)}
:root[data-site="vapes"] .resource-grid article{border-color:var(--v-line);border-radius:16px;background:var(--v-surf)}
:root[data-site="vapes"] .resource-grid img{background:#fff}
:root[data-site="vapes"] .resource-grid h3{margin:0 0 10px;font:800 16px/1.3 var(--v-type);letter-spacing:-.015em}
:root[data-site="vapes"] .resource-grid a{color:var(--v-cyan);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
:root[data-site="vapes"] .image-unavailable{background:var(--v-surf2);color:var(--v-dim);font-size:14px}

/* Help topics and the long pages (FAQ, policies, warnings, About): a comfortable measure, clear headings, the words a
   shade under white so a long read is easy, links in cyan and underlined. */
:root[data-site="vapes"] .help-topics-nav{gap:8px;margin-bottom:28px;padding-block:0 20px;border-color:var(--v-line)}
:root[data-site="vapes"] .help-topics-nav a.text-button{min-height:44px;padding:0 16px;border:1px solid var(--v-line2);border-radius:12px;color:var(--v-ink);font:700 14px/1 var(--v-type);text-decoration:none}
:root[data-site="vapes"] .help-topics-nav a.text-button:hover,:root[data-site="vapes"] .help-topics-nav a.text-button[aria-current]{border-color:var(--v-ink);background:var(--v-surf2)}
:root[data-site="vapes"] .help-topics details,:root[data-site="vapes"] .product-warnings details{padding:0;border-color:var(--v-line)}
:root[data-site="vapes"] .help-topics summary,:root[data-site="vapes"] .product-warnings summary{padding:18px 0;font:800 20px/1.3 var(--v-type);letter-spacing:-.02em;color:var(--v-ink)}
:root[data-site="vapes"] .help-topics summary:hover{color:#fff}
:root[data-site="vapes"] .customer-panel .help-topics details p,:root[data-site="vapes"] .customer-panel .product-warnings details p{padding:0 0 20px;font-size:16px;line-height:1.65;color:var(--v-read)}
:root[data-site="vapes"] .policy-copy{max-width:68ch}
:root[data-site="vapes"] .policy-copy>section{margin-bottom:0;padding:28px 0;border-color:var(--v-line)}
:root[data-site="vapes"] .policy-copy>section:first-child{padding-top:4px}
:root[data-site="vapes"] .policy-copy h2{margin-bottom:12px}
:root[data-site="vapes"] .customer-panel .policy-copy p{max-width:none;font-size:17px;line-height:1.7;color:var(--v-read)}
:root[data-site="vapes"] .policy-copy p a{color:var(--v-cyan);text-decoration:underline;text-underline-offset:3px}
:root[data-site="vapes"] .customer-panel .product-warnings .warnings-intro{font-size:20px;line-height:1.5;color:var(--v-ink)}
:root[data-site="vapes"] .contact-intro{margin-bottom:32px}

/* ---------- Dialogs, notices and waiting ---------- */
/* Saved lists, cookie settings, the account note, a product's photo and a lab report: solid sheets with the title in
   the big type and a round close button, as the cart has. */
:root[data-site="vapes"] .lists-dialog,:root[data-site="vapes"] .info-dialog,:root[data-site="vapes"] .image-dialog{padding:28px;border-radius:20px;background:var(--v-surf)}
:root[data-site="vapes"] .lists-heading{align-items:flex-start;gap:16px}
:root[data-site="vapes"] .lists-heading h2,:root[data-site="vapes"] .info-dialog h2{font:900 44px/.95 var(--v-type);letter-spacing:-.04em;color:var(--v-ink);text-wrap:balance}
:root[data-site="vapes"] .image-dialog .lists-heading h2{font:800 28px/1.1 var(--v-type);letter-spacing:-.03em}
:root[data-site="vapes"] .lists-heading .icon-button,:root[data-site="vapes"] .info-close,:root[data-site="vapes"] .document-tools .icon-button{flex:none;width:44px;height:44px;border-color:var(--v-line2);border-radius:50%;background:transparent;color:var(--v-ink)}
:root[data-site="vapes"] .lists-heading .icon-button:hover,:root[data-site="vapes"] .info-close:hover,:root[data-site="vapes"] .document-tools .icon-button:hover{border-color:var(--v-ink);color:#fff}
:root[data-site="vapes"] .lists-note{margin:14px 0 24px;font-size:15px;line-height:1.5;color:var(--v-dim)}
:root[data-site="vapes"] .info-dialog p{font-size:15px;line-height:1.6;color:var(--v-read)}
:root[data-site="vapes"] .save-list-form{padding:20px 0;border-color:var(--v-line)}
:root[data-site="vapes"] .save-list-form label{font:700 14px/1.3 var(--v-type);color:var(--v-ink)}
:root[data-site="vapes"] .save-list-fields{gap:10px}
:root[data-site="vapes"] .save-list-fields input{min-height:48px;padding:0 14px;border-radius:12px;background:var(--v-ground);font-size:16px}
:root[data-site="vapes"] .save-list-form>p{font-size:13px;color:var(--v-dim)}
:root[data-site="vapes"] .saved-list{padding:20px 0;border-color:var(--v-line)}
:root[data-site="vapes"] .saved-list h3,:root[data-site="vapes"] .saved-items h3{font:800 20px/1.2 var(--v-type);letter-spacing:-.02em;color:var(--v-ink)}
:root[data-site="vapes"] .saved-list p,:root[data-site="vapes"] .saved-list summary{font-size:14px;color:var(--v-dim)}
:root[data-site="vapes"] .saved-list details>summary{color:var(--v-ink);font-size:15px}
:root[data-site="vapes"] .saved-list details ul.saved-list-lines{font-size:14px}
:root[data-site="vapes"] .saved-list-lines li>div>a{color:var(--v-ink)}
:root[data-site="vapes"] .saved-list-actions,:root[data-site="vapes"] .saved-item-actions{gap:12px 20px}
:root[data-site="vapes"] .lists-empty{padding:20px 0;font-size:16px;color:var(--v-dim)}
:root[data-site="vapes"] .list-feedback{font-size:14px;font-weight:600}
:root[data-site="vapes"] .list-feedback[data-error="true"]{color:#fda4af}
:root[data-site="vapes"] .saved-items{border-color:var(--v-line)}
:root[data-site="vapes"] .saved-item{gap:16px;padding:16px 0;border-color:var(--v-line)}
:root[data-site="vapes"] .saved-item-image{border:0;border-radius:10px;background:#fff}
:root[data-site="vapes"] .saved-item-info h4{font:800 16px/1.3 var(--v-type);letter-spacing:-.015em;color:var(--v-ink)}
:root[data-site="vapes"] .saved-item-info p{font-size:14px;color:var(--v-dim)}
:root[data-site="vapes"] .cookie-choice,:root[data-site="vapes"] label.cookie-choice{padding:16px;border-color:var(--v-line2);border-radius:12px;background:var(--v-ground);color:var(--v-ink)}
:root[data-site="vapes"] .cookie-choice h3{font:800 16px/1.3 var(--v-type);letter-spacing:-.015em}
:root[data-site="vapes"] .cookie-choice p,:root[data-site="vapes"] .cookie-gpc{font-size:14px;line-height:1.5;color:var(--v-dim)}
:root[data-site="vapes"] .cookie-always{font:700 12px/1 var(--v-type);letter-spacing:.14em;text-transform:uppercase;color:var(--v-dim)}
:root[data-site="vapes"] .cookie-actions a{color:var(--v-cyan);font-size:14px;text-decoration:underline;text-underline-offset:3px}
:root[data-site="vapes"] .image-dialog p{font-size:14px;color:var(--v-dim)}
:root[data-site="vapes"] .document-toolbar{padding:12px 16px;border-color:var(--v-line);background:var(--v-surf)}
:root[data-site="vapes"] .document-toolbar h2{font:800 20px/1.2 var(--v-type);letter-spacing:-.02em}
:root[data-site="vapes"] .document-zoom{font-size:14px;color:var(--v-ink)}
:root[data-site="vapes"] .document-download{min-height:44px;padding:0 16px;border-radius:12px;background:var(--v-ink);color:#05070c;font-size:14px}
:root[data-site="vapes"] .document-download:hover{background:#fff;color:#05070c}
:root[data-site="vapes"] .document-pages{background:var(--v-surf2)}
:root[data-site="vapes"] .deal-prompt{padding:20px;border-color:var(--v-line2);border-radius:16px;background:var(--v-surf);box-shadow:0 24px 60px rgba(0,0,0,.7)}
:root[data-site="vapes"] .deal-prompt-icon{background:var(--v-surf2);color:var(--v-ink)}
:root[data-site="vapes"] .deal-prompt h2{font:800 20px/1.2 var(--v-type);letter-spacing:-.02em}
:root[data-site="vapes"] .deal-prompt p{font-size:14px;color:var(--v-dim)}
:root[data-site="vapes"] .deal-prompt-no,:root[data-site="vapes"] .deal-prompt-close{color:var(--v-dim)}
:root[data-site="vapes"] .deal-prompt-no:hover,:root[data-site="vapes"] .deal-prompt-close:hover{background:var(--v-surf2);color:var(--v-ink)}
/* The notice that slides up, the note that the connection is gone, and the two full-page covers. */
:root[data-site="vapes"] .toast{padding:14px 18px;border-radius:12px;font-size:15px;font-weight:600;line-height:1.4;box-shadow:0 18px 40px -12px rgba(0,0,0,.8)}
:root[data-site="vapes"] .connection-note{padding:14px 18px;border:1px solid var(--v-line2);border-left:4px solid var(--v-amber);border-radius:12px;background:var(--v-surf2);color:var(--v-ink);font-size:15px;line-height:1.5;box-shadow:0 18px 40px -12px rgba(0,0,0,.8)}
:root[data-site="vapes"] .session-error,:root[data-site="vapes"] .session-cover{background:var(--v-ground);color:var(--v-ink)}
:root[data-site="vapes"] .session-error p{font-size:16px;line-height:1.5;color:var(--v-read)}

/* ---------- The age check ---------- */
/* The first thing a visitor sees: the question in the big type, one bright Enter, Underage quiet beside it. The dimmed
   backdrop starts under the nicotine warning (age-gate.js gives its height), so the warning stays readable. */
:root[data-site="vapes"] .age-gate{width:min(calc(100% - 32px),560px);padding:40px;border-radius:20px;background:var(--v-surf);text-align:left}
:root[data-site="vapes"] .age-gate::backdrop{background:linear-gradient(to bottom,transparent var(--warning,0px),rgba(5,7,12,.94) var(--warning,0px))}
:root[data-site="vapes"] .age-gate-card{align-items:flex-start}
:root[data-site="vapes"] .age-gate img,:root[data-site="vapes"] .age-gate img:hover{height:64px;transform:none;transition:none}
:root[data-site="vapes"] .age-gate h2{width:auto;margin:28px 0 0;padding:0;border:0;font:900 60px/.95 var(--v-type);letter-spacing:-.04em;text-transform:none;color:var(--v-ink)}
:root[data-site="vapes"] .age-gate p{width:auto;margin:20px 0 0;font-size:16px;line-height:1.5;color:var(--v-read)}
:root[data-site="vapes"] .age-gate-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;width:100%;margin:28px 0 0}
:root[data-site="vapes"] .age-gate-actions button,:root[data-site="vapes"] .age-gate-actions a{min-width:0;min-height:56px;margin:0;padding:0 28px;border-radius:12px;font:800 17px/1 var(--v-type);letter-spacing:0;text-transform:none;transition:transform .16s ease}
:root[data-site="vapes"] .age-gate-actions button{flex:1 1 220px;border:0;background:var(--v-gradient);color:#fff}
:root[data-site="vapes"] .age-gate-actions a{flex:0 0 auto;border:1px solid var(--v-line2);background:transparent;color:var(--v-dim);font-size:15px;font-weight:700}
:root[data-site="vapes"] .age-gate-actions a:hover{border-color:var(--v-ink);color:var(--v-ink);transform:none}

/* ---------- The sign-in page ---------- */
/* One card in two halves: on the left, on the page's own ground, what an account gives and the way to apply; on the
   right the form, its heading in the big type and its one gradient button. The small round icons are gone: the type
   does their work. The application takes the whole card, each section under its own heading. */
:root[data-site="vapes"] .access-header{padding-block:20px;background:transparent}
:root[data-site="vapes"] .access-header .wordmark img{height:64px}
:root[data-site="vapes"] .access-header>span{font:700 12px/1.3 var(--v-type);letter-spacing:.14em;text-transform:uppercase;color:var(--v-dim)}
:root[data-site="vapes"] .intro-icon,:root[data-site="vapes"] .panel-icon,:root[data-site="vapes"] .lock-icon{display:none}
:root[data-site="vapes"] .wholesale-intro{margin-bottom:28px;padding:0 0 28px;border:0;border-bottom:1px solid var(--v-line);border-radius:0;background:transparent}
:root[data-site="vapes"] .wholesale-intro h2{margin-bottom:10px;font:800 28px/1.1 var(--v-type);letter-spacing:-.03em;color:var(--v-ink)}
:root[data-site="vapes"] .wholesale-intro p{max-width:80ch;font-size:16px;line-height:1.5;color:var(--v-dim)}
:root[data-site="vapes"] .wholesale-intro strong{margin-top:12px;font-size:14px;font-weight:700;line-height:1.5;color:var(--v-ink)}
:root[data-site="vapes"] .access-layout{border-color:var(--v-line2);border-radius:20px;background:var(--v-surf)}
:root[data-site="vapes"] .registration-panel{padding:44px 36px;border-right:1px solid var(--v-line);background:var(--v-ground)}
:root[data-site="vapes"] .registration-panel h2{font:800 28px/1.1 var(--v-type);letter-spacing:-.03em;color:var(--v-ink)}
:root[data-site="vapes"] .registration-panel>p{margin-top:12px;font-size:16px;line-height:1.5}
:root[data-site="vapes"] .registration-panel ul{margin:20px 0 28px}
:root[data-site="vapes"] .registration-panel li{gap:12px;padding:14px 0;border-color:var(--v-line);font-size:15px;line-height:1.4;color:var(--v-ink)}
:root[data-site="vapes"] .registration-panel li svg{margin-top:1px;color:var(--green)}
:root[data-site="vapes"] .register-action{min-height:52px;padding:0 18px;border-color:var(--v-line2);border-radius:12px;background:transparent;color:var(--v-ink);font:800 16px/1 var(--v-type);box-shadow:none}
:root[data-site="vapes"] .register-action:hover{border-color:var(--v-ink);background:transparent;color:#fff;box-shadow:none}
:root[data-site="vapes"] .registration-panel .application-note{margin-top:16px;font-size:14px;line-height:1.5;color:var(--v-dim)}
:root[data-site="vapes"] .account-panel{padding:44px 48px 36px;background:var(--v-surf)}
:root[data-site="vapes"] .account-heading{margin-bottom:32px}
:root[data-site="vapes"] .account-heading h1{font:900 60px/.95 var(--v-type);letter-spacing:-.04em;color:var(--v-ink);text-wrap:balance}
:root[data-site="vapes"] .account-heading p{margin-top:14px;font-size:16px;line-height:1.4;color:var(--v-dim)}
:root[data-site="vapes"] .access-field,:root[data-site="vapes"] .upload-field{gap:8px;margin-bottom:20px;font:700 14px/1.3 var(--v-type);color:var(--v-ink)}
:root[data-site="vapes"] .access-field>input,:root[data-site="vapes"] .access-field select,:root[data-site="vapes"] .password-field{min-height:52px;border-radius:12px;background:var(--v-ground);font-size:16px}
:root[data-site="vapes"] .access-field>input:focus-visible,:root[data-site="vapes"] .access-field select:focus-visible{border-color:var(--v-cyan);outline:3px solid var(--v-cyan);outline-offset:2px}
:root[data-site="vapes"] .password-field:focus-within{border-color:var(--v-cyan);outline:3px solid var(--v-cyan);outline-offset:2px}
:root[data-site="vapes"] .password-field input{font-size:16px}
:root[data-site="vapes"] .password-field button{min-width:68px;color:var(--v-dim);font-size:14px;font-weight:700}
:root[data-site="vapes"] .password-field button:hover{color:var(--v-ink)}
:root[data-site="vapes"] .login-options{margin:4px 0 24px;font-size:14px}
:root[data-site="vapes"] .login-options label{gap:10px;min-height:44px}
:root[data-site="vapes"] .login-options input{width:20px;height:20px;border-radius:6px}
:root[data-site="vapes"] .login-options a,:root[data-site="vapes"] .register-inline a,:root[data-site="vapes"] .policy-link,:root[data-site="vapes"] .reset-link-continue,
:root[data-site="vapes"] .upload-remove{color:var(--v-cyan)}
:root[data-site="vapes"] .login-options a{display:inline-flex;align-items:center;min-height:44px}
:root[data-site="vapes"] .access-submit,:root[data-site="vapes"] .access-submit:hover,:root[data-site="vapes"] .access-submit:active{min-height:56px;padding:0 22px;border-radius:12px;background:var(--v-gradient);color:#fff;font:800 17px/1 var(--v-type);letter-spacing:0;text-transform:none;box-shadow:none;transition:transform .16s ease}
:root[data-site="vapes"] .access-submit:hover:not(:disabled){opacity:1;box-shadow:none;transform:none}
:root[data-site="vapes"] .access-submit:disabled{background:var(--v-surf2);color:var(--v-dim);box-shadow:none}
:root[data-site="vapes"] .register-inline{margin-top:20px;font-size:14px;color:var(--v-dim)}
:root[data-site="vapes"] .preview-account{margin-top:28px;padding-top:20px;border-color:var(--v-line)}
:root[data-site="vapes"] .preview-account summary{font:700 12px/1.3 var(--v-type);letter-spacing:.14em;text-transform:uppercase;color:var(--v-dim)}
:root[data-site="vapes"] .preview-account p,:root[data-site="vapes"] .preview-account dl{font-size:14px;line-height:1.5}
:root[data-site="vapes"] .preview-account .text-button{min-height:44px;color:var(--v-ink);font-size:14px;text-decoration:underline;text-underline-offset:3px}
:root[data-site="vapes"] .access-error{padding:14px 16px;border:1px solid var(--v-line2);border-left:4px solid #fb7185;border-radius:12px;background:var(--v-ground);color:#fda4af;font-size:15px;font-weight:600;line-height:1.5}
:root[data-site="vapes"] .access-success{padding:16px;border:1px solid var(--v-line2);border-left:4px solid var(--green);border-radius:12px;background:var(--v-ground);color:var(--v-ink);font-size:15px;line-height:1.5}
:root[data-site="vapes"] .form-preview-note,:root[data-site="vapes"] .section-note{font-size:14px;line-height:1.5;color:var(--v-dim)}
:root[data-site="vapes"] .form-section+.form-section,:root[data-site="vapes"] .agreements,:root[data-site="vapes"] .reset-link-form{border-color:var(--v-line)}
:root[data-site="vapes"] .form-section+.form-section{margin-top:12px;padding-top:28px}
:root[data-site="vapes"] .form-section legend{margin-bottom:18px;font:800 20px/1.2 var(--v-type);letter-spacing:-.02em;text-transform:none;color:var(--v-ink)}
:root[data-site="vapes"] .section-note{margin:-8px 0 20px}
:root[data-site="vapes"] .upload-drop{min-height:52px;padding:8px 10px;border-radius:12px;background:var(--v-ground)}
:root[data-site="vapes"] .upload-button{min-height:36px;border-color:var(--v-line2);border-radius:10px;background:var(--v-surf2);color:var(--v-ink)}
:root[data-site="vapes"] .upload-hint,:root[data-site="vapes"] .upload-status{font-size:14px;color:var(--v-dim)}
:root[data-site="vapes"] .upload-field.has-file .upload-drop{background:var(--v-ground)}
:root[data-site="vapes"] .upload-field.has-file .upload-name{color:var(--green)}
:root[data-site="vapes"] .upload-field.has-error .upload-drop{background:var(--v-ground)}
:root[data-site="vapes"] .upload-field.has-error .upload-name{color:#fda4af}
:root[data-site="vapes"] .agreements{margin-top:12px;padding-top:24px}
:root[data-site="vapes"] .agree{gap:12px;font-size:15px;line-height:1.5;color:var(--v-ink)}
:root[data-site="vapes"] .agree input{width:20px;height:20px;margin-top:1px;border-radius:6px}
:root[data-site="vapes"] .policy-link{font-size:15px}
:root[data-site="vapes"] .card-footer-banner{padding:18px 16px;border-top:1px solid var(--v-line);background:var(--v-ground)}
:root[data-site="vapes"] .card-footer-banner h4{font:700 12px/1.3 var(--v-type);letter-spacing:.14em;word-spacing:0;color:var(--v-dim)}
:root[data-site="vapes"] .access-footer{padding-block:24px 32px;background:transparent;font-size:13px;color:var(--v-dim)}
:root[data-site="vapes"] .footer-link{min-height:44px;color:var(--v-ink)}
:root[data-site="vapes"] .policy-dialog{border-radius:20px;background:var(--v-surf)}
:root[data-site="vapes"] .policy-dialog-head{padding:20px 24px;border-color:var(--v-line);background:var(--v-surf)}
:root[data-site="vapes"] .policy-dialog-head h2{font:900 28px/1 var(--v-type);letter-spacing:-.03em}
:root[data-site="vapes"] .policy-close{width:44px;height:44px;border:1px solid var(--v-line2);border-radius:50%;color:var(--v-ink)}
:root[data-site="vapes"] .policy-close:hover{border-color:var(--v-ink);background:transparent}
:root[data-site="vapes"] .policy-body{padding:4px 24px 28px}
:root[data-site="vapes"] .policy-body .policy-copy>section{margin-top:20px;padding:0 0 20px}
:root[data-site="vapes"] .policy-body h2{margin-bottom:8px;font:800 20px/1.2 var(--v-type);letter-spacing:-.02em}
:root[data-site="vapes"] .policy-body p{font-size:16px;line-height:1.65;color:var(--v-read)}
:root[data-site="vapes"] .policy-body .policy-note{background:var(--v-surf2);color:var(--v-ink)}

/* ---------- The page that is not there ---------- */
:root[data-site="vapes"] .not-found{padding-block:56px}
:root[data-site="vapes"] .not-found .wordmark img{width:auto;height:64px}
:root[data-site="vapes"] .not-found .muted{font:700 12px/1 var(--v-type);letter-spacing:.14em;text-transform:uppercase;color:var(--v-dim)}
:root[data-site="vapes"] .not-found h1{margin-block:14px 18px;font:900 60px/.95 var(--v-type);letter-spacing:-.04em;color:var(--v-ink)}
:root[data-site="vapes"] .not-found h1+p{font-size:16px;line-height:1.5;color:var(--v-dim)}
:root[data-site="vapes"] .not-found-actions{margin-top:28px}
:root[data-site="vapes"] .not-found .primary-button{min-height:56px;padding:0 28px;border-radius:12px;font-size:17px}

/* ---------- The footer ---------- */
/* The question and the ways to reach the team in one band, the links in four quiet columns under small-capital
   headings, and the legal lines on black at a size that can be read. */
:root[data-site="vapes"] .site-footer{border-top:1px solid var(--v-line);background:var(--v-ground)}
:root[data-site="vapes"] .footer-band{border-top:0;border-bottom:1px solid var(--v-line);background:var(--v-surf);color:var(--v-dim)}
:root[data-site="vapes"] .footer-band .shell{justify-content:flex-start;gap:8px 28px;padding-block:24px;font-size:15px;font-weight:500}
:root[data-site="vapes"] .footer-band strong{margin-right:auto;font:900 28px/1 var(--v-type);letter-spacing:-.03em;color:var(--v-ink)}
:root[data-site="vapes"] .footer-band a{display:inline-flex;align-items:center;min-height:44px;margin-block:0;padding-block:0;color:var(--v-ink);font-weight:700;text-decoration:underline;text-underline-offset:4px}
:root[data-site="vapes"] .footer-band a:hover{color:#fff}
:root[data-site="vapes"] .footer-directory{gap:32px;padding-block:48px 40px}
:root[data-site="vapes"] .footer-brand,:root[data-site="vapes"] .footer-support{border-color:var(--v-line)}
:root[data-site="vapes"] .footer-brand p{font-size:14px;line-height:1.5;color:var(--v-dim)}
:root[data-site="vapes"] .footer-brand .footer-preview-note{font-size:13px;color:var(--v-dim)}
:root[data-site="vapes"] .footer-column h2{margin:0 0 14px;font:700 12px/1.3 var(--v-type);letter-spacing:.14em;color:var(--v-dim)}
:root[data-site="vapes"] .footer-column h2::after{content:none}
:root[data-site="vapes"] .footer-column a,:root[data-site="vapes"] .footer-column button{max-width:100%;min-height:36px;padding:7px 0;color:var(--v-dim);font-size:15px;font-weight:500;line-height:1.45;overflow-wrap:anywhere}
:root[data-site="vapes"] .footer-column a:hover,:root[data-site="vapes"] .footer-column button:hover{color:var(--v-ink)}
:root[data-site="vapes"] .footer-column p{font-size:14px;line-height:1.5;color:var(--v-dim)}
:root[data-site="vapes"] .footer-base{border-top:1px solid var(--v-line);background:#000}
:root[data-site="vapes"] .footer-base .shell{font-size:13px;line-height:1.6;color:var(--v-dim)}
:root[data-site="vapes"] .footer-notice{padding-block:22px 0}
:root[data-site="vapes"] .footer-notice p{font-size:13px;line-height:1.6;color:#c3cad8}

/* ---------- Narrower windows and phones ---------- */
@media (max-width:1050px){
  :root[data-site="vapes"] .checkout-layout{grid-template-columns:minmax(0,1fr) 340px;gap:0 32px}
  :root[data-site="vapes"] .customer-layout{grid-template-columns:200px minmax(0,1fr);gap:32px}
  :root[data-site="vapes"] .account-panel{padding:36px 32px 32px}
  :root[data-site="vapes"] .registration-panel{padding:36px 28px}
  :root[data-site="vapes"] .account-heading h1,:root[data-site="vapes"] .customer-title h1{font-size:52px}
}
@media (max-width:800px){
  :root[data-site="vapes"] .checkout-layout,:root[data-site="vapes"] .customer-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  :root[data-site="vapes"] .account-nav{flex-direction:row;gap:4px;padding:6px;border-radius:12px;scrollbar-width:none}
  :root[data-site="vapes"] .account-nav a,:root[data-site="vapes"] .account-nav button{flex:none;font-size:14px}
  :root[data-site="vapes"] .footer-band strong{flex-basis:100%;margin:0 0 4px;text-align:left}
  :root[data-site="vapes"] .registration-panel{border-right:0;border-top:1px solid var(--v-line)}
}
@media (max-width:700px){
  :root[data-site="vapes"] .header-actions{gap:2px}
  :root[data-site="vapes"] .header-actions .plain-button{padding:0 8px}
  :root[data-site="vapes"] .search{height:46px}
  :root[data-site="vapes"] .customer-page{padding-block:24px 48px}
  :root[data-site="vapes"] .customer-title{align-items:flex-start;gap:16px;margin-bottom:20px}
  :root[data-site="vapes"] .customer-title h1,:root[data-site="vapes"] .account-heading h1,:root[data-site="vapes"] .not-found h1{font-size:38px}
  :root[data-site="vapes"] .customer-title p,:root[data-site="vapes"] .account-heading p{margin-top:10px;font-size:15px}
  :root[data-site="vapes"] .preview-notice{margin-bottom:24px;font-size:13px}
  :root[data-site="vapes"] .customer-panel h2{font-size:24px}
  :root[data-site="vapes"] .customer-empty{padding:40px 16px;border-radius:16px}
  :root[data-site="vapes"] .customer-empty h2,:root[data-site="vapes"] .empty-results h3,:root[data-site="vapes"] .lists-heading h2,:root[data-site="vapes"] .info-dialog h2{font-size:32px}
  :root[data-site="vapes"] .customer-links a{min-height:60px;padding:0 4px;font-size:18px}
  :root[data-site="vapes"] .checkout-steps{gap:8px 18px;margin-bottom:28px;font-size:11px;letter-spacing:.1em}
  :root[data-site="vapes"] .checkout-summary{padding:18px;border-radius:16px}
  :root[data-site="vapes"] .form-actions{gap:10px}
  :root[data-site="vapes"] .form-actions .primary-button,:root[data-site="vapes"] .form-actions .text-button{flex:1 1 100%;min-width:0;min-height:52px}
  :root[data-site="vapes"] .order-table{font-size:14px}
  :root[data-site="vapes"] .order-table th,:root[data-site="vapes"] .order-table td{padding:12px 8px}
  :root[data-site="vapes"] .order-table th{font-size:11px;letter-spacing:.1em}
  :root[data-site="vapes"] .order-row-actions .text-button,:root[data-site="vapes"] .saved-list-actions .text-button,:root[data-site="vapes"] .saved-item-actions .text-button{display:inline-flex;align-items:center;min-height:44px}
  :root[data-site="vapes"] .customer-panel .policy-copy p{font-size:16px;line-height:1.65}
  :root[data-site="vapes"] .policy-copy>section{padding:22px 0}
  :root[data-site="vapes"] .help-topics summary,:root[data-site="vapes"] .product-warnings summary{padding:16px 0;font-size:18px}
  :root[data-site="vapes"] .lists-dialog,:root[data-site="vapes"] .info-dialog,:root[data-site="vapes"] .image-dialog{padding:20px 16px;border-radius:16px}
  :root[data-site="vapes"] .age-gate{padding:28px 20px;border-radius:20px}
  :root[data-site="vapes"] .age-gate h2{margin-top:22px;font-size:44px}
  :root[data-site="vapes"] .age-gate p{margin-top:16px;font-size:15px}
  :root[data-site="vapes"] .age-gate-actions{margin-top:24px}
  :root[data-site="vapes"] .age-gate-actions button,:root[data-site="vapes"] .age-gate-actions a{flex:1 1 100%}
  :root[data-site="vapes"] .wholesale-intro h2{font-size:22px}
  :root[data-site="vapes"] .wholesale-intro p{font-size:15px}
  :root[data-site="vapes"] .access-layout{border-radius:20px}
  :root[data-site="vapes"] .account-panel{padding:28px 20px 24px}
  :root[data-site="vapes"] .registration-panel{padding:28px 20px}
  :root[data-site="vapes"] .registration-panel h2{font-size:24px}
  :root[data-site="vapes"] .account-heading{margin-bottom:24px}
  :root[data-site="vapes"] .policy-dialog-head{padding:16px}
  :root[data-site="vapes"] .policy-body{padding:0 16px 24px}
  :root[data-site="vapes"] .toast{font-size:14px}
  :root[data-site="vapes"] .footer-band .shell{gap:0 20px;padding-block:20px;font-size:14px}
  :root[data-site="vapes"] .footer-band strong{font-size:24px;text-align:left}
  :root[data-site="vapes"] .footer-directory{gap:28px 24px;padding-block:32px}
  :root[data-site="vapes"] .footer-column a,:root[data-site="vapes"] .footer-column button{min-height:44px;padding:11px 0}
  :root[data-site="vapes"] .footer-column h2{margin-bottom:6px}
}
@media (max-width:350px){
  :root[data-site="vapes"] .customer-title h1,:root[data-site="vapes"] .account-heading h1,:root[data-site="vapes"] .not-found h1{font-size:32px}
  :root[data-site="vapes"] .age-gate h2{font-size:38px}
  :root[data-site="vapes"] .customer-empty h2,:root[data-site="vapes"] .empty-results h3,:root[data-site="vapes"] .lists-heading h2,:root[data-site="vapes"] .info-dialog h2{font-size:28px}
  :root[data-site="vapes"] .header-actions .plain-button{padding:0 5px}
}

/* Nicotine strength (the owner, 12 November 2026: "build all 3"; site/strength.js). Beside a flavor's name, a small
   outlined badge says the strength the names state. A product sold in more than one strength lists a flavor once for
   each, so there the badge is filled, each strength in its own neon, and the two rows of one flavor read apart at a
   glance. Dark words on every fill: 8:1 or more. */
:root[data-site="vapes"] .v-strength{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;border:1px solid var(--v-edge);
  color:var(--v-ink);font:700 11.5px/1.5 Inter,system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;vertical-align:1px}
:root[data-site="vapes"] .v-strength.is-told{border-color:transparent;color:#001018;font-weight:800}
:root[data-site="vapes"] .v-strength.s0{background:var(--v-cyan)}
:root[data-site="vapes"] .v-strength.s1{background:var(--v-pink)}
:root[data-site="vapes"] .v-strength.s2{background:#c4b5fd}
:root[data-site="vapes"] .v-strength.s3{background:var(--v-amber)}

/* Your last order (the owner, 12 November 2026: "build all 3"; site/last-order.js). The panel is laid out and sized in
   vapes-counter.css since the trade-counter look; what is left here is what that file builds on: an empty slot takes
   no room, the photos sit on white tiles like the cards', a long name is cut with an ellipsis, and the pieces are the
   flex and grid boxes its sizes assume. */
:root[data-site="vapes"] [data-last-order]:empty{display:none}
:root[data-site="vapes"] .lo-actions{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap}
:root[data-site="vapes"] .lo-actions .text-button{display:inline-flex;align-items:center;min-height:44px;color:var(--v-cyan)}
:root[data-site="vapes"] .lo-items{list-style:none}
:root[data-site="vapes"] .lo-item{display:flex;align-items:center;color:var(--v-ink);text-decoration:none}
:root[data-site="vapes"] .lo-photo{flex:none;background:#fff;overflow:hidden}
:root[data-site="vapes"] .lo-photo img{display:block;width:100%;height:100%;object-fit:contain}
:root[data-site="vapes"] .lo-text{display:grid;min-width:0;line-height:1.35}
:root[data-site="vapes"] .lo-text b,:root[data-site="vapes"] .lo-text span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-site="vapes"] .lo-text span{color:var(--v-dim)}
:root[data-site="vapes"] .lo-text em{font-style:normal}
:root[data-site="vapes"] .lo-more a{display:flex;align-items:center;justify-content:center;height:100%;min-width:76px;padding:0 12px;font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap}

/* On a phone the flavour steppers, the cart's stepper, the cards' buttons and Continue to checkout are 44 px to tap. */
@media (max-width:620px){
  :root[data-site="vapes"] .variant-stepper,:root[data-site="vapes"] .stepper{min-height:44px}
  :root[data-site="vapes"] .variant-stepper button{width:44px;min-width:44px;min-height:44px}
  :root[data-site="vapes"] .variant-stepper input{width:34px;min-height:44px}
  :root[data-site="vapes"] .variant-table thead th:last-child{width:128px}
  :root[data-site="vapes"] .stepper button{width:44px;min-height:44px}
  :root[data-site="vapes"] .cart-qty-input{min-height:44px}
  :root[data-site="vapes"] .card-actions>*,:root[data-site="vapes"] .product-grid .card-actions>*{height:44px;min-height:44px}
  :root[data-site="vapes"] .checkout-button,:root[data-site="vapes"] .bulk-add{min-height:44px}
}
/* On the narrowest phones the six pills took three rows; a little closer together they take two. */
@media (max-width:350px){
  :root[data-site="vapes"] .category-nav .category-links{gap:6px 4px}
  :root[data-site="vapes"] .cat-pill,:root[data-site="vapes"] .category-links a.lotus-trigger{gap:3px;padding:0 6px;font-size:11.5px}
}

/* While the page loads: the placeholders in the night colours, the banner's in the banner's own shape, and a dark panel
   behind each banner photo until it arrives, so the top of the page is never an empty gap (the vapes QA pass,
   8 November 2026: the banner area read blank for several seconds). */
:root[data-site="vapes"] .skeleton-block{background:linear-gradient(90deg,#121a2b 0%,#202a45 40%,#121a2b 80%) 0 0/300% 100%}
:root[data-site="vapes"] .skeleton-banner{height:auto;aspect-ratio:1600/520;border-radius:20px;border:1px solid var(--v-line)}
:root[data-site="vapes"] .erp-slide>.erp-slide-link{background:radial-gradient(40% 60% at 80% 55%,rgba(139,92,246,.28),transparent 70%),linear-gradient(120deg,#0f1630,#1b1240 55%,#2a0f33)}
:root[data-site="vapes"] .tuck-bar{background:var(--v-surf);color:var(--v-ink);border-bottom:1px solid var(--v-line);box-shadow:none}
/* The brand row is one line, with All brands at its right end (the owner's pick of three, 9 November 2026). In a window
   about 821 to 1010 px wide the brand pills filled the row and All brands dropped to a third row on its own, 41 px of
   header. A brand pill that does not fit is left off the row (navigation.js marks it data-off) and is still in the All
   brands list. This replaces, on this site, the 2 October rule that the pills wrap onto another line; nothing scrolls
   sideways either way. The category row above fits one line too (the rule at the end of this file), so the header is
   two rows of pills at every width. Up to 820 px the pills have already given way to Brands (navigation.css). */
:root[data-site="vapes"] .bar-group:has(>.pill-strip){flex-wrap:nowrap;width:100%}
:root[data-site="vapes"] .bar-group>.brands-group{margin-left:auto}
:root[data-site="vapes"] .pill-strip>.pill-group[data-off]{display:none}
/* From 821 to 899 px the pill to the main site reads "Main site", as it does on phones (navigation.css): the full
   "Hotspot Distributors" did not fit beside the categories there and sat on a row of its own, a third row of pills. */
@media (min-width:821px) and (max-width:899px){:root[data-site="vapes"] .cat-pill.away-pill .away-full{display:none}:root[data-site="vapes"] .cat-pill.away-pill .away-short{display:inline}}