/* ==========================================================================
   volt-home — "Modern Precision" home-appliance brand layer over
   modern-retail.

   Ported from the Google Stitch export
   (docs/templates/pending/stitch_42_volthome_e_commerce_storefront — the
   "VoltHome Modern Appliance Retail" DESIGN.md is the design-system source).
   The design system: an Appliance-White canvas (#f8f8f7 — "more premium and
   less sterile than pure white") carrying pure-white 1px-bordered panels,
   Graphite (#26282b) for all typography and iconography, and Energetic Teal
   reserved strictly for primary actions, prices, category labels and
   promotional bands. Depth comes from tonal layers plus one tight neutral
   shadow (0 4px 12px rgba(38,40,43,.08)), never from heavy elevation.
   "Precision Corners": 8px on buttons / inputs / cards, 12px on promo and
   warranty panels, full pills for status badges. Poppins 600 headlines over
   Source Sans 3 for body copy, spec tables and the bold price treatment.

   This stylesheet has two jobs:
     (a) style volt-home's OWN sections (vh-* — the light-scrim hero, promo
         captions, the featured/arrivals header rows, the full-bleed teal
         sale-banner, the warranty cards, the icon category tiles, the journal
         cards and the centred newsletter);
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the appliance-white ramp and re-shaping cards,
         buttons and forms to the 8px language. That single token block is the
         only reason shop / PDP / cart / checkout / account / blog follow the
         palette without a page override.

   Everything is scoped under `body.vh-theme` and reads the 5 customizer
   tokens (--bs-primary, --bs-primary-rgb, --ll-accent, --ll-font-headings,
   --ll-font-body, --ll-btn-radius) with theme.json-default fallbacks, so the
   customizer + live preview keep working: change the primary colour and every
   teal surface follows.

   Contrast decisions (measured):
     - primary_color is #006768 — the teal the export ACTUALLY renders
       (tailwind `primary` / `bg-primary`: the hero CTA, the announce bar, the
       sale band, every price and category label). 6.69:1 on white, so it is
       safe both as small text and as a fill under a white label. DESIGN.md's
       prose quotes a lighter "Energetic Teal #0F8B8D"; that lighter teal is
       only 4.12:1 on white, which passes for UI/large text but FAILS AA for
       body copy — so it ships as accent_color and is used ONLY for
       decoration: the hero chip tint, the 30px trust icons, the focus ring
       and the filled wishlist heart. Every teal TEXT role routes to
       --vh-teal.
     - The sale band's button is solid Graphite with a white label (13.1:1),
       matching the export's bg-inverse-surface treatment rather than a white
       cut-out.
   ========================================================================== */

body.vh-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --vh-teal: var(--bs-primary, #006768);
    --vh-teal-rgb: var(--bs-primary-rgb, 0, 103, 104);
    --vh-accent: var(--ll-accent, #0f8b8d);
    --vh-radius: var(--ll-btn-radius, 0.5rem);
    --vh-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --vh-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Derived brand tints (track the customizer tokens) */
    --vh-teal-deep: #004d4e; /* fallback for no color-mix */
    --vh-teal-deep: color-mix(in srgb, var(--vh-teal) 82%, #000d0d); /* button hover */
    --vh-chip-fill: #e7f2f2; /* fallback for no color-mix */
    --vh-chip-fill: color-mix(in srgb, var(--vh-accent) 12%, #ffffff); /* hero chip / promo pill */

    /* Modern Precision palette (DESIGN.md prose + the export's surface ramp).
       Canvas / surfaces / ink are LITERALS by design (CLAUDE.md: never bind
       structural ink to a customizer token — there is no "ink" or "canvas"
       slot in the 5-token contract). */
    --vh-canvas: #f8f8f7;      /* Appliance White — page background */
    --vh-white: #ffffff;       /* surface-container-lowest — cards, header, panels */
    --vh-band: #f3f4f3;        /* surface-container-low — Season Bestsellers band */
    --vh-band-deep: #eeeeed;   /* surface-container — Journal band, icon wells */
    --vh-fill: #e8e8e7;        /* surface-container-high — hover fills */
    --vh-ink: #26282b;         /* Graphite — all typography + iconography */
    --vh-muted: #3d4949;       /* on-surface-variant — secondary copy (9.34:1) */
    --vh-soft: #6d7979;        /* outline — tertiary copy / placeholders (4.51:1) */
    --vh-line: #e2e2e2;        /* surface-variant — hairline borders */
    --vh-line-strong: #bdc9c9; /* outline-variant — visible keylines */
    --vh-graphite-deep: #2f3130; /* inverse-surface — footer + sale-band button */

    /* Shape + depth — Precision Corners, tonal layers, one tight shadow */
    --vh-radius-lg: 0.75rem;   /* promo / warranty / journal / category panels */
    --vh-shadow-sm: 0 1px 3px rgba(38, 40, 43, 0.06);
    --vh-shadow: 0 4px 12px rgba(38, 40, 43, 0.08); /* DESIGN.md Level 2 */
    --vh-shadow-lg: 0 10px 24px rgba(38, 40, 43, 0.12);

    /* Re-point the inherited base neutrals at the appliance-white ramp so
       every inherited mr-* surface (bands, borders, fills, muted text, card
       radius) follows this palette on every page. */
    --mr-ink: var(--vh-ink);
    --mr-muted: var(--vh-muted);
    --mr-soft: var(--vh-soft);
    --mr-surface: var(--vh-white);
    --mr-band: var(--vh-band-deep);
    --mr-band-alt: var(--vh-band);
    --mr-fill: var(--vh-fill);
    --mr-border: var(--vh-line);
    --mr-border-strong: var(--vh-line-strong);
    --mr-radius: var(--vh-radius);
    --mr-gold: #ab6136; /* tertiary-container — review stars */
    --mr-shadow: var(--vh-shadow);

    /* Stop bare prose links rendering Bootstrap-blue WITHOUT a bare-`a` rule
       (which out-specifies .mr-btn--primary's white label and would blank out
       the hero CTA — see the theme-factory gotchas). */
    --bs-link-color-rgb: var(--vh-teal-rgb);
    --bs-link-hover-color-rgb: var(--vh-teal-rgb);

    background-color: var(--vh-canvas);
    color: var(--vh-ink);
    font-family: var(--vh-font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Typography — Poppins 600 structural headings, Source Sans 3 for everything
   data-shaped (DESIGN.md "Typography").
   -------------------------------------------------------------------------- */
body.vh-theme h1,
body.vh-theme h2,
body.vh-theme h3,
body.vh-theme h4,
body.vh-theme h5,
body.vh-theme h6,
body.vh-theme .mr-display {
    font-family: var(--vh-font-head);
    font-weight: 600;
    color: var(--vh-ink);
    letter-spacing: -0.01em;
}

body.vh-theme .mr-display {
    font-size: clamp(1.6rem, 2.6vw, 2rem); /* DESIGN.md headline-lg 32px */
    line-height: 1.25;
}

body.vh-theme .mr-headline {
    font-family: var(--vh-font-head);
    font-size: clamp(1.25rem, 2vw, 1.5rem); /* headline-md 24px */
    font-weight: 600;
}

/* Eyebrows / journal category labels — the export inks these `text-primary`
   (the base points them at --ll-accent, which here is the lighter decorative
   teal and too weak for 12px text). */
body.vh-theme .mr-eyebrow {
    font-family: var(--vh-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em; /* DESIGN.md label-sm */
    text-transform: uppercase;
    color: var(--vh-teal);
}

/* Teal pill chip ("SUMMER-READY") — DESIGN.md: badges take a full pill radius
   so they read as status, not as a button. Pale accent tint + deep teal label
   (6.2:1 on the tint). */
body.vh-theme .vh-chip {
    display: inline-block;
    background: var(--vh-chip-fill);
    color: var(--vh-teal);
    font-family: var(--vh-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
}

/* The quiet teal "View All" / "Read All Articles" link used in every section
   header row. */
body.vh-theme .vh-link {
    font-family: var(--vh-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--vh-teal);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

body.vh-theme .vh-link:hover {
    color: var(--vh-teal-deep);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Buttons & form controls — solid teal primaries, graphite outlines, 8px
   Precision Corners (DESIGN.md "Components").
   -------------------------------------------------------------------------- */
body.vh-theme .mr-btn {
    font-family: var(--vh-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: none;
    border-radius: var(--vh-radius);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Re-assert the white label: the base rule is only specificity (0,1,0), so
   any anchor-colour rule would otherwise repaint it (see gotchas). */
body.vh-theme .mr-btn--primary,
body.vh-theme .mr-btn--primary:hover,
body.vh-theme .mr-btn--primary:focus {
    color: #fff;
}

body.vh-theme .mr-btn--primary {
    background-color: var(--vh-teal);
    border-color: var(--vh-teal);
}

body.vh-theme .mr-btn--primary:hover,
body.vh-theme .mr-btn--primary:focus {
    background-color: var(--vh-teal-deep);
    border-color: var(--vh-teal-deep);
    filter: none;
}

/* Hero secondary ("Shop Coolers") — the export's 1px graphite outline. */
body.vh-theme .vh-btn-outline {
    border: 1px solid var(--vh-line-strong);
    color: var(--vh-ink);
    background: var(--vh-white);
}

body.vh-theme .vh-btn-outline:hover {
    background: var(--vh-fill);
    border-color: var(--vh-soft);
    color: var(--vh-ink);
}

body.vh-theme .mr-btn--outline {
    border-color: var(--vh-teal);
    color: var(--vh-teal);
}

body.vh-theme .mr-btn--outline:hover {
    background-color: var(--vh-teal);
    color: #fff;
}

body.vh-theme .mr-btn--light {
    background-color: #fff;
    color: var(--vh-teal);
}

body.vh-theme .mr-btn--light:hover {
    background-color: var(--vh-band);
    color: var(--vh-teal-deep);
}

/* DESIGN.md inputs: 1px graphite-tint border, 8px radius, teal on focus. */
body.vh-theme .form-control,
body.vh-theme .form-select {
    border: 1px solid var(--vh-line-strong);
    border-radius: var(--vh-radius);
    background-color: var(--vh-white);
    color: var(--vh-ink);
}

/* NEVER a padding shorthand here: Bootstrap draws the caret as a background
   image and reserves the right gutter for it (recurring platform bug). */
body.vh-theme .form-select {
    padding-inline-end: 2.25rem;
}

body.vh-theme .form-control::placeholder {
    color: var(--vh-soft);
}

body.vh-theme .form-control:focus,
body.vh-theme .form-select:focus {
    border-color: var(--vh-teal);
    box-shadow: 0 0 0 0.2rem rgba(var(--vh-teal-rgb), 0.14);
}

/* Square 8px checkboxes / radios with a teal fill when selected. */
body.vh-theme .form-check-input {
    border-color: var(--vh-line-strong);
    border-radius: 0.25rem;
}

body.vh-theme .form-check-input:checked {
    background-color: var(--vh-teal);
    border-color: var(--vh-teal);
}

/* Focus ring — the decorative accent teal (a UI indicator, 4.12:1). */
body.vh-theme a:focus-visible,
body.vh-theme button:focus-visible,
body.vh-theme input:focus-visible {
    outline-color: var(--vh-accent);
}

/* --------------------------------------------------------------------------
   Announcement band + header — a solid teal alert bar over a clean white
   sticky header with a bold teal Poppins wordmark (the base derives the
   announce fill from a 62%-black mix of the accent, which would render nearly
   black here; the export uses flat bg-primary).
   -------------------------------------------------------------------------- */
body.vh-theme .mr-announce {
    background-color: var(--vh-teal);
    color: #fff;
    font-family: var(--vh-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: none;
    padding: 0.55rem 1rem;
}

body.vh-theme .mr-header {
    background-color: var(--vh-white);
    border-bottom: 1px solid var(--vh-line);
    box-shadow: var(--vh-shadow-sm);
}

body.vh-theme .mr-logo {
    font-family: var(--vh-font-head);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--vh-teal);
}

body.vh-theme .mr-nav-link {
    font-family: var(--vh-font-body);
    color: var(--vh-muted);
}

body.vh-theme .mr-nav-link:hover {
    color: var(--vh-teal);
}

/* The export marks the current section with a 2px teal underline. */
body.vh-theme .mr-nav-link.is-active {
    color: var(--vh-teal);
    font-weight: 600;
    border-bottom-color: var(--vh-teal);
}

body.vh-theme .mr-icon-btn {
    color: var(--vh-muted);
    border-radius: 9999px;
}

body.vh-theme .mr-icon-btn:hover {
    color: var(--vh-teal);
    background-color: var(--vh-band-deep);
}

body.vh-theme .mr-badge,
body.vh-theme .mr-badge--wish {
    background-color: var(--vh-teal);
    color: #fff;
    font-family: var(--vh-font-body);
}

body.vh-theme .mr-search input {
    border-radius: var(--vh-radius);
    background: var(--vh-band);
    border-color: var(--vh-line);
}

body.vh-theme .mr-search input:focus {
    border-color: var(--vh-teal);
    box-shadow: 0 0 0 0.2rem rgba(var(--vh-teal-rgb), 0.14);
}

/* --------------------------------------------------------------------------
   Hero — full-bleed lifestyle photograph under a LEFT-TO-RIGHT WHITE scrim
   with graphite copy (the export: bg-gradient-to-r from-white/80 via-white/40
   to-transparent). The scrim is never removed: it is the only thing
   guaranteeing the graphite headline stays readable over an arbitrary
   merchant photo — #26282b over white/86 composited on even a pure-black
   upload still measures ~9:1.
   -------------------------------------------------------------------------- */
body.vh-theme .vh-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(460px, 62vh, 640px); /* export: h-[640px] */
    overflow: hidden;
    background-color: var(--vh-band);
}

body.vh-theme .vh-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

body.vh-theme .vh-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.86) 26%, rgba(255, 255, 255, 0.45) 58%, rgba(255, 255, 255, 0) 100%);
}

body.vh-theme .vh-hero__shell {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
}

body.vh-theme .vh-hero__copy {
    max-width: 36rem;
    text-align: left;
}

body.vh-theme .vh-hero__title {
    font-size: clamp(2rem, 4.2vw, 3rem); /* DESIGN.md display-lg 48px */
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--vh-ink);
    margin-bottom: 1rem;
}

body.vh-theme .vh-hero__lead {
    color: var(--vh-muted);
    font-size: 1.1rem; /* body-lg 18px */
    line-height: 1.6;
    max-width: 42ch;
    margin-bottom: 2rem;
}

body.vh-theme .vh-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   Trust strip — a white band under the hero with thin-stroke teal icons and
   graphite uppercase labels (the export's row of four reassurance items).
   -------------------------------------------------------------------------- */
body.vh-theme .mr-band--alt.border-bottom {
    background-color: var(--vh-white);
    border-bottom-color: var(--vh-line) !important;
}

body.vh-theme .mr-trust svg {
    color: var(--vh-accent);
}

body.vh-theme .mr-trust strong {
    font-family: var(--vh-font-body);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: var(--vh-ink);
}

/* --------------------------------------------------------------------------
   Promo tiles — 12px lifestyle tiles under a bottom-up black gradient, with a
   Poppins title and a one-line caption. The optional keyline link stays WHITE
   in BOTH states: the base recolours it to --ll-accent on hover, which on the
   dark scrim would be nearly invisible, so the base's `:hover` DESCENDANT
   selector is overridden too (a child rule on `.mr-promo__cta` alone loses on
   specificity).
   -------------------------------------------------------------------------- */
body.vh-theme .mr-promo {
    border-radius: var(--vh-radius-lg);
    box-shadow: var(--vh-shadow-sm);
    transition: box-shadow 0.3s ease;
}

body.vh-theme .mr-promo:hover {
    box-shadow: var(--vh-shadow);
}

body.vh-theme .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
}

body.vh-theme .mr-promo__title {
    font-family: var(--vh-font-head);
    font-weight: 600;
    color: #fff;
}

body.vh-theme .vh-promo__text {
    display: block;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    margin-top: 0.5rem;
    max-width: 34ch;
}

body.vh-theme .mr-promo__cta,
body.vh-theme .mr-promo:hover .mr-promo__cta {
    color: #fff;
    border-color: #fff;
    letter-spacing: 0.04em;
    text-transform: none;
    font-size: 0.85rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Product cards (inherited) — DESIGN.md Level 1: pure white, a 1px lightened
   graphite keyline, 8px corners, and at least 16px of internal padding around
   the imagery. Because the card gains a border AND a background, its text is
   inset by the card's own padding (a bordered .mr-card must never let the
   title/price sit flush against the new edge).
   -------------------------------------------------------------------------- */
body.vh-theme .mr-card {
    background: var(--vh-white);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius);
    padding: 0.85rem 0.95rem 1.15rem;
    box-shadow: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

body.vh-theme .mr-card:hover {
    border-color: var(--vh-line-strong);
    box-shadow: var(--vh-shadow);
    transform: translateY(-2px);
}

body.vh-theme .mr-card__media {
    aspect-ratio: 1; /* the export frames appliances square, not 3:4 */
    border-radius: 0.25rem;
    overflow: hidden;
    background: var(--vh-white);
}

body.vh-theme .mr-card__eyebrow {
    color: var(--vh-soft);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}

body.vh-theme .mr-card__title {
    font-family: var(--vh-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--vh-ink);
}

body.vh-theme .mr-card__title a:hover {
    color: var(--vh-teal);
}

/* DESIGN.md price-display: Source Sans 3 Bold, the most legible "data" point
   on the card. Teal on white = 6.69:1. */
body.vh-theme .mr-card__price,
body.vh-theme .ll-price,
body.vh-theme .ll-price--sale {
    font-family: var(--vh-font-body);
    font-weight: 700;
    font-size: 1.05rem; /* price-display 20px */
    letter-spacing: 0.02em;
    color: var(--vh-teal);
}

body.vh-theme .ll-price-compare {
    color: var(--vh-soft);
}

/* Sale chip — the export's teal promotional badge (white on #006768 =
   6.69:1; the shared default is a red pill). */
body.vh-theme .mr-card__badge,
body.vh-theme .mr-sale-tag,
body.vh-theme .mr-card__sale {
    background: var(--vh-teal);
    color: #fff;
    font-family: var(--vh-font-body);
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 9999px;
}

/* Slide-up Add to Cart — teal fill, matching the export's card button. */
body.vh-theme .mr-card__quick {
    background-color: var(--vh-teal);
    font-family: var(--vh-font-body);
    letter-spacing: 0.05em;
    text-transform: none;
    font-size: 0.85rem;
}

body.vh-theme .mr-card__quick:hover {
    background-color: var(--vh-teal-deep);
    color: #fff;
}

/* The two ROUND overlay controls (heart + eye) are styled TOGETHER. The base
   gives them a white circle inked with var(--bs-primary) at rest and the
   theme's own --mr-surface/--mr-ink pair on hover: teal-on-white 6.69:1 and
   graphite-on-white 14.8:1 here, so both states clear WCAG and only the
   keyline is added. The filled "saved" heart keeps the decorative accent. */
body.vh-theme .mr-card__wish,
body.vh-theme .mr-card__quickview {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--vh-line);
    border-radius: 9999px;
}

body.vh-theme .mr-card__wish:hover,
body.vh-theme .mr-card__quickview:hover {
    background-color: var(--vh-white);
    border-color: var(--vh-line-strong);
}

body.vh-theme .mr-card__wish.is-active {
    color: var(--vh-accent);
}

/* --------------------------------------------------------------------------
   volt-home's own home sections
   -------------------------------------------------------------------------- */

/* Sale banner — a FULL-BLEED solid teal section (the export bleeds it edge to
   edge rather than insetting a rounded panel), centred, with a white Poppins
   display heading (6.69:1), a lighter supporting paragraph and a solid
   graphite button carrying a white label (13.1:1). */
body.vh-theme .vh-sale {
    background-color: var(--vh-teal);
    padding-block: clamp(3.5rem, 8vw, 6rem);
    text-align: center;
}

body.vh-theme .vh-sale__copy {
    max-width: 46rem;
    margin-inline: auto;
}

body.vh-theme .vh-sale__title {
    font-family: var(--vh-font-head);
    font-size: clamp(1.75rem, 3.6vw, 2.75rem); /* display-lg 48px */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #fff;
    margin-bottom: 1rem;
}

body.vh-theme .vh-sale__body {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

body.vh-theme .vh-sale__btn {
    display: inline-flex;
    align-items: center;
    background: var(--vh-graphite-deep);
    color: #fff;
    font-family: var(--vh-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    padding: 1rem 2.5rem;
    border-radius: var(--vh-radius);
    transition: background-color 0.2s ease;
}

body.vh-theme .vh-sale__btn:hover {
    background: var(--vh-ink);
    color: #fff;
}

/* Warranty cards — white 12px panels with a 1px keyline, a circular tinted
   icon well and centred copy. */
body.vh-theme .vh-warranty__card {
    height: 100%;
    background: var(--vh-white);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-lg);
    padding: clamp(1.75rem, 3vw, 2rem);
    text-align: center;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

body.vh-theme .vh-warranty__card:hover {
    border-color: var(--vh-line-strong);
    box-shadow: var(--vh-shadow);
}

body.vh-theme .vh-warranty__well {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--vh-band-deep);
    border-radius: 9999px;
    color: var(--vh-ink);
    margin-bottom: 1.5rem;
}

body.vh-theme .vh-warranty__well svg {
    width: 30px;
    height: 30px;
}

body.vh-theme .vh-warranty__title {
    font-family: var(--vh-font-head);
    font-size: 1.25rem; /* headline-md 24px */
    font-weight: 600;
    color: var(--vh-ink);
    margin-bottom: 0.5rem;
}

body.vh-theme .vh-warranty__text {
    color: var(--vh-muted);
    font-size: 1rem;
    line-height: 1.55;
}

/* Shop by Category — square white bento tiles with a 1px keyline, a large
   graphite line icon and the category name beneath; the keyline and both
   glyph + name ink teal on hover. */
body.vh-theme .vh-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    aspect-ratio: 1;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    background: var(--vh-white);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-lg);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

body.vh-theme .vh-cat:hover {
    border-color: var(--vh-teal);
    box-shadow: var(--vh-shadow);
}

body.vh-theme .vh-cat__icon {
    width: 52px;
    height: 52px;
    color: var(--vh-muted);
    transition: color 0.25s ease, transform 0.25s ease;
}

body.vh-theme .vh-cat:hover .vh-cat__icon {
    color: var(--vh-teal);
    transform: scale(1.06);
}

body.vh-theme .vh-cat__name {
    display: block;
    font-family: var(--vh-font-head);
    font-size: 1.1rem; /* headline-md, scaled for the tile */
    font-weight: 600;
    line-height: 1.3;
    color: var(--vh-ink);
    transition: color 0.2s ease;
}

body.vh-theme .vh-cat:hover .vh-cat__name {
    color: var(--vh-teal);
}

/* Journal cards — white 12px panels on the deeper tonal band, a 16:9 cover, a
   teal category label, a Poppins title and a "Read More →" link. */
body.vh-theme .vh-post {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--vh-white);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-lg);
    overflow: hidden;
    box-shadow: var(--vh-shadow-sm);
    transition: box-shadow 0.25s ease;
}

body.vh-theme .vh-post:hover {
    box-shadow: var(--vh-shadow);
}

body.vh-theme .vh-post__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--vh-band-deep);
}

body.vh-theme .vh-post__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

body.vh-theme .vh-post:hover .vh-post__media img {
    transform: scale(1.04);
}

body.vh-theme .vh-post__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.75rem;
    padding: 1.5rem;
}

body.vh-theme .vh-post__label {
    font-family: var(--vh-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vh-teal);
}

body.vh-theme .vh-post__title {
    font-family: var(--vh-font-head);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.35;
    flex-grow: 1;
    margin: 0;
}

body.vh-theme .vh-post__title a {
    color: var(--vh-ink);
    text-decoration: none;
}

body.vh-theme .vh-post__title a:hover {
    color: var(--vh-teal);
}

body.vh-theme .vh-post__more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    font-family: var(--vh-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--vh-ink);
    text-decoration: none;
}

body.vh-theme .vh-post__more svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

body.vh-theme .vh-post__more:hover {
    color: var(--vh-teal);
}

body.vh-theme .vh-post__more:hover svg {
    transform: translateX(3px);
}

/* Newsletter ("House Current") — centred on the appliance-white canvas under
   a hairline top rule, with a bordered white input and a solid teal button. */
body.vh-theme .vh-cta {
    background: var(--vh-canvas);
    border-top: 1px solid var(--vh-line);
    padding-block: clamp(3.5rem, 7vw, 5rem);
}

body.vh-theme .vh-cta__title {
    font-size: clamp(1.6rem, 2.8vw, 2rem);
}

body.vh-theme .vh-cta__body {
    color: var(--vh-muted);
    max-width: 34rem;
    font-size: 1rem;
}

body.vh-theme .vh-cta__form {
    display: flex;
    gap: 0.5rem;
    max-width: 28rem;
}

body.vh-theme .vh-cta__form input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--vh-white);
    border: 1px solid var(--vh-line-strong);
    border-radius: var(--vh-radius);
    color: var(--vh-ink);
    padding: 0.8rem 1.1rem;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.vh-theme .vh-cta__form input::placeholder {
    color: var(--vh-soft);
}

body.vh-theme .vh-cta__form input:focus {
    outline: none;
    border-color: var(--vh-teal);
    box-shadow: 0 0 0 0.2rem rgba(var(--vh-teal-rgb), 0.14);
}

body.vh-theme .vh-cta__btn {
    background: var(--vh-teal);
    color: #fff;
    border: 0;
    border-radius: var(--vh-radius);
    padding: 0.8rem 1.75rem;
    font-family: var(--vh-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

body.vh-theme .vh-cta__btn:disabled {
    opacity: 0.85;
    cursor: not-allowed;
}

body.vh-theme .vh-cta__note {
    color: var(--vh-soft);
    font-size: 0.82rem;
}

/* --------------------------------------------------------------------------
   Inherited component finishing — everything the base points at --ll-accent
   (this theme's DECORATIVE teal) where the export shows the deep action teal,
   plus the tonal shapes for tiles, rails, tabs, pagination and the gallery.
   -------------------------------------------------------------------------- */
body.vh-theme .mr-ulink:hover,
body.vh-theme .mr-crumbs a:hover,
body.vh-theme .mr-cart-row__title a:hover,
body.vh-theme .mr-article__title a:hover {
    color: var(--vh-teal);
    border-color: var(--vh-teal);
}

body.vh-theme .mr-article__media {
    border-radius: var(--vh-radius-lg);
}

body.vh-theme .mr-article__title {
    font-family: var(--vh-font-head);
    font-size: 1.2rem;
}

body.vh-theme .mr-tile,
body.vh-theme .mr-summary,
body.vh-theme .mr-panel,
body.vh-theme .mr-gallery__main {
    border-radius: var(--vh-radius);
}

body.vh-theme .mr-rail-btn {
    border-radius: 9999px;
    border-color: var(--vh-line-strong);
}

body.vh-theme .mr-rail-btn:hover {
    background: var(--vh-teal);
    border-color: var(--vh-teal);
    color: #fff;
}

body.vh-theme .mr-tabs .nav-link.active {
    color: var(--vh-teal);
    border-bottom-color: var(--vh-teal);
}

body.vh-theme .mr-page {
    border-radius: var(--vh-radius);
}

body.vh-theme .mr-filter__title {
    font-family: var(--vh-font-head);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--vh-teal);
}

body.vh-theme .mr-alert {
    border-radius: var(--vh-radius);
}

/* Footer — the homepage + PDP exports render a deep graphite panel (the
   category / cart screens show a light one; the homepage is authoritative).
   Recolour the surface AND every text token riding on it, or the
   re-pointed graphite --mr-muted / --mr-soft render invisible on the band. */
body.vh-theme .mr-footer {
    background-color: var(--vh-graphite-deep);
    border-top: 0;
    color: rgba(255, 255, 255, 0.75);
}

body.vh-theme .mr-footer h4 {
    color: #fff;
    font-family: var(--vh-font-head);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

body.vh-theme .mr-footer__brand {
    font-family: var(--vh-font-head);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

body.vh-theme .mr-footer a {
    color: rgba(255, 255, 255, 0.75);
}

/* The teal accents are tuned for a LIGHT backdrop and sink into this dark
   one (3.2:1), so brighten to white on hover instead. */
body.vh-theme .mr-footer a:hover {
    color: #fff;
}

body.vh-theme .mr-footer .mr-muted {
    color: rgba(255, 255, 255, 0.75);
}

body.vh-theme .mr-footer .mr-soft {
    color: rgba(255, 255, 255, 0.6);
}

body.vh-theme .mr-footer .mr-divider {
    background-color: rgba(255, 255, 255, 0.14);
}

body.vh-theme .mr-footer .form-control {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

body.vh-theme .mr-footer .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

body.vh-theme .mr-social {
    border-color: rgba(255, 255, 255, 0.22);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
}

body.vh-theme .mr-social:hover {
    background-color: var(--vh-teal);
    border-color: var(--vh-teal);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Motion & responsive
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.vh-theme .mr-card,
    body.vh-theme .mr-promo,
    body.vh-theme .mr-tile,
    body.vh-theme .mr-btn,
    body.vh-theme .vh-cat,
    body.vh-theme .vh-cat__icon,
    body.vh-theme .vh-warranty__card,
    body.vh-theme .vh-post,
    body.vh-theme .vh-sale__btn,
    body.vh-theme .vh-link,
    body.vh-theme .vh-post__more,
    body.vh-theme .vh-post__more svg {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    body.vh-theme .mr-card:hover .mr-card__media img,
    body.vh-theme .mr-tile:hover .mr-tile__img,
    body.vh-theme .mr-tile--cat .mr-tile__media img,
    body.vh-theme .mr-promo:hover .mr-promo__img,
    body.vh-theme .vh-post:hover .vh-post__media img,
    body.vh-theme .vh-cat:hover .vh-cat__icon,
    body.vh-theme .vh-post__more:hover svg {
        transform: none !important;
    }
}

/* Mobile (from the Stitch mobile frames): a shorter hero with a stronger
   scrim under stacked copy, tighter display sizes, smaller category tiles,
   a tighter sale band and a stacked newsletter form. The base grids already
   collapse to row-cols-2. */
@media (max-width: 991.98px) {
    body.vh-theme .vh-hero {
        min-height: 420px;
    }

    body.vh-theme .vh-hero__scrim {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.82) 55%, rgba(255, 255, 255, 0.55) 100%);
    }

    body.vh-theme .vh-hero__title {
        font-size: 1.75rem; /* headline-lg-mobile 24px + hero scale */
    }

    body.vh-theme .vh-hero__lead {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    body.vh-theme .vh-hero__actions .mr-btn {
        flex: 1 1 auto;
    }

    body.vh-theme .vh-cat {
        gap: 0.75rem;
    }

    body.vh-theme .vh-cat__icon {
        width: 40px;
        height: 40px;
    }

    body.vh-theme .vh-cat__name {
        font-size: 0.95rem;
    }

    body.vh-theme .vh-warranty__well {
        width: 52px;
        height: 52px;
        margin-bottom: 1rem;
    }

    body.vh-theme .vh-sale {
        padding-block: 2.75rem;
    }

    body.vh-theme .vh-cta__form {
        flex-direction: column;
    }

    body.vh-theme .vh-cta__form input,
    body.vh-theme .vh-cta__btn {
        width: 100%;
    }
}