/* ============================================================
   Voltway — design system
   Palette lock: cobalt accent only. Radius lock: 12px cards,
   8px controls, 999px pills. Light theme only, no section inverts.
   ============================================================ */

:root {
  /* Ink */
  --ink: #101418;
  --body: #3f464e;
  /* 5.35:1 on --surface. #6b7280 read as 4.11:1 there and failed WCAG 2.1 AA 1.4.3. */
  --muted: #5f6672;

  /* Surface */
  --paper: #ffffff;
  --surface: #f5f6f8;
  --surface-2: #eceff3;
  --border: #e4e7eb;

  /* One accent, used everywhere. */
  --accent: #1a4dd8;
  --accent-hover: #1440b4;
  --accent-pale: #eef2fe;
  --accent-tint: #dde5fd;

  /* Deep field. Used for the two dark bands that bookend the page (hero and support)
     so the darkness reads as deliberate rhythm rather than a section that flipped
     theme on its own. */
  --deep: #0b1727;
  --deep-2: #14315f;
  --on-deep: #eaf0fa;
  --on-deep-muted: #9fb2cd;

  /* Structural only: ratings and the deal band. Never body text (fails contrast). */
  --amber: #f0a202;
  --amber-pale: #fdf4e0;

  /* Semantic only, never decorative. */
  --sale: #c8102e;
  --stock: #157347;

  --radius-card: 12px;
  --radius-ctl: 8px;

  --container: 1280px;
  --measure: 68ch;

  --fs-display: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  --fs-h3: 1.125rem;
  --fs-body: 1.0625rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;

  /* Diffused and tinted to the page, never a hard black drop shadow. */
  --shadow: 0 1px 2px rgba(16, 20, 24, .04), 0 12px 32px -8px rgba(16, 20, 24, .10);

  /* Built-in easings are too weak to read as intentional. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);

  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Geist', ui-sans-serif, system-ui, sans-serif;
}

/* Out-specifies Astra's own body/heading font rules without !important. */
body,
body .site,
button,
input,
select,
textarea { font-family: var(--font-body); }

h1, h2, h3, h4, h5, h6,
.vw-hero__title,
.vw-section__title,
.vw-card__now,
.vw-list__price,
.site-title { font-family: var(--font-display); }

/* Hover effects only where there is a real pointer: on touch, :hover fires on tap. */
@media (hover: hover) and (pointer: fine) {
  .vw-cat:hover { border-color: var(--accent); transform: translateY(-2px); }
  
}

/* Press feedback. Scale, not translate: the whole control acknowledges the press. */
.vw-btn:active,
.vw-cat:active,
.vw-list__row:active { transform: scale(.97); }

/* ---------- Astra bridge ----------
   Astra ships a tinted page background and wraps content in a flex `.ast-container`
   capped at its own content width. Left alone, our full-bleed section backgrounds
   stop short and the page reads as boxed panels floating on grey. Unconstrain the
   container only on pages that lay out their own sections (body class from
   voltway_body_class()); each section's inner .vw-container still centres the
   content at --container. Out-specify Astra rather than reaching for !important
   where the specificity allows it. */

body,
.site,
#content,
.ast-separate-container { background: var(--paper); }

.vw-full-bleed .ast-container {
  display: block;
  max-width: 100%;
  width: 100%;
  padding: 0;
}

.vw-full-bleed #primary,
.vw-full-bleed .content-area {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.vw-full-bleed .ast-separate-container .ast-article-single,
.vw-full-bleed .ast-separate-container #primary { background: transparent; box-shadow: none; }

.site-header,
.ast-primary-header-bar { background: var(--paper); }

body {
  color: var(--body);
  font-size: var(--fs-body);
  background: var(--paper);
}

h1, h2, h3, h4 {
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-hover); }

/* WCAG 1.4.1: a link sitting inside a paragraph cannot be signalled by colour alone,
   so links in running text are underlined. Navigation, buttons and card links are
   not in running text and keep the clean look. */
/* Prose only. An earlier version underlined `li a` as well, which caught every product
   card link and every Add to cart button; those are not links in running text and axe
   does not ask for them. */
p a, td a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

p a.button,
p a.wp-element-button,
p a.vw-btn { text-decoration: none; }

/* Astra strips underlines from links inside WooCommerce content on singular pages with
   `.ast-single-post .entry-content .woocommerce a`, which outranks the rule above and
   silently removed the underline from the checkout and registration privacy links.
   Matched on specificity rather than fought with !important. */
.ast-single-post .entry-content .woocommerce p a,
.ast-single-post .entry-content .woocommerce li a,
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-wrapper a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The exceptions above sit below the Astra-beating selectors in specificity, so they lost
   and buttons came out underlined. A button is never a link in running text. D-33. */
.ast-single-post .entry-content .woocommerce p a.button,
.ast-single-post .entry-content .woocommerce p a.wp-element-button,
.ast-single-post .entry-content .woocommerce li a.button,
.ast-single-post .entry-content .woocommerce li a.wp-element-button,
.woocommerce a.button,
.woocommerce a.wp-element-button {
  text-decoration: none;
}

/* Astra colour defaults that fail WCAG 2.1 AA 1.4.3 against white. Ratios measured with
   axe before the change: breadcrumb 4.47:1, category label 3.35:1, star rating 2.0:1,
   struck-through price 2.1:1. The struck-through price keeps the line as its signal, so
   darkening it costs nothing. */
/* Astra dims two of these with opacity rather than with a colour, so darkening the
   colour alone changed nothing: opacity is applied after the colour and axe measures
   the result. The opacity has to come off and the muting be done in the colour. */
.woocommerce-js .woocommerce-breadcrumb,
.woocommerce-js .woocommerce-breadcrumb a { color: var(--muted); }

.woocommerce-js ul.products li.product .ast-woo-product-category,
.woocommerce-page ul.products li.product .ast-woo-product-category,
.ast-woo-product-category a { opacity: 1; color: var(--muted); }

.woocommerce .star-rating,
.woocommerce .star-rating span,
.star-rating,
.star-rating span { opacity: 1; color: #a35200; }

/* WCAG 2.4.7. The price slider handles, the filter button and the ordering select take
   keyboard focus but Astra and WooCommerce set outline:none on them, so five stops on
   the shop page were reachable with nothing shown on screen. The slider handles use
   :focus rather than :focus-visible because they are spans driven by jQuery UI and the
   browser does not treat them as keyboard-focusable for the newer selector. */
.woocommerce a:focus-visible,
.woocommerce button:focus-visible,
.woocommerce input:focus-visible,
.woocommerce select:focus-visible,
.widget_price_filter button:focus-visible,
.widget_price_filter input:focus-visible,
.ui-slider .ui-slider-handle:focus,
.price_slider .ui-slider-handle:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Three stops needed more specificity than the rule above: our own search field, which
   sits outside any .woocommerce wrapper, and the two slider handles, whose focus state
   jQuery UI carries on a class rather than only on :focus. */
.vw-utility .vw-search input#vw-s:focus-visible,
.widget_price_filter .price_slider .ui-slider-handle:focus,
.widget_price_filter .price_slider .ui-slider-handle.ui-state-focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* WooCommerce's stock green is #77a464, 2.89:1 on white. 5.09:1 and still clearly green. */
.woocommerce-js div.product .stock,
.woocommerce-js div.product .stock.in-stock { color: #4a7a35; }

.woocommerce-js ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del,
.price del,
.price del .woocommerce-Price-amount,
.price del bdi { opacity: 1; color: var(--muted); }

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

.vw-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.ico {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

/* ---------- Buttons ---------- */

.vw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.4rem;
  border-radius: var(--radius-ctl);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .2s var(--ease-out), transform .12s ease, border-color .2s var(--ease-out);
  white-space: nowrap;
}

.vw-btn--primary { background: var(--accent); color: #fff; }
.vw-btn--primary:hover, .vw-btn--primary:focus { background: var(--accent-hover); color: #fff; }

.vw-btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.vw-btn--ghost:hover, .vw-btn--ghost:focus { border-color: var(--ink); color: var(--ink); }



/* ---------- Utility row: search, account, cart ---------- */

.vw-utility { background: var(--paper); border-bottom: 1px solid var(--border); }

.vw-utility__row {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: .9rem;
}

.vw-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  max-width: 640px;
}

.vw-search__ico {
  position: absolute;
  left: .85rem;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--muted);
  pointer-events: none;
}

.vw-search input[type="search"] {
  flex: 1;
  padding: .75rem 1rem .75rem 2.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  font-size: var(--fs-sm);
  background: var(--surface);
  color: var(--ink);
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}

.vw-search input[type="search"]::placeholder { color: var(--muted); }

.vw-search input[type="search"]:focus {
  background: var(--paper);
  border-color: var(--accent);
  outline: none;
}

.vw-utility__links { display: flex; gap: 1.5rem; margin-left: auto; }

.vw-utility__links a {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
}

.vw-utility__links a:hover { color: var(--accent); }
.vw-utility__links .ico { width: 1.25rem; height: 1.25rem; }

.vw-utility__count {
  background: var(--accent);
  color: #fff;
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 700;
  min-width: 1.25rem;
  text-align: center;
  padding: .1rem .35rem;
  border-radius: 999px;
}

/* ---------- Service strip + category bar ---------- */

.vw-strip {
  background: var(--surface);
  border-block: 1px solid var(--border);
  font-size: var(--fs-xs);
}

.vw-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding-block: .7rem;
}

.vw-strip__item { display: flex; align-items: center; gap: .6rem; }
.vw-strip__ico { width: 1.25rem; height: 1.25rem; color: var(--accent); }
.vw-strip__item span span { display: block; color: var(--muted); }
.vw-strip__item strong { color: var(--ink); display: block; }

/* ---------- Filter sidebar ---------- */

.vw-brandfilter { list-style: none; margin: 0; padding: 0; }
.vw-brandfilter li { margin: 0; }

.vw-brandfilter a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .32rem 0;
  color: var(--body);
  text-decoration: none;
}

.vw-brandfilter a:hover, .vw-brandfilter a:focus { color: var(--accent); }

/* The tick is the only state signal, so it has to be a shape rather than a colour:
   WCAG 1.4.1 again, same reason the in-text links are underlined. */
.vw-brandfilter__box {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--paper);
  font-size: .7rem;
  line-height: 1;
}

.vw-brandfilter [aria-current="true"] { font-weight: 600; color: var(--ink); }
.vw-brandfilter [aria-current="true"] .vw-brandfilter__box {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.vw-brandfilter__count { color: var(--muted); margin-left: auto; }

.vw-catbar { border-bottom: 1px solid var(--border); background: var(--paper); }

.vw-catbar__row {
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  padding-block: .85rem;
  scrollbar-width: thin;
}

.vw-catbar__link {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.vw-catbar__link:hover, .vw-catbar__link:focus { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Section rhythm ---------- */

.vw-section { padding-block: clamp(3rem, 6vw, 5rem); }
.vw-section--surface { background: var(--surface); }

/* Warm band, so the deals section reads as a promotion at a glance. */
.vw-section--deal { background: var(--amber-pale); }

/* Second dark band, closing the page against the hero that opened it. */
.vw-section--deep {
  background:
    radial-gradient(110% 130% at 85% 0%, var(--deep-2) 0%, transparent 55%),
    var(--deep);
  color: var(--on-deep-muted);
}

.vw-section--deep h2,
.vw-section--deep strong { color: #fff; }
.vw-section--deep .vw-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .3); }
.vw-section--deep .vw-btn--ghost:hover { border-color: #fff; }

.vw-closer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.vw-closer p { margin: .6rem 0 0; max-width: 52ch; }

.vw-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.8rem;
}

/* Astra gives headings a full-width basis, which wrapped the "view all" link onto
   its own line. Out-specify it rather than reaching for !important. */
.vw-section__head > .vw-section__title {
  font-size: var(--fs-h2);
  margin: 0;
  flex: 0 1 auto;
  width: auto;
}

.vw-section__head > .vw-section__link {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  flex: none;
  margin-left: auto;
  white-space: nowrap;
}

.vw-eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 .6rem;
}

/* ---------- Hero ---------- */

/* The one bold move on the page. Everything below it stays quiet. */
.vw-hero {
  background:
    radial-gradient(120% 140% at 12% 0%, var(--deep-2) 0%, transparent 55%),
    var(--deep);
  color: var(--on-deep);
  border-bottom: 1px solid var(--deep);
}

.vw-hero .vw-hero__title { color: #fff; }
.vw-hero .vw-hero__lede { color: var(--on-deep-muted); }
.vw-hero .vw-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .3); }
.vw-hero .vw-btn--ghost:hover,
.vw-hero .vw-btn--ghost:focus { border-color: #fff; color: #fff; }

.vw-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.vw-hero__title { font-size: var(--fs-display); margin: 0 0 1rem; }
.vw-hero__lede { font-size: 1.125rem; max-width: 46ch; margin: 0 0 1.8rem; }
.vw-hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; }

.vw-hero__card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: center;
}

.vw-hero__art {
  aspect-ratio: 1 / 1;
  background: var(--accent-pale);
  border-radius: var(--radius-card);
  display: grid;
  place-items: center;
  color: var(--accent);
}

.vw-hero__art .ico { width: 62%; height: 62%; }

.vw-hero__meta h2 { font-size: var(--fs-h3); margin: .35rem 0 .5rem; }
.vw-hero__meta p { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 .9rem; }

/* ---------- Category grid ---------- */

.vw-cats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.vw-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: 1.4rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--paper);
  text-decoration: none;
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}

.vw-cat:focus-visible { border-color: var(--accent); }
/* Tinted tile behind each glyph: the grid was six white boxes in a row. */
.vw-cat .ico {
  width: 2.4rem;
  height: 2.4rem;
  color: var(--accent);
  box-sizing: content-box;
  padding: .7rem;
  border-radius: 999px;
  background: var(--accent-pale);
  transition: background-color .2s var(--ease-out);
}

.vw-cat:hover .ico { background: var(--accent-tint); }
.vw-cat strong { color: var(--ink); font-size: var(--fs-sm); }
.vw-cat span { color: var(--muted); font-size: var(--fs-xs); }

/* ---------- Product cards (also used by the shop archive) ---------- */

.vw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.vw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}



/* Square, always. A letterboxed product image is what makes a card look half-empty. */
.vw-card__art {
  aspect-ratio: 1 / 1;
  /* Soft tint, not flat white: a wall of white cards has no depth, and the tint
     gives the glyph something to sit on. */
  background: radial-gradient(80% 80% at 50% 40%, var(--accent-pale) 0%, var(--paper) 100%);
  display: grid;
  place-items: center;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
}

.vw-card__art .ico { width: 52%; height: 52%; }

.vw-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.vw-card__brand { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

.vw-card__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
}

.vw-card__title a { color: var(--ink); text-decoration: none; }
.vw-card__title a:hover { color: var(--accent); }

.vw-card__rating { display: flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); color: var(--muted); }
.vw-card__rating .ico { width: .95rem; height: .95rem; color: #e8a020; fill: #e8a020; }

.vw-card__price { margin-top: auto; display: flex; align-items: baseline; gap: .5rem; }
.vw-card__now { font-size: 1.25rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.vw-card__was { font-size: var(--fs-xs); color: var(--muted); text-decoration: line-through; }

.vw-card__stock { font-size: var(--fs-xs); color: var(--stock); font-weight: 600; }
.vw-card__stock--low { color: #b45309; }

.vw-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  background: var(--sale);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: .3rem .6rem;
  border-radius: 999px;
  z-index: 1;
}

/* ---------- Security band (our differentiator, per the spec) ---------- */

.vw-secure__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.vw-secure__grid p { max-width: var(--measure); }

.vw-secure__points { display: grid; gap: 1rem; }

.vw-secure__point {
  display: flex;
  gap: 1rem;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.25rem;
}

.vw-secure__point .ico { color: var(--accent); }
.vw-secure__point strong { display: block; color: var(--ink); margin-bottom: .2rem; }
.vw-secure__point span { font-size: var(--fs-sm); }

/* ---------- Editorial 2-up ---------- */

.vw-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.25rem;
}

.vw-split__feature {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  background: var(--paper);
}

.vw-split__art {
  aspect-ratio: 1 / 1;
  background: var(--accent-pale);
  display: grid;
  place-items: center;
  color: var(--accent);
}

.vw-split__art .ico { width: 55%; height: 55%; }
.vw-split__copy { padding: 1.75rem; }
.vw-split__copy h3 { font-size: var(--fs-h3); margin: .4rem 0 .6rem; }
.vw-split__copy p { font-size: var(--fs-sm); margin: 0 0 1.2rem; }

.vw-list { display: grid; gap: .75rem; align-content: start; }

.vw-list__row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: .85rem 1rem;
  background: var(--paper);
  text-decoration: none;
}

.vw-list__row:hover { border-color: var(--accent); }
.vw-list__row .ico { width: 2rem; height: 2rem; color: var(--accent); }
.vw-list__row strong { color: var(--ink); font-size: var(--fs-sm); display: block; }
.vw-list__row small { color: var(--muted); }
.vw-list__price { font-weight: 700; color: var(--ink); }

/* ---------- WooCommerce archive: reuse the card look ---------- */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}

.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.woocommerce ul.products li.product img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--surface);
  border-radius: var(--radius-ctl);
  margin-bottom: .6rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  padding: 0;
}

/* Astra wraps everything below the image in .astra-shop-summary-wrap, so the button's
   margin-top:auto was pushing against the wrapper rather than the card and the cards in
   a row ended at different heights. The wrapper has to stretch for that to work. */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
}

/* Astra sets its own `order` on the rating, which made sense while the wrapper was not a
   flex container and put the stars under the button once it became one. Stated in full
   here rather than left to Astra's defaults and DOM order disagreeing. */
.woocommerce ul.products li.product .ast-woo-product-category { order: 1; }
.woocommerce ul.products li.product .ast-loop-product__link,
.woocommerce ul.products li.product .woocommerce-loop-product__title { order: 2; }
.woocommerce ul.products li.product .review-rating { order: 3; }
.woocommerce ul.products li.product .price { order: 4; }
.woocommerce ul.products li.product .button { order: 5; }

.woocommerce ul.products li.product .price { color: var(--ink); font-weight: 700; font-size: 1.05rem; }
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 400; font-size: var(--fs-xs); }

/* The GST suffix on its own line, so a long price cannot reflow the card. */
.woocommerce ul.products li.product .woocommerce-price-suffix {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--muted);
}

.woocommerce ul.products li.product .button {
  margin-top: auto;
  padding-inline: .8rem;
  white-space: nowrap;
}

/* Glyph stand-in for product photography. */
.vw-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border-radius: var(--radius-ctl);
  color: var(--accent);
  margin-bottom: .6rem;
}

.vw-thumb .ico { width: 50%; height: 50%; }
.vw-thumb--single { border-radius: var(--radius-card); }
.vw-thumb--mini { width: 64px; margin: 0; }

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-ctl);
  font-weight: 600;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--accent-hover); color: #fff; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .vw-cats { grid-template-columns: repeat(3, 1fr); }
  .vw-grid,
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
  .vw-split { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .vw-hero__grid,
  .vw-secure__grid { grid-template-columns: 1fr; }
  .vw-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .vw-cats { grid-template-columns: repeat(2, 1fr); }
  .vw-grid,
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .vw-split__feature { grid-template-columns: 1fr; }
  .vw-section__head { flex-direction: column; align-items: flex-start; }

  /* Search and the account/cart links each get a full row: side by side at 390 the
     input collapsed to about four characters. */
  .vw-utility__row { flex-wrap: wrap; gap: .75rem; }
  .vw-search { flex: 1 1 100%; max-width: none; order: 2; }
  .vw-utility__links { margin-left: 0; order: 1; width: 100%; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Empty states ----------
   Core prints one grey line and stops. These get a heading, a reason and an exit. */

.vw-empty {
  padding: 3.5rem 0 4.5rem;
  max-width: 46ch;
}

.vw-empty__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 .5rem;
}

.vw-empty__body {
  color: var(--muted);
  margin: 0 0 1.5rem;
}

/* ---------- 404 ---------- */

.vw-404 {
  padding: 4rem 0 6rem;
  max-width: 56ch;
}

.vw-404__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.vw-404__body { color: var(--muted); margin: 0 0 2rem; }

.vw-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 0 0 3rem;
}

.vw-404__catslabel {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .75rem;
}

.vw-404__cats ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.vw-404__cats a {
  display: inline-block;
  padding: .45rem .9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--ink);
  text-decoration: none;
}

.vw-404__cats a:hover,
.vw-404__cats a:focus {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- Footer navigation ---------- */

.vw-footnav { padding-top: 1.5rem; }

.vw-footnav__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.75rem;
  margin: 0 0 .9rem;
}

.vw-footnav a {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-sm);
}

.vw-footnav a:hover,
.vw-footnav a:focus {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vw-footcredit {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}