/*
Theme Name: IVG Vapes
Theme URI: https://ivgvapes.co.uk
Author: IVG Vapes UK
Description: Lightweight, SEO-first WooCommerce theme for IVG Vapes UK. Built for Core Web Vitals, structured data and UK vape retail compliance.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ivg
Tags: e-commerce, woocommerce, custom-menu, featured-images, responsive
WC requires at least: 8.0
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
/* PLACEHOLDER BRAND PALETTE.
   The previous values belonged to a different store's brand identity and must
   not ship here.
   Replaced with a neutral ink-and-blue scheme so nothing renders in another
   brand's identity.

   The token NAMES are legacy: --teal and --teal-deep now hold blues. Renaming
   them would touch ~300 call sites across the CSS and templates for no visual
   gain, so the names stayed and this comment explains them.

   Contrast rule is unchanged: the accent appears as TEXT only at --teal-deep,
   which is AA on white; --teal is for marks, fills and accents on ink.

   TODO: OWNER — supply the real ivgvapes.co.uk brand colours and mark. */
:root {
  --ink:          #151A1F;  /* Ink        — primary dark */
  --teal:         #4C8DEE;  /* Accent      — mark, fills, accents on ink */
  --teal-deep:    #1B4FA8;  /* Accent deep — accent as text on light (AA) */
  --mist:         #F3F5F8;  /* Mist        — tinted surface */
  --ink-soft:     #06152E;  /* text on accent fills */

  --brand:        var(--ink);
  --brand-dark:   #05080B;
  --brand-light:  #1B242C;
  --accent:       var(--teal-deep);
  --gold:         #eabe12;
  --sale:         #c8102e;
  --body:         #4A565C;
  --muted:        #646E71;  /* WCAG AA: 5.24:1 on white, 4.86:1 on mist. The
                               previous #8A9698 was 3.04:1 and failed both. */
  --line:         #E7ECEB;
  --line-strong:  #E2E8E7;
  --bg-soft:      var(--mist);
  --footer-bg:    var(--ink);
  --white:        #ffffff;

  --radius:       6px;
  --radius-sm:    4px;
  --radius-lg:    12px;
  /* The design's own measure: min(1240px, 100%) with a 24px gutter. At 1440/20
     every grid packed one extra column — 4 device tiles instead of 3, 5 product
     cards instead of 4 — so the whole page ran wider and tighter than drawn. */
  --container:    1240px;
  --gutter:       24px;

  /* Archivo carries both roles: 800/900 for display, 400–600 for text. */
  --font-head: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-body: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Layered, low-opacity shadows read as depth rather than as a grey halo. */
  --shadow-sm: 0 1px 2px rgba(16,16,32,.06), 0 1px 3px rgba(16,16,32,.04);
  --shadow-md: 0 2px 4px rgba(16,16,32,.04), 0 8px 24px rgba(16,16,32,.08);
  --shadow-lg: 0 4px 8px rgba(16,16,32,.04), 0 16px 48px rgba(16,16,32,.12);

  /* 4px spacing scale keeps vertical rhythm consistent across templates. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --header-h: 64px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
}

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

a { color: var(--brand); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 .6em;
}
/* Fluid type: display sizes scale with the viewport so headings stay
   proportionate instead of jumping at one breakpoint. */
h1 { font-size: clamp(26px, 1.2rem + 1.6vw, 38px); letter-spacing: -.01em; }
h2 { font-size: clamp(22px, 1.1rem + 1.1vw, 30px); letter-spacing: -.005em; }
h3 { font-size: clamp(18px, 1rem + .5vw, 22px); }
h4 { font-size: 17px; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 820px; } /* design: min(820px, 100%) */
/* The comparison table gets its own width in the design, wider than the prose
   sections but narrower than the product grids. */
#compare-ranges .container { max-width: 1100px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 9999;
  width: auto; height: auto; clip: auto;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: var(--radius);
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ==========================================================================
   3. Buttons
   ========================================================================== */
.btn,
.button,
button.button,
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .01em;
  line-height: 1.2;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
  text-align: center;
  transition: background .15s var(--ease), transform .05s var(--ease);
}
.btn:hover,
.button:hover,
button.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--teal-deep);
  color: var(--white);
}
.btn:active, .button:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  color: var(--brand);
  border: 2px solid var(--brand);
}
.btn--ghost:hover { background: var(--brand); color: var(--white); }

.btn--block { display: flex; width: 100%; }

/* ==========================================================================
   4. Forms
   ========================================================================== */
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
select, textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--body);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: none; }

/* ==========================================================================
   5. Header
   ========================================================================== */
.site-header { position: relative; z-index: 500; }

/* 5a. Promo top bar */
.topbar {
  background: var(--ink);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
  text-align: center;
}
.topbar__inner { display: flex; align-items: center; justify-content: center; min-height: 40px; gap: 1em; }
.topbar a { color: var(--teal); text-decoration: underline; }

/* 5b. Main header row — lockup | search | actions */
.header-main { background: var(--white); border-bottom: 1px solid var(--line); }
.header-main__inner {
  display: flex;
  align-items: center;
  gap: var(--s6);
  min-height: var(--header-h);
  padding-block: var(--s4);
}

/* Brand lockup */
.site-branding { flex: 0 0 auto; }
.site-branding img { max-height: 46px; width: auto; }
.lockup { display: inline-flex; align-items: center; gap: 13px; color: var(--ink); }
.lockup:hover { color: var(--ink); }
.lockup .ivg-mark { flex: 0 0 auto; display: block; }
.lockup__text { display: flex; flex-direction: column; gap: 3px; }
.lockup__word {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  color: currentColor;
}
.lockup__desc {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .3em;
  line-height: 1;
  color: var(--teal-deep);
}
.lockup--teal { color: var(--white); }
.lockup--teal .lockup__desc { color: var(--teal); }

/* icon buttons */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: background .15s var(--ease);
}
.icon-btn:hover { background: var(--mist); color: var(--ink); }
.icon-btn svg,
.header-action svg,
.search-form button svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; }

/* 5c. Pill search */
.header-search { flex: 1 1 auto; max-width: 420px; margin-inline: auto; }
.header-search form {
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: var(--mist);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 6px 5px 16px;
  transition: border-color .15s var(--ease);
}
.header-search form:focus-within { border-color: var(--teal-deep); }
.header-search input[type="search"] {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--ink);
}
.header-search input[type="search"]:focus { outline: none; }
.header-search input[type="search"]::placeholder { color: var(--muted); }
.header-search button.button {
  flex: 0 0 auto;
  background: var(--teal);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 999px;
  padding: 7px 16px;
}
.header-search button.button:hover { background: #23E0BF; color: var(--ink-soft); }
.header-search button.button svg { display: none; }
.header-search button.button::after { content: "Search"; }

/* 5c2. Account + cart */
.header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; margin-left: auto; }
.header-actions__divider { width: 1px; height: 22px; background: var(--line-strong); }
.header-action {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap;
}
.header-action:hover { color: var(--teal-deep); }
.cart-btn__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--teal);
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 800;
}

/* 5d. Primary nav — light row, teal active underline */
.nav-bar { background: var(--white); border-bottom: 1px solid var(--line); }
.nav-bar__inner { display: flex; align-items: center; }

.primary-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--s5);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.primary-menu::-webkit-scrollbar { display: none; }
.primary-menu li { position: relative; flex-shrink: 0; }
.primary-menu > li > a {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--body);
  padding: 14px 0;
  white-space: nowrap;
  border-bottom: 2.5px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.primary-menu > li > a:hover { color: var(--ink); }
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-parent > a,
.primary-menu > li.current-product-ancestor > a {
  color: var(--ink);
  border-bottom-color: var(--teal);
}

/* dropdowns */
.primary-menu ul.sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 600;
  min-width: 240px; margin: 0; padding: 6px 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.primary-menu li:hover > ul.sub-menu,
.primary-menu li:focus-within > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-menu ul.sub-menu a {
  display: block;
  padding: 9px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--body);
}
.primary-menu ul.sub-menu a:hover { background: var(--bg-soft); color: var(--brand); }
.primary-menu ul.sub-menu ul.sub-menu { top: 0; left: 100%; border-radius: var(--radius); }

/* 5e. Trust strip */
.trust-strip { background: var(--bg-soft); text-align: center; padding: 14px 0; }
.trust-strip__title { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--ink); margin: 0; }
.trust-strip__sub { font-size: 14px; color: var(--body); margin: 2px 0 0; }

/* 5f. Mobile drawer */
.burger { display: none; }
.drawer {
  position: fixed; inset: 0 auto 0 0; z-index: 1000;
  width: min(320px, 85vw);
  background: var(--white);
  transform: translateX(-100%);
  transition: transform .25s ease;
  overflow-y: auto;
  padding: 1rem;
  box-shadow: var(--shadow-md);
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.drawer .lockup__word { font-size: 17px; }
.drawer .lockup__desc { font-size: 7.5px; }
.drawer__search { margin: .85rem 0; }
.drawer__search form {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--mist); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 5px 6px 5px 16px;
}
.drawer__search input[type="search"] { flex: 1; border: 0; background: transparent; padding: 6px 0; font-size: 13.5px; }
.drawer__search input[type="search"]:focus { outline: none; }
.drawer__search button.button {
  flex: 0 0 auto; background: var(--teal); color: var(--ink-soft);
  border-radius: 999px; padding: 7px 16px; font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0;
}
.drawer__search button.button svg { display: none; }
.drawer__search button.button::after { content: "Search"; }
.drawer__title { font-family: var(--font-head); font-size: 18px; font-weight: 700; margin: 0; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer li a { display: block; padding: 11px 4px; border-bottom: 1px solid var(--line); color: var(--body); font-family: var(--font-head); font-size: 15px; font-weight: 500; }
.drawer ul.sub-menu a { padding-left: 20px; font-size: 14px; font-weight: 400; color: var(--muted); font-family: var(--font-body); }
.overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.5);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.overlay.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   6. Sections & headings
   ========================================================================== */
.section { padding: 40px 0; }
.section--soft { background: #F5F8F6; } /* the design's exact tint */
.section__title {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  margin: 0 0 24px;
}
.section__title--left { text-align: left; }
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}
/* Only the margin belongs to the head row. The size used to be set here too,
   and at (0,2,0) it silently beat the design's .section__title — every heading
   with a link beside it rendered 26px instead of 36px. */
.section__head .section__title { margin: 0; }
.section__link { font-size: 13.5px; font-weight: 700; color: var(--teal-deep); white-space: nowrap; }
.section__link:hover { color: var(--ink); }
.section__lead { text-align: center; max-width: 800px; margin: -12px auto 28px; color: var(--body); }

/* ==========================================================================
   7. Hero
   ========================================================================== */
.hero { position: relative; background: var(--ink); color: var(--white); }
.hero img { width: 100%; object-fit: cover; }
.hero__slide { position: relative; }

.hero__caption {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 72px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
/* Banner artwork keeps its own dark background, so the image sits flush and the
   copy overlays the empty left-hand side rather than the products. */
.hero__media { display: block; width: 100%; }
.hero__media img { width: 100%; height: auto; display: block; }

@media (min-width: 901px) {
  .hero--has-image .hero__slide { position: relative; }
  .hero--has-image .hero__caption {
    position: absolute;
    inset: 0;
    justify-content: center;
    max-width: var(--container);
    margin-inline: auto;
    left: 0; right: 0;
    /* Scrim only on the copy side; the product side stays clean. */
    background: linear-gradient(90deg, rgba(12,17,23,.94) 0%, rgba(12,17,23,.72) 42%, rgba(12,17,23,0) 68%);
  }
  .hero--has-image .hero__caption h1 { max-width: 13ch; }
  .hero--has-image .hero__sub { max-width: 44ch; }
}

/* On phones the artwork is centred, so text over it would sit on the devices.
   Stack instead: image first, copy beneath on the ink panel. */
@media (max-width: 900px) {
  .hero--has-image .hero__slide { display: block; }
  .hero--has-image .hero__caption { position: static; padding-top: var(--s5); }
}
.hero__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
}
.hero__caption h1,
.hero__caption h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(30px, 2rem + 2.2vw, 46px);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -.02em;
  max-width: 15ch;
  text-wrap: balance;
}
.hero__sub {
  margin: 0;
  font-size: clamp(15px, .9rem + .4vw, 16.5px);
  line-height: 1.6;
  color: #A8B4B7;
  max-width: 52ch;
  text-wrap: pretty;
}
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* --- Hero (2026 redesign) ------------------------------------------------
   Built in markup rather than as a banner image: a CSS mint panel with three
   transparent product cutouts over it. That is what makes the height
   content-driven instead of locked to an image's aspect ratio. The previous
   baked banner was 2.857:1, so the copy had to be measured against it at every
   width and still collided with the products whenever it grew.

   Fluid by design — clamp() throughout and a wrapping flex row — so the hero
   needs no media queries at all. Below ~840px the two columns simply stack.
   ---------------------------------------------------------------------- */
.hero-v2 { background: #F5F8F6; overflow: hidden; }
.hero-v2__inner { width: min(1240px, 100%); margin-inline: auto; padding-inline: 24px; }
.hero-v2__row { display: flex; flex-wrap: wrap; align-items: stretch; }

.hero-v2__copy {
  flex: 1 1 420px;
  min-width: min(100%, 380px);
  padding: clamp(36px, 5vw, 72px) 0 clamp(32px, 4vw, 64px);
  display: flex; flex-direction: column; gap: 22px;
  align-self: center;
}
.hero-v2__badge {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 9px;
  margin: 0; padding: 8px 14px;
  border-radius: 999px; background: #04241f; color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.hero-v2__badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #2FE3A8; flex: none;
}
.hero-v2 h1 {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05; font-weight: 800; letter-spacing: -.03em;
  color: #04241f; text-wrap: balance;
}
.hero-v2__sub {
  margin: 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55;
  color: #4c635c; max-width: 56ch;
}
.hero-v2__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-v2__btn {
  display: inline-flex; align-items: center; height: 54px;
  border-radius: 10px; font-size: 16px; text-decoration: none;
}
.hero-v2__btn--solid { padding: 0 28px; background: #04241f; color: #fff; font-weight: 800; }
.hero-v2__btn--solid:hover { background: #0a3b31; color: #fff; }
.hero-v2__btn--ghost {
  padding: 0 26px; border: 1px solid #c3d4cd; background: #fff;
  color: #04241f; font-weight: 700;
}
.hero-v2__btn--ghost:hover { border-color: #04241f; color: #04241f; }

.hero-v2__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin: 0; color: #627670; font-size: 14px; font-weight: 500;
}
.hero-v2__trust .sep { color: #b6c7c0; }

.hero-v2__art {
  flex: 1 1 420px; min-width: min(100%, 320px);
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  min-height: 340px;
}
.hero-v2__panel {
  position: absolute; left: 0; top: 0; bottom: 0;
  /* The design pinned this at right:-24px, which reaches the viewport edge only
     while the container is narrower than its 1240px max. Past that it stopped
     short, leaving a strip of background beside it that read as unfinished.
     Same intent, generalised: bleed by the gutter plus whatever margin the
     centred container has, so it meets the edge at any width. */
  right: calc(-1 * ((100vw - min(1240px, 100vw)) / 2 + 24px));
  background: linear-gradient(135deg, #DCF6EC 0%, #BFEEDC 100%);
  border-radius: clamp(80px, 14vw, 220px) 0 0 0;
}
.hero-v2__products {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(12px, 2.4vw, 34px);
  padding: 32px 0 0;
}
.hero-v2__products img { width: auto; display: block; }
.hero-v2__products .is-salt  { height: clamp(110px, 15vw, 210px); filter: drop-shadow(0 18px 22px rgba(4,36,31,.24)); }
.hero-v2__products .is-ultra { height: clamp(190px, 26vw, 360px); filter: drop-shadow(0 26px 30px rgba(4,36,31,.28)); }
.hero-v2__products .is-pmp   { height: clamp(178px, 24vw, 340px); filter: drop-shadow(0 22px 26px rgba(4,36,31,.24)); }

/* --- Shop-by-device tiles (2026 design) ----------------------------------
   A mint shelf with product cutouts standing on it, all sized as a share of
   the tile so nothing clips as the auto-fit grid reflows. Values are the
   design's own; the only change is that product counts stay live.
   ---------------------------------------------------------------------- */
.cat-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.cat-tile-v2 {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid #e6ece9;
  border-radius: 14px;
  overflow: hidden;
  background: #F5F8F6;
  text-decoration: none;
}
.cat-tile-v2:hover { border-color: #2FE3A8; }
.cat-tile-v2__shelf {
  position: absolute; left: 0; right: 0; bottom: 0; height: 37%;
  background: linear-gradient(135deg, #DCF6EC 0%, #BFEEDC 100%);
}
.cat-tile-v2__art {
  position: absolute; right: 4%; bottom: 7%;
  display: flex; align-items: flex-end; justify-content: flex-end;
  gap: 4%;
  height: min(318px, 86%);
  width: min(300px, 78%);
}
.cat-tile-v2__art img {
  width: auto; align-self: flex-end;
  filter: drop-shadow(0 12px 16px rgba(4,36,31,.2));
}
.cat-tile-v2__body {
  position: absolute; left: 7%; top: 8%; width: 44%;
  display: flex; flex-direction: column; gap: 8px;
}
.cat-tile-v2__count { font-size: clamp(11px, 1.05vw, 15px); font-weight: 500; color: #627670; }
.cat-tile-v2__name  { font-size: clamp(17px, 2vw, 28px); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; color: #04241f; }
.cat-tile-v2__cta   { font-size: clamp(12px, 1.2vw, 17px); font-weight: 700; color: #0c7e5c; }
.btn--accent { background: var(--teal); color: var(--ink-soft); border-radius: 10px; padding: 14px 24px; }
.btn--accent:hover { background: #23E0BF; color: var(--ink-soft); }
.btn--outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid #33424A;
  border-radius: 10px;
  padding: 13px 24px;
}
.btn--outline:hover { background: transparent; border-color: var(--teal); color: var(--white); }

/* ==========================================================================
   8. Category tiles
   ========================================================================== */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.cat-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.cat-tile:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: rgba(0,128,111,.3);
}
.cat-tile img { width: 100%; aspect-ratio: 16/7; object-fit: cover; transition: transform .4s var(--ease); }
.cat-tile:hover img { transform: scale(1.05); }
.cat-tile__label {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s5) var(--s4) var(--s4);
  background: linear-gradient(to top, rgba(12,8,32,.82), rgba(12,8,32,.35) 60%, transparent);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Image-less tiles are a designed surface in their own right, not a fallback:
   the catalogue ships before product photography does. */
.cat-tile--plain {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  min-height: 150px;
  padding: 20px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.cat-tile--plain:hover {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
  transform: none;
}
.cat-tile__count { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.cat-tile__body { display: flex; flex-direction: column; gap: 8px; }
.cat-tile__name {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.cat-tile__cta { font-size: 12.5px; font-weight: 700; color: var(--teal-deep); }
.cat-tile--plain:hover .cat-tile__name { color: var(--white); }
.cat-tile--plain:hover .cat-tile__cta { color: var(--teal); }
.cat-tile--plain:hover .cat-tile__count { color: var(--muted); }

/* ==========================================================================
   9. Product grid & cards

   Selectors deliberately do NOT require a .woocommerce ancestor: the homepage
   renders loops through ivg_render_products(), outside WooCommerce's
   wrapper, so any .woocommerce-prefixed rule silently misses there and the
   title falls back to the base h2 size.
   ========================================================================== */
ul.products {
  display: grid;
  /* The design's own grid: minmax(230px, 1fr) with an even 18px gutter. At the
     1240px container that resolves to four cards of ~285px, which is what the
     design shows — not the five 204px cards the old 190px floor produced. */
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* No desktop column cap. The old rule forced five across; the design's 230px
   floor already tops out at four inside the 1240px container, so a cap would
   only fight it. auto-fill handles every step down on its own. */
/* WooCommerce puts clearfix pseudo-elements on .woocommerce ul.products. In a
   grid container those become grid items and eat the first and last cells, so
   the reset has to match its specificity — the unprefixed selector alone loses. */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }

ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
/* Body block — the design pads the content, not the card. */
ul.products li.product > a { padding: 0; }
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .product__rating,
ul.products li.product .product__specs,
ul.products li.product .product__desc,
ul.products li.product .price-row { padding-inline: 15px; }
ul.products li.product .woocommerce-loop-product__title { padding-top: 14px; }
/* The buy bar runs the full width of the card, flush to its edges. */
ul.products li.product .product__foot { padding: 0; margin-top: auto; }
ul.products li.product:hover,
ul.products li.product:focus-within {
  border-color: #C9D6D3;
  box-shadow: 0 6px 20px rgba(12,17,23,.07);
  transform: translateY(-2px);
}
ul.products li.product > a { display: block; color: inherit; }

.product__media {
  position: relative;
  margin-bottom: 0;
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(160deg, #F7F9F8 0%, #EDF2F1 100%);
}
ul.products li.product img,
.product__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0;
  background: transparent;
  transition: transform .4s var(--ease);
}
ul.products li.product:hover .product__media img { transform: scale(1.04); }

/* Placeholders read as deliberate, not broken. */
ul.products li.product img.is-placeholder,
.product__media img.is-placeholder,
.woocommerce div.product img.is-placeholder {
  object-fit: cover;
  background: var(--mist);
  border: 1px dashed rgba(0, 128, 111, .2);
}

/* Badges. Pinned to the image, never overlapping: each column can shrink and
   the labels stay short (a strength badge reads "0MG", not "Nicotine free"). */
.product__badges {
  position: absolute;
  inset: var(--s2) var(--s2) auto var(--s2);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s1);
  pointer-events: none;
  z-index: 3;
}
.product__badges .col { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; min-width: 0; }
.product__badges .col--right { align-items: flex-end; }
.badge {
  display: inline-block;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--teal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.badge--new  { background: var(--teal); color: var(--ink-soft); }
.badge--sale { background: var(--sale); color: var(--white); }
.badge--deal { background: var(--teal); color: var(--ink-soft); }
/* Strength reads as a quiet spec chip, not a promotion. */
.badge--strength {
  letter-spacing: .06em;
  padding: 4px 9px;
  color: var(--body);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line-strong);
}
.badge--zero { color: #0B5E38; border-color: #B7E0CB; background: rgba(232,249,241,.95); }

/* Price and deal share one line: number on the left, offer on the right. The
   wrapper owns the 15px card inset, so the two children sit flush to the edges
   and must not add their own. */
ul.products li.product .price-row,
.woocommerce ul.products li.product .price-row {
  display: flex;
  align-items: baseline;
  /* Design keeps the deal pill next to the price, not pushed to the far edge. */
  justify-content: flex-start;
  gap: var(--s2);
  margin: var(--s2) 0 var(--s3);
}
/* The wrapper owns the card inset, so the price must not add its own. The deal
   pill is deliberately excluded — its horizontal padding is what makes it a
   pill, and zeroing it here left the text flush against the background. */
ul.products li.product .price-row .price,
.woocommerce ul.products li.product .price-row .price {
  padding-inline: 0;
  margin: 0;
}
ul.products li.product .price-row .deal-strip,
.woocommerce ul.products li.product .price-row .deal-strip { margin: 0; }
/* The row is driven by the price, so the badge must not stretch it. */
ul.products li.product .price-row .deal-strip { min-height: 0; flex: none; }

/* Deal reads as a pill against the price rather than another line of text. */
.deal-strip:not(:empty) {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  line-height: 1.2;
}
.deal-strip:empty { display: none; }

/* Was-price beside the current one, as on the reference card. */
ul.products li.product .price del,
.woocommerce ul.products li.product .price del {
  margin-left: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  opacity: 1;
}
ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins { text-decoration: none; background: none; }

/* Headline figures, each in its own cell. */
.product__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 var(--s2);
}
.product__specs:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.product__spec {
  padding: 8px 6px;
  text-align: center;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Supporting spec line under the cells. */
.product__desc {
  margin: 0 0 var(--s3);
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.45em * 2);
}

/* Product page: the deal gets a proper line under the price, not just a chip. */
.pdp-deal {
  margin: 0 0 var(--s4);
  padding: 11px 14px;
  background: rgba(0, 201, 167, .09);
  border-left: 3px solid var(--teal-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body);
}
.pdp-deal strong { color: var(--ink); font-weight: 800; }

/* Cart and checkout: the saving reads as a saving, not another charge. */
.woocommerce-cart .cart-collaterals .fee th,
.woocommerce-cart .cart-collaterals .fee td,
.wc-block-components-totals-fees {
  color: var(--teal-deep);
  font-weight: 700;
}

/* Title clamped to three lines so every card in a row lines up, however long
   the product name is. Full name is on the product page. */
ul.products li.product .woocommerce-loop-product__title,
.product__title {
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ink);
  /* padding-block only: a `padding` shorthand here would wipe the shared
     padding-inline that insets every element in the card body. */
  padding-block: 0;
  margin: 0 0 var(--s2);
  text-wrap: pretty;
}
ul.products li.product a:hover .woocommerce-loop-product__title,
.product__title a:hover { color: var(--teal-deep); }

ul.products li.product .price,
.product__price {
  display: block;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 900;
  color: var(--ink);
  margin: var(--s2) 0 var(--s3);
}
ul.products li.product .price del { color: var(--muted); font-weight: 500; font-size: 13.5px; margin-right: 6px; }
ul.products li.product .price ins { text-decoration: none; color: var(--sale); }

.product__foot { margin-top: auto; }
/* Full-bleed buy bar: square at the top, following the card's radius at the
   bottom, so it reads as part of the card rather than a button sitting in it.
   The card clips overflow, which is what keeps the corners clean. */
ul.products li.product .button,
.woocommerce ul.products li.product .button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 12px;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .01em;
  text-align: center;
}
ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover { background: var(--teal-deep); color: #fff; }
ul.products li.product .button.loading,
ul.products li.product .button.added { opacity: .85; }

/* Product page: the buy button is the loudest thing on the page. */
.woocommerce div.product form.cart button.button,
.woocommerce div.product form.cart button.single_add_to_cart_button {
  background: var(--teal);
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 800;
  border-radius: 10px;
  padding: 16px 28px;
  flex: 1;
  min-width: 200px;
}
.woocommerce div.product form.cart button.button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
  background: #23E0BF;
  color: var(--ink-soft);
}
.woocommerce div.product form.cart { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.woocommerce div.product form.cart.variations_form { display: block; }
.woocommerce div.product form.cart .qty {
  height: auto;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
}

/* Rating row — always rendered so cards stay level. */
.product__rating { display: flex; align-items: center; gap: 7px; min-height: 18px; margin-top: 9px; }
.product__stars { display: flex; gap: 2px; }
.product__stars .star { width: 13px; height: 13px; fill: var(--line-strong); }
.product__stars .star.is-on { fill: #F2A93B; }
.product__rating-label { font-size: 11.5px; font-weight: 600; color: var(--body); }
.product__rating-label.is-empty { color: #B4BFC1; font-weight: 500; }

/* Spec line: "12ml · 6000 puffs · 20mg" */
/* Legacy single-line spec text — superseded by .product__specs + .product__desc. */
.product__meta { display: none; }

ul.products li.product .star-rating { display: none; }

/* WooCommerce's own stylesheet targets `.woocommerce ul.products li.product …`
   — three classes, which outranks the two-class rules above on shop and
   category pages, where the body carries the `woocommerce` class. The homepage
   has no such class, so cards rendered there looked different (price dropped to
   0.857em = 12px). These twins restore parity; keep them in step with the rules
   above if those change. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  padding: 14px 15px 0;
  margin: 0 0 var(--s2);
}
.woocommerce ul.products li.product .price {
  font-size: 17px;
  font-weight: 900;
  color: var(--ink);
  padding-inline: 15px;
}
.woocommerce ul.products li.product .button { font-size: 13px; }

/* --- Locked card rows -----------------------------------------------------
   Every row of a card reserves its space whether or not it is filled, so the
   price and the Add-to-basket button land at the same height in every card of
   a row. Without this a four-line title pushes everything below it down and
   the grid reads as ragged.

   Each block carries both the bare and the `.woocommerce`-prefixed selector so
   it applies identically on the homepage and on shop/category pages — see the
   note above about WooCommerce's three-class rules outranking the theme's.

   Heights are in `em`, so they follow the font-size drop at the mobile
   breakpoint without a second set of numbers. `box-sizing` is border-box
   globally, hence the `+ 14px` for the title's own top padding. */

ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* Three lines. The type is small enough that "… IVG Smart Max Vape Kit" still
     fits — which matters, because "Pod Kit" and "Pods" are different products
     at different prices and two adjacent cards must not read identically. */
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  padding: 14px 15px 0;
  min-height: calc(1.35em * 3 + 14px);
  margin: 0 0 var(--s2);
}

/* Single line, always. A wrapped "No reviews yet" was making this row twice as
   tall on the cards where it did not fit. */
.product__rating {
  height: 18px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.product__stars { flex: none; }
.product__rating-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The spec cells and the detail line below them both reserve their height, so
   a product missing an attribute still lines up with one that has all of them.
   The clamp on .product__desc lives with its own rule further up. */
.product__specs { min-height: 35px; }



/* --- Remaining sections, 2026 design -------------------------------------
   Section padding, headings, compare table, FAQ, guide cards and the search
   chips, mapped onto the theme's existing classes so nothing needed remarking
   up. Greens are the AA-corrected values throughout; the design's #0d8f68 and
   #8ba79b both fall below 4.5:1 on the backgrounds they sit on.
   ---------------------------------------------------------------------- */
.section { padding: clamp(48px, 6vw, 84px) 0; }
.section__title { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.025em; color: #04241f; }

/* Compare table: its own card, scrolling inside itself. */
#compare-ranges .table-scroll {
  overflow-x: auto;
  background: #fff;
  border: 1px solid #e6ece9;
  border-radius: 14px;
  margin: 0;
}
#compare-ranges table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 860px; background: #fff; }
#compare-ranges thead tr { background: #f7faf8; }
#compare-ranges th {
  text-align: left; padding: 14px 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #04241f; border-bottom: 1px solid #e6ece9; white-space: nowrap;
}
#compare-ranges td { padding: 14px 16px; border-bottom: 1px solid #f0f4f2; color: #375248; }
/* The design reads left-to-right across all seven columns. The generic content-table
   rule right-aligns every cell after the first and switches on tabular numerals,
   which is right for a figures table and wrong for this one. */
#compare-ranges td,
#compare-ranges th { text-align: left; vertical-align: top; font-variant-numeric: normal; }
/* Row headers are range names at the table's own 14px, not small-caps labels. */
#compare-ranges tbody th[scope="row"] {
  font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: #04241f; white-space: normal;
}
/* The section sits in .entry__content, whose h2 rule (0,1,1) outranked the design's
   .section__title (0,1,0) and held the heading at a flat 22px. */
#compare-ranges .section__title {
  font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.025em; margin: 0 0 16px;
}
#compare-ranges .container > p:first-of-type {
  font-size: 17px; line-height: 1.6; color: #4c635c; max-width: 78ch; margin: 0 0 28px;
}
#compare-ranges tbody tr:last-child td { border-bottom: none; }
#compare-ranges .compare__note { margin-top: 14px; font-size: 13px; color: #627670; }

/* About: a narrow measure, the design's 820px. */
#about-ivg .container { width: min(820px, 100%); }
#about-ivg p { font-size: 17px; line-height: 1.7; color: #375248; }

/* FAQ: each question its own card. */
/* --------------------------------------------------------------------------
   Prose sections (About IVG, range explainers).

   These were never ported: the copy was still running at the theme's 14px body
   size against the design's 17px, which is what made the whitespace around
   them read as a void. The design also uses a smaller section title here than
   in the product sections, and 21px sub-heads.
   -------------------------------------------------------------------------- */
.prose-v2 p { font-size: 17px; line-height: 1.7; color: #375248; margin: 0 0 18px; }
.prose-v2 > h2:first-child,
#about-ivg .section__title {
  font-family: var(--font-head);
  font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.025em;
  color: #04241f; margin: 0 0 18px;
}
.prose-v2 > h2:not(:first-child) {
  font-family: var(--font-head);
  font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: #04241f;
  margin: 28px 0 14px;
}
.prose-v2 > p:last-child { margin-bottom: 0; }
/* The design closes this section with a bordered notice rather than a bare
   paragraph. It is what stops the copy trailing off into the gap above the FAQ. */
.prose-v2--notice > p:last-child {
  margin: 0;
  padding: 16px 18px;
  border-left: 3px solid #2FE3A8;
  background: #fff;
  font-size: 15px; line-height: 1.65; color: #4c635c;
}
/* The design gives this section the smallest of its three title sizes. */
#most-searched .section__title { font-size: clamp(22px, 2.4vw, 28px); }

.faq { display: flex; flex-direction: column; gap: 10px; }
.faq__title { margin: 0 0 24px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.025em; color: #04241f; }
.faq__item { border: 1px solid #e6ece9; border-radius: 12px; background: #fff; padding: 0; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; cursor: pointer;
  font-size: 16px; font-weight: 700; color: #04241f;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; color: #2FE3A8; font-size: 20px; font-weight: 800; flex: none; }
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__a p { margin: 0; padding: 0 18px 18px; font-size: 15px; line-height: 1.7; color: #4c635c; }

/* Guide cards. */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.post-card { border: 1px solid #e6ece9; border-radius: 14px; background: #fff; overflow: hidden; }
.post-card:hover { border-color: #cfe0da; }
.post-card__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.post-card__date { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #627670; }
.post-card__title { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 800; letter-spacing: -.02em; }
.post-card__title a { color: #04241f; }
.post-card__title a:hover { color: #0c7e5c; }
.post-card__body { flex: 1 1 auto; }
.post-card { display: flex; flex-direction: column; }
.post-card__cta {
  margin-top: auto;
  font-size: 14px; font-weight: 700;
  color: #0c7e5c; text-decoration: none;
}
.post-card:hover .post-card__cta { color: #04241f; }

/* Most-searched chips. */
.most-searched { display: flex; flex-wrap: wrap; gap: 10px; }
.most-searched a {
  padding: 9px 15px;
  border: 1px solid #e6ece9;
  border-radius: 999px;
  background: #fff;
  color: #375248;
  font-size: 14px; font-weight: 600;
  text-decoration: none;
}
.most-searched a:hover { border-color: #2FE3A8; color: #04241f; }

/* --- Hover states, 2026 design -------------------------------------------
   The handoff carries these as data-hover-style attributes because an inline
   style cannot express :hover — 163 of them, which collapse to the nine
   distinct declarations below once deduplicated.

   Greens are the AA-corrected values, not the design's literals: its #0d8f68
   is 4.08:1 on white and fails AA for text. #2FE3A8 stays as-is because it is
   only ever used on the ink footer, where it reads at 11:1.
   ---------------------------------------------------------------------- */

/* 51x  <a> color: #0d8f68  — nav, section links, in-copy links, "Shop now" */
.site-nav a:hover,
.section__link:hover,
.cat-tile-v2:hover .cat-tile-v2__cta,
.entry__content a:hover { color: #0c7e5c; }

/* 36x  <a> background: #0d8f68 — solid buttons in the loop and sections */
ul.products li.product .button:hover,
.btn--accent:hover { background: #0c7e5c; color: #fff; }

/* 21x  <a> color: #2FE3A8 — footer links, which sit on the ink panel */
.site-footer a:hover { color: #2FE3A8; }

/* 6x   border-color: #2FE3A8 — category tiles (already set on .cat-tile-v2) */
/* 6x   border-color: #2FE3A8; color: #04241f — ghost buttons */
.btn--outline:hover { border-color: #2FE3A8; color: #04241f; }

/* 1x   <button> background: #04241f — the header search submit */
.search-form button:hover,
.site-header form button:hover { background: #04241f; color: #fff; }

/* --- Product card, 2026 design ------------------------------------------
   Applied to the WooCommerce loop classes rather than to anything home-page
   specific, so the shop, every category archive and the home page get the same
   card. Values are the design's own.

   Heights are reserved rather than left to content — 190px image well, 61px
   title, 26px price row, 24px spec row, 37px description — so cards in a row
   line up even when one title runs to three lines and its neighbour to one.
   ---------------------------------------------------------------------- */
ul.products li.product {
  display: flex;
  flex-direction: column;
  border: 1px solid #e6ece9;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: none;
}
ul.products li.product:hover,
ul.products li.product:focus-within { border-color: #cfe0da; box-shadow: none; }

ul.products li.product .product__media {
  position: relative;
  display: block;
  background: #F5F8F6;
  padding: 18px;
}
ul.products li.product .product__media img,
ul.products li.product img.attachment-woocommerce_thumbnail {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: contain;
  transform: none;
}
ul.products li.product:hover .product__media img { transform: none; }

ul.products li.product .product__badges {
  position: absolute; left: 12px; right: 12px; top: 12px;
  display: flex; justify-content: space-between; gap: 8px;
}
ul.products li.product .badge {
  padding: 4px 9px; border-radius: 6px;
  background: #04241f; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
}

/* Card body: one padded column, CTA pinned to the foot. */
ul.products li.product > a { padding: 0; display: block; color: inherit; }
ul.products li.product .woocommerce-loop-product__title {
  padding: 16px 16px 0;
  margin: 0;
  font-size: 15px; font-weight: 700; line-height: 1.35;
  color: #04241f;
  height: 61px; overflow: hidden;
}
ul.products li.product .price-row,
.woocommerce ul.products li.product .price-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  min-height: 26px;
  padding: 10px 16px 0;
  margin: 0;
}
ul.products li.product .price-row .price { font-size: 18px; font-weight: 800; color: #04241f; }
ul.products li.product .deal-strip {
  padding: 3px 8px; border-radius: 6px;
  background: #E4F7EF; color: #0c7e5c;
  font-size: 12px; font-weight: 700;
}
ul.products li.product .product__specs {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 24px;
  padding: 10px 16px 0;
}
ul.products li.product .product__spec {
  padding: 3px 8px; border-radius: 6px;
  background: #f2f6f4; color: #59776c;
  font-size: 12px; font-weight: 600;
}
ul.products li.product .product__desc {
  margin: 0;
  padding: 10px 16px 0;
  font-size: 13px; line-height: 1.4; color: #5f7d71;
  min-height: 37px;
}
ul.products li.product .product__foot { padding: 16px; margin-top: auto; }
ul.products li.product .product__foot .button,
ul.products li.product .button {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 44px;
  border-radius: 8px;
  background: #04241f; color: #fff;
  font-size: 14px; font-weight: 700;
}
ul.products li.product .button:hover { background: #0a3b31; color: #fff; }

/* ==========================================================================
   10. Tabs (home product tabs)
   ========================================================================== */
/* Tabs. The design uses free-standing pills on the page background, left
   aligned under the heading — not the dark bar the theme shipped with.
   Values are the design's own: 44px tall, fully rounded, dark fill for the
   selected tab and a hairline outline for the rest. */
.tabs-bar { background: none; border-radius: 0; margin-bottom: 28px; }
.tabs-bar ul {
  display: flex; flex-wrap: wrap; justify-content: flex-start;
  gap: 8px; list-style: none; margin: 0; padding: 0;
}
.tabs-bar button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  height: 44px;
  padding: 0 20px;
  border: 1px solid #e6ece9;
  border-radius: 999px;
  background: #fff;
  color: #375248;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tabs-bar button:hover { border-color: #cfe0da; color: #04241f; }
.tabs-bar button[aria-selected="true"] { background: #04241f; border-color: #04241f; color: #fff; }
.tabs-bar button[aria-selected="true"]:hover { background: #0d8f68; border-color: #0d8f68; color: #fff; }
.tab-panel[hidden] { display: none; }

/* ==========================================================================
   11. Single product
   ========================================================================== */
.woocommerce div.product { margin-top: 0; }
/* WooCommerce always prints this wrapper, even with nothing in it. */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce div.product .product_title { font-size: 28px; margin-bottom: 10px; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { font-size: clamp(24px, 1.3rem + 1.2vw, 30px); font-weight: 900; color: var(--ink); font-family: var(--font-body); }
.woocommerce div.product .woocommerce-product-rating { margin-bottom: 12px; }
.woocommerce div.product form.cart { margin: 20px 0; }
.woocommerce div.product form.cart .button { font-size: 16px; padding: 14px 28px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0; margin: 0 0 18px; border-bottom: 2px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase; font-size: 14px;
  color: var(--muted); padding: 11px 16px; display: block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand); }

.stock.in-stock { color: #147a45; font-weight: 600; }
.stock.out-of-stock { color: var(--sale); font-weight: 600; }

/* compliance notice on PDP */
.nicotine-notice {
  border: 1px solid var(--line);
  border-left: 4px solid var(--sale);
  background: var(--bg-soft);
  padding: 12px 14px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  margin: 16px 0;
}

/* ==========================================================================
   12. Shop layout / breadcrumbs / pagination
   ========================================================================== */
.shop-head { padding: var(--s2) 0 var(--s3); }

/* Deep product paths ("Home / IVG Pro / IVG Pro Refill Pods / Fizzy Cherry…")
   wrap to two or three lines on a phone. Keep it on one line and let it scroll
   sideways instead, with the tail faded to signal there is more. */
.woocommerce-breadcrumb,
.breadcrumb {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
  white-space: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.woocommerce-breadcrumb::-webkit-scrollbar,
.breadcrumb::-webkit-scrollbar { display: none; }
.woocommerce-breadcrumb a,
.breadcrumb a { color: var(--muted); }
.woocommerce-breadcrumb a:hover,
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb { margin-bottom: 14px; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Nothing overflows at desktop widths, so drop the fade there. */
@media (min-width: 901px) {
  .woocommerce-breadcrumb,
  .breadcrumb { -webkit-mask-image: none; mask-image: none; }
}

.woocommerce .woocommerce-result-count { color: var(--muted); font-size: 13px; }
.woocommerce .woocommerce-ordering select { width: auto; }

/* Pagination.

   One rule set for both paginations on the site: WooCommerce's (shop and
   category archives) and WordPress core's (guides, blog). Core's had no
   styling at all, which is why the guides archive was printing a bare
   "1 2 Next" as body text.

   The vocabulary is the tab pills': 44px tall, fully rounded, hairline
   outline, dark fill on the current page. Same target size as every other
   control on the site, and comfortably over the 24px minimum for touch. */
nav.navigation .nav-links,
.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 0;
  margin: 40px 0 0;
  padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }

nav.navigation .nav-links .page-numbers,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #e6ece9;
  border-radius: 999px;
  background: #fff;
  color: #375248;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
nav.navigation .nav-links a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: #cfe0da;
  color: #04241f;
}
nav.navigation .nav-links .page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #04241f;
  border-color: #04241f;
  color: #fff;
}
/* The ellipsis is a label, not a control — no box around it. */
nav.navigation .nav-links .page-numbers.dots,
.woocommerce nav.woocommerce-pagination ul li span.dots {
  border-color: transparent;
  background: none;
  min-width: 0;
  padding: 0 4px;
  color: #8ba79b;
}
/* Prev/next read as directions, so they carry the arrow the rest of the site
   uses and sit slightly wider than the numbered pills. */
nav.navigation .nav-links .prev,
nav.navigation .nav-links .next,
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next { padding: 0 18px; gap: 8px; }
nav.navigation .nav-links .prev::before,
.woocommerce nav.woocommerce-pagination ul li a.prev::before { content: "\2190"; }
nav.navigation .nav-links .next::after,
.woocommerce nav.woocommerce-pagination ul li a.next::after { content: "\2192"; }

/* Block-only: these elements also carry .container, whose padding-inline
   supplies the page gutter. A `padding` shorthand here would wipe it and
   drop content flush against the screen edge. */
.content-area { padding-block: var(--s3) var(--s7); }
.layout-sidebar { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.widget { margin-bottom: 26px; }
.widget-title { font-family: var(--font-head); font-size: 16px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.widget li a { color: var(--body); }
.widget li a:hover { color: var(--brand); }

/* messages */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: 0; border-left: 4px solid var(--brand);
  background: var(--bg-soft); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 18px;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-error { border-left-color: var(--sale); }

/* ==========================================================================
   13. Entry / blog
   ========================================================================== */
.entry { margin-bottom: 40px; }
.entry__title { font-size: 26px; margin-bottom: 6px; }
.entry__meta { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.entry__content h2 { font-size: 22px; margin-top: 1.4em; }
.entry__content h3 { font-size: 18px; margin-top: 1.3em; }
.entry__content img { border-radius: var(--radius); }

/* Only the banner rule survives from the theme's original guide card. The rest
   of that block sat after the ported one at equal specificity and was quietly
   winning — 14px body padding, 17px titles, a 260px grid and a hover shadow,
   none of which are in the design. */
.post-card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; display: block; }
/* Guide banner at the head of a post. Rounded to match every other card and
   panel on the site; the theme's radius does not otherwise reach it because it
   sits outside .entry__content. */
.entry__banner {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 14px;
  margin: 0 0 24px;
}

/* The theme's original FAQ accordion lived here. Every one of its selectors
   was a descendant pair (.faq summary), so it outranked the ported .faq__q
   block above on specificity no matter which came first — that is what put
   the rule above the heading and the dark "+" out at the right edge. The
   design's card accordion is the one in section 13; this is gone. */

/* ==========================================================================
   15. Footer
   ========================================================================== */
/* Footer, ported from the design. Values are the design's own: #04241f ground,
   #b3c8c1 text, mint links on hover. The statutory block sits at 12-13px in
   #8ea79f rather than the 11.5px at 50% white it used to be — it has to be
   legible, and the design sizes it that way. */
.site-footer {
  background: #04241f;
  color: #b3c8c1;
  margin-top: 40px;
  padding: clamp(44px, 5vw, 72px) 0 0;
}
.footer-top { padding: 0 0 0; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h3 {
  font-family: var(--font-head);
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; margin: 0;
}
/* The brand column's heading is the site name, not a section label: the design
   sets it larger and leaves it in sentence case. */
.footer-col:first-child h3 {
  font-size: 16px; font-weight: 800; letter-spacing: -.01em; text-transform: none;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col li { margin: 0; font-size: 14px; }
.footer-col a { color: #b3c8c1; text-decoration: none; font-size: 14px; }
.footer-col a:hover { color: #2FE3A8; }
.footer-col p { margin: 0; font-size: 14px; line-height: 1.7; }

.footer-warning {
  margin: 36px 0 0;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  color: #fff;
  font-size: 14px; font-weight: 700;
  text-align: center;
}
.footer-bottom {
  margin-top: 28px;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px;
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
}
.payment-icons { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.payment-icons span {
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: none;
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: #b3c8c1;
}

.footer-legal { padding: 0; border-top: 0; }
.footer-legal p { margin: 0; padding-bottom: 10px; font-size: 12px; line-height: 1.7; color: #8ea79f; max-width: none; }
.footer-legal p:last-child { padding-bottom: 32px; }
/* The contact line is the one people act on, so the design gives it the larger
   size, the body colour rather than the muted grey, and mint links. */
.footer-legal .footer-contact { padding-bottom: 12px; font-size: 13px; color: #b3c8c1; }
.footer-legal .footer-contact a { color: #2FE3A8; }

/* ==========================================================================
   16. Age gate
   ========================================================================== */
.age-gate {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(6,12,16,.88);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.age-gate[hidden] { display: none; }
.age-gate__box {
  background: var(--white);
  border-radius: 8px;
  max-width: 480px; width: 100%;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.age-gate__logo { display: flex; justify-content: center; margin-bottom: var(--s4); }
.age-gate__box h2 { font-size: 26px; margin-bottom: 10px; }
.age-gate__box p { color: var(--body); margin-bottom: 20px; }
.age-gate__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.age-gate__deny { background: var(--bg-soft); color: var(--body); }
.age-gate__deny:hover { background: #ececec; color: var(--body); }
.age-gate__small { font-size: 12px; color: var(--muted); margin: 18px 0 0; }
body.age-locked { overflow: hidden; }

/* ==========================================================================
   16a. Checkout age declaration
   ========================================================================== */
.age-declaration {
  margin: var(--s4) 0 var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
}
.age-declaration label { display: flex; align-items: flex-start; gap: var(--s2); font-weight: 600; cursor: pointer; }
.age-declaration input[type="checkbox"] { width: auto; margin-top: 3px; flex: 0 0 auto; }
.age-declaration__note { font-size: 12.5px; color: var(--muted); margin: 0 0 var(--s4); }

/* ==========================================================================
   16b. USP bar — the four things a first-time vape buyer checks before trusting a shop
   ========================================================================== */
/* USP bar: the design's single free-scrolling row and type scale, on the
   theme's white ground and with the theme's icons kept. The theme's
   mobile rotator (dots + 8s auto-advance) is not in the design and is now
   dormant in theme.js. */
.usp-bar { background: var(--white); border-top: 0; border-bottom: 1px solid var(--line); }
.usp-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(14px, 2vw, 28px);
  padding: 14px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.usp-grid::-webkit-scrollbar { display: none; }
.usp {
  display: flex;
  gap: var(--s3);
  align-items: center;
  flex: 1 1 auto;
  min-width: max-content;
}
.usp__icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0,201,167,.14);
  color: var(--teal-deep);
}
.usp__icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.usp > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.usp__title {
  font-family: var(--font-head);
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 700;
  color: #04241f;
  white-space: nowrap;
  margin: 0;
  line-height: 1.25;
}
.usp__sub {
  font-size: clamp(10px, .95vw, 13px);
  color: #6c837b;
  white-space: nowrap;
  margin: 0;
  line-height: 1.35;
}
.usp-dots { display: none; }

/* ==========================================================================
   16c. Page header + shop toolbar
   ========================================================================== */
.page-head { padding: var(--s6) 0 var(--s5); }
.page-head__title { margin: 0 0 var(--s2); }
/* Fallback intro, used where no hand-written lead exists — same treatment. */
.page-head__intro { max-width: none; color: var(--body); font-size: 15px; margin: 0; }

.shop-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s5);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.shop-toolbar .woocommerce-result-count { margin: 0; font-size: 13px; }
.shop-toolbar .woocommerce-ordering { margin: 0; }
.shop-toolbar select { padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; }

/* SEO copy belongs below the grid: shoppers want products first,
   and Google reads the whole document either way. */
.category-copy {
  margin-top: var(--s7);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}
.category-copy h2 { font-size: 21px; }
/* Prose here fills the container rather than sitting at a 78ch measure.
   The heading, the product grid and the pod table are all container-width, and
   a 546px paragraph under a 1192px heading read as a mistake rather than as a
   deliberate text column. Owner's call, made knowing the trade: a full-width
   line here runs to roughly 150 characters, against the 45-75 that is
   comfortable to read, so line-height is opened up slightly to compensate —
   longer lines need more leading for the eye to find the next one. */
.category-copy p { max-width: none; color: var(--body); line-height: 1.75; }

/* ==========================================================================
   16d. Single product
   ========================================================================== */
.woocommerce div.product { display: block; }
/* Gallery: cap the height so a portrait pack shot cannot dominate a desktop
   screen, and inset the image so it breathes inside its frame. */
.woocommerce div.product div.images {
  margin-bottom: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #F7F9F8 0%, #EDF2F1 100%);
  padding: var(--s5);
  overflow: hidden;
}
.woocommerce div.product div.images img {
  border: 0;
  border-radius: 0;
  background: transparent;
  width: 100%;
  max-height: 460px;
  object-fit: contain;
  margin: 0 auto;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper { margin: 0; }
/* The zoom clone is absolutely positioned at natural size — keep it contained. */
.woocommerce div.product div.images img.zoomImg { display: none !important; }
.woocommerce div.product .flex-control-thumbs { margin-top: var(--s4); gap: var(--s2); display: flex; padding: 0; }
.woocommerce div.product .flex-control-thumbs li { width: auto; flex: 0 0 72px; margin: 0; }
.woocommerce div.product .flex-control-thumbs img { border-radius: 10px; border: 1px solid var(--line); background: var(--white); }
.woocommerce div.product div.summary { margin-bottom: var(--s5); }
.woocommerce div.product .product_title {
  margin-bottom: var(--s2);
  font-size: clamp(24px, 1.4rem + 1.6vw, 32px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
}
/* Range eyebrow above the product title. */
.pdp-eyebrow {
  margin: 0 0 var(--s2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.pdp-stock { font-size: 13px; font-weight: 600; color: var(--teal-deep); margin: 0 0 var(--s4); }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  display: block;
  padding-bottom: var(--s3);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 15px;
  color: var(--body);
  margin-bottom: var(--s4);
}
.woocommerce div.product form.cart div.quantity { margin-right: var(--s2); }
.woocommerce div.product form.cart .qty { height: 48px; width: 72px; text-align: center; border-radius: var(--radius); }
.woocommerce div.product form.cart .button { height: 48px; }
/* --- Variation picker ------------------------------------------------------
   WooCommerce renders the attribute chooser as a <table>, which puts the label
   in a narrow left column and squeezes the select beside it. Everything is
   unwound to blocks so the label sits above a full-width control, matching the
   rest of the buy box.

   `table-layout` and the cell displays have to be overridden individually —
   collapsing the table alone leaves the row and cells in table flow. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  text-align: left;
}
.woocommerce div.product form.cart table.variations { margin: 0 0 var(--s4); }
.woocommerce div.product form.cart table.variations tr + tr { margin-top: var(--s4); }

.woocommerce div.product form.cart table.variations th.label label,
.woocommerce div.product .flavour-switch__label {
  display: block;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s2);
}

.woocommerce div.product form.cart table.variations td.value { position: relative; }

.woocommerce div.product form.cart table.variations select,
.woocommerce div.product .flavour-switch__select {
  width: 100%;
  height: 48px;
  padding: 0 40px 0 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  /* Native arrow is inconsistent across platforms; draw our own. */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151A1F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 17px;
  cursor: pointer;
}
.woocommerce div.product form.cart table.variations select:focus-visible,
.woocommerce div.product .flavour-switch__select:focus-visible {
  outline: 2px solid var(--teal-deep);
  outline-offset: 1px;
}

/* WooCommerce keeps this hidden until a selection exists, then reveals it. */
.woocommerce div.product form.cart .reset_variations {
  display: inline-block;
  margin-top: var(--s2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
}
.woocommerce div.product form.cart .reset_variations:hover { color: var(--ink); }

.woocommerce div.product form.cart .single_variation_wrap { display: block; width: 100%; }
.woocommerce div.product form.cart .woocommerce-variation-price {
  margin-bottom: var(--s3);
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
}
.woocommerce div.product form.cart .woocommerce-variation-availability { margin-bottom: var(--s2); font-size: 13.5px; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch;
}

/* Reassurance directly under the buy button, where hesitation happens. */
.pdp-assurance { list-style: none; margin: var(--s4) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--line); }
.pdp-assurance li {
  display: flex; align-items: flex-start; gap: var(--s2);
  font-size: 13.5px; color: var(--body);
  padding: var(--s1) 0;
}
.pdp-assurance li::before {
  content: "";
  flex: 0 0 auto;
  width: 16px; height: 16px; margin-top: 3px;
  border-radius: 50%;
  background: rgba(20,122,69,.12);
  box-shadow: inset 0 0 0 1.5px rgba(20,122,69,.5);
}

/* ==========================================================================
   16e. Shop sidebar filters
   ========================================================================== */
.shop-sidebar .widget {
  padding: var(--s4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--s4);
}
.shop-sidebar .widget-title { margin-top: 0; font-size: 14px; }
.shop-sidebar li { border-bottom: 0; padding: 3px 0; }
.shop-sidebar .widget li a:hover { color: var(--brand); }
.shop-sidebar .count { color: var(--muted); font-size: 12px; }

/* ==========================================================================
   16f. Cart & checkout (WooCommerce block templates)

   These pages are block-rendered, so the markup is WooCommerce's and only the
   presentation is ours. Class names below are the stable wc-block-* API.
   ========================================================================== */
.wc-block-cart,
.wc-block-checkout { font-family: var(--font-body); color: var(--body); }

/* Page headings — the spec sets these bigger and heavier than a normal h1. */
.woocommerce-cart .page-head__title,
.woocommerce-checkout .page-head__title,
.woocommerce-cart .entry__title,
.woocommerce-checkout .entry__title {
  font-size: clamp(26px, 1.5rem + 1.6vw, 34px);
  font-weight: 900;
  letter-spacing: -.02em;
}

/* Two-column: line items beside a sticky summary panel. */
@media (min-width: 901px) {
  .wc-block-cart__sidebar,
  .wc-block-checkout__sidebar { position: sticky; top: var(--s5); align-self: start; }
}

/* --- summary / totals panel --- */
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--s5);
}
.wc-block-cart__totals-title,
.wc-block-components-totals-wrapper .wc-block-components-title {
  font-family: var(--font-head);
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.wc-block-components-totals-item__label { font-size: 14px; }
.wc-block-components-totals-item__value { font-weight: 700; color: var(--ink); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 16px; font-weight: 800; color: var(--ink);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 24px; font-weight: 900; color: var(--ink);
}

/* --- line items --- */
.wc-block-cart-items__header {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.wc-block-cart-items__row { border-bottom: 1px solid var(--line); }
.wc-block-cart-item__image img {
  border-radius: 10px;
  background: linear-gradient(160deg, #F7F9F8 0%, #EDF2F1 100%);
}
.wc-block-components-product-name {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.wc-block-components-product-name:hover { color: var(--teal-deep); }
.wc-block-cart-item__remove-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
}
.wc-block-cart-item__remove-link:hover { color: var(--sale); }
.wc-block-components-product-price__value { font-weight: 800; color: var(--ink); }

.wc-block-components-quantity-selector {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--white);
}
.wc-block-components-quantity-selector__input { font-weight: 700; color: var(--ink); }
.wc-block-components-quantity-selector__button { color: var(--muted); }
.wc-block-components-quantity-selector__button:hover { color: var(--ink); }

/* --- primary actions: teal, matching the product page --- */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--teal) !important;
  color: var(--ink-soft) !important;
  font-family: var(--font-head);
  font-size: 15px !important;
  font-weight: 800 !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 16px 28px !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { background: #23E0BF !important; }

/* --- checkout steps: number them per the spec --- */
.wc-block-checkout__form { counter-reset: ivg-step; }
.wc-block-checkout__form > .wc-block-components-checkout-step { counter-increment: ivg-step; }
.wc-block-components-checkout-step__title {
  font-family: var(--font-head) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  color: var(--ink) !important;
}
/* Only the form steps are numbered — the order summary is not a step. */
.wc-block-components-checkout-step__title::before { content: none; }
.wc-block-checkout__form > .wc-block-components-checkout-step .wc-block-components-checkout-step__title::before {
  content: counter(ivg-step) " — ";
  color: var(--teal-deep);
}
/* WooCommerce prints its own numbered marker; ours replaces it. */
.wc-block-components-checkout-step__heading-content,
.wc-block-components-checkout-step__index { display: none !important; }
.wc-block-components-checkout-step__description { font-size: 13px; color: var(--muted); }

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container {
  border-radius: 10px !important;
  border-color: var(--line-strong) !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus { border-color: var(--teal-deep) !important; }

.wc-block-components-order-summary__button-text { font-weight: 700; color: var(--ink); }
.wc-block-components-panel__button { font-weight: 700; color: var(--ink); }

/* Continue-shopping link */
.wc-block-cart__submit-container + a,
.wc-block-components-checkout-return-to-cart-button {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--teal-deep);
}

/* ==========================================================================
   16g. Predictive search
   ========================================================================== */
.header-search { position: relative; }

.live-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 700;
  max-height: min(70vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: var(--s2);
}
.live-results[hidden] { display: none; }

.live-result {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2);
  border-radius: 10px;
  color: var(--ink);
}
.live-result:hover,
.live-result:focus,
.live-result.is-active { background: var(--mist); color: var(--ink); }
.live-result img {
  flex: 0 0 46px;
  width: 46px; height: 46px;
  object-fit: contain;
  border-radius: 8px;
  background: linear-gradient(160deg, #F7F9F8 0%, #EDF2F1 100%);
}
.live-result__body { min-width: 0; }
.live-result__name {
  display: block;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Suggestion panel shown before anything is typed. */
.live-results__label {
  display: block;
  padding: 12px 14px 6px;
  font-family: var(--font-head);
  font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: #8ba79b;
}
.live-results__label:first-child { padding-top: 14px; }
.live-suggest__links {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 2px 14px 12px;
  border-bottom: 1px solid #eef3f0;
}
.live-suggest__link {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 14px;
  border: 1px solid #e6ece9; border-radius: 999px;
  background: #fff;
  font-family: var(--font-head);
  font-size: 13px; font-weight: 700; color: #375248;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.live-suggest__link:hover,
.live-suggest__link.is-active { background: #04241f; border-color: #04241f; color: #fff; }

.live-result__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.live-result__price { font-size: 12.5px; font-weight: 800; color: var(--teal-deep); }
/* Same pill as the product card's .deal-strip, one size down for the dropdown. */
.live-result__deal {
  padding: 2px 7px;
  border-radius: 6px;
  background: #E4F7EF;
  color: #0c7e5c;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.live-results__state,
.live-results__all {
  display: block;
  padding: var(--s3);
  font-size: 13px;
  text-align: center;
  color: var(--muted);
}
.live-results__all { font-weight: 700; color: var(--teal-deep); border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  /* Search becomes its own full-width row beneath the logo. */
  .header-main__inner { flex-wrap: wrap; row-gap: var(--s3); }
  .header-search {
    display: block;
    order: 5;
    flex: 1 0 100%;
    max-width: none;
    margin: 0;
  }
  .header-search form { padding: 5px 6px 5px 14px; }
}

/* ==========================================================================
   17. Account, forms and order tables

   None of this had any styling: My Account, the login form, the orders table
   and the address blocks were all rendering as raw WooCommerce markup — a
   bulleted list for navigation and unstyled inputs. Everything here is written
   against WooCommerce's own class names rather than template overrides, so it
   survives plugin updates.
   ========================================================================== */

/* --- Shared form controls ------------------------------------------------- */
.woocommerce form .form-row { display: block; margin: 0 0 var(--s4); }
.woocommerce form .form-row label,
.woocommerce-EditAccountForm label,
.woocommerce-address-fields label {
  display: block;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s2);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.woocommerce form .form-row textarea { height: auto; padding: 12px 14px; min-height: 110px; }
.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce select:focus-visible,
.woocommerce input:focus-visible {
  outline: 2px solid var(--teal-deep);
  outline-offset: 1px;
}
/* Checkbox rows must not inherit the block label treatment. */
.woocommerce form .form-row.woocommerce-form-login__rememberme,
.woocommerce label.woocommerce-form__label-for-checkbox {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 14px; font-weight: 500; text-transform: none;
  letter-spacing: 0; color: var(--body);
}
.woocommerce label.woocommerce-form__label-for-checkbox input { width: auto; height: auto; }
.woocommerce .required { color: var(--sale); border: 0; }

/* --- Login / register ----------------------------------------------------- */
.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-notices-wrapper + form.login,
.woocommerce form.login,
.woocommerce form.register {
  max-width: 460px;
  margin-inline: auto;
  padding: var(--s6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.woocommerce form.login .button,
.woocommerce form.register .button { width: 100%; height: 48px; }
.woocommerce .lost_password { margin-top: var(--s3); font-size: 13.5px; }

/* --- My Account: sidebar + content ---------------------------------------- */
/* The theme's original account layout was a 232px + 1fr grid on .woocommerce,
   with a <ul> sidebar. The design port replaces both: .hv-acct owns the columns
   and navigation.php emits plain <a>s, so the ul rules here were dead code.

   The grid was worse than dead — it made .hv-acct a grid item in a 232px track,
   so `margin-inline: calc(50% - 50vw)` resolved 50% against 116px and the
   full-bleed break-out landed 270px off to the left. */
.woocommerce-account .woocommerce { display: block; }
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after,
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:empty { content: none; display: none; }

/* WooCommerce still ships float + width:30%/68% on these two. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  width: auto;
  float: none;
}

.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > p:first-of-type { margin-top: 0; }

/* --- Orders table --------------------------------------------------------- */
.woocommerce table.shop_table,
.woocommerce table.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  font-size: 14.5px;
}
.woocommerce table.shop_table th {
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 13px 15px;
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}
.woocommerce table.shop_table td {
  padding: 15px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce table.shop_table .button { padding: 8px 14px; font-size: 13px; }

/* --- Addresses ------------------------------------------------------------ */
.woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.woocommerce-Address {
  padding: var(--s5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.woocommerce-Address-title h2, .woocommerce-Address-title h3 { margin: 0; font-size: 17px; }
.woocommerce-Address address { font-style: normal; margin: var(--s3) 0 0; line-height: 1.65; color: var(--body); }

/* --- Notices -------------------------------------------------------------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  margin: 0 0 var(--s5);
  padding: 14px 16px;
  border-radius: var(--radius);
  border-left: 3px solid var(--teal-deep);
  background: var(--mist);
  font-size: 14.5px;
  list-style: none;
}
.woocommerce-error { border-left-color: var(--sale); }

/* --- Cookie consent bar ---------------------------------------------------
   Sits above the age gate in the stacking order only when the gate is absent;
   the gate uses z-index 99999, so this stays just below it and the visitor
   answers the age question first. */
.cookie-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9998;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--ink);
  color: rgba(255,255,255,.9);
  box-shadow: 0 -4px 24px rgba(12,17,23,.18);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 72ch;
}
.cookie-bar__text a { color: var(--teal); text-decoration: underline; }
.cookie-bar__actions { display: flex; gap: var(--s2); flex-shrink: 0; }
.cookie-bar__actions .btn { padding: 10px 18px; font-size: 13.5px; }
/* Refusing must be no harder than accepting — same size, same prominence. */
.cookie-bar__actions .btn--ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
}
.cookie-bar__actions .btn--ghost:hover { background: rgba(255,255,255,.1); }

@media (max-width: 700px) {
  .cookie-bar { flex-direction: column; align-items: stretch; padding: var(--s4); }
  .cookie-bar__actions .btn { flex: 1; }
}

/* --- Flavour index --------------------------------------------------------
   A reference table people scan, not prose they read: the flavour name and its
   tasting note lead, the buy links sit right so the eye can run down either
   column independently. */

/* Contextual pointer from a category page to its flavour guide. */
.flav-cta {
  margin: 0 0 var(--s5);
  padding: 12px 15px;
  background: rgba(0, 201, 167, .09);
  border-left: 3px solid var(--teal-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
}
.flav-cta a { font-weight: 700; color: var(--ink); }
.flav-cta a:hover { color: var(--teal-deep); }

.flav__jump {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  padding-bottom: var(--s5); border-bottom: 1px solid var(--line);
}
.flav__jump a {
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 13.5px; font-weight: 600; color: var(--body); text-decoration: none;
}
.flav__jump a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.flav { display: flex; flex-direction: column; gap: var(--s4); scroll-margin-top: 90px; }
.flav__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
.flav__title { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.flav__count { margin: 0; font-size: 13.5px; color: var(--muted); }

/* Flavour directories render the real WooCommerce card (see inc/flavours.php),
   so ul.products and every li.product rule above already style them. The only
   thing needed here is the column count: the article container is capped at
   900px, and auto-fill against a 190px minimum resolves to three inside it.
   Four is what these pages are meant to show. */
.flav-products.products {
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
@media (min-width: 600px) { .flav-products.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 820px) { .flav-products.products { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

/* At four across in an 860px column each card is ~200px wide, so the shop's
   card typography is a touch large. Tighten it rather than letting titles run
   to four lines and knock the grid out of alignment. */
.flav-products.products li.product .woocommerce-loop-product__title { font-size: 14px; }
.flav-products.products li.product .product__desc { font-size: 12px; }

/* Tasting note — the reason these pages exist. Sits under the spec line. */
.flav-products .flav__note {
	margin: 2px 0 0;
	padding-inline: 15px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--muted);
}

/* "Also as Kit" — a flavour sold in more than one format. */
.flav-products .flav__alt {
	margin: 6px 0 0;
	padding: 0 15px 12px;
	font-size: 12px;
	color: var(--muted);
}
.flav-products .flav__alt a { color: var(--muted); }

@media (max-width: 520px) {
	.flav-products .flav__note { display: none; }
}

/* ==========================================================================
   18. Utilities
   ========================================================================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1rem; }
.hide { display: none !important; }

/* ==========================================================================
   19. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .layout-sidebar { grid-template-columns: 1fr; }
  .hero__caption { max-width: 60%; }
}

@media (min-width: 901px) {
  /* Two-column product page with a summary that tracks the gallery on scroll. */
  .woocommerce div.product {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    gap: var(--s7);
    align-items: start;
  }
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary { width: auto !important; float: none !important; margin: 0; }
  /* NOT sticky: this column is taller than most laptop viewports, and a sticky
     element taller than the viewport never scrolls away — the tabs below slide
     underneath it and the text overlaps. */
  .woocommerce div.product div.summary { position: static; }
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .related,
  .woocommerce div.product .upsells { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  /* Account: the sidebar becomes a scrollable row of chips above the content,
     which keeps every destination reachable without a 7-item stack pushing the
     actual content off the first screen. */
  .woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .woocommerce-MyAccount-navigation ul {
    display: flex;
    gap: var(--s1);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  .woocommerce-MyAccount-navigation li a { white-space: nowrap; padding: 9px 13px; font-size: 13.5px; }
  .woocommerce-Addresses { grid-template-columns: minmax(0, 1fr); }
  /* Order tables are wider than a phone; let them scroll rather than squash. */
  .woocommerce table.shop_table { display: block; overflow-x: auto; }

  /* One trust point at a time: a 2x2 block cost 120px of height before the
     customer saw any product. Scroll-snap track, auto-advanced by theme.js. */
  /* USP bar keeps the design's single scrolling row on mobile too. */

  /* Header collapses to: burger | lockup | cart. Everything else stands down. */
  .header-main__inner { gap: var(--s3); padding-block: var(--s3); }
  .burger { display: inline-flex; flex: 0 0 auto; margin-left: -8px; }
  .site-branding { flex: 1 1 auto; min-width: 0; }
  .header-actions { gap: var(--s3); }
  .header-action__label,
  .header-actions__divider { display: none; }
  .header-action--cart { gap: var(--s1); }
  .lockup { gap: 10px; }
  .lockup .ivg-mark { width: 34px; height: 34px; }
  .lockup__word { font-size: 17px; }
  .lockup__desc { font-size: 7px; letter-spacing: .26em; }
  .nav-bar__inner { padding-inline: var(--gutter); }
  .primary-menu { gap: var(--s4); }
  .nav-bar { display: none; }
  /* The search stays on mobile — it moves to its own full-width row (16g). */
  .header-main__inner { grid-template-columns: auto 1fr auto; }
  .site-branding { text-align: center; }
  h1 { font-size: 25px; }
  /* The design has no media queries: its clamp() floor (26px) is the mobile size. */
  ul.products { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--s4) var(--s3); }
  ul.products li.product { padding: var(--s2); }
  ul.products li.product .woocommerce-loop-product__title,
  .product__title { font-size: 12.5px; }
  ul.products li.product .price,
  .product__price { font-size: 15px; margin-bottom: var(--s2); }
  ul.products li.product .button { font-size: 12.5px; padding: 10px 10px; }
  .badge { font-size: 9.5px; padding: 4px 7px; letter-spacing: .03em; }
  .hero__caption { position: static; max-width: 100%; padding: 16px; background: var(--brand); }
}

@media (max-width: 480px) {
  .topbar { font-size: 12px; }
  .site-title { font-size: 19px; }
  .section { padding: 28px 0; }
  ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s2); }
  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* print */
@media print {
  .site-header, .site-footer, .age-gate, .drawer, .overlay { display: none !important; }
}

/* --- Guide FAQ blocks ------------------------------------------------------
   Superseded by the 2026 FAQ card styling earlier in this file. This block used
   to sit here and, being later in source order at equal specificity, silently
   won: the new "+/-" marker rendered as the old rotated chevron instead.

   The one rule worth keeping is why the answers are visible at all — FAQPage
   markup describing hidden content is a structured-data violation, so <details>
   keeps the page short while leaving every answer in the DOM for crawlers.
   That behaviour is unchanged; only the styling moved. */

/* Statutory cancellation form on /returns/ — set apart so it reads as a form
   to be copied rather than more policy prose. */
.cancellation-form {
  margin: var(--s4) 0;
  padding: var(--s5);
  background: var(--mist);
  border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14.5px;
  line-height: 1.9;
}
.cancellation-form p { margin: 0 0 var(--s2); }
.cancellation-form p:last-child { margin-bottom: 0; }
.returns-address {
  padding: 12px 15px;
  background: var(--mist);
  border-radius: var(--radius);
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Flavour directory (/ivg-flavours/)
   The hub lists ranges rather than every flavour; the tables live on the
   per-range pages. Cards are a fixed-height grid so the rows stay locked
   whatever the label length, matching the product-card treatment.
   ------------------------------------------------------------------------- */
.flav-dir__total {
	font-weight: 600;
	margin-block: 1.5rem .75rem;
}
.flav-dir {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.flav-card a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-height: 84px;
	padding: 14px 16px;
	border: 1px solid var(--line, #E3E7E8);
	border-radius: 10px;
	background: #fff;
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}
.flav-card a:hover,
.flav-card a:focus-visible {
	border-color: var(--brand, #0F5C57);
	transform: translateY(-1px);
}
.flav-card__name {
	font-weight: 650;
	color: var(--ink, #16211F);
}
.flav-card__count {
	font-size: .875rem;
	color: var(--muted, #646E71);
}

/* ---------------------------------------------------------------------------
   Author box (single guides)
   ------------------------------------------------------------------------- */
.author-box {
	margin-block: 2.5rem 1rem;
	padding: 20px 22px;
	border: 1px solid var(--line, #E3E7E8);
	border-left: 3px solid var(--brand, #0F5C57);
	border-radius: 10px;
	background: var(--mist, #F6F8F8);
}
.author-box__title {
	margin: 0 0 .5rem;
	font-size: 1.0625rem;
	line-height: 1.3;
}
.author-box__bio p {
	margin: 0 0 .75rem;
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--muted, #646E71);
}
.author-box__bio p:last-child { margin-bottom: 0; }
.entry__updated { white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Homepage "Most searched" strip — keyword-anchored links to the money pages
   ------------------------------------------------------------------------- */
.most-searched {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.most-searched a {
	display: inline-block;
	padding: 9px 16px;
	border: 1px solid var(--line, #E3E7E8);
	border-radius: 999px;
	background: #fff;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--ink, #16211F);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}
.most-searched a:hover,
.most-searched a:focus-visible {
	border-color: var(--brand, #0F5C57);
	color: var(--brand, #0F5C57);
}

/* Hand-written above-grid category intro (replaces the machine-trimmed lead) */
.page-head__lead {
	/* Was 68ch. Unconstrained to match .category-copy p below the grid — the
	   title, toolbar and product grid are all container-width, and a half-width
	   lead under a full-width H1 read as misaligned rather than as a measure.
	   The paragraph's line-height is already 1.65, which carries the longer line
	   at this smaller 15px size. */
	max-width: none;
	margin-top: .5rem;
}
.page-head__lead p {
	margin: 0 0 .5rem;
	color: var(--muted, #646E71);
	line-height: 1.65;
}
.page-head__lead p:last-child { margin-bottom: 0; }
.page-head__lead a { color: var(--brand, #0F5C57); }

/* ===========================================================================
   GUIDE DESIGN SYSTEM
   Article components, rendered server-side so they arrive in the cached HTML.
   Every block reserves its own space — no component here can shift layout.
   ======================================================================== */

/* --- Key-facts stat row ------------------------------------------------- */
.stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 1.75rem 0 2rem;
}
.stat-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border: 1px solid var(--line, #E3E7E8);
	border-top: 3px solid var(--brand, #0F5C57);
	border-radius: 10px;
	background: #fff;
}
.stat-card__value {
	font-size: 1.3125rem;
	font-weight: 800;
	line-height: 1.15;
	color: var(--ink, #16211F);
	font-variant-numeric: tabular-nums;
}
.stat-card__label {
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--muted, #646E71);
}

/* --- Callouts ------------------------------------------------------------ */
.callout {
	margin: 1.75rem 0;
	padding: 16px 18px;
	border-radius: 10px;
	border: 1px solid var(--line, #E3E7E8);
	border-left: 4px solid var(--brand, #0F5C57);
	background: var(--mist, #F6F8F8);
}
.callout--warning {
	border-left-color: #B4531B;
	background: #FDF6F1;
	border-color: #F0DCCC;
}
.callout__title {
	margin: 0 0 .35rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--brand, #0F5C57);
}
.callout--warning .callout__title { color: #8F400F; }
.callout__body p { margin: 0 0 .6rem; }
.callout__body p:last-child { margin-bottom: 0; }

/* --- Timeline ------------------------------------------------------------ */
.timeline {
	list-style: none;
	margin: 1.75rem 0;
	padding: 0 0 0 22px;
	border-left: 2px solid var(--line, #E3E7E8);
}
.timeline__item {
	position: relative;
	padding: 0 0 1.15rem 4px;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
	content: "";
	position: absolute;
	left: -29px;
	top: .34em;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--brand, #0F5C57);
	box-shadow: 0 0 0 3px #fff;
}
.timeline__when {
	display: block;
	font-weight: 700;
	color: var(--ink, #16211F);
	font-variant-numeric: tabular-nums;
}
.timeline__what {
	display: block;
	color: var(--muted, #646E71);
	line-height: 1.6;
}

/* --- Tables -------------------------------------------------------------- */
.table-scroll {
	overflow-x: auto;
	margin: 1.75rem 0;
	-webkit-overflow-scrolling: touch;
}
.entry__content table,
table.policy-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
	background: #fff;
}
.entry__content th,
.entry__content td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--line, #E3E7E8);
	text-align: left;
	vertical-align: top;
}
.entry__content thead th {
	background: var(--mist, #F6F8F8);
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ink, #16211F);
	border-bottom: 2px solid var(--line, #E3E7E8);
	white-space: nowrap;
}
.entry__content tbody tr:last-child td { border-bottom: none; }
/* Numeric columns read far better right-aligned with tabular figures. */
.entry__content td:not(:first-child),
.entry__content th:not(:first-child) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.entry__content td:first-child { font-weight: 600; }

/* --- In-page table of contents ------------------------------------------ */
.guide-toc {
	margin: 1.75rem 0 2rem;
	padding: 16px 20px;
	border: 1px solid var(--line, #E3E7E8);
	border-radius: 10px;
	background: var(--mist, #F6F8F8);
}
.guide-toc__title {
	margin: 0 0 .5rem;
	font-size: .8125rem !important;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted, #646E71);
}
.guide-toc ol {
	margin: 0;
	padding-left: 1.15rem;
	columns: 2;
	column-gap: 28px;
}
.guide-toc li {
	margin: 0 0 .3rem;
	break-inside: avoid;
	font-size: .9375rem;
}
.guide-toc a { color: var(--ink, #16211F); text-decoration: none; }
.guide-toc a:hover, .guide-toc a:focus-visible { text-decoration: underline; }
@media (max-width: 640px) { .guide-toc ol { columns: 1; } }

/* Anchored headings shouldn't land under a sticky header. */
.entry__content h2[id] { scroll-margin-top: 90px; }

/* --- Guides index cards -------------------------------------------------- */
.post-grid { align-items: stretch; }
.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.post-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 .4rem;
	flex-wrap: wrap;
}
.post-card__topic {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--mist, #F6F8F8);
	border: 1px solid var(--line, #E3E7E8);
	font-size: .75rem;
	font-weight: 700;
	color: var(--brand, #0F5C57);
}
.post-card__read { font-size: .8125rem; color: var(--muted, #646E71); }
.post-card__date { font-size: .8125rem; color: var(--muted, #646E71); margin: 0 0 .35rem; }
.post-card__title { margin: 0 0 .5rem; }
.post-card__body > p:last-of-type { margin-top: auto; }

/* --- Calculators --------------------------------------------------------- */
.calc {
	margin: 2rem 0;
	padding: 20px 22px;
	border: 1px solid var(--line, #E3E7E8);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(12,17,23,.04);
}
.calc__title { margin: 0 0 .35rem; font-size: 1.1875rem !important; }
.calc__intro { margin: 0 0 1rem; color: var(--muted, #646E71); font-size: .9375rem; }
.calc__field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 .75rem; }
.calc__field label { font-size: .875rem; font-weight: 600; color: var(--ink, #16211F); }
.calc__field select,
.calc__field input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--line, #E3E7E8);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: .9375rem;
	color: var(--ink, #16211F);
}
.calc__field select:focus-visible,
.calc__field input:focus-visible { outline: 2px solid var(--brand, #0F5C57); outline-offset: 1px; }
.calc__field--custom input { flex: 0 1 130px; }

.calc__steps { list-style: none; margin: 1rem 0 0; padding: 0; }
.calc__steps li {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 9px 0; border-bottom: 1px dashed var(--line, #E3E7E8);
}
.calc__step-label { color: var(--muted, #646E71); font-size: .9375rem; }
.calc__step-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.calc__result { margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: var(--mist, #F6F8F8); }
.calc__result-main { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; }
.calc__result-label { font-weight: 600; }
.calc__result-value { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__result-delta { margin: .35rem 0 0; font-size: .875rem; color: var(--muted, #646E71); }
.calc__result-delta [data-out] { font-weight: 700; color: #8F400F; font-variant-numeric: tabular-nums; }
.calc__caveat { margin: 1rem 0 0; font-size: .8125rem; line-height: 1.6; color: var(--muted, #646E71); }

/* --- Comparison toggle --------------------------------------------------- */
.vs-toggle { display: flex; gap: 8px; margin: 1.25rem 0 1rem; flex-wrap: wrap; }
.vs-toggle button {
	padding: 9px 16px; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--line, #E3E7E8); background: #fff;
	font: inherit; font-size: .9375rem; font-weight: 600; color: var(--ink, #16211F);
}
.vs-toggle button[aria-pressed="true"] { background: var(--brand, #0F5C57); border-color: var(--brand, #0F5C57); color: #fff; }
.vs-toggle button:focus-visible { outline: 2px solid var(--brand, #0F5C57); outline-offset: 2px; }
.vs-panel[hidden] { display: none; }

/* Wrapper around full flavour sections — a vertical stack, NOT the
   directory card grid (.flav-dir). These shared a class name and the grid
   was squeezing each section into a 220px column. */
.flav-index { display: flex; flex-direction: column; gap: 40px; }

/* ==========================================================================
   Product card density
   ==========================================================================

   Measured on a 375px viewport before this block: the card was 160px wide and
   579px tall, with only 110px of usable content width once the 24px page
   gutter, the grid gap and the card's own 16px padding were taken out. At that
   width "£5.49" and its "3 for £15" pill cannot sit on one line, and neither
   can "5mg" and "6000 Puffs" — both rows wrapped, adding ~90px of height
   between them.

   Two changes. First, those two rows never wrap at any width. Second, on
   mobile the gutter, gap and internal padding come down to buy ~37px of
   content width, and the reserved min-heights go away: they existed only to
   keep cards aligned, and pinning the CTA to the bottom of the card does that
   job without spending the vertical space.
   ========================================================================== */

/* The price and its deal read as one unit, as do the two spec chips. */
ul.products li.product .price-row,
.woocommerce ul.products li.product .price-row,
ul.products li.product .product__specs {
  flex-wrap: nowrap;
  min-width: 0;
}
ul.products li.product .price-row .price,
ul.products li.product .price-row .deal-strip,
ul.products li.product .product__spec {
  white-space: nowrap;
  flex: 0 0 auto;
}
/* The name can shrink; the badge beside it must not. */
ul.products li.product .product__spec:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Bottom-aligned CTA replaces the reserved heights as the alignment mechanism. */
ul.products li.product .button,
.woocommerce ul.products li.product .button { margin-top: auto; }

@media (max-width: 900px) {
  /* 24px each side is generous on a phone and it is width the cards need. */
  .container { padding-inline: 16px; }

  ul.products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 8px; }

  ul.products li.product .product__media { padding: 10px; }
  ul.products li.product .product__media img,
  ul.products li.product img.attachment-woocommerce_thumbnail { height: 132px; }
  ul.products li.product .product__badges { left: 8px; right: 8px; top: 8px; }

  /* The 3-line clamp above stays: "Pod Kit" and "Pods" are different products
     at different prices, and clamping to 2 made adjacent cards read the same.
     Only the padding and the reserved height come down — space is reserved for
     two lines rather than three, so the common short titles stop paying for a
     third line they never use, and longer ones still get it. */
  ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 10px 10px 0;
    font-size: 12.5px;
    min-height: calc(1.35em * 2 + 10px);
  }

  ul.products li.product .price-row,
  .woocommerce ul.products li.product .price-row {
    padding: 6px 10px 0; gap: 6px; min-height: 0;
  }
  ul.products li.product .price-row .price { font-size: 15px; }
  ul.products li.product .price-row .deal-strip { font-size: 10.5px; padding: 2px 6px; }

  ul.products li.product .product__specs { padding: 6px 10px 0; gap: 5px; min-height: 0; }
  ul.products li.product .product__spec { font-size: 10.5px; padding: 2px 6px; }

  ul.products li.product .product__desc {
    padding: 6px 10px 0;
    min-height: 0;
    font-size: 11.5px;
    line-height: 1.35;
  }

  ul.products li.product .button,
  .woocommerce ul.products li.product .button {
    padding: 11px 8px; font-size: 12.5px; margin-top: auto;
  }
}

/* ==========================================================================
   Account — logged-out login / create-account screen
   ==========================================================================

   Ported from the account handoff. Values are the design's own; the prototype's
   stubbed forms are replaced with WooCommerce's real ones in
   woocommerce/myaccount/form-login.php.

   The design's <main> is full-bleed, but our account page renders inside the
   theme's narrow container, so the block breaks out of it below rather than the
   page template being forked — the header and footer stay exactly as they are.
   ========================================================================== */

body.woocommerce-account:not(.logged-in) .content-area { padding-block: 0; }
body.woocommerce-account:not(.logged-in) .entry__title,
body.woocommerce-account:not(.logged-in) .woocommerce > h2 { display: none; }

/* Break out of .container--narrow to the full viewport width. */
body.woocommerce-account:not(.logged-in) .hv-auth {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.hv-auth { display: flex; flex-wrap: wrap; align-items: stretch; }

/* ---- dark promo panel ---------------------------------------------------- */
.hv-auth__promo {
  flex: 1 1 440px;
  min-width: min(100%, 380px);
  position: relative;
  overflow: hidden;
  background: #04241f;
  color: #fff;
  padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}
.hv-auth__glow { position: absolute; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.hv-auth__glow--tr {
  right: -18%; top: -22%; width: 78%;
  background: radial-gradient(circle at 30% 30%, rgba(47,227,168,.30), rgba(47,227,168,0) 68%);
}
.hv-auth__glow--bl {
  left: -30%; bottom: -34%; width: 82%;
  background: radial-gradient(circle at 60% 40%, rgba(47,227,168,.16), rgba(47,227,168,0) 70%);
}
.hv-auth__eyebrow {
  position: relative; display: inline-flex; align-self: flex-start; align-items: center;
  gap: 9px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.1);
}
.hv-auth__dot { width: 7px; height: 7px; border-radius: 50%; background: #2FE3A8; }
.hv-auth__eyebrow-text {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.hv-auth__headline {
  position: relative; margin: 0; color: #fff;
  font-family: var(--font-head);
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; font-weight: 800;
  letter-spacing: -.03em; text-wrap: balance;
}
.hv-auth__lede {
  position: relative; margin: 0; font-size: 17px; line-height: 1.6; color: #b3c8c1; max-width: 46ch;
}
.hv-auth__benefits {
  position: relative; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 16px;
}
.hv-auth__benefit { display: flex; gap: 12px; align-items: flex-start; }
.hv-auth__num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  background: rgba(47,227,168,.16); color: #2FE3A8;
  font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.hv-auth__benefit-text { display: flex; flex-direction: column; gap: 2px; }
.hv-auth__benefit-title { font-size: 15px; font-weight: 700; }
.hv-auth__benefit-desc { font-size: 14px; color: #9db6ad; }

.hv-auth__products {
  position: relative; display: flex; align-items: flex-end; gap: 22px; margin-top: 8px;
}
.hv-auth__product { width: auto; filter: drop-shadow(0 22px 26px rgba(0,0,0,.45)); }
.hv-auth__product:nth-child(1) { height: clamp(120px, 15vw, 190px); }
.hv-auth__product:nth-child(2) { height: clamp(132px, 16.5vw, 210px); }
.hv-auth__product:nth-child(3) { height: clamp(84px, 10vw, 132px); filter: drop-shadow(0 18px 22px rgba(0,0,0,.45)); }

/* ---- form pane ----------------------------------------------------------- */
.hv-auth__pane {
  flex: 1 1 440px;
  min-width: min(100%, 340px);
  background: #F5F8F6;
  padding: clamp(32px, 4.5vw, 64px) clamp(20px, 4vw, 56px);
  display: flex; align-items: center; justify-content: center;
}
.hv-auth__stack { width: min(460px, 100%); display: flex; flex-direction: column; gap: 22px; }

.hv-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 6px; border-radius: 12px; background: #e8efeb;
}
.hv-tab {
  height: 46px; border: 0; border-radius: 9px;
  font-family: var(--font-head); font-size: 15px; font-weight: 700; cursor: pointer;
  background: transparent; color: #5b7a6f;
  transition: background .15s, color .15s;
}
.hv-tab[aria-selected="true"] { background: #fff; color: #04241f; box-shadow: 0 1px 3px rgba(4,36,31,.12); }

.hv-card {
  background: #fff; border: 1px solid #e6ece9; border-radius: 16px;
  padding: clamp(22px, 3vw, 32px); box-shadow: 0 18px 40px rgba(4,36,31,.06);
}
.hv-panel[hidden] { display: none; }
.hv-panel__head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.hv-panel__title {
  margin: 0; font-family: var(--font-head);
  font-size: 26px; font-weight: 800; letter-spacing: -.025em; color: #04241f;
}
.hv-panel__sub { margin: 0; font-size: 15px; color: #6c837b; }

/* ---- fields -------------------------------------------------------------- */
.hv-form { display: flex; flex-direction: column; gap: 18px; }
.hv-field { display: flex; flex-direction: column; gap: 8px; }
.hv-field__label {
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6c837b;
}
.hv-req { color: #c0392b; }

.hv-input {
  height: 52px; padding: 0 14px;
  border: 1px solid #d7e2dd; border-radius: 10px; background: #fff;
  font: inherit; font-size: 16px; color: #04241f;
  transition: border-color .15s, box-shadow .15s;
}
.hv-input::placeholder { color: #9db2aa; }
.hv-input:focus,
.hv-select:focus {
  outline: none; border-color: #04241f; box-shadow: 0 0 0 3px rgba(47,227,168,.28);
}

.hv-pw { position: relative; display: block; }
.hv-input--pw { width: 100%; padding: 0 96px 0 14px; }
.hv-pw__toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  height: 36px; padding: 0 12px; border: 0; border-radius: 8px;
  background: #f2f6f4; color: #0d8f68;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.hv-pw__toggle:hover { background: #E4F7EF; }

.hv-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }

/* The caption sits outside .hv-dob, so the group pulls up to restore the 8px
   label-to-control gap the other fields have. */
.hv-field__label--standalone { display: block; }
.hv-dob { display: flex; flex-direction: column; gap: 8px; margin-top: -10px; }
.hv-dob__row { display: grid; grid-template-columns: .85fr 1.3fr 1fr; gap: 10px; }
.hv-select {
  height: 52px; padding: 0 30px 0 12px;
  border: 1px solid #d7e2dd; border-radius: 10px; background: #fff;
  font-family: inherit; font-size: 16px; color: #04241f; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236c837b' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
.hv-select.is-invalid { border-color: #c0392b; }
.hv-dob__note { font-size: 13px; line-height: 1.45; color: #6c837b; }
.hv-dob__note.is-error { color: #c0392b; }
.hv-dob__note.is-ok { color: #0a6f52; }

.hv-strength { display: flex; align-items: center; gap: 10px; }
.hv-strength__track { flex: 1 1 auto; height: 6px; border-radius: 999px; background: #eef3f0; overflow: hidden; }
.hv-strength__bar {
  display: block; height: 100%; border-radius: 999px;
  transition: width .2s, background .2s; width: 12%; background: #c0392b;
}
.hv-strength__text { font-size: 12px; font-weight: 700; min-width: 62px; text-align: right; color: #c0392b; }

.hv-check {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 1.5; color: #375248; cursor: pointer;
}
.hv-check input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px; accent-color: #0d8f68; cursor: pointer; flex: 0 0 auto;
}
.hv-check a { font-weight: 700; text-decoration: none; }

.hv-form__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
.hv-form__row .hv-check { font-weight: 600; align-items: center; }
.hv-link { font-size: 14px; font-weight: 700; text-decoration: none; color: #0d8f68; }
.hv-link:hover { color: #04241f; }

.hv-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 56px; border: 0; border-radius: 10px;
  background: #04241f; color: #fff;
  font-family: var(--font-head); font-size: 17px; font-weight: 800;
  text-decoration: none; cursor: pointer; transition: background .15s;
}
.hv-btn:hover { background: #0d8f68; color: #fff; }
/* Disabled while the date of birth is under 18 — the server check is what
   actually enforces it, this is only the visible half. */
.hv-btn[aria-disabled="true"] { background: #cfe0da; color: #7d968d; pointer-events: none; }

.hv-switch {
  margin: 20px 0 0; padding-top: 18px; border-top: 1px solid #f0f4f2;
  font-size: 14px; color: #6c837b; text-align: center;
}
.hv-switch a { font-weight: 700; text-decoration: none; }

/* WooCommerce prints its notices inside the card. */
.hv-card .woocommerce-error,
.hv-card .woocommerce-message,
.hv-card .woocommerce-info { margin: 0 0 18px; font-size: 14px; }

/* ==========================================================================
   Account — logged-in pages (dashboard, orders, addresses, details, reorder)
   ==========================================================================
   The design drives its views with JS from one page; here each is a real
   WooCommerce endpoint, so the deep links become URLs. Styling is the design's.
   ========================================================================== */

body.woocommerce-account.logged-in .content-area { padding-block: 0; }
body.woocommerce-account.logged-in .entry__title { display: none; }

/* Full-bleed soft ground behind the account area, as the design has it. */
body.woocommerce-account.logged-in .hv-acct {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: #F5F8F6;
  padding: clamp(24px, 4vw, 48px) 24px clamp(40px, 6vw, 72px);
}
.hv-acct > * { width: min(1240px, 100%); margin-inline: auto; }
.hv-acct { display: flex; flex-direction: column; gap: 28px; }

.hv-acct__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.hv-acct__identity { display: flex; align-items: center; gap: 16px; }
.hv-avatar {
  width: 56px; height: 56px; border-radius: 14px;
  background: #04241f; color: #2FE3A8;
  font-family: var(--font-head); font-size: 20px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.hv-acct__identity-text { display: flex; flex-direction: column; gap: 4px; }
.hv-acct__eyebrow { font-size: 13px; font-weight: 600; color: #6c837b; }
.hv-acct__title {
  margin: 0; font-family: var(--font-head);
  font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.03em; color: #04241f;
}

.hv-acct__cols { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }

.hv-acct__nav {
  flex: 0 1 250px; min-width: min(100%, 220px);
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px; background: #fff; border: 1px solid #e6ece9; border-radius: 14px;
}
.hv-navlink {
  padding: 12px 14px; border-radius: 9px;
  font-family: var(--font-head); font-size: 15px; font-weight: 600;
  text-decoration: none; color: #375248;
  transition: background .15s, color .15s;
}
.hv-navlink:hover { background: #f2f6f4; color: #04241f; }
.hv-navlink.is-active { background: #04241f; color: #fff; font-weight: 700; }
.hv-navlink.is-active:hover { background: #04241f; color: #fff; }
.hv-navlink--logout { color: #6c837b; }

.hv-acct__content {
  flex: 1 1 520px; min-width: min(100%, 320px);
  display: flex; flex-direction: column; gap: 24px;
}

/* ---- cards --------------------------------------------------------------- */
.hv-acct__content .woocommerce-MyAccount-content > *:not(.hv-card) { margin: 0; }
.hv-acct__content > form,
.hv-acct__content > .woocommerce-message,
.hv-acct__content > .woocommerce-Message,
.hv-acct__content > .woocommerce-notice,
.hv-acct__content > .woocommerce-Addresses,
.hv-acct__content > .woocommerce-orders-table,
.hv-acct__content > p,
.hv-acct__content > table,
.hv-acct__content > ul.products {
  background: #fff; border: 1px solid #e6ece9; border-radius: 16px;
  padding: clamp(22px, 3vw, 32px); margin: 0;
}
.hv-acct__content > p:empty { display: none; }

.hv-acct__content h2,
.hv-acct__content legend {
  margin: 0 0 6px; font-family: var(--font-head);
  font-size: 24px; font-weight: 800; letter-spacing: -.025em; color: #04241f;
}

/* ---- forms inside the account ------------------------------------------- */
.hv-acct__content .woocommerce-EditAccountForm,
.hv-acct__content form.edit-account { display: flex; flex-direction: column; gap: 20px; }
.hv-acct__content .form-row { display: flex; flex-direction: column; gap: 8px; margin: 0; float: none; width: auto; }
.hv-acct__content .form-row-first,
.hv-acct__content .form-row-last { width: auto; }
.hv-acct__content label {
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6c837b;
}
.hv-acct__content .woocommerce-form__label-for-checkbox,
.hv-acct__content .ivg-field--check label {
  font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #375248;
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
}
.hv-acct__content input[type="text"],
.hv-acct__content input[type="email"],
.hv-acct__content input[type="tel"],
.hv-acct__content input[type="password"],
.hv-acct__content select {
  height: 52px; padding: 0 14px;
  border: 1px solid #d7e2dd; border-radius: 10px; background: #fff;
  font: inherit; font-size: 16px; color: #04241f;
  transition: border-color .15s, box-shadow .15s;
}
.hv-acct__content input:focus,
.hv-acct__content select:focus {
  outline: none; border-color: #04241f; box-shadow: 0 0 0 3px rgba(47,227,168,.28);
}
.hv-acct__content input:disabled { background: #f7faf8; color: #6c837b; }
.ivg-field__hint { font-size: 13px; color: #8ba79b; }

.hv-acct__content .button,
.hv-acct__content button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 26px; border: 0; border-radius: 10px;
  background: #04241f; color: #fff;
  font-family: var(--font-head); font-size: 16px; font-weight: 800;
  text-decoration: none; cursor: pointer; transition: background .15s;
  align-self: flex-start;
}
.hv-acct__content .button:hover,
.hv-acct__content button[type="submit"]:hover { background: #0d8f68; color: #fff; }

/* ---- orders table -------------------------------------------------------- */
.hv-acct__content table.woocommerce-orders-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.hv-acct__content table.woocommerce-orders-table th {
  text-align: left; padding: 0 12px 12px 0;
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #6c837b;
  border-bottom: 1px solid #e6ece9;
}
.hv-acct__content table.woocommerce-orders-table td {
  padding: 14px 12px 14px 0; border-bottom: 1px solid #f0f4f2; color: #375248; vertical-align: middle;
}
.hv-acct__content table.woocommerce-orders-table tr:last-child td { border-bottom: 0; }
.hv-acct__content .woocommerce-orders-table__cell-order-status {
  display: inline-flex; padding: 4px 10px; border-radius: 999px;
  background: #E4F7EF; color: #0a6f52; font-size: 12px; font-weight: 700;
}

/* ---- addresses ----------------------------------------------------------- */
.hv-acct__content .woocommerce-Addresses {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;
  background: none; border: 0; padding: 0;
}
.hv-acct__content .woocommerce-Address {
  background: #fff; border: 1px solid #e6ece9; border-radius: 16px; padding: clamp(20px, 2.5vw, 26px);
}
.hv-acct__content .woocommerce-Address address { font-style: normal; line-height: 1.7; color: #375248; }
.hv-acct__content .woocommerce-Address h2,
.hv-acct__content .woocommerce-Address h3 { font-size: 18px; margin-bottom: 10px; }

/* ---- reorder ------------------------------------------------------------- */
.hv-acct__content ul.products.ivg-reorder {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px;
  background: none; border: 0; padding: 0; list-style: none; margin: 0;
}
.ivg-reorder__empty { color: #6c837b; }

/* ---- Addresses view ------------------------------------------------------
   WooCommerce's own .col2-set markup floats its two columns and gives them a
   percentage width. Those declarations survive on grid items, which is what
   collapsed the cards to 131px and staggered them. The template renders the
   design's structure instead, so the only job here is styling it. */
.hv-panel {
  background: #fff; border: 1px solid #e6ece9; border-radius: 16px;
  padding: clamp(22px, 3vw, 32px);
  display: flex; flex-direction: column; gap: 18px;
}
.hv-panel__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px;
}
.hv-panel__title {
  margin: 0; font-family: var(--font-head);
  font-size: 24px; font-weight: 800; letter-spacing: -.025em; color: #04241f;
}
.hv-panel__note { font-size: 14px; color: #6c837b; }

.hv-address-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.hv-address {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px; border: 1px solid #e6ece9; border-radius: 12px;
}
.hv-address__chip {
  display: inline-flex; align-self: flex-start;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.hv-address__chip--default { background: #E4F7EF; color: #0a6f52; }
.hv-address__chip--muted { background: #f2f6f4; color: #5b7a6f; }
.hv-address__body { font-size: 15px; line-height: 1.7; color: #375248; }
.hv-address__actions { display: flex; gap: 14px; }
.hv-address__edit { font-size: 14px; font-weight: 700; text-decoration: none; color: #0d8f68; }
.hv-address__edit:hover { color: #04241f; }

/* The panel supplies the card, so the generic wrapper rule must not double it. */
.hv-acct__content > .hv-panel { padding: clamp(22px, 3vw, 32px); }
.hv-acct__content > .woocommerce-Addresses { background: none; border: 0; padding: 0; }

/* ---- Account forms: beat WooCommerce's legacy float grid -----------------
   `.woocommerce form .form-row-first` is (0,2,1) and outranks a plain
   `.hv-acct__content .form-row` (0,2,0), so the floats and 47% widths survived
   and the rows came out at 308/655/626px. Adding the body class lifts these to
   (0,3,1) — enough to win without reaching for !important.

   The form becomes the design's auto-fit grid, so first/last name pair up and
   wide rows span the full width, which is what the float pair was imitating. */
body.woocommerce-account .hv-acct__content form.woocommerce-EditAccountForm,
body.woocommerce-account .hv-acct__content form.edit-account {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px 16px;
  align-items: start;
}
body.woocommerce-account .hv-acct__content .form-row,
body.woocommerce-account .hv-acct__content .form-row-first,
body.woocommerce-account .hv-acct__content .form-row-last,
body.woocommerce-account .hv-acct__content .form-row-wide {
  float: none;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}
/* Anything that is not half a name pair spans the whole row. */
body.woocommerce-account .hv-acct__content .form-row-wide,
body.woocommerce-account .hv-acct__content fieldset,
body.woocommerce-account .hv-acct__content .ivg-field,
body.woocommerce-account .hv-acct__content .clear,
body.woocommerce-account .hv-acct__content > form > p:not(.form-row),
body.woocommerce-account .hv-acct__content button[type="submit"] { grid-column: 1 / -1; }
body.woocommerce-account .hv-acct__content .clear { display: none; }

body.woocommerce-account .hv-acct__content fieldset {
  border: 1px solid #e6ece9; border-radius: 12px; padding: 20px; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
body.woocommerce-account .hv-acct__content fieldset legend {
  padding: 0 6px; font-size: 18px;
}

/* The design's inputs are 52px; the theme's global input rule was winning at 48. */
body.woocommerce-account .hv-acct__content input[type="text"],
body.woocommerce-account .hv-acct__content input[type="email"],
body.woocommerce-account .hv-acct__content input[type="tel"],
body.woocommerce-account .hv-acct__content input[type="password"],
body.woocommerce-account .hv-acct__content select {
  height: 52px;
  padding: 0 14px;
  border: 1px solid #d7e2dd;
  border-radius: 10px;
  font-size: 16px;
}

/* ---- Account: empty states and buttons ----------------------------------
   Orders and Payment methods render WooCommerce's .woocommerce-info notice,
   which the theme styles as a small tinted strip. Inside the account it should
   read as one of the panels. The buttons on those pages were also picking up
   the theme's older ink at a 6px radius rather than the design's accent
   at 10px — the theme's .button rule outranked the account one, so these are
   scoped with the body class to win cleanly. */
body.woocommerce-account .hv-acct__content .woocommerce-info,
body.woocommerce-account .hv-acct__content .woocommerce-message,
body.woocommerce-account .hv-acct__content .woocommerce-error,
body.woocommerce-account .hv-acct__content .woocommerce-notice {
  background: #fff;
  border: 1px solid #e6ece9;
  border-left: 3px solid #2FE3A8;
  border-radius: 16px;
  padding: clamp(20px, 2.5vw, 26px);
  margin: 0;
  color: #375248;
  font-size: 15px;
  line-height: 1.6;
}
body.woocommerce-account .hv-acct__content .woocommerce-error {
  border-left-color: #c0392b;
}
body.woocommerce-account .hv-acct__content .woocommerce-info::before,
body.woocommerce-account .hv-acct__content .woocommerce-message::before,
body.woocommerce-account .hv-acct__content .woocommerce-error::before { content: none; }

body.woocommerce-account .hv-acct__content a.button,
body.woocommerce-account .hv-acct__content button.button,
body.woocommerce-account .hv-acct__content button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 10px;
  background: #04241f;
  color: #fff;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  align-self: flex-start;
  transition: background .15s;
}
body.woocommerce-account .hv-acct__content a.button:hover,
body.woocommerce-account .hv-acct__content button.button:hover,
body.woocommerce-account .hv-acct__content button[type="submit"]:hover { background: #0d8f68; color: #fff; }

/* The notice already carries the card, so the generic wrapper must not double it. */
body.woocommerce-account .hv-acct__content > .woocommerce-notices-wrapper:empty { display: none; }

/* ==========================================================================
   Search bar — matched to the design handoff
   ==========================================================================
   The design uses a plain input beside a solid green button, both 44px at an
   8px radius, rather than the single pill the theme shipped with. Values are
   the design's own (account-login.html header).
   ========================================================================== */
.header-search { max-width: 520px; }
.header-search form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.header-search form:focus-within { border-color: transparent; }
.header-search input[type="search"] {
  flex: 1 1 auto;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #d7e2dd;
  border-radius: 8px;
  background: #f7faf8;
  font: inherit;
  font-size: 15px;
  color: #04241f;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.header-search input[type="search"]::placeholder { color: #9db2aa; }
.header-search input[type="search"]:focus {
  outline: none;
  border-color: #04241f;
  box-shadow: 0 0 0 3px rgba(47,227,168,.28);
}
.header-search button.button {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: #0d8f68;
  color: #fff;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background .15s ease;
}
.header-search button.button:hover { background: #04241f; color: #fff; }

/* ==========================================================================
   Suggestion panel — popular searches beside the products
   ==========================================================================
   Two columns: the landing-page shortcuts on the left, products on the right.
   Below 640px the grid collapses to one column and they stack, searches first,
   because on a phone the shortcuts are the faster route.
   ========================================================================== */
.live-results--suggest {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  /* The search box is 520px, which leaves the product column ~278px and wraps
     every name onto three lines. The panel is free to be wider than its anchor,
     so it opens to 660px and is capped against the viewport. */
  right: auto;
  width: max(100%, 660px);
  max-width: calc(100vw - 32px);
  /* Two stacked blocks in the left column run taller than the six products, and
     the default 460px cap was clipping the last category. */
  max-height: min(80vh, 560px);
}
.live-results--suggest .live-suggest__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px;
}
.live-results--suggest .live-suggest__col--links {
  background: #F5F8F6;
  border-right: 1px solid #eef3f0;
  border-radius: 14px 0 0 14px;
}
.live-results--suggest .live-results__label { padding: 2px 2px 8px; }

/* Stacked pills in the left column rather than the wrapped row. */
.live-results--suggest .live-suggest__links {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0;
  border-bottom: 0;
}
/* Compact: these are shortcuts, not primary controls. They sit in a scanned
   list rather than being tapped in isolation, so they do not need the 36px
   the standalone pills carry. */
.live-results--suggest .live-suggest__link {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 5px 10px;
  justify-content: flex-start;
  border: 0;
  border-radius: 7px;
  background: none;
  /* Regular weight, not bold: these are a scannable list, and seven bold lines
     beside the product names made the panel read as two competing menus. */
  font-size: 12.5px;
  font-weight: 400;
  color: #375248;
  white-space: normal;
  text-align: left;
  line-height: 1.35;
}
.live-results--suggest .live-suggest__link:hover,
.live-results--suggest .live-suggest__link.is-active { font-weight: 500; }
.live-results--suggest .live-suggest__link:hover,
.live-results--suggest .live-suggest__link.is-active {
  background: #fff;
  border-color: transparent;
  color: #04241f;
}

@media (max-width: 640px) {
  .live-results--suggest { grid-template-columns: minmax(0, 1fr); }
  .live-results--suggest .live-suggest__col--links {
    border-right: 0;
    border-bottom: 1px solid #eef3f0;
    border-radius: 14px 14px 0 0;
    /* Stacked on a phone, these two blocks sit directly on top of the products,
       so every px of their padding pushes Popular picks below the fold. Tightened
       here only — the products list and the typed-results list are untouched. */
    padding: 8px 10px 10px;
  }
  .live-results--suggest .live-results__label { padding: 4px 2px 4px; }
  .live-results--suggest .live-results__label--sub {
    margin-top: 8px;
    padding-top: 8px;
  }
  .live-results--suggest .live-suggest__links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px 4px;
  }
  .live-results--suggest .live-suggest__link {
    width: auto;
    padding: 4px 8px;
    gap: 6px;
  }
}

/* Second block in the suggestion sidebar: the five default categories. */
.live-results--suggest .live-results__label--sub {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e3ebe7;
}
.live-results--suggest .live-suggest__link {
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-suggest__count {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 400;
  color: #a8bcb3;
}
.live-results--suggest .live-suggest__link:hover .live-suggest__count { color: #0d8f68; }

/* -------------------------------------------------------------------------
   Pod compatibility table

   The same treatment as the homepage compare table (#compare-ranges), which
   this deliberately mirrors: same card, same header band, same 14/16 padding.
   It is a separate block rather than an extra selector on those rules because
   the compare rules sit ~1700 lines earlier, and .pod-table would lose a
   later-wins tie to the generic .entry__content table rules if this ever
   renders inside post content.

   Sits in .category-copy on the category pages, where nothing else styles a
   table, so single-class selectors are enough here.
   ---------------------------------------------------------------------- */
.pod-table { margin: 28px 0 0; }
.pod-table__title { font-size: 21px; margin: 0 0 14px; }
.pod-table .table-scroll {
  overflow-x: auto;
  background: #fff;
  border: 1px solid #e6ece9;
  border-radius: 14px;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}
.pod-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 860px;
  background: #fff;
}
.pod-table thead tr { background: #f7faf8; }
.pod-table th {
  text-align: left;
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #04241f;
  border-bottom: 1px solid #e6ece9;
  white-space: nowrap;
}
.pod-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f0f4f2;
  color: #375248;
  text-align: left;
  vertical-align: top;
  font-variant-numeric: normal;
}
/* Row headers are pod names at the table's own size, not small-caps labels. */
.pod-table tbody th[scope="row"] {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #04241f;
  white-space: normal;
}
.pod-table tbody tr:last-child td,
.pod-table tbody tr:last-child th { border-bottom: none; }
/* The note about the table, rendered above the scroller so it wraps to the
   viewport instead of inheriting the table's 860px min-width. */
.pod-table__intro {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #627670;
  /* Deliberately unconstrained, to match .category-copy p above — the table it
     introduces is container-width, so a narrower intro looked stranded. */
  max-width: none;
}
/* Same treatment as the intro, sitting under the scroller: the Strengths column
   is a range-level summary, and the note that says so has to clear the table. */
.pod-table__note { margin: 12px 0 0; }
.pod-table a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pod-table tbody th[scope="row"] a { text-decoration-color: #b9c9c3; }

/* Specificity guard for the pod table.

   The generic content-table rules are .entry__content td:not(:first-child)
   (0,2,1) — they right-align every column after the first and switch on
   tabular numerals, which is right for a figures table and wrong for this one.
   Today the pod table renders in .category-copy so those rules never reach it,
   but the shortcode can be dropped into any page or post, and relying on the
   table simply never meeting them is not a guarantee.

   These selectors are deliberately weighted to win rather than to be tidy:
   .pod-table .table-scroll td is (0,2,1) and ties, taking it on source order
   since this block is last in the file; the :not() variants are (0,2,2) and
   beat it outright. The .entry__content-prefixed pair covers the case where
   both apply. Alignment and numerals only — everything else is inherited from
   the .pod-table block above. */
.pod-table .table-scroll td,
.pod-table .table-scroll th,
.pod-table .table-scroll td:not(:first-child),
.pod-table .table-scroll th:not(:first-child),
.entry__content .pod-table td:not(:first-child),
.entry__content .pod-table th:not(:first-child) {
  text-align: left;
  font-variant-numeric: normal;
}
/* .entry__content td:first-child sets font-weight 600 on every first cell;
   the row header here already carries its own weight, so pin it back. */
.entry__content .pod-table td:first-child { font-weight: inherit; }

/* Age gate: one decision, one button.

   The under-18 route is a link inside the sentence, not a second button — two
   buttons of equal weight read as a choice to be guessed at. The .age-gate__deny
   button styles above are kept because the class is harmless if a future variant
   wants the two-button layout back. */
.age-gate__box .age-gate__lede { margin-bottom: 22px; }
.age-gate__box .age-gate__lede a {
  color: var(--teal-deep, #1B4FA8);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.age-gate__box .age-gate__lede a:hover { text-decoration-thickness: 2px; }
.age-gate__actions .btn { min-width: 220px; }

/* -------------------------------------------------------------------------
   Pod range tabs (pods hub only)

   Chips rather than a bordered tab strip: the toolbar directly above already
   has a border and a background, and a second bordered band under it read as
   two competing headers. Scrolls horizontally on narrow screens instead of
   wrapping to three rows.
   ---------------------------------------------------------------------- */
.pod-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 var(--s5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.pod-tabs::-webkit-scrollbar { display: none; }
.pod-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid #e6ece9;
  border-radius: 999px;
  background: #fff;
  color: #375248;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s ease, background-color .15s ease;
}
.pod-tab:hover { border-color: #b9c9c3; background: #f7faf8; color: #04241f; }
.pod-tab.is-active {
  background: var(--ink, #151A1F);
  border-color: var(--ink, #151A1F);
  color: #fff;
}
.pod-tab__n {
  font-size: 12px;
  font-weight: 700;
  color: #6d8279;
  font-variant-numeric: tabular-nums;
}
.pod-tab.is-active .pod-tab__n { color: rgba(255,255,255,.65); }
.pod-tab:focus-visible { outline: 2px solid var(--teal-deep, #1B4FA8); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pod-tab { transition: none; } }

/* Product compatibility strip
   ---------------------------
   Sits directly under the add-to-basket row and answers the single most common
   ordering mistake — buying a pod for the wrong device — at the moment someone
   is about to make it. Rendered from the product's categories by
   inc/product-compat.php, so it can never contradict where the product sits. */
.compat-line {
	margin: var(--s3) 0 var(--s4);
	padding: var(--s3) var(--s4);
	background: var(--mist, #F3F5F8);
	border-left: 3px solid var(--teal-deep, #1B4FA8);
	border-radius: 0 8px 8px 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: #3A464C;
}
.compat-line a {
	color: var(--teal-deep, #1B4FA8);
	font-weight: 600;
	text-decoration: none;
}
.compat-line a:hover,
.compat-line a:focus-visible { text-decoration: underline; }
.compat-line__sep { color: #B4BFC1; margin: 0 2px; }


/* Flavour switcher --------------------------------------------------------
   Sits directly above the add-to-basket, where a variation dropdown sits on a
   variable product — so it borrows that control's styling outright rather than
   carrying its own. The rules live with the .variations select block above;
   only spacing is set here.

   The first version defined its own colours against --hv-line / --hv-accent /
   --hv-ink-soft, none of which exist in this theme, and a broader select rule
   then beat it on specificity — so it rendered with no chevron at all. Sharing
   the selector is both correct and impossible to drift.

   See inc/flavour-switch.php. */
.flavour-switch { margin: 0 0 var(--s4); }
.flavour-switch__all {
  display: inline-block;
  margin-top: var(--s2);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
}


/* Cookie settings — the consent withdrawal control in the footer bottom bar.
   Reopens the banner; hidden until a choice exists to change, and hidden
   entirely without JS since it cannot work. */
.footer-consent {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  opacity: .85;
}
.footer-consent:hover, .footer-consent:focus-visible { opacity: 1; }