/* Olevor homepage and catalog (VISUAL_REVAMP_PLAN W4: BHL parity, living hero). Tokens in style.css. */

/* body.home (0,1,1) out-specifies Blocksy's dynamic body rule (0,0,1), so no !important
   is needed even though Blocksy prints later (R6.6, verified live 2026-09-03). */
body.home,
body.post-type-archive-product {
    background: var(--olv-bg);
}

body.home .site-main,
body.home [data-content="normal"],
body.post-type-archive-product .site-main,
body.post-type-archive-product [data-content="normal"] {
    margin: 0;
    max-width: none;
    padding: 0;
}

.olv4-main {
    background: var(--olv-bg);
    color: var(--olv-ink);
    overflow: clip;
}

.olv4-wrap {
    margin: 0 auto;
    max-width: var(--olv-wrap);
    padding-inline: var(--olv-edge);
    width: 100%;
}

.olv4-eyebrow {
    color: var(--olv-muted-strong); /* WCAG 1.4.3: 10 px mono on tinted fields needs ≥ 4.5:1 (was 4.46:1 on --olv-field-cool) */
    font-family: var(--olv-mono);
    font-size: var(--olv-type-eyebrow);
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin: 0;
    text-transform: uppercase;
}

.olv4-section-title {
    font-size: var(--olv-type-section);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin: 0;
    text-wrap: balance;
}

/* ------------------------------------------------------------------ pills (§5.4) */
.olv4-pill {
    align-items: center;
    background: var(--olv-ink);
    border: 0;
    border-radius: var(--olv-radius-control);
    color: var(--olv-white);
    cursor: pointer;
    display: inline-flex;
    font-size: 15px;
    font-weight: 500;
    gap: 8px;
    justify-content: center;
    line-height: 1.2;
    min-height: 47px;
    padding: 12px 24px;
    transition:
        background var(--olv-motion-fast) var(--olv-ease-standard),
        color var(--olv-motion-fast) var(--olv-ease-standard),
        transform 200ms var(--olv-ease-standard);
}

.olv4-pill:hover {
    color: var(--olv-white);
    transform: scale(1.02);
}

.olv4-pill--dark {
    background: var(--olv-ink);
    color: var(--olv-white);
}

.olv4-pill--white {
    background: var(--olv-white);
    color: var(--olv-ink);
}

.olv4-pill--white:hover {
    color: var(--olv-ink);
}

.olv4-pill--secondary {
    background: rgba(0, 0, 0, 0.06);
    color: var(--olv-ink);
    font-size: 13px;
    min-height: 44px; /* R7.3 target floor (BHL 42) */
    min-width: 44px; /* R7.3 target floor; far below the measured 136px pill, so the box is unchanged */
    padding: 12px 18px;
}

.olv4-pill--secondary:hover {
    background: rgba(0, 0, 0, 0.09);
    color: var(--olv-ink);
    transform: none;
}

.olv4-pill--secondary span {
    display: inline-block;
    transition: transform var(--olv-motion-fast) var(--olv-ease-standard);
}

.olv4-pill--secondary:hover span,
.olv4-pill--secondary:focus-visible span {
    transform: translateX(4px);
}

/* ------------------------------------------------------------- hero (R4.2, D8) */
.olv4-hero {
    background: var(--olv-bg);
    min-height: min(75vh, 720px);
    overflow: clip;
    position: relative;
}

.olv4-hero-inner {
    align-items: center;
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--olv-hero-pad-top) var(--olv-hero-pad-bottom); /* padding-block only: the shorthand zeroed the .olv4-wrap inline padding (R7.5) */
}

.olv4-hero-copy {
    max-width: 800px;
    position: relative;
    z-index: 2;
}

.olv4-hero h1 {
    color: var(--olv-ink);
    font-size: var(--olv-type-display);
    font-weight: 500;
    letter-spacing: var(--olv-type-display-ls);
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
}

.olv4-hero-sub {
    color: var(--olv-ink);
    font-size: var(--olv-type-lead);
    font-weight: 500;
    line-height: 1.6;
    margin: 24px 0 0;
    max-width: 520px;
}

.olv4-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.olv4-hero-vials {
    height: 300px;
    position: relative;
    width: 100%;
}

.olv4-hero-vial {
    bottom: var(--olv-vial-bottom, 0%);
    height: var(--olv-vial-height, 50%);
    left: var(--olv-vial-left, 0%);
    position: absolute;
}

.olv4-hero-vial--1 {
    --olv-vial-height: 62%;
    --olv-vial-left: 6%;
    --olv-vial-bottom: 2%;
    z-index: 3;
}

.olv4-hero-vial--2 {
    --olv-vial-height: 42%;
    --olv-vial-left: 44%;
    --olv-vial-bottom: 44%;
    z-index: 1;
}

.olv4-hero-vial--3 {
    --olv-vial-height: 48%;
    --olv-vial-left: 64%;
    --olv-vial-bottom: 4%;
    z-index: 2;
}

.olv4-hero-parallax {
    height: 100%;
    transform: translate3d(
        calc(var(--olv-parallax-x, 0px) * var(--olv-depth, 1)),
        calc(var(--olv-parallax-y, 0px) * var(--olv-depth, 1)),
        0
    );
    will-change: transform;
}

.olv4-hero-bob {
    animation: olv4-float var(--olv-bob-duration) ease-in-out var(--olv-bob-delay) infinite;
    display: block;
    height: 100%;
    will-change: transform;
}

.olv4-hero-bob--a {
    --olv-bob-duration: var(--olv-float-a-duration);
    --olv-bob-distance: var(--olv-float-a-distance);
    --olv-bob-delay: var(--olv-float-a-delay);
}

.olv4-hero-bob--b {
    --olv-bob-duration: var(--olv-float-b-duration);
    --olv-bob-distance: var(--olv-float-b-distance);
    --olv-bob-delay: var(--olv-float-b-delay);
}

.olv4-hero-bob--c {
    --olv-bob-duration: var(--olv-float-c-duration);
    --olv-bob-distance: var(--olv-float-c-distance);
    --olv-bob-delay: var(--olv-float-c-delay);
}

.olv4-hero-vial picture,
.olv4-hero-vial img {
    display: block;
    height: 100%;
    width: auto;
}

.olv4-hero-vial img {
    filter: drop-shadow(0 25px 45px rgba(16, 16, 16, 0.18));
    max-width: none;
}

/* D36 / D38 / R4.14: full-bleed hero manufacturing microfilm (BHL model). The film is the
   hero's background layer; the copy sits on a left legibility scrim. Subject framed right. */
.olv4-hero-film {
    inset: 0;
    overflow: hidden;
    position: absolute;
    z-index: 0;
}

.olv4-hero-film-poster,
.olv4-hero-film-video {
    display: block;
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: 68% 50%;
    position: absolute;
    width: 100%;
}

.olv4-hero-film-video {
    opacity: 0;
    transition: opacity var(--olv-motion-hero) var(--olv-ease-enter);
}

.olv4-hero-film.is-playing .olv4-hero-film-video {
    opacity: 1;
}

.olv4-hero-film.has-error .olv4-hero-film-video,
.olv4-hero-film.is-static .olv4-hero-film-video {
    display: none;
}

/* Legibility scrim: page field over the copy column, clearing to the film on the right;
   a soft bottom fade lands the film on the proof strip (--olv-bg = #f3f3f0). */
.olv4-hero-film::after {
    background:
        linear-gradient(90deg, rgba(243, 243, 240, 0.94) 0%, rgba(243, 243, 240, 0.86) 34%, rgba(243, 243, 240, 0.35) 56%, rgba(243, 243, 240, 0) 72%),
        linear-gradient(180deg, rgba(243, 243, 240, 0.55) 0%, rgba(243, 243, 240, 0) 22%, rgba(243, 243, 240, 0) 82%, rgba(243, 243, 240, 0.9) 100%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.olv4-hero-inner,
.olv4-hero-copy {
    position: relative;
    z-index: 1;
}

.js .olv4-hero-film {
    opacity: 0;
    transition: opacity var(--olv-motion-hero) var(--olv-ease-enter);
}

.js .olv-ready .olv4-hero-film {
    opacity: 1;
}

/* ---------------------------------------------------- dark hero (D38 rev 3, Luis's film)
   body.olv-hero-dark: the hero is a graphite band behind Luis's OlevorHero.mp4 (near-black
   opening, vial revealed on a graphite surface). Copy turns light, the scrim turns dark, the
   film sits centred (the vial is in the middle of his frame), and the primary pill inverts.
   Everything below is additive: without the body class the light hero is unchanged. */
body.olv-hero-dark .olv4-hero {
    background: #15171a;
}

body.olv-hero-dark .olv4-hero-film-poster,
body.olv-hero-dark .olv4-hero-film-video {
    object-position: 50% 50%;
}

body.olv-hero-dark .olv4-hero-film::after {
    background:
        linear-gradient(90deg, rgba(21, 23, 26, 0.9) 0%, rgba(21, 23, 26, 0.82) 26%, rgba(21, 23, 26, 0.35) 40%, rgba(21, 23, 26, 0) 52%),
        linear-gradient(180deg, rgba(21, 23, 26, 0.55) 0%, rgba(21, 23, 26, 0) 24%, rgba(21, 23, 26, 0) 84%, rgba(21, 23, 26, 0.4) 100%);
}

body.olv-hero-dark .olv4-hero h1,
body.olv-hero-dark .olv4-hero-sub {
    color: var(--olv-bg);
}

body.olv-hero-dark .olv4-hero .olv4-eyebrow {
    color: #b9bab4;
}

body.olv-hero-dark .olv4-hero .olv4-pill--dark {
    background: var(--olv-bg);
    color: var(--olv-ink);
}

body.olv-hero-dark .olv4-hero .olv4-pill--dark:hover {
    color: var(--olv-ink);
}

body.olv-hero-dark .olv4-hero .olv4-pill--dark:focus-visible {
    outline-color: var(--olv-accent);
}

@media (min-width: 1000px) {
    /* Keep the copy left of the vial (it stands at 41–58 % of the frame width; the lede
       must end before 41 % = 590 px at 1440, so 128 px edge + 440 px). */
    body.olv-hero-dark .olv4-hero-copy {
        max-width: 560px;
    }

    body.olv-hero-dark .olv4-hero-sub {
        max-width: 440px;
    }
}

@media (max-width: 760px) {
    body.olv-hero-dark .olv4-hero-film::after {
        background:
            linear-gradient(180deg, rgba(21, 23, 26, 0.92) 0%, rgba(21, 23, 26, 0.84) 36%, rgba(21, 23, 26, 0.4) 58%, rgba(21, 23, 26, 0) 76%, rgba(21, 23, 26, 0.55) 100%);
    }
}

@keyframes olv4-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, var(--olv-bob-distance, -10px), 0);
    }
}

.olv4-hero-poster {
    display: none;
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.olv4-hero.has-poster .olv4-hero-poster {
    display: block;
}

.olv4-hero.has-poster .olv4-hero-vials {
    visibility: hidden;
}

/* Fade-in on olevor:ready (R4.2): copy stagger + vials over --olv-motion-hero. */
.js [data-olv-hero-copy] {
    opacity: 0;
    transform: translateY(16px);
}

.js .olv-ready [data-olv-hero-copy] {
    animation: olv4-copy-in var(--olv-motion-hero) var(--olv-ease-enter) forwards;
}

.js .olv-ready [data-olv-hero-copy]:nth-child(2) {
    animation-delay: 70ms;
}

.js .olv-ready [data-olv-hero-copy]:nth-child(3) {
    animation-delay: 130ms;
}

.js .olv-ready [data-olv-hero-copy]:nth-child(4) {
    animation-delay: 190ms;
}

.js .olv4-hero-vial {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity var(--olv-motion-hero) var(--olv-ease-enter),
        transform var(--olv-motion-hero) var(--olv-ease-enter);
}

.js .olv-ready .olv4-hero-vial {
    opacity: 1;
    transform: translateY(0);
}

.js .olv-ready .olv4-hero-vial--2 {
    transition-delay: 90ms;
}

.js .olv-ready .olv4-hero-vial--3 {
    transition-delay: 160ms;
}

@keyframes olv4-copy-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.olv-page-hidden .olv4-hero-bob {
    animation-play-state: paused;
}

body.olv-hero-static .olv4-hero-bob {
    animation: none;
}

body.olv-hero-static .olv4-hero-parallax {
    transform: none;
}

/* ------------------------------------------------------------ proof strip (R4.3) */
.olv4-proof {
    background: var(--olv-white);
    border-bottom: 1px solid var(--olv-line);
    border-top: 1px solid var(--olv-line);
}

.olv4-proof-grid {
    display: grid;
    gap: 10px 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: 14px; /* was `padding: 14px 0`, which removed the .olv4-wrap inline padding (R7.5) */
}

.olv4-proof-grid p {
    align-items: center;
    color: var(--olv-ink);
    display: flex;
    font-family: var(--olv-mono);
    font-size: var(--olv-type-eyebrow);
    gap: 8px;
    letter-spacing: 0.05em;
    line-height: 1.4;
    margin: 0;
    text-transform: uppercase;
}

.olv4-proof-grid p i {
    background: var(--olv-dot, var(--olv-ink));
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    height: 4px;
    width: 4px;
}

/* ------------------------------------------------------- section shells (D20) */
.olv4-section {
    padding: var(--olv-section-pad) 0;
}

.olv4-section--white {
    background: var(--olv-white);
}

.olv4-section--white + .olv4-section--white {
    border-top: 1px solid var(--olv-line);
}

.olv4-section-head {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    justify-content: space-between;
    margin-bottom: 40px;
}

.olv4-section-head .olv4-eyebrow {
    margin-bottom: 12px;
}

/* ---------------------------------------------------------------- cards (R4.5) */
.olv4-product-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
}

.olv4-card {
    background: var(--olv-white);
    border-radius: var(--olv-radius-card);
    min-width: 0;
    overflow: hidden;
    position: relative;
    transition: box-shadow 250ms var(--olv-ease-standard);
}

.olv4-card:hover {
    box-shadow: var(--olv-card-shadow);
    transform: none;
}

.olv4-card-media {
    aspect-ratio: 1 / 1;
    background: var(--olv-field-50);
    border-radius: var(--olv-radius-card);
    display: block;
    overflow: hidden;
    padding: 32px;
}

.olv4-card-media img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.olv4-card-body {
    padding: 20px 0 0;
}

.olv4-card-eyebrow {
    color: var(--olv-card-accent-text, var(--olv-muted-strong)); /* WCAG 1.4.3: darker derivative of the accent (functions.php); the dot keeps the accent */
    font-family: var(--olv-mono);
    font-size: var(--olv-type-eyebrow);
    letter-spacing: 0.09em;
    line-height: 1.4;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.olv4-card-eyebrow::before {
    background: var(--olv-card-accent, var(--olv-ink));
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 4px;
    margin-right: 8px;
    vertical-align: middle;
    width: 4px;
}

.olv4-card-body h3 {
    font-size: var(--olv-type-card-title);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 8px;
}

.olv4-card-desc {
    color: var(--olv-muted);
    font-size: var(--olv-type-small);
    line-height: 1.6;
    margin: 0 0 8px;
}

.olv4-card-availability {
    align-items: center;
    color: var(--olv-ink);
    display: flex;
    font-size: var(--olv-type-small);
    gap: 8px;
    margin: 0 0 16px;
}

.olv4-card-availability i {
    background: #299160;
    border-radius: 50%;
    display: inline-block;
    height: 6px;
    width: 6px;
}

.olv4-card-availability.is-agotado i {
    background: var(--olv-danger);
}

.olv4-card-availability.is-reservado i {
    background: var(--olv-muted);
}

.olv4-card-footer {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.olv4-card-price {
    font-family: var(--olv-mono);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

.olv4-card-price small {
    color: var(--olv-muted);
    font-size: var(--olv-type-micro); /* R6.2: "COP" is a unit suffix, not an eyebrow (BHL micro copy 11px) */
    margin-left: 6px;
}

.olv4-card-price del {
    color: var(--olv-muted);
    margin-right: 6px;
}

.olv4-card-price ins {
    text-decoration: none;
}

.olv4-card-cta {
    align-items: center;
    background: var(--olv-ink);
    border-radius: var(--olv-radius-control);
    color: var(--olv-white);
    display: inline-flex;
    font-size: 13px;
    font-weight: 500;
    gap: 6px;
    justify-content: center;
    min-height: 44px; /* R7.3 target floor */
    min-width: 44px; /* R7.3 target floor; below the padded label width, so the painted pill is unchanged */
    padding: 10px 18px;
    transition: transform 200ms var(--olv-ease-standard);
    white-space: nowrap;
}

.olv4-card-cta:hover {
    color: var(--olv-white);
    transform: scale(1.02);
}

.olv4-rail-meta {
    display: none;
}

/* ------------------------------------------------------------ standards (R4.6) */
.olv4-standards-grid {
    background: var(--olv-line);
    border: 1px solid var(--olv-line);
    border-radius: var(--olv-radius-card);
    display: grid;
    gap: 1px;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
}

.olv4-standards-grid article {
    background: var(--olv-white);
    padding: 28px 24px;
}

.olv4-standards-grid span {
    color: var(--olv-muted);
    display: block;
    font-family: var(--olv-mono);
    font-size: var(--olv-type-eyebrow);
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

.olv4-standards-grid h3 {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0 0 8px;
}

.olv4-standards-grid p {
    color: var(--olv-muted);
    font-size: var(--olv-type-small);
    line-height: 1.6;
    margin: 0;
}

/* ------------------------------------------------------------ offer band (R4.7) */
.olv4-offer {
    background: var(--olv-ink);
    color: var(--olv-white);
    overflow: hidden;
}

.olv4-offer-grid {
    display: grid;
    gap: 40px;
    grid-template-columns: minmax(0, 1fr);
}

.olv4-offer .olv4-eyebrow {
    color: var(--olv-accent);
}

.olv4-offer-figure {
    color: var(--olv-accent);
    font-size: 128px;
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 0.85;
    margin: 12px 0 0;
}

.olv4-offer-figure sup {
    /* Keep Blocksy's raised, zero-height superscript reset out of the offer lockup. */
    display: inline-block;
    font-size: 0.32em;
    letter-spacing: 0;
    line-height: 1;
    margin-left: 0.05em;
    position: static;
    vertical-align: top;
}

.olv4-offer h2 {
    color: var(--olv-white);
    margin: 0;
    max-width: 520px;
}

.olv4-offer-copy p:not(.olv4-eyebrow) {
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--olv-type-body);
    line-height: 1.6;
    margin: 20px 0 28px;
    max-width: 470px;
}

/* ----------------------------------------------------------- newsletter (R4.8) */
.olv4-newsletter-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 1fr);
}

.olv4-newsletter-copy .olv4-eyebrow {
    margin-bottom: 12px;
}

.olv4-newsletter-copy h2 {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 12px;
}

.olv4-newsletter-copy p {
    color: var(--olv-muted);
    font-size: var(--olv-type-body);
    line-height: 1.6;
    margin: 0;
    max-width: 420px;
}

.olv4-newsletter-form {
    align-self: center;
}

.olv4-newsletter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.olv4-newsletter-row label {
    flex: 1 1 220px;
}

.olv4-newsletter-row input {
    background: var(--olv-white);
    border: 1px solid var(--olv-line);
    border-radius: var(--olv-radius-control);
    color: var(--olv-ink);
    font-size: var(--olv-type-body);
    min-height: 50px;
    outline: none;
    padding: 12px 20px;
    width: 100%;
}

.olv4-newsletter-row input:focus {
    border-color: var(--olv-ink);
}

.olv4-newsletter-row .olv4-pill {
    min-height: 50px;
    min-width: 127px;
}

.olv4-newsletter-note {
    color: var(--olv-muted);
    font-family: var(--olv-mono);
    font-size: var(--olv-type-micro); /* R6.2: sentence-length running text, not an uppercase eyebrow (BHL micro copy 11px) */
    letter-spacing: 0.04em;
    line-height: 1.6;
    margin: 12px 0 0;
}

.olv4-newsletter-note.is-confirmed {
    color: var(--olv-ink);
}

/* ------------------------------------------------------------------ scope */
.olv4-scope {
    background: var(--olv-field-cool);
}

.olv4-scope-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
}

.olv4-scope h2 {
    max-width: 540px;
}

.olv4-scope p:not(.olv4-eyebrow) {
    color: var(--olv-ink);
    font-size: var(--olv-type-body);
    line-height: 1.6;
    margin: 0;
    max-width: 480px;
}

/* ----------------------------------------------------------- shop route (R4.9) */
.olv4-shop-head {
    padding: var(--olv-hero-pad-top) 0 40px;
}

.olv4-shop-head h1 {
    font-size: var(--olv-type-display);
    font-weight: 500;
    letter-spacing: var(--olv-type-display-ls);
    line-height: 1.1;
    margin: 12px 0 0;
}

.olv4-shop-head p:not(.olv4-eyebrow) {
    color: var(--olv-muted);
    font-size: var(--olv-type-lead);
    font-weight: 500;
    line-height: 1.6;
    margin: 20px 0 0;
    max-width: 560px;
}

.olv4-shop-grid {
    padding-bottom: var(--olv-section-pad);
}

/* ---------------------------------------------------------- reveals (§6.3) */
.js [data-olv-reveal] {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity var(--olv-motion-section) var(--olv-ease-enter),
        transform var(--olv-motion-section) var(--olv-ease-enter);
}

.js [data-olv-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ------------------------------------------------------------- mobile ≤ 760 */
@media (max-width: 760px) {
    .olv4-hero-film-poster,
    .olv4-hero-film-video {
        object-position: 50% 62%;
    }

    .olv4-hero-film::after {
        background:
            linear-gradient(180deg, rgba(243, 243, 240, 0.96) 0%, rgba(243, 243, 240, 0.9) 38%, rgba(243, 243, 240, 0.45) 60%, rgba(243, 243, 240, 0) 78%, rgba(243, 243, 240, 0.85) 100%);
    }

    .olv4-product-grid {
        gap: 12px;
        grid-auto-columns: minmax(280px, 82%);
        grid-auto-flow: column;
        grid-template-columns: none;
        margin-inline: calc(var(--olv-edge) * -1);
        overflow-x: auto;
        padding: 0 var(--olv-edge) 12px;
        scroll-padding-inline: var(--olv-edge);
        scroll-snap-type: x mandatory;
        scrollbar-color: var(--olv-muted) transparent;
        scrollbar-width: none;
    }

    .olv4-product-grid::-webkit-scrollbar {
        display: none;
    }

    .olv4-card {
        scroll-snap-align: start;
    }

    .olv4-rail-meta {
        align-items: center;
        color: var(--olv-muted);
        display: flex;
        font-family: var(--olv-mono);
        font-size: var(--olv-type-eyebrow);
        gap: 12px;
        justify-content: space-between;
        letter-spacing: 0.05em;
        margin-top: 12px;
        text-transform: uppercase;
    }

    .olv4-rail-controls {
        display: flex;
        gap: 8px;
    }

    .olv4-rail-controls button {
        align-items: center;
        background: var(--olv-white);
        border: 1px solid var(--olv-line);
        border-radius: 50%;
        color: var(--olv-ink);
        cursor: pointer;
        display: inline-flex;
        font-size: 16px;
        height: 44px; /* R7.3 target floor; matches the PDP twin in product-v3.css */
        justify-content: center;
        line-height: 1;
        padding: 0;
        width: 44px; /* R7.3 target floor; matches the PDP twin in product-v3.css */
    }

    .olv4-rail-controls button:disabled {
        color: var(--olv-line);
        cursor: default;
    }

    .olv4-standards-grid article {
        padding: 22px 20px;
    }
}

/* -------------------------------------------------------------- tablet 761–999 (D25) */
@media (min-width: 761px) {
    .olv4-hero-inner {
        gap: 24px;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        min-height: min(75vh, 720px);
    }

    .olv4-hero-copy {
        max-width: 560px;
    }

    .olv4-hero-vials {
        height: 100%;
        min-height: 420px;
    }

    .olv4-hero-vial--1 {
        --olv-vial-height: 45%;
        --olv-vial-left: 4%;
        --olv-vial-bottom: 6%;
    }

    .olv4-hero-vial--2 {
        --olv-vial-height: 30%;
        --olv-vial-left: 46%;
        --olv-vial-bottom: 50%;
    }

    .olv4-hero-vial--3 {
        --olv-vial-height: 35%;
        --olv-vial-left: 62%;
        --olv-vial-bottom: 8%;
    }

    .olv4-proof-grid {
        align-items: center;
        display: flex;
        justify-content: space-between;
        min-height: 44px;
        padding-block: 0; /* keep the .olv4-wrap inline padding on phones (R7.5) */
    }

    .olv4-product-grid {
        grid-template-columns: repeat(3, minmax(0, 220px));
        justify-content: center;
    }

    .olv4-standards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .olv4-offer-grid {
        align-items: center;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }

    .olv4-newsletter-grid {
        align-items: center;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .olv4-scope-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }
}

/* --------------------------------------------------------------- desktop ≥ 1000 */
@media (min-width: 1000px) {
    .olv4-hero-copy {
        max-width: 800px;
    }

    .olv4-hero-vial--1 {
        --olv-vial-height: 60%;
        --olv-vial-left: 6%;
        --olv-vial-bottom: 4%;
    }

    .olv4-hero-vial--2 {
        --olv-vial-height: 40%;
        --olv-vial-left: 46%;
        --olv-vial-bottom: 48%;
    }

    .olv4-hero-vial--3 {
        --olv-vial-height: 45%;
        --olv-vial-left: 64%;
        --olv-vial-bottom: 6%;
    }

    .olv4-product-grid {
        grid-template-columns: repeat(3, minmax(0, 300px));
    }

    .olv4-standards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .olv4-offer-figure {
        font-size: 210px;
    }
}

/* --------------------------------------------------------- reduced motion (§1 rule 8) */
/* Preview kill-switch: body.olv-reduced-motion-preview adds a class over every reveal
   primer in this file, so it wins on specificity alone (R6.6). */
.js body.olv-reduced-motion-preview [data-olv-hero-copy],
.js body.olv-reduced-motion-preview [data-olv-reveal],
.js body.olv-reduced-motion-preview .olv4-hero-vial,
.js body.olv-reduced-motion-preview .olv4-hero-film {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
}

/* Preview overrides of the float keyframes, parallax and card/pill transitions; the
   parallax JS writes only --olv-parallax-* custom properties, never an inline
   transform, so plain rules suffice (R6.6). */
body.olv-reduced-motion-preview .olv4-hero-bob {
    animation: none;
}

body.olv-reduced-motion-preview .olv4-hero-parallax {
    transform: none;
}

body.olv-reduced-motion-preview .olv4-card,
body.olv-reduced-motion-preview .olv4-pill,
body.olv-reduced-motion-preview .olv4-pill--secondary span,
body.olv-reduced-motion-preview .olv4-card-cta {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    /* OS-level mirror of the preview block. A media query adds no specificity, so the
       selector list repeats the .olv-ready / .is-visible variants to tie the (0,3,0)
       rules above and win by source order (R6.6: no !important needed). */
    .js [data-olv-hero-copy],
    .js .olv-ready [data-olv-hero-copy],
    .js [data-olv-reveal],
    .js [data-olv-reveal].is-visible,
    .js .olv4-hero-vial,
    .js .olv-ready .olv4-hero-vial,
    .js .olv4-hero-film,
    .js .olv-ready .olv4-hero-film {
        animation: none;
        opacity: 1;
        transform: none;
        transition: none;
    }

    .olv4-hero-bob {
        animation: none;
    }

    .olv4-hero-parallax {
        transform: none;
    }

    .olv4-hero-film-video {
        transition: none;
    }

    .olv4-card,
    .olv4-pill,
    .olv4-pill--secondary span,
    .olv4-card-cta {
        transition: none;
    }
}