/*
Theme Name: Codex HUSHGROVE
Theme URI: https://hushgrove.example
Author: Codex Store Builder
Description: Minimal US-market WooCommerce theme for adult vaping products.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: codex-hushgrove-us
Codex Store Builder Fresh Build: 5d419117d71f777612ac69a813ace8d6
*/

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-VariableFont.woff2") format("woff2");
  font-style: oblique 0deg 10deg;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-VariableFont_wght.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --vf-white: #ffffff;
  --vf-off-white: #f7f6f4;
  --vf-accent: #5f4b6b;
  --vf-accent-dark: #483952;
  --vf-ink: #141416;
  --vf-muted: #6b6862;
  --vf-line: #e5e3df;
  --vf-soft: #efece8;
  --vf-max: 1320px;
  --vf-pad: clamp(20px, 4vw, 64px);
  --vf-shadow: none;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--vf-white);
  color: var(--vf-ink);
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.admin-bar { min-height: calc(100vh - 32px); }

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

a {
  color: inherit;
  text-decoration: none;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.65em;
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

h1 { font-size: clamp(2.75rem, 7vw, 6.8rem); }
h2 { font-size: clamp(2.15rem, 4vw, 4.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }

p { margin: 0 0 1.2em; }

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  word-wrap: normal !important;
}

.vf-container {
  width: min(calc(100% - (var(--vf-pad) * 2)), var(--vf-max));
  margin-inline: auto;
}

.vf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--vf-accent);
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vf-eyebrow::before {
  width: 28px;
  height: 1px;
  background: currentColor;
  content: "";
}

.vf-button,
button.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce ul.products li.product .button,
.woocommerce table.cart td.actions .button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.wc-block-components-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 28px;
  border: 1px solid var(--vf-accent);
  border-radius: 2px;
  background: var(--vf-accent);
  color: var(--vf-white);
  font-size: 0.83rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.vf-button:hover,
button.single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:hover {
  border-color: var(--vf-accent-dark);
  background: var(--vf-accent-dark);
  color: var(--vf-white);
  transform: translateY(-1px);
}

.vf-button--outline {
  background: transparent;
  color: var(--vf-accent);
}

.vf-button--outline:hover {
  background: var(--vf-accent);
  color: var(--vf-white);
}

.site-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--vf-line);
  background: rgba(255, 255, 255, 0.96);
}

.age-strip {
  padding: 9px var(--vf-pad);
  background: var(--vf-ink);
  color: var(--vf-white);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.header-inner {
  display: grid;
  min-height: 90px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 38px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.site-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.primary-navigation {
  justify-self: center;
}

.primary-navigation ul {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 42px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-navigation a {
  position: relative;
  padding: 34px 0;
  font-size: 0.79rem;
  font-weight: 680;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.primary-navigation a::after {
  position: absolute;
  right: 0;
  bottom: 25px;
  left: 0;
  height: 1px;
  background: var(--vf-accent);
  content: "";
  transform: scaleX(0);
  transition: transform 180ms ease;
}

.primary-navigation a:hover::after { transform: scaleX(1); }

.primary-navigation .menu-item-has-children { position: relative; }
.primary-navigation .menu-item-has-children > ul {
  position: absolute;
  top: calc(100% - 1px);
  left: -18px;
  display: grid;
  width: 230px;
  gap: 0;
  padding: 12px;
  border: 1px solid var(--vf-line);
  background: var(--vf-white);
  box-shadow: var(--vf-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.primary-navigation .menu-item-has-children:hover > ul,
.primary-navigation .menu-item-has-children:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.primary-navigation .menu-item-has-children > ul a {
  display: block;
  padding: 12px;
}

.primary-navigation .menu-item-has-children > ul a::after { display: none; }

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.header-actions a {
  display: inline-flex;
  min-width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding-inline: 8px;
  border: 1px solid var(--vf-line);
  font-size: 0.78rem;
  font-weight: 750;
}

.header-actions .cart-count {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  border-radius: 2px;
  background: var(--vf-accent);
  color: white;
  font-size: 0.62rem;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--vf-line);
  background: white;
}

.hero {
  position: relative;
  display: grid;
  min-height: min(760px, 76vh);
  align-items: center;
  overflow: hidden;
  background: var(--vf-off-white);
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}

.hero-media::after {
  position: absolute;
  inset: 0;
  right: auto;
  width: 40%;
  background: rgba(255,255,255,0.92);
  content: "";
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(460px, 36%);
  margin-right: 0;
  margin-left: max(var(--vf-pad), calc((100vw - var(--vf-max)) / 2));
  padding-block: 90px;
  justify-self: start;
  transform: none;
}

.hero h1 {
  max-width: 460px;
  margin-bottom: 24px;
}

.hero-copy {
  max-width: 570px;
  margin-bottom: 34px;
  color: var(--vf-muted);
  font-size: 1.12rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.product-section,
.content-section {
  padding-block: clamp(78px, 10vw, 138px);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 48px;
}

.section-heading h2 { margin-bottom: 0; }
.section-heading p {
  max-width: 480px;
  margin: 0;
  color: var(--vf-muted);
}

/* The same archive template renders the shop, product-category, tag and search
   lists, but only the shop page carries the `woocommerce-shop` body class. Every
   other list therefore stayed `display: block`, and with `li.product { width:100% }`
   each card stretched to the whole container (a 300x300 thumbnail blown up to
   1320px). Declare the catalog Grid for every product list. */
ul.products,
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cart cross-sells keep WooCommerce's own two-column contract. */
ul.products.columns-2,
.woocommerce ul.products.columns-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home.front-page ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px 22px;
}

.woocommerce-shop ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px 22px;
}

/* WooCommerce's clearfix pseudos are `.woocommerce ul.products::before/::after`
   (specificity 0,2,1). The bare `ul.products` reset below only wins on the
   homepage, whose body carries no `woocommerce` class; on shop/archive/single
   pages the plugin's `display:table` ghosts occupy a full product Grid cell and
   push every card one column right. Match the plugin's specificity. */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none;
  content: none;
}

/* WooCommerce's mobile sheet targets `.woocommerce ul.products[class*="columns-"] li.product`
   (specificity 0,4,2) with `width: 48%; float: left`, which beat the plain (0,2,1) rule
   below: on every viewport <=768px a card filled only 48% of its Grid track, so titles
   stacked to four lines and the Add to Cart label was clipped. Include the attribute
   variant so the catalog keeps one card per track at every width. */
ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  float: none;
  width: 100%;
  margin: 0;
  padding: 0 0 20px;
  border: 0;
  background: var(--vf-white);
  transition: transform 180ms ease;
}

.home.front-page ul.products li.product:hover {
  transform: scale(1.012);
}

.woocommerce-shop ul.products li.product:hover {
  transform: scale(1.012);
}

/* WooCommerce styles the same card parts on `.woocommerce ul.products li.product …`
   (0,3,1) and colours the price with `.woocommerce:where(…) ul.products li.product .price`
   (0,4,2), so the plain selectors below lost: titles kept the plugin's `.5em` padding and
   1em size, images kept its 1em margin, and every price rendered in the plugin's olive
   instead of the theme's muted grey. Mirror the plugin's chain. */
ul.products li.product a img,
.woocommerce ul.products li.product a img,
.woocommerce ul.products[class*="columns-"] li.product a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 0 18px;
  background: var(--vf-off-white);
  object-fit: cover;
}

ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title {
  margin: 0 0 7px;
  padding: 0;
  background: transparent;
  color: var(--vf-ink);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1.02rem;
  font-weight: 680;
  letter-spacing: -0.02em;
}

ul.products li.product .price,
.woocommerce ul.products li.product .price,
.woocommerce ul.products[class*="columns-"] li.product .price {
  /* The card's Add to Cart uses `margin-top: auto` for row alignment, so the gap
     above it has to come from the price. */
  margin: 0 0 14px;
  color: var(--vf-muted);
  font-size: 0.92rem;
  font-weight: 400;
}

/* WooCommerce's `.woocommerce ul.products li.product .button` (0,3,1) also sets a
   `margin-top`, so the plain selector never reached the cards on shop/archive
   pages and the buttons stayed ragged whenever two titles wrapped differently. */
ul.products li.product .button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products[class*="columns-"] li.product .button {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* Cards are column flexboxes, so `auto` pins every Add to Cart to the bottom of
     its Grid row and the buttons line up even when titles wrap differently. */
  margin-top: auto;
  padding-inline: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.woocommerce-result-count { color: var(--vf-muted); }
.woocommerce-ordering select {
  min-height: 46px;
  padding: 0 42px 0 16px;
  border: 1px solid var(--vf-line);
  border-radius: 0;
  background: white;
  color: var(--vf-ink);
}

.woocommerce-products-header {
  padding-block: clamp(64px, 8vw, 108px) 48px;
}

.woocommerce-products-header__title {
  max-width: 900px;
  font-size: clamp(2.75rem, 6vw, 5.8rem);
}

.woocommerce .woocommerce-notices-wrapper { margin-bottom: 26px; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--vf-accent);
  border-right-color: var(--vf-line);
  border-bottom-color: var(--vf-line);
  border-left-color: var(--vf-line);
  background: var(--vf-off-white);
  color: var(--vf-ink);
}

/* WooCommerce tints these notice icons with its own blue; use the site accent. */
.woocommerce-message::before,
.woocommerce-info::before { color: var(--vf-accent); }

.products-archive {
  padding-bottom: 120px;
}

.products-archive .woocommerce-ordering {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 38px;
}

.single-product-main {
  padding-block: clamp(62px, 8vw, 118px);
}

div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(400px, 0.85fr);
  gap: clamp(46px, 5vw, 72px);
  align-items: start;
}

div.product .product_title {
  margin-bottom: 18px;
  font-size: clamp(2.35rem, 5vw, 5rem);
}

/* WooCommerce colours/sizes this on `.woocommerce:where(…) div.product p.price`
   (0,3,2); mirror the chain so the theme's accent price is what ships. */
div.product p.price,
div.product span.price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  margin: 0 0 28px;
  color: var(--vf-accent);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
}

.woocommerce-product-gallery {
  position: sticky;
  top: 24px;
  width: 100% !important;
  max-width: none !important;
}

.woocommerce-product-gallery__image {
  overflow: hidden;
  background: var(--vf-off-white);
}

.woocommerce-product-gallery .flex-viewport {
  height: auto !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image > a {
  height: 100%;
}

.woocommerce div.product .woocommerce-product-gallery__image > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}

.woocommerce div.product div.images .flex-control-thumbs {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, clamp(92px, 9vw, 132px));
  width: max-content;
  max-width: 100%;
  gap: 12px;
  margin-top: 14px;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  width: clamp(92px, 9vw, 132px) !important;
  min-width: 0 !important;
  margin: 0;
}

.woocommerce div.product div.images .flex-control-thumbs li a,
.woocommerce div.product div.images .flex-control-thumbs img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 1px solid transparent;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.woocommerce div.product div.images .flex-control-thumbs .flex-active {
  border-color: var(--vf-accent);
}

.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 26px;
  color: var(--vf-muted);
  font-size: 0.82rem;
}

div.product .summary {
  width: 100% !important;
  min-width: 0;
  max-width: none !important;
}

div.product .woocommerce-tabs,
div.product .product-specifications,
div.product .related.products,
div.product .upsells {
  grid-column: 1 / -1;
  width: 100% !important;
  min-width: 0;
}

.woocommerce div.product form.cart table.variations {
  width: 100%;
  max-width: 100%;
  margin: 0 0 22px;
  border: 0;
  table-layout: fixed;
}

.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
}

.woocommerce div.product form.cart table.variations label {
  display: block;
  margin-bottom: 10px;
  color: var(--vf-ink);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.woocommerce div.product form.cart table.variations select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 54px;
  /* 3em on the right keeps the native dropdown arrow clear of the label. */
  padding: 0 48px 0 18px;
  border: 1px solid var(--vf-line);
  border-radius: 0;
  background: var(--vf-white);
  color: var(--vf-ink);
}

form.cart:not(.variations_form) {
  display: grid;
  grid-template-columns: 96px minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

form.variations_form.cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
}

form.variations_form.cart table.variations {
  grid-column: 1;
  grid-row: 1 / 2;
}

form.variations_form.cart .single_variation_wrap {
  grid-column: 1;
  grid-row: 2 / 3;
}

form.variations_form.cart .woocommerce-variation-add-to-cart {
  display: grid;
  grid-template-columns: 96px minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.woocommerce-variation-add-to-cart.disabled {
  opacity: 0.65;
}

.woocommerce div.product form.cart .quantity,
.woocommerce div.product form.cart div.quantity,
.woocommerce div.product form.cart .quantity .qty,
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .vf-buy-now,
.woocommerce-variation-add-to-cart .quantity,
.woocommerce-variation-add-to-cart .single_add_to_cart_button,
.woocommerce-variation-add-to-cart .vf-buy-now {
  float: none !important;
  width: 100%;
  margin: 0;
}

.quantity .qty,
.woocommerce .quantity .qty {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--vf-line);
  border-radius: 2px;
  text-align: center;
  color: var(--vf-ink);
  font-weight: 600;
}

.quantity .qty:focus {
  border-color: var(--vf-accent);
  outline: none;
}

form.cart:not(.variations_form) .quantity,
.woocommerce-variation-add-to-cart .quantity {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

form.cart:not(.variations_form) button.single_add_to_cart_button,
.woocommerce-variation-add-to-cart button.single_add_to_cart_button {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  border-radius: 2px;
}

form.cart:not(.variations_form) .vf-buy-now,
.woocommerce-variation-add-to-cart .vf-buy-now {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

form.cart .vf-buy-now {
  border-radius: 2px;
}

button.single_add_to_cart_button,
.woocommerce-variation-add-to-cart button.single_add_to_cart_button {
  width: 100%;
}

.vf-buy-now {
  display: inline-flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--vf-ink);
  border-radius: 2px;
  background: var(--vf-ink);
  color: white;
  font-size: 0.83rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.vf-buy-now:hover {
  border-color: var(--vf-accent);
  background: var(--vf-accent);
  color: white;
  transform: translateY(-1px);
}

/* WooCommerce core ships `.woocommerce … button.button.alt { background:#7f54b3 }`
   (specificity 0,3,1) which outranks the theme's `button.single_add_to_cart_button`
   (0,1,1), and its disabled variant peaks at `button.button.alt:disabled[disabled]`
   (0,5,1) on variable products. Those selectors below match or beat that
   specificity so the site palette wins on every purchase button. */
.woocommerce.single-product button.single_add_to_cart_button.alt,
.woocommerce.single-product button.single_add_to_cart_button.alt.disabled,
.woocommerce.single-product button.single_add_to_cart_button.alt:disabled,
.woocommerce.single-product button.single_add_to_cart_button.alt:disabled[disabled],
.woocommerce.single-product button.single_add_to_cart_button.alt.disabled:disabled[disabled],
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  border-color: var(--vf-accent);
  background: var(--vf-accent);
  color: var(--vf-white);
}

.woocommerce.single-product button.single_add_to_cart_button.alt:hover,
.woocommerce.single-product button.single_add_to_cart_button.alt.disabled:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  border-color: var(--vf-accent-dark);
  background: var(--vf-accent-dark);
  color: var(--vf-white);
}

.product-notes {
  display: grid;
  gap: 14px;
  margin: 26px 0;
  padding: 22px 0;
  border-top: 1px solid var(--vf-line);
  border-bottom: 1px solid var(--vf-line);
  color: var(--vf-muted);
  font-size: 0.88rem;
}

.product-notes strong { color: var(--vf-ink); }

.product-tabs {
  padding-block: 76px 120px;
  border-top: 1px solid var(--vf-line);
}

/* WooCommerce's own tab chrome lives on `.woocommerce div.product .woocommerce-tabs ul.tabs li`
   (specificity 0,3,3) and its `.woocommerce-tabs ul.tabs li` counterpart (0,2,1) never applied:
   the plugin's grey/white boxes, 4px radius and #cfc8d8 borders leaked through, and the tab
   link stayed `inline-block` with `.5em` padding, so the theme's hairline only spanned the label.
   Mirror the plugin's ancestor chain so the intended rail actually renders. */
.woocommerce div.product .woocommerce-tabs {
  display: grid;
  grid-template-columns: minmax(190px, 0.26fr) minmax(0, 1fr);
  align-items: start;
  gap: 70px;
  padding-block: 76px 0;
  border-top: 1px solid var(--vf-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: grid;
  align-content: start;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
  content: none;
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--vf-muted);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border: 0;
  background: transparent;
  color: var(--vf-accent);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--vf-line);
  color: inherit;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 650;
  text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--vf-ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  border-bottom-color: var(--vf-accent);
  color: var(--vf-accent);
}

.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
  width: auto;
  margin: 0;
  padding: 0;
}

/* A single tab only repeats the panel heading, so drop the rail and let the
   Description section line up with the rest of the page grid. */
.woocommerce div.product .woocommerce-tabs:has(ul.tabs > li:only-child) { display: block; }
.woocommerce div.product .woocommerce-tabs:has(ul.tabs > li:only-child) ul.tabs { display: none; }

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 28px;
  background: var(--vf-line);
  border: 1px solid var(--vf-line);
}

.spec-grid div {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 12px;
  padding: 18px;
  background: var(--vf-white);
}

.spec-grid dt {
  color: var(--vf-muted);
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.spec-grid dd {
  margin: 0;
  font-weight: 650;
}

.age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 42px;
  margin-top: 28px;
  border: 1px solid var(--vf-accent);
  color: var(--vf-accent);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.woocommerce .woocommerce-breadcrumb {
  padding-top: 26px;
  color: var(--vf-muted);
  font-size: 0.78rem;
}

.woocommerce .woocommerce-breadcrumb a { color: var(--vf-accent); }

.site-footer {
  padding-top: 72px;
  border-top: 1px solid var(--vf-line);
  background: var(--vf-off-white);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 2.6fr;
  gap: 80px;
  padding-bottom: 62px;
}

.footer-brand p {
  max-width: 390px;
  color: var(--vf-muted);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.footer-links h3 {
  margin-bottom: 18px;
  font-size: 0.82rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.footer-links ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--vf-muted);
  font-size: 0.88rem;
}

.footer-bottom {
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid var(--vf-line);
  color: var(--vf-muted);
  font-size: 0.76rem;
}

.payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.payment-icon {
  display: inline-flex;
  min-width: 52px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding-inline: 10px;
  border: 1px solid var(--vf-line);
  background: white;
  color: var(--vf-ink);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.03em;
}

.cookie-banner {
  position: fixed;
  z-index: 90;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: min(520px, calc(100vw - 44px));
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--vf-line);
  background: white;
  box-shadow: var(--vf-shadow);
}

.cookie-banner[hidden] { display: none; }
.cookie-banner p {
  margin: 0;
  color: var(--vf-muted);
  font-size: 0.82rem;
}

.cookie-banner button {
  min-height: 42px;
  padding: 0 18px;
}

.page-content {
  width: min(calc(100% - (var(--vf-pad) * 2)), 980px);
  margin-inline: auto;
  padding-block: clamp(68px, 9vw, 118px);
}

.page-content h1 {
  margin-bottom: 42px;
  font-size: clamp(3rem, 7vw, 6.5rem);
}

.page-content h2 {
  margin-top: 2em;
  font-size: clamp(1.65rem, 3vw, 2.55rem);
  letter-spacing: -0.025em;
}

.page-content h3 {
  margin-top: 1.8em;
  font-size: 1.18rem;
  letter-spacing: -0.015em;
}

.page-content ul { padding-left: 1.2em; }
.page-content li { margin-bottom: 0.65em; }

.notice-box {
  margin: 30px 0;
  padding: 22px 24px;
  border-left: 3px solid var(--vf-accent);
  background: var(--vf-off-white);
}

.age-verification-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 42px;
}

.compliance-card {
  padding: 30px;
  border: 1px solid var(--vf-line);
  background: white;
}

.compliance-card h2 {
  margin-top: 0;
  font-size: 1.45rem;
}

.woocommerce-cart-form .button,
.woocommerce-checkout .button { min-height: 52px; }

/* Cart actions row: WooCommerce's `.woocommerce table.cart td.actions .input-text`
   (0,4,2) pins the coupon field to 80px and clips its own placeholder. Match the
   `table.cart` ancestor so this rule outranks it. */
.woocommerce-cart-form td.actions .coupon {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  float: left;
}

.woocommerce-cart-form table.cart td.actions .coupon .input-text {
  width: 200px;
  min-height: 52px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--vf-line);
  border-radius: 2px;
  background: white;
  color: var(--vf-ink);
  float: none;
}

.woocommerce-cart-form td.actions .coupon .button,
.woocommerce-cart-form table.cart td.actions .coupon .button { margin: 0; float: none; }
.woocommerce-cart-form td.actions > .button { float: right; }
.woocommerce-cart-form table.cart img,
.woocommerce-cart-form .product-thumbnail img {
  width: 64px;
  max-width: 64px;
  border-radius: 2px;
}

/* Disabled WooCommerce buttons rendered as a washed-out green at opacity .5;
   give them an intentional, on-brand disabled treatment instead. The `:hover`
   variants are required because WooCommerce's own disabled-hover rule is (0,4,1). */
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled[disabled]:hover,
.woocommerce button.button.disabled,
.woocommerce button.button.disabled:hover,
.woocommerce input.button:disabled,
.woocommerce input.button.disabled,
.woocommerce a.button.disabled {
  padding: 0 28px;
  border-color: var(--vf-line);
  background: var(--vf-off-white);
  color: var(--vf-muted);
  opacity: 1;
  cursor: not-allowed;
  transform: none;
}

/* WooCommerce's cart-total row divider uses its own purple-grey; keep the
   theme hairline. Same selectors so the later theme sheet wins the tie. */
#add_payment_method .cart-collaterals .cart_totals tr td,
#add_payment_method .cart-collaterals .cart_totals tr th,
.woocommerce .cart-collaterals .cart_totals table.shop_table tbody tr td,
.woocommerce .cart-collaterals .cart_totals table.shop_table tbody tr th,
.woocommerce-cart .cart-collaterals .cart_totals tr td,
.woocommerce-cart .cart-collaterals .cart_totals tr th,
.woocommerce-checkout .cart-collaterals .cart_totals tr td,
.woocommerce-checkout .cart-collaterals .cart_totals tr th {
  border-top-color: var(--vf-line);
}

/* `.woocommerce form.login/.register/.checkout_coupon` ships a #cfc8d8 border
   and 5px radius; align them with the theme's form chrome. */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon {
  border-color: var(--vf-line);
  border-radius: 2px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row textarea.input-text,
.woocommerce form .form-row select {
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--vf-line);
  border-radius: 0;
  background: white;
}

.woocommerce form .form-row label { font-size: 0.82rem; }

/* WooCommerce's `.col2-set` clearfix pseudo-elements become real Grid items once
   `#customer_details` is a Grid, which pushed the Billing column into track 2 and
   wrapped the second column onto a new row. Neutralise them for this container. */
.woocommerce-checkout #customer_details::before,
.woocommerce-checkout #customer_details::after {
  content: none;
  display: none;
}

.woocommerce-checkout #customer_details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  float: none;
  width: 100%;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  width: 100%;
  float: none;
}

/* WooCommerce outputs #customer_details, the "Your order" heading and
   #order_review as three siblings of the Grid. Without explicit placement the
   review table fell into the billing column and the heading stretched across an
   otherwise empty right column. */
.woocommerce-checkout .checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
  gap: 0 54px;
  align-items: start;
}

.woocommerce-checkout #customer_details {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.woocommerce-checkout #order_review_heading {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 18px;
}

.woocommerce-checkout #order_review {
  grid-column: 2;
  grid-row: 2;
  position: sticky;
  top: 22px;
  float: none;
  width: 100%;
}

/* WooCommerce paints the payment block with a purple-tinted palette; keep the
   review column on the site's white/line/green scheme. */
.woocommerce-checkout #payment {
  margin-top: 22px;
  border: 1px solid var(--vf-line);
  border-radius: 2px;
  background: var(--vf-off-white);
}

.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--vf-line); }

.woocommerce-checkout #payment div.form-row.place-order {
  padding: 20px;
  border-top: 1px solid var(--vf-line);
}

@media (max-width: 980px) {
  .header-inner {
    min-height: 76px;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
  }

  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .primary-navigation {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    padding: 18px var(--vf-pad) 28px;
    border-top: 1px solid var(--vf-line);
    border-bottom: 1px solid var(--vf-line);
    background: white;
  }

  .primary-navigation.is-open { display: block; }
  .primary-navigation ul {
    display: grid;
    gap: 0;
  }

  .primary-navigation a {
    display: block;
    padding: 13px 0;
  }

  .primary-navigation .menu-item-has-children > ul {
    position: static;
    display: none;
    width: 100%;
    margin: 0 0 8px;
    padding: 0 0 0 18px;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .primary-navigation .menu-item-has-children.is-open > ul { display: grid; }
  .hero-content {
    width: min(520px, 62%);
    transform: none;
  }
  ul.products,
  .woocommerce ul.products,
  .home.front-page ul.products,
  .woocommerce-shop ul.products,
  .related.products ul.products,
  .upsells.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  div.product {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .woocommerce-product-gallery { position: static; }
  .footer-grid { grid-template-columns: 1fr; gap: 46px; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .woocommerce-checkout .checkout { grid-template-columns: 1fr; }

  /* The single-column track above cannot hold the two-column placements, which
     otherwise spawn an implicit second track and overflow the viewport. */
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    grid-column: 1;
    grid-row: auto;
  }

  .woocommerce-checkout #order_review { position: static; }
}

@media (max-width: 680px) {
  .age-strip {
    padding-block: 8px;
    font-size: 0.61rem;
    letter-spacing: 0.08em;
  }

  .site-brand img { width: 36px; height: 36px; }
  .site-brand { gap: 9px; font-size: 0.95rem; letter-spacing: 0.08em; }
  .header-actions { gap: 6px; }
  .header-actions .vf-category-select,
  .header-actions > a:first-of-type { display: none; }

  .hero { min-height: 650px; align-items: end; }
  .hero-media img { object-position: 65% center; }
  .hero-media::after {
    right: 0;
    width: 100%;
    background: rgba(255,255,255,0.82);
  }

  .hero-content {
    width: 100%;
    padding-block: 60px;
    transform: none;
  }

  .hero h1 { font-size: clamp(2.65rem, 15vw, 4.75rem); }
  .hero-copy { font-size: 0.98rem; }
  .section-heading { display: grid; }

  ul.products,
  .woocommerce ul.products,
  .home.front-page ul.products,
  .woocommerce-shop ul.products,
  .related.products ul.products,
  .upsells.products ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 12px;
  }

  ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title { font-size: 0.86rem; }

  ul.products li.product .price,
  .woocommerce ul.products li.product .price,
  .woocommerce ul.products[class*="columns-"] li.product .price { font-size: 0.78rem; }

  form.cart:not(.variations_form),
  .woocommerce-variation-add-to-cart,
  form.variations_form.cart .woocommerce-variation-add-to-cart {
    grid-template-columns: 1fr 1fr;
  }

  /* Without an explicit re-placement the base rules kept Add to Cart on column 2
     and Buy Now on column 3, so the quantity field was covered by Add to Cart and
     Buy Now fell into an implicit third track. Stack them instead. */
  form.cart:not(.variations_form) .quantity,
  .woocommerce-variation-add-to-cart .quantity,
  form.variations_form.cart .woocommerce-variation-add-to-cart .quantity {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    width: 100% !important;
    max-width: 100% !important;
  }

  form.cart:not(.variations_form) button.single_add_to_cart_button,
  .woocommerce-variation-add-to-cart button.single_add_to_cart_button,
  form.variations_form.cart .woocommerce-variation-add-to-cart button.single_add_to_cart_button {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  form.cart:not(.variations_form) .vf-buy-now,
  .woocommerce-variation-add-to-cart .vf-buy-now,
  form.variations_form.cart .woocommerce-variation-add-to-cart .vf-buy-now {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  .vf-buy-now,
  button.single_add_to_cart_button { padding-inline: 12px; font-size: 0.71rem; }

  /* Must repeat the base rule's ancestor chain, otherwise the two-column rail
     survives on phones. */
  .woocommerce div.product .woocommerce-tabs:not(:has(ul.tabs > li:only-child)) {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .spec-grid { grid-template-columns: 1fr; }

  /* These used `calc(100vw - 40px)`, which only matches the container while the
     side padding is exactly 20px; the fluid `--vf-pad` made it overflow between
     roughly 520px and 680px. The elements already live inside the padded
     container, so 100% is both correct and overflow-free. */
  table.variations,
  table.variations tbody,
  table.variations tr,
  table.variations td,
  table.variations th {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  form.variations_form.cart .single_variation_wrap,
  form.variations_form.cart .woocommerce-variation-add-to-cart {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  table.variations td.value select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom {
    display: grid;
    padding-block: 22px;
  }

  .cookie-banner {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
    grid-template-columns: 1fr;
  }

  .age-verification-layout { grid-template-columns: 1fr; }
  .woocommerce-checkout #customer_details { grid-template-columns: 1fr; gap: 12px; }

  /* The coupon field plus its button cannot share one row on a phone; stack them
     so the cart table stops overflowing the viewport. */
  /* WooCommerce's responsive sheet forces `text-align: right !important` here.
     Every child of this cell is a full-width Grid item, so the cell's own
     text-align has no effect; drop it instead of fighting an !important. */
  .woocommerce table.cart td.actions,
  .woocommerce-cart-form td.actions,
  .woocommerce-cart table.shop_table.cart td.actions {
    display: grid;
    gap: 10px;
  }

  .woocommerce-cart-form td.actions .coupon {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    float: none;
  }

  .woocommerce-cart-form table.cart td.actions .coupon .input-text,
  .woocommerce-cart-form td.actions .coupon .button,
  .woocommerce-cart-form table.cart td.actions .coupon .button,
  .woocommerce-cart-form td.actions > .button {
    width: 100%;
    float: none;
  }
}