/*
Theme Name: White Vape Co
Theme URI: https://www.whitevapeco.uk
Description: Lean, professional Storefront child theme for White Vape Co - replaces the YOOtheme build to cut render-blocking bloat while keeping the brand look. Hand-styled, no page-builder.
Author: Avent Marketing
Author URI: https://aventmarketing.co.uk
Template: storefront
Version: 1.2.3
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: whitevapeco
*/

/* =========================================================================
   White Vape Co - design system
   ========================================================================= */
:root {
  --wvc-navy:        #171f30;
  --wvc-navy-2:      #1f2942;
  --wvc-navy-top:    #10161f;
  --wvc-indigo:      #171258;
  --wvc-ink:         #090e15;
  --wvc-muted:       #5a6270;
  --wvc-orange:      #ee5a24;
  --wvc-orange-dk:   #d64a17;
  --wvc-line:        #e6e8ee;
  --wvc-surface:     #ffffff;
  --wvc-surface-2:   #f4f6fa;
  --wvc-success:     #1f9d55;

  --wvc-font-body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wvc-font-head: "Bakbak One", var(--wvc-font-body);

  --wvc-maxw: 1280px;
  --wvc-gap: clamp(1rem, 3vw, 2rem);
  --wvc-radius: 10px;
  --wvc-radius-sm: 6px;
  --wvc-shadow: 0 1px 2px rgba(9,14,21,.06), 0 6px 20px rgba(9,14,21,.06);
  --wvc-shadow-lg: 0 12px 34px rgba(9,14,21,.16);
}

body { font-family: var(--wvc-font-body); color: var(--wvc-ink); background: var(--wvc-surface); -webkit-font-smoothing: antialiased; line-height: 1.55; }
h1,h2,h3,h4 { font-family: var(--wvc-font-head); color: var(--wvc-indigo); font-weight: 400; line-height: 1.1; letter-spacing: .01em; }
a { color: var(--wvc-orange); text-decoration: none; }
a:hover { color: var(--wvc-orange-dk); }
.wvc-container { max-width: var(--wvc-maxw); margin-inline: auto; padding-inline: var(--wvc-gap); }

/* Buttons */
.wvc-btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce .button, .woocommerce #respond input#submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  background: var(--wvc-orange); color: #fff; font-weight: 700; border: 0;
  border-radius: var(--wvc-radius-sm); padding: .75em 1.4em; line-height: 1.1;
  transition: background .15s ease, transform .05s ease;
}
.wvc-btn:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover, .woocommerce #respond input#submit:hover { background: var(--wvc-orange-dk); color: #fff; }
.wvc-btn:active { transform: translateY(1px); }
.wvc-btn--ghost { background: transparent; color: var(--wvc-indigo); border: 1.5px solid var(--wvc-line); }
.wvc-btn--ghost:hover { border-color: var(--wvc-indigo); background: var(--wvc-surface-2); }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header { background: var(--wvc-navy); border: 0; padding: 0; margin: 0; position: sticky; top: 0; z-index: 900; transition: box-shadow .2s ease; }
body.wvc-scrolled .site-header { box-shadow: 0 6px 24px rgba(9,14,21,.30); }

/* Storefront's header widget area held a duplicate search widget - we have search in the bar. */
.header-widget-region { display: none; }
/* Trust bar sits flush under the nav. */
.wvc-trust { margin-top: 0; }

/* Row 1 - utility topbar */
.wvc-topbar { background: var(--wvc-navy-top); border-bottom: 1px solid rgba(255,255,255,.06); }
.wvc-topbar__inner { display: flex; align-items: center; justify-content: flex-end; gap: 1.4rem; min-height: 36px; }
.wvc-top-link { display: inline-flex; align-items: center; gap: .45rem; color: #aeb7c7; font-size: .8rem; font-weight: 600; letter-spacing: .01em; }
.wvc-top-link:hover { color: #fff; }
.wvc-top-link svg { flex: 0 0 auto; opacity: .9; }
.wvc-top-cart { position: relative; }
.wvc-top-cart .wvc-cart__count { position: relative; top: 0; right: 0; margin-left: .1rem; min-width: 18px; height: 18px; padding: 0 5px; background: var(--wvc-orange); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; border-radius: 9px; }

/* Row 2 - main bar */
.wvc-header-inner { display: flex; align-items: center; gap: clamp(.8rem, 2.4vw, 2rem); min-height: 82px; }
.wvc-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.wvc-logo img, .wvc-logo .custom-logo { max-height: 64px; width: auto; height: auto; display: block; }
.wvc-logo__text { color: #fff; font-family: var(--wvc-font-head); font-size: 1.6rem; }
.wvc-logo__text b { color: var(--wvc-orange); }

/* Primary nav */
.wvc-nav { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .35rem; }

/* Home icon button, sits at the head of the nav */
.wvc-home {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 38px; height: 38px; color: #dfe4ee; border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.wvc-home svg { flex: 0 0 auto; }
.wvc-home:hover, .wvc-home.is-current { color: #fff; background: rgba(255,255,255,.08); }
.wvc-home::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 3px; border-radius: 3px;
  background: var(--wvc-orange); transform: scaleX(0); transform-origin: center;
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.wvc-home:hover::after, .wvc-home.is-current::after { transform: scaleX(1); }

.wvc-menu { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(.2rem, 1vw, 1rem); margin: 0; padding: 0; list-style: none; }
.wvc-menu > li { position: relative; }
.wvc-menu > li > a {
  position: relative; display: block; color: #dfe4ee;
  font-size: .84rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  padding: .55rem .55rem; transition: color .15s ease;
}
.wvc-menu > li > a::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 4px; height: 3px; border-radius: 3px;
  background: var(--wvc-orange); transform: scaleX(0); transform-origin: center;
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.wvc-menu > li:hover > a, .wvc-menu > li:focus-within > a,
.wvc-menu > li.current-menu-item > a, .wvc-menu > li.current-menu-parent > a,
.wvc-menu > li.current-product_cat-ancestor > a { color: #fff; }
.wvc-menu > li:hover > a::after, .wvc-menu > li:focus-within > a::after,
.wvc-menu > li.current-menu-item > a::after, .wvc-menu > li.current-menu-parent > a::after,
.wvc-menu > li.current-product_cat-ancestor > a::after { transform: scaleX(1); }

/* Dropdown card */
.wvc-menu li.menu-item-has-children > a { padding-right: 1.1rem; }
.wvc-menu li.menu-item-has-children > a::before {
  content: ""; position: absolute; right: .35rem; top: 50%; width: 6px; height: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg); opacity: .7;
}
.wvc-menu ul {
  position: absolute; top: calc(100% + 2px); left: 0; z-index: 30; min-width: 240px;
  margin: 0; padding: .4rem; list-style: none;
  background: #fff; border-radius: var(--wvc-radius); border-top: 3px solid var(--wvc-orange);
  box-shadow: var(--wvc-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.wvc-menu li:hover > ul, .wvc-menu li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.wvc-menu ul li { position: relative; }
.wvc-menu ul a {
  display: block; color: var(--wvc-ink); font-weight: 600; font-size: .92rem;
  padding: .6rem .8rem; border-radius: var(--wvc-radius-sm); transition: background .12s ease, color .12s ease, padding .12s ease;
}
.wvc-menu ul a:hover { background: var(--wvc-surface-2); color: var(--wvc-indigo); padding-left: 1.05rem; }
.wvc-menu ul ul { top: -.4rem; left: 100%; }

/* Search (right of main bar) */
.wvc-search { display: flex; align-items: center; flex: 0 0 auto; width: clamp(180px, 22vw, 300px);
  background: #fff; border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255,255,255,.06); }
.wvc-search input[type=search] { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; padding: .6rem .2rem .6rem 1rem; font-size: .92rem; color: var(--wvc-ink); }
.wvc-search button { flex: 0 0 auto; border: 0; cursor: pointer; background: var(--wvc-orange); color: #fff; display: inline-flex; align-items: center; justify-content: center; width: 46px; align-self: stretch; transition: background .15s ease; }
.wvc-search button:hover { background: var(--wvc-orange-dk); }
/* Keep the magnifier from being flex-squashed to 0 width. */
.wvc-search button svg { flex: 0 0 auto; width: 20px; height: 20px; display: block; }

/* Burger */
.wvc-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; color: #eef1f6; border-radius: 8px; cursor: pointer; }
.wvc-burger { display: none; flex-direction: column; gap: 4px; }
.wvc-burger span { width: 22px; height: 2px; background: #eef1f6; border-radius: 2px; transition: .18s ease; }
body.wvc-mnav-open .wvc-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.wvc-mnav-open .wvc-burger span:nth-child(2) { opacity: 0; }
body.wvc-mnav-open .wvc-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile nav */
.wvc-mobile-nav { display: none; background: var(--wvc-navy-2); padding: 1rem; }
.wvc-mobile-nav .wvc-search { width: 100%; margin-bottom: 1rem; }
.wvc-mobile-menu { list-style: none; margin: 0; padding: 0; }
.wvc-mobile-menu li { border-bottom: 1px solid rgba(255,255,255,.08); }
.wvc-mobile-menu a { display: block; color: #eef1f6; font-weight: 600; padding: .85rem .2rem; }
.wvc-mobile-menu ul { list-style: none; margin: 0 0 .5rem .8rem; padding: 0; }
.wvc-mobile-menu ul a { color: #b9c2d4; font-weight: 500; padding: .55rem .2rem; }
.wvc-mobile-nav__foot { margin-top: 1rem; display: flex; gap: 1.5rem; }
.wvc-mobile-nav__foot a { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; }

/* =========================================================================
   TRUST BAR
   ========================================================================= */
.wvc-trust { background: #fff; border-bottom: 3px solid var(--wvc-orange); }
.wvc-trust__row { display: flex; align-items: stretch; }
.wvc-trust__item { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: .7rem 1rem; text-align: center; border-left: 1px solid var(--wvc-line); }
.wvc-trust__item:first-child { border-left: 0; }
.wvc-trust__item strong { color: var(--wvc-indigo); font-size: .98rem; }
.wvc-trust__item span { color: var(--wvc-muted); font-size: .82rem; }

/* =========================================================================
   FOOTER credit
   ========================================================================= */
.wvc-credit { background: var(--wvc-navy); color: #aab3c4; font-size: .85rem; padding: 1rem 0; text-align: center; }

/* =========================================================================
   CATEGORY intro / outro
   ========================================================================= */
.woocommerce-products-header { padding-top: 1.5rem; }
.woocommerce-products-header__title.page-title {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  font-family: var(--wvc-font-head); color: var(--wvc-indigo);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 400; margin: 0 0 .6rem;
}
.woocommerce-products-header__title.page-title::before { content: ""; flex: 0 0 auto; width: 6px; align-self: stretch; min-height: 1.3em; background: var(--wvc-orange); border-radius: 3px; }
.term-description { color: var(--wvc-muted); max-width: 70ch; margin: 0 auto 1.5rem; text-align: center; }
.wvc-cat-outro { margin: 3rem 0 1rem; }
.wvc-cat-outro__inner { max-width: 900px; margin-inline: auto; color: var(--wvc-ink); }
.wvc-cat-outro__inner h2, .wvc-cat-outro__inner h3 { margin: 1.6rem 0 .6rem; }
.wvc-cat-outro__inner h2 { font-size: 1.5rem; } .wvc-cat-outro__inner h3 { font-size: 1.2rem; }
.wvc-cat-outro__inner p, .wvc-cat-outro__inner li { color: #333a45; line-height: 1.7; }
.wvc-cat-outro__inner a { color: var(--wvc-orange); font-weight: 600; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 980px) {
  .wvc-nav, .wvc-header-inner > .wvc-search { display: none; }
  .wvc-burger { display: inline-flex; }
  .wvc-mobile-nav:not([hidden]) { display: block; }
  .wvc-header-inner { min-height: 68px; }
  .wvc-logo { flex: 1; }
  .wvc-logo img, .wvc-logo .custom-logo { max-height: 48px; }
}
@media (max-width: 620px) {
  .wvc-top-link span:not(.wvc-cart__count) { display: none; }
  .wvc-trust__item span { display: none; }
  .wvc-trust__item { padding: .5rem; }
}

/* =========================================================================
   NAV FIT - keep the primary menu on one line next to the logo + search.
   ========================================================================= */
/* The house icon replaces the text "Home" item. */
.wvc-menu > li.menu-item-home { display: none; }

.wvc-menu { flex-wrap: nowrap; gap: clamp(.1rem, .7vw, .7rem); }
.wvc-menu > li > a { font-size: .8rem; padding: .5rem .4rem; white-space: nowrap; }
.wvc-menu > li > a::after { left: .35rem; right: .35rem; }
.wvc-menu li.menu-item-has-children > a { padding-right: .95rem; }
.wvc-menu li.menu-item-has-children > a::before { right: .25rem; }

/* Let the search shrink before the nav has to wrap. */
.wvc-header-inner > .wvc-search { width: clamp(150px, 18vw, 260px); }

@media (max-width: 1180px) {
  .wvc-menu > li > a { font-size: .74rem; padding: .5rem .3rem; letter-spacing: .02em; }
  .wvc-header-inner > .wvc-search { width: clamp(140px, 15vw, 210px); }
  .wvc-logo img, .wvc-logo .custom-logo { max-height: 56px; }
}

/* Single-line nav, enforced. Storefront/plugin CSS loads after ours, so these
   need the extra specificity to stick. */
.site-header .wvc-nav ul.wvc-menu {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  overflow: visible;
}
.site-header .wvc-nav ul.wvc-menu > li { flex: 0 0 auto; }
.site-header .wvc-nav ul.wvc-menu > li > a { white-space: nowrap; }
.site-header .wvc-nav ul.wvc-menu > li.menu-item-home { display: none !important; }
/* Give the nav the room it needs before the search box. */
.site-header .wvc-header-inner > .wvc-search { flex: 0 1 auto; width: clamp(140px, 16vw, 240px); }

/* Nav keeps its full width; the search box absorbs whatever space is left. */
.site-header .wvc-header-inner { flex-wrap: nowrap; }
.site-header .wvc-nav { flex: 0 0 auto; min-width: 0; }
.site-header .wvc-header-inner > .wvc-search {
  flex: 1 1 auto; width: auto; min-width: 46px; max-width: 260px; margin-left: auto;
}
@media (max-width: 1240px) {
  .site-header .wvc-nav ul.wvc-menu > li > a { font-size: .72rem; padding: .5rem .26rem; letter-spacing: .01em; }
  .site-header .wvc-nav ul.wvc-menu { gap: .1rem; }
  .site-header .wvc-header-inner > .wvc-search { max-width: 190px; }
}

/* =========================================================================
   MEGA MENU - one column per sub-menu (e.g. E-Liquids).
   ========================================================================= */
.wvc-menu > li.wvc-has-mega { position: relative; }
.wvc-menu > li.wvc-has-mega > ul {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: .25rem 2rem; padding: 1.4rem 1.6rem;
  width: max-content; max-width: min(920px, 92vw);
}
.wvc-menu > li.wvc-has-mega > ul > li { flex: 0 1 auto; min-width: 158px; max-width: 230px; }
.wvc-menu > li.wvc-has-mega > ul > li > a {
  font-family: var(--wvc-font-head); color: var(--wvc-indigo);
  font-size: .9rem; text-transform: uppercase; letter-spacing: .02em;
  padding: 0 0 .45rem; margin-bottom: .5rem; border-radius: 0;
  border-bottom: 2px solid var(--wvc-orange);
}
.wvc-menu > li.wvc-has-mega > ul > li > a:hover { background: transparent; padding-left: 0; color: var(--wvc-orange); }
.wvc-menu > li.wvc-has-mega > ul li.menu-item-has-children > a::before { display: none; }
.wvc-menu > li.wvc-has-mega > ul ul {
  position: static; left: auto; top: auto; z-index: auto;
  opacity: 1; visibility: visible; transform: none; transition: none;
  min-width: 0; padding: 0; margin: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.wvc-menu > li.wvc-has-mega > ul ul a {
  font-weight: 500; font-size: .875rem; color: #333a45; padding: .28rem .45rem;
}
.wvc-menu > li.wvc-has-mega > ul ul a:hover { color: var(--wvc-indigo); background: var(--wvc-surface-2); padding-left: .7rem; }
.wvc-menu > li.wvc-has-mega:nth-last-child(-n+3) > ul { left: auto; right: 0; }

/* Mega panel as a tidy 4-column grid (overrides the flex fallback above). */
.wvc-menu > li.wvc-has-mega > ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  align-items: start;
  gap: 1.25rem 1.75rem;
  width: 860px; max-width: 92vw;
}
.wvc-menu > li.wvc-has-mega > ul > li { min-width: 0; max-width: none; }
/* A long list (9+ items) splits into two sub-columns so the panel stays short. */
.wvc-menu > li.wvc-has-mega > ul > li:has(> ul > li:nth-child(9)) { grid-column: span 2; }
.wvc-menu > li.wvc-has-mega > ul > li:has(> ul > li:nth-child(9)) > ul { columns: 2; column-gap: 1.5rem; }

/* Grouped "More" column: childless second-level links share one column. */
.wvc-menu > li.wvc-has-mega > ul > li.wvc-mega-more > ul { columns: 1; }
.wvc-menu > li.wvc-has-mega > ul > li.wvc-mega-more > ul a { font-weight: 600; }

/* =========================================================================
   MOBILE MENU - category icons (rebuild of the old site's icon menu).
   ========================================================================= */
.wvc-mobile-menu > li > a { display: flex; align-items: center; gap: .7rem; }
.wvc-mobile-menu .wvc-mi {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,.07); color: var(--wvc-orange);
}
.wvc-mobile-menu > li > a:hover .wvc-mi { background: var(--wvc-orange); color: #fff; }
.wvc-mobile-menu .wvc-mi svg { flex: 0 0 auto; }
.wvc-mobile-menu .wvc-ml { flex: 1 1 auto; min-width: 0; }
.wvc-mobile-menu ul { margin-left: 2.6rem; }

/* =========================================================================
   MOBILE MENU - accordion (sub-menus collapsed by default)
   ========================================================================= */
.wvc-mobile-menu li { position: relative; }
.wvc-mobile-menu ul { display: none; }
.wvc-mobile-menu li.is-open > ul { display: block; }
.wvc-mobile-menu li.menu-item-has-children > a { padding-right: 46px; }
.wvc-acc {
  position: absolute; top: 4px; right: 0; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: #cfd6e4;
}
.wvc-acc::before {
  content: ""; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
}
.wvc-mobile-menu li.is-open > .wvc-acc { color: var(--wvc-orange); }
.wvc-mobile-menu li.is-open > .wvc-acc::before { transform: translateY(2px) rotate(-135deg); }

/* =========================================================================
   FOCUS RINGS - brand orange (replaces the browser/Storefront default)
   ========================================================================= */
.wvc-burger:focus, .wvc-burger:focus-visible,
.wvc-icon-btn:focus, .wvc-icon-btn:focus-visible,
.wvc-home:focus, .wvc-home:focus-visible,
.wvc-top-link:focus, .wvc-top-link:focus-visible,
.wvc-acc:focus, .wvc-acc:focus-visible,
.wvc-search input:focus, .wvc-search button:focus,
.wvc-menu a:focus, .wvc-mobile-menu a:focus {
  outline: 2px solid var(--wvc-orange) !important;
  outline-offset: 2px;
  box-shadow: none !important;
  border-color: var(--wvc-orange) !important;
}
.wvc-burger { border-radius: 8px; }
.wvc-burger:hover { background: rgba(255,255,255,.1); }

/* =========================================================================
   MOBILE - search lives in the navbar (logo | search | burger)
   ========================================================================= */
@media (max-width: 980px) {
  .site-header .wvc-header-inner > .wvc-search {
    display: flex; flex: 1 1 auto; width: auto;
    min-width: 0; max-width: none; margin-left: 0;
  }
  .site-header .wvc-header-inner > .wvc-search input[type=search] { padding-left: .8rem; font-size: .88rem; }
  .site-header .wvc-header-inner > .wvc-search button { width: 42px; }
  .site-header .wvc-logo { flex: 0 0 auto; }
  .site-header .wvc-header-inner { gap: .6rem; }
  /* The dropdown no longer needs its own search field. */
  .wvc-mobile-nav .wvc-search { display: none; }
}
@media (max-width: 420px) {
  .site-header .wvc-logo img, .site-header .wvc-logo .custom-logo { max-height: 38px; }
}

/* Storefront gives every form a bottom margin (1.618em), which pushed the
   search pill above the logo/burger centre line. Zero it everywhere. */
.wvc-search, .site-header .wvc-search, .wvc-mobile-nav .wvc-search {
  margin: 0 !important; align-self: center;
}
.wvc-header-inner > .wvc-search { align-self: center; }

/* "Shop all X" link at the top of each mobile sub-menu. */
.wvc-mobile-menu li.wvc-mobile-all > a {
  color: var(--wvc-orange) !important; font-weight: 700; font-size: .86rem;
  text-transform: uppercase; letter-spacing: .02em;
}
.wvc-mobile-menu li.wvc-mobile-all { border-bottom-color: rgba(255,255,255,.12); }
/* Parent rows behave like toggles now. */
.wvc-mobile-menu li.menu-item-has-children > a { cursor: pointer; }

/* =========================================================================
   HEADER / TRUST ROW spacing + wider search (desktop)
   ========================================================================= */
/* Storefront sets .site-header margin-bottom: 4.235801032em (~68px). Kill it
   so the trust strip sits directly under the navbar. */
body .site-header { margin-bottom: 0 !important; }

/* Give the header bar more room than the 1280 content container so the
   search field can breathe on wide screens. */
.site-header .wvc-header-inner {
  max-width: min(1560px, 97vw);
  gap: clamp(.6rem, 1.4vw, 1.4rem);
}
.site-header .wvc-header-inner > .wvc-search {
  flex: 1 1 220px; min-width: 190px; max-width: 460px;
}

/* Trust strip: compact. */
.wvc-trust__item { padding: .55rem 1rem; }

/* =========================================================================
   Hide the WordPress page title on the front page (it read "index").
   ========================================================================= */
body.home .entry-header,
body.home h1.entry-title,
body.home .page-title { display: none !important; }
body.home .site-content .entry-content { padding-top: 0; margin-top: 0; }

/* Storefront caps every container at .col-full (~1064px). Widen it inside the
   header (and the trust strip) so the nav + search use the full window. */
.site-header .col-full,
.wvc-trust .col-full {
  max-width: min(1560px, 96vw) !important;
  width: 100%;
  padding-left: 0; padding-right: 0;
}
.site-header .wvc-header-inner { width: 100%; max-width: none; }
.site-header .wvc-header-inner > .wvc-search { flex: 1 1 240px; min-width: 190px; max-width: 480px; }

/* =========================================================================
   STICKY HEADER FIX
   body + .hfeed.site carry overflow-x:hidden, which makes them scroll
   containers and stops position:sticky working. `clip` avoids that.
   ========================================================================= */
html, body, .hfeed.site { overflow-x: clip; overflow-y: visible; }

/* =========================================================================
   HOMEPAGE SECTIONS - alternating bands so each block reads as its own
   section. Wrapped by JS into .wvc-sec / .wvc-sec--tint.
   ========================================================================= */
.wvc-sec { padding: 3.2rem 0 3.4rem; }
.wvc-sec--tint {
  background: var(--wvc-surface-2);
  box-shadow: 0 0 0 100vmax var(--wvc-surface-2);
  clip-path: inset(0 -100vmax);
}

/* Section headings: centred, with an orange underline. */
.wvc-sec__title {
  position: relative; text-align: center !important;
  font-family: var(--wvc-font-head); color: var(--wvc-indigo);
  font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.15;
  margin: 0 auto 1.9rem; padding-bottom: .75rem; max-width: 22ch;
}
.wvc-sec__title::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 68px; height: 4px; border-radius: 2px; background: var(--wvc-orange);
}
/* Newsletter heading is shouty caps in the content - normalise it. */
.wvc-sec__title { text-transform: none; letter-spacing: .01em; }

/* Brand logo strip sits nicely on the tint. */
.wvc-sec .wvc-brands { padding-top: 0 !important; }

/* =========================================================================
   FOOTER - navy, matches the header.
   ========================================================================= */
.site-footer {
  background: var(--wvc-navy); color: #c3cbd9;
  padding-top: 2.8rem; padding-bottom: .5rem; margin-top: 0;
  border: 0;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--wvc-orange); }
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer .widget-title {
  color: #fff; font-family: var(--wvc-font-head); font-size: 1.05rem;
  letter-spacing: .02em; margin-bottom: .9rem;
}
.site-footer .widget ul { list-style: none; margin: 0; padding: 0; }
.site-footer .widget li { padding: .28rem 0; }
.site-footer .col-full { max-width: min(1560px, 96vw) !important; }

/* =========================================================================
   STICKY HEADER - translucent once scrolled, so the page shows through.
   ========================================================================= */
.site-header, .wvc-topbar { transition: background-color .25s ease, box-shadow .2s ease; }
body.wvc-scrolled .site-header {
  background-color: rgba(23, 31, 48, .86);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}
body.wvc-scrolled .wvc-topbar { background-color: rgba(16, 22, 31, .78); }
/* Keep the dropdown cards fully opaque against the translucent bar. */
body.wvc-scrolled .wvc-menu ul { background: #fff; }

/* =========================================================================
   PAGE WIDTH - Storefront caps every container at .col-full (~1064px), which
   was forcing the brand strip onto two rows. Match the header width.
   ========================================================================= */
.col-full { max-width: min(1560px, 96vw) !important; }

/* Brand logo strip: one row, evenly spread. */
.wvc-sec .wvc-brands,
.wvc-brands {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  gap: clamp(.4rem, 1.2vw, 1.4rem); width: 100%; max-width: none !important;
}
.wvc-brands > * { flex: 1 1 0; min-width: 0; max-width: 150px; }
.wvc-brands img { width: 100%; height: auto; }
@media (max-width: 900px) {
  .wvc-brands { flex-wrap: wrap; }
  .wvc-brands > * { flex: 0 0 auto; width: 88px; }
}

/* =========================================================================
   NEWSLETTER - centre the block and its form.
   ========================================================================= */
.wvc-sec--newsletter, .wvc-sec--newsletter * { text-align: center; }
.wvc-sec--newsletter form,
.wvc-sec--newsletter .wvc-news,
.wvc-sec--newsletter > div {
  margin-left: auto; margin-right: auto;
}
.wvc-sec--newsletter form {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
  max-width: 620px;
}
.wvc-sec--newsletter input[type=email], .wvc-sec--newsletter input[type=text] {
  flex: 1 1 260px; min-width: 0; padding: .8rem 1rem;
  border: 1.5px solid var(--wvc-line); border-radius: var(--wvc-radius-sm);
}

/* =========================================================================
   FOOTER LAYOUT - even columns, aligned to the page width.
   ========================================================================= */
.site-footer .footer-widgets {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem clamp(1.5rem, 3vw, 3rem); float: none; width: 100%;
}
.site-footer .footer-widgets .block,
.site-footer .footer-widgets .widget {
  float: none !important; width: auto !important; margin: 0 0 1rem !important;
  padding: 0 !important;
}
.site-footer .footer-widgets.col-2 .block, .site-footer .footer-widgets.col-3 .block,
.site-footer .footer-widgets.col-4 .block { width: auto !important; margin-right: 0 !important; }
.site-footer .widget li a { color: #c3cbd9; }
.site-footer .widget li a:hover { color: var(--wvc-orange); }
.wvc-credit { border-top: 1px solid rgba(255,255,255,.08); margin-top: 1.5rem; }

/* =========================================================================
   SECTION RHYTHM - stronger contrast so bands read clearly.
   ========================================================================= */
:root { --wvc-tint: #eaeff7; }
.wvc-sec--tint {
  background: var(--wvc-tint);
  box-shadow: 0 0 0 100vmax var(--wvc-tint);
  clip-path: inset(0 -100vmax);
}
/* Headings span the section, never squeezed into a narrow column. */
.wvc-sec__title { max-width: none !important; width: 100%; }

/* Newsletter: navy band for a strong break in the page rhythm. */
.wvc-sec--newsletter {
  background: var(--wvc-navy) !important;
  box-shadow: 0 0 0 100vmax var(--wvc-navy);
  clip-path: inset(0 -100vmax);
  color: #e8ecf4;
}
.wvc-sec--newsletter .wvc-sec__title { color: #fff; }
.wvc-sec--newsletter p, .wvc-sec--newsletter div { color: #c3cbd9; }
.wvc-sec--newsletter input[type=email], .wvc-sec--newsletter input[type=text] { border-color: transparent; }

/* =========================================================================
   BLOG SLIDER - scroll-snap strip (replaces the old UIkit slider).
   ========================================================================= */
.wvc-blog-wrap { position: relative; }
.wvc-blog-strip {
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; padding: .25rem .2rem 1.1rem; margin: 0; list-style: none;
}
.wvc-blog-strip::-webkit-scrollbar { height: 8px; }
.wvc-blog-strip::-webkit-scrollbar-thumb { background: #c9d2e2; border-radius: 4px; }
.wvc-blog-card {
  scroll-snap-align: start; flex: 0 0 clamp(250px, 25vw, 320px);
  background: #fff; border: 1px solid var(--wvc-line); border-radius: var(--wvc-radius);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--wvc-shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.wvc-blog-card:hover { transform: translateY(-3px); box-shadow: var(--wvc-shadow-lg); }
.wvc-blog-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.wvc-blog-card__body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .45rem; }
.wvc-blog-card h3 { font-size: 1.02rem; line-height: 1.25; margin: 0; color: var(--wvc-indigo); }
.wvc-blog-card time { color: var(--wvc-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.wvc-blog-card p { margin: 0; color: #333a45; font-size: .89rem; line-height: 1.5; }
.wvc-blog-card__more { margin-top: auto; color: var(--wvc-orange); font-weight: 700; font-size: .86rem; }
.wvc-blog-nav { display: flex; gap: .6rem; justify-content: center; margin-top: .4rem; }
.wvc-blog-nav button {
  width: 42px; height: 42px; border-radius: 999px; border: 1.5px solid var(--wvc-line);
  background: #fff; color: var(--wvc-indigo); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: .15s ease;
}
.wvc-blog-nav button:hover { background: var(--wvc-orange); border-color: var(--wvc-orange); color: #fff; }
.wvc-sec--blog .wvc-sec__title { margin-bottom: 1.5rem; }
/* Gold stars in the trust strip. */
.wvc-trust__item { align-items: center; }
.wvc-stars { color: #f5a623; letter-spacing: 2px; font-size: .92rem; line-height: 1; margin-bottom: .18rem; }
.wvc-trust__item:first-child { gap: 0; }
/* =========================================================================
   DROPDOWN SAFETY - hidden panels must not swallow hover/clicks over the
   page beneath them, and they should close instantly (no visibility delay).
   ========================================================================= */
.wvc-menu ul {
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.wvc-menu li:hover > ul,
.wvc-menu li:focus-within > ul { pointer-events: auto; }

/* =========================================================================
   "All Blogs & News" -> button, centred below the slider.
   ========================================================================= */
.wvc-sec--blog p { text-align: center; margin: 0; }
.wvc-sec--blog p:empty { display: none; }
.wvc-sec--blog p > a {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--wvc-orange); color: #fff !important; font-weight: 700;
  padding: .8rem 1.7rem; border-radius: var(--wvc-radius-sm);
  text-decoration: none !important; margin-top: 1.2rem;
  transition: background .15s ease, transform .05s ease;
}
.wvc-sec--blog p > a:hover { background: var(--wvc-orange-dk); color: #fff !important; }
.wvc-sec--blog p > a:active { transform: translateY(1px); }
/* The blog strip should come before the button. */
.wvc-sec--blog .wvc-blog-wrap { order: 0; }

/* =========================================================================
   NEWSLETTER subscribe button
   ========================================================================= */
.wvc-sec--newsletter button,
.wvc-sec--newsletter input[type=submit],
.wvc-sec--newsletter .button {
  background: var(--wvc-orange) !important; color: #fff !important;
  border: 0 !important; font-weight: 700; letter-spacing: .01em;
  padding: .85rem 1.8rem !important; border-radius: var(--wvc-radius-sm) !important;
  cursor: pointer; flex: 0 0 auto; white-space: nowrap;
  transition: background .15s ease, transform .05s ease;
}
.wvc-sec--newsletter button:hover,
.wvc-sec--newsletter input[type=submit]:hover,
.wvc-sec--newsletter .button:hover { background: var(--wvc-orange-dk) !important; }
.wvc-sec--newsletter button:active { transform: translateY(1px); }
.wvc-sec--newsletter input[type=email], .wvc-sec--newsletter input[type=text] {
  background: #fff; color: var(--wvc-ink); border-radius: var(--wvc-radius-sm);
}
.wvc-sec--newsletter input::placeholder { color: #8a93a5; }

/* WordPress prints an "Edit <page>" link at the end of content for logged-in
   editors. Only admins ever saw it, but it clutters the page - use the admin
   bar instead. */
.edit-link, .post-edit-link { display: none !important; }

/* =========================================================================
   NEWSLETTER FORM (WooYoo Engage markup: each control sits in its own DIV)
   Layout: email field + Subscribe side by side, centred, note underneath.
   ========================================================================= */
.wvc-sec--newsletter .wye-newsletter-inner { max-width: 620px; margin-inline: auto; }
.wvc-sec--newsletter form {
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center;
  gap: .6rem; max-width: 620px; margin-inline: auto;
}
/* Wrapper holding the email field grows; the button wrapper stays natural. */
.wvc-sec--newsletter form > div:has(input[type=email]),
.wvc-sec--newsletter form > div:has(input[type=text]:not([hidden])) { flex: 1 1 300px; min-width: 0; }
.wvc-sec--newsletter form > div:has(button),
.wvc-sec--newsletter form > div:has(input[type=submit]) { flex: 0 0 auto; }
/* Anything else (privacy note, messages) drops to its own centred row. */
.wvc-sec--newsletter form > p,
.wvc-sec--newsletter form > div:not(:has(input)):not(:has(button)) { flex: 1 1 100%; text-align: center; }

.wvc-sec--newsletter form input[type=email],
.wvc-sec--newsletter form input[type=text]:not([hidden]) {
  width: 100%; height: 52px; padding: 0 1rem; font-size: 1rem;
  border: 0; border-radius: var(--wvc-radius-sm); background: #fff; color: var(--wvc-ink);
}
.wvc-sec--newsletter form button,
.wvc-sec--newsletter form input[type=submit] {
  height: 52px; margin: 0 !important; width: auto; min-width: 150px;
}
.wvc-sec--newsletter form > p { font-size: .8rem; color: #9aa4b6; margin: .2rem 0 0; }

@media (max-width: 560px) {
  .wvc-sec--newsletter form > div:has(button),
  .wvc-sec--newsletter form > div:has(input[type=submit]) { flex: 1 1 100%; }
  .wvc-sec--newsletter form button,
  .wvc-sec--newsletter form input[type=submit] { width: 100%; }
}

/* =========================================================================
   NEWSLETTER - correct targets. The email field + Subscribe button are
   siblings inside .wye-nl-row; input[name=wye_website] is a spam honeypot
   parked off-screen and must be left alone.
   ========================================================================= */
.wvc-sec--newsletter input[name="wye_website"] {
  width: auto !important; height: auto !important; padding: 0 !important;
}
.wvc-sec--newsletter form { display: block; max-width: none; }
.wvc-sec--newsletter .wye-nl-row {
  display: flex !important; flex-wrap: wrap; align-items: stretch;
  justify-content: center; gap: .6rem;
  max-width: 620px; margin: 0 auto !important; width: 100%;
}
.wvc-sec--newsletter .wye-nl-row input[type="email"] {
  flex: 1 1 260px; width: auto !important; min-width: 0;
  height: 54px; padding: 0 1.1rem; font-size: 1rem;
  border: 0; border-radius: var(--wvc-radius-sm); background: #fff; color: var(--wvc-ink);
}
.wvc-sec--newsletter .wye-nl-row button,
.wvc-sec--newsletter .wye-nl-row input[type="submit"] {
  flex: 0 0 auto; height: 54px; min-width: 156px; margin: 0 !important;
}
@media (max-width: 560px) {
  .wvc-sec--newsletter .wye-nl-row input[type="email"] { flex: 1 1 100%; }
  .wvc-sec--newsletter .wye-nl-row button { flex: 1 1 100%; width: 100%; }
}

/* =========================================================================
   POPULAR BRANDS - the orange/pink wash from the old YOOtheme section
   (copied from live: linear-gradient(40deg,#fe3a6a,#ff4a39 40%,#fe8c45)).
   ========================================================================= */
.wvc-sec--brand {
  background: linear-gradient(40deg, #fe3a6a 0%, #ff4a39 40%, #fe8c45 100%) !important;
  box-shadow: none !important; clip-path: none !important;
  position: relative; padding: 2.6rem 0 2.8rem;
}
.wvc-sec--brand::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw;
  transform: translateX(-50%); z-index: -1;
  background: linear-gradient(40deg, #fe3a6a 0%, #ff4a39 40%, #fe8c45 100%);
}
.wvc-sec--brand .wvc-sec__title { color: #fff; }
.wvc-sec--brand .wvc-sec__title::after { background: rgba(255,255,255,.85); }
/* Logo tiles read as white cards on the wash. */
.wvc-sec--brand .wvc-brands img { background: #fff; border-radius: 8px; padding: 8px; }

/* =========================================================================
   TRUST STRIP - rating line: gold stars, then 4.9, then the Google G.
   ========================================================================= */
.wvc-trust__line {
  display: inline-flex; align-items: center; gap: .4rem; flex-wrap: nowrap;
  line-height: 1;
}
.wvc-trust__line .wvc-stars {
  color: #f5a623 !important; letter-spacing: 1px; font-size: .95rem; margin: 0;
}
.wvc-trust__line strong { color: var(--wvc-indigo); font-size: 1rem; }
.wvc-trust__line .wvc-g { flex: 0 0 auto; display: block; }
.wvc-trust__item--rating { gap: .2rem; }
@media (max-width: 620px) {
  .wvc-trust__line { gap: .25rem; }
  .wvc-trust__line .wvc-stars { font-size: .8rem; letter-spacing: 0; }
  .wvc-trust__line strong { font-size: .86rem; }
}

/* Brand logos: fill their white cards properly (they were tiny). */
.wvc-sec--brand .wvc-brands { gap: clamp(.5rem, 1vw, 1rem); align-items: stretch; }
.wvc-sec--brand .wvc-brands__grid,
.wvc-sec--brand .wvc-brands > * { width: 100%; }
.wvc-sec--brand .wvc-brands a,
.wvc-sec--brand .wvc-brands > * > * {
  display: flex !important; align-items: center; justify-content: center;
}
.wvc-sec--brand .wvc-brands img {
  width: 100% !important; max-width: none !important;
  height: 74px !important; padding: 10px 12px !important;
  object-fit: contain; background: #fff; border-radius: 10px;
  box-shadow: 0 2px 10px rgba(9,14,21,.10);
}
@media (max-width: 900px) {
  .wvc-sec--brand .wvc-brands > * { width: auto; }
  .wvc-sec--brand .wvc-brands img { height: 58px !important; }
}

/* Brand logos: minimal padding so the mark fills its white card.
   (The card is the <a>; the <img> inside must not add its own padding.) */
.wvc-sec--brand .wvc-brands__grid { padding: 0 !important; gap: .6rem; }
.wvc-sec--brand .wvc-brands a {
  background: #fff !important; border-radius: 10px;
  padding: 5px !important; height: 72px;
  box-shadow: 0 2px 10px rgba(9,14,21,.10);
  overflow: hidden;
}
.wvc-sec--brand .wvc-brands img {
  width: 100% !important; height: 100% !important; max-height: none !important;
  padding: 0 !important; margin: 0 !important;
  background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  object-fit: contain;
}
@media (max-width: 900px) {
  .wvc-sec--brand .wvc-brands a { height: 58px; }
}

/* =========================================================================
   MOBILE FIXES
   ========================================================================= */
/* 1. The rating line is itself a <span>, so the "hide the sub-line" rule was
      wiping out the whole 4.9 / Google G row. Only hide the sub-line. */
@media (max-width: 620px) {
  .wvc-trust__item > span { display: none; }
  .wvc-trust__item > span.wvc-trust__line { display: inline-flex !important; }
  .wvc-trust__item--rating { justify-content: center; }
}

/* 2. Brand strip: wrap onto centred rows instead of overflowing the screen. */
@media (max-width: 900px) {
  .wvc-sec--brand .wvc-brands,
  .wvc-sec--brand .wvc-brands__grid {
    flex-wrap: wrap !important; justify-content: center !important;
    max-width: 100%; width: 100%; gap: .5rem;
  }
  .wvc-sec--brand .wvc-brands a {
    flex: 0 0 auto !important; width: 88px; height: 62px;
  }
}
@media (max-width: 420px) {
  .wvc-sec--brand .wvc-brands a { width: 74px; height: 54px; }
}

/* 3. Flavour selector: three per row on small screens. */
@media (max-width: 900px) {
  .wvc-flav { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 380px) {
  .wvc-flav { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* The brand strip markup has a <br> between every logo; as flex/grid items
   they break the wrapping maths. Drop them and lay out an explicit grid. */
.wvc-sec--brand .wvc-brands__grid br { display: none !important; }

@media (max-width: 900px) {
  .wvc-sec--brand .wvc-brands__grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .5rem; width: 100%; max-width: 460px; margin-inline: auto;
    justify-items: stretch;
  }
  .wvc-sec--brand .wvc-brands a {
    width: 100% !important; height: 60px; padding: 4px !important;
  }
}
@media (max-width: 360px) {
  .wvc-sec--brand .wvc-brands__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mobile: stars sit on their own line above "4.9 G Rating". */
@media (max-width: 620px) {
  .wvc-trust__item--rating > span.wvc-trust__line {
    display: flex !important; flex-wrap: wrap; justify-content: center;
    gap: .1rem .35rem; line-height: 1.25;
  }
  .wvc-trust__item--rating .wvc-stars { flex: 1 0 100%; text-align: center; font-size: .82rem; }
}

/* The blanket "hide sub-line spans" rule also caught the nested stars span,
   so re-show it explicitly and give it its own full-width line. */
@media (max-width: 620px) {
  .wvc-trust__item--rating .wvc-stars {
    display: block !important; flex: 1 0 100%; width: 100%;
    text-align: center; font-size: .84rem; letter-spacing: 1px;
  }
  .wvc-trust__item--rating .wvc-trust__line strong,
  .wvc-trust__item--rating .wvc-trust__line .wvc-g { display: inline-block !important; }
}

/* The flavour selector markup also has <br> between tiles, which eat grid
   cells and leave holes in the layout. */
.wvc-flav br { display: none !important; }
.wvc-flav { justify-items: stretch; align-items: start; gap: 1rem; }

/* =========================================================================
   Tighten the last section so it doesn't leave a big gap above the footer.
   ========================================================================= */
.entry-content > .wvc-sec:last-of-type { padding-bottom: 1.2rem; }
.entry-content > p:empty, .entry-content > .wvc-sec > p:empty { display: none; }
.site-content { padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { padding-top: 0 !important; padding-bottom: 0 !important; }
.wvc-footer { background: var(--wvc-navy); color: #aeb7c7; padding: 3rem 0 2.4rem; }
.wvc-footer__grid {
  display: grid; gap: 2.2rem clamp(1.5rem, 3vw, 3.5rem);
  grid-template-columns: 1.5fr 1fr 1fr 1fr; align-items: start;
}
.wvc-footer__logo { max-height: 54px; width: auto; height: auto; display: block; margin-bottom: 1rem; }
.wvc-footer__blurb { font-size: .88rem; line-height: 1.6; color: #9aa4b6; margin: 0 0 .9rem; max-width: 36ch; }
.wvc-footer__shops { font-size: .9rem; color: #dfe4ee; margin: 0 0 .7rem; }
.wvc-footer__shops strong { color: #fff; }
.wvc-footer__trust { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: #9aa4b6; margin: 0; }
.wvc-footer__trust .wvc-stars { color: #f5a623; font-size: .9rem; letter-spacing: 1px; }

.wvc-footer__title {
  color: #fff !important; font-family: var(--wvc-font-head); font-size: 1rem;
  letter-spacing: .03em; text-transform: uppercase;
  margin: 0 0 .9rem; padding-bottom: .55rem; position: relative;
}
.wvc-footer__title::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 36px; height: 3px; border-radius: 2px; background: var(--wvc-orange);
}
.wvc-footer__menu { list-style: none; margin: 0; padding: 0; }
.wvc-footer__menu li { margin: 0; padding: 0; border: 0; }
.wvc-footer__menu a {
  display: block; color: #aeb7c7; font-size: .88rem; padding: .3rem 0;
  transition: color .12s ease, padding-left .12s ease;
}
.wvc-footer__menu a:hover { color: #fff; padding-left: .3rem; }

@media (max-width: 980px) {
  .wvc-footer__grid { grid-template-columns: 1fr 1fr; }
  .wvc-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .wvc-footer__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .wvc-footer { padding: 2.2rem 0 1.6rem; }
}

/* Storefront stacks bottom margins on article (4.235em), .site-main and
   .content-area (2.618em each) - that was the ~110px gap above the footer. */
.site-content .content-area,
.site-content .site-main,
.site-content article.hentry,
.site-content .type-page,
.site-content .type-post { margin-bottom: 0 !important; }
.site-content .col-full { padding-bottom: 0 !important; }

/* =========================================================================
   FOOTER link colours - Storefront's own footer link rules are more specific
   than ours, so scope these tightly and force them.
   ========================================================================= */
.site-footer .wvc-footer a,
.site-footer .wvc-footer__menu a,
.site-footer .wvc-footer__menu li a,
.wvc-footer .wvc-footer__menu a:visited {
  color: #b6bfd0 !important; text-decoration: none !important;
}
.site-footer .wvc-footer a:hover,
.site-footer .wvc-footer__menu a:hover,
.site-footer .wvc-footer__menu li a:hover {
  color: #ffffff !important;
}
.site-footer .wvc-footer__title { color: #fff !important; }
.site-footer .wvc-footer__blurb { color: #98a2b4 !important; }
.wvc-credit, .wvc-credit a { color: #8f99ab !important; }
.wvc-credit a:hover { color: #fff !important; }

/* USP / delivery-trust banner under the rating line. */
.wvc-footer__usp {
  display: block; width: 100%; max-width: 340px; height: auto;
  margin: 1.1rem 0 0; opacity: .95;
}
@media (max-width: 980px) { .wvc-footer__usp { max-width: 300px; } }

/* Mobile footer: single column, everything centred. */
@media (max-width: 700px) {
  .wvc-footer__grid { grid-template-columns: 1fr; gap: 1.8rem; text-align: center; }
  .wvc-footer__brand { display: flex; flex-direction: column; align-items: center; }
  .wvc-footer__logo { margin-inline: auto; }
  .wvc-footer__blurb { max-width: 42ch; margin-inline: auto; }
  .wvc-footer__trust { justify-content: center; }
  .wvc-footer__usp { margin-inline: auto; }
  .wvc-footer__title { text-align: center; }
  .wvc-footer__title::after { left: 50%; transform: translateX(-50%); }
  .wvc-footer__menu a { text-align: center; }
  .wvc-footer__menu a:hover { padding-left: 0; }
  .wvc-credit { text-align: center; }
}

/* =========================================================================
   CATEGORY / SHOP ARCHIVE - product cards.
   Reference: old YOOtheme cards (white, 1px #e7e7e7, 5px radius, indigo
   centred title, orange price, square image) - tightened up here.
   ========================================================================= */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem; margin: 0 0 2rem; padding: 0; list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }

.woocommerce ul.products li.product {
  width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important;
  background: #fff; border: 1px solid #e7e7e7; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(9,14,21,.04);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px); border-color: #dcdfe6;
  box-shadow: 0 10px 26px rgba(9,14,21,.12);
}
.woocommerce ul.products li.product .wooyoo-product-wrapper {
  display: flex; flex-direction: column; height: 100%; padding: .85rem .85rem 1rem;
}

/* Product image: consistent square, never cropped. */
.woocommerce ul.products li.product img {
  width: 100%; aspect-ratio: 1 / 1; height: auto;
  object-fit: contain; background: #fff;
  margin: 0 0 .7rem; border-radius: 6px; display: block;
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
  font-family: var(--wvc-font-head) !important;
  color: var(--wvc-indigo) !important;
  font-size: .95rem !important; font-weight: 400; line-height: 1.25;
  text-align: center; margin: 0 0 .5rem !important; padding: 0 !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.woocommerce ul.products li.product a { text-decoration: none; }

/* Price */
.woocommerce ul.products li.product .price {
  color: var(--wvc-orange) !important; font-size: 1.15rem !important; font-weight: 700;
  text-align: center; margin: .1rem 0 .6rem !important; display: block;
}
.woocommerce ul.products li.product .price del { color: var(--wvc-muted); font-weight: 400; font-size: .85rem; opacity: .8; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Nicotine-strength swatches */
.wvc-swatch-wrap { margin: 0 0 .6rem; text-align: center; }
.wvc-swatch-wrap > * { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.wvc-swatch-wrap a, .wvc-swatch-wrap button, .wvc-swatch-wrap span[data-value] {
  border: 1.5px solid var(--wvc-line) !important; background: #fff !important;
  color: var(--wvc-indigo) !important; border-radius: 6px !important;
  padding: .35rem .6rem !important; font-size: .8rem !important; font-weight: 700;
  line-height: 1.1; transition: .14s ease;
}
.wvc-swatch-wrap a:hover, .wvc-swatch-wrap button:hover {
  border-color: var(--wvc-orange) !important; color: var(--wvc-orange) !important;
}

/* Buttons - orange wash, full width, pinned to the bottom of the card. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .added_to_cart {
  margin-top: auto !important; width: 100%; justify-content: center;
  background: linear-gradient(40deg, #ff4a39 0%, #ff5a14 45%, #fe8c45 100%) !important;
  color: #fff !important; border: 0 !important; border-radius: 8px !important;
  padding: .7rem 1rem !important; font-size: .9rem !important; font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(255,90,20,.28);
  transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 6px 16px rgba(255,90,20,.34);
}
.woocommerce ul.products li.product .button:active { transform: translateY(1px); }
.woocommerce ul.products li.product .added_to_cart { margin-top: .45rem !important; background: #fff !important; color: var(--wvc-indigo) !important; border: 1.5px solid var(--wvc-line) !important; box-shadow: none; }

/* Badges (plugin) sit over the image, not in the flow. */
.wooyoo-badges-wrap { position: relative; z-index: 2; }

/* Out of stock */
.woocommerce ul.products li.product .outofstock-badge,
.woocommerce ul.products li.product .stock.out-of-stock { color: var(--wvc-muted); font-size: .8rem; text-align: center; }

/* Result count + sorting row */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: 1.2rem; }
.woocommerce .woocommerce-result-count { color: var(--wvc-muted); font-size: .9rem; }
.woocommerce .woocommerce-ordering select {
  border: 1.5px solid var(--wvc-line); border-radius: 6px; padding: .5rem .7rem;
  background: #fff; color: var(--wvc-ink); font-size: .9rem;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: .4rem; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border: 1.5px solid var(--wvc-line); border-radius: 8px; min-width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--wvc-indigo); font-weight: 700; background: #fff; padding: 0 .6rem;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--wvc-orange); border-color: var(--wvc-orange); color: #fff;
}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
  font-size: .84rem; color: var(--wvc-muted); margin: 0 0 1rem;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--wvc-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--wvc-orange); }

/* Responsive columns */
@media (max-width: 1200px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 860px)  { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; } }
@media (max-width: 860px) {
  .woocommerce ul.products li.product .wooyoo-product-wrapper { padding: .6rem .6rem .8rem; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product h2 { font-size: .86rem !important; }
  .woocommerce ul.products li.product .price { font-size: 1.02rem !important; }
}

/* =========================================================================
   PRODUCT CARDS - real plugin markup (.wooyoo-product-* / h3.el-title).
   The uk-* classes are dead YOOtheme/UIkit leftovers, so style these.
   ========================================================================= */
.wooyoo-product-wrapper { display: flex; flex-direction: column; height: 100%; }

/* Image block */
.wooyoo-product-image { position: relative; display: block; margin: 0 0 .7rem; border-radius: 8px; overflow: hidden; background: #fff; }
.wooyoo-product-image a { display: block; }
.wooyoo-product-image img {
  width: 100% !important; aspect-ratio: 1 / 1; height: auto !important;
  object-fit: contain !important; display: block; margin: 0 !important; border-radius: 8px;
  transition: transform .25s ease;
}
.wooyoo-product-wrapper:hover .wooyoo-product-image img { transform: scale(1.04); }

/* Content column - bottom block pinned down so cards align */
.wooyoo-product-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.wooyoo-product-top { flex: 1 1 auto; }
.wooyoo-product-bottom { margin-top: auto; }

/* Title */
.wooyoo-product-wrapper h3.el-title,
.wooyoo-product-wrapper .uk-card-title {
  font-family: var(--wvc-font-head) !important;
  font-size: .92rem !important; font-weight: 400 !important; line-height: 1.28 !important;
  text-align: center; margin: 0 0 .45rem !important; padding: 0 !important;
}
.wooyoo-product-wrapper h3.el-title a {
  color: var(--wvc-indigo) !important; text-decoration: none !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.wooyoo-product-wrapper h3.el-title a:hover { color: var(--wvc-orange) !important; }

/* Price */
.wooyoo-product-price,
.wooyoo-product-price .price,
.wooyoo-product-price .amount,
.wooyoo-product-price bdi {
  color: var(--wvc-orange) !important; font-size: 1.14rem !important; font-weight: 700 !important;
  text-align: center; display: block; margin: 0 0 .55rem;
}
.wooyoo-product-price del, .wooyoo-product-price del bdi {
  color: var(--wvc-muted) !important; font-size: .82rem !important; font-weight: 400 !important;
  display: inline; opacity: .85;
}
.wooyoo-product-price ins { text-decoration: none; display: inline; }

/* Buttons - orange wash, full width */
.wooyoo-product-button { text-align: center; }
.wooyoo-product-button > a,
.wooyoo-product-button a.add_to_cart_button,
.wooyoo-product-button a.button {
  display: flex !important; align-items: center; justify-content: center; width: 100%;
  background: linear-gradient(40deg, #ff4a39 0%, #ff5a14 45%, #fe8c45 100%) !important;
  color: #fff !important; border: 0 !important; border-radius: 8px !important;
  padding: .72rem 1rem !important; font-size: .88rem !important; font-weight: 700 !important;
  line-height: 1.1; text-decoration: none !important; margin: .1rem 0 0 !important;
  box-shadow: 0 2px 8px rgba(255,90,20,.26);
  transition: filter .15s ease, box-shadow .15s ease, transform .05s ease;
}
.wooyoo-product-button > a:hover { filter: brightness(1.07); box-shadow: 0 6px 16px rgba(255,90,20,.34); color:#fff !important; }
.wooyoo-product-button > a:active { transform: translateY(1px); }

/* Swatches sit above the button */
.wooyoo-product-button .wvc-swatch-wrap { margin: 0 0 .55rem; }

/* Rating row */
.wooyoo-product-rating { text-align: center; margin: 0 0 .35rem; }
.wooyoo-product-rating .star-rating { margin: 0 auto; float: none; }

/* VG/PG corner flag */
.wvc-corner-vg {
  position: absolute; top: .5rem; right: .5rem; z-index: 3;
  background: var(--wvc-navy); color: #fff; font-size: .68rem; font-weight: 700;
  padding: .25rem .45rem; border-radius: 5px; letter-spacing: .02em;
}
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* =========================================================================
   PRODUCT CARDS v2 - matched to the old template screenshot:
   6 narrow columns, BOLD dark-blue title (small), big orange price,
   pink-to-orange gradient "View Product" button, split strength swatches.
   ========================================================================= */
.woocommerce ul.products { grid-template-columns: repeat(6, minmax(0,1fr)) !important; gap: 1rem !important; }

/* Title: dark blue, bold, small - the old site used Archivo Black, so use the
   heaviest weight of the system stack rather than another web-font request. */
.wooyoo-product-wrapper h3.el-title,
.wooyoo-product-wrapper .uk-card-title {
  font-family: var(--wvc-font-body) !important;
  font-size: .84rem !important; font-weight: 800 !important;
  line-height: 1.32 !important; letter-spacing: -.005em;
  text-align: center; margin: 0 0 .5rem !important;
}
.wooyoo-product-wrapper h3.el-title a { color: var(--wvc-indigo) !important; font-weight: 800 !important; }

/* Price: big and orange */
.wooyoo-product-price,
.wooyoo-product-price .price,
.wooyoo-product-price .amount,
.wooyoo-product-price bdi {
  font-size: 1.32rem !important; font-weight: 800 !important;
  color: #ff5a14 !important; letter-spacing: -.01em;
}

/* "SELECT NICOTINE STRENGTH" label */
.wvc-swatch-wrap .wvc-swatch-label,
.wooyoo-product-button .wvc-swatch-wrap > span:first-child {
  display: block; font-size: .62rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #8a93a5; margin: 0 0 .35rem;
}

/* Strength swatches: equal-width boxes side by side */
.wvc-swatch-wrap { display: block; }
.wvc-swatch-wrap a, .wvc-swatch-wrap button, .wvc-swatch-wrap span[data-value] {
  flex: 1 1 0; text-align: center;
  background: #f4f6fa !important; border: 1px solid #e3e7ef !important;
  color: var(--wvc-indigo) !important; font-weight: 800 !important;
  font-size: .78rem !important; padding: .42rem .3rem !important; border-radius: 5px !important;
}
.wvc-swatch-wrap a:hover, .wvc-swatch-wrap button:hover {
  background: #fff !important; border-color: var(--wvc-orange) !important; color: var(--wvc-orange) !important;
}

/* View Product button: pink to orange wash, like the old template */
.wooyoo-product-button > a,
.wooyoo-product-button a.add_to_cart_button,
.wooyoo-product-button a.button {
  background: linear-gradient(135deg, #ff3d7f 0%, #ff5124 55%, #ff8a3d 100%) !important;
  flex-direction: column; gap: .1rem;
  padding: .62rem .7rem !important; font-size: .84rem !important; border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(255,61,127,.22);
}
.wooyoo-product-button > a:hover { box-shadow: 0 6px 16px rgba(255,61,127,.3); }
/* the small "or select a strength" second line inside the button */
.wooyoo-product-button > a small,
.wooyoo-product-button > a span:not(.screen-reader-text) {
  display: block; font-size: .68rem; font-weight: 600; opacity: .95;
}

/* Card padding tighter for 6-up */
.woocommerce ul.products li.product .wooyoo-product-wrapper { padding: .7rem .7rem .8rem; }

/* Responsive ladder */
@media (max-width: 1500px) { .woocommerce ul.products { grid-template-columns: repeat(5, minmax(0,1fr)) !important; } }
@media (max-width: 1240px) { .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
@media (max-width: 1000px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 760px)  { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: .7rem !important; } }

/* Price: force every descendant (currency symbol spans, bdi, amount, ranges)
   so variable and simple products render identically. */
.wooyoo-product-price,
.wooyoo-product-price * {
  color: #ff5a14 !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}
.wooyoo-product-price { text-align: center; margin: 0 0 .55rem !important; }
/* keep strikethrough "was" prices smaller and muted */
.wooyoo-product-price del,
.wooyoo-product-price del * {
  color: #98a2b4 !important; font-size: .8rem !important; font-weight: 500 !important;
}
.wooyoo-product-price ins, .wooyoo-product-price ins * { text-decoration: none !important; }

/* =========================================================================
   CARD LAYOUT v3 - image + badges bleed to the card edges, swatches span the
   full width, button sits flush on the bottom of the card.
   ========================================================================= */
.woocommerce ul.products li.product { overflow: hidden; }
.woocommerce ul.products li.product .wooyoo-product-wrapper { padding: 0 !important; }

/* Image edge to edge, square, no rounding inside the card */
.wooyoo-product-image { margin: 0 !important; border-radius: 0 !important; }
.wooyoo-product-image img { border-radius: 0 !important; }

/* Text block keeps its own inner padding; image/button do not */
.wooyoo-product-content { padding: .75rem .75rem 0 !important; }

/* Swatch row edge to edge */
.wooyoo-product-button .wvc-swatch-wrap { margin: 0 0 .5rem !important; }
.wvc-swatch-wrap > * { display: flex !important; gap: 0 !important; width: 100%; }
.wvc-swatch-wrap a, .wvc-swatch-wrap button, .wvc-swatch-wrap span[data-value] {
  border-radius: 0 !important; border-left-width: 0 !important;
}
.wvc-swatch-wrap > * > *:first-child { border-left-width: 1px !important; border-radius: 5px 0 0 5px !important; }
.wvc-swatch-wrap > * > *:last-child { border-radius: 0 5px 5px 0 !important; }

/* Button flush to the bottom edge, square bottom corners */
.wooyoo-product-bottom { margin-top: auto !important; }
.wooyoo-product-button { padding: 0 .75rem .75rem; }
.wooyoo-product-button > a,
.wooyoo-product-button a.add_to_cart_button,
.wooyoo-product-button a.button { border-radius: 8px !important; }

/* =========================================================================
   FINAL: columns + price consistency.
   The swatch plugin renders the price INSIDE .wvc-swatch-wrap on variable
   products, leaving .wooyoo-product-price empty - so style .price anywhere.
   ========================================================================= */
.woocommerce ul.products,
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
@media (max-width: 1150px) { .woocommerce ul.products, .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
@media (max-width: 820px)  { .woocommerce ul.products, .woocommerce ul.products.columns-4 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 620px)  { .woocommerce ul.products, .woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: .7rem !important; } }

/* Price - wherever it renders in the card */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price *,
.wvc-swatch-wrap .price,
.wvc-swatch-wrap .price * {
  color: #ff5a14 !important;
  font-size: 1.28rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: center;
}
.woocommerce ul.products li.product .price { display: block; margin: .1rem 0 .55rem !important; }
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del * {
  color: #98a2b4 !important; font-size: .8rem !important; font-weight: 500 !important;
}
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins * { text-decoration: none !important; }
/* collapse the empty price wrapper so it leaves no gap */
.wooyoo-product-price:empty { display: none !important; margin: 0 !important; }

/* =========================================================================
   CARD OVERRIDES - the WooYoo plugin prints an inline "PRICE TYPOGRAPHY"
   style block using `body.wooyoo-enabled ul.products li.product ...` with
   !important, which outranked our rules. Prefix with `html` to win.
   Radius kept to 2px, tighter gaps, full-width controls, button on the base.
   ========================================================================= */
html body.wooyoo-enabled ul.products { gap: .55rem !important; }

/* Price - consistent orange everywhere */
html body.wooyoo-enabled ul.products li.product .price,
html body.wooyoo-enabled ul.products li.product .price *,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-price,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-price * {
  color: #ff5a14 !important; font-size: 1.22rem !important; font-weight: 800 !important;
  line-height: 1.15 !important; text-align: center !important;
}
html body.wooyoo-enabled ul.products li.product .price del,
html body.wooyoo-enabled ul.products li.product .price del * {
  color: #9aa4b6 !important; font-size: .78rem !important; font-weight: 500 !important; opacity: 1 !important;
}

/* Title - dark blue, bold, small */
html body.wooyoo-enabled ul.products li.product h3.el-title,
html body.wooyoo-enabled ul.products li.product h3.el-title a {
  color: var(--wvc-indigo) !important; font-family: var(--wvc-font-body) !important;
  font-size: .82rem !important; font-weight: 800 !important; line-height: 1.3 !important;
  text-align: center !important;
}

/* Radius: 2px everywhere on the card */
html body.wooyoo-enabled ul.products li.product,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-image,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-image img,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-button > a,
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap a,
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap button,
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap span {
  border-radius: 2px !important;
}

/* Full-width variant selector */
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap { width: 100% !important; margin: 0 0 .45rem !important; }
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap > * { display: flex !important; width: 100% !important; gap: .25rem !important; }
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap a,
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap button {
  flex: 1 1 0 !important; min-width: 0 !important; text-align: center !important;
  padding: .4rem .2rem !important; font-size: .76rem !important; font-weight: 800 !important;
  background: #f4f6fa !important; border: 1px solid #e3e7ef !important; color: var(--wvc-indigo) !important;
}

/* Button: full width, flush to the bottom of the card */
html body.wooyoo-enabled ul.products li.product .wooyoo-product-content { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-bottom { margin-top: auto !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-button { width: 100% !important; padding: 0 !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-button > a {
  display: flex !important; width: 100% !important; box-sizing: border-box;
  align-items: center; justify-content: center; flex-direction: column;
  padding: .6rem .5rem !important; margin: 0 !important; font-size: .82rem !important;
}

/* "SELECT NICOTINE STRENGTH" heading + OUT OF STOCK box */
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap > span:first-child,
html body.wooyoo-enabled ul.products li.product .wvc-swatch-label {
  display: block !important; width: 100%;
  font-size: .58rem !important; font-weight: 700 !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; color: #98a2b4 !important;
  text-align: center !important; margin: 0 0 .28rem !important;
}
html body.wooyoo-enabled ul.products li.product .outofstock,
html body.wooyoo-enabled ul.products li.product .out-of-stock,
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap .disabled {
  background: #f4f6fa !important; border: 1px dashed #d5dbe6 !important;
  color: #98a2b4 !important; font-weight: 700 !important; font-size: .72rem !important;
  text-transform: uppercase; letter-spacing: .04em; padding: .4rem .3rem !important;
}

/* Infinite scroll is on, so the numbered pagination is redundant */
html body.wooyoo-enabled nav.woocommerce-pagination,
html body.wooyoo-enabled .woocommerce-pagination { display: none !important; }

/* Selector + button edge to edge: drop side padding on the content wrapper and
   pad only the text, so the bottom block spans the full card width. */
html body.wooyoo-enabled ul.products li.product .wooyoo-product-content { padding: .6rem 0 0 !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-top { padding: 0 .55rem !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-bottom { padding: 0 !important; }
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap { padding: 0 !important; }
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap > * { gap: 0 !important; }
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap a,
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap button {
  border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important;
}
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap > * > *:not(:last-child) { border-right: 1px solid #e3e7ef !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-button > a { border-radius: 0 !important; }

/* =========================================================================
   CARD LAYOUT - measured from the LIVE site and replicated exactly.
   On the old template EVERY block is full card width with padding:0 margin:0
   (wrapper, image, content, top, bottom, price, button, swatch row), the
   button is the full card width, radius 3px. That is why it looks tidy.
   ========================================================================= */
html body.wooyoo-enabled ul.products li.product .wooyoo-product-wrapper,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-image,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-content,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-top,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-bottom,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-price,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-button {
  width: 100% !important; padding: 0 !important; margin: 0 !important;
  box-sizing: border-box;
}
/* keep the column flexing so the bottom block can be pushed down */
html body.wooyoo-enabled ul.products li.product .wooyoo-product-wrapper,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-content { display: flex !important; flex-direction: column !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-content { flex: 1 1 auto !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-top { flex: 1 1 auto !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-bottom { margin-top: auto !important; }

/* Title / price: centred, breathing room via margin only (no side padding) */
html body.wooyoo-enabled ul.products li.product h3.el-title { margin: .5rem 0 .35rem !important; padding: 0 .4rem !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-price { margin: 0 0 .4rem !important; justify-content: center; }

/* Swatch row: full width, matching the live margins */
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap {
  width: 100% !important; padding: 0 !important; margin: .45rem 0 .4rem !important;
  display: block !important;
}
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap > * { display: flex !important; width: 100% !important; }

/* Button: full card width, flush bottom */
html body.wooyoo-enabled ul.products li.product .wooyoo-product-button > a {
  display: flex !important; width: 100% !important; box-sizing: border-box !important;
  padding: .58rem .5rem !important; margin: 0 !important; border-radius: 2px !important;
}

/* Undo the earlier out-of-stock styling that was inflating card heights - only
   the swatch pill itself should look disabled. */
html body.wooyoo-enabled ul.products li.product .outofstock,
html body.wooyoo-enabled ul.products li.product .out-of-stock {
  background: none !important; border: 0 !important; padding: 0 !important;
  margin: 0 !important; color: #98a2b4 !important; font-size: .72rem !important;
}
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap .disabled,
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap [aria-disabled=true] {
  background: #f4f6fa !important; border: 1px solid #e3e7ef !important;
  color: #9aa4b6 !important; padding: .4rem .2rem !important;
}


/* Swatch label + out-of-stock label: exact values read off the live site.
   The real classes are .wvc-swatch-lab / .wvc-oos-label (not .outofstock). */
html body.wooyoo-enabled ul.products li.product .wvc-swatch-lab {
  font-size: 10px !important; font-weight: 800 !important; line-height: 15px !important;
  color: #00092b !important; text-transform: uppercase !important;
  background: none !important; padding: 0 !important; margin: 0 0 .25rem !important;
  letter-spacing: .02em !important;
}
/* OOS label = same 28px height as the variant selector row so cards line up */
html body.wooyoo-enabled ul.products li.product .wvc-oos-label {
 font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important;
 color: #8a90a2 !important; text-transform: uppercase !important; background: #f2f3f6 !important;
 border: 0 !important; border-radius: 2px !important; padding: 0 6px !important; margin: 0 !important;
 height: 28px !important; display: flex !important; align-items: center !important;
 justify-content: center !important; box-sizing: border-box !important; letter-spacing: .02em !important; }
/* Every button the same height, single or two line */
html body.wooyoo-enabled ul.products li.product .wooyoo-product-button > a {
 height: 50px !important; min-height: 50px !important; flex-direction: column !important;
 align-items: center !important; justify-content: center !important; gap: 1px !important;
 line-height: 1.1 !important; padding: 0 .4rem !important; }
html body.wooyoo-enabled ul.products li.product .wvc-btn-sub {
 font-size: 10px !important; font-weight: 600 !important; line-height: 1.1 !important; display: block !important; }
/* Currency symbol + digits must match the price, not stay 16px/400/grey */
html body.wooyoo-enabled ul.products li.product .price,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-price {
 font-size: 1.22rem !important; font-weight: 800 !important; color: #ff5a14 !important; }
html body.wooyoo-enabled ul.products li.product .price .woocommerce-Price-amount,
html body.wooyoo-enabled ul.products li.product .price .woocommerce-Price-currencySymbol,
html body.wooyoo-enabled ul.products li.product .price bdi,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-price .woocommerce-Price-amount,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-price .woocommerce-Price-currencySymbol,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-price bdi {
 font-size: inherit !important; font-weight: inherit !important; color: inherit !important;
 line-height: inherit !important; vertical-align: baseline !important; font-family: inherit !important; }
/* Archive page wash (#edf2f5 on live) so the white cards stand out */
body.tax-product_cat, body.post-type-archive-product, body.woocommerce-shop,
body.tax-product_tag, body.woocommerce-page.archive { background: #edf2f5 !important; }
body.tax-product_cat .site-content, body.post-type-archive-product .site-content,
body.woocommerce-shop .site-content, body.tax-product_cat #content,
body.post-type-archive-product #content, body.woocommerce-shop #content { background: transparent !important; }
html body.wooyoo-enabled ul.products li.product {
 background: #fff !important; border: 1px solid #e7e7e7 !important; }
/* Bottom-anchor the swatch/price block and fix its parts to constant heights so
   prices line up across every card and OOS always matches the variant row. */
html body.wooyoo-enabled ul.products li.product .wooyoo-product-price {
 margin-top: auto !important; height: auto !important; display: block !important; }
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap {
 height: 86px !important; display: flex !important; flex-direction: column !important;
 justify-content: flex-end !important; gap: 0 !important; }
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap > span.price {
 height: 34px !important; min-height: 34px !important; display: flex !important;
 align-items: center !important; justify-content: center !important; margin: 0 !important; }
html body.wooyoo-enabled ul.products li.product .wvc-swatch-row,
html body.wooyoo-enabled ul.products li.product .wvc-oos-label {
 height: 28px !important; min-height: 28px !important; flex: 0 0 28px !important; }
/* Button text in the brand dark navy - stands out on the orange wash */
html body.wooyoo-enabled ul.products li.product .wooyoo-product-button > a,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-button > a:hover,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-button > a .wvc-btn-sub {
 color: #00092b !important; }
/* Correction: the fixed-height box must sit on .wooyoo-product-price (present on
   EVERY card) not on .wvc-swatch-wrap (missing on simple products), so prices
   bottom-align identically whether or not a variant row exists. */
html body.wooyoo-enabled ul.products li.product .wooyoo-product-price {
 height: 86px !important; min-height: 86px !important; margin-top: auto !important;
 display: flex !important; flex-direction: column !important;
 justify-content: flex-end !important; box-sizing: border-box !important; }
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap {
 height: auto !important; min-height: 0 !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-price > span.price {
 height: 34px !important; min-height: 34px !important; display: flex !important;
 align-items: center !important; justify-content: center !important; margin: 0 !important; }
/* Deterministic stack inside the swatch wrap: lab 19 + row/OOS 28 + price 34 */
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap {
 display: flex !important; flex-direction: column !important;
 justify-content: flex-end !important; gap: 0 !important; padding: 0 !important; }
html body.wooyoo-enabled ul.products li.product .wvc-swatch-lab {
 height: 19px !important; min-height: 19px !important; flex: 0 0 19px !important;
 margin: 0 !important; display: flex !important; align-items: center !important;
 justify-content: center !important; }
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap > span.price,
html body.wooyoo-enabled ul.products li.product .wooyoo-product-price > span.price {
 height: 34px !important; min-height: 34px !important; flex: 0 0 34px !important;
 display: flex !important; align-items: center !important;
 justify-content: center !important; margin: 0 !important; padding: 0 !important; }
/* Fixed title height kills the dead gap between the name and the variant heading
   (with image + title + price box all constant, nothing is left to absorb slack) */
html body.wooyoo-enabled ul.products li.product h3.el-title {
 height: 58px !important; min-height: 58px !important; overflow: hidden !important;
 display: flex !important; align-items: flex-start !important;
 justify-content: center !important; margin: .45rem 0 .1rem !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-top {
 flex: 0 0 auto !important; }
/* ROOT CAUSE FIX: on variable cards the swatch row AND price live inside
   .wooyoo-product-button, while .wooyoo-product-price is an empty container.
   Giving that empty box a height created the title gap, and the variable-height
   button container made rows uneven. Fix the WHOLE bottom block to 140px and
   bottom-align it, so price sits 34px above a 50px button on every card. */
html body.wooyoo-enabled ul.products li.product .wooyoo-product-price {
 height: auto !important; min-height: 0 !important; margin: 0 !important;
 display: flex !important; flex-direction: column !important; justify-content: flex-end !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-bottom {
 height: 140px !important; min-height: 140px !important; flex: 0 0 140px !important;
 margin-top: auto !important; display: flex !important; flex-direction: column !important;
 justify-content: flex-end !important; box-sizing: border-box !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-button {
 display: flex !important; flex-direction: column !important;
 justify-content: flex-end !important; flex: 0 0 auto !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-button .wvc-swatch-wrap {
 height: 86px !important; min-height: 86px !important; flex: 0 0 86px !important; }
/* The swatch wrap sits in .wooyoo-product-button on in-stock cards but in
   .wooyoo-product-price on out-of-stock ones, so fix its height wherever it is -
   that is what aligns OUT OF STOCK with the variant selector row. */
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap {
 height: 86px !important; min-height: 86px !important; flex: 0 0 86px !important; }
/* Last 8px: .wvc-swatch-row carries a bottom margin the OOS label does not,
   which pushed the out-of-stock stack down relative to the variant selector. */
html body.wooyoo-enabled ul.products li.product .wvc-swatch-row,
html body.wooyoo-enabled ul.products li.product .wvc-oos-label { margin: 0 !important; }
/* Archive intro: strip the ~96px header padding and tighten the stack so the
   first row of products is visible on a PC screen without scrolling. */
body.tax-product_cat .woocommerce-products-header,
body.post-type-archive-product .woocommerce-products-header,
body.woocommerce-shop .woocommerce-products-header {
 padding: 0 !important; margin: 0 0 .6rem !important; }
body.tax-product_cat .woocommerce-products-header .term-description,
body.post-type-archive-product .woocommerce-products-header .term-description,
body.woocommerce-shop .woocommerce-products-header .term-description {
 margin-bottom: .5rem !important; }
body.tax-product_cat .storefront-sorting,
body.post-type-archive-product .storefront-sorting,
body.woocommerce-shop .storefront-sorting { margin-bottom: .8rem !important; }
body.tax-product_cat .woocommerce-breadcrumb,
body.post-type-archive-product .woocommerce-breadcrumb { margin-bottom: .5rem !important; }
/* Filter bar spacing to sit tidily above the sorting row */
body.woocommerce .wooyoo-filters { margin: 0 0 .8rem !important; }
/* Kill the dead space above the category heading (breadcrumb wrapper padding)
   and bring the heading down to the live 34px, so products sit above the fold. */
body.woocommerce .storefront-breadcrumb,
body.woocommerce-page .storefront-breadcrumb {
 padding: 0 !important; margin: 0 0 .35rem !important; }
body.woocommerce .site-content, body.woocommerce-page .site-content { padding-top: 0 !important; }
body.tax-product_cat .woocommerce-products-header .page-title,
body.post-type-archive-product .woocommerce-products-header .page-title,
body.woocommerce-shop .woocommerce-products-header .page-title,
body.tax-product_cat h1.page-title {
 font-size: 2.125rem !important; line-height: 1.15 !important; margin: 0 0 .4rem !important;
 padding: 0 !important; }
body.tax-product_cat .term-description p:last-child,
body.post-type-archive-product .term-description p:last-child { margin-bottom: 0 !important; }
/* Simple products (no variant selector) sit in the same rows as variable ones,
   which need label + selector rows, so ~56px is spare. Put that space BELOW the
   price instead of between the title and the price: price hugs the title, the
   button stays pinned to the card bottom. */
html body.wooyoo-enabled ul.products li.product:not(:has(.wvc-swatch-wrap)) .wooyoo-product-bottom {
 justify-content: space-between !important; }
/* On all-simple category pages the fixed 140px bottom block leaves a pointless
   ~56px gap. Let swatch-less cards size to content and flex instead: no gap when
   every card is simple, and on mixed rows the slack falls between price and button. */
html body.wooyoo-enabled ul.products li.product:not(:has(.wvc-swatch-wrap)) .wooyoo-product-bottom {
 height: auto !important; min-height: 0 !important; flex: 1 1 auto !important;
 justify-content: space-between !important; }
html body.wooyoo-enabled ul.products li.product:not(:has(.wvc-swatch-wrap)) .wooyoo-product-price {
 flex: 0 0 auto !important; }
/* ============================================================================
   CARD BOTTOM, REBUILT to the intended model:
     button  pinned to the card bottom
     price   a set 8px above the button
     variant row (or OUT OF STOCK) a set 8px above the price
     variant label directly above that
     product name sits under the image, and the gap between the name and the
     block below it is what varies (variants / out of stock / nothing).
   Because price is always a fixed distance above the button, prices line up
   across variable, out-of-stock and simple cards without forcing card heights.
   ============================================================================ */
html body.wooyoo-enabled ul.products li.product .wooyoo-product-top { flex: 0 0 auto !important; }
html body.wooyoo-enabled ul.products li.product h3.el-title {
 height: auto !important; min-height: 0 !important; display: block !important;
 overflow: visible !important; margin: .5rem 0 0 !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-bottom {
 height: auto !important; min-height: 0 !important; flex: 0 0 auto !important;
 margin-top: auto !important; display: flex !important; flex-direction: column !important;
 justify-content: flex-end !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-price {
 height: auto !important; min-height: 0 !important; flex: 0 0 auto !important; margin: 0 !important; }
html body.wooyoo-enabled ul.products li.product .wvc-swatch-wrap {
 height: auto !important; min-height: 0 !important; flex: 0 0 auto !important;
 display: flex !important; flex-direction: column !important; gap: 0 !important; }
html body.wooyoo-enabled ul.products li.product .wvc-swatch-lab {
 height: 19px !important; flex: 0 0 19px !important; margin: 0 0 4px !important; }
html body.wooyoo-enabled ul.products li.product .wvc-swatch-row,
html body.wooyoo-enabled ul.products li.product .wvc-oos-label {
 height: 28px !important; flex: 0 0 28px !important; margin: 0 0 8px !important; }
html body.wooyoo-enabled ul.products li.product span.price {
 height: 34px !important; flex: 0 0 34px !important; margin: 0 0 8px !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-button { flex: 0 0 auto !important; }
html body.wooyoo-enabled ul.products li.product .wooyoo-product-button > a {
 height: 50px !important; min-height: 50px !important; margin: 0 !important; }
/* Every row the same height, so all cards on the page are equal - not just the
   cards within a single row. */
html body.wooyoo-enabled ul.products { grid-auto-rows: 1fr !important; align-items: stretch !important; }
html body.wooyoo-enabled ul.products li.product { height: 100% !important; }
/* The earlier :not(:has()) rule outranks the generic one on specificity, so
   restate it: swatch-less cards use the same bottom-anchored stack, giving the
   identical price->button distance on every card type. */
html body.wooyoo-enabled ul.products li.product:not(:has(.wvc-swatch-wrap)) .wooyoo-product-bottom {
 height: auto !important; min-height: 0 !important; flex: 0 0 auto !important;
 margin-top: auto !important; justify-content: flex-end !important; }

/* ============================================================================
   SINGLE PRODUCT PAGE
   Storefront ships a float-based layout with a 42px title. Rebuild as a proper
   two-column grid and match the live control styling (pill inputs, navy title,
   orange price), tightened up.
   ============================================================================ */
.single-product div.product {
  display: grid !important;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  column-gap: 3.5rem;
  align-items: start;
  padding: 1.5rem 0 2.5rem !important;
  margin: 0 !important;
}
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .summary {
  float: none !important; width: auto !important; margin: 0 !important;
}
.single-product div.product > .woocommerce-product-gallery { grid-column: 1; }
.single-product div.product > .summary { grid-column: 2; max-width: 640px; }
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells,
.single-product div.product > .storefront-product-pagination,
.single-product div.product > .woocommerce-product-gallery + .summary + * { grid-column: 1 / -1; }

/* Gallery: white panel, tidy thumbnail row underneath */
.single-product .woocommerce-product-gallery {
  background: #fff; border: 1px solid #e7e7e7; border-radius: 2px; padding: 1rem;
}
.single-product .woocommerce-product-gallery .flex-viewport { border-radius: 2px; }
.single-product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex !important; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0 !important;
  padding: 0 !important; list-style: none !important; float: none !important; width: 100% !important;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
  width: 68px !important; margin: 0 !important; float: none !important; list-style: none !important;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img {
  border: 1px solid #e3e7ef; border-radius: 2px; padding: 2px; background: #fff; opacity: 1;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover { border-color: #ff5a14; }

/* Title + price */
.single-product .summary .product_title {
  font-size: 1.7rem !important; line-height: 1.2 !important; font-weight: 800 !important;
  color: #171258 !important; margin: 0 0 .6rem !important; padding: 0 !important;
}
.single-product .summary .price,
.single-product .summary p.price {
  font-size: 2rem !important; font-weight: 800 !important; color: #ff5a14 !important;
  margin: 0 0 1rem !important; line-height: 1.1 !important; display: block !important;
}
.single-product .summary .price .woocommerce-Price-amount,
.single-product .summary .price .woocommerce-Price-currencySymbol,
.single-product .summary .price bdi {
  font-size: inherit !important; font-weight: inherit !important; color: inherit !important;
}
.single-product .summary .price del { font-size: 1.15rem !important; color: #98a2b4 !important; font-weight: 600 !important; }
.single-product .summary .price ins { text-decoration: none !important; }
.single-product .woocommerce-product-details__short-description {
  color: #4a5268; line-height: 1.6; margin: 0 0 1.25rem;
}
/* Variation selects + quantity: pill inputs as on live (48px, #eaf0f3) */
.single-product .summary table.variations { width: 100% !important; margin: 0 0 1rem !important; border: 0 !important; }
.single-product .summary table.variations th,
.single-product .summary table.variations td { display: block !important; width: 100% !important; padding: 0 !important; border: 0 !important; background: none !important; }
.single-product .summary table.variations th.label label,
.single-product .summary .variations label {
  font-size: .875rem !important; font-weight: 700 !important; color: #171258 !important;
  display: block !important; margin: 0 0 .35rem !important; text-transform: none !important;
}
.single-product .summary table.variations td.value { margin-bottom: .9rem !important; }
.single-product .summary .variations select,
.single-product .summary .quantity input.qty {
  height: 48px !important; background: #eaf0f3 !important; border: 1px solid #dce4ea !important;
  border-radius: 500px !important; color: #090e15 !important; font-size: 1rem !important;
  padding: 0 1.25rem !important; box-shadow: none !important; max-width: 100% !important;
}
.single-product .summary .variations select { width: 100% !important; }
.single-product .summary .quantity input.qty { width: 88px !important; text-align: center !important; padding: 0 .5rem !important; }
.single-product .summary .variations select:focus,
.single-product .summary .quantity input.qty:focus { border-color: #ff5a14 !important; outline: none !important; }
.single-product .summary .reset_variations { font-size: .8rem !important; color: #98a2b4 !important; }

/* Add to basket: prominent, brand orange, matching the card radius */
.single-product .summary form.cart { display: flex !important; align-items: center !important; gap: .75rem !important; flex-wrap: wrap !important; margin: 0 0 1.25rem !important; }
.single-product .summary form.cart .quantity { margin: 0 !important; float: none !important; }
.single-product .summary button.single_add_to_cart_button {
  background: #ff3600 !important; color: #fff !important; border: 0 !important;
  border-radius: 2px !important; height: 48px !important; min-width: 220px !important;
  font-size: 1rem !important; font-weight: 800 !important; letter-spacing: .01em !important;
  padding: 0 1.75rem !important; text-transform: none !important; box-shadow: none !important;
}
.single-product .summary button.single_add_to_cart_button:hover { background: #e63000 !important; }
.single-product .summary button.single_add_to_cart_button:disabled,
.single-product .summary button.single_add_to_cart_button.disabled { opacity: .45 !important; cursor: not-allowed !important; }
.single-product .summary .woocommerce-variation-price .price { margin: 0 0 .75rem !important; }

/* Deal box + loyalty notice */
.single-product .wvc-product-deals { margin: 0 0 1.25rem !important; }
.single-product .wvc-product-deals ul.wooyoo-deal-list { margin: 0 !important; padding: 0 !important; list-style: none !important; }

/* Product meta */
.single-product .summary .product_meta {
  border-top: 1px solid #e3e7ef !important; padding-top: 1rem !important; margin: 0 !important;
  font-size: .875rem !important; color: #6b7488 !important;
}
.single-product .summary .product_meta > span { display: block !important; margin-bottom: .3rem !important; }
.single-product .summary .product_meta a { color: #171258 !important; text-decoration: none !important; border-bottom: 1px solid #d7dde8; }
.single-product .summary .product_meta a:hover { color: #ff5a14 !important; border-bottom-color: #ff5a14; }

/* Tabs + related */
.single-product .woocommerce-tabs { margin: 2.5rem 0 0 !important; padding: 0 !important; }
.single-product .woocommerce-tabs ul.tabs {
  display: flex !important; gap: .25rem !important; padding: 0 !important; margin: 0 0 -1px !important;
  border-bottom: 1px solid #e3e7ef !important; list-style: none !important;
}
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.single-product .woocommerce-tabs ul.tabs li {
  background: #f2f5f9 !important; border: 1px solid #e3e7ef !important; border-bottom: 0 !important;
  border-radius: 2px 2px 0 0 !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important;
}
.single-product .woocommerce-tabs ul.tabs li a {
  display: block !important; padding: .7rem 1.25rem !important; color: #6b7488 !important;
  font-weight: 700 !important; font-size: .9rem !important; text-decoration: none !important;
}
.single-product .woocommerce-tabs ul.tabs li.active { background: #fff !important; }
.single-product .woocommerce-tabs ul.tabs li.active a { color: #171258 !important; }
.single-product .woocommerce-tabs .panel {
  background: #fff !important; border: 1px solid #e3e7ef !important; border-radius: 0 2px 2px 2px !important;
  padding: 1.5rem !important; margin: 0 !important; color: #4a5268; line-height: 1.7;
}
.single-product .woocommerce-tabs .panel h2 { font-size: 1.25rem !important; color: #171258 !important; }
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
  font-size: 1.4rem !important; font-weight: 800 !important; color: #171258 !important;
  margin: 2.5rem 0 1rem !important; text-align: center !important;
}
/* Correction: for variable products the qty + button sit inside
   .woocommerce-variation-add-to-cart, so the flex row belongs there, not on
   form.cart (which also holds the variations table). */
.single-product .summary form.cart { display: block !important; margin: 0 0 1.25rem !important; }
.single-product .summary .single_variation_wrap { width: 100% !important; }
.single-product .summary .woocommerce-variation-add-to-cart,
.single-product .summary form.cart:not(.variations_form) {
  display: flex !important; align-items: center !important; gap: .75rem !important;
  flex-wrap: wrap !important; width: 100% !important;
}
.single-product .summary form.cart .quantity {
  width: auto !important; margin: 0 !important; float: none !important; flex: 0 0 auto !important;
}
.single-product .summary .woocommerce-variation-add-to-cart button.single_add_to_cart_button { flex: 0 1 auto !important; }
.single-product .summary .woocommerce-variation { margin: 0 0 .75rem !important; }
/* Clip anything the gallery spills outside its panel before the slider inits */
.single-product .woocommerce-product-gallery { overflow: hidden !important; }
.single-product .woocommerce-product-gallery img { max-width: 100% !important; height: auto !important; }
/* Storefront's prev/next product pagination is position:fixed at the viewport
   edges and just peeks in as a stray thumbnail sliver. Live has no such thing. */
.single-product nav.storefront-product-pagination { display: none !important; }
/* Kill the pill radius on the product controls - small radius like the cards */
.single-product .summary .variations select,
.single-product .summary .quantity input.qty { border-radius: 2px !important; }

/* Variation option buttons replace the "Choose an option" dropdown.
   The select stays in the DOM (visually hidden) so Woo's own logic still runs. */
.single-product .summary table.variations td.value select {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}
.single-product .wvc-vswatch {
  display: flex !important; flex-wrap: wrap !important; gap: .5rem !important; margin: 0 0 .25rem !important;
}
.single-product .wvc-vswatch-opt {
  appearance: none; cursor: pointer;
  background: #fff !important; border: 1px solid #dce4ea !important; border-radius: 2px !important;
  color: #171258 !important; font-size: .95rem !important; font-weight: 700 !important;
  min-width: 76px !important; height: 44px !important; padding: 0 1rem !important;
  line-height: 1 !important; text-transform: none !important; box-shadow: none !important;
  transition: border-color .12s ease, background-color .12s ease;
}
.single-product .wvc-vswatch-opt:hover { border-color: #ff5a14 !important; background: #fff7f3 !important; }
.single-product .wvc-vswatch-opt.is-active {
  border-color: #ff5a14 !important; background: #fff2ec !important; box-shadow: inset 0 0 0 1px #ff5a14 !important;
}
/* Out of stock: greyed with an orange line through the variant name */
.single-product .wvc-vswatch-opt.is-oos {
  color: #9aa4b6 !important; background: #f4f6fa !important; border-color: #e3e7ef !important;
  text-decoration: line-through !important; text-decoration-color: #ff5a14 !important;
  text-decoration-thickness: 2px !important;
}
.single-product .wvc-vswatch-opt.is-oos:hover { border-color: #e3e7ef !important; background: #f4f6fa !important; }

/* SKU / categories / tags / brand now sits under the image in the left column */
.single-product div.product > .wvc-meta-under-image { grid-column: 1 !important; margin: 1rem 0 0 !important; }
.single-product .wvc-meta-under-image .product_meta {
  border-top: 0 !important; padding: 0 !important; margin: 0 !important;
  font-size: .8125rem !important; color: #6b7488 !important; line-height: 1.6 !important;
}
.single-product .wvc-meta-under-image .product_meta > span { display: block !important; margin-bottom: .25rem !important; }
.single-product .wvc-meta-under-image .product_meta a { color: #171258 !important; text-decoration: none !important; border-bottom: 1px solid #d7dde8; }
.single-product .wvc-meta-under-image .product_meta a:hover { color: #ff5a14 !important; border-bottom-color: #ff5a14; }
/* Tighten the stack between the variant buttons and the basket row (padding was
   stacking across the table cell, the table, and the add-to-cart wrapper). */
.single-product .summary table.variations { margin: 0 0 .5rem !important; }
.single-product .summary table.variations td.value { margin-bottom: .5rem !important; line-height: 1 !important; }
.single-product .summary .wvc-vswatch { margin: 0 !important; }
.single-product .summary .woocommerce-variation-add-to-cart { padding-top: 0 !important; }
/* Clicking the active variant button clears it, so Woo's "Clear" link is redundant */
.single-product .summary .reset_variations { display: none !important; }

/* Related / upsell products centred on screen whatever the count */
.single-product .related.products ul.products,
.single-product .upsells.products ul.products {
  justify-content: center !important; margin-left: auto !important; margin-right: auto !important;
}
.single-product .related.products,
.single-product .upsells.products { text-align: center !important; }
.single-product .related.products ul.products li.product,
.single-product .upsells.products ul.products li.product { text-align: left !important; }
/* Explicit grid placement: inserting the meta block before .summary in the DOM
   made auto-placement push the title/summary below the image. Pin all three:
   image top-left, meta under it, summary in the right column spanning both. */
.single-product div.product { grid-template-rows: auto auto !important; }
.single-product div.product > .woocommerce-product-gallery { grid-column: 1 !important; grid-row: 1 !important; }
.single-product div.product > .wvc-meta-under-image { grid-column: 1 !important; grid-row: 2 !important; }
.single-product div.product > .summary { grid-column: 2 !important; grid-row: 1 / span 2 !important; }
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells { grid-column: 1 / -1 !important; grid-row: auto !important; }
/* Mobile: single column. DOM order is gallery -> meta -> summary, so use order
   to keep the buying controls directly under the image and push meta last. */
@media (max-width: 860px) {
  .single-product div.product {
    display: flex !important; flex-direction: column !important;
    grid-template-columns: none !important; grid-template-rows: none !important;
    column-gap: 0 !important; padding: 1rem 0 2rem !important;
  }
  .single-product div.product > .woocommerce-product-gallery { order: 1; width: 100% !important; }
  .single-product div.product > .summary { order: 2; width: 100% !important; max-width: none !important; margin: 1.25rem 0 0 !important; }
  .single-product div.product > .wvc-meta-under-image { order: 3; width: 100% !important; margin: 1.5rem 0 0 !important; }
  .single-product div.product > .woocommerce-tabs { order: 4; width: 100% !important; }
  .single-product div.product > .related,
  .single-product div.product > .upsells { order: 5; width: 100% !important; }

  .single-product .summary .product_title { font-size: 1.4rem !important; }
  .single-product .summary .price { font-size: 1.75rem !important; }
  .single-product .wvc-vswatch-opt { flex: 1 1 auto !important; min-width: 84px !important; }
  .single-product .summary .woocommerce-variation-add-to-cart { gap: .5rem !important; }
  .single-product .summary button.single_add_to_cart_button { flex: 1 1 auto !important; min-width: 0 !important; }

  /* Tabs stack rather than squeeze */
  .single-product .woocommerce-tabs ul.tabs { flex-wrap: wrap !important; }
  .single-product .woocommerce-tabs ul.tabs li { flex: 1 1 auto !important; text-align: center !important; }
  .single-product .woocommerce-tabs .panel { padding: 1rem !important; border-radius: 2px !important; }
}

/* ============================================================================
   MOBILE FOOTER BAR (.storefront-handheld-footer-bar)
   Storefront's default is an unstyled grey strip. With the Xootix side cart
   removed this is the main basket route on phones, so make it a proper brand bar.
   ============================================================================ */
.storefront-handheld-footer-bar {
  background: #00092b !important; border-top: 0 !important;
  box-shadow: 0 -2px 12px rgba(0, 9, 43, .28) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}
.storefront-handheld-footer-bar ul { display: flex !important; margin: 0 !important; }
.storefront-handheld-footer-bar ul li { border: 0 !important; box-shadow: none !important; flex: 1 1 0 !important; }
.storefront-handheld-footer-bar ul li > a {
  display: flex !important; flex-direction: column !important; align-items: center !important;
  justify-content: center !important; gap: .15rem !important;
  height: 62px !important; padding: 0 !important;
  color: #fff !important; font-size: .6875rem !important; font-weight: 700 !important;
  letter-spacing: .02em !important; text-transform: uppercase !important;
  text-decoration: none !important; box-shadow: none !important;
  border-right: 1px solid rgba(255, 255, 255, .1) !important;
}
.storefront-handheld-footer-bar ul li:last-child > a { border-right: 0 !important; }
.storefront-handheld-footer-bar ul li > a::before {
  position: static !important; display: block !important;
  font-size: 1.35rem !important; line-height: 1 !important; margin: 0 !important;
  color: #fff !important; text-indent: 0 !important;
}
.storefront-handheld-footer-bar ul li > a:hover,
.storefront-handheld-footer-bar ul li > a:active { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }

/* Basket count badge in brand orange */
.storefront-handheld-footer-bar .cart .count {
  background: #ff3600 !important; color: #fff !important;
  border: 2px solid #00092b !important; border-radius: 500px !important;
  min-width: 20px !important; height: 20px !important; line-height: 16px !important;
  font-size: .625rem !important; font-weight: 800 !important;
  top: 6px !important; right: 50% !important; margin-right: -22px !important;
  padding: 0 4px !important; box-sizing: border-box !important;
}
/* Storefront's search dropdown sits above the bar */
.storefront-handheld-footer-bar .search .site-search {
  background: #00092b !important; border-top: 1px solid rgba(255,255,255,.12) !important; padding: .75rem !important;
}
.storefront-handheld-footer-bar .search .site-search input[type=search] { border-radius: 2px !important; height: 44px !important; }

/* Nothing should hide behind the bar */
@media (max-width: 767px) { body.woocommerce, body.woocommerce-page { padding-bottom: 62px !important; } }
/* The bar's icons were Font Awesome 5 Free glyphs, which this child theme never
   loads - so they rendered as empty boxes. Use self-contained inline SVG instead. */
.storefront-handheld-footer-bar ul li > a { text-indent: 0 !important; }
.storefront-handheld-footer-bar ul li > a::before {
  content: '' !important;
  width: 24px !important; height: 24px !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 24px 24px !important;
  font-family: inherit !important;
}
.storefront-handheld-footer-bar ul li.my-account > a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}
.storefront-handheld-footer-bar ul li.cart > a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='19' cy='20' r='1.6'/%3E%3Cpath d='M2 3h3l2.4 11.2a2 2 0 0 0 2 1.6h8.4a2 2 0 0 0 2-1.6L21.5 7H6'/%3E%3C/svg%3E") !important;
}
.storefront-handheld-footer-bar ul li.search > a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
}
/* With Search removed the two remaining items split the bar evenly */
.storefront-handheld-footer-bar ul.columns-3 { grid-template-columns: none !important; }
.storefront-handheld-footer-bar ul li { min-width: 0 !important; }
/* Top toolbar: it lives inside .col-full so its dark strip stopped short of the
   viewport edges against the lighter header. Paint it edge to edge without
   changing layout (same full-bleed trick used elsewhere in this theme). */
.wvc-topbar {
  box-shadow: 0 0 0 100vmax #10161f !important;
  clip-path: inset(0 -100vmax) !important;
  position: relative !important;
}
/* The handheld footer bar is gone, so reclaim the space it was reserving */
@media (max-width: 767px) {
  body.woocommerce, body.woocommerce-page { padding-bottom: 0 !important; }
}
/* The sticky header used top:0, so for logged-in users the toolbar row (account
   + basket) slid underneath the fixed WP admin bar and looked non-sticky.
   Offset by the admin bar height when it is present. */
body.admin-bar .site-header { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px !important; }
}

/* ============================================================================
   STATIC PAGES (policies, calculators, store pages, price match, vape club)
   Storefront leaves these as raw unstyled content at full container width.
   Give them a readable measure and proper heading rhythm.
   ============================================================================ */
body.page:not(.woocommerce-page):not(.home) .entry-content,
body.page-template-default:not(.home) .entry-content {
  max-width: 78ch; margin-left: auto; margin-right: auto;
  color: #3d4657; font-size: 1.0625rem; line-height: 1.75;
}
/* Full-width elements escape the reading measure */
body.page:not(.home) .entry-content > .wvc-nic-calc,
body.page:not(.home) .entry-content > .wvc-pgvg-calc,
body.page:not(.home) .entry-content > table,
body.page:not(.home) .entry-content > .wp-block-table,
body.page:not(.home) .entry-content > figure { max-width: 100%; }

body.page:not(.home) .entry-content h1 {
  font-size: 2.125rem; line-height: 1.2; color: #171258;
  margin: 0 0 1rem; letter-spacing: -.01em;
}
body.page:not(.home) .entry-content h2 {
  font-size: 1.5rem; line-height: 1.25; color: #171258;
  margin: 2.25rem 0 .75rem; padding-top: .25rem;
}
body.page:not(.home) .entry-content h3 {
  font-size: 1.175rem; line-height: 1.3; color: #171258; margin: 1.75rem 0 .5rem;
}
body.page:not(.home) .entry-content h4 { font-size: 1.0625rem; color: #171258; margin: 1.5rem 0 .4rem; }
body.page:not(.home) .entry-content p { margin: 0 0 1.1rem; }
body.page:not(.home) .entry-content a { color: #ee5a24; text-decoration: none; border-bottom: 1px solid rgba(238,90,36,.35); }
body.page:not(.home) .entry-content a:hover { color: #171258; border-bottom-color: #171258; }
body.page:not(.home) .entry-content strong { color: #171258; }
body.page:not(.home) .entry-content ul,
body.page:not(.home) .entry-content ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
body.page:not(.home) .entry-content li { margin-bottom: .45rem; }
body.page:not(.home) .entry-content ul li::marker { color: #ee5a24; }
body.page:not(.home) .entry-content blockquote {
  margin: 1.5rem 0; padding: .9rem 1.25rem; background: #f4f6fa;
  border-left: 3px solid #ee5a24; border-radius: 2px; color: #3d4657; font-style: normal;
}
body.page:not(.home) .entry-content img { max-width: 100%; height: auto; border-radius: 2px; }
body.page:not(.home) .entry-content hr { border: 0; border-top: 1px solid #e3e7ef; margin: 2rem 0; }
/* Content tables (the nic calculator page alone has 11) */
body.page:not(.home) .entry-content table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 1.75rem;
  font-size: .95rem; background: #fff; border: 1px solid #e3e7ef; border-radius: 2px;
  overflow: hidden;
}
body.page:not(.home) .entry-content table th {
  background: #171258; color: #fff; font-weight: 700; text-align: left;
  padding: .7rem .9rem; font-size: .875rem; letter-spacing: .01em; border: 0;
}
body.page:not(.home) .entry-content table td {
  padding: .65rem .9rem; border: 0; border-top: 1px solid #eceff5; color: #3d4657;
}
body.page:not(.home) .entry-content table tbody tr:nth-child(even) td { background: #f8fafc; }
body.page:not(.home) .entry-content table tbody tr:hover td { background: #fff4ef; }
body.page:not(.home) .entry-content table td:first-child { font-weight: 600; color: #171258; }
/* Wide tables scroll rather than break the page */
body.page:not(.home) .entry-content .wp-block-table,
body.page:not(.home) .entry-content figure.wp-block-table { overflow-x: auto; }

/* Section spacing so long policy pages breathe */
body.page:not(.woocommerce-page):not(.home) .entry-content > *:first-child { margin-top: 0; }
body.page:not(.woocommerce-page):not(.home) article.hentry { padding-bottom: 1.5rem; }
/* Map embeds on the store pages: responsive, never overflow the measure */
body.page:not(.home) .entry-content iframe {
  display: block; width: 100% !important; max-width: 100%;
  min-height: 320px; border: 1px solid #e3e7ef !important; border-radius: 2px;
  margin: 0 0 1.75rem; background: #eef2f6;
}
/* Shop photos */
body.page:not(.home) .entry-content figure { margin: 0 0 1.75rem; }
body.page:not(.home) .entry-content figure img { display: block; width: 100%; }
body.page:not(.home) .entry-content figcaption {
  font-size: .8125rem; color: #6b7488; text-align: center; margin-top: .5rem;
}
body.page:not(.home) .entry-content p > img,
body.page:not(.home) .entry-content > img {
  display: block; margin: 0 auto 1.75rem;
  border: 1px solid #e3e7ef; border-radius: 2px;
}
/* Store pages lean on h3 for opening hours / address blocks */
body.page:not(.home) .entry-content h3 + ul,
body.page:not(.home) .entry-content h3 + p { margin-top: .35rem; }

/* ============================================================================
   STICKY FOOTER - footer always sits at the bottom of the viewport on short
   pages (price match, account deletion, thank-you pages) instead of floating
   halfway up with white space beneath it.
   ============================================================================ */
.hfeed.site {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh;
}
body.admin-bar .hfeed.site { min-height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .hfeed.site { min-height: calc(100vh - 46px); }
}
.hfeed.site > .site-content { flex: 1 0 auto !important; }
.hfeed.site > .site-footer,
.hfeed.site > .wvc-footer { flex-shrink: 0 !important; margin-top: auto !important; }
/* My static-page heading colour (#171258) was overriding the calculators' own
   white headings, leaving "Nic Shot" navy-on-navy inside the dark card.
   Restore white for headings inside any dark calculator widget. */
body.page .entry-content .calc-header h1,
body.page .entry-content .calc-header h2,
body.page .entry-content .calc-header h3,
body.page .entry-content .calc-header h4,
body.page .entry-content [class*="-calc"] h1,
body.page .entry-content [class*="-calc"] h2,
body.page .entry-content [class*="-calc"] h3,
body.page .entry-content [class*="-calc"] h4 { color: #fff !important; }
/* keep the accent spans their own colour */
body.page .entry-content .calc-header h1 span,
body.page .entry-content .calc-header h2 span,
body.page .entry-content [class*="-calc"] h2 span,
body.page .entry-content [class*="-calc"] h3 span { color: inherit; }
/* ...but that inherit killed the green accent word. Restore it (live = #4ade80). */
body.page .entry-content .calc-header h1 span,
body.page .entry-content .calc-header h2 span,
body.page .entry-content .calc-header h3 span,
body.page .entry-content [class*="-calc"] .calc-header h2 span,
body.page .entry-content [class*="-calc"] .calc-header h3 span { color: #4ade80 !important; }
/* The footer is a child of .hfeed.site on most pages but a direct child of body
   on pages whose broken legacy markup shifted it out, so the sticky-footer rule
   must cover both structures. */
body > footer.site-footer,
body > .wvc-footer { flex-shrink: 0 !important; margin-top: auto !important; }
body:has(> footer.site-footer) { display: flex; flex-direction: column; min-height: 100vh; }
body:has(> footer.site-footer) > .hfeed.site { flex: 1 0 auto !important; min-height: 0 !important; }

/* ============================================================================
   STORE PAGES - Our Stores + the three individual shop pages
   Shop photos arrive at mixed aspect ratios (625x469, 625x469, 900x725), so
   force a uniform 4:3 crop instead of letting each render at its natural size.
   ============================================================================ */
body.page .entry-content .wvc-store-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem; margin: 1.75rem 0 2rem; align-items: start;
}
body.page .entry-content .wvc-store-card {
  background: #fff; border: 1px solid #e3e7ef; border-radius: 2px;
  overflow: hidden; display: flex; flex-direction: column; height: 100%;
}
body.page .entry-content .wvc-store-card > *:not(p:first-of-type) { padding-left: 1.1rem; padding-right: 1.1rem; }
body.page .entry-content .wvc-store-card h2 {
  font-size: 1.15rem !important; margin: 1rem 0 .5rem !important; color: #171258 !important;
  padding-left: 1.1rem; padding-right: 1.1rem;
}
body.page .entry-content .wvc-store-card p { margin: 0 0 .7rem; font-size: .95rem; line-height: 1.6; }
body.page .entry-content .wvc-store-card p:last-child { margin-bottom: 1.1rem; }
/* uniform cropped photo, flush to the card top */
body.page .entry-content .wvc-store-card p:has(img) { padding: 0 !important; margin: 0 !important; order: -1; }
body.page .entry-content .wvc-store-card img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 0 !important; border-radius: 0 !important; margin: 0 !important;
}
/* Individual shop pages: single hero photo, same uniform crop */
body.page-holbury-vape-shop .entry-content p > img,
body.page-hythe-vape-shop .entry-content p > img,
body.page-totton-vape-shop .entry-content p > img,
body.page .entry-content p > img.wvc-shop-photo {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 2px; border: 1px solid #e3e7ef;
}
@media (max-width: 900px) {
  body.page .entry-content .wvc-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body.page .entry-content .wvc-store-grid { grid-template-columns: 1fr; }
}
/* Reworked store blocks: one full-width styled block per shop, photo on the
   left spanning the full height, details stacked on the right. */
body.page .entry-content .wvc-store-grid {
  grid-template-columns: 1fr !important; gap: 1.25rem !important;
}
body.page .entry-content .wvc-store-card {
  display: grid !important;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr) !important;
  align-items: stretch !important;
  background: #fff !important; border: 1px solid #e3e7ef !important;
  border-radius: 2px !important; overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(23, 18, 88, .04);
}
body.page .entry-content .wvc-store-card > * {
  grid-column: 2 !important;
  padding-left: 1.6rem !important; padding-right: 1.6rem !important;
}
body.page .entry-content .wvc-store-card > p:has(img) {
  grid-column: 1 !important; grid-row: 1 / -1 !important;
  padding: 0 !important; margin: 0 !important; height: 100% !important; order: 0 !important;
}
body.page .entry-content .wvc-store-card img {
  width: 100% !important; height: 100% !important;
  aspect-ratio: auto !important; object-fit: cover !important; min-height: 300px;
}
body.page .entry-content .wvc-store-card h2 {
  margin: 1.5rem 0 .6rem !important; font-size: 1.3rem !important;
  padding-left: 1.6rem !important; padding-right: 1.6rem !important;
}
body.page .entry-content .wvc-store-card h3 {
  font-size: 1rem !important; margin: 1.1rem 0 .4rem !important; color: #171258 !important;
}
body.page .entry-content .wvc-store-card > *:last-child { padding-bottom: 1.5rem !important; }

/* Stack on smaller screens, photo on top */
@media (max-width: 780px) {
  body.page .entry-content .wvc-store-card { grid-template-columns: 1fr !important; }
  body.page .entry-content .wvc-store-card > * { grid-column: 1 !important; }
  body.page .entry-content .wvc-store-card > p:has(img) { grid-row: auto !important; order: -1 !important; }
  body.page .entry-content .wvc-store-card img {
    aspect-ratio: 16 / 9 !important; height: auto !important; min-height: 0;
  }
}
/* The photo was sitting at its min-height instead of filling the block, because
   the <p> wrapper's height stayed auto. Pin the image to the wrapper instead. */
body.page .entry-content .wvc-store-card > p:has(img) {
  position: relative !important; align-self: stretch !important;
  min-height: 240px !important; display: block !important;
}
body.page .entry-content .wvc-store-card > p:has(img) img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; object-fit: cover !important;
  min-height: 0 !important;
}
@media (max-width: 780px) {
  body.page .entry-content .wvc-store-card > p:has(img) {
    position: static !important; min-height: 0 !important;
  }
  body.page .entry-content .wvc-store-card > p:has(img) img {
    position: static !important; aspect-ratio: 16 / 9 !important; height: auto !important;
  }
}
/* grid-row: 1 / -1 only spanned ONE row: -1 resolves against the EXPLICIT grid,
   and these rows are all implicit (only columns were declared). Span explicitly. */
body.page .entry-content .wvc-store-card > p:has(img) {
  grid-row: 1 / span 99 !important;
}
@media (max-width: 780px) {
  body.page .entry-content .wvc-store-card > p:has(img) { grid-row: auto !important; }
}
/* 50/50 split: photo and details get equal width */
body.page .entry-content .wvc-store-card {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
/* the grid must never inherit list styling if it lands inside a list item */
body.page .entry-content .wvc-store-grid,
body.page .entry-content li:has(> .wvc-store-grid) {
  list-style: none !important; margin-left: 0 !important; padding-left: 0 !important;
}
body.page .entry-content li:has(> .wvc-store-grid)::marker { content: none !important; }
/* Shop blocks: navy outline, navy header band with orange name + white address */
body.page .entry-content .wvc-store-card {
  border: 2px solid #171258 !important;
  box-shadow: 0 2px 6px rgba(23, 18, 88, .07) !important;
}
body.page .entry-content .wvc-store-head {
  grid-column: 2 !important;
  background: #171258 !important;
  padding: 1.1rem 1.6rem 1.2rem !important;
  margin: 0 !important;
}
body.page .entry-content .wvc-store-head h2 {
  color: #ff7a3d !important; margin: 0 !important;
  padding: 0 !important; font-size: 1.3rem !important; line-height: 1.2 !important;
}
body.page .entry-content .wvc-store-head p {
  color: #fff !important; margin: .4rem 0 0 !important;
  padding: 0 !important; font-size: .95rem !important; line-height: 1.5 !important;
  font-style: normal !important;
}
body.page .entry-content .wvc-store-head p a { color: #fff !important; border-bottom-color: rgba(255,255,255,.4) !important; }
/* first content row after the band needs its own breathing room */
body.page .entry-content .wvc-store-card > .wvc-store-head + * { padding-top: 1.1rem !important; }
@media (max-width: 780px) {
  body.page .entry-content .wvc-store-head { grid-column: 1 !important; }
}
/* Holbury's address is a <div>, so style any block inside the band, not just <p> */
body.page .entry-content .wvc-store-head p,
body.page .entry-content .wvc-store-head div,
body.page .entry-content .wvc-store-head span,
body.page .entry-content .wvc-store-head em,
body.page .entry-content .wvc-store-head strong {
  color: #fff !important; font-style: normal !important;
  font-size: .95rem !important; line-height: 1.5 !important;
}
body.page .entry-content .wvc-store-head > p,
body.page .entry-content .wvc-store-head > div {
  margin: .4rem 0 0 !important; padding: 0 !important;
}
body.page .entry-content .wvc-store-head a { color: #fff !important; }
/* Breathing room under the shop hero block before the copy resumes */
body.page .entry-content .wvc-shop-hero { margin: 0 0 2.75rem !important; }
body.page .entry-content .wvc-shop-hero + * { margin-top: 0 !important; }

/* ============================================================================
   BLOG ARCHIVE - 3-up card grid (live uses 3 columns, 260px cover thumbnails)
   ============================================================================ */
body.blog .site-main,
body.archive:not(.woocommerce-page):not(.tax-product_cat) .site-main,
body.search-results .site-main {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  align-items: start;
}
body.blog .site-main > article,
body.archive:not(.woocommerce-page):not(.tax-product_cat) .site-main > article,
body.search-results .site-main > article {
  background: #fff; border: 1px solid #e3e7ef; border-radius: 2px;
  overflow: hidden; margin: 0 !important; padding: 0 !important;
  display: flex; flex-direction: column; height: 100%;
  box-shadow: 0 1px 3px rgba(23, 18, 88, .05);
  transition: box-shadow .15s ease, border-color .15s ease;
}
body.blog .site-main > article:hover { border-color: #ff5a14; box-shadow: 0 4px 14px rgba(23, 18, 88, .1); }
/* thumbnail */
body.blog .wvc-card-thumb,
body.archive .wvc-card-thumb,
body.search-results .wvc-card-thumb { display: block; border-bottom: 1px solid #eceff5; }
body.blog .wvc-card-thumb img,
body.archive .wvc-card-thumb img,
body.search-results .wvc-card-thumb img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important;
}
/* header / title / meta */
body.blog .site-main > article .entry-header,
body.search-results .site-main > article .entry-header { padding: 1.1rem 1.1rem 0 !important; margin: 0 !important; }
body.blog .site-main > article .entry-title,
body.search-results .site-main > article .entry-title {
  font-size: 1.075rem !important; line-height: 1.3 !important; margin: 0 0 .4rem !important;
}
body.blog .site-main > article .entry-title a { color: #171258 !important; text-decoration: none !important; border: 0 !important; }
body.blog .site-main > article .entry-title a:hover { color: #ff5a14 !important; }
body.blog .site-main > article .posted-on,
body.blog .site-main > article .entry-meta {
  font-size: .75rem !important; color: #8a90a2 !important; margin: 0 !important;
}
/* excerpt + read more */
body.blog .wvc-card-excerpt,
body.archive .wvc-card-excerpt,
body.search-results .wvc-card-excerpt {
  padding: .75rem 1.1rem 0 !important; margin: 0 !important;
  font-size: .9rem !important; line-height: 1.6 !important; color: #4a5268 !important; flex: 1 1 auto;
}
body.blog .wvc-card-more,
body.archive .wvc-card-more,
body.search-results .wvc-card-more {
  display: inline-block; margin: .9rem 1.1rem 1.2rem !important;
  font-size: .8125rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  color: #ff5a14 !important; text-decoration: none !important; border: 0 !important;
}
body.blog .wvc-card-more:hover { color: #171258 !important; }
/* the archive intro + pagination must span the whole grid */
body.blog .site-main > .page-header,
body.blog .site-main > header,
body.blog .site-main > .nav-links,
body.blog .site-main > nav,
body.blog .site-main > .storefront-sorting { grid-column: 1 / -1 !important; }
@media (max-width: 900px) {
  body.blog .site-main, body.search-results .site-main { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  body.blog .site-main, body.search-results .site-main { grid-template-columns: 1fr !important; }
}
/* Card meta: date only, below the title, quiet. Live shows no author/comments. */
body.blog .site-main > article .entry-header,
body.search-results .site-main > article .entry-header {
  display: flex !important; flex-direction: column !important;
}
body.blog .site-main > article .entry-title { order: 1 !important; }
body.blog .site-main > article .entry-meta,
body.blog .site-main > article .post-meta { order: 2 !important; }
body.blog .site-main > article .byline,
body.blog .site-main > article .comments-link,
body.blog .site-main > article .entry-meta .sep,
body.search-results .site-main > article .byline,
body.search-results .site-main > article .comments-link { display: none !important; }
body.blog .site-main > article .posted-on,
body.blog .site-main > article .entry-meta,
body.blog .site-main > article .post-meta {
  font-size: .75rem !important; color: #8a90a2 !important;
  margin: 0 0 .1rem !important; text-transform: uppercase; letter-spacing: .03em;
}
body.blog .site-main > article .posted-on a,
body.blog .site-main > article .entry-meta a {
  color: #8a90a2 !important; text-decoration: none !important; border: 0 !important;
}
/* Correct classes: this build uses .post-author / .post-comments, not
   .byline / .comments-link, which is why they were still showing. */
body.blog .site-main > article .post-author,
body.blog .site-main > article .post-comments,
body.archive .site-main > article .post-author,
body.archive .site-main > article .post-comments,
body.search-results .site-main > article .post-author,
body.search-results .site-main > article .post-comments { display: none !important; }
body.blog .site-main > article .posted-on { display: block !important; }

/* ============================================================================
   SINGLE BLOG POST - the body was running the full 1290px container width,
   which is far too wide to read. Same 78ch measure as the static pages, but
   product grids, tables and media break out to full width.
   ============================================================================ */
body.single-post .entry-content {
  max-width: 78ch; margin-left: auto; margin-right: auto;
  color: #3d4657; font-size: 1.0625rem; line-height: 1.75;
}
body.single-post .entry-content > ul.products,
body.single-post .entry-content > .woocommerce,
body.single-post .entry-content > table,
body.single-post .entry-content > figure,
body.single-post .entry-content > .wp-block-table {
  max-width: none !important; width: auto !important;
}
body.single-post .entry-content h1 { font-size: 2.125rem; line-height: 1.2; color: #171258; margin: 0 0 1rem; }
body.single-post .entry-content h2 { font-size: 1.5rem; line-height: 1.25; color: #171258; margin: 2.25rem 0 .75rem; }
body.single-post .entry-content h3 { font-size: 1.175rem; color: #171258; margin: 1.75rem 0 .5rem; }
body.single-post .entry-content h4 { font-size: 1.0625rem; color: #171258; margin: 1.5rem 0 .4rem; }
body.single-post .entry-content p { margin: 0 0 1.1rem; }
body.single-post .entry-content a { color: #ee5a24; text-decoration: none; border-bottom: 1px solid rgba(238,90,36,.35); }
body.single-post .entry-content a:hover { color: #171258; border-bottom-color: #171258; }
body.single-post .entry-content ul,
body.single-post .entry-content ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
body.single-post .entry-content ul:not(.products) li { margin-bottom: .45rem; }
body.single-post .entry-content img { max-width: 100%; height: auto; }
/* the post title itself */
body.single-post .entry-title { font-size: 2.125rem !important; line-height: 1.2 !important; color: #171258 !important; }
body.single-post .entry-header { max-width: 78ch; margin-left: auto; margin-right: auto; }
/* Embedded product grids in posts were 6 columns inside the 78ch measure, so
   cards were 132px and images 130x130 - but badges are sized for the archive's
   200px cards (a 102x61 badge on a 130px image swamps it). Use 4 columns so the
   cards match the archive width and the badges sit correctly. */
body.single-post .entry-content ul.products {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: .75rem !important;
}
@media (max-width: 780px) {
  body.single-post .entry-content ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
  body.single-post .entry-content ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* My post paragraph margin (1.1rem = 17.6px) was inheriting into the <p> inside
   each badge, inflating badges from 43px to 61px tall - exactly the 17.6px
   difference vs the category page. Product markup must not take post typography. */
body.single-post .entry-content ul.products p,
body.single-post .entry-content ul.products li.product p,
body.single-post .entry-content .wooyoo-badge p,
body.single-post .entry-content .wooyoo-badges-container p {
  margin: 0 !important;
}
body.single-post .entry-content ul.products,
body.single-post .entry-content ul.products li.product {
  font-size: 16px !important; line-height: 1.5 !important;
}

/* ============================================================================
   CART MODAL - centred dialog opened from the toolbar cart
   ============================================================================ */
.wvc-cartm[hidden] { display: none !important; }
.wvc-cartm { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.wvc-cartm__backdrop { position: absolute; inset: 0; background: rgba(9, 14, 21, .62); backdrop-filter: blur(2px); }
body.wvc-cartm-open { overflow: hidden; }
.wvc-cartm__panel {
  position: relative; z-index: 1; width: 100%; max-width: 520px;
  max-height: 85vh; overflow: auto; background: #fff;
  border: 2px solid #171258; border-radius: 2px;
  box-shadow: 0 18px 50px rgba(9, 14, 21, .35);
  padding: 1.4rem 1.5rem 1.2rem;
}
.wvc-cartm__x {
  position: absolute; top: .5rem; right: .6rem; width: 34px; height: 34px;
  background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer;
  color: #8a90a2; padding: 0; border-radius: 2px;
}
.wvc-cartm__x:hover { color: #ff3600; background: #f4f6fa; }
.wvc-cartm__title {
  margin: 0 0 1rem !important; font-size: 1.25rem !important; color: #171258 !important;
  padding-right: 2rem;
}
.wvc-cartm__list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.wvc-cartm__item {
  display: grid; grid-template-columns: 56px 1fr auto; gap: .8rem; align-items: center;
  padding: .7rem 0; border-top: 1px solid #eceff5; margin: 0 !important;
}
.wvc-cartm__item:first-child { border-top: 0; }
.wvc-cartm__item img,
.wvc-cartm__noimg {
  width: 56px; height: 56px; object-fit: cover; display: block;
  border: 1px solid #e3e7ef; border-radius: 2px; background: #f4f6fa;
}
.wvc-cartm__meta { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.wvc-cartm__name { font-weight: 700; color: #171258; font-size: .9rem; line-height: 1.35; }
.wvc-cartm__var { font-size: .75rem; color: #6b7488; }
.wvc-cartm__var span { margin-right: .5rem; }
.wvc-cartm__qty { font-size: .75rem; color: #8a90a2; text-transform: uppercase; letter-spacing: .03em; }
.wvc-cartm__price { font-weight: 800; color: #ff5a14; white-space: nowrap; }
.wvc-cartm__loading,
.wvc-cartm__empty { color: #6b7488; margin: .5rem 0 1rem !important; }
.wvc-cartm__foot { border-top: 1px solid #e3e7ef; margin-top: .9rem; padding-top: .9rem; }
.wvc-cartm__total { display: flex; justify-content: space-between; font-size: .95rem; color: #171258; margin-bottom: .9rem; }
.wvc-cartm__total strong { font-size: 1.15rem; color: #ff5a14; }
.wvc-cartm__actions { display: flex; gap: .6rem; }
.wvc-cartm__btn {
  flex: 1 1 0; text-align: center; padding: .8rem .6rem; border-radius: 2px;
  font-weight: 800; font-size: .9rem; text-decoration: none !important; border: 2px solid #171258 !important;
}
.wvc-cartm__btn--ghost { background: #fff; color: #171258 !important; }
.wvc-cartm__btn--ghost:hover { background: #f4f6fa; }
.wvc-cartm__btn--solid { background: #ff3600; border-color: #ff3600 !important; color: #fff !important; }
.wvc-cartm__btn--solid:hover { background: #e63000; border-color: #e63000 !important; }
@media (max-width: 480px) {
  .wvc-cartm__actions { flex-direction: column; }
}
/* deal / online price display inside the cart modal */
.wvc-cartm__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.wvc-cartm__price del { color: #98a2b4; font-weight: 600; font-size: .8rem; text-decoration: line-through; }
.wvc-cartm__price ins { text-decoration: none; color: #ff5a14; font-weight: 800; }
.wvc-cartm__deal {
  font-style: normal; font-size: .625rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #fff; background: #2ea44f; padding: 1px 5px; border-radius: 2px; margin-top: 2px;
}
.wvc-cartm__feeline {
  display: flex; justify-content: space-between; margin: .5rem 0 0 !important;
  font-size: .85rem; color: #2ea44f; font-weight: 700;
}
.wvc-cartm__total { flex-wrap: wrap; }
.wvc-cartm__saved {
  flex: 1 0 100%; margin-top: .3rem; font-size: .8rem; font-weight: 800;
  color: #2ea44f; text-transform: uppercase; letter-spacing: .03em;
}
/* Cart modal: quantity stepper + remove, everything on the 2px radius */
.wvc-cartm__panel { border-radius: 2px !important; }
.wvc-cartm__x { border-radius: 2px !important; }
.wvc-cartm__btn { border-radius: 2px !important; }
.wvc-cartm__item { grid-template-columns: 60px 1fr auto !important; align-items: start !important; }
.wvc-cartm__item img,
.wvc-cartm__noimg { width: 60px !important; height: 60px !important; border-radius: 2px !important; }
.wvc-cartm__stepper { display: flex; align-items: center; gap: .3rem; margin-top: .35rem; }
.wvc-cartm__step {
  width: 26px; height: 26px; line-height: 1; padding: 0; cursor: pointer;
  background: #fff; color: #171258; font-weight: 800; font-size: .95rem;
  border: 1px solid #dce4ea !important; border-radius: 2px !important;
}
.wvc-cartm__step:hover { border-color: #ff5a14 !important; color: #ff5a14; background: #fff7f3; }
.wvc-cartm__q {
  min-width: 30px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  background: #f4f6fa; border: 1px solid #e3e7ef; border-radius: 2px;
  font-size: .8rem; font-weight: 800; color: #171258;
}
.wvc-cartm__rm {
  margin-left: .4rem; padding: 0 .5rem; height: 26px; cursor: pointer;
  background: none; border: 0; border-radius: 2px;
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: #98a2b4;
}
.wvc-cartm__rm:hover { color: #ff3600; background: #fff2ec; }
.wvc-cartm.is-busy .wvc-cartm__panel { opacity: .55; pointer-events: none; }
.wvc-cartm__title { border-bottom: 2px solid #171258; padding-bottom: .6rem; }
.wvc-cartm__feeline span { color: #2ea44f; }
/* online-price tag + per-unit line in the cart modal */
.wvc-cartm__online {
  font-style: normal; font-size: .625rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #fff; background: #ff5a14;
  padding: 1px 5px; border-radius: 2px; margin-top: 2px;
}
.wvc-cartm__each { font-size: .7rem; color: #8a90a2; margin-top: 2px; }
/* footer: subtotal / deal saving / total to pay */
.wvc-cartm__pay {
  flex: 1 0 100%; display: flex; justify-content: space-between; align-items: baseline;
  margin-top: .45rem; padding-top: .45rem; border-top: 1px dashed #e3e7ef;
  font-size: .95rem; color: #171258;
}
.wvc-cartm__pay strong { font-size: 1.25rem; color: #ff5a14; }
.wvc-cartm__each { font-size: .72rem; color: #8a90a2; }
.wvc-cartm__deal { background: #2ea44f !important; }

/* ===== Cart modal v9 - premium shell ===== */
html body .wvc-cartm{align-items:center!important}
html body .wvc-cartm__backdrop{background:rgba(10,8,40,.55)!important}
html body .wvc-cartm__panel{position:relative!important;border:0!important;border-radius:16px!important;overflow:hidden!important;padding:0!important;background:#fff!important;box-shadow:0 30px 70px rgba(10,8,40,.45)!important;max-height:86vh!important;display:flex!important;flex-direction:column!important;opacity:0!important;transform:translateY(-10px) scale(.985)!important;transition:opacity .2s ease,transform .2s ease!important}
html body .wvc-cartm.is-open .wvc-cartm__panel{opacity:1!important;transform:none!important}
html body .wvc-cartm__title{background:#171258!important;color:#fff!important;margin:0!important;padding:1.05rem 3.4rem 1.05rem 1.4rem!important;font-size:1.15rem!important;line-height:1.2!important;border:0!important;flex:0 0 auto!important}
html body .wvc-cartm__x{position:absolute!important;top:.8rem!important;right:.85rem!important;width:34px!important;height:34px!important;border:0!important;border-radius:50%!important;background:rgba(255,255,255,.16)!important;color:#fff!important;font-size:20px!important;line-height:1!important;z-index:5!important}
html body .wvc-cartm__x:hover{background:rgba(255,255,255,.32)!important}
html body .wvc-cartm__body{padding:1rem 1.4rem 1.4rem!important;overflow-y:auto!important;flex:1 1 auto!important}
/* ===== Cart modal v9 - rows, totals, buttons ===== */
html body .wvc-cartm__item{border-bottom:1px solid #ece9f5!important;padding:.85rem 0!important}
html body .wvc-cartm__name{font-weight:600!important;color:#171258!important}
html body .wvc-cartm__each{color:#6b6890!important;font-size:.82rem!important}
html body .wvc-cartm__price{font-weight:700!important;color:#171258!important}
html body .wvc-cartm__stepper{border:1px solid #d9d5e8!important;border-radius:2px!important;overflow:hidden!important}
html body .wvc-cartm__step{background:#f6f5fb!important;color:#171258!important;font-weight:700!important;border:0!important}
html body .wvc-cartm__step:hover{background:#171258!important;color:#fff!important}
html body .wvc-cartm__rm{color:#8a86a8!important;font-size:.78rem!important}
html body .wvc-cartm__rm:hover{color:#c0392b!important}
html body .wvc-cartm__totals{border-top:2px solid #171258!important;margin-top:.7rem!important;padding-top:.9rem!important}
html body .wvc-cartm__totals tr.order-total th,html body .wvc-cartm__totals tr.order-total td{font-size:1.05rem!important;color:#171258!important;font-weight:700!important}
html body .wvc-cartm__actions{gap:.7rem!important;padding-top:1.1rem!important}
html body .wvc-cartm__btn{border-radius:2px!important;font-weight:700!important;min-height:48px!important;display:flex!important;align-items:center!important;justify-content:center!important}
html body .wvc-cartm__btn--solid{background:#ff7a3d!important;color:#171258!important;border:0!important}
html body .wvc-cartm__btn--ghost{background:#fff!important;color:#171258!important;border:2px solid #171258!important}
/* ===== Cart modal v9 - mobile top sheet (drops down from the top) ===== */
@media (max-width:768px){
html body .wvc-cartm{align-items:flex-start!important;justify-content:center!important;padding:0!important}
html body .wvc-cartm__panel{width:100%!important;max-width:100%!important;margin:0!important;border-radius:0 0 20px 20px!important;max-height:88vh!important;opacity:1!important;transform:translateY(-102%)!important;transition:transform .3s cubic-bezier(.22,.85,.3,1)!important}
html body .wvc-cartm.is-open .wvc-cartm__panel{transform:translateY(0)!important}
html body .wvc-cartm__title{padding:1rem 3.2rem 1rem 1.1rem!important}
html body .wvc-cartm__body{padding:.9rem 1.1rem 1.2rem!important}
html body .wvc-cartm__actions{flex-direction:column!important}
}
/* ===== Cart modal v9 - flex column: only the item list scrolls ===== */
html body .wvc-cartm__panel > *{flex:0 0 auto!important}
html body .wvc-cartm__body{flex:1 1 auto!important;min-height:24vh!important;overflow-y:auto!important}
html body .wvc-cartm__totals tr.shipping th,html body .wvc-cartm__totals tr.shipping td{color:#171258!important}
/* ===== Cart modal v9 - compact summary panel so the buttons always fit ===== */
html body .wvc-cartm__body{min-height:90px!important;flex:1 1 auto!important}
html body .wvc-cartm__totals{border-top:1px solid #e6e2f2!important;background:#faf9fd!important;margin:0!important;padding:.7rem 1.4rem .2rem!important}
html body .wvc-cartm__totals table.shop_table th,html body .wvc-cartm__totals table.shop_table td{padding:.4rem .2rem!important;background:transparent!important;border:0!important;border-bottom:1px solid #ece9f5!important}
html body .wvc-cartm__totals table.shop_table tr:last-child th,html body .wvc-cartm__totals table.shop_table tr:last-child td{border-bottom:0!important}
html body .wvc-cartm__actions{padding:.9rem 1.4rem 1.2rem!important;margin:0!important;background:#faf9fd!important}
/* item list sizes to its content, capped so tall baskets scroll */
html body .wvc-cartm__body{flex:0 1 auto!important;min-height:0!important;max-height:42vh!important;overflow-y:auto!important}
@media (max-width:768px){html body .wvc-cartm__body{max-height:46vh!important}}
/* tighter summary so more of the basket is visible */
html body .wvc-cartm__panel{max-height:92vh!important}
html body .wvc-cartm__wctotals .wooyoo-deal-banner{margin:.1rem 0 .45rem!important;padding:.5rem .7rem!important;font-size:.85rem!important}
html body .wvc-cartm__wctotals .lpp-cart-message{margin:0 0 .45rem!important;padding:.4rem .6rem!important;font-size:.78rem!important}
html body .wvc-cartm__btn{min-height:44px!important}
html body .wvc-cartm__actions{padding:.75rem 1.4rem 1rem!important}
/* mobile: keep the two actions side by side so the sheet stays short */
@media (max-width:768px){
html body .wvc-cartm__actions{flex-direction:row!important;padding:.7rem 1rem .9rem!important}
html body .wvc-cartm__btn{font-size:.92rem!important;padding-left:.4rem!important;padding-right:.4rem!important}
html body .wvc-cartm__wctotals{padding:0 1rem!important}
}
@media (max-width:768px){
html body .wvc-cartm__panel{max-height:94vh!important}
html body .wvc-cartm__body{min-height:120px!important;max-height:38vh!important}
}
@media (max-width:768px){
html body .wvc-cartm__panel{max-height:98vh!important}
html body .wvc-cartm__body{min-height:104px!important}
html body .wvc-cartm__actions{padding:.6rem 1rem .8rem!important}
}
html body.wvc-cartm-open{overflow:hidden!important}
/* ===== topbar basket: more prominent, off the edge, bumps on change ===== */
html body .wvc-topbar .wvc-top-cart{padding-right:.5rem!important;gap:.45rem!important}
html body .wvc-topbar .wvc-cart__count{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:20px!important;height:20px!important;padding:0 5px!important;border-radius:999px!important;font-size:12px!important;font-weight:800!important;line-height:1!important;color:#fff!important;background:#ee5a24!important;box-shadow:0 0 0 2px rgba(255,255,255,.22)!important}
@keyframes wvcBump{0%{transform:scale(1)}30%{transform:scale(1.5)}100%{transform:scale(1)}}
html body .wvc-cart__count.wvc-bump{animation:wvcBump .5s ease!important}
@media (max-width:980px){
html body .wvc-topbar__inner{padding-right:1.3rem!important}
html body .wvc-topbar .wvc-top-cart{padding-right:.25rem!important}
html body .wvc-topbar .wvc-cart__count{min-width:22px!important;height:22px!important;font-size:12.5px!important}
html body .wvc-topbar .wvc-top-cart svg{width:22px!important;height:22px!important}
}
/* ===== cart modal: Remove becomes a bin icon only ===== */
html body .wvc-cartm__rm{font-size:0!important;color:transparent!important;width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;flex:0 0 34px!important;border:1px solid #e6e2f2!important;border-radius:2px!important;background-color:#fff!important;background-repeat:no-repeat!important;background-position:center!important;background-size:17px 17px!important;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a86a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6M14 11v6'/><path d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/></svg>")!important}
html body .wvc-cartm__rm:hover{border-color:#c0392b!important;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6M14 11v6'/><path d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/></svg>")!important}
/* homepage: Storefront's display:table clearfix makes the template's leading
   whitespace render a 23px line box, gapping hero away from the trust strip */
/* cart modal stepper hugs its content; bin sits just outside the group */
html body .wvc-cartm__stepper{display:inline-flex!important;width:auto!important;align-items:center!important;gap:.4rem!important;border:0!important;overflow:visible!important;align-self:flex-start!important}
html body .wvc-cartm__step{width:30px!important;height:30px!important;flex:0 0 30px!important;border:1px solid #d9d5e8!important;border-radius:2px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:#f6f5fb!important}
html body .wvc-cartm__q{min-width:26px!important;text-align:center!important;font-weight:700!important;color:#171258!important}
html body .wvc-cartm__rm{width:30px!important;height:30px!important;min-width:30px!important;flex:0 0 30px!important;margin-left:.35rem!important;background-size:16px 16px!important}
/* a chosen variant must be unmistakable - it was a near-white peach before */
html body .wvc-vswatch-opt.is-active,
html body ul.products li.product .wvc-swatch.wvc-sel{background:#171258!important;border-color:#171258!important;color:#fff!important;font-weight:800!important;box-shadow:0 0 0 2px rgba(23,18,88,.2)!important}
@media (max-width:860px){
html body .wvc-vswatch-opt{min-height:46px!important;font-size:1rem!important}
html body .wvc-vswatch-opt.is-active,
html body ul.products li.product .wvc-swatch.wvc-sel{box-shadow:0 0 0 3px rgba(238,90,36,.5)!important}
}
/* the leading whitespace text node in Storefront's page template still renders
   a line box, so collapse it to zero and restore the size on real children */
/* Homepage hero must butt against the orange rule under the trust strip.
   Storefront leaves 22.6px above main inside the floated .content-area that is
   not padding, border, margin, a node or a pseudo - nothing I could attribute,
   so this is a measured compensator. Re-measure if Storefront is updated. */
body.home .entry-content > p,body.home .entry-content > * > p{margin:0!important}
/* ===== store cards: single column on portrait phones, image full width ===== */
@media (max-width:768px){
body.page .entry-content .wvc-store-card{grid-template-columns:minmax(0,1fr)!important}
body.page .entry-content .wvc-store-card > *{grid-column:1!important;grid-row:auto!important;padding-left:1.1rem!important;padding-right:1.1rem!important}
body.page .entry-content .wvc-store-head{padding:1rem 1.1rem 1.1rem!important}
body.page .entry-content .wvc-store-card > p:has(img){grid-column:1!important;grid-row:auto!important;position:relative!important;aspect-ratio:16/10!important;padding:0!important;margin:0!important;align-self:auto!important}
body.page .entry-content .wvc-store-card > p:has(img) img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
}
/* ===== cart modal: products left, summary right, deal+total pinned ===== */
html body .wvc-cartm__panel{max-width:960px!important;width:min(960px,94vw)!important}
html body .wvc-cartm__grid{flex:1 1 auto!important;min-height:0!important}
html body .wvc-cartm__body{max-height:none!important;min-height:0!important;overflow:visible!important;flex:0 1 auto!important;padding:.9rem 1.2rem 1.2rem!important}
html body .wvc-cartm__aside{padding:.9rem 1.1rem 0!important}
html body .wvc-cartm__pin{background:#faf9fd!important;border-top:1px solid #e6e2f2!important;padding:.7rem 1.1rem .9rem!important}
html body .wvc-cartm__pin .wvc-cartm__totals{border:0!important;background:transparent!important;margin:0!important;padding:0!important}
html body .wvc-cartm__pin tr.cart-subtotal{display:none!important}
html body .wvc-cartm__pin .wvc-cartm__actions{padding:.7rem 0 0!important;background:transparent!important}
@media (min-width:901px){
html body .wvc-cartm__grid{display:grid!important;grid-template-columns:1.5fr 1fr!important;overflow:hidden!important}
html body .wvc-cartm__left{overflow-y:auto!important;min-height:0!important}
html body .wvc-cartm__right{display:flex!important;flex-direction:column!important;min-height:0!important;border-left:1px solid #ece9f5!important;background:#faf9fd!important}
html body .wvc-cartm__aside{overflow-y:auto!important;min-height:0!important;flex:1 1 auto!important}
html body .wvc-cartm__pin{margin-top:auto!important;flex:0 0 auto!important}
}
@media (max-width:900px){
html body .wvc-cartm__grid{display:block!important;overflow-y:auto!important}
html body .wvc-cartm__pin{position:sticky!important;bottom:0!important;z-index:3!important;box-shadow:0 -6px 16px rgba(10,8,40,.08)!important}
}
/* free-delivery progress */
html body .wvc-freedel{margin:.2rem 0 .7rem!important}
html body .wvc-freedel__bar{height:6px!important;border-radius:999px!important;background:#e6e2f2!important;overflow:hidden!important}
html body .wvc-freedel__bar > span{display:block!important;height:100%!important;background:linear-gradient(90deg,#ff7a3d,#ee5a24)!important;transition:width .3s ease!important}
html body .wvc-freedel__txt{margin:.4rem 0 0!important;font-size:.82rem!important;color:#171258!important;line-height:1.35!important}
html body .wvc-freedel.is-qualified .wvc-freedel__bar > span{background:#22a35a!important}
/* ===== checkout: Worldpay card fields ===== */
/* ROOT BUG: our page-embed rule .entry-content iframe{min-height:320px} (for
   video/maps) was stretching Worldpay's hosted PAN/expiry/CVV iframes to 320px.
   The gateway's own CSS expects height:auto and Worldpay sets an inline height,
   so ONLY neutralise min-height here - never force a height. */
html body .wp-block-woocommerce-checkout iframe,
html body .wc-block-gateway-input iframe,
html body iframe[id^="access-worldpay-"]{min-height:0!important}
/* ===== checkout (WooCommerce Blocks) styled to the theme ===== */
html body .wp-block-woocommerce-checkout,
html body .wp-block-woocommerce-checkout input,
html body .wp-block-woocommerce-checkout select,
html body .wp-block-woocommerce-checkout button,
html body .wp-block-woocommerce-checkout label,
html body .wp-block-woocommerce-checkout .wc-block-components-title{font-family:inherit!important}
html body .wp-block-woocommerce-checkout .wc-block-components-text-input input,
html body .wp-block-woocommerce-checkout select,
html body .wp-block-woocommerce-checkout textarea{border:1px solid #d9d5e8!important;border-radius:2px!important;min-height:52px!important;color:#090e15!important;background:#fff!important}
html body .wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
html body .wp-block-woocommerce-checkout select:focus,
html body .wp-block-woocommerce-checkout textarea:focus{border-color:#ee5a24!important;box-shadow:0 0 0 2px rgba(238,90,36,.25)!important;outline:0!important}
html body .wp-block-woocommerce-checkout .wc-block-components-text-input label{color:#6b6890!important}
html body .wc-block-gateway-input{border-radius:2px!important;border-color:#d9d5e8!important}
html body .wc-block-components-checkout-place-order-button{background:#ee5a24!important;color:#fff!important;border:0!important;border-radius:2px!important;font-weight:800!important;min-height:56px!important}
html body .wc-block-components-checkout-place-order-button:hover{background:#d94e1c!important}
/* checkout: prices were falling back to Blocks' monospace stack */
html body .wp-block-woocommerce-checkout .woocommerce-Price-amount,
html body .wp-block-woocommerce-checkout .woocommerce-Price-currencySymbol,
html body .wp-block-woocommerce-checkout bdi,
html body .wp-block-woocommerce-checkout .wc-block-components-totals-item__value,
html body .wp-block-woocommerce-checkout .wc-block-components-product-price,
html body .wp-block-woocommerce-checkout .wc-block-components-formatted-money-amount{font-family:inherit!important}
/* checkout: order summary reads as a card, total is the hero figure */
html body .wp-block-woocommerce-checkout .wc-block-components-sidebar .wc-block-components-totals-wrapper,
html body .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block{background:#faf9fd!important;border-radius:4px!important}
html body .wp-block-woocommerce-checkout .wc-block-components-totals-item__label{color:#171258!important}
html body .wp-block-woocommerce-checkout .wc-block-components-totals-footer-item{border-top:2px solid #171258!important}
html body .wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{color:#171258!important;font-weight:800!important}
html body .wp-block-woocommerce-checkout .wc-block-components-product-name{color:#171258!important;font-weight:600!important}
/* the loyalty-points notice is echoed OUTSIDE the checkout block, so it missed
   the rule above and kept Blocks' monospace price stack */
html body.woocommerce-checkout .woocommerce-Price-amount,
html body.woocommerce-checkout .woocommerce-Price-currencySymbol,
html body.woocommerce-checkout bdi,
html body.woocommerce-checkout .lpp-cart-message,
html body.woocommerce-checkout .lpp-cart-message *{font-family:inherit!important}
/* The loyalty plugin INLINES a Monaco/Consolas stack on its notice, and the
   checkout block page does NOT carry a woocommerce-checkout body class, so a
   page-scoped rule never matched. Target the element itself instead. */
html body .lpp-cart-message,
html body .lpp-cart-message *{font-family:inherit!important}
/* On checkout the loyalty plugin uses .lpp-badge and wraps the text in a <code>
   element, so the browser's default monospace applied. (On the cart page it uses
   .lpp-cart-message with no <code>, which is why that one looked fine.) */
html body .lpp-badge,
html body .lpp-badge code,
html body .lpp-badge code *{font-family:inherit!important;font-size:inherit!important}
/* Stray empty <code></code> left in the checkout page content renders as a grey
   square (browser code tint). Hidden here; better still, delete it from the
   Checkout page in the editor. */
html body .wc-block-checkout__form code:empty,
html body .wc-block-checkout__form p.wp-block-paragraph:empty{display:none!important}
/* ===== checkout: rhythm + delivery toggle ===== */
html body .wp-block-woocommerce-checkout{padding-top:0!important;margin-top:0!important}
html body .wc-block-checkout__form > *:first-child,
html body .wc-block-components-sidebar > *:first-child{margin-top:0!important}
html body .wp-block-woocommerce-checkout .wc-block-components-checkout-step{margin:0 0 2rem!important;padding:0!important}
html body .wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading{margin:0 0 .3rem!important}
html body .wp-block-woocommerce-checkout .wc-block-components-checkout-step__description{margin:0 0 .9rem!important;color:#6b6890!important}
html body .wp-block-woocommerce-checkout .wc-block-components-checkout-step__content{margin:0!important}
/* Ship / Store Pickup as one control, selected = navy */
html body .wc-block-checkout__shipping-method-container,
html body .wc-block-checkout__shipping-method .components-button-group{border:1px solid #d9d5e8!important;border-radius:2px!important;overflow:hidden!important;background:#fff!important}
html body .wc-block-checkout__shipping-method-option{border:0!important;border-radius:0!important;background:#f6f5fb!important;color:#171258!important;font-weight:700!important;padding:1rem .9rem!important;box-shadow:none!important}
html body .wc-block-checkout__shipping-method-option--selected{background:#171258!important;color:#fff!important}
html body .wc-block-checkout__shipping-method-option--selected .wc-block-checkout__shipping-method-option-title{color:#fff!important}
html body .wc-block-checkout__shipping-method-option--selected .wc-block-checkout__shipping-method-option-icon{fill:#fff!important}
/* ===== checkout: order summary ===== */
/* the thumbnail wrapper was 22px wide x 178px tall, squashing the product to
   22x22 - give it a real square and let the image fill it */
html body .wc-block-components-order-summary-item__image{width:64px!important;height:64px!important;min-width:64px!important;flex:0 0 64px!important}
html body .wc-block-components-order-summary-item__image img{width:64px!important;height:64px!important;object-fit:contain!important;border:1px solid #e7e7e7!important;border-radius:2px!important;background:#fff!important}
html body .wc-block-components-order-summary-item{padding:.85rem 0!important;gap:.9rem!important;align-items:flex-start!important}
html body .wc-block-components-order-summary-item__description .wc-block-components-product-name{display:block!important;margin:0 0 .2rem!important;line-height:1.3!important}
html body .wc-block-components-address-card{border:1px solid #d9d5e8!important;border-radius:2px!important;padding:1rem!important}
@media (min-width:1000px){
html body .wc-block-checkout__sidebar{position:sticky!important;top:130px!important;align-self:flex-start!important}
}
/* ===== checkout: compact the order summary ===== */
html body .wc-block-components-order-summary-item{padding:.7rem 0!important;gap:.75rem!important}
html body .wc-block-components-order-summary-item__image{width:56px!important;height:56px!important;min-width:56px!important;flex:0 0 56px!important}
html body .wc-block-components-order-summary-item__image img{width:56px!important;height:56px!important}
html body .wc-block-components-order-summary-item__description{display:flex!important;flex-direction:column!important;gap:.1rem!important}
html body .wc-block-components-order-summary-item__description .wc-block-components-product-name{font-size:.86rem!important;line-height:1.25!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
html body .wc-block-components-order-summary-item__description .wc-block-components-product-price,
html body .wc-block-components-order-summary-item__description .wc-block-components-product-metadata,
html body .wc-block-components-order-summary-item__description .wc-block-components-product-metadata *{font-size:.76rem!important;margin:0!important;color:#6b6890!important;line-height:1.35!important}
html body .wc-block-components-order-summary-item__total-price{font-size:.9rem!important;font-weight:700!important;color:#171258!important}
/* rebalance the two columns - the summary was too narrow so product names wrapped
   four lines deep, which is most of why the page felt endless */
@media (min-width:1000px){
html body .wc-block-components-sidebar-layout{gap:2.5rem!important;align-items:flex-start!important}
html body .wc-block-checkout__main{flex:1 1 57%!important;max-width:57%!important}
html body .wc-block-checkout__sidebar{flex:0 0 38%!important;max-width:38%!important}
}
/* tighten the remaining loose bits */
html body .wp-block-woocommerce-checkout .wc-block-components-totals-item{padding:.45rem 0!important}
html body .wp-block-woocommerce-checkout .wc-block-components-totals-wrapper{padding:.5rem 1rem!important}
html body .wp-block-woocommerce-checkout .wc-block-components-checkout-step__content > *:last-child{margin-bottom:0!important}
html body .wp-block-woocommerce-checkout .wc-block-components-checkbox{margin:.5rem 0!important}
html body .wp-block-woocommerce-checkout .wc-block-checkout__actions{margin-top:1.2rem!important;padding-top:1.2rem!important}
/* ===== checkout: close the remaining dead zones ===== */
/* 96px sat between the page title and the first field */
html body:has(.wp-block-woocommerce-checkout) .entry-title,
html body:has(.wp-block-woocommerce-checkout) .page-title{margin-bottom:.75rem!important}
/* terms block shipped with 48px padding-top AND 48px margin-bottom */
html body .wc-block-checkout__terms{padding-top:1.1rem!important;margin-bottom:1.1rem!important;margin-top:0!important}
/* stray empty paragraphs in the page content, each carrying a 17.6px margin */
html body .wc-block-checkout__form > p:empty,
html body .wc-block-checkout__form > p.wp-block-paragraph:empty{display:none!important;margin:0!important}
/* the loyalty notice sits loose between the steps - pull it in */
html body .wc-block-checkout__form > div:not([class]){margin:0 0 1.2rem!important}
/* The 96px under the page title is .entry-header's padding-bottom (Storefront),
   not the title's own margin - that was the miss on the previous attempt. */
html body:has(.wp-block-woocommerce-checkout) .entry-header,
html body:has(.wp-block-woocommerce-cart) .entry-header{padding-bottom:.75rem!important}
/* ===== cart page (WooCommerce Blocks) ===== */
/* My checkout rule set gap:2.5rem on EVERY .wc-block-components-sidebar-layout.
   The cart's columns are 708+381=1089 = exactly the row width, so the extra 40px
   wrapped the totals underneath the items and left half the page empty. Give the
   cart its own proportions that fit WITH the gap. */
@media (min-width:1000px){
html body .wc-block-components-sidebar-layout.wc-block-cart{gap:2.5rem!important;align-items:flex-start!important}
html body .wc-block-cart__main{flex:1 1 60%!important;max-width:60%!important}
html body .wc-block-cart__sidebar{flex:0 0 35%!important;max-width:35%!important;position:sticky!important;top:130px!important}
}
html body .wp-block-woocommerce-cart,
html body .wp-block-woocommerce-cart input,
html body .wp-block-woocommerce-cart button,
html body .wp-block-woocommerce-cart .woocommerce-Price-amount,
html body .wp-block-woocommerce-cart .woocommerce-Price-currencySymbol,
html body .wp-block-woocommerce-cart bdi,
html body .wp-block-woocommerce-cart .wc-block-components-totals-item__value,
html body .wp-block-woocommerce-cart .wc-block-components-formatted-money-amount{font-family:inherit!important}
/* cart rows: compact, real thumbnails, brand colours */
html body .wc-block-cart-items__header{display:none!important}
html body .wc-block-cart-items__row{padding:1rem 0!important}
html body .wc-block-cart-item__image{width:84px!important;min-width:84px!important;padding-right:1rem!important}
html body .wc-block-cart-item__image img{width:84px!important;height:84px!important;object-fit:contain!important;border:1px solid #e7e7e7!important;border-radius:2px!important;background:#fff!important}
html body .wc-block-cart-item__product .wc-block-components-product-name{color:#171258!important;font-weight:600!important;text-decoration:none!important;font-size:.95rem!important;line-height:1.3!important}
html body .wc-block-cart-item__product .wc-block-components-product-price{color:#6b6890!important;font-size:.85rem!important}
html body .wc-block-cart-item__product .wc-block-components-product-metadata{font-size:.8rem!important;color:#6b6890!important;margin:.15rem 0 .5rem!important}
html body .wc-block-cart-item__total .wc-block-components-product-price{color:#171258!important;font-weight:700!important}
html body .wc-block-components-quantity-selector{border:1px solid #d9d5e8!important;border-radius:2px!important;max-width:118px!important}
html body .wc-block-cart-item__remove-link{color:#8a86a8!important;font-size:.78rem!important}
html body .wc-block-cart-item__remove-link:hover{color:#c0392b!important}
/* totals card + checkout button to match the checkout page */
html body .wc-block-cart__sidebar .wc-block-components-sidebar{background:#faf9fd!important;border:1px solid #e6e2f2!important;border-radius:4px!important}
html body .wp-block-woocommerce-cart .wc-block-components-totals-item{padding:.45rem 0!important}
html body .wp-block-woocommerce-cart .wc-block-components-totals-footer-item{border-top:2px solid #171258!important}
html body .wc-block-cart__submit-button{background:#ee5a24!important;color:#fff!important;border:0!important;border-radius:2px!important;font-weight:800!important;min-height:56px!important}
/* cart rows a touch tighter again */
html body .wc-block-cart-items__row{padding:.75rem 0!important}
html body .wc-block-cart-item__image{width:72px!important;min-width:72px!important;padding-right:.9rem!important}
html body .wc-block-cart-item__image img{width:72px!important;height:72px!important}
html body .wc-block-cart-item__product .wc-block-components-product-name{font-size:.9rem!important}
html body .wc-block-cart-item__product .wc-block-components-product-metadata{margin:.1rem 0 .4rem!important}
html body .wc-block-cart-item__product .wc-block-components-product-price{font-size:.82rem!important}
html body .wc-block-components-quantity-selector{max-width:104px!important;min-height:38px!important}
html body .wc-block-cart-item__remove-link{margin-top:.35rem!important;display:inline-block!important}
/* put the quantity stepper and Remove on ONE line - Remove sitting on its own
   row was costing ~30px per item for no reason */
html body .wc-block-cart-item__quantity{display:flex!important;align-items:center!important;gap:.9rem!important;flex-wrap:wrap!important}
html body .wc-block-cart-item__remove-link{margin:0!important}
/* ===== order-received / order details table ===== */
/* Storefront paints table th a solid navy, so the label column rendered as a
   blue block with the prices stranded outside it. Flatten and restyle. */
html body .woocommerce-order-details table th,
html body .woocommerce-table--order-details th,
html body .woocommerce-customer-details table th{background:transparent!important;color:#171258!important;font-weight:700!important}
html body .woocommerce-order-details table td,
html body .woocommerce-table--order-details td{background:transparent!important;color:#090e15!important}
html body .woocommerce-table--order-details{border:1px solid #e6e2f2!important;border-radius:4px!important;width:100%!important;border-collapse:collapse!important}
html body .woocommerce-table--order-details th,
html body .woocommerce-table--order-details td{border-bottom:1px solid #ece9f5!important;padding:.7rem 1rem!important;vertical-align:middle!important}
html body .woocommerce-table--order-details tfoot tr:last-child th,
html body .woocommerce-table--order-details tfoot tr:last-child td{border-bottom:0!important;border-top:2px solid #171258!important;font-weight:800!important;color:#171258!important;font-size:1.02rem!important}
/* the Invoice button was orange text on an orange background */
html body a.woocommerce-button.button,
html body .woocommerce-order-details a.button,
html body .order-actions-button{color:#fff!important;background:#ee5a24!important;border-radius:2px!important;font-weight:700!important;padding:.55rem 1.1rem!important;display:inline-block!important;text-decoration:none!important}
html body a.woocommerce-button.button:hover,
html body .order-actions-button:hover{background:#d94e1c!important;color:#fff!important}

/* =========================================================================
   PRODUCT SEARCH — must not inherit the blog card grid            (1.2.2)
   -------------------------------------------------------------------------
   body.search-results .site-main applies the 3-across blog layout. A WooCommerce
   product search carries .search-results too, so ul.products was being placed
   as a single cell of that grid and squeezed to a third of the page.
   The sibling selector above it already guards WooCommerce archives with
   :not(.woocommerce-page):not(.tax-product_cat); product search needs the
   equivalent guard. Overridden here rather than edited inline so the existing
   blog/search rules are left untouched.
   ========================================================================= */
body.search-results.post-type-archive-product .site-main {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

/* =========================================================================
   ANCHOR OFFSET — sticky header                                    (1.2.3)
   -------------------------------------------------------------------------
   The site header is position:sticky and ~119px tall, so any in-page anchor
   (e.g. the hero's "or browse by flavour" -> #flavours) scrolled its target
   to y=0, i.e. underneath the header. scroll-margin-top parks the target
   below it. Applied to :target so every current and future anchor benefits
   rather than fixing them one id at a time.
   ========================================================================= */
:target { scroll-margin-top: 140px; }

@media (max-width: 767px) {
    /* Header is shorter on handheld, so less offset is needed. */
    :target { scroll-margin-top: 100px; }
}