/*
Theme Name: Vineyaadie Blocksy Child
Theme URI: https://vineyaadie.local
Description: Custom child theme for the Vineyaadie clothing brand. Jamaican warmth meets Martha's Vineyard ease. Premium summer apparel, performance- and SEO-focused.
Author: Vineyaadie Project Team
Template: blocksy
Version: 1.8.12
Text Domain: vineyaadie-blocksy-child
*/

/* ==========================================================================
   VINEYAADIE BRAND FOUNDATION
   --------------------------------------------------------------------------
   1. Brand tokens (official style-guide palette, type, motion)
   2. Self-hosted Manrope @font-face (no third-party requests)
   3. Blocksy global variable mapping (whole theme adopts the brand)
   4. Base typography & elements
   5. Buttons
   6. Product badges
   7. WooCommerce core styling
   ========================================================================== */


/* ==========================================================================
   1. BRAND TOKENS
   ========================================================================== */
:root {
  /* --- Core palette (exact style-guide hex) --- */
  --vy-ink:    #11110F;   /* Ink Black    */
  --vy-cream:  #FFF8E8;   /* Shell Cream  */
  --vy-green:  #118044;   /* Island Green */
  --vy-gold:   #F4BF36;   /* Sun Gold     */
  --vy-red:    #E74F2D;   /* Sunset Red   */
  --vy-blue:   #2367B8;   /* Harbor Blue  */

  /* --- Supporting neutrals & tints (design handoff: warm linen base) --- */
  --vy-linen:       #FAF4E8;                  /* page background */
  --vy-sand:        #F1E7D2;                  /* alt section surface */
  --vy-chip:        #ECD7AD;                  /* chips / help cards */
  --vy-card-bg:     #F4EFE3;                  /* product image backdrop */
  --vy-paper:       #FFFDF6;                  /* near-white warm paper */
  --vy-ink-80:      #4d483f;                  /* body text (warm) */
  --vy-ink-60:      #6B665E;                  /* muted text (warm) */
  --vy-line:        rgba(17, 17, 15, 0.12);   /* hairline borders */
  --vy-line-strong: rgba(17, 17, 15, 0.22);
  --vy-green-dark:  #0c6435;                  /* green hover / active */
  --vy-green-tint:  rgba(17, 128, 68, 0.08);
  --vy-gold-tint:   rgba(244, 191, 54, 0.18);
  --vy-red-tint:    rgba(231, 79, 45, 0.10);

  /* --- Typography --- */
  --vy-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --vy-fw-regular: 400;
  --vy-fw-medium:  500;
  --vy-fw-semi:    600;
  --vy-fw-bold:    700;
  --vy-fw-x:       800;

  /* fluid type scale — larger editorial scale per the design handoff */
  --vy-fs-display: clamp(2.6rem, 1.4rem + 5vw, 4.75rem);
  --vy-fs-h1:   clamp(2.1rem, 1.3rem + 3vw, 3.5rem);
  --vy-fs-h2:   clamp(1.7rem, 1.2rem + 1.9vw, 2.65rem);
  --vy-fs-h3:   clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  --vy-fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --vy-lh-tight: 1.05;
  --vy-lh-body: 1.6;
  --vy-tracking-eyebrow: 0.18em;

  /* --- Radii --- */
  --vy-radius:    14px;
  --vy-radius-sm: 10px;
  --vy-radius-pill: 999px;

  /* --- Shadows --- */
  --vy-shadow-card: 0 1px 2px rgba(17,17,15,0.05), 0 6px 16px rgba(17,17,15,0.06);
  --vy-shadow-lift: 0 6px 14px rgba(17,17,15,0.08), 0 18px 36px rgba(17,17,15,0.12);

  /* --- Motion (subtle, premium per style guide) --- */
  --vy-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --vy-dur: 0.25s;
  --vy-lift: -3px;

  /* One shared horizontal shell for Blocksy + custom theme sections. */
  --vy-shell-max: 1290px;
}


/* ==========================================================================
   2. SELF-HOSTED MANROPE  (font-display:swap, no Google Fonts request)
   ========================================================================== */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Manrope-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Manrope-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Manrope-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Manrope-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Manrope-ExtraBold.woff2') format('woff2');
}


/* ==========================================================================
   3. BLOCKSY GLOBAL VARIABLE MAPPING
   The whole theme (header, footer, blocks, Woo) reads these. Overriding them
   here repaints the entire front-end in the Vineyaadie brand without editing
   every component individually.
   NOTE: Blocksy prints its Customizer palette in an inline <style> AFTER this
   stylesheet, also on :root. `:root:root` outranks it on specificity so the
   brand tokens win regardless of print order.
   ========================================================================== */
:root:root {
  /* Color palette slots */
  --theme-palette-color-1: var(--vy-green);        /* primary / accent */
  --theme-palette-color-2: var(--vy-green-dark);   /* accent hover */
  --theme-palette-color-3: var(--vy-ink);          /* headings / strong ink */
  --theme-palette-color-4: var(--vy-ink-80);       /* body text */
  --theme-palette-color-5: var(--vy-line);         /* borders / dividers */
  --theme-palette-color-6: var(--vy-sand);         /* warm surface */
  --theme-palette-color-7: var(--vy-linen);        /* page background */
  --theme-palette-color-8: #ffffff;                /* card / white surface */

  /* Typography */
  --theme-font-family: var(--vy-font);
  --theme-normal-font-weight: var(--vy-fw-regular);
  --theme-bold-font-weight: var(--vy-fw-bold);
  --theme-text-color: var(--vy-ink-80);
  --theme-headings-color: var(--vy-ink);

  /* Links */
  --theme-link-initial-color: var(--vy-green);
  --theme-link-hover-color: var(--vy-green-dark);

  /* Borders & surfaces */
  --theme-border-color: var(--vy-line);
  --theme-content-area-background-color: var(--vy-linen);

  /* Buttons (Blocksy global button tokens) */
  --theme-button-background-initial-color: var(--vy-ink);
  --theme-button-background-hover-color: var(--vy-green);
  --theme-button-text-initial-color: var(--vy-cream);
  --theme-button-text-hover-color: #ffffff;
  --theme-button-border-radius: var(--vy-radius-pill);
  --theme-button-min-height: 48px;

  /* Forms */
  --theme-form-text-color: var(--vy-ink);
  --theme-form-border-color: var(--vy-line-strong);
  --theme-form-border-focus-color: var(--vy-green);
}


/* ==========================================================================
   4. BASE TYPOGRAPHY & ELEMENTS
   ========================================================================== */
body {
  font-family: var(--vy-font);
  font-weight: var(--vy-fw-regular);
  color: var(--vy-ink-80);
  line-height: var(--vy-lh-body);
  background-color: var(--vy-linen);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--vy-font);
  color: var(--vy-ink);
  line-height: var(--vy-lh-tight);
  letter-spacing: -0.02em;
}
h1 { font-weight: var(--vy-fw-x); font-size: var(--vy-fs-h1); }
h2 { font-weight: var(--vy-fw-x); font-size: var(--vy-fs-h2); }
h3 { font-weight: var(--vy-fw-bold); font-size: var(--vy-fs-h3); }
h4 { font-weight: var(--vy-fw-semi); }

a {
  color: var(--vy-green);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color var(--vy-dur) var(--vy-ease);
}
a:hover { color: var(--vy-green-dark); }

::selection { background: var(--vy-gold-tint); color: var(--vy-ink); }

hr { border: 0; border-top: 1px solid var(--vy-line); }

/* Reusable brand utilities */
.vy-eyebrow {
  display: inline-block;
  font-weight: var(--vy-fw-x);   /* design: 12px / 800 / 2.4px */
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--vy-green);
  margin-bottom: 10px;
}
.vy-brand-note {
  color: var(--vy-green);
  font-weight: var(--vy-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.vy-surface-sand  { background: var(--vy-sand); }
.vy-surface-cream { background: var(--vy-cream); }
.vy-surface-ink   { background: var(--vy-ink); color: var(--vy-cream); }
.vy-surface-ink :is(h1,h2,h3,h4,h5,h6) { color: var(--vy-cream); }


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.wp-block-button__link,
.ct-button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button {
  font-family: var(--vy-font);
  font-weight: var(--vy-fw-x); /* design: all pills 800 */
  letter-spacing: 0.01em;
  background-color: var(--vy-ink);
  color: var(--vy-cream);
  border: 1px solid var(--vy-ink);
  border-radius: var(--vy-radius-pill);
  padding: 0.85em 1.6em;
  line-height: 1.1;
  transition: background-color var(--vy-dur) var(--vy-ease),
              color var(--vy-dur) var(--vy-ease),
              transform var(--vy-dur) var(--vy-ease),
              box-shadow var(--vy-dur) var(--vy-ease);
}
.wp-block-button__link:hover,
.ct-button:hover,
button.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover {
  background-color: var(--vy-green);
  border-color: var(--vy-green);
  color: #ffffff;
  transform: translateY(var(--vy-lift));
  box-shadow: var(--vy-shadow-lift);
}
.woocommerce button.button:active,
.woocommerce .button:active { transform: translateY(0); }

/* Primary accent (add-to-cart / checkout) */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button {
  background-color: var(--vy-green);
  border-color: var(--vy-green);
  color: #ffffff;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
  background-color: var(--vy-green-dark);
  border-color: var(--vy-green-dark);
}

/* Secondary / outline */
.vy-btn-outline {
  background: transparent;
  color: var(--vy-ink);
  border: 1px solid var(--vy-line-strong);
}
.vy-btn-outline:hover {
  background: var(--vy-ink);
  color: var(--vy-cream);
  border-color: var(--vy-ink);
}


/* ==========================================================================
   6. PRODUCT BADGES  (New, Sale, Limited Drop, Local Pick, Best Gift, ...)
   ========================================================================== */
.vy-badge,
.woocommerce span.onsale {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--vy-font);
  font-weight: var(--vy-fw-bold);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0.5em 0.8em;
  border-radius: var(--vy-radius-pill);
  color: #ffffff;
  background: var(--vy-red);
  min-height: 0;
  min-width: 0;
}
.woocommerce span.onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  margin: 0;
  z-index: 2;
}
.vy-badge-wrap {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
}
.vy-product-card-media .vy-badge-wrap--card {
  top: auto;
  right: auto;
  bottom: 10px;
  left: 10px;
}
.vy-product-card-media .vy-badge-wrap--card .vy-badge {
  box-shadow: 0 2px 8px rgba(17, 17, 15, 0.16);
}
.vy-badge--new     { background: var(--vy-green); }
.vy-badge--sale    { background: var(--vy-red); }
.vy-badge--limited { background: var(--vy-ink); color: var(--vy-cream); }
.vy-badge--local   { background: var(--vy-blue); }
.vy-badge--gift    { background: var(--vy-gold); color: var(--vy-ink); }
.vy-badge--almost  { background: var(--vy-ink); color: var(--vy-gold); }


/* ==========================================================================
   7. WOOCOMMERCE CORE STYLING
   ========================================================================== */

/* Price */
.woocommerce .price,
.woocommerce ul.products li.product .price {
  color: var(--vy-ink);
  font-weight: var(--vy-fw-bold);
}
.woocommerce .price del { color: var(--vy-ink-60); font-weight: var(--vy-fw-regular); }
.woocommerce .price ins { color: var(--vy-red); text-decoration: none; }

/* Product grid cards — per handoff 1b: flush image on a warm backdrop,
   ink title + price, swatch/size meta row, dark pill button. */
.woocommerce ul.products li.product {
  background: #ffffff;
  border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius);
  padding: 0 0 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--vy-dur) var(--vy-ease),
              box-shadow var(--vy-dur) var(--vy-ease),
              border-color var(--vy-dur) var(--vy-ease);
}
.woocommerce ul.products li.product:hover {
  transform: translateY(var(--vy-lift));
  box-shadow: var(--vy-shadow-card);
  border-color: var(--vy-line-strong);
}
.woocommerce ul.products li.product figure {
  margin: 0 0 14px;
  background: var(--vy-card-bg);
  border-bottom: 1px solid var(--vy-line);
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.woocommerce ul.products li.product figure > .ct-media-container {
  display: block;
  width: 100%;
  height: 100%;
}
.woocommerce ul.products li.product figure img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 0;
  transition: transform 0.45s var(--vy-ease);
}
.woocommerce ul.products li.product:hover img { transform: scale(1.03); }
.woocommerce ul.products li.product .vy-product-card-media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.woocommerce ul.products li.product .vy-product-card-media__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  border-radius: 0;
  aspect-ratio: 4 / 3 !important;
  transition: opacity 0.38s var(--vy-ease), transform 0.55s var(--vy-ease);
}
.woocommerce ul.products li.product .vy-product-card-media__image--mockup {
  z-index: 1;
  object-fit: contain !important;
  opacity: 1;
  transform: none !important;
}
.woocommerce ul.products li.product .vy-product-card-media__image--lifestyle {
  z-index: 2;
  object-fit: cover !important;
  object-position: var(--vy-lifestyle-position, 50% 45%);
  opacity: 0;
  transform: scale(1.025) !important;
}
@media (hover: hover) and (pointer: fine) {
  .woocommerce ul.products li.product:hover .vy-product-card-media__image--mockup,
  .woocommerce ul.products li.product:focus-within .vy-product-card-media__image--mockup {
    opacity: 0;
  }
  .woocommerce ul.products li.product:hover .vy-product-card-media__image--lifestyle,
  .woocommerce ul.products li.product:focus-within .vy-product-card-media__image--lifestyle {
    opacity: 1;
    transform: scale(1) !important;
  }
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-weight: var(--vy-fw-x);
  color: var(--vy-ink);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  padding: 0 18px 0.15em;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a { color: inherit; }
.woocommerce ul.products li.product .price {
  padding: 0 18px;
  color: var(--vy-ink-60);
  font-size: 0.95rem;
}
/* Category line adds noise on cards — the shop has one category anyway */
.woocommerce ul.products li.product .entry-meta { display: none; }

/* Swatches + size range row (rendered from functions.php).
   It arrives last in the DOM (woocommerce_after_shop_loop_item), so flex
   `order` slots it between the price and the button. */
.vy-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px 0;
}
.woocommerce ul.products li.product .ct-woo-card-actions { order: 6; }
.vy-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(17, 17, 15, 0.3);
  flex: none;
}
/* Colors ride on a custom property — a rogue script strips inline
   `background` from anchors, but it can't touch --vy-sw. */
.vy-swatch[style*="--vy-sw"] { background: var(--vy-sw) !important; }
.vy-card-meta__sizes {
  font-size: 0.74rem;
  font-weight: var(--vy-fw-bold);
  color: var(--vy-ink-60);
  margin-left: 2px;
}
.woocommerce ul.products li.product .ct-woo-card-actions,
.woocommerce ul.products li.product .button {
  margin-top: auto;
}
.woocommerce ul.products li.product .ct-woo-card-actions {
  padding: 12px 18px 4px;
}

/* Shared product cards, using the card's real DOM order
   (figure, badge, h2, price, entry-meta, card-actions, vy-card-meta).
   Content is intentionally stacked: title, price, variants, then CTA. This
   prevents price/action widths from squeezing names into narrow columns and
   keeps homepage, archives, search, related, upsells, and shortcodes aligned. */
.woocommerce ul.products li.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding-bottom: 20px;
}
.woocommerce ul.products li.product > figure {
  grid-column: 1;
  grid-row: 1;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  min-width: 0;
  min-height: 2.5em;
  margin: 0;
  padding: 0 20px;
  font-size: 0.95rem;
  line-height: 1.25;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.woocommerce ul.products li.product > .price {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  justify-self: start;
  margin: 8px 0 0;
  padding: 0 20px;
  color: var(--vy-ink);        /* design 1b: ink price, 15px / 800 */
  font-size: 0.9375rem;
  font-weight: var(--vy-fw-x);
}
.woocommerce ul.products li.product > .vy-card-meta {
  grid-column: 1;
  grid-row: 4;
  align-self: center;
  justify-content: flex-start;
  min-width: 0;
  margin: 0;
  padding: 10px 20px 0;
}
.woocommerce ul.products li.product > .ct-woo-card-actions {
  grid-column: 1;
  grid-row: 5;
  align-self: center;
  justify-self: stretch;
  width: 100%;
  margin: 0;
  padding: 12px 20px 0;
  text-align: left;
}
.woocommerce ul.products li.product .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 9px 17px;
  font-size: 0.72rem;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: none;
}

/* Star ratings in brand gold */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--vy-gold); }

/* Forms / inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .quantity input,
input[type="text"], input[type="email"], input[type="search"],
input[type="number"], input[type="tel"], select, textarea {
  border: 1px solid var(--vy-line-strong);
  border-radius: var(--vy-radius-sm);
  background: #ffffff;
  color: var(--vy-ink);
  transition: border-color var(--vy-dur) var(--vy-ease),
              box-shadow var(--vy-dur) var(--vy-ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--vy-green);
  box-shadow: 0 0 0 3px var(--vy-green-tint);
}

/* Notices */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--vy-green);
  background: var(--vy-green-tint);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--vy-green); }
.woocommerce-error { border-top-color: var(--vy-red); background: var(--vy-red-tint); }

/* ==========================================================================
   7b. SHOP PAGE LAYOUT
   ========================================================================== */

/* Hide the theme's default archive hero on shop — our intro carries the H1 */
.post-type-archive-product .hero-section,
.tax-product_cat .hero-section { display: none; }

/* Split intro per design 1b: big title left, description + chips right */
.vy-shop-intro {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
  margin: clamp(24px, 4vw, 56px) 0 clamp(28px, 4vw, 44px);
  padding-bottom: clamp(24px, 4vw, 40px);
  border-bottom: 1px solid var(--vy-line);
}
.vy-shop-intro__title {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  font-weight: var(--vy-fw-x);
  letter-spacing: -0.028em;
  line-height: 1;
  margin: 0.3em 0 0;
}
.vy-shop-intro__sub {
  color: var(--vy-ink-60);
  font-size: 0.97rem;
  line-height: 1.6;
  margin: 0 0 1em;
}
.vy-shop-intro__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
@media (max-width: 820px) {
  .vy-shop-intro { grid-template-columns: 1fr; align-items: start; }
}
.vy-shop-intro__chips li {
  font-size: 0.78rem;
  font-weight: var(--vy-fw-x);
  color: var(--vy-ink);
  background: var(--vy-chip);
  border-radius: var(--vy-radius-pill);
  padding: 0.6em 1.15em;
}

.vy-shop-outro {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 24px);
  margin: clamp(40px, 6vw, 64px) 0 clamp(24px, 4vw, 40px);
}
.vy-shop-outro__card {
  background: var(--vy-chip);
  border-radius: var(--vy-radius);
  padding: clamp(20px, 3vw, 28px);
}
.vy-shop-outro__title {
  font-size: 1.05rem;
  font-weight: var(--vy-fw-bold);
  margin: 0 0 0.4em;
}
.vy-shop-outro__card p { margin: 0; font-size: 0.92rem; color: var(--vy-ink-80); line-height: 1.55; }
@media (max-width: 820px) {
  .vy-shop-outro { grid-template-columns: 1fr; }
}

/* Three-column grid on shop archives per design 1b (gap 24px).
   Woo's `columns-4` fixed tracks win over the Blocksy var, so set the
   grid explicitly. */
.post-type-archive-product ul.products[data-products],
.tax-product_cat ul.products[data-products] {
  --grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px;
}
@media (max-width: 999px) and (min-width: 690px) {
  .woocommerce ul.products[data-products] {
    --grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 689px) {
  .woocommerce ul.products[data-products] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* design 1g mobile: 2-up */
    gap: 12px;
  }

  /* Mobile product cards use one internal column. On desktop the action button
     defines the width of the second card column; carrying that layout onto a
     narrow two-up grid leaves only a few pixels for the product name. */
  .woocommerce ul.products li.product {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 14px;
  }
  .woocommerce ul.products li.product > figure {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 12px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    min-width: 0;
    min-height: 3.75em;
    margin: 0;
    padding: 0 12px;
    font-size: 0.82rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title a {
    display: block;
    color: inherit;
    overflow-wrap: inherit;
    word-break: inherit;
  }
  .woocommerce ul.products li.product > .price {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    margin: 8px 0 0;
    padding: 0 12px;
    font-size: 0.82rem;
  }
  .woocommerce ul.products li.product > .vy-card-meta {
    grid-column: 1;
    grid-row: 4;
    justify-content: flex-start;
    min-width: 0;
    margin: 0;
    padding: 9px 12px 0;
    gap: 4px;
  }
  .woocommerce .vy-card-meta .vy-swatch {
    width: 11px;
    height: 11px;
  }
  .woocommerce .vy-card-meta__sizes {
    font-size: 0.65rem;
  }
  .woocommerce ul.products li.product > .ct-woo-card-actions {
    grid-column: 1;
    grid-row: 5;
    justify-self: stretch;
    width: 100%;
    margin: 0;
    padding: 10px 12px 0;
    text-align: center;
  }
  .woocommerce ul.products li.product .ct-woo-card-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 8px 15px;
    font-size: 0.68rem;
    font-weight: var(--vy-fw-x);
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-align: center;
    white-space: nowrap;
    box-shadow: none;
  }
  .woocommerce ul.products li.product .ct-woo-card-actions .button::after {
    content: "\2192";
    margin-left: 6px;
    font-size: 0.82rem;
    line-height: 1;
  }
  .woocommerce ul.products li.product .vy-product-card-media .vy-badge-wrap--card {
    bottom: 8px;
    left: 8px;
  }
  .woocommerce ul.products li.product .vy-product-card-media .vy-badge {
    padding: 0.42em 0.68em;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
  }
}

/* "Sort:" prefix before the ordering select (design 1b: "Sort: Featured ▾") */
.woocommerce .woocommerce-ordering { display: inline-flex; align-items: center; gap: 2px; }
.woocommerce .woocommerce-ordering::before {
  content: "Sort:";
  font-size: 0.78rem;
  font-weight: var(--vy-fw-x);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vy-ink-60);
}

/* Toolbar per design 1b: no result count, quiet uppercase sort on the right */
.post-type-archive-product .woocommerce-result-count,
.tax-product_cat .woocommerce-result-count { display: none; }
.woocommerce .woocommerce-result-count { color: var(--vy-ink-60); font-size: 0.85rem; }
.woocommerce .woocommerce-ordering select {
  border: 0;
  border-radius: var(--vy-radius-pill);
  padding: 0.45em 1.6em 0.45em 0.6em;
  font-size: 0.78rem;              /* design: 12.5px / 800 / uppercase / gray */
  font-weight: var(--vy-fw-x);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: transparent;
  color: var(--vy-ink-60);
  cursor: pointer;
}

/* Pagination in brand style */
.woocommerce nav.woocommerce-pagination ul {
  border: 0;
  display: flex;
  gap: 6px;
  justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: var(--vy-radius-pill);
  min-width: 40px;
  padding: 0.55em 0.9em;
  color: var(--vy-ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--vy-ink);
  color: var(--vy-cream);
}

/* ==========================================================================
   7c. BRAND SURFACES — header & footer in palette
   ========================================================================== */
/* Blocksy's dynamic CSS paints header rows via
   `[data-header*="…"] .ct-header [data-row*="…"]` printed after this file —
   the doubled [data-row] attribute outranks it. */
.ct-header [data-row],
[data-header] .ct-header [data-row][data-row] {
  background-color: var(--vy-cream);
  background-image: none;
}
.ct-header { border-bottom: 1px solid var(--vy-line); }
/* Design: 78px header row, 42px logo */
.ct-header [data-row][data-row] { min-height: 78px; }
.ct-header .site-logo-container img { max-height: 42px; width: auto; }

/* The logo IS the brand — hide the duplicate text title/tagline next to it */
.ct-header .site-title,
.ct-header .site-description { display: none; }

/* Header navigation: uppercase editorial links per the design handoff
   (12.5px / 800 / wide tracking), green underline for the active page. */
.ct-header nav a,
.ct-header .menu a,
.ct-header [data-id*="menu"] a {
  color: var(--vy-ink);
  font-weight: var(--vy-fw-x);
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--vy-dur) var(--vy-ease);
}
.ct-header nav a:hover,
.ct-header .menu a:hover,
.ct-header [data-id*="menu"] a:hover { color: var(--vy-green); }
.ct-header .menu .current-menu-item > a,
.ct-header .menu .current-menu-ancestor > a {
  color: var(--vy-ink);
  box-shadow: inset 0 -2px 0 var(--vy-green);
  padding-bottom: 2px;
}

/* Cart element per design: "SEARCH   BAG ②" — uppercase word + green bubble,
   no subtotal amount, no bag icon. */
.ct-header .ct-header-cart .ct-label .ct-amount { display: none; }
.ct-header .ct-header-cart a.ct-cart-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}
.ct-header .ct-header-cart .ct-label::before {
  content: "Bag";
  color: var(--vy-ink);
  font-weight: var(--vy-fw-x);
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.ct-header .ct-header-cart .ct-icon-container svg { display: none; }
.ct-header .ct-header-cart .ct-icon-container { width: auto; height: auto; }
.ct-header .ct-dynamic-count-cart {
  position: static;
  transform: none;
  background: var(--vy-green);
  color: #fff;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  line-height: 22px;
  font-size: 11px;
  font-weight: var(--vy-fw-semi);
  border-radius: 50%;
}

/* Search trigger: word "Search" instead of the icon (design header).
   Blocksy already renders a hidden .ct-label with the text — show it. */
.ct-header .ct-header-search svg { display: none; }
.ct-header .ct-header-search .ct-label {
  display: inline-block !important; /* Blocksy hides it via a higher-specificity rule */
  color: var(--vy-ink);
  font-weight: var(--vy-fw-x);
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Mobile header + drawer. Blocksy's generated drawer background is nearly
   black, while the shared .ct-header link/icon rules use dark ink. Use the
   warm brand surface so the menu and close control retain clear contrast. */
[data-header] #offcanvas.ct-panel .ct-panel-inner {
  background-color: var(--vy-cream);
  color: var(--vy-ink);
}
[data-header] #offcanvas.ct-header [data-id="mobile-menu"] a {
  color: var(--vy-ink);
  font-weight: var(--vy-fw-x);
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: 0.06em;
  padding-block: 18px;
  text-decoration: none;
}
[data-header] #offcanvas.ct-header [data-id="mobile-menu"] a:hover,
[data-header] #offcanvas.ct-header [data-id="mobile-menu"] a:focus-visible,
[data-header] #offcanvas.ct-header [data-id="mobile-menu"] .current-menu-item > a {
  color: var(--vy-green);
}
[data-header] #offcanvas.ct-header .mobile-menu > ul > li {
  border-bottom: 1px solid var(--vy-line);
}
[data-header] #offcanvas.ct-header .ct-toggle-close,
[data-header] #offcanvas.ct-header .ct-toggle-close .ct-icon {
  color: var(--vy-ink);
  fill: currentColor;
}
[data-header] #offcanvas.ct-header .ct-toggle-close {
  min-width: 44px;
  min-height: 44px;
}
.ct-header [data-device="mobile"] [data-column="end"] [data-items="primary"] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.ct-header [data-device="mobile"] .ct-header-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-inline-end: -10px;
  color: var(--vy-ink);
}
.ct-header [data-device="mobile"] .ct-header-trigger .ct-icon {
  color: inherit;
  fill: currentColor;
}

/* Mini-cart dropdown: branded card (it renders transparent otherwise) */
.ct-header .ct-cart-content {
  background: var(--vy-cream);
  border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius);
  box-shadow: 0 18px 36px rgba(17, 17, 15, 0.14);
  padding: 18px;
}

/* Header icons (cart, search, account) on palette */
.ct-header .ct-icon, .ct-header svg { color: var(--vy-ink); fill: currentColor; }

/* The branded footer is rendered on `blocksy:footer:before` (functions.php);
   Blocksy's default builder footer is redundant, so hide its rows. */
.ct-footer [data-row] { display: none; }

.vy-footer {
  background: var(--vy-ink);
  color: rgba(255, 248, 232, 0.72);
}
.vy-footer__inner {
  width: var(--theme-container-edge-spacing, 90vw);
  max-width: var(--vy-shell-max);
  margin-inline: auto;
  padding: clamp(40px, 5vw, 56px) 0 26px;
}
.vy-footer__grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(120px, 1fr));
  gap: clamp(28px, 4vw, 40px);
}
.vy-footer__brand img { height: 38px; width: auto; }
.vy-footer__brand p {
  margin: 14px 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  max-width: 280px;
  color: rgba(255, 248, 232, 0.72);
}
.vy-footer__head {
  font-size: 0.72rem;
  font-weight: var(--vy-fw-x);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--vy-cream);
  margin: 0 0 14px;
}
.vy-footer__col { display: grid; gap: 9px; align-content: start; }
.vy-footer__col a {
  font-size: 0.85rem;
  color: rgba(255, 248, 232, 0.72);
  text-decoration: none;
  transition: color var(--vy-dur) var(--vy-ease);
}
.vy-footer__col a:hover { color: var(--vy-gold); }
.vy-footer__bottom {
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 248, 232, 0.16);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.76rem;
}
@media (max-width: 880px) {
  .vy-footer__grid { grid-template-columns: 1fr 1fr; }
  .vy-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .vy-footer__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   8. ANNOUNCEMENT BAR  (site-wide, above header)
   ========================================================================== */
.vy-announce {
  background: var(--vy-ink);
  color: var(--vy-cream);
}
.vy-announce__text {
  margin: 0;
  padding: 9px 16px;      /* design: 9px 16px */
  text-align: center;
  font-size: 0.75rem;     /* design: 12px / 600 / .4px */
  font-weight: var(--vy-fw-semi);
  letter-spacing: 0.4px;
  line-height: 1.4;
  color: var(--vy-cream);
}

/* ==========================================================================
   9. PRODUCT PAGE TRUST ELEMENTS
   ========================================================================== */
.vy-trust {
  list-style: none;
  margin: 1.4em 0 0.4em;
  padding: 18px 20px;                     /* design 1c: cream card, 14px radius */
  display: grid;
  gap: 10px;
  background: var(--vy-cream);
  border: 1px solid rgba(17, 17, 15, 0.15);
  border-radius: var(--vy-radius);
}
.vy-trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.845rem;                    /* design: 13.5px / 600 */
  font-weight: var(--vy-fw-semi);
  color: var(--vy-ink);
}
.vy-trust__item svg { flex: none; color: var(--vy-green); }
.vy-payments {
  font-size: 0.8rem;
  color: var(--vy-ink-60);
  margin: 0 0 1em;
}

/* ==========================================================================
   9b. INFO PAGES  (About, FAQ, Pickup, Shipping, Size Guide, Contact)
   Content is seeded by the Vineyaadie Store Setup plugin using .vy-page
   markup; these styles turn plain pages into designed pages.
   ========================================================================== */
.vy-page { max-width: 720px; margin-inline: auto; }
.vy-page .vy-lead {
  font-size: var(--vy-fs-lead);
  color: var(--vy-ink-80);
  line-height: 1.65;
  margin-bottom: 2em;
}
.vy-page h2 {
  font-size: 1.45rem;
  margin: 2em 0 0.8em;
  padding-top: 0.9em;
  border-top: 1px solid var(--vy-line);
}
.vy-page h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.2em; }

/* Founders */
.vy-founders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 1.4em 0 0.6em;
}
.vy-founder {
  background: #fff;
  border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius);
  padding: 22px 18px;
  text-align: center;
}
.vy-founder h3 { font-size: 1.05rem; margin: 0.8em 0 0.15em; }
.vy-founder__role {
  font-size: 0.72rem;
  font-weight: var(--vy-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vy-green);
  margin: 0 0 0.7em;
}
.vy-founder p:last-child { font-size: 0.88rem; color: var(--vy-ink-60); line-height: 1.55; margin: 0; }
.vy-founder__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  font-weight: var(--vy-fw-x);
  font-size: 1.15rem;
  color: #fff;
}
.vy-founder__avatar--green { background: var(--vy-green); }
.vy-founder__avatar--gold  { background: var(--vy-gold); color: var(--vy-ink); }
.vy-founder__avatar--red   { background: var(--vy-red); }
@media (max-width: 680px) { .vy-founders { grid-template-columns: 1fr; } }

/* Pull-quote */
.vy-page .vy-quote {
  border: 0;
  margin: 1.6em 0;
  padding: 0;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem);
  font-weight: var(--vy-fw-x);
  font-style: normal;
  color: var(--vy-green);
  text-align: center;
  letter-spacing: -0.01em;
}
.vy-page .vy-quote::before { content: "\201C"; }
.vy-page .vy-quote::after  { content: "\201D"; }

/* Numbered steps */
.vy-steps {
  list-style: none;
  counter-reset: vy-step;
  margin: 1.2em 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.vy-steps li {
  counter-increment: vy-step;
  position: relative;
  padding: 16px 18px 16px 62px;
  background: #fff;
  border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius-sm);
  line-height: 1.55;
}
.vy-steps li::before {
  content: counter(vy-step);
  position: absolute;
  left: 16px; top: 14px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--vy-green);
  color: #fff;
  font-weight: var(--vy-fw-bold);
  font-size: 0.9rem;
}

/* Callout */
.vy-callout {
  background: var(--vy-gold-tint);
  border: 1px solid var(--vy-line);
  border-left: 4px solid var(--vy-gold);
  border-radius: var(--vy-radius-sm);
  padding: 14px 18px;
  margin: 1.6em 0;
}
.vy-callout p { margin: 0; font-size: 0.92rem; }

/* FAQ accordion (no JS — native <details>) */
details.vy-faq {
  background: #fff;
  border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius-sm);
  margin: 0 0 10px;
  overflow: hidden;
}
details.vy-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 44px 15px 18px;
  font-weight: var(--vy-fw-semi);
  color: var(--vy-ink);
  position: relative;
  transition: background-color var(--vy-dur) var(--vy-ease);
}
details.vy-faq summary::-webkit-details-marker { display: none; }
details.vy-faq summary::after {
  content: "+";
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: var(--vy-fw-regular);
  color: var(--vy-green);
  transition: transform var(--vy-dur) var(--vy-ease);
}
details.vy-faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details.vy-faq summary:hover { background: var(--vy-green-tint); }
details.vy-faq > p { padding: 0 18px 16px; margin: 0; color: var(--vy-ink-80); line-height: 1.6; }

/* Page tables */
.vy-page table { width: 100%; border-collapse: collapse; }
.vy-page table th, .vy-page table td {
  border: 1px solid var(--vy-line);
  padding: 10px 14px;
  text-align: left;
  font-size: 0.92rem;
}
.vy-page table th {
  background: var(--vy-sand);
  font-weight: var(--vy-fw-bold);
  color: var(--vy-ink);
}
.vy-page table tr:nth-child(even) td { background: var(--vy-paper); }

/* Page CTA buttons */
.vy-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 2.2em 0 0.5em; }
.vy-btn-page {
  display: inline-flex;
  align-items: center;
  padding: 0.85em 1.6em;
  border-radius: var(--vy-radius-pill);
  background: var(--vy-green);
  color: #fff !important;
  font-weight: var(--vy-fw-bold);
  text-decoration: none;
  border: 1px solid var(--vy-green);
  transition: background-color var(--vy-dur) var(--vy-ease), transform var(--vy-dur) var(--vy-ease);
}
.vy-btn-page:hover { background: var(--vy-green-dark); transform: translateY(var(--vy-lift)); }
.vy-btn-page--ghost {
  background: transparent;
  color: var(--vy-ink) !important;
  border-color: var(--vy-line-strong);
}
.vy-btn-page--ghost:hover { background: var(--vy-ink); color: var(--vy-cream) !important; }

/* ==========================================================================
   10. COLOR HYGIENE — keep every remaining surface on the brand palette
   ========================================================================== */
.woocommerce-store-notice, p.demo_store {
  background: var(--vy-green);
  color: #fff;
}
.ct-breadcrumbs { color: var(--vy-ink-60); font-size: 0.82rem; }
.ct-breadcrumbs a { color: var(--vy-ink-60); }
.ct-breadcrumbs a:hover { color: var(--vy-green); }

/* Cart / checkout accents */
.woocommerce-checkout #payment {
  background: var(--vy-paper);
  border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius);
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--vy-sand);
  color: var(--vy-ink-80);
}
.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--vy-sand);
}
.woocommerce table.shop_table {
  border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius-sm);
}
.woocommerce table.shop_table th { color: var(--vy-ink); }

/* Quantity + variation selects stay on palette */
.woocommerce div.product form.cart .variations select {
  border: 1px solid var(--vy-line-strong);
  border-radius: var(--vy-radius-sm);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--vy-ink); }

/* Links inside dark surfaces never fall back to default blue */
.vy-surface-ink a, .vy-culture a:not(.vy-btn) { color: var(--vy-gold); }

/* Accessible focus ring */
:focus-visible {
  outline: 2px solid var(--vy-green);
  outline-offset: 2px;
}

/* ==========================================================================
   11. SINGLE PRODUCT PAGE  (handoff 1c)
   Editorial summary column: eyebrow breadcrumbs, big title, color row,
   size pills, pill quantity + green "Add to bag", branded tabs.
   ========================================================================== */

/* Breadcrumbs as an uppercase eyebrow line */
.single-product .ct-breadcrumbs {
  font-size: 0.72rem;
  font-weight: var(--vy-fw-x);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Gallery: rounded hero image + thumbnails on a warm backdrop */
.single-product .woocommerce-product-gallery { position: relative; }
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery .flex-viewport {
  border-radius: var(--vy-radius);
  overflow: hidden;
  border: 1px solid var(--vy-line);
  background: var(--vy-card-bg);
}
.single-product .woocommerce-product-gallery .flexy-view,
.single-product .woocommerce-product-gallery .flexy-item,
.single-product .woocommerce-product-gallery .flexy-item > figure {
  aspect-ratio: 4 / 3;
}
.single-product .woocommerce-product-gallery .flexy-item > figure {
  width: 100%;
  height: 100%;
  background: var(--vy-card-bg);
  border-radius: var(--vy-radius);
  overflow: hidden;
}
.single-product .woocommerce-product-gallery .flexy-item > figure img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
}
.single-product .woocommerce-product-gallery .flexy-pills figure,
.single-product .woocommerce-product-gallery .flexy-pills img {
  aspect-ratio: 4 / 3 !important;
  object-fit: cover;
}
.single-product .vy-color-gallery {
  width: 100%;
}
.single-product .vy-color-gallery__stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
  border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius);
  background: var(--vy-card-bg);
  box-shadow: none;
}
.single-product .vy-color-gallery__stage:hover,
.single-product .vy-color-gallery__stage:focus-visible {
  background: var(--vy-card-bg);
  box-shadow: 0 0 0 2px var(--vy-ink);
  transform: none;
}
.single-product .vy-color-gallery__stage > img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.single-product .vy-color-gallery__zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--vy-ink);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--vy-shadow-card);
  font-size: 1.35rem;
  line-height: 1;
}
.single-product .vy-color-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 112px));
  gap: 12px;
  margin-top: 14px;
}
.single-product .vy-color-gallery__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--vy-radius-sm);
  background: var(--vy-card-bg);
  box-shadow: none;
}
.single-product .vy-color-gallery__thumb:hover,
.single-product .vy-color-gallery__thumb:focus-visible {
  border-color: var(--vy-line-strong);
  background: var(--vy-card-bg);
  transform: none;
}
.single-product .vy-color-gallery__thumb.is-active {
  border-color: var(--vy-ink);
}
.single-product .vy-color-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.single-product .vy-color-gallery__dialog {
  position: fixed;
  width: min(94vw, 1440px);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--vy-radius);
  background: var(--vy-card-bg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}
.single-product .vy-color-gallery__dialog::backdrop {
  background: rgba(17, 17, 15, 0.78);
}
.single-product .vy-color-gallery__dialog > img {
  display: block;
  width: 100%;
  max-height: 94vh;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.single-product .vy-color-gallery__dialog-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--vy-ink);
  background: rgba(255, 255, 255, 0.94);
  font-size: 1.65rem;
  line-height: 1;
}
/* Badge pill overlaid on the gallery image (rendered from functions.php) */
.vy-badge-wrap--single {
  top: auto;
  bottom: 16px;
  left: 16px;
  z-index: 5;
}
@media (max-width: 689px) {
  .single-product .vy-badge-wrap--single {
    bottom: 10px;
    left: 10px;
  }
  .single-product .vy-badge-wrap--single .vy-badge {
    padding: 0.42em 0.68em;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
  }
}
.single-product .flex-control-thumbs li img {
  border-radius: var(--vy-radius-sm);
  border: 1px solid var(--vy-line);
  opacity: 1;
  transition: border-color var(--vy-dur) var(--vy-ease);
}
.single-product .flex-control-thumbs li img.flex-active {
  border: 2px solid var(--vy-ink);
}

/* Title, price, rating */
.single-product .product_title {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); /* design 1c: 44px */
  font-weight: var(--vy-fw-x);
  letter-spacing: -0.027em; /* design: -1.2px at 44px */
  line-height: 1.02;
}
.single-product div.product p.price {
  font-size: 1.625rem; /* design 1c: 26px */
  font-weight: var(--vy-fw-x);
}
.single-product .woocommerce-product-details__short-description {
  color: var(--vy-ink-60);
  line-height: 1.65;
}

/* Variations: uppercase labels, color swatches and size pills (product.js) */
.single-product .variations th.label,
.single-product .variations label {
  font-size: 0.74rem;
  font-weight: var(--vy-fw-x);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--vy-ink);
}
.vy-select-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.vy-color-swatches,
.vy-size-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.vy-color-swatch {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--vy-linen);
  outline: 1px solid var(--vy-line-strong);
  background: var(--vy-sw);
  cursor: pointer;
  transition: transform var(--vy-dur) var(--vy-ease), box-shadow var(--vy-dur) var(--vy-ease);
}
.vy-color-swatch:hover { transform: scale(1.08); }
.vy-color-swatch.is-active {
  box-shadow: 0 0 0 2px var(--vy-cream), 0 0 0 4px var(--vy-ink);
}
.vy-color-swatch:disabled { opacity: 0.35; cursor: not-allowed; }
.vy-size-pill {
  display: grid;
  place-items: center;
  min-width: 52px;
  height: 46px;
  padding: 0 10px;
  border-radius: var(--vy-radius-sm);
  border: 1.5px solid var(--vy-line-strong);
  background: transparent;
  font-family: var(--vy-font);
  font-size: 0.85rem;
  font-weight: var(--vy-fw-x);
  color: var(--vy-ink);
  cursor: pointer;
  transition: background-color var(--vy-dur) var(--vy-ease),
              color var(--vy-dur) var(--vy-ease),
              border-color var(--vy-dur) var(--vy-ease);
}
.vy-size-pill:hover { border-color: var(--vy-ink); }
.vy-size-pill.is-active {
  background: var(--vy-ink);
  color: var(--vy-cream);
  border-color: var(--vy-ink);
}
.vy-size-pill:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.single-product .reset_variations {
  font-size: 0.78rem;
  color: var(--vy-ink-60);
}

/* Quantity pill + full-width green Add to bag.
   Simple products: qty + button are direct children of form.cart.
   Variable products: they live inside .woocommerce-variation-add-to-cart. */
.single-product form.cart,
.single-product .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.single-product form.cart .variations,
.single-product form.cart .single_variation_wrap,
.single-product form.cart .woocommerce-variation { flex: 1 1 100%; }
.single-product form.cart .quantity,
.single-product form.cart .ct-quantity-wrapper {
  border: 2px solid var(--vy-ink);
  border-radius: var(--vy-radius-pill);
  min-height: 56px; /* design 1c: 56px */
  display: inline-flex;
  align-items: center;
}
.single-product form.cart .quantity input.qty {
  border: 0;
  background: transparent;
  font-weight: var(--vy-fw-x);
  font-size: 1rem;
}
.single-product form.cart .single_add_to_cart_button {
  flex: 1 1 auto;
  min-height: 56px;      /* design 1c: 56px pill */
  font-size: 0.97rem;    /* design: 15.5px / 800 */
  letter-spacing: 0.02em;
}
/* Blocksy wraps qty + button in .ct-cart-actions — one row per design 1c */
.single-product form.cart .ct-cart-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.single-product form.cart .ct-cart-actions .quantity { flex: none; }
.single-product form.cart .ct-cart-actions .single_add_to_cart_button { flex: 1 1 auto; }

/* SKU/category meta row reads as admin noise on an editorial page */
.single-product .product_meta { display: none; }

/* Tabs → branded editorial rows */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 1.4em;
  border-bottom: 1px solid var(--vy-line-strong);
  display: flex;
  gap: 26px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-size: 0.8rem;
  font-weight: var(--vy-fw-x);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--vy-ink-60);
  padding: 0 0 12px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--vy-ink);
  box-shadow: inset 0 -2px 0 var(--vy-green);
}
.woocommerce div.product .woocommerce-tabs .panel > h2:first-of-type { display: none; }

/* Accordion tabs (Blocksy type-3, forced from functions.php) — branded rows
   per design 1c: "Description −" / "Fit & fabric +" hairline rows. */
.woocommerce-tabs .ct-accordion-tab { border-bottom: 1px solid rgba(17, 17, 15, 0.15); }
.woocommerce-tabs .ct-accordion-tab:first-child { border-top: 1px solid rgba(17, 17, 15, 0.15); }
.woocommerce-tabs .ct-accordion-heading {
  font-size: 0.88rem;
  font-weight: var(--vy-fw-x);
  color: var(--vy-ink);
  padding-block: 15px;
  text-transform: none;
  letter-spacing: 0;
}
.woocommerce-tabs .ct-accordion-heading svg { color: var(--vy-green); }
.woocommerce-tabs .ct-accordion-tab .entry-content {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--vy-ink-60);
}
.woocommerce-tabs .ct-accordion-tab .entry-content > h2:first-of-type { display: none; }
.ct-product-tabs { margin-top: 1.6em; }

/* Woo dims the button until a size is picked — keep it readable */
.woocommerce .single_add_to_cart_button.disabled,
.woocommerce .single_add_to_cart_button.wc-variation-selection-needed {
  opacity: 0.55;
}

/* Story band between summary and related (rendered from functions.php).
   The copy column drives the height — the photo absolutely fills its cell
   so a tall source image can't blow the band up. Inset card per design 1c. */
.vy-product-band {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  background: var(--vy-ink);
  color: var(--vy-cream);
  border-radius: var(--vy-radius);
  overflow: hidden;
  width: var(--theme-container-edge-spacing, 90vw);
  max-width: var(--vy-shell-max);
  margin: clamp(32px, 5vw, 56px) auto;
}
.vy-product-band__media {
  align-self: stretch;
  position: relative;
  min-height: 240px;
}
.vy-product-band__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vy-product-band__copy { padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 40px) clamp(22px, 3vw, 36px) 0; }
.vy-eyebrow--gold { color: var(--vy-gold); }
.vy-product-band .vy-eyebrow { color: var(--vy-gold); }
.vy-product-band__title {
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.55rem);
  font-weight: var(--vy-fw-x);
  letter-spacing: -0.015em;
  color: var(--vy-cream);
  margin: 0.5em 0 0.45em;
  line-height: 1.2;
}
.vy-product-band__text {
  color: rgba(255, 248, 232, 0.75);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 720px) {
  .vy-product-band { grid-template-columns: 1fr; }
  .vy-product-band__media { min-height: 0; aspect-ratio: 16 / 9; }
  .vy-product-band__copy { padding: 4px 22px 24px; }
}

/* Related products heading */
.woocommerce .related.products > h2,
.woocommerce .up-sells > h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  font-weight: var(--vy-fw-x);
  letter-spacing: -0.02em;
  margin-bottom: 1em;
}

/* ==========================================================================
   12. CART  (handoff 1d — "Your bag")
   ========================================================================== */

/* Page title: "Your bag" — design 1d: 48px / 800 / -1.4px */
.woocommerce-cart .page-title,
.woocommerce-cart h1.entry-title {
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem);
  font-weight: var(--vy-fw-x);
  letter-spacing: -0.029em;
}

/* Free-shipping status pill (rendered from functions.php) */
.vy-shipbar {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--vy-radius-pill);
  font-size: 0.85rem;
  font-weight: var(--vy-fw-x);
  margin: 0 0 1.6em;
}
.vy-shipbar--unlocked { background: #DFF0E5; color: var(--vy-green-dark); }
.vy-shipbar--progress { background: var(--vy-gold-tint); color: var(--vy-ink); }
.vy-shipbar--progress .woocommerce-Price-amount { color: var(--vy-ink); }

/* Cart table as a warm card */
.woocommerce-cart table.shop_table.cart {
  background: var(--vy-cream);
  border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius);
  overflow: hidden;
}
.woocommerce-cart table.shop_table.cart th {
  font-size: 0.72rem;
  font-weight: var(--vy-fw-x);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--vy-ink-60);
}
.woocommerce-cart table.shop_table.cart td { border-color: var(--vy-line); }
.woocommerce-cart table.cart img {
  width: 88px;
  border-radius: var(--vy-radius-sm);
  background: var(--vy-card-bg);
}
.woocommerce-cart table.cart td.product-name a {
  color: var(--vy-ink);
  font-weight: var(--vy-fw-x);
  text-decoration: none;
}
.woocommerce-cart table.cart td.product-name a:hover { color: var(--vy-green); }
.woocommerce-cart table.cart a.remove {
  color: var(--vy-ink-60) !important;
  font-weight: var(--vy-fw-regular);
  transition: color var(--vy-dur) var(--vy-ease), background-color var(--vy-dur) var(--vy-ease);
}
.woocommerce-cart table.cart a.remove:hover {
  background: var(--vy-red);
  color: #fff !important;
}
.woocommerce-cart table.cart .quantity,
.woocommerce-cart .ct-quantity-wrapper {
  border: 1.5px solid var(--vy-line-strong);
  border-radius: var(--vy-radius-pill);
}
.woocommerce-cart table.cart .quantity input.qty {
  border: 0;
  background: transparent;
  font-weight: var(--vy-fw-x);
}

/* Coupon row */
.woocommerce-cart .coupon input[type="text"] {
  border-radius: var(--vy-radius-pill);
  padding-inline: 1.2em;
}

/* Totals as an order-summary card (Blocksy exposes border/padding as vars) */
.woocommerce-cart .cart_totals {
  --cart-totals-border: 1px solid var(--vy-line);
  --cart-totals-padding: clamp(18px, 3vw, 26px);
  background: var(--vy-cream);
  border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius);
  padding: clamp(18px, 3vw, 26px);
}
.woocommerce-cart .cart_totals > h2 {
  font-size: 1.2rem;
  font-weight: var(--vy-fw-x);
  margin-top: 0;
}
.woocommerce-cart .cart_totals table.shop_table {
  border: 0;
  background: transparent;
}
.woocommerce-cart .cart_totals th { color: var(--vy-ink-60); font-weight: var(--vy-fw-semi); }
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  color: var(--vy-ink);
  font-weight: var(--vy-fw-x);
  font-size: 1.05rem;
  border-top: 1px solid var(--vy-line-strong);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background: var(--vy-green);
  border-color: var(--vy-green);
  color: #fff;
  width: 100%;
  min-height: 56px; /* design 1d */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--vy-green-dark);
  border-color: var(--vy-green-dark);
}
.vy-cart-payments {
  text-align: center;
  font-size: 0.78rem;
  color: var(--vy-ink-60);
  margin: 0.9em 0 0;
}
.vy-cart-pickup {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--vy-ink-60);
  border-top: 1px solid var(--vy-line);
  padding-top: 0.9em;
  margin: 0.9em 0 0;
}
.vy-cart-pickup strong { color: var(--vy-ink); }

/* ==========================================================================
   13. JOURNAL  (handoff 1e — editorial blog cards)
   ========================================================================== */
body.blog .entry-card,
body.category .entry-card,
body.tag .entry-card,
body.author .entry-card,
body.date .entry-card {
  background: var(--vy-cream);
  border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius);
  overflow: hidden;
  transition: transform var(--vy-dur) var(--vy-ease), box-shadow var(--vy-dur) var(--vy-ease);
}
body.blog .entry-card:hover,
body.category .entry-card:hover { transform: translateY(var(--vy-lift)); box-shadow: var(--vy-shadow-card); }
.entry-card .ct-media-container { border-radius: 0; }
.entry-card .entry-title {
  font-weight: var(--vy-fw-x);
  letter-spacing: -0.015em;
}
.entry-card .entry-title a { color: var(--vy-ink); }
.entry-card .entry-title a:hover { color: var(--vy-green); }
.entry-card .entry-meta {
  font-size: 0.7rem;
  font-weight: var(--vy-fw-x);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.entry-card .entry-meta a { color: var(--vy-green); }
body.blog .entry-card > *:not(.ct-media-container):not(figure) { margin-inline: 20px; }
body.blog .entry-card > *:last-child:not(.ct-media-container) { margin-bottom: 18px; }

/* Single post: editorial headline */
.single-post .entry-header .page-title,
.single-post h1.entry-title {
  font-weight: var(--vy-fw-x);
  letter-spacing: -0.025em;
}

/* Journal header per design 1e: our intro carries the H1 — hide the theme hero */
body.blog .hero-section,
body.category .hero-section { display: none; }
.vy-journal-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  /* the hook renders outside the content container — constrain it ourselves */
  width: var(--theme-container-edge-spacing, 90vw);
  max-width: var(--vy-shell-max);
  margin: clamp(24px, 4vw, 56px) auto clamp(20px, 3vw, 34px);
  padding-inline: 0;
}
.vy-journal-intro__title {
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.5rem); /* design: 56px */
  font-weight: var(--vy-fw-x);
  letter-spacing: -0.028em;
  line-height: 1;
  margin: 0;
}
.vy-journal-intro__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.vy-pill {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--vy-radius-pill);
  border: 1.5px solid var(--vy-line-strong);
  font-size: 0.78rem;       /* design: 12.5px / 800 */
  font-weight: var(--vy-fw-x);
  color: var(--vy-ink);
  text-decoration: none;
  transition: background-color var(--vy-dur) var(--vy-ease), color var(--vy-dur) var(--vy-ease);
}
.vy-pill:hover { border-color: var(--vy-ink); color: var(--vy-ink); }
.vy-pill.is-active {
  background: var(--vy-ink);
  border-color: var(--vy-ink);
  color: var(--vy-cream);
}

/* Our Story page: the centered .vy-story-hero carries the H1 (design 1f) —
   hide the duplicate default page hero. */
body.page:has(.vy-story-hero) .hero-section { display: none; }

/* ==========================================================================
   14. OUR STORY PAGE  (handoff 1f — sections used in the page content)
   ========================================================================== */
.vy-story-hero {
  text-align: center;
  padding: clamp(20px, 4vw, 40px) 0 clamp(28px, 4vw, 48px);
}
.vy-story-hero h1,
.vy-story-hero__title {
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4rem);
  font-weight: var(--vy-fw-x);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0.3em auto;
  max-width: 820px;
}
.vy-story-hero__lead {
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--vy-ink-60);
}
.vy-story-hero__lead strong { color: var(--vy-ink); }

.vy-story-photos {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: 18px;
  align-items: center;
  margin: clamp(20px, 3vw, 36px) 0;
}
.vy-story-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--vy-radius);
  display: block;
}
.vy-story-photos > :nth-child(odd) img { aspect-ratio: 3 / 4; }
.vy-story-photos > :nth-child(2) img { aspect-ratio: 4 / 3.4; }

.vy-story-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 22px);
  margin: clamp(32px, 5vw, 56px) 0;
}
.vy-story-principle {
  background: var(--vy-cream);
  border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius);
  padding: clamp(22px, 3vw, 28px);
  border-top: 4px solid var(--vy-green);
}
.vy-story-principle--gold { border-top-color: var(--vy-gold); }
.vy-story-principle--blue { border-top-color: var(--vy-blue); }
.vy-story-principle__eyebrow {
  font-size: 0.72rem;
  font-weight: var(--vy-fw-x);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--vy-green);
  margin: 0;
}
.vy-story-principle--gold .vy-story-principle__eyebrow { color: #8a6d1f; }
.vy-story-principle--blue .vy-story-principle__eyebrow { color: var(--vy-blue); }
.vy-story-principle h2,
.vy-story-principle h3 {
  font-size: 1.25rem;
  font-weight: var(--vy-fw-x);
  margin: 0.6em 0 0.4em;
  border: 0;
  padding: 0;
}
.vy-story-principle p:last-child {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--vy-ink-60);
  margin: 0;
}

.vy-story-promise {
  background: var(--vy-ink);
  color: var(--vy-cream);
  text-align: center;
  border-radius: var(--vy-radius);
  padding: clamp(48px, 7vw, 80px) clamp(24px, 4vw, 64px);
  margin: clamp(32px, 5vw, 56px) 0 clamp(16px, 3vw, 24px);
}
.vy-story-promise__eyebrow {
  font-size: 0.74rem;
  font-weight: var(--vy-fw-x);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vy-gold);
  margin: 0;
}
.vy-story-promise__quote {
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.75rem);
  font-weight: var(--vy-fw-x);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--vy-cream);
  max-width: 760px;
  margin: 0.6em auto 1em;
}
.vy-story-promise .vy-btn-page {
  background: var(--vy-gold);
  border-color: var(--vy-gold);
  color: var(--vy-ink) !important;
}
.vy-story-promise .vy-btn-page:hover { background: #ffd35a; border-color: #ffd35a; }
@media (max-width: 820px) {
  .vy-story-photos { grid-template-columns: 1fr; }
  .vy-story-photos > :nth-child(2) { order: -1; }
  .vy-story-principles { grid-template-columns: 1fr; }
}

/* Honour reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  .woocommerce ul.products li.product:hover,
  .woocommerce ul.products li.product:hover img {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   15. LAUNCH COMPLETION ADDITIONS
   ========================================================================== */
.vy-shop-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: -18px 0 clamp(22px, 3vw, 34px);
}

.vy-page--narrow { max-width: 640px; }

.vy-signup__form--inline {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 18px;
  max-width: 560px;
}
.vy-signup__form--inline input[type="email"] {
  flex: 1;
  min-width: 0;
  border-radius: var(--vy-radius-pill);
  padding: 14px 18px;
}
.vy-hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}
.vy-page .vy-signup__form--inline input[type="email"] {
  background: #fff;
  color: var(--vy-ink);
  border-color: var(--vy-line-strong);
}
.vy-page .vy-signup__form--inline input[type="email"]::placeholder {
  color: var(--vy-ink-60);
}

.vy-review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 22px);
  margin: clamp(22px, 4vw, 34px) 0;
}
.vy-review-grid figure {
  margin: 0;
  background: var(--vy-cream);
  border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius);
  padding: clamp(20px, 3vw, 26px);
}
.vy-review-grid span {
  color: var(--vy-gold);
  letter-spacing: 0.12em;
  font-size: 0.9rem;
}
.vy-review-grid blockquote {
  margin: 12px 0;
  padding: 0;
  border: 0;
  color: var(--vy-ink);
  font-size: 1rem;
  line-height: 1.55;
  font-weight: var(--vy-fw-semi);
  font-style: normal;
}
.vy-review-grid figcaption,
.vy-muted-note {
  color: var(--vy-ink-60);
  font-size: 0.82rem;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .vy-review-grid { grid-template-columns: 1fr; }
  .vy-signup__form--inline { flex-direction: column; }
  .vy-signup__form--inline .vy-btn-page { width: 100%; text-align: center; }
}