/*
Theme Name: Vault & Victory
Theme URI: https://vaultandvictorycards.com
Description: Custom theme for Vault & Victory Cards — the "Victory Floor" direction. Card-shop energy at stadium volume: cobalt, torch orange, trophy gold, hard 3px rules, Big Shoulders Display over Archivo.
Version: 1.0
Author: Snazzy Solutions
Author URI: https://www.snazzy.solutions
Text Domain: vaultvictory
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
*/

/* =========================================================================
   1. DESIGN SYSTEM — tokens. Everything below inherits from here.
   ========================================================================= */
:root {
    /* Palette — "Victory Floor" */
    --vv-cobalt:      #0f2f6b;   /* Cobalt Deep  */
    --vv-cobalt-dk:   #0a2354;   /* panel inside cobalt */
    --vv-cobalt-line: #1d4a9e;
    --vv-torch:       #f05a1a;   /* Torch Orange */
    --vv-gold:        #ffd23f;   /* Trophy Gold  */
    --vv-ink:         #141414;   /* Ink          */
    --vv-paper:       #f4f2ee;   /* Newsprint    */
    --vv-white:       #ffffff;

    /* Tints used for type on dark grounds */
    --vv-sky:         #cfe0f8;
    --vv-sky-mid:     #a9c3e8;
    --vv-sky-dim:     #8fb4ee;
    --vv-sky-faint:   #7ea3dd;
    --vv-sky-input:   #6f96d4;
    --vv-ink-soft:    #4a4a45;
    --vv-ink-mute:    #5d5d58;
    --vv-ink-faint:   #8a8a84;
    --vv-gold-shade:  #8a5f00;
    --vv-gold-deep:   #3d3005;

    /* Type */
    --vv-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
    --vv-body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --vv-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Layout */
    --vv-wrap:   1440px;
    --vv-pad-x:  48px;
    --vv-rule:   3px;            /* the hard black rule that defines the brand */
}

@media (max-width: 900px) { :root { --vv-pad-x: 28px; } }
@media (max-width: 560px) { :root { --vv-pad-x: 18px; } }

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

body {
    margin: 0;
    background: var(--vv-paper);
    color: var(--vv-ink);
    font-family: var(--vv-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip; /* NOT hidden — hidden breaks position:sticky + iOS momentum */
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--vv-cobalt); text-decoration: none; }
a:hover { color: var(--vv-torch); }
h1, h2, h3, h4 { margin: 0; font-weight: 900; line-height: 1; }
p { margin: 0; }
button { font: inherit; }

/* =========================================================================
   3. LAYOUT HELPERS
   Padding is set with padding-left/right ONLY — never the `padding`
   shorthand — so a section class can add vertical padding without
   silently zeroing the gutter.
   ========================================================================= */
.vv-wrap {
    max-width: var(--vv-wrap);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--vv-pad-x);
    padding-right: var(--vv-pad-x);
}

/* Prose pages get their own narrower measure so the body copy sits centred
   under the title instead of stranded at the left of a 1440 column. */
.vv-wrap--prose { max-width: 940px; }

.vv-section { padding-top: 56px; padding-bottom: 56px; }
.vv-section--tight { padding-top: 52px; padding-bottom: 10px; }

.vv-shell { max-width: var(--vv-wrap); margin-left: auto; margin-right: auto; background: var(--vv-paper); }

/* =========================================================================
   4. TYPE COMPONENTS
   ========================================================================= */
.vv-display {
    font-family: var(--vv-display);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: 0.005em;
}

.vv-h2 { font-family: var(--vv-display); font-weight: 900; font-size: clamp(34px, 4vw, 46px); line-height: 0.9; text-transform: uppercase; color: var(--vv-ink); }

.vv-eyebrow { font-size: 11px; font-weight: 900; letter-spacing: 0.2em; color: var(--vv-torch); text-transform: uppercase; }
.vv-eyebrow--gold { color: var(--vv-gold); letter-spacing: 0.18em; }
.vv-eyebrow--shade { color: var(--vv-gold-shade); }

.vv-mono { font-family: var(--vv-mono); letter-spacing: 0.1em; }

.vv-lede { font-size: 16px; line-height: 1.55; text-wrap: pretty; }

/* =========================================================================
   5. BUTTONS / CHIPS
   Square-edged, heavy, letterspaced. No radius anywhere in this brand.
   ========================================================================= */
.vv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 16px 26px;
    border: 0;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.vv-btn--torch  { background: var(--vv-torch); color: var(--vv-white); }
.vv-btn--torch:hover  { background: var(--vv-gold); color: var(--vv-cobalt); }
.vv-btn--gold   { background: var(--vv-gold); color: var(--vv-cobalt); }
.vv-btn--gold:hover   { background: var(--vv-torch); color: var(--vv-white); }
.vv-btn--ink    { background: var(--vv-ink); color: var(--vv-white); }
.vv-btn--ink:hover    { background: var(--vv-torch); color: var(--vv-white); }
.vv-btn--outline-white { background: transparent; color: var(--vv-white); border: var(--vv-rule) solid var(--vv-white); padding: 13px 24px; }
.vv-btn--outline-white:hover { background: var(--vv-white); color: var(--vv-cobalt); }
.vv-btn--outline-veil  { background: transparent; color: var(--vv-white); border: var(--vv-rule) solid rgba(255,255,255,.55); padding: 13px 24px; }
.vv-btn--outline-veil:hover  { border-color: var(--vv-white); background: var(--vv-white); color: var(--vv-cobalt); }
.vv-btn--outline-ink   { background: transparent; color: var(--vv-ink); border: var(--vv-rule) solid var(--vv-ink); padding: 13px 24px; }
.vv-btn--outline-ink:hover   { background: var(--vv-ink); color: var(--vv-gold); }
.vv-btn--outline-sm    { background: transparent; color: var(--vv-ink); border: 2px solid var(--vv-ink); font-size: 11px; padding: 10px 16px; align-self: flex-start; }
.vv-btn--outline-sm:hover { background: var(--vv-ink); color: var(--vv-gold); }

.vv-btnrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Grade chip (PSA 10 etc.) */
.vv-grade { font-size: 10px; font-weight: 900; letter-spacing: 0.1em; color: var(--vv-cobalt); background: var(--vv-gold); padding: 4px 7px; }

/* Live/pulse badge */
.vv-badge { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; padding: 7px 13px; }
.vv-badge--ink   { background: var(--vv-ink); }
.vv-badge--torch { background: var(--vv-torch); }
.vv-badge__dot { width: 8px; height: 8px; border-radius: 50%; animation: vvPulse 1.4s ease-in-out infinite; }
.vv-badge__label { font-size: 11px; font-weight: 900; letter-spacing: 0.18em; }

@keyframes vvPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* =========================================================================
   6. BRAND MARK
   ========================================================================= */
.vv-logo { display: flex; align-items: center; gap: 12px; }
.vv-logo:hover { color: inherit; }
.vv-logo__mark {
    background: var(--vv-torch);
    padding: 7px 11px 5px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    flex: 0 0 auto;
}
.vv-logo__mark span { font-family: var(--vv-display); font-weight: 900; font-size: 24px; line-height: 0.8; color: var(--vv-cobalt); display: block; }
.vv-wordmark { font-family: var(--vv-display); font-weight: 900; font-size: 28px; line-height: 1; color: var(--vv-white); text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; }
.vv-wordmark em { font-style: normal; color: var(--vv-torch); }
.vv-logo__img img { max-height: 46px; width: auto; }

/* =========================================================================
   7. TICKER
   ========================================================================= */
.vv-ticker { background: var(--vv-ink); overflow: hidden; padding-top: 9px; padding-bottom: 9px; }
/* Track is sized by its content, not a % of the viewport — a fixed 50% run
   lets nowrap content overflow and collide with the next copy. */
.vv-ticker__track { display: flex; width: max-content; animation: vvTicker 26s linear infinite; }
.vv-ticker__run {
    display: flex; align-items: center; gap: 26px;
    flex: 0 0 auto;
    padding-left: 26px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.2em;
    color: var(--vv-gold); white-space: nowrap;
}
.vv-ticker__run i { font-style: normal; color: var(--vv-torch); }
.vv-ticker__run b { font-weight: 800; color: var(--vv-paper); }
@keyframes vvTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .vv-ticker__track { animation: none; }
    .vv-badge__dot { animation: none; }
}

/* =========================================================================
   8. HEADER / NAV
   ========================================================================= */
.vv-header {
    position: sticky; top: 0; z-index: 60;
    background: var(--vv-cobalt);
    border-bottom: var(--vv-rule) solid var(--vv-ink);
}
.admin-bar .vv-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .vv-header { top: 46px; } }

.vv-header__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 28px;
    max-width: var(--vv-wrap); margin-left: auto; margin-right: auto;
    padding: 16px var(--vv-pad-x);
}

.vv-nav { display: flex; align-items: center; gap: 26px; }
.vv-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }
.vv-nav a {
    font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--vv-sky);
}
.vv-nav a:hover { color: var(--vv-white); }
.vv-nav .is-hot > a { color: var(--vv-gold); }
.vv-nav .is-hot > a:hover { color: var(--vv-white); }
.vv-nav .current-menu-item > a { color: var(--vv-white); }

.vv-header__tools { display: flex; align-items: center; gap: 12px; }

.vv-search { display: flex; align-items: center; gap: 8px; background: var(--vv-cobalt-dk); border: 2px solid var(--vv-cobalt-line); padding: 8px 12px; min-width: 220px; }
.vv-search__icon { font-size: 12px; color: var(--vv-sky-input); line-height: 1; }
.vv-search input {
    background: transparent; border: 0; outline: 0; width: 100%;
    font-family: var(--vv-body); font-size: 12px; font-weight: 600; color: var(--vv-white);
}
.vv-search input::placeholder { color: var(--vv-sky-faint); opacity: 1; }

.vv-cart { display: flex; align-items: center; gap: 8px; background: var(--vv-torch); padding: 9px 14px; transition: background-color .15s; }
.vv-cart:hover { background: var(--vv-gold); }
.vv-cart__label { font-size: 12px; font-weight: 900; letter-spacing: 0.1em; color: var(--vv-white); }
.vv-cart:hover .vv-cart__label { color: var(--vv-cobalt); }
.vv-cart__count { font-family: var(--vv-mono); font-size: 11px; font-weight: 700; color: var(--vv-cobalt); background: var(--vv-gold); padding: 1px 6px; }
.vv-cart:hover .vv-cart__count { background: var(--vv-cobalt); color: var(--vv-gold); }

.vv-burger {
    display: none; background: transparent; border: 2px solid var(--vv-cobalt-line);
    width: 44px; height: 40px; cursor: pointer; align-items: center; justify-content: center; padding: 0;
}
.vv-burger svg { width: 20px; height: 20px; stroke: var(--vv-sky); }
.vv-burger[aria-expanded="true"] { background: var(--vv-torch); border-color: var(--vv-torch); }
.vv-burger[aria-expanded="true"] svg { stroke: var(--vv-white); }

.vv-mobile { display: none; background: var(--vv-cobalt-dk); border-top: 2px solid var(--vv-cobalt-line); }
.vv-mobile.is-open { display: block; }
.vv-mobile ul { list-style: none; margin: 0; padding: 0; }
.vv-mobile a {
    display: block; padding: 16px var(--vv-pad-x);
    font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--vv-sky); border-bottom: 1px solid rgba(255,255,255,.12);
}
.vv-mobile .is-hot > a { color: var(--vv-gold); }
.vv-mobile__search { padding: 16px var(--vv-pad-x); border-bottom: 1px solid rgba(255,255,255,.12); }

/* =========================================================================
   9. HERO
   ========================================================================= */
.vv-hero { position: relative; background: var(--vv-cobalt); border-bottom: var(--vv-rule) solid var(--vv-ink); overflow: hidden; }
.vv-hero__stripes { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 30px, transparent 30px 60px); }
.vv-hero__ring { position: absolute; right: -120px; top: -140px; width: 520px; height: 520px; border-radius: 50%; border: 40px solid rgba(240,90,26,.18); }
.vv-hero__inner {
    position: relative;
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center;
    max-width: var(--vv-wrap); margin-left: auto; margin-right: auto;
    padding: 64px var(--vv-pad-x) 56px;
}
.vv-hero__copy { display: flex; flex-direction: column; gap: 22px; }
.vv-hero__title {
    font-family: var(--vv-display); font-weight: 900;
    font-size: clamp(56px, 7.2vw, 104px); line-height: 0.84;
    text-transform: uppercase; color: var(--vv-white); letter-spacing: 0.005em;
}
.vv-hero__title em { font-style: normal; color: var(--vv-torch); }
.vv-hero__lede { color: var(--vv-sky-mid); max-width: 430px; }

.vv-hero__art { position: relative; display: flex; align-items: center; justify-content: center; }
.vv-hero__plate { position: absolute; width: 330px; height: 330px; max-width: 76%; aspect-ratio: 1; background: var(--vv-gold); }
.vv-hero__art img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(0,0,0,.5)); }
.vv-hero__tag { position: absolute; left: 0; bottom: 14px; background: var(--vv-ink); padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; }
.vv-hero__tag span:nth-child(1) { font-size: 10px; font-weight: 900; letter-spacing: 0.16em; color: var(--vv-gold); }
.vv-hero__tag span:nth-child(2) { font-size: 13px; font-weight: 700; color: var(--vv-white); }
.vv-hero__tag span:nth-child(3) { font-family: var(--vv-display); font-weight: 900; font-size: 26px; line-height: 1; color: var(--vv-torch); }

/* =========================================================================
   9b. CAROUSELS — hero stage + spotlight turntable.
   Transforms are written by theme.js (the maths is ported from the design);
   this file owns the furniture. Both share .vv-carousel__stage/__set/__dots.
   ========================================================================= */
/* Geometry lives in custom properties — theme.js reads these each render, so
   a media query can shrink the spread without touching the JS. */
.vv-carousel { --caro-x: 252; --caro-z: 300; --caro-rot: -34; --caro-scale: .9;
               position: relative; height: 470px; width: 100%; }
.vv-spot     { --caro-x: 232; --caro-z: 190; --caro-rot: -27; --caro-scale: .94; }

.vv-carousel__plinth {
    position: absolute; left: 50%; top: 300px; margin-left: -200px;
    width: 400px; max-width: 92%; height: 150px; background: var(--vv-gold);
}
.vv-carousel__base {
    position: absolute; left: 50%; top: 436px; margin-left: -200px;
    width: 400px; max-width: 92%; height: 14px; background: var(--vv-ink);
}

.vv-carousel__stage { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 48%; }
.vv-carousel__set { position: absolute; inset: 0; }
.vv-carousel__set[hidden] { display: none; }

.vv-hslide {
    position: absolute; left: 50%; top: 14px; margin-left: -145px;
    width: 290px; height: 440px; display: block; cursor: pointer;
    transition: transform 820ms cubic-bezier(.22,.61,.36,1), opacity 560ms ease, filter 560ms ease;
    will-change: transform;
}
.vv-hslide img { width: 100%; height: 100%; object-fit: contain; }

.vv-carousel__info {
    position: absolute; left: 0; bottom: 0; z-index: 150;
    background: var(--vv-ink); padding: 12px 16px;
    display: flex; flex-direction: column; gap: 3px; min-width: 230px; max-width: 68%;
}
.vv-carousel__badge { font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--vv-gold); }
.vv-carousel__name  { font-size: 14px; font-weight: 700; color: var(--vv-white); }
.vv-carousel__price { font-family: var(--vv-display); font-weight: 900; font-size: 30px; line-height: 1; color: var(--vv-torch); }
.vv-carousel__link  { font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--vv-sky-dim); padding-top: 4px; }
.vv-carousel__link:hover { color: var(--vv-gold); }

.vv-carousel__nav { position: absolute; right: 0; bottom: 6px; z-index: 150; display: flex; align-items: center; gap: 10px; }
.vv-carousel__arrow {
    width: 44px; height: 44px; background: var(--vv-ink); border: var(--vv-rule) solid var(--vv-gold);
    display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
    font-family: var(--vv-display); font-weight: 900; font-size: 22px; line-height: 1; color: var(--vv-gold);
    transition: background-color .15s, border-color .15s, color .15s;
}
.vv-carousel__arrow:hover { background: var(--vv-torch); border-color: var(--vv-torch); color: var(--vv-white); }

.vv-carousel__dots, .vv-spot__dots { display: flex; align-items: center; gap: 7px; }
.vv-dot {
    width: 7px; height: 8px; background: rgba(255,255,255,.35); border: 0; padding: 0; cursor: pointer;
    transition: width 300ms ease, background-color 300ms ease;
}
.vv-dot.is-active { width: 26px; background: var(--vv-torch); }

/* ---- Spotlight turntable ---- */
.vv-spot {
    position: relative; height: 520px; background: var(--vv-cobalt);
    border: var(--vv-rule) solid var(--vv-ink); overflow: hidden;
}
.vv-spot__stripes { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 30px, transparent 30px 60px); }
.vv-spot__glow { position: absolute; left: 50%; top: 88px; margin-left: -150px; width: 300px; height: 300px; border-radius: 50%; background: var(--vv-gold); opacity: .14; }
.vv-spot__stage { perspective: 1700px; perspective-origin: 50% 46%; }

.vv-spotcard {
    position: absolute; left: 50%; top: 46px; margin-left: -134px; width: 268px;
    transform-style: preserve-3d; cursor: pointer;
    transition: transform 780ms cubic-bezier(.22,.61,.36,1), opacity 520ms ease, filter 520ms ease;
    will-change: transform;
}
.vv-spotcard__in { position: relative; background: var(--vv-white); border: var(--vv-rule) solid var(--vv-ink); display: flex; flex-direction: column; }
.vv-spotcard__media { position: relative; display: block; height: 268px; background: #e6e2da; overflow: hidden; border-bottom: var(--vv-rule) solid var(--vv-ink); }
.vv-spotcard__media img { width: 100%; height: 100%; object-fit: cover; }
.vv-spotcard__grade { position: absolute; top: 8px; left: 8px; }
.vv-spotcard__save { top: 8px; right: 8px; }
.vv-spotcard__body { padding: 14px; display: flex; flex-direction: column; gap: 11px; }
.vv-spotcard__name { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--vv-ink); }
.vv-spotcard__name a { color: inherit; }
.vv-spotcard__name a:hover { color: var(--vv-torch); }
.vv-spotcard__price { font-family: var(--vv-display); font-weight: 900; font-size: 30px; line-height: 1; color: var(--vv-torch); }
.vv-spotcard__price .woocommerce-Price-amount { font: inherit; color: inherit; }
.vv-spotcard__body .vv-product__add { padding: 12px; }

.vv-spot__arrow {
    position: absolute; top: 224px; width: 52px; height: 52px; z-index: 200;
    background: var(--vv-ink); border: var(--vv-rule) solid var(--vv-gold);
    display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
    font-family: var(--vv-display); font-weight: 900; font-size: 26px; line-height: 1; color: var(--vv-gold);
    transition: background-color .15s, border-color .15s, color .15s;
}
.vv-spot__arrow:hover { background: var(--vv-torch); border-color: var(--vv-torch); color: var(--vv-white); }
.vv-spot__arrow--prev { left: 26px; }
.vv-spot__arrow--next { right: 26px; }

.vv-spot__dots { position: absolute; left: 0; right: 0; bottom: 22px; justify-content: center; gap: 9px; z-index: 200; }
.vv-spot__dots .vv-dot { height: 8px; }
.vv-spot__dots .vv-dot.is-active { width: 30px; }

.vv-spot__status { position: absolute; left: 26px; bottom: 18px; display: flex; align-items: center; gap: 9px; z-index: 200; }
.vv-spot__statusdot { width: 7px; height: 7px; border-radius: 50%; background: #7bd88f; }
.vv-spot.is-paused .vv-spot__statusdot { background: var(--vv-ink-faint); }
.vv-spot__status span:last-child,
.vv-spot__counter { font-family: var(--vv-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--vv-sky-dim); }
.vv-spot__counter { position: absolute; right: 26px; bottom: 18px; z-index: 200; }

/* ---- Hero tab strip ---- */
.vv-herotabs {
    position: relative; display: flex; align-items: stretch;
    border-top: var(--vv-rule) solid var(--vv-ink); background: var(--vv-cobalt-dk);
    max-width: var(--vv-wrap); margin-left: auto; margin-right: auto;
}
.vv-herotab {
    flex: 1; padding: 16px 24px; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: 5px;
    background: var(--vv-cobalt-dk); border: 0;
    border-right: 1px solid rgba(255,255,255,.12);
    border-top: 4px solid transparent;
    transition: background-color .18s, border-color .18s;
}
.vv-herotab:last-child { border-right: 0; }
.vv-herotab__label { font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--vv-sky-dim); }
.vv-herotab__caption { font-size: 12px; line-height: 1.4; color: #5d7fb4; }
.vv-herotab:hover { background: #0d2a63; }
.vv-herotab.is-active { background: var(--vv-cobalt); border-top-color: var(--vv-torch); }
.vv-herotab.is-active .vv-herotab__label { color: var(--vv-gold); }
.vv-herotab.is-active .vv-herotab__caption { color: var(--vv-sky); }

/* ---- Carousel responsive ----
   The design is 1440-only, so everything below is our call. The stage keeps
   working down to 320px by shrinking the card and the spread together. */
@media (max-width: 1024px) {
    .vv-carousel { --caro-x: 230; --caro-z: 260; }
}

@media (max-width: 820px) {
    .vv-carousel { --caro-x: 176; --caro-z: 210; height: 400px; }
    .vv-hslide   { width: 226px; height: 350px; margin-left: -113px; }
    .vv-carousel__plinth { top: 250px; height: 120px; width: 320px; margin-left: -160px; }
    .vv-carousel__base   { top: 366px; width: 320px; margin-left: -160px; }

    .vv-spot     { --caro-x: 176; --caro-z: 150; height: 470px; }
    .vv-spotcard { width: 216px; margin-left: -108px; }
    .vv-spotcard__media { height: 210px; }
    .vv-spot__arrow { top: 190px; width: 44px; height: 44px; }
    .vv-spot__arrow--prev { left: 12px; }
    .vv-spot__arrow--next { right: 12px; }
    .vv-spot__glow { top: 60px; width: 220px; height: 220px; margin-left: -110px; }
}

@media (max-width: 560px) {
    .vv-carousel { --caro-x: 132; --caro-z: 170; --caro-scale: .84; height: 340px; }
    .vv-hslide   { width: 180px; height: 280px; margin-left: -90px; }
    .vv-carousel__plinth { top: 200px; height: 92px; width: 240px; margin-left: -120px; }
    .vv-carousel__base   { top: 288px; width: 240px; margin-left: -120px; }
    /* Info + nav drop BELOW the stage instead of sitting over the card.
       The stage becomes the carousel's only in-flow child and takes an
       explicit height, so the absolute plinth/base still land inside it
       while info and nav flow underneath. */
    .vv-carousel { height: auto; }
    .vv-carousel__stage { position: relative; inset: auto; height: 300px; }
    .vv-carousel__plinth { top: 196px; }
    .vv-carousel__base   { top: 284px; }
    .vv-carousel__info {
        position: static; max-width: none; margin-top: 12px;
        display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    }
    .vv-carousel__price { width: 100%; }
    .vv-carousel__nav  { position: static; justify-content: center; margin-top: 14px; }

    .vv-spot     { --caro-x: 128; --caro-z: 120; --caro-scale: .88; height: 430px; }
    .vv-spotcard { width: 184px; margin-left: -92px; }
    .vv-spotcard__media { height: 170px; }
    .vv-spotcard__body { padding: 10px; gap: 8px; }
    .vv-spotcard__price { font-size: 24px; }
    .vv-spot__arrow { top: 150px; width: 38px; height: 38px; font-size: 20px; }
    .vv-spot__status, .vv-spot__counter { display: none; }

    .vv-herotabs { flex-direction: column; }
    .vv-herotab  { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
}

/* Motion is decorative here — honour the OS setting. JS also stops autoplay. */
@media (prefers-reduced-motion: reduce) {
    .vv-hslide, .vv-spotcard { transition: none !important; }
    .vv-dot { transition: none !important; }
}

/* Stat bar under the hero.
   The BAND bleeds edge to edge (it carries its own darker background and a
   3px rule — capping it left it floating on the hero above 1440px with the
   lighter cobalt showing down both sides). The GRID inside still aligns to
   the content column, so the numbers line up with everything else. */
.vv-statbar { position: relative; background: var(--vv-cobalt-dk); border-top: var(--vv-rule) solid var(--vv-ink); }
.vv-statbar__inner {
    display: grid; grid-template-columns: repeat(4, 1fr);
    max-width: var(--vv-wrap); margin-left: auto; margin-right: auto;
}
.vv-stat { padding: 18px 24px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid rgba(255,255,255,.12); }
.vv-stat:first-child { padding-left: var(--vv-pad-x); }
.vv-stat:last-child  { padding-right: var(--vv-pad-x); border-right: 0; }
.vv-stat__n { font-family: var(--vv-display); font-weight: 900; font-size: 30px; line-height: 1; color: var(--vv-gold); }
.vv-stat__l { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; color: var(--vv-sky-dim); text-transform: uppercase; }

/* =========================================================================
   10. SECTION HEADS
   ========================================================================= */
.vv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.vv-head__note { font-size: 13px; color: var(--vv-ink-mute); max-width: 340px; text-align: right; }
.vv-head__stack { display: flex; flex-direction: column; gap: 8px; }

/* =========================================================================
   11. CATEGORY TILES
   ========================================================================= */
.vv-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vv-cat {
    position: relative; height: 172px; border: var(--vv-rule) solid var(--vv-ink);
    padding: 18px; display: flex; flex-direction: column; justify-content: space-between;
    overflow: hidden;
}
.vv-cat__count { position: relative; font-family: var(--vv-mono); font-size: 10px; letter-spacing: 0.14em; }
.vv-cat__body { position: relative; display: flex; flex-direction: column; gap: 5px; }
.vv-cat__name { font-family: var(--vv-display); font-weight: 900; font-size: 36px; line-height: 0.9; text-transform: uppercase; }
.vv-cat__more { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; }
.vv-cat__blob { position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; }

.vv-cat--cobalt { background: var(--vv-cobalt); }
.vv-cat--cobalt .vv-cat__count { color: var(--vv-sky-dim); }
.vv-cat--cobalt .vv-cat__name  { color: var(--vv-white); }
.vv-cat--cobalt .vv-cat__more  { color: var(--vv-gold); }
.vv-cat--cobalt .vv-cat__blob  { background: rgba(240,90,26,.28); }

.vv-cat--torch { background: var(--vv-torch); }
.vv-cat--torch .vv-cat__count { color: #5f1f04; }
.vv-cat--torch .vv-cat__name  { color: var(--vv-white); }
.vv-cat--torch .vv-cat__more  { color: var(--vv-cobalt); }
.vv-cat--torch .vv-cat__blob  { background: rgba(15,47,107,.24); }

.vv-cat--gold { background: var(--vv-gold); }
.vv-cat--gold .vv-cat__count { color: #7a5f05; }
.vv-cat--gold .vv-cat__name  { color: var(--vv-ink); }
.vv-cat--gold .vv-cat__more  { color: var(--vv-cobalt); }
.vv-cat--gold .vv-cat__blob  { background: rgba(20,20,20,.12); }

.vv-cat--ink { background: var(--vv-ink); }
.vv-cat--ink .vv-cat__count { color: #8a8a8a; }
.vv-cat--ink .vv-cat__name  { color: var(--vv-white); }
.vv-cat--ink .vv-cat__more  { color: var(--vv-torch); }
.vv-cat--ink .vv-cat__blob  { background: rgba(255,210,63,.22); }

/* =========================================================================
   12. PRODUCT GRID
   ========================================================================= */
.vv-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vv-filter {
    font-family: var(--vv-body); font-size: 11px; font-weight: 900; letter-spacing: 0.1em;
    padding: 10px 15px; border: 2px solid var(--vv-ink); background: transparent; color: var(--vv-ink);
    cursor: pointer; text-transform: uppercase; transition: background-color .15s, color .15s;
}
.vv-filter:hover { background: var(--vv-ink); color: var(--vv-gold); }
.vv-filter.is-active { background: var(--vv-ink); color: var(--vv-gold); }

.vv-products { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

/* position:relative is load-bearing — the save button is a sibling of the
   media link (a <button> can't be nested inside an <a>) and anchors to this. */
.vv-product { position: relative; background: var(--vv-white); border: var(--vv-rule) solid var(--vv-ink); display: flex; flex-direction: column; }
.vv-product.is-hidden { display: none; }
.vv-product__media { position: relative; height: 250px; background: #e6e2da; overflow: hidden; display: block; }
.vv-product__media img { width: 100%; height: 100%; object-fit: cover; }
.vv-product__grade { position: absolute; top: 8px; left: 8px; }
.vv-product__save {
    position: absolute; top: 8px; right: 8px; width: 30px; height: 30px;
    background: var(--vv-white); border: 2px solid var(--vv-ink);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 13px; color: #c4c0b8; padding: 0; line-height: 1;
}
.vv-product__save.is-saved { background: var(--vv-torch); color: var(--vv-white); }

.vv-product__body { padding: 12px; display: flex; flex-direction: column; gap: 9px; border-top: var(--vv-rule) solid var(--vv-ink); flex: 1; }
.vv-product__set  { font-family: var(--vv-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--vv-ink-faint); text-transform: uppercase; }
.vv-product__name { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--vv-ink); }
.vv-product__name a { color: inherit; }
.vv-product__name a:hover { color: var(--vv-torch); }
.vv-product__foot { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }
.vv-product__pricerow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vv-product__price { font-family: var(--vv-display); font-weight: 900; font-size: 26px; line-height: 1; color: var(--vv-torch); }
.vv-product__price .woocommerce-Price-amount { font: inherit; color: inherit; }
.vv-product__stock { font-family: var(--vv-mono); font-size: 10px; color: var(--vv-ink-mute); white-space: nowrap; }
.vv-product__add {
    display: block; text-align: center; font-size: 11px; font-weight: 900; letter-spacing: 0.1em;
    color: var(--vv-white); background: var(--vv-cobalt); padding: 11px; cursor: pointer;
    border: 0; width: 100%; text-transform: uppercase; transition: background-color .15s;
}
.vv-product__add:hover { background: var(--vv-torch); color: var(--vv-white); }
.vv-product__add.loading { opacity: .6; }
.vv-product__add.added::after { content: " ✓"; }
.vv-product__add--out { background: var(--vv-ink-faint); cursor: not-allowed; }
.vv-product__add--out:hover { background: var(--vv-ink-faint); }

.vv-viewall { align-self: center; }

.vv-empty { grid-column: 1 / -1; padding: 40px 0; text-align: center; font-size: 13px; color: var(--vv-ink-mute); }

/* Chips are <a> on the archive (real server-side filters) and <button> on the
   homepage (client-side). Same look either way. */
a.vv-filter { display: inline-flex; align-items: center; text-decoration: none; }
a.vv-filter.is-active { color: var(--vv-gold); }

/* ---- Shop archive ---- */
.vv-shophero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.vv-shophero .vv-eyebrow { display: block; margin-bottom: 8px; }
.vv-shophero__blurb { font-size: 14px; line-height: 1.55; color: var(--vv-sky-mid); max-width: 360px; text-align: right; }

.vv-shopbar {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    padding-bottom: 20px; margin-bottom: 24px; border-bottom: var(--vv-rule) solid var(--vv-ink);
}
.vv-shopbar__meta { display: flex; align-items: center; gap: 16px; }
.vv-shopbar__count { font-family: var(--vv-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--vv-ink-mute); white-space: nowrap; }
.vv-sort select {
    border: 2px solid var(--vv-ink); background: transparent; border-radius: 0;
    font-family: var(--vv-body); font-size: 11px; font-weight: 900; letter-spacing: .1em;
    text-transform: uppercase; color: var(--vv-ink); padding: 10px 14px; cursor: pointer;
}
.vv-sort select:focus { outline: 2px solid var(--vv-torch); outline-offset: -2px; }

.vv-products--shop { grid-template-columns: repeat(4, 1fr); }

.vv-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 34px; flex-wrap: wrap; }
.vv-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; padding: 11px 14px; border: 2px solid var(--vv-ink);
    font-size: 12px; font-weight: 900; letter-spacing: .06em; color: var(--vv-ink);
}
.vv-pagination .page-numbers:hover { background: var(--vv-ink); color: var(--vv-gold); }
.vv-pagination .page-numbers.current { background: var(--vv-ink); color: var(--vv-gold); }

.vv-noresults { padding: 56px 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.vv-noresults p { font-size: 15px; color: var(--vv-ink-soft); max-width: 480px; }

/* =========================================================================
   13. BREAKS BAND
   ========================================================================= */
.vv-breaks { position: relative; border-top: var(--vv-rule) solid var(--vv-ink); border-bottom: var(--vv-rule) solid var(--vv-ink); overflow: hidden; background: var(--vv-ink); }
.vv-breaks__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.vv-breaks__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,47,107,.94) 0%, rgba(15,47,107,.72) 46%, rgba(20,20,20,.35) 100%); }
.vv-breaks__inner {
    position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center;
    max-width: var(--vv-wrap); margin-left: auto; margin-right: auto;
    padding: 64px var(--vv-pad-x);
}
.vv-breaks__copy { display: flex; flex-direction: column; gap: 20px; }
.vv-breaks__title { font-family: var(--vv-display); font-weight: 900; font-size: clamp(44px, 5.4vw, 70px); line-height: 0.86; text-transform: uppercase; color: var(--vv-white); }
.vv-breaks__lede { color: var(--vv-sky); max-width: 440px; }
.vv-breaks__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.vv-breakstat { background: var(--vv-ink); border: var(--vv-rule) solid var(--vv-white); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.vv-breakstat__n { font-family: var(--vv-display); font-weight: 900; font-size: 40px; line-height: 0.9; color: var(--vv-gold); }
.vv-breakstat__l { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: var(--vv-sky-dim); text-transform: uppercase; }

/* =========================================================================
   14. SEALED SPOTLIGHT
   ========================================================================= */
.vv-spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.vv-panel--paper { background: var(--vv-white); border: var(--vv-rule) solid var(--vv-ink); padding: 26px; display: flex; gap: 22px; align-items: center; }
.vv-panel__shot { flex: 0 0 168px; height: 230px; background: #e6e2da; border: var(--vv-rule) solid var(--vv-ink); overflow: hidden; }
.vv-panel__shot img { width: 100%; height: 100%; object-fit: cover; }
.vv-panel__body { display: flex; flex-direction: column; gap: 12px; }
.vv-panel__title { font-family: var(--vv-display); font-weight: 900; font-size: 38px; line-height: 0.9; text-transform: uppercase; color: var(--vv-ink); }
.vv-panel__text { font-size: 13px; line-height: 1.6; color: var(--vv-ink-soft); }

.vv-panel--cobalt { background: var(--vv-cobalt); border: var(--vv-rule) solid var(--vv-ink); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.vv-panel--cobalt .vv-panel__title { color: var(--vv-white); }
.vv-panel--cobalt .vv-panel__text  { color: var(--vv-sky-mid); }
.vv-minstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vv-minstat { background: var(--vv-cobalt-dk); border: 2px solid var(--vv-cobalt-line); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.vv-minstat__n { font-family: var(--vv-display); font-weight: 900; font-size: 24px; line-height: 1; color: var(--vv-gold); }
.vv-minstat__l { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; color: var(--vv-sky-dim); text-transform: uppercase; }

/* =========================================================================
   15. SELL TO US
   ========================================================================= */
.vv-sell { background: var(--vv-gold); border-top: var(--vv-rule) solid var(--vv-ink); border-bottom: var(--vv-rule) solid var(--vv-ink); padding-top: 56px; padding-bottom: 56px; }
.vv-sell__inner { display: flex; flex-direction: column; gap: 30px; }
.vv-sell__title { font-family: var(--vv-display); font-weight: 900; font-size: clamp(38px, 4.8vw, 56px); line-height: 0.88; text-transform: uppercase; color: var(--vv-ink); }
.vv-sell__note { font-size: 14px; line-height: 1.55; color: var(--vv-gold-deep); max-width: 360px; }
.vv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vv-step { background: var(--vv-paper); border: var(--vv-rule) solid var(--vv-ink); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.vv-step__n { font-family: var(--vv-display); font-weight: 900; font-size: 44px; line-height: 0.85; color: var(--vv-torch); }
.vv-step__h { font-size: 16px; font-weight: 800; color: var(--vv-ink); }
.vv-step__p { font-size: 13px; line-height: 1.55; color: var(--vv-ink-soft); }

/* =========================================================================
   16. REVIEWS
   ========================================================================= */
.vv-reviews__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vv-reviews__rule { flex: 1; height: var(--vv-rule); background: var(--vv-ink); min-width: 40px; }
.vv-reviews__score { font-family: var(--vv-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--vv-ink-mute); }
.vv-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vv-review { background: var(--vv-white); border: var(--vv-rule) solid var(--vv-ink); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.vv-review__stars { font-size: 14px; letter-spacing: 0.1em; color: var(--vv-gold); }
.vv-review__text { font-size: 14px; line-height: 1.6; color: #2f2f2b; }
.vv-review__who { font-size: 11px; font-weight: 800; font-style: normal; letter-spacing: 0.1em; color: var(--vv-ink-mute); text-transform: uppercase; }

/* =========================================================================
   17. SIGNUP BAND
   ========================================================================= */
.vv-signup { background: var(--vv-ink); border-top: var(--vv-rule) solid var(--vv-ink); padding-top: 48px; padding-bottom: 48px; }
.vv-signup__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.vv-signup__copy { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.vv-signup__title { font-family: var(--vv-display); font-weight: 900; font-size: clamp(34px, 3.6vw, 44px); line-height: 0.9; text-transform: uppercase; color: var(--vv-white); }
.vv-signup__note { font-size: 14px; line-height: 1.55; color: #9a9a94; }
.vv-signup__form { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.vv-signup__form input[type="email"] {
    background: var(--vv-paper); border: var(--vv-rule) solid var(--vv-paper); outline: 0;
    padding: 15px 18px; min-width: 300px; flex: 1;
    font-family: var(--vv-body); font-size: 13px; font-weight: 600; color: var(--vv-ink);
}
.vv-signup__form input[type="email"]::placeholder { color: var(--vv-ink-faint); opacity: 1; }
.vv-signup__form button {
    background: var(--vv-torch); border: 0; padding: 15px 24px; cursor: pointer;
    font-family: var(--vv-body); font-size: 13px; font-weight: 900; letter-spacing: 0.1em;
    color: var(--vv-white); text-transform: uppercase; transition: background-color .15s, color .15s;
}
.vv-signup__form button:hover { background: var(--vv-gold); color: var(--vv-cobalt); }
.vv-signup__msg { flex-basis: 100%; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--vv-gold); padding-top: 10px; text-transform: uppercase; }

/* =========================================================================
   18. FOOTER
   ========================================================================= */
.vv-footer { background: var(--vv-cobalt); padding-top: 40px; padding-bottom: 30px; }
.vv-footer__inner { display: flex; flex-direction: column; gap: 30px; }
.vv-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.vv-footer__brand { display: flex; flex-direction: column; gap: 12px; }
.vv-footer__brand .vv-wordmark { font-size: 26px; }
.vv-footer__addr { font-size: 13px; line-height: 1.6; color: var(--vv-sky-dim); max-width: 300px; }
.vv-fcol { display: flex; flex-direction: column; gap: 10px; }
.vv-fcol__h { font-size: 10px; font-weight: 900; letter-spacing: 0.18em; color: var(--vv-gold); text-transform: uppercase; }
.vv-fcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vv-fcol a { font-size: 13px; color: var(--vv-sky); }
.vv-fcol a:hover { color: var(--vv-white); }
.vv-footer__legal ul {
    list-style: none; margin: 0; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 26px;
    border-top: 1px solid rgba(255,255,255,.15);
}
.vv-footer__legal a { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--vv-sky-dim); }
.vv-footer__legal a:hover { color: var(--vv-gold); }

.vv-footer__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15);
}
.vv-footer__bar span { font-family: var(--vv-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--vv-sky-faint); text-transform: uppercase; }

/* =========================================================================
   18b. PANEL — the numbered, ink-headed white box.
   Shared by Contact and Checkout; both use the same 01/02/03 furniture.
   ========================================================================= */
.vv-panel { background: var(--vv-white); border: var(--vv-rule) solid var(--vv-ink); display: flex; flex-direction: column; }
.vv-panel__bar { background: var(--vv-ink); padding: 13px 18px; display: flex; align-items: center; gap: 12px; }
.vv-panel__num { font-family: var(--vv-display); font-weight: 900; font-size: 20px; line-height: 1; color: var(--vv-gold); }
.vv-panel__label { font-size: 12px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vv-white); }
.vv-panel__in { padding: 20px; }
.vv-panel--shadow { box-shadow: 10px 10px 0 var(--vv-ink); }
.vv-panel--cobalt-body .vv-panel__in { background: var(--vv-cobalt); color: var(--vv-sky); }

/* ---- Contact layout ---- */
.vv-contact { display: grid; grid-template-columns: 1fr 400px; gap: 28px; align-items: flex-start; }
.vv-contact__side { display: flex; flex-direction: column; gap: 20px; }
.vv-contact__intro { font-size: 15px; line-height: 1.55; color: var(--vv-ink-soft); margin-bottom: 22px; }
.vv-contact__k { font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--vv-gold); margin-bottom: 4px; }
.vv-contact__v { font-size: 14px; line-height: 1.6; color: var(--vv-white); margin-bottom: 18px; }
.vv-contact__v a { color: var(--vv-white); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.vv-contact__v a:hover { color: var(--vv-gold); }
.vv-contact__cta { font-size: 12px; padding: 13px 20px; }

.vv-hours { margin: 0; }
.vv-hours__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #e3ddd2; }
.vv-hours__row:last-child { border-bottom: 0; }
.vv-hours dt { font-size: 13px; font-weight: 700; color: var(--vv-ink); }
.vv-hours dd { margin: 0; font-family: var(--vv-mono); font-size: 12px; color: var(--vv-ink-mute); white-space: nowrap; }

.vv-routes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.vv-routes li { display: flex; flex-direction: column; gap: 3px; }
.vv-routes a { font-size: 14px; font-weight: 800; color: var(--vv-cobalt); }
.vv-routes a:hover { color: var(--vv-torch); }
.vv-routes span { font-size: 12px; line-height: 1.5; color: var(--vv-ink-mute); }

/* =========================================================================
   18c. FLUENT FORMS — on brand. Square, heavy borders, uppercase labels.
   Scoped to .fluentform so it can't leak into WooCommerce blocks.
   ========================================================================= */
.fluentform .ff-el-group { margin-bottom: 18px; }
.fluentform .ff-el-input--label label {
    font-family: var(--vv-body); font-size: 10px; font-weight: 900;
    letter-spacing: .14em; text-transform: uppercase; color: var(--vv-ink); margin-bottom: 7px;
}
.fluentform .ff-el-input--label.ff-el-is-required label:after { color: var(--vv-torch); font-weight: 900; }

.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="url"],
.fluentform input[type="number"],
.fluentform select,
.fluentform textarea,
.fluentform .ff-el-form-control {
    border: var(--vv-rule) solid var(--vv-ink) !important;
    border-radius: 0 !important;
    background: var(--vv-white);
    padding: 13px !important;
    font-family: var(--vv-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--vv-ink);
    box-shadow: none !important;
    height: auto;
}
.fluentform .ff-el-form-control::placeholder { color: #a8a396; font-weight: 500; opacity: 1; }
.fluentform .ff-el-form-control:focus {
    border-color: var(--vv-ink) !important;
    outline: var(--vv-rule) solid var(--vv-torch);
    outline-offset: -3px;
}
.fluentform textarea { min-height: 150px; resize: vertical; }
.fluentform select { appearance: none; background-image: none; }

/* Name field sits in a two-column row */
.fluentform .ff-t-cell { padding-right: 14px; }
.fluentform .ff-t-cell:last-child { padding-right: 0; }

/* Phone field's country dropdown */
.fluentform .iti { width: 100%; }
.fluentform .iti__flag-container { border-right: 2px solid var(--vv-ink); }

/* Submit */
.fluentform .ff-btn-submit,
.fluentform .ff_btn_style {
    background: var(--vv-torch) !important;
    color: var(--vv-white) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-family: var(--vv-body) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    padding: 17px 30px !important;
    transition: background-color .15s, color .15s;
}
.fluentform .ff-btn-submit:hover,
.fluentform .ff_btn_style:hover { background: var(--vv-ink) !important; color: var(--vv-gold) !important; }

/* Validation + success */
.fluentform .error, .fluentform .text-danger, .fluentform .ff-el-is-error .error {
    color: #c23b12; font-size: 12px; font-weight: 700;
}
.fluentform .ff-el-is-error .ff-el-form-control { border-color: #c23b12 !important; }
.ff-message-success, .ff_submit_success {
    background: var(--vv-gold);
    border: var(--vv-rule) solid var(--vv-ink);
    padding: 20px;
    color: var(--vv-ink);
    font-size: 15px;
    line-height: 1.55;
}
.ff-message-success p { margin: 0 0 .6em; }
.ff-message-success p:last-child { margin-bottom: 0; }

/* =========================================================================
   19. INNER / FALLBACK PAGES (incl. WooCommerce cart, checkout, account, shop)
   Keeps non-homepage routes on-brand without a bespoke template each.
   ========================================================================= */
/* Title band — gives inner pages the same cobalt/stripe furniture as the hero. */
.vv-pagehero { position: relative; background: var(--vv-cobalt); border-bottom: var(--vv-rule) solid var(--vv-ink); overflow: hidden; }
.vv-pagehero__stripes { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 30px, transparent 30px 60px); }
.vv-pagehero__inner { position: relative; padding-top: 46px; padding-bottom: 46px; }
.vv-pagehero__title {
    font-family: var(--vv-display); font-weight: 900;
    font-size: clamp(38px, 5.2vw, 68px); line-height: 0.88;
    text-transform: uppercase; color: var(--vv-white); letter-spacing: 0.005em;
}

.vv-page { padding-top: 48px; padding-bottom: 72px; }
.vv-page__title { font-family: var(--vv-display); font-weight: 900; font-size: clamp(38px, 4.6vw, 56px); line-height: 0.9; text-transform: uppercase; color: var(--vv-ink); margin-bottom: 24px; }

.vv-page__body { max-width: 780px; }
.vv-page__body--wide { max-width: none; }
/* Inside .vv-wrap--prose the wrap already sets the measure — a second cap here
   would just push the copy back to the left of its own column. */
.vv-page__body--prose { max-width: none; }

.vv-page__body p { margin-bottom: 1.15em; }
.vv-page__body > p:first-child,
.vv-page__body .vv-page__lede {
    font-size: 19px; line-height: 1.5; color: var(--vv-ink); font-weight: 500;
    border-left: var(--vv-rule) solid var(--vv-torch); padding-left: 18px; margin-bottom: 1.6em;
}
.vv-page__body--wide > p:first-child { border-left: 0; padding-left: 0; font-size: 16px; font-weight: 400; }

.vv-page__body h2 {
    font-family: var(--vv-display); font-weight: 900; font-size: clamp(26px, 3vw, 34px);
    line-height: 1; text-transform: uppercase; color: var(--vv-ink);
    margin: 1.8em 0 .6em; padding-bottom: 10px; border-bottom: var(--vv-rule) solid var(--vv-ink);
}
.vv-page__body--wide h2 { border-bottom: 0; padding-bottom: 0; }
.vv-page__body h3 { font-size: 17px; font-weight: 800; margin: 1.5em 0 .4em; color: var(--vv-ink); }

.vv-page__body ul, .vv-page__body ol { margin: 0 0 1.4em; padding-left: 0; list-style: none; counter-reset: vv-step; }
.vv-page__body li { position: relative; padding-left: 30px; margin-bottom: .7em; line-height: 1.55; }
.vv-page__body ul > li::before {
    content: ""; position: absolute; left: 0; top: .55em;
    width: 10px; height: 10px; background: var(--vv-torch);
}
.vv-page__body ol > li { counter-increment: vv-step; padding-left: 38px; }
.vv-page__body ol > li::before {
    content: counter(vv-step, decimal-leading-zero);
    position: absolute; left: 0; top: 0;
    font-family: var(--vv-display); font-weight: 900; font-size: 20px; line-height: 1.25; color: var(--vv-torch);
}
.vv-page__body strong { font-weight: 800; }
.vv-page__body a { color: var(--vv-cobalt); text-decoration: underline; text-underline-offset: 2px; }
.vv-page__body a:hover { color: var(--vv-torch); }
.vv-page__body a.vv-btn { text-decoration: none; color: var(--vv-white); }
.vv-page__body hr { border: 0; border-top: var(--vv-rule) solid var(--vv-ink); margin: 2.4em 0 1.6em; }
.vv-page__body em { color: var(--vv-ink-mute); font-style: italic; }

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: var(--vv-cobalt); color: var(--vv-white); border-radius: 0;
    font-family: var(--vv-body); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-size: 12px;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover { background: var(--vv-torch); color: var(--vv-white); }
.woocommerce .button.alt, .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--vv-torch); }
.woocommerce .button.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--vv-gold); color: var(--vv-cobalt); }
.woocommerce div.product p.price, .woocommerce ul.products li.product .price { color: var(--vv-torch); font-family: var(--vv-display); font-weight: 900; font-size: 30px; }

/* =========================================================================
   18d. CHECKOUT FLOW CHROME — slim header, step bar, page head, ship bar.
   ========================================================================= */
.vv-cohead { background: var(--vv-cobalt); border-bottom: var(--vv-rule) solid var(--vv-ink); }
.vv-cohead__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.vv-cohead__tools { display: flex; align-items: center; gap: 12px; }
.vv-cohead__ssl { font-family: var(--vv-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--vv-sky-dim); }
.vv-cohead__count { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--vv-cobalt); background: var(--vv-gold); padding: 7px 12px; white-space: nowrap; }

.vv-flowsteps { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--vv-ink); border-bottom: var(--vv-rule) solid var(--vv-ink); }
.vv-flowstep {
    display: flex; align-items: center; gap: 12px;
    padding: 15px var(--vv-pad-x);
    border-right: 1px solid rgba(255,255,255,.14);
    background: var(--vv-ink);
}
.vv-flowstep:last-child { border-right: 0; }
.vv-flowstep__n { font-family: var(--vv-display); font-weight: 900; font-size: 22px; line-height: 1; color: #4f4f4a; }
.vv-flowstep__l { font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--vv-ink-faint); }
.vv-flowstep.is-current { background: var(--vv-torch); }
.vv-flowstep.is-current .vv-flowstep__n, .vv-flowstep.is-current .vv-flowstep__l { color: var(--vv-white); }
a.vv-flowstep.is-done .vv-flowstep__n { color: var(--vv-gold); }
a.vv-flowstep.is-done .vv-flowstep__l { color: var(--vv-sky-dim); }
a.vv-flowstep.is-done:hover { background: #232323; }
a.vv-flowstep.is-done:hover .vv-flowstep__l { color: var(--vv-white); }

.vv-flow { padding-top: 40px; padding-bottom: 56px; }
.vv-flow__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.vv-flow__title { font-family: var(--vv-display); font-weight: 900; font-size: clamp(38px, 5vw, 56px); line-height: .88; text-transform: uppercase; color: var(--vv-ink); }
.vv-flow__back { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--vv-ink); }
.vv-flow__back:hover { color: var(--vv-torch); }

.vv-shipbar { background: var(--vv-ink); padding: 14px 18px; display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.vv-shipbar__label { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--vv-gold); white-space: nowrap; }
.vv-shipbar__track { flex: 1; height: 10px; background: #2c2c2c; display: block; }
.vv-shipbar__fill { display: block; height: 100%; background: var(--vv-torch); transition: width .3s ease; }

.vv-trust { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid #e3ddd2; display: flex; flex-direction: column; gap: 7px; }
.vv-trust li { font-size: 11px; font-weight: 700; color: #3d3d38; padding-left: 0; }
.vv-trust li::before { display: none; }

/* ---- WooCommerce Cart & Checkout (Blocks) --------------------------------
   These are Blocks, not classic templates: they don't carry the .button
   class the rules above target, and they ship their own rounded, soft
   styling. Everything here squares them off and puts them on brand.
   ------------------------------------------------------------------------ */

/* Nothing in this brand has a radius. */
.wp-block-woocommerce-cart *,
.wp-block-woocommerce-checkout * { border-radius: 0 !important; }

/* Buttons */
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    background-color: var(--vv-torch) !important;
    color: var(--vv-white) !important;
    border: 0 !important;
    font-family: var(--vv-body) !important;
    font-weight: 900 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    padding: 17px 26px !important;
    transition: background-color .15s, color .15s;
}
.wc-block-components-button:not(.is-link):hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
    background-color: var(--vv-gold) !important;
    color: var(--vv-cobalt) !important;
}
.wc-block-components-button__text,
.wc-block-components-button:not(.is-link) { text-decoration: none !important; }
.wc-block-components-button.is-link { color: var(--vv-cobalt); }
.wc-block-components-button.is-link:hover { color: var(--vv-torch); }

/* ---- The two-column flow grid: content + a fixed 400px summary rail ----
   Target .wc-block-components-sidebar-layout — the element that actually
   contains main + sidebar. `.wc-block-cart` / `.wc-block-checkout` also sit
   on the OUTER wrapper, so styling those made the wrapper a grid too and
   squeezed the real layout into the first column. */
.wc-block-components-sidebar-layout {
    display: grid !important;
    grid-template-columns: 1fr 400px;
    gap: 28px;
    align-items: flex-start;
}
.wc-block-cart__main, .wc-block-checkout__main { width: auto !important; padding-right: 0 !important; max-width: none !important; }
.wc-block-cart__sidebar, .wc-block-checkout__sidebar { width: auto !important; padding: 0 !important; max-width: none !important; position: static !important; }

/* Woo prints its own "Cart"/"Checkout" headings — ours is in .vv-flow__head. */
.wp-block-woocommerce-cart .wc-block-cart__main > h2:first-child { display: none; }

/* Panels — the summary rail. Nested panels (the coupon accordion lives
   inside it) must NOT inherit the heavy 3px rule. */
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
    background: var(--vv-white) !important;
    border: var(--vv-rule) solid var(--vv-ink) !important;
    box-shadow: 10px 10px 0 var(--vv-ink);
    padding: 20px !important;
}
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel {
    border: 0 !important;
    border-top: 1px solid #ded8cc !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---- Cart line items as bordered cards ---- */
.wc-block-cart-items, .wc-block-cart-items__header { border: 0 !important; }
.wc-block-cart-items__header { display: none !important; }
.wc-block-cart-items__row {
    background: var(--vv-white);
    border: var(--vv-rule) solid var(--vv-ink) !important;
    padding: 16px !important;
    margin-bottom: 16px;
    display: grid !important;
    grid-template-columns: 112px 1fr auto;
    gap: 18px;
    align-items: center;
}
.wc-block-cart-items__row td { border: 0 !important; padding: 0 !important; vertical-align: middle; }
.wc-block-cart-item__image { width: 112px !important; }
.wc-block-cart-item__image img { width: 100% !important; height: 150px; object-fit: cover; border: 2px solid var(--vv-ink); }
.wc-block-cart-item__product { padding: 0 !important; }
.wc-block-components-product-name { font-size: 17px !important; font-weight: 800 !important; line-height: 1.25; }
.wc-block-components-product-metadata { font-family: var(--vv-mono); font-size: 10px; color: var(--vv-ink-mute); }
.wc-block-components-product-metadata__description p { margin: 0; }
.wc-block-cart-item__total { text-align: right; }
.wc-block-cart-item__total .wc-block-components-product-price__value {
    font-family: var(--vv-display); font-weight: 900; font-size: 34px; line-height: 1; color: var(--vv-torch);
}
.wc-block-cart-item__remove-link {
    font-size: 11px !important; font-weight: 800 !important; color: var(--vv-ink-faint) !important;
    text-decoration: underline !important; text-transform: none !important;
}
.wc-block-cart-item__remove-link:hover { color: var(--vv-torch) !important; }

/* Quantity stepper */
.wc-block-components-quantity-selector {
    border: var(--vv-rule) solid var(--vv-ink) !important;
    background: var(--vv-white); max-width: 116px;
}
.wc-block-components-quantity-selector__input {
    font-family: var(--vv-mono) !important; font-size: 14px !important; font-weight: 700 !important;
    border-left: var(--vv-rule) solid var(--vv-ink) !important;
    border-right: var(--vv-rule) solid var(--vv-ink) !important;
    color: var(--vv-ink) !important;
}
.wc-block-components-quantity-selector__button {
    background: var(--vv-paper) !important; color: var(--vv-ink) !important;
    font-size: 16px !important; font-weight: 900 !important; width: 36px !important;
}
.wc-block-components-quantity-selector__button:hover { background: var(--vv-ink) !important; color: var(--vv-gold) !important; }

/* Summary rail header bar. The real class names differ between the two
   blocks — cart uses .wc-block-cart__totals-title, checkout uses
   .wc-block-components-checkout-order-summary__title. Verified in the DOM. */
.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title {
    background: var(--vv-ink);
    color: var(--vv-white) !important;
    font-family: var(--vv-display) !important;
    font-weight: 900 !important;
    font-size: 26px !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    text-transform: uppercase !important;
    margin: -20px -20px 18px !important;
    padding: 16px 20px !important;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.wc-block-components-checkout-order-summary__title-text {
    font-family: var(--vv-display); font-weight: 900; font-size: 26px;
    text-transform: uppercase; color: var(--vv-white); margin: 0;
}
.wc-block-components-checkout-order-summary__title-price { color: var(--vv-gold); font-family: var(--vv-display); font-weight: 900; }
.wc-block-components-checkout-order-summary__title-icon { color: var(--vv-gold); }

/* The proceed button lives OUTSIDE the summary block — give it room so it
   doesn't sit on top of the panel's hard shadow. */
.wc-block-cart__submit { margin-top: 24px !important; padding: 0 !important; }
.wc-block-cart__submit-container { padding: 0 !important; }
.wc-block-cart__submit-button { width: 100%; }

/* Totals + the big torch total */
.wc-block-components-totals-item { padding: 4px 0 !important; }
.wc-block-components-totals-item__label { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: #3d3d38 !important; }
.wc-block-components-totals-item__value { font-family: var(--vv-mono) !important; font-size: 13px !important; font-weight: 700 !important; }
.wc-block-components-totals-footer-item { border-top: var(--vv-rule) solid var(--vv-ink) !important; padding-top: 14px !important; margin-top: 8px; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: 12px !important; font-weight: 900 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--vv-ink) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--vv-display) !important; font-size: 40px !important; line-height: .9 !important; color: var(--vv-torch) !important;
}

/* ---- Checkout: each step becomes a numbered, ink-headed panel ---- */
.wc-block-checkout__main { counter-reset: vv-step; }
.wc-block-components-checkout-step {
    counter-increment: vv-step;
    background: var(--vv-white);
    border: var(--vv-rule) solid var(--vv-ink);
    padding: 0 !important;
    margin-bottom: 20px;
}
.wc-block-components-checkout-step__heading {
    background: var(--vv-ink); margin: 0 !important;
    padding: 13px 18px !important; display: flex; align-items: center; gap: 12px;
}
.wc-block-components-checkout-step__heading::before {
    content: counter( vv-step, decimal-leading-zero );
    font-family: var(--vv-display); font-weight: 900; font-size: 20px; line-height: 1; color: var(--vv-gold);
}
/* Extra specificity on purpose: the generic .wc-block-components-title rule
   further up also carries !important and would otherwise paint this ink-on-ink. */
.wc-block-components-checkout-step__heading .wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__heading .wc-block-components-title {
    font-size: 12px !important; font-weight: 900 !important; letter-spacing: .14em !important;
    text-transform: uppercase !important; color: var(--vv-white) !important; margin: 0 !important;
    font-family: var(--vv-body) !important;
}
.wc-block-components-checkout-step__heading-content,
.wc-block-components-checkout-step__description { color: var(--vv-sky-dim) !important; }
.wc-block-components-checkout-step__container { padding: 20px !important; }
.wc-block-components-checkout-step__content { padding: 0 !important; margin: 0 !important; }

/* Field labels sit above, uppercase, like the design */
.wc-block-components-text-input label,
.wc-block-components-combobox label {
    font-size: 10px !important; font-weight: 900 !important; letter-spacing: .14em !important;
    text-transform: uppercase !important; color: var(--vv-ink) !important;
}

/* Shipping + payment option cards.
   The radio input is position:absolute at left:16px, so the left padding has
   to clear it — a flat `padding: 14px` prints the label under the radio. */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
    border: var(--vv-rule) solid var(--vv-ink) !important;
    background: var(--vv-white) !important;
    margin-bottom: 12px !important;
    padding: 14px 14px 14px 46px !important;
}
.wc-block-components-radio-control__input { left: 16px !important; }

/* Payment methods nest: an accordion-option wrapper AROUND the radio label.
   Border only the wrapper, or you get a box inside a box. */
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
    border: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 0 0 32px !important;
    background: transparent !important;
}
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__input { left: 0 !important; }
.wc-block-components-radio-control-accordion-content {
    padding: 10px 0 0 32px !important;
    font-size: 12px; line-height: 1.5;
}
/* Checked accordion turns ink — its description has to come up with it. */
.wc-block-components-radio-control-accordion-option:has( input:checked ) .wc-block-components-radio-control-accordion-content,
.wc-block-components-radio-control-accordion-option:has( input:checked ) .wc-block-components-radio-control-accordion-content p {
    color: #b4b4ae !important;
}

/* Options sit side by side like the design's method cards. */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control,
.wc-block-components-checkout-step--payment-method .wc-block-components-radio-control {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px;
}
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option,
.wc-block-components-checkout-step--payment-method .wc-block-components-radio-control__option {
    margin-bottom: 0 !important;
}
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accordion-option:has( input:checked ) {
    background: var(--vv-ink) !important;
    border-color: var(--vv-torch) !important;
}
.wc-block-components-radio-control__option-checked .wc-block-components-radio-control__label,
.wc-block-components-radio-control-accordion-option:has( input:checked ) .wc-block-components-radio-control__label {
    color: var(--vv-gold) !important; font-weight: 900;
}
.wc-block-components-radio-control__option-checked .wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__option-checked .wc-block-components-radio-control__description,
.wc-block-components-radio-control-accordion-option:has( input:checked ) .wc-block-components-radio-control__description {
    color: #b4b4ae !important;
}
.wc-block-components-radio-control__label { font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.wc-block-components-radio-control__description { font-size: 11px; line-height: 1.4; color: var(--vv-ink-mute); }

/* Headings */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wp-block-woocommerce-cart h2,
.wc-block-components-order-summary__title {
    font-family: var(--vv-display) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .01em;
    color: var(--vv-ink) !important;
}
.wc-block-components-checkout-step__heading { margin-bottom: 6px; }
.wc-block-components-checkout-step__description { color: var(--vv-ink-mute); }

/* Table head / labels */
.wc-block-cart-items__header,
.wc-block-components-totals-item__label {
    font-family: var(--vv-body); font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; font-size: 11px; color: var(--vv-ink-mute);
}
.wc-block-cart-items__header { border-bottom: var(--vv-rule) solid var(--vv-ink) !important; }

/* Money */
.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount,
.wc-block-formatted-money-amount { font-family: var(--vv-display); font-weight: 900; letter-spacing: .01em; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 30px; color: var(--vv-torch);
}

/* Product names + thumbnails in the line items */
.wc-block-components-product-name { color: var(--vv-ink) !important; font-weight: 700; text-decoration: none; }
.wc-block-components-product-name:hover { color: var(--vv-torch) !important; }
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img { border: 2px solid var(--vv-ink); }

/* Form fields */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container,
.wc-block-components-combobox-control input,
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wp-block-woocommerce-checkout input[type="text"],
.wp-block-woocommerce-checkout input[type="email"],
.wp-block-woocommerce-checkout input[type="tel"],
.wp-block-woocommerce-checkout select {
    border: 2px solid #cfcabf !important;
    background: var(--vv-white) !important;
    font-family: var(--vv-body) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox-control input:focus,
.wp-block-woocommerce-checkout input:focus,
.wp-block-woocommerce-checkout select:focus {
    border-color: var(--vv-cobalt) !important;
    outline: 2px solid rgba(15,47,107,.25) !important;
    outline-offset: 0 !important;
}
.wc-block-components-checkbox__input[type="checkbox"] { border: 2px solid var(--vv-ink) !important; }
.wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--vv-torch) !important; }

/* Payment method rows */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option { border: 2px solid #cfcabf !important; margin-bottom: 8px; }
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option:has(input:checked) { border-color: var(--vv-cobalt) !important; }

/* Notices */
.wc-block-components-notice-banner { border-width: 2px !important; }
.wc-block-components-notice-banner.is-error { border-color: #b3261e !important; }
.wc-block-components-notice-banner.is-info { border-color: var(--vv-cobalt) !important; }

/* ---- Empty cart ----------------------------------------------------------
   Woo ships a sad-face icon and a plain product list here. Neither belongs in
   this brand, so the state gets the same furniture as the rest of the shop.
   ------------------------------------------------------------------------ */
.wp-block-woocommerce-empty-cart-block { padding-top: 8px; }

.wc-block-cart__empty-cart__title {
    font-family: var(--vv-display) !important;
    font-weight: 900 !important;
    font-size: clamp(32px, 4vw, 46px) !important;
    line-height: .9 !important;
    text-transform: uppercase !important;
    color: var(--vv-ink) !important;
    text-align: left !important;
    margin: 0 0 10px !important;
}
/* Woo draws the icon as a ::before on the title — off-brand, drop it. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before { display: none !important; }

.wp-block-woocommerce-empty-cart-block .wp-block-separator {
    border: 0 !important; border-top: var(--vv-rule) solid var(--vv-ink) !important;
    height: 0; margin: 26px 0 !important; opacity: 1 !important; width: 100%; max-width: none;
}
.wp-block-woocommerce-empty-cart-block .wp-block-separator::before,
.wp-block-woocommerce-empty-cart-block .wp-block-separator::after { content: none !important; }

.wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title) {
    font-family: var(--vv-display); font-weight: 900;
    font-size: clamp(28px, 3.4vw, 40px); line-height: .9;
    text-transform: uppercase; color: var(--vv-ink);
    text-align: left !important; margin: 0 0 20px !important;
}

/* The "New in store" grid — same card as the shop. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    list-style: none; margin: 0; padding: 0;
}
/* Woo sizes these for its own flex grid (inline-block + a width), so as grid
   items they shrink-wrap to their longest word instead of filling the column.
   Force them to stretch. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
    background: var(--vv-white);
    border: var(--vv-rule) solid var(--vv-ink);
    padding: 0 0 12px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    float: none !important;
    justify-self: stretch;
    text-align: left;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product > * { width: 100%; }
/* The image wrapper is a GRANDchild, so `> *` misses it and it keeps the
   300px intrinsic thumbnail width inside a 318px card. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img { width: 100% !important; max-width: 100% !important; }
/* Equal-height crops — the slabs have different aspect ratios and Woo's own
   `height:auto` wins over the shorthand rule above. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
    height: 230px !important; object-fit: cover !important; aspect-ratio: auto !important;
}
/* Block-level so the 12px side margins subtract from the width instead of
   adding to it and pushing the button past the card border. */
.wp-block-woocommerce-empty-cart-block .wp-block-button { display: block; width: auto; max-width: none; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product::before { display: none; }

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link { display: block; text-decoration: none; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image { margin: 0 !important; display: block; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
    width: 100%; height: 230px; object-fit: cover; display: block;
    border-bottom: var(--vv-rule) solid var(--vv-ink);
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
    font-family: var(--vv-body); font-size: 13px; font-weight: 700; line-height: 1.3;
    color: var(--vv-ink); padding: 12px 12px 0; margin: 0;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link:hover .wc-block-grid__product-title { color: var(--vv-torch); }

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
    font-family: var(--vv-display); font-weight: 900; font-size: 26px; line-height: 1;
    color: var(--vv-torch); padding: 9px 12px 0; margin: 0 0 auto;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price .wc-block-grid__product-onsale { display: none; }

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart { margin: 12px 12px 0 !important; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a {
    display: block; width: 100%; text-align: center;
    background: var(--vv-cobalt) !important; color: var(--vv-white) !important;
    border: 0 !important; border-radius: 0 !important;
    font-family: var(--vv-body) !important; font-size: 11px !important; font-weight: 900 !important;
    letter-spacing: .1em !important; text-transform: uppercase !important;
    padding: 11px !important; transition: background-color .15s;
    text-decoration: none !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a:hover { background: var(--vv-torch) !important; }

@media (max-width: 1200px) { .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  {
    .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: 1fr; }
    .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img { height: 280px; }
}

/* Order tracking form (classic shortcode on /track-your-order/) */
.woocommerce form.track_order .form-row { margin-bottom: 14px; }
.woocommerce form.track_order input[type="text"] {
    border: 2px solid #cfcabf; padding: 13px 14px; width: 100%;
    font-family: var(--vv-body); font-size: 15px; background: var(--vv-white);
}
.woocommerce form.track_order input[type="text"]:focus { border-color: var(--vv-cobalt); outline: none; }
.woocommerce form.track_order label { font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 6px; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--vv-torch); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--vv-torch); }

/* =========================================================================
   19b. PRODUCT PAGE ("Victory Floor" PDP) + INQUIRY / OFFER MODALS

   The vv-inq-* rules skin markup that comes from the `vv-inquiry` PLUGIN.
   They live here, not in the plugin, so the brand look stays in one file and
   a plugin update never overwrites styling. The plugin ships structural CSS
   only (positioning, stacking, scroll-lock).
   ========================================================================= */

/* Shared chips ----------------------------------------------------------- */
.vv-chip {
    font-size: 11px; font-weight: 900; letter-spacing: .1em;
    padding: 7px 12px; white-space: nowrap;
}
.vv-chip--gold    { color: var(--vv-cobalt); background: var(--vv-gold); }
.vv-chip--cobalt  { color: var(--vv-white);  background: var(--vv-cobalt); }
.vv-chip--outline { color: var(--vv-ink);    border: 2px solid var(--vv-ink); padding: 5px 10px; }
.vv-chip--torch   { color: var(--vv-torch);  border: 2px solid var(--vv-torch); padding: 5px 10px; }

/* Breadcrumb ------------------------------------------------------------- */
.vv-pdp-crumb { background: var(--vv-ink); }
.vv-pdp-crumb__inner {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding-top: 16px; padding-bottom: 16px;
    font-family: var(--vv-mono); font-size: 10px; letter-spacing: .12em;
    color: var(--vv-ink-faint);
}
.vv-pdp-crumb a { color: var(--vv-ink-faint); }
.vv-pdp-crumb a:hover { color: var(--vv-gold); }
.vv-pdp-crumb__here { color: var(--vv-gold); }

/* Two-column shell ------------------------------------------------------- */
.vv-pdp {
    display: grid; grid-template-columns: 1fr 1fr;
    max-width: var(--vv-wrap); margin-inline: auto;
    border-bottom: var(--vv-rule) solid var(--vv-ink);
}

/* Gallery ---------------------------------------------------------------- */
.vv-pdp__gallery {
    position: relative; overflow: hidden;
    background: var(--vv-cobalt);
    border-right: var(--vv-rule) solid var(--vv-ink);
    padding: 36px var(--vv-pad-x);
    display: flex; flex-direction: column; gap: 16px;
}
.vv-pdp__stripes {
    position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 30px, transparent 30px 60px);
}
.vv-pdp__gallerytop {
    position: relative; display: flex; align-items: center;
    justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.vv-pdp__gradechip { padding: 6px 11px; font-size: 10px; letter-spacing: .16em; }
.vv-pdp__certline {
    font-family: var(--vv-mono); font-size: 10px; letter-spacing: .1em; color: var(--vv-sky-dim);
}
/* flex:1 + min-height, NOT a fixed height: the buy rail is usually the taller
   column, and a fixed-height stage strands a large empty cobalt block under the
   photo. Growing to fill keeps the slab optically centred in its column. */
.vv-pdp__stage {
    position: relative; margin: 0; flex: 1;
    background: var(--vv-cobalt-dk); border: var(--vv-rule) solid var(--vv-ink);
    min-height: 560px; display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
/* contain, not cover — a slab photo must never be cropped. */
.vv-pdp__stageimg { width: 100%; height: 100%; object-fit: contain; }
.vv-pdp__thumbs { position: relative; display: flex; gap: 12px; flex-wrap: wrap; }
.vv-pdp__thumb {
    width: 96px; height: 120px; padding: 0; cursor: pointer; overflow: hidden;
    background: var(--vv-cobalt-dk); border: var(--vv-rule) solid var(--vv-ink);
}
.vv-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vv-pdp__thumb.is-active { border-color: var(--vv-gold); }
.vv-pdp__gallerynotes {
    position: relative; display: flex; gap: 20px; flex-wrap: wrap; padding-top: 6px;
    font-size: 11px; font-weight: 700; color: var(--vv-sky-mid);
}

/* Buy rail --------------------------------------------------------------- */
.vv-pdp__rail {
    background: var(--vv-paper);
    padding: 36px var(--vv-pad-x) 40px;
    display: flex; flex-direction: column; gap: 24px;
    min-width: 0;
}
.vv-pdp__head { display: flex; flex-direction: column; gap: 10px; }
.vv-pdp__title {
    font-family: var(--vv-display); font-size: 62px; line-height: .86;
    text-transform: uppercase; overflow-wrap: anywhere;
}
.vv-pdp__chips { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }

/* Price + actions block */
.vv-pdp__buy {
    background: var(--vv-ink); border: var(--vv-rule) solid var(--vv-ink);
    padding: 26px; display: flex; flex-direction: column; gap: 18px;
}
.vv-pdp__pricerow {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.vv-pdp__pricecol, .vv-pdp__compcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vv-pdp__compcol { align-items: flex-end; gap: 4px; }
.vv-pdp__pricelabel, .vv-pdp__complabel {
    font-size: 10px; font-weight: 900; letter-spacing: .18em; color: var(--vv-ink-faint);
}
.vv-pdp__complabel { font-family: var(--vv-mono); letter-spacing: .1em; }
.vv-pdp__price, .vv-pdp__price .amount, .vv-pdp__price bdi {
    font-family: var(--vv-display); font-weight: 900; font-size: 52px; line-height: .9;
    color: var(--vv-gold);
}
.vv-pdp__price del { display: none; }
.vv-pdp__comp, .vv-pdp__comp .amount, .vv-pdp__comp bdi {
    font-family: var(--vv-mono); font-size: 15px; font-weight: 700; color: var(--vv-white);
}
.vv-pdp__trend { font-family: var(--vv-mono); font-size: 10px; color: #7bd88f; }
.vv-pdp__blurb { font-size: 13px; line-height: 1.6; color: #b4b4ae; }
.vv-pdp__activity { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; color: var(--vv-ink-faint); }
.vv-pdp__dot {
    width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #7bd88f;
    animation: vvPulseDot 1.6s ease-in-out infinite;
}
@keyframes vvPulseDot { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .vv-pdp__dot { animation: none; } }

/* Trust grid */
.vv-pdp__trust { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vv-pdp__trustcard {
    background: var(--vv-white); border: var(--vv-rule) solid var(--vv-ink);
    padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.vv-pdp__trusthead { font-size: 12px; font-weight: 800; }
.vv-pdp__trustbody { font-size: 11px; line-height: 1.45; color: var(--vv-ink-mute); }

/* Tabs */
.vv-pdp__tabs { border: var(--vv-rule) solid var(--vv-ink); background: var(--vv-white); }
.vv-pdp__tablist { display: flex; border-bottom: var(--vv-rule) solid var(--vv-ink); }
.vv-pdp__tab {
    flex: 1; padding: 14px 10px; cursor: pointer; border: 0;
    font-size: 11px; font-weight: 900; letter-spacing: .1em;
    color: var(--vv-ink); background: var(--vv-white);
}
.vv-pdp__tab.is-active { color: var(--vv-gold); background: var(--vv-ink); }
.vv-pdp__panels { padding: 20px; }
.vv-pdp__panel { display: none; flex-direction: column; gap: 14px; }
.vv-pdp__panel.is-active { display: flex; }
.vv-pdp__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 0; }
.vv-pdp__spec {
    display: flex; justify-content: space-between; gap: 10px;
    border-bottom: 1px solid #e3ddd2; padding-bottom: 8px;
}
.vv-pdp__spec dt { font-size: 12px; color: var(--vv-ink-mute); }
.vv-pdp__spec dd { margin: 0; font-size: 12px; font-weight: 700; text-align: right; }
.vv-pdp__desc, .vv-pdp__desc p { font-size: 13px; line-height: 1.65; color: #3d3d38; }
.vv-pdp__desc p + p { margin-top: 10px; }
.vv-pdp__comps { display: flex; flex-direction: column; }
.vv-pdp__comprow {
    display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
    padding: 11px 0; border-bottom: 1px solid #e3ddd2;
}
.vv-pdp__compvenue { font-size: 12px; font-weight: 700; }
.vv-pdp__compdate  { font-family: var(--vv-mono); font-size: 11px; color: var(--vv-ink-mute); }
.vv-pdp__compprice { font-family: var(--vv-mono); font-size: 13px; font-weight: 700; color: var(--vv-torch); }
.vv-pdp__compnote  { font-size: 11px; color: var(--vv-ink-faint); padding-top: 10px; }
.vv-pdp__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vv-pdp__step { display: flex; gap: 12px; align-items: flex-start; }
.vv-pdp__stepnum { font-family: var(--vv-display); font-weight: 900; font-size: 22px; line-height: 1; color: var(--vv-torch); }
.vv-pdp__steptext { font-size: 13px; line-height: 1.6; color: #3d3d38; }

/* Seller strip */
.vv-pdp__seller {
    display: flex; align-items: center; gap: 14px;
    background: var(--vv-cobalt); border: var(--vv-rule) solid var(--vv-ink); padding: 16px 18px;
}
.vv-pdp__sellermark {
    width: 42px; height: 42px; flex: 0 0 42px; background: var(--vv-torch);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--vv-display); font-weight: 900; font-size: 20px; color: var(--vv-cobalt);
}
.vv-pdp__sellertext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vv-pdp__sellerline { font-size: 12px; font-weight: 800; color: var(--vv-white); }
.vv-pdp__sellermeta { font-size: 11px; color: var(--vv-sky-dim); }

/* Related ---------------------------------------------------------------- */
.vv-related { padding-top: 48px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 22px; }
.vv-related__head { display: flex; align-items: center; gap: 16px; }
.vv-related__title { font-family: var(--vv-display); font-size: 44px; line-height: .9; text-transform: uppercase; }
.vv-related__rule { flex: 1; height: var(--vv-rule); background: var(--vv-ink); }
.vv-related__all { font-size: 11px; font-weight: 900; letter-spacing: .12em; color: var(--vv-ink); white-space: nowrap; }
.vv-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vv-related__card {
    background: var(--vv-white); border: var(--vv-rule) solid var(--vv-ink);
    display: flex; flex-direction: column;
}
.vv-related__media { display: block; height: 230px; overflow: hidden; background: #e6e2da; }
.vv-related__media img { width: 100%; height: 100%; object-fit: cover; }
.vv-related__body {
    padding: 12px; display: flex; flex-direction: column; gap: 9px;
    border-top: var(--vv-rule) solid var(--vv-ink); flex: 1;
}
.vv-related__set { font-family: var(--vv-mono); font-size: 9px; letter-spacing: .1em; color: var(--vv-ink-faint); }
.vv-related__name { font-size: 13px; font-weight: 700; line-height: 1.3; }
.vv-related__name a { color: var(--vv-ink); }
.vv-related__name a:hover { color: var(--vv-torch); }
.vv-related__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; }
.vv-related__price, .vv-related__price .amount, .vv-related__price bdi {
    font-family: var(--vv-display); font-weight: 900; font-size: 24px; line-height: 1; color: var(--vv-torch);
}
.vv-related__price .vv-price--on-request { color: var(--vv-cobalt); font-size: 20px; }
.vv-related__grade { font-family: var(--vv-mono); font-size: 10px; color: var(--vv-ink-mute); }
.vv-related__cta {
    display: block; text-align: center; padding: 10px; cursor: pointer;
    font-size: 11px; font-weight: 900; letter-spacing: .1em;
    color: var(--vv-white); background: var(--vv-cobalt);
}
.vv-related__cta:hover { background: var(--vv-torch); color: var(--vv-white); }
.vv-related__cta--out { background: var(--vv-ink-faint); cursor: default; }

/* Footer CTA strip ------------------------------------------------------- */
.vv-pdp-cta { background: var(--vv-ink); }
.vv-pdp-cta__inner {
    padding-top: 30px; padding-bottom: 30px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.vv-pdp-cta__title {
    font-family: var(--vv-display); font-size: 30px; line-height: 1;
    color: var(--vv-white); text-transform: uppercase;
}
.vv-pdp-cta__accent { color: var(--vv-gold); }

/* Inquiry buttons (plugin markup) ---------------------------------------- */
.vv-inq-btn {
    text-align: center; padding: 17px 20px;
    font-size: 13px; font-weight: 900; letter-spacing: .1em;
    font-family: var(--vv-body); text-transform: uppercase;
    transition: background .15s ease, color .15s ease;
}
.vv-inq-btn--request { color: var(--vv-white); background: var(--vv-torch); }
.vv-inq-btn--request:hover { background: var(--vv-gold); color: var(--vv-cobalt); }
.vv-inq-btn--offer   { color: var(--vv-ink); background: var(--vv-gold); }
.vv-inq-btn--offer:hover { background: var(--vv-white); }
.vv-pdp-cta__actions { flex: 0 0 auto; }
.vv-pdp-cta__actions .vv-inq-btn { flex: 0 0 auto; padding: 14px 22px; font-size: 12px; }

/* Inquiry modals (plugin markup) ----------------------------------------- */
.vv-inq-modal__dialog {
    background: var(--vv-paper); border: var(--vv-rule) solid var(--vv-ink);
    box-shadow: 16px 16px 0 var(--vv-ink);
}
.vv-inq-modal[data-vv-inq-modal="offer"] .vv-inq-modal__dialog { box-shadow: 16px 16px 0 var(--vv-torch); }
.vv-inq-modal__head { background: var(--vv-ink); padding: 16px 22px; }
.vv-inq-modal__title {
    font-family: var(--vv-display); font-weight: 900; font-size: 26px; line-height: 1;
    color: var(--vv-white); text-transform: uppercase;
}
.vv-inq-modal__close { font-size: 14px; font-weight: 900; color: var(--vv-gold); padding: 2px 6px; }
.vv-inq-modal__close:hover { color: var(--vv-white); }
.vv-inq-modal__body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 18px; }
.vv-inq-card { background: var(--vv-white); border: var(--vv-rule) solid var(--vv-ink); padding: 12px; }
.vv-inq-card__name { font-size: 13px; font-weight: 800; }
.vv-inq-card__meta { font-family: var(--vv-mono); font-size: 10px; color: var(--vv-ink-mute); }
.vv-inq-pick {
    font-family: var(--vv-mono); font-size: 12px; font-weight: 700;
    padding: 9px 13px; border: 2px solid var(--vv-ink); color: var(--vv-ink); background: transparent;
}
.vv-inq-pick.is-selected { background: var(--vv-ink); color: var(--vv-gold); }
.vv-inq-hint { font-size: 12px; font-weight: 700; color: var(--vv-ink-mute); }
.vv-inq-hint[data-state="low"]  { color: #c23b12; }
.vv-inq-hint[data-state="good"] { color: #1f7a3d; }
.vv-inq-smallprint { font-size: 11px; line-height: 1.5; color: var(--vv-ink-mute); }

/* Fluent Forms fields inside the modal. Fluent's own wrapper is
   form.fluent_form_{id} — .ff_form_wrap matches nothing in v6.x+. */
.vv-inq-form .ff-el-group { margin-bottom: 14px; }
.vv-inq-form .ff-el-input--label label {
    font-size: 11px; font-weight: 900; letter-spacing: .14em;
    color: var(--vv-ink); text-transform: uppercase;
}
.vv-inq-form input[type="text"],
.vv-inq-form input[type="email"],
.vv-inq-form input[type="number"],
.vv-inq-form textarea {
    width: 100%; border: var(--vv-rule) solid var(--vv-ink); border-radius: 0;
    background: var(--vv-white); padding: 14px;
    font-family: var(--vv-body); font-size: 14px; font-weight: 600; color: var(--vv-ink);
}
.vv-inq-form input:focus, .vv-inq-form textarea:focus {
    outline: 3px solid var(--vv-torch); outline-offset: -3px;
}
/* Fluent renders a prefixed number field as
   .ff_input-group > .ff_input-group-prepend + input (a bootstrap-style group).
   Make it the design's black "$" box welded to the left of the input. */
.vv-inq-form .ff_input-group { display: flex; align-items: stretch; border: var(--vv-rule) solid var(--vv-ink); background: var(--vv-white); }
.vv-inq-form .ff_input-group-prepend { display: flex; }
.vv-inq-form .ff_input-group-text {
    display: flex; align-items: center; padding: 0 16px;
    background: var(--vv-ink); color: var(--vv-gold);
    font-family: var(--vv-display); font-weight: 900; font-size: 30px; line-height: 1;
}
.vv-inq-form .ff_input-group .vv-inq-offer-input { border: 0; flex: 1; min-width: 0; }
.vv-inq-form .vv-inq-offer-input {
    font-family: var(--vv-display); font-weight: 900; font-size: 32px;
}
/* Chips and hint are moved into this group by JS, so they need their own spacing. */
.vv-inq-form .vv-inq-offer-field .vv-inq-picks { margin-top: 10px; }
.vv-inq-form .vv-inq-offer-field .vv-inq-hint  { display: block; margin-top: 8px; }
/* Hide the number spinner — it fights the 32px display type. */
.vv-inq-form .vv-inq-offer-input::-webkit-outer-spin-button,
.vv-inq-form .vv-inq-offer-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vv-inq-form .vv-inq-offer-input { -moz-appearance: textfield; }
.vv-inq-form .ff-btn-submit,
.vv-inq-form button[type="submit"] {
    width: 100%; border: 0; border-radius: 0; cursor: pointer;
    background: var(--vv-torch); color: var(--vv-white);
    font-family: var(--vv-body); font-size: 13px; font-weight: 900; letter-spacing: .1em;
    padding: 17px; text-transform: uppercase;
}
.vv-inq-form .ff-btn-submit:hover, .vv-inq-form button[type="submit"]:hover {
    background: var(--vv-gold); color: var(--vv-cobalt);
}
.vv-inq-form .error, .vv-inq-form .text-danger, .vv-inq-form .ff-el-is-error .error {
    font-size: 11px; font-weight: 700; color: #c23b12;
}
.vv-inq-success { display: flex; flex-direction: column; gap: 12px; }
.vv-inq-success__eyebrow { font-size: 11px; font-weight: 900; letter-spacing: .18em; color: var(--vv-torch); }
.vv-inq-success__head {
    font-family: var(--vv-display); font-weight: 900; font-size: 38px; line-height: .92;
    text-transform: uppercase;
}

/* =========================================================================
   20. RESPONSIVE
   ========================================================================= */
@media (max-width: 1200px) {
    .vv-products, .vv-products--shop { grid-template-columns: repeat(3, 1fr); }
    .vv-cats     { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    .vv-shophero__blurb { text-align: left; }
}

@media (max-width: 1024px) {
    .vv-contact { grid-template-columns: 1fr; }

    .wc-block-components-sidebar-layout { grid-template-columns: 1fr; }
    .wp-block-woocommerce-cart-order-summary-block,
    .wp-block-woocommerce-checkout-order-summary-block { box-shadow: 6px 6px 0 var(--vv-ink); }

    .vv-nav { display: none; }
    .vv-search { display: none; }
    .vv-burger { display: inline-flex; }
    .vv-header__inner { gap: 16px; }

    .vv-hero__inner  { grid-template-columns: 1fr; gap: 36px; padding-top: 48px; padding-bottom: 44px; }
    .vv-hero__lede   { max-width: 560px; }
    .vv-hero__ring   { right: -180px; top: -200px; }

    .vv-statbar__inner { grid-template-columns: repeat(2, 1fr); }
    .vv-stat:nth-child(2) { border-right: 0; }
    .vv-stat:nth-child(1), .vv-stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.12); }

    .vv-breaks__inner { grid-template-columns: 1fr; gap: 34px; padding-top: 48px; padding-bottom: 48px; }
    .vv-spotlight     { grid-template-columns: 1fr; }
    .vv-footer__cols  { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 900px) {
    .vv-head__note { text-align: left; }
    .vv-steps   { grid-template-columns: 1fr; }
    .vv-reviews { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
    .vv-products, .vv-products--shop { grid-template-columns: repeat(2, 1fr); }
    .vv-product__media { height: 210px; }
    .vv-panel--paper { flex-direction: column; align-items: flex-start; }
    .vv-panel__shot  { flex: 0 0 auto; width: 100%; height: 260px; }
    .vv-signup__inner { gap: 26px; }
    .vv-signup__form  { width: 100%; }
    .vv-signup__form input[type="email"] { min-width: 0; }
}

@media (max-width: 700px) {
    .vv-cohead__ssl { display: none; }
    .vv-flowstep { padding-left: 10px; padding-right: 10px; gap: 0; flex-direction: column; align-items: flex-start; }
    .vv-flowstep__l { font-size: 9px; letter-spacing: .06em; }
    .vv-flowstep__n { font-size: 16px; }

    /* Hand the small-screen row layout back to WooCommerce — it already has a
       working two-column arrangement, and our desktop grid fights it. We keep
       only the card chrome. */
    .wc-block-cart-items__row { display: table-row !important; grid-template-columns: none !important; padding: 0 !important; }
    .wc-block-cart-items__row td { padding: 14px 0 !important; }
    .wc-block-cart-item__image { width: 88px !important; padding-right: 14px !important; }
    .wc-block-cart-item__image img { height: 118px; }
    .wc-block-cart-item__total .wc-block-components-product-price__value { font-size: 26px; }
    /* Stay a row and wrap instead: in a column flex parent, `flex:1` on the
       track sizes its HEIGHT and collapses the bar to 0px. */
    .vv-shipbar { flex-wrap: wrap; gap: 10px; }
    .vv-shipbar__label { white-space: normal; flex: 1 1 100%; }
    .vv-shipbar__track { flex: 1 1 100%; height: 10px; }
}

@media (max-width: 560px) {
    .vv-wordmark { font-size: 21px; }
    .vv-logo__mark span { font-size: 19px; }
    .vv-logo__mark { padding: 6px 9px 4px; }
    .vv-cart { padding: 8px 11px; }
    .vv-cart__label { font-size: 11px; }

    .vv-statbar__inner { grid-template-columns: 1fr; }
    .vv-stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); padding-left: var(--vv-pad-x); padding-right: var(--vv-pad-x); }
    .vv-stat:last-child { border-bottom: 0; }

    .vv-cats     { grid-template-columns: 1fr; }
    .vv-products, .vv-products--shop { grid-template-columns: 1fr; }
    .vv-product__media { height: 300px; }

    .vv-breaks__grid { grid-template-columns: 1fr; }
    .vv-minstats     { grid-template-columns: 1fr; }
    .vv-footer__cols { grid-template-columns: 1fr; }
    /* Stays absolute — as a static flex item it becomes a sibling of the
       card image, steals width, and runs off the right edge. */
    .vv-hero__tag    { bottom: 0; padding: 8px 11px; }
    .vv-hero__tag span:nth-child(1) { font-size: 9px; }
    .vv-hero__tag span:nth-child(2) { font-size: 12px; }
    .vv-hero__tag span:nth-child(3) { font-size: 22px; }

    .vv-section  { padding-top: 44px; padding-bottom: 44px; }
    .vv-btnrow   { gap: 10px; }
    .vv-btn      { font-size: 12px; padding: 14px 20px; }
    .vv-btn--outline-white, .vv-btn--outline-veil, .vv-btn--outline-ink { padding: 11px 18px; }
}

/* --- Product page (Victory Floor PDP) --------------------------------- */
@media (max-width: 1100px) {
    .vv-related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
    /* Single column: the gallery stacks above the buy rail, and the vertical
       rule between them becomes a horizontal one. */
    .vv-pdp { grid-template-columns: 1fr; }
    .vv-pdp__gallery {
        border-right: 0;
        border-bottom: var(--vv-rule) solid var(--vv-ink);
    }
    .vv-pdp__stage { min-height: 420px; }
    .vv-pdp__title { font-size: 48px; }
    .vv-pdp__price, .vv-pdp__price .amount, .vv-pdp__price bdi { font-size: 44px; }
    .vv-related__title { font-size: 34px; }
}

@media (max-width: 600px) {
    .vv-pdp__gallery, .vv-pdp__rail { padding-top: 26px; padding-bottom: 28px; }
    .vv-pdp__stage { min-height: 320px; }
    .vv-pdp__title { font-size: 38px; }
    .vv-pdp__thumb { width: 72px; height: 92px; }

    /* The price and the comp must not sit side by side at 375px — the comp
       column pushes the price off its own line. */
    .vv-pdp__pricerow { flex-direction: column; align-items: flex-start; }
    .vv-pdp__compcol  { align-items: flex-start; }
    .vv-pdp__price, .vv-pdp__price .amount, .vv-pdp__price bdi { font-size: 38px; }

    .vv-pdp__buy   { padding: 20px; }
    .vv-pdp__trust { grid-template-columns: 1fr; }
    .vv-pdp__specs { grid-template-columns: 1fr; }

    /* Stacked buttons — two 13px uppercase labels will not fit side by side. */
    .vv-inq-actions { flex-direction: column; }
    .vv-inq-btn     { width: 100%; }

    /* Tab labels wrap rather than overflow their 3-up row. */
    .vv-pdp__tab { font-size: 10px; letter-spacing: .06em; padding: 12px 6px; }

    .vv-pdp__comprow {
        grid-template-columns: 1fr auto;
        row-gap: 4px;
    }
    .vv-pdp__compdate { grid-column: 1; }
    .vv-pdp__compprice { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

    .vv-related__grid { grid-template-columns: 1fr; }
    .vv-related__head { flex-wrap: wrap; }
    .vv-related__title { font-size: 28px; }
    .vv-pdp-cta__title { font-size: 24px; }
    .vv-pdp-cta__actions { width: 100%; }

    /* Full-bleed modal on a phone; the 16px shadow would cause overflow. */
    .vv-inq-modal { padding: 0; }
    .vv-inq-modal__dialog { box-shadow: none; min-height: 100%; max-width: none; }
    .vv-inq-modal[data-vv-inq-modal="offer"] .vv-inq-modal__dialog { box-shadow: none; }
    .vv-inq-modal__body { padding: 18px; }
}