/* ==========================================================================
   Promotions Page — Custom Stylesheet
   Conditionally enqueued only on page-promotions.php via
   scopione_enqueue_promotions_css() in functions.php. :root token
   redeclarations below do NOT leak to other surfaces.

   Design language ports /about/ — see scopione-about.css for the reference.
   Section coverage in this PROMO-1 batch: Hero + Final CTA.
   Sections 2-6 styled in PROMO-2 / PROMO-3.
   Scroll progress bar + fade animations in PROMO-4.
   ========================================================================== */


/* --------------------------------------------------------------------------
   CSS custom properties — mirrored from scopione-about.css to keep the
   promotions surface visually consistent with /about/ + /shop/ tokens.
   Brand colors (--sc-yellow, --sc-dark) are inherited globally from
   scopione-child.css and NOT redeclared here.
   -------------------------------------------------------------------------- */

:root {
    /* Typography clamps — same scale as /about/ + /shop/.
       PROMO-2-fix-11 May 27 2026: bumped --shop-body min 0.9→1rem (mobile
       body text now 16px min, hits WCAG comfortable-reading floor) and
       --shop-small min 0.75→0.8rem (12.8px min, better legibility on small
       UI labels). Max ceilings nudged up slightly for wide-screen polish. */
    --shop-h1: clamp(1.9rem, 4.5vw, 2.75rem);
    --shop-h2: clamp(1.55rem, 3.2vw, 2.1rem);
    --shop-body: clamp(1rem, 1.5vw, 1.1rem);
    --shop-small: clamp(0.8rem, 1.2vw, 0.9rem);

    /* Text colors */
    --shop-text-medium: rgba(255,255,255,0.82);
    --shop-text-dim: rgba(255,255,255,0.65);

    /* Section spacing */
    --shop-section-gap: clamp(3rem, 5vw, 4rem);
    --shop-section-gap-sm: clamp(2.5rem, 4vw, 3rem);

    /* Bootstrap 4 container horizontal padding — used by container-bleed sections */
    --sc-bs4-gutter: 15px;

    /* Shared gold horizontal-rule gradient — hero breadcrumb + headline */
    --sc-gold-rule: linear-gradient(
        to right,
        transparent,
        color-mix(in srgb, var(--sc-yellow) 30%, transparent) 30%,
        color-mix(in srgb, var(--sc-yellow) 50%, transparent) 50%,
        color-mix(in srgb, var(--sc-yellow) 30%, transparent) 70%,
        transparent
    );

    /* Border-radius scale — same as /about/ for cross-page parity.
         sm = 8px  — CTA buttons
         md = 10px — content images, cards
         lg = 12px — alternating-bg sections (metrics, spotlight)
         xl = 10px — review cards (semantic alias, kept consistent with /about/) */
    --sc-promo-radius-sm: 8px;
    --sc-promo-radius-md: 10px;
    --sc-promo-radius-lg: 12px;
    --sc-promo-radius-xl: 10px;

    /* Shadow tokens — 4-tier elevation scale, mobile-baseline `none`.
       Desktop ≥992px re-declares via @media block below. */
    --sc-promo-shadow-flat:   none;
    --sc-promo-shadow-soft:   none;
    --sc-promo-shadow-lifted: none;
    --sc-promo-shadow-hero:   none;
}

@media (min-width: 992px) {
    :root {
        --sc-promo-shadow-flat:   0 1px 0 rgba(17,17,17,.04);
        --sc-promo-shadow-soft:   0 2px 12px rgba(0,0,0,0.18);
        --sc-promo-shadow-lifted: 0 12px 28px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.08);
        --sc-promo-shadow-hero:   0 12px 30px rgba(0,0,0,0.8);
    }
}


/* --------------------------------------------------------------------------
   Text-wrap: balance on display headings — scoped to /promotions/ only.
   Prevents widow words on hero + section H2s. Silent no-op pre-Chrome 114.
   -------------------------------------------------------------------------- */

.page-template-page-promotions .promotions-hero-headline,
.page-template-page-promotions .sc-promo-section-title,
.page-template-page-promotions .sc-about-cta-title {
    text-wrap: balance;
}


/* ==========================================================================
   1. HERO — pixel-parity rhythm with /about/'s .scopione-about-hero
   Same dark cat-bg-2 background; new wrapper class to keep scoping isolated.
   ========================================================================== */

.scopione-promotions-hero {
    position: relative;
    background: url("/wp-content/themes/scopione/img/cat-bg-2.jpg") center / cover no-repeat;
    padding: clamp(1.75rem, 3vw, 2.5rem) 0 var(--shop-section-gap) 0;
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.scopione-promotions-hero .promotions-hero-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Breadcrumb — uppercase letter-spaced, WCAG AA contrast on dark hero bg */
.scopione-promotions-hero .scopione-breadcrumbs {
    font-size: var(--shop-small);
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
    color: rgba(255,255,255,0.52);
    font-weight: 500;
}

.scopione-promotions-hero .scopione-breadcrumbs .yoast-breadcrumbs {
    display: inline-block;
}

.scopione-promotions-hero .scopione-breadcrumbs a,
.scopione-promotions-hero .scopione-breadcrumbs a:visited {
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: color 0.2s ease;
}

.scopione-promotions-hero .scopione-breadcrumbs a:hover {
    color: var(--sc-yellow);
}

.scopione-promotions-hero .scopione-breadcrumbs a:focus-visible {
    color: var(--sc-yellow);
    outline: 2px solid var(--sc-yellow);
    outline-offset: 2px;
}

.scopione-promotions-hero .scopione-breadcrumbs .yoast-breadcrumbs span.separator {
    margin: 0 0.35em;
    color: rgba(255,255,255,0.62);
    transition: color 0.24s ease-in-out;
}

.scopione-promotions-hero .scopione-breadcrumbs .yoast-breadcrumbs a:hover + span.separator,
.scopione-promotions-hero .scopione-breadcrumbs .yoast-breadcrumbs a:focus-visible + span.separator {
    color: var(--sc-yellow);
}

.scopione-promotions-hero .scopione-breadcrumbs .breadcrumb_last,
.scopione-promotions-hero .scopione-breadcrumbs .breadcrumb_last strong {
    color: rgba(255,255,255,0.62);
    font-weight: 600;
}

/* Gold accent rule between breadcrumb and H1 — SHARED GRADIENT with headline::after */
.scopione-promotions-hero .scopione-breadcrumbs::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    max-width: 280px;
    margin: 1rem auto 1rem;
    background: var(--sc-gold-rule);
}

@media (max-width: 768px) {
    .scopione-promotions-hero .scopione-breadcrumbs::after {
        max-width: 180px;
    }
}

@media (max-width: 600px) {
    .scopione-promotions-hero .scopione-breadcrumbs::after {
        margin: 1rem auto 0.6rem;
    }
}

/* Eyebrow — small uppercase kicker above H1 (optional, ACF-driven) */
.scopione-promotions-hero .promotions-hero-eyebrow {
    font-size: var(--shop-small);
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--sc-yellow);
    margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* H1 — clamp(1.9rem, 4.5vw, 2.75rem) + gold underline accent */
.scopione-promotions-hero .promotions-hero-headline {
    font-size: var(--shop-h1);
    line-height: 1.2;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.85rem 0;
    letter-spacing: -0.03em;
    position: relative;
    display: inline-block;
    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.scopione-promotions-hero .promotions-hero-headline::after {
    content: "";
    display: block;
    height: 1px;
    max-width: 280px;
    width: 100%;
    margin: 1rem auto 0;
    background: var(--sc-gold-rule);
}

@media (max-width: 600px) {
    .scopione-promotions-hero .promotions-hero-headline::after {
        max-width: 180px;
        margin: 0.6rem auto 0;
    }
}

/* Tagline — PROMO-2-fix-11 May 27 2026: bumped to a slightly larger clamp
   so the hero subhead has more presence (was inheriting --shop-body which
   tops at 1.1rem after the token bump — this goes to 1.25rem on wide). */
.scopione-promotions-hero .promotions-hero-tagline {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.6;
    color: var(--shop-text-medium);
    margin: 0 auto 1.5rem auto;
    max-width: 700px;
}

/* Hero CTAs — dual buttons. Primary = solid gold pill, Secondary = ghost.
   Spaced 0.75rem gap on ≥576px, stacked on phones. */
.scopione-promotions-hero .promotions-hero-cta-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    max-width: 480px;
}

@media (min-width: 576px) {
    .scopione-promotions-hero .promotions-hero-cta-group {
        flex-direction: row;
        align-items: center;
        max-width: none;
    }
}

.scopione-promotions-hero .promotions-hero-primary-cta,
.scopione-promotions-hero .promotions-hero-secondary-cta {
    /* PROMO-2-fix-11 May 27 2026: bumped CTA font-size 0.85→0.9rem + slight
       padding bump for stronger touch-target on mobile (14.4px → 44+px tap). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 14px 28px;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--sc-promo-radius-sm);
    text-align: center;
    line-height: 1;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.scopione-promotions-hero .promotions-hero-primary-cta {
    background: var(--sc-yellow);
    color: #111;
    border: 1px solid var(--sc-yellow);
    box-shadow: 0 4px 14px rgba(255,190,61,0.25);
}

.scopione-promotions-hero .promotions-hero-primary-cta:hover,
.scopione-promotions-hero .promotions-hero-primary-cta:focus-visible {
    background: color-mix(in srgb, var(--sc-yellow) 78%, white);
    border-color: color-mix(in srgb, var(--sc-yellow) 78%, white);
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255,190,61,0.35);
    outline: none;
}

.scopione-promotions-hero .promotions-hero-primary-cta:focus-visible {
    outline: 2px solid var(--sc-yellow);
    outline-offset: 3px;
}

.scopione-promotions-hero .promotions-hero-secondary-cta {
    background: rgba(0,0,0,0.35);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
}

.scopione-promotions-hero .promotions-hero-secondary-cta:hover,
.scopione-promotions-hero .promotions-hero-secondary-cta:focus-visible {
    background: rgba(255,255,255,0.95);
    color: #111;
    border-color: rgba(255,255,255,0.95);
    transform: translateY(-2px);
    outline: none;
}

.scopione-promotions-hero .promotions-hero-secondary-cta:focus-visible {
    outline: 2px solid var(--sc-yellow);
    outline-offset: 3px;
}

.scopione-promotions-hero .promotions-cta-arrow {
    display: inline-block;
    transform: translateY(-1px);
}

/* Trust badge row — checkmark pills, dark translucent bg */
.scopione-promotions-hero .promotions-hero-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0 0;
    padding: 0;
}

.scopione-promotions-hero .promotions-hero-trust li {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--sc-promo-radius-sm);
    padding: 0.45rem 0.9rem;
    color: rgba(255,255,255,0.85);
    font-size: var(--shop-small);
    line-height: 1.4;
    letter-spacing: 0.02em;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.scopione-promotions-hero .promotions-hero-trust li::before {
    content: "✓";
    color: var(--sc-yellow);
    margin-right: 0.4em;
    font-weight: 700;
}


/* ==========================================================================
   Section eyebrow / title / lead — shared rhythm across PROMO-2/3 sections.
   ========================================================================== */

.sc-promo-section-header {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.sc-promo-eyebrow {
    font-size: var(--shop-small);
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--sc-yellow);
    margin: 0 0 0.5rem 0;
}

.sc-promo-section-title {
    font-size: var(--shop-h2);
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem 0;
    text-wrap: balance;
}

.sc-promo-section-lead {
    font-size: var(--shop-body);
    line-height: 1.6;
    color: var(--shop-text-medium);
    margin: 0 auto;
    max-width: 720px;
}


/* ==========================================================================
   2. TRUST METRICS — 4-tile strip directly under the hero.
   Light background to provide a soft anchor between the dark hero and the
   dark "How It Works" section that follows. 2x2 grid on mobile, 4-up desktop.
   ========================================================================== */

.sc-promo-metrics {
    padding: var(--shop-section-gap) 0;
    background: #f8f8f8;
    color: #111;
}

.sc-promo-metric {
    text-align: center;
    padding: 1rem 0.5rem;
    transition: transform 0.25s ease;
}

.sc-promo-metric:hover {
    transform: translateY(-2px);
}

.sc-promo-metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 0.6rem;
    color: var(--sc-yellow);
    background: rgba(255,190,61,0.08);
    border-radius: 50%;
    border: 1px solid rgba(255,190,61,0.25);
}

.sc-promo-metric-icon svg {
    width: 28px;
    height: 28px;
}

.sc-promo-metric-value {
    font-size: clamp(1.65rem, 3vw, 2.1rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #111;
    margin: 0 0 0.25rem 0;
}

.sc-promo-metric-unit {
    font-size: 0.65em;
    font-weight: 600;
    color: rgba(0,0,0,0.55);
    letter-spacing: 0.02em;
    margin-left: 0.15em;
}

.sc-promo-metric-label {
    font-size: var(--shop-small);
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.65);
    font-weight: 600;
}

@media (max-width: 768px) {
    .sc-promo-metrics {
        padding: var(--shop-section-gap-sm) 0;
    }
}


/* ==========================================================================
   3. HOW OUR PROMOTIONS WORK — 3-up knowledge-style card grid.
   Dark section with radial gradient bg (matches homepage Knowledge pattern).
   ========================================================================== */

.sc-promo-how-it-works {
    padding: var(--shop-section-gap) 0;
    background:
        radial-gradient(900px 600px at 50% 0%, rgba(255,190,61,0.07), transparent 70%),
        linear-gradient(180deg, #0c0c0c 0%, #1a1a1a 100%);
    color: #fff;
    position: relative;
}

/* PROMO-E May 29 2026: vertical gap between stacked cards on mobile. The
   markup uses Bootstrap's `g-4` gutter class, but this theme is BS4 where
   `g-4` does not exist (it is a BS5-only utility — Trap #56), so it was a
   silent no-op and the stacked cards touched edge-to-edge. BS4 columns carry
   horizontal padding but zero vertical spacing. `row-gap` supplies the missing
   vertical rhythm between wrapped flex lines — i.e. only when the 3 cards stack
   below 768px; at >=768px they sit on a single line so row-gap contributes
   nothing and the desktop horizontal gutters (column padding) are untouched.
   1.5rem matches the spacing g-4 was meant to apply. */
.sc-promo-how-it-works .row {
    row-gap: 1.5rem;
}

.sc-promo-how-card {
    background: #131313;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--sc-promo-radius-md);
    overflow: hidden;
    box-shadow: var(--sc-promo-shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sc-promo-how-card-icon {
    position: relative;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-yellow);
    background:
        radial-gradient(circle at 50% 46%, rgba(255,190,61,0.13), rgba(255,190,61,0) 66%),
        #0a0a0a;
}

.sc-promo-how-card-icon svg {
    width: clamp(58px, 8.5vw, 82px);
    height: clamp(58px, 8.5vw, 82px);
    filter: drop-shadow(0 6px 16px rgba(255,190,61,0.22));
    transition: transform 0.4s ease;
}

@media (min-width: 992px) {
    .sc-promo-how-card:hover .sc-promo-how-card-icon svg {
        transform: scale(1.07);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-promo-how-card-icon svg {
        transition: none;
    }
    .sc-promo-how-card:hover .sc-promo-how-card-icon svg {
        transform: none;
    }
}

.sc-promo-how-card-body {
    padding: 1.25rem 1.25rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.sc-promo-how-card-title {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    line-height: 1.3;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem 0;
}

.sc-promo-how-card-desc {
    font-size: var(--shop-body);
    line-height: 1.6;
    color: var(--shop-text-dim);
    margin: 0 0 1.25rem 0;
    flex: 1;
}

.sc-promo-how-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    align-self: center;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--sc-yellow);
    border-radius: var(--sc-promo-radius-sm);
    color: var(--sc-yellow);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    background: rgba(255,190,61,0.04);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.sc-promo-how-card-cta:hover,
.sc-promo-how-card-cta:focus-visible {
    background: var(--sc-yellow);
    color: #111;
    outline: none;
    transform: translateY(-1px);
}

.sc-promo-how-card-cta:focus-visible {
    outline: 2px solid var(--sc-yellow);
    outline-offset: 3px;
}

@media (min-width: 992px) {
    .sc-promo-how-card:hover {
        /* PROMO-A May 29 2026: harmonize with the page-signature hover glow.
           Was `0 2px 12px rgba(0,0,0,0.4), 0 0 30px rgba(255,190,61,0.3)` —
           the gold glow ran hot vs the 0.18 used by gallery/banner/promo cards,
           and the 0.4 black drop read as a dead smudge on the #131313 card
           (Trap #54: dark-bg cards need a light black alpha). Now reuses the
           resting soft token + the canonical 0.18 gold glow. */
        transform: translateY(-3px);
        box-shadow:
            var(--sc-promo-shadow-soft),
            0 0 30px rgba(255,190,61,0.18);
    }
}

@media (max-width: 768px) {
    .sc-promo-how-it-works {
        padding: var(--shop-section-gap-sm) 0;
    }
}


/* ==========================================================================
   4. FEATURED SPOTLIGHT — 2-column Carbon Lab-style block.
   Left: editorial copy + 3-metric strip + dual CTAs + trust pills.
   Right: product card with image + title + tagline + description + link.
   ========================================================================== */

.sc-promo-spotlight {
    position: relative;
    padding: var(--shop-section-gap) 0;
    background:
        radial-gradient(1200px 600px at 20% -10%, rgba(255,190,61,0.12) 0%, transparent 70%),
        radial-gradient(800px 400px at 80% 110%, rgba(255,190,61,0.06) 0%, transparent 70%),
        linear-gradient(#111, #000 70%);
    overflow: hidden;
    isolation: isolate;
    border-top: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    color: #fff;
}

.sc-promo-spotlight-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 992px) {
    .sc-promo-spotlight-inner {
        grid-template-columns: 1fr 1fr;
        gap: 3.5rem;
    }
}

.sc-promo-spotlight-eyebrow {
    font-size: var(--shop-small);
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--sc-yellow);
    margin: 0 0 0.5rem 0;
}

.sc-promo-spotlight-headline {
    font-size: var(--shop-h2);
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0 0 1rem 0;
    text-wrap: balance;
}

.sc-promo-spotlight-intro {
    font-size: var(--shop-body);
    line-height: 1.65;
    color: var(--shop-text-medium);
    margin: 0 0 1.5rem 0;
}

/* 3-metric strip */
.sc-promo-spotlight-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0 0 1.5rem 0;
}

.sc-promo-spotlight-metric {
    line-height: 1.2;
}

.sc-promo-spotlight-metric-value {
    font-size: clamp(1.35rem, 2.5vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sc-yellow);
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.sc-promo-spotlight-metric-unit {
    font-size: var(--shop-small);
    color: var(--shop-text-dim);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-top: 0.15rem;
}

/* PROMO-H May 29 2026: thin gold dividers between the three savings metrics
   at >=576px (where they sit in one row; below that they may wrap and a left
   border would read oddly). The equal 1.5rem flex gap above + 1.5rem padding
   here center the divider between the values. */
@media (min-width: 576px) {
    .sc-promo-spotlight-metric + .sc-promo-spotlight-metric {
        border-left: 1px solid color-mix(in srgb, var(--sc-yellow) 28%, transparent);
        padding-left: 1.5rem;
    }
}

/* CTA group */
.sc-promo-spotlight-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1.25rem 0;
}

.sc-promo-spotlight-cta-primary,
.sc-promo-spotlight-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 12px 22px;
    border-radius: var(--sc-promo-radius-sm);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    transition: all 0.25s ease;
}

.sc-promo-spotlight-cta-primary {
    background: var(--sc-yellow);
    color: #111;
    border: 1px solid var(--sc-yellow);
    position: relative; /* PROMO-H: anchor + clip the shine sweep */
    overflow: hidden;
}

/* PROMO-H May 29 2026: gold-pill shine sweep on hover — clones the
   .sc-about-cta-btn pattern used site-wide on primary CTAs. White sliver on
   gold reads clearly (cf. Trap: gold-on-gold shine is invisible). */
.sc-promo-spotlight-cta-primary::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -40%;
    width: 55%;
    height: 220%;
    background: linear-gradient(120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.55) 45%,
        rgba(255,255,255,0) 100%);
    transform: translateX(-140%) rotate(10deg);
    transition: transform 0.6s ease;
    pointer-events: none;
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
    .sc-promo-spotlight-cta-primary:hover::before {
        transform: translateX(260%) rotate(10deg);
    }
}

.sc-promo-spotlight-cta-primary:hover,
.sc-promo-spotlight-cta-primary:focus-visible {
    background: color-mix(in srgb, var(--sc-yellow) 78%, white);
    border-color: color-mix(in srgb, var(--sc-yellow) 78%, white);
    color: #000;
    transform: translateY(-2px);
    outline: none;
}

.sc-promo-spotlight-cta-primary:focus-visible {
    outline: 2px solid var(--sc-yellow);
    outline-offset: 3px;
}

.sc-promo-spotlight-cta-secondary {
    background: rgba(255,255,255,0.05);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
}

.sc-promo-spotlight-cta-secondary:hover,
.sc-promo-spotlight-cta-secondary:focus-visible {
    background: rgba(255,255,255,0.95);
    color: #111;
    border-color: rgba(255,255,255,0.95);
    transform: translateY(-2px);
    outline: none;
}

.sc-promo-spotlight-cta-secondary:focus-visible {
    outline: 2px solid var(--sc-yellow);
    outline-offset: 3px;
}

/* Trust pills below CTAs */
.sc-promo-spotlight-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin: 0;
    padding: 0;
    color: var(--shop-text-dim);
    font-size: var(--shop-small);
}

.sc-promo-spotlight-trust li::before {
    content: "✓";
    color: var(--sc-yellow);
    margin-right: 0.4em;
    font-weight: 700;
}

/* Side product card */
.sc-promo-spotlight-card {
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--sc-promo-radius-md);
    overflow: hidden;
    position: relative; /* PROMO-H: containing block for the stretched card link */
    box-shadow: var(--sc-promo-shadow-lifted);
    /* PROMO-G May 29 2026: hover "pop" matching the How-It-Works cards —
       lift + page-signature gold under-glow (kept on top of the card's
       existing lifted shadow so the dark elevation grows rather than shrinks). */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sc-promo-spotlight-card-img {
    overflow: hidden; /* clip the hover zoom to the image area */
}

.sc-promo-spotlight-card-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

/* PROMO-G: featured-vehicle image zoom on card hover (mirrors How-It-Works). */
.sc-promo-spotlight-card:hover .sc-promo-spotlight-card-img img {
    transform: scale(1.04);
}

@media (min-width: 992px) {
    .sc-promo-spotlight-card:hover {
        transform: translateY(-3px);
        box-shadow:
            var(--sc-promo-shadow-lifted),
            0 0 30px rgba(255,190,61,0.18);
    }
}

.sc-promo-spotlight-card-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.sc-promo-spotlight-card-eyebrow {
    font-size: var(--shop-small);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--sc-yellow);
    margin: 0 0 0.3rem 0;
}

.sc-promo-spotlight-card-title {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.3;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.4rem 0;
    letter-spacing: -0.01em;
}

.sc-promo-spotlight-card-tagline {
    font-size: var(--shop-body);
    color: var(--shop-text-medium);
    margin: 0 0 0.75rem 0;
    font-style: italic;
}

.sc-promo-spotlight-card-desc {
    font-size: var(--shop-body);
    line-height: 1.6;
    color: var(--shop-text-dim);
    margin: 0 0 1rem 0;
}

.sc-promo-spotlight-card-link {
    color: var(--sc-yellow);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

.sc-promo-spotlight-card-link:hover,
.sc-promo-spotlight-card-link:focus-visible {
    color: color-mix(in srgb, var(--sc-yellow) 78%, white);
    text-decoration: underline;
    outline: none;
}

.sc-promo-spotlight-card-link:focus-visible {
    outline: 2px solid var(--sc-yellow);
    outline-offset: 3px;
}

/* PROMO-H May 29 2026: make the whole Featured Vehicle card clickable — the
   visible "Shop Aventador Parts" link's ::after is stretched to cover the card
   (Bootstrap stretched-link technique). The card holds only this one link, so
   there's no nested-anchor conflict. Card is position:relative (above). */
.sc-promo-spotlight-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

@media (max-width: 991px) {
    .sc-promo-spotlight {
        text-align: center;
    }
    .sc-promo-spotlight-metrics,
    .sc-promo-spotlight-cta-group,
    .sc-promo-spotlight-trust {
        justify-content: center;
    }
    .sc-promo-spotlight-right {
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .sc-promo-spotlight {
        padding: var(--shop-section-gap-sm) 0;
    }
}


/* ==========================================================================
   WYSIWYG CONTENT WRAPPER — preserves the existing /promotions/ page content
   (intro paragraphs, 6 promotion cards, vehicle gallery cards, outro paragraphs)
   between the Hero and Final CTA sections.

   Light background to provide contrast against the dark hero/final-cta sections
   above and below. Mirrors /about/'s `.sc-about-content-wrapper` rhythm pattern
   so the WYSIWYG cards (image + text columns) render with comfortable spacing.
   ========================================================================== */

.sc-promotions-content-wrapper {
    padding: var(--shop-section-gap) 0;
    background: #f5f5f5;
    color: #222;
}

/* Container width matches /about/ — caps content readability width on ultrawide */
.sc-promotions-content-wrapper > .container {
    max-width: 1140px;
}

/* Reset article + entry-content default margins so block-editor layout doesn't
   pile on extra spacing on top of our section padding */
.sc-promotions-content-wrapper .sc-promotions-content {
    margin: 0;
}

.sc-promotions-content-wrapper .entry-content {
    font-size: var(--shop-body);
    line-height: 1.65;
    color: #222;
}

.sc-promotions-content-wrapper .entry-content > * + * {
    margin-top: 1rem;
}

/* Heading inside WYSIWYG (h2/h3 from blocks) — match section-title rhythm */
.sc-promotions-content-wrapper .entry-content h2,
.sc-promotions-content-wrapper .entry-content h3 {
    color: #111;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.sc-promotions-content-wrapper .entry-content h2 {
    font-size: var(--shop-h2);
}

.sc-promotions-content-wrapper .entry-content h3 {
    font-size: clamp(1.15rem, 2vw, 1.35rem);
}

/* Links — gold accent on hover */
.sc-promotions-content-wrapper .entry-content a {
    color: #b9821f;
    text-decoration: underline;
    text-decoration-color: rgba(255,190,61,0.55);
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.sc-promotions-content-wrapper .entry-content a:hover,
.sc-promotions-content-wrapper .entry-content a:focus-visible {
    color: #8a5e0c;
    text-decoration-color: var(--sc-yellow);
}

/* Images inside WYSIWYG blocks — soft rounded corners, no overflow */
.sc-promotions-content-wrapper .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sc-promo-radius-md);
}

/* Block-editor columns (Multiple Parts Discount, Free Shipping, etc.) —
   ensure image-left + text-right cards have comfortable spacing between */
.sc-promotions-content-wrapper .entry-content .wp-block-columns {
    gap: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Block-editor paragraph default spacing — tighten the gap WordPress adds
   between paragraphs (was 1.75em — too loose for promo card descriptions) */
.sc-promotions-content-wrapper .entry-content p {
    margin-bottom: 1rem;
}

.sc-promotions-content-wrapper .entry-content p:last-child {
    margin-bottom: 0;
}

/* "Expires MM/DD/YYYY" style emphasis — small uppercase letter-spaced */
.sc-promotions-content-wrapper .entry-content em:has(+ br),
.sc-promotions-content-wrapper .entry-content small {
    color: rgba(0,0,0,0.55);
    font-size: var(--shop-small);
    letter-spacing: 0.03em;
}

/* Tablet + mobile spacing */
@media (max-width: 768px) {
    .sc-promotions-content-wrapper {
        padding: var(--shop-section-gap-sm) 0;
    }
    .sc-promotions-content-wrapper .entry-content .wp-block-columns {
        flex-direction: column;
    }
}


/* --------------------------------------------------------------------------
   PROMO-2-fix-3 May 2026: 3×2 grid of vertical-stacked promo cards.
   Markup is in post_content (.card > .row.no-gutters > .col-md-4 [img] /
   .col-md-8 .card-body). Internal layout flipped from horizontal to vertical
   so the icon sits ON TOP of the text. Cards arranged in a CSS Grid via
   `.entry-content` (3 cols desktop / 2 cols tablet / 1 col mobile).
   Non-card direct children (intro/outro paragraphs, hr separator, gallery,
   bottom banner) span all grid columns.

   Earlier PROMO-2-fix-2's horizontal layout + 42%/58% column ratio overrides
   are reverted here in favor of the new vertical layout.
   -------------------------------------------------------------------------- */

/* CSS Grid on the entry-content wrapper — 3-col on desktop.
   PROMO-2-fix-3d May 2026 (Stan ask "blocks same height for each row"):
   reverted to default `align-items: stretch` so cards in the same row
   equalize to the tallest sibling's height. Content tops out from the
   top of the card; any extra space sits as bottom padding inside the
   card body (NOT a large gap between desc and Expires pill, because
   `margin-top: auto` was removed in fix-3c). */
.sc-promotions-content-wrapper .entry-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .sc-promotions-content-wrapper .entry-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 1.25rem;
    }
}

@media (min-width: 992px) {
    .sc-promotions-content-wrapper .entry-content {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Non-card children span all grid columns so they retain the full-width feel
   (intro/outro pillow cards, hr separator, vehicle gallery, bottom banner). */
.sc-promotions-content-wrapper .entry-content > p,
.sc-promotions-content-wrapper .entry-content > hr,
.sc-promotions-content-wrapper .entry-content > .wp-block-separator,
.sc-promotions-content-wrapper .entry-content > .wp-block-gallery,
.sc-promotions-content-wrapper .entry-content > .wp-block-image,
.sc-promotions-content-wrapper .entry-content > .sc-promo-intro-card,
.sc-promotions-content-wrapper .entry-content > .sc-promo-outro-card,
.sc-promotions-content-wrapper .entry-content > h1,
.sc-promotions-content-wrapper .entry-content > h2,
.sc-promotions-content-wrapper .entry-content > h3 {
    grid-column: 1 / -1;
    margin-top: 0;
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   PROMO-2-fix-6 May 27 2026: white-pillow cards wrapping intro + outro
   paragraphs. Mirror the 6 promo cards' styling — bordered, rounded, soft
   shadow, desktop hover lift with gold under-glow. Text centered.
   -------------------------------------------------------------------------- */

.sc-promotions-content-wrapper .sc-promo-intro-card,
.sc-promotions-content-wrapper .sc-promo-outro-card {
    background: #fff;
    border: 1px solid rgba(17,17,17,0.08);
    border-radius: var(--sc-promo-radius-md);
    padding: 1.5rem 1.75rem;
    text-align: center;
    box-shadow: var(--sc-promo-shadow-flat);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

@media (min-width: 992px) {
    .sc-promotions-content-wrapper .sc-promo-intro-card,
    .sc-promotions-content-wrapper .sc-promo-outro-card {
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    .sc-promotions-content-wrapper .sc-promo-intro-card:hover,
    .sc-promotions-content-wrapper .sc-promo-outro-card:hover {
        transform: translateY(-3px);
        border-color: rgba(255,190,61,0.4);
        box-shadow:
            0 2px 12px rgba(0,0,0,0.08),
            0 0 30px rgba(255,190,61,0.18);
    }
}

.sc-promotions-content-wrapper .sc-promo-intro-card p,
.sc-promotions-content-wrapper .sc-promo-outro-card p {
    font-size: var(--shop-body);
    line-height: 1.65;
    color: #333;
    margin: 0 0 1rem 0;
    text-align: center;
}

.sc-promotions-content-wrapper .sc-promo-intro-card p:last-child,
.sc-promotions-content-wrapper .sc-promo-outro-card p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .sc-promotions-content-wrapper .sc-promo-intro-card,
    .sc-promotions-content-wrapper .sc-promo-outro-card {
        padding: 1.25rem 1.15rem;
    }
}

@media (hover: none) {
    .sc-promotions-content-wrapper .sc-promo-intro-card:hover,
    .sc-promotions-content-wrapper .sc-promo-outro-card:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-promotions-content-wrapper .sc-promo-intro-card,
    .sc-promotions-content-wrapper .sc-promo-outro-card {
        transition: none;
    }
}


.sc-promotions-content-wrapper .card {
    background: #fff;
    border: 1px solid rgba(17,17,17,0.08);
    border-radius: var(--sc-promo-radius-md);
    overflow: hidden;
    /* PROMO-2-fix-7 May 27 2026: nuke Bootstrap `.mb-3` (16px margin-bottom)
       + any inherited margin-top so the only vertical spacing between rows
       is the grid's `row-gap` (24px). Without !important, Bootstrap's
       `.mb-3 { margin-bottom: 1rem !important }` was winning the cascade. */
    margin: 0 !important;
    box-shadow: var(--sc-promo-shadow-flat);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

@media (min-width: 992px) {
    .sc-promotions-content-wrapper .card {
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    .sc-promotions-content-wrapper .card:hover {
        transform: translateY(-3px);
        border-color: rgba(255,190,61,0.4);
        box-shadow:
            0 2px 12px rgba(0,0,0,0.08),
            0 0 30px rgba(255,190,61,0.18);
    }
}

/* Internal row layout — flipped from horizontal (image-left + text-right) to
   vertical (image-on-top + text-below) so cards stack uniformly in the 3-col
   grid above. PROMO-2-fix-3b May 2026: fix-3a was using `flex: 0 0 100%` on
   both columns in a flex-column flow, which claims `flex-basis: 100%` in the
   HEIGHT direction (column main axis) — image col swallowed all available
   height and text col overflowed + got clipped by `overflow: hidden` on the
   card shell. Result: text completely disappeared visually. Corrected to
   `flex: 0 0 auto` on the image col (lets aspect-ratio determine its height)
   and `flex: 1 1 auto` on the text col (grows to fill remaining row height). */
.sc-promotions-content-wrapper .card .row.no-gutters {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    flex: 1;
}

.sc-promotions-content-wrapper .card .col-md-4 {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    padding: 0;
    background: #e8e8e8;
    overflow: hidden;
    /* PROMO-2-fix-3c May 2026: removed aspect-ratio 5/4 — source images are
       400×301 (4:3) and the 5:4 frame added letterbox whitespace top+bottom.
       Let image render at natural ratio = column resizes to image height. */
}

.sc-promotions-content-wrapper .card .col-md-8 {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sc-promotions-content-wrapper .card-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}

/* Body — comfortable padding, content flexes to fill remaining card height.
   PROMO-2-fix-5d May 27 2026: bottom padding 1rem→0.5rem to further reduce
   gap below the last text/badge. Also center-align all body content. */
.sc-promotions-content-wrapper .card-body {
    /* PROMO-M May 29 2026: bottom padding 0.5rem -> 1.25rem (matches the top).
       The last line (and the Expires pill) was almost touching the card's
       bottom border, especially on the no-badge cards. */
    padding: 1.25rem 1.35rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.sc-promotions-content-wrapper .card-title {
    /* PROMO-2-fix-5d May 27 2026: bumped clamp range so mobile title hits
       ~1.3rem (20.8px) — bigger anchor at small viewports. Desktop max
       1.5rem (24px) vs prior 1.35rem (21.6px). */
    font-size: clamp(1.3rem, 2.5vw, 1.5rem);
    line-height: 1.3;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.01em;
    margin: 0 0 0.85rem 0;
    text-align: center;
}

/* PROMO-2-fix-4 May 27 2026: selectors broadened to also catch the `<p>`
   tags rendered by the ACF WYSIWYG description field (which don't carry
   the `card-text` class that Stan's previous custom HTML had). */
.sc-promotions-content-wrapper .card-text,
.sc-promotions-content-wrapper .card-body p {
    font-size: var(--shop-body);
    line-height: 1.65;
    color: #333;
    margin: 0 0 0.85rem 0;
}

.sc-promotions-content-wrapper .card-body > h5 + p,
.sc-promotions-content-wrapper .card-body > *:first-child + p {
    margin-top: 0;
}

.sc-promotions-content-wrapper .card-text:last-child,
.sc-promotions-content-wrapper .card-body p:last-child {
    margin-bottom: 0;
}

/* PROMO-2-fix-5c May 27 2026: removed `margin-top: auto` on the bottom-most
   card-text. Stan flagged the gap it produced between description and Expires
   pill (or last paragraph on no-badge cards) as visible "padding" — wanted
   it removed. Now content flows naturally from top; any unfilled card-body
   height (from row equalization on shorter cards) sits below the content
   as the body's natural bottom area. Text bumps in fix-5b minimize this. */

/* Inline anchor links inside card body — gold accent (Contact Us, Testimonials) */
.sc-promotions-content-wrapper .card-text a,
.sc-promotions-content-wrapper .card-body p a {
    /* PROMO-O May 29 2026: was off-brand brown-gold (#b9821f / #8a5e0c). Now uses
       the scopione link convention — brand gold var(--sc-yellow) resting,
       lighter #ffd877 on hover — matching `.hover-arrow` used site-wide. */
    color: var(--sc-yellow);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255,190,61,0.5);
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.sc-promotions-content-wrapper .card-text a:hover,
.sc-promotions-content-wrapper .card-text a:focus-visible,
.sc-promotions-content-wrapper .card-body p a:hover,
.sc-promotions-content-wrapper .card-body p a:focus-visible {
    color: #ffd877;
    text-decoration-color: var(--sc-yellow);
}

/* "Expires MM/DD/YYYY" badge — upgrade from muted small to a gold-tinted pill */
.sc-promotions-content-wrapper .card-text > small.text-muted,
.sc-promotions-content-wrapper .card small.text-muted {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.3rem 0.7rem;
    background: rgba(255,190,61,0.1);
    border: 1px solid rgba(255,190,61,0.35);
    border-radius: 999px;
    color: #6e4e0c;
    font-size: var(--shop-small);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Touch + reduced motion overrides */
@media (hover: none) {
    .sc-promotions-content-wrapper .card:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-promotions-content-wrapper .card {
        transition: none;
    }
}

/* Mobile body padding — slightly tighter on phones */
@media (max-width: 767.98px) {
    .sc-promotions-content-wrapper .card-body {
        padding: 1.1rem 1.15rem 1.1rem; /* PROMO-M: bottom 0.5rem -> 1.1rem (match top) */
    }
}


/* --------------------------------------------------------------------------
   Vehicle gallery (9 cars) + bottom banner image — light styling so the
   block-gallery cards render cleanly inside the new wrapper.
   -------------------------------------------------------------------------- */

/* PROMO-2-fix-4-gallery-3 May 27 2026: discovered the source gallery images
   are 2000×2000 SQUARE (1:1 aspect). Stan's "images are 1x1" wasn't about
   CSS — he was describing the actual image dimensions while reporting that
   prior aspect-ratio: 4/3 + object-fit: cover was cropping the SCOPIONE
   bottom-bar branding (top + bottom edges). Also fixing the 32px top margin
   that was leaking from a browser/parent-theme default `figure { margin }`
   rule (my prior `margin: 0` without !important lost the cascade fight). */
.sc-promotions-content-wrapper .wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    align-items: start;
}

@media (max-width: 991px) {
    .sc-promotions-content-wrapper .wp-block-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .sc-promotions-content-wrapper .wp-block-gallery {
        grid-template-columns: 1fr;
    }
}

.sc-promotions-content-wrapper .entry-content .wp-block-gallery .wp-block-image {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--sc-promo-radius-md);
    overflow: hidden;
    background: #1a1a1a;
    /* PROMO-L May 29 2026: scopione-gray (#bfbfbf) resting frame on each gallery
       tile, turning the same yellow as the bottom-banner border on hover (below).
       `outline` at offset 0 follows the radius, adds no layout shift, and sits at
       the edge so the tile image can't cover it. */
    outline: 2px solid #bfbfbf;
    outline-offset: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease, outline-color 0.25s ease;
}

/* PROMO-2-fix-4-gallery-4 May 27 2026: the `display: block` rules below were
   losing the cascade to some parent-theme/plugin rule that was setting
   `display: inline-block` on `.wp-block-image > a` and `> img`. Result: a
   ~6px gap was rendered below the image (the descender baseline reserved
   for inline-aligned elements), and the figure's dark `#1a1a1a` bg leaked
   through that gap. Bumped to `!important` + added `vertical-align: top`
   as a belt-and-suspenders fix that kills any baseline gap regardless of
   the display mode. */
.sc-promotions-content-wrapper .wp-block-gallery .wp-block-image a {
    display: block !important;
    width: 100%;
    cursor: zoom-in;
    vertical-align: top;
    line-height: 0;
}

/* Square aspect-ratio matches the source images (2000×2000) and reserves
   layout space even before lazy-load triggers, so the figure doesn't
   collapse to 33px tall + leak the dark bg below the image. */
.sc-promotions-content-wrapper .wp-block-gallery .wp-block-image img {
    display: block !important;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    vertical-align: top;
}

@media (min-width: 992px) {
    /* PROMO-2-fix-8b May 27 2026: removed the 1.04× image zoom — Stan wanted
       the gallery tile hover to be IDENTICAL to promo card hover (lift + gold
       glow only, no inner image scaling). */
    .sc-promotions-content-wrapper .wp-block-gallery .wp-block-image:hover {
        transform: translateY(-3px);
        outline-color: var(--sc-yellow); /* PROMO-L: gray -> yellow on hover (matches the banner) */
        box-shadow:
            0 2px 12px rgba(0,0,0,0.08),
            0 0 30px rgba(255,190,61,0.18);
    }
}

/* Bottom banner image (Carbon Fiber Auto Parts & Accessories — Click Here…)
   PROMO-2-fix-8c May 27 2026: applied the same baseline-gap kill as the
   gallery images — `<a>` + `<img>` get display:block !important +
   vertical-align: top + line-height: 0, so on hover the figure doesn't
   reveal a 6px descender gap below the image (Stan: "bottom extension
   on hoover, same as image cards used to have"). */
.sc-promotions-content-wrapper .wp-block-image.size-large {
    margin-top: 2rem;
    margin-bottom: 0;
    padding: 0;
    border-radius: var(--sc-promo-radius-md);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    line-height: 0;
}

.sc-promotions-content-wrapper .wp-block-image.size-large a {
    display: block !important;
    line-height: 0;
    vertical-align: top;
    position: relative; /* PROMO-J: containing block for the "Picture Galleries" chip */
}

.sc-promotions-content-wrapper .wp-block-image.size-large img {
    display: block !important;
    width: 100%;
    height: auto;
    vertical-align: top;
}

@media (min-width: 992px) {
    /* PROMO-2-fix-8: bottom banner hover matches gallery + promo cards. */
    .sc-promotions-content-wrapper .wp-block-image.size-large:hover {
        transform: translateY(-3px);
        box-shadow:
            0 2px 12px rgba(0,0,0,0.08),
            0 0 30px rgba(255,190,61,0.18);
    }
}

/* PROMO-J May 29 2026: "Picture Galleries" chip on the bottom banner — clones
   the /shop/ gallery-card make-box (.gallery-chip-make): faint-yellow box +
   yellow border + yellow text at rest, then white letters + gold glow when the
   banner is hovered. Top-left placement clears the banner's baked-in center
   text + the top-right S-logo. Decorative (pointer-events:none) so the whole
   banner stays the click target to /auto-tuning/. */
.sc-promo-banner-chip {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 2;
    background: rgba(255,190,61,0.25);
    color: var(--sc-yellow);
    border: 1px solid rgba(255,190,61,0.5);
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    font-size: clamp(0.8rem, 1.6vw, 0.95rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.02em;
    pointer-events: none;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (min-width: 992px) {
    .sc-promotions-content-wrapper .wp-block-image.size-large a:hover .sc-promo-banner-chip {
        background: rgba(255,190,61,0.3);
        color: #fff;
        border-color: rgba(255,190,61,0.7);
        box-shadow: 0 0 20px rgba(255,190,61,0.75);
    }
}

/* PROMO-K May 29 2026 (+ K-fix): yellow border on the bottom banner on hover
   (Stan request). Scoped to `.sc-promo-banner` so it does NOT hit the
   vehicle-gallery tiles (which are also `.wp-block-image.size-large`). Uses
   `outline` — a separate property from the existing hover box-shadow lift/glow,
   so no cascade conflict and no layout shift; follows the banner's border-radius.
   K-fix: outline-offset MUST be >= 0 here. The banner `<a>` is position:relative
   (it anchors the chip), so it paints ABOVE the figure; a NEGATIVE offset draws
   the ring INSIDE the figure where the positioned image then paints over it —
   the border flashed on load, then vanished once the image rendered. offset:0
   keeps the ring at the edge, outside the image's box, so it stays visible. */
@media (min-width: 992px) {
    .sc-promotions-content-wrapper .sc-promo-banner:hover {
        outline: 2px solid var(--sc-yellow);
        outline-offset: 0;
    }
}

/* Separator inside the WYSIWYG (the <hr> between cards and gallery) — match
   the rest of the page's gold accent rule rhythm */
.sc-promotions-content-wrapper .wp-block-separator {
    border: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        color-mix(in srgb, var(--sc-yellow) 25%, transparent) 40%,
        color-mix(in srgb, var(--sc-yellow) 40%, transparent) 50%,
        color-mix(in srgb, var(--sc-yellow) 25%, transparent) 60%,
        transparent
    );
    margin: 2.5rem auto;
    max-width: 320px;
}


/* ==========================================================================
   7. FINAL CTA — cloned from /about/'s `.sc-about-cta` + `.sc-about-cta-btn`
   so the promotions page closes with the same premium dark-translucent
   gold-border pill used across /about/, /shop/, and the homepage.
   ========================================================================== */

.sc-about-cta {
    background: linear-gradient(180deg, #1a1a1a 0%, #000 100%);
    color: #f5f5f5;
    padding: var(--shop-section-gap-sm) 0 var(--shop-section-gap) 0;
    text-align: center;
}

.sc-about-cta-title {
    font-size: var(--shop-h2);
    color: #fff;
    margin-bottom: 0.85rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.sc-about-cta-text {
    color: rgba(255,255,255,0.65);
    margin-bottom: 1.25rem;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.sc-about-cta-btn {
    /* Dark-translucent + gold-border pill with diagonal shine sweep on hover.
       Mirrors /about/ + /shop/ + homepage byte-for-byte for cross-page parity. */
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,15,15,0.6);
    border: 1px solid var(--sc-yellow);
    border-radius: var(--sc-promo-radius-sm);
    padding: 14px 30px;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
    min-width: 280px;
    box-shadow: var(--sc-promo-shadow-hero);
    transition: all 0.3s ease;
}

.sc-about-cta-btn::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -40%;
    width: 55%;
    height: 220%;
    background: linear-gradient(120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.55) 45%,
        rgba(255,255,255,0) 100%);
    transform: translateX(-140%) rotate(10deg);
    transition: transform 0.6s ease;
    pointer-events: none;
    z-index: 2;
}

@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
    .sc-about-cta-btn:hover::before {
        transform: translateX(260%) rotate(10deg);
    }
}

.sc-about-cta-btn .sc-cta-arrow {
    display: inline-block;
    transform: translateY(-2px);
    margin-left: 2px;
}

.sc-about-cta-btn .sc-cta-label-mobile {
    display: none;
}

@media (max-width: 575.98px) {
    .sc-about-cta-btn .sc-cta-label-full {
        display: none;
    }
    .sc-about-cta-btn .sc-cta-label-mobile {
        display: inline;
    }
}

.sc-about-cta-btn:hover {
    background: var(--sc-yellow);
    border-color: var(--sc-yellow);
    color: #000;
    font-weight: 700;
    text-shadow:
        0 0 8px rgba(0,0,0,0.4),
        0 0 16px rgba(0,0,0,0.2);
    box-shadow:
        0 0 25px color-mix(in srgb, var(--sc-yellow) 60%, transparent),
        0 10px 40px color-mix(in srgb, var(--sc-yellow) 30%, transparent);
    transform: translateY(-2px);
}

.sc-about-cta-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--sc-yellow) 30%, transparent);
}

.sc-about-cta-btn:focus-visible {
    outline: 2px solid var(--sc-yellow);
    outline-offset: 3px;
    background: var(--sc-yellow);
    color: #000;
    font-weight: 700;
    text-shadow:
        0 0 8px rgba(0,0,0,0.4),
        0 0 16px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
    .sc-about-cta-btn {
        min-width: 200px;
        font-size: 0.8rem;
        padding: 12px 20px;
    }
}


/* --------------------------------------------------------------------------
   Touch devices — disable hover lift, add tap feedback
   -------------------------------------------------------------------------- */

@media (hover: none) {
    .scopione-promotions-hero .promotions-hero-primary-cta:hover,
    .scopione-promotions-hero .promotions-hero-secondary-cta:hover,
    .sc-about-cta-btn:hover {
        transform: none;
    }
}


/* --------------------------------------------------------------------------
   Reduced motion — disable transitions on touched surfaces
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .scopione-promotions-hero .promotions-hero-primary-cta,
    .scopione-promotions-hero .promotions-hero-secondary-cta,
    .sc-about-cta-btn,
    .sc-about-cta-btn::before {
        transition: none;
    }
}


/* ==========================================================================
   PROMO-B May 29 2026 — Gold scroll-progress bar (tablet+, >=768px)

   Thin 2px gold bar pinned to viewport top; width tracks scroll depth via
   pure-CSS `animation-timeline: scroll(root)`. Zero JS. Cloned from /about/'s
   R3-POLISH-SCROLL + homepage's HOME-SCROLL-PROGRESS — same numeric values,
   scoped to this template's body class.

   WordPress derives the `page-template-page-promotions` body class from the
   template filename `page-promotions.php` (the same mechanism that gives
   /about/ its `page-template-page-about` class — verified precedent).

   Browser support: Chrome 115+ / Safari 17.4+ / Firefox 134+. The `@supports`
   gate keeps the block parsed-but-inert on older browsers (bar never appears).
   Mobile-hidden (<768px, Stan-confirmed) + reduced-motion-gated (bar absent
   for motion-sensitive users).
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    @supports (animation-timeline: scroll(root)) {
        .page-template-page-promotions::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--sc-yellow);
            transform-origin: 0 50%;
            transform: scaleX(0);
            animation: sc-promotions-scroll-progress linear forwards;
            animation-timeline: scroll(root);
            z-index: 9999;
            pointer-events: none;
            box-shadow: 0 0 8px color-mix(in srgb, var(--sc-yellow) 60%, transparent);
        }

        @keyframes sc-promotions-scroll-progress {
            from { transform: scaleX(0); }
            to   { transform: scaleX(1); }
        }
    }
}


/* ==========================================================================
   PROMO-C May 29 2026 — SHOP TICKER SECTION

   Ported verbatim from homepage.css (.sc-shop-ticker system). Placed directly
   above the Featured Savings (Featured Spotlight) block. Self-contained
   full-bleed 100vw breakout + local --sc-speed / --sc-pad-y / --sc-font vars.
   --sc-yellow resolves from the site-wide token scope (same as the rest of
   this stylesheet). Keyframe scShopTickerLux kept (homepage.css and this file
   never co-load, so no collision). Reduced-motion handled at the bottom.
   ========================================================================== */
.sc-shop-ticker{
  --sc-speed: 20s;

  /* +30% presence */
  --sc-pad-y: 16px;
  --sc-font: 21px;

  /* Full-bleed breakout (works inside any centered container) */
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  position: relative;
  display: block;
  overflow: hidden;
  z-index: 2;

  /* Prevent theme-injected top/bottom gaps only (preserve left/right breakout calc) */
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  /* Carbon-lux twill background */
  background:
    radial-gradient(120% 180% at 50% 35%, rgba(255,190,61,.10) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(10,10,10,.985), rgba(20,20,20,.985)),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.030) 0px,
      rgba(255,255,255,.030) 2px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 9px
    ),
    repeating-linear-gradient(-45deg,
      rgba(0,0,0,.40) 0px,
      rgba(0,0,0,.40) 3px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 10px
    );

  border: 0 !important;
  outline: 0 !important;

  box-shadow:
    0 18px 52px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.75);

  padding: var(--sc-pad-y) 0;
  box-sizing: border-box;
}

.sc-shop-ticker * { box-sizing: inherit; }

/* Overlays BEHIND content */
.sc-shop-ticker::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    /* top/bottom feather */
    linear-gradient(180deg,
      rgba(0,0,0,.52) 0%,
      rgba(0,0,0,0) 42%,
      rgba(0,0,0,0) 58%,
      rgba(0,0,0,.52) 100%
    ),
    /* left/right cinematic fade */
    linear-gradient(90deg,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,0) 16%,
      rgba(0,0,0,0) 84%,
      rgba(0,0,0,.92) 100%
    );
}

.sc-shop-ticker::after{
  content:"";
  position:absolute;
  left:-12%;
  right:-12%;
  top: 50%;
  height: 66%;
  transform: translateY(-50%);
  pointer-events:none;
  z-index:0;
  background: radial-gradient(60% 90% at 50% 45%, rgba(255,255,255,.06), rgba(255,255,255,0) 65%);
  opacity: .72;
}

/* Content above overlays */
.sc-shop-ticker__wrap{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:center;
  width:100%;
  overflow:hidden;
}

.sc-shop-ticker__track{
  display:flex;
  width:max-content;
  animation: scShopTickerLux var(--sc-speed) linear infinite;
}

@keyframes scShopTickerLux{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* requires duplicated chunk */
}

@media (hover:hover) and (pointer:fine){
  .sc-shop-ticker:hover .sc-shop-ticker__track{
    animation-play-state: paused;
  }
}

/* Keyboard-accessible pause: ticker pauses when a child link receives focus */
.sc-shop-ticker:focus-within .sc-shop-ticker__track {
  animation-play-state: paused;
}

.sc-shop-ticker__chunk{
  display:inline-flex;
  align-items:center;
  gap: 22px;
  padding: 0 26px;
}

.sc-shop-ticker__text{
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 900;
  font-size: var(--sc-font);
  line-height: 1;
  letter-spacing: .70px;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  text-shadow:
    0 14px 30px rgba(0,0,0,.55),
    0 1px 0 rgba(0,0,0,.55);
  white-space: nowrap;
}

.sc-shop-ticker__accent{
  color: var(--sc-yellow);
  text-shadow:
    0 14px 30px rgba(0,0,0,.60),
    0 0 22px rgba(255,190,61,.18);
}

/* Jewel dots */
.sc-shop-ticker__dot{
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 50% 50%, rgba(255,190,61,.75), rgba(255,190,61,.20) 65%, rgba(255,190,61,0) 73%);
  box-shadow:
    0 0 0 2px rgba(255,190,61,.10),
    0 12px 26px rgba(0,0,0,.38);
  flex: 0 0 auto;
  opacity: .96;
}

/* Mobile tuning */
@media (max-width: 575.98px){
  .sc-shop-ticker{
    --sc-pad-y: 14px;
    --sc-font: 16px;
    --sc-speed: 18s;
    /* Simplify to 2 layers: gold glow + solid dark (twill invisible at this size) */
    background:
      radial-gradient(120% 180% at 50% 35%, rgba(255,190,61,.10) 0%, rgba(0,0,0,0) 55%),
      linear-gradient(180deg, rgba(10,10,10,.985), rgba(20,20,20,.985));
  }
  /* Kill center glow pseudo on mobile */
  .sc-shop-ticker::after {
    display: none;
  }
}

/* Reduced motion — freeze the ticker, wrap + center the (single) chunk, hide
   the duplicate that exists only to drive the seamless scroll loop. */
@media (prefers-reduced-motion: reduce){
  .sc-shop-ticker__track{
    animation: none;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    gap: 4px 0;
  }
  .sc-shop-ticker__wrap{
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
    gap: 8px 0;
  }
  .sc-shop-ticker__chunk:nth-child(n+2){
    display: none;
  }
}


/* ==========================================================================
   PROMO-D May 29 2026 — Owner Experiences (Testimonials) section

   Ported from scopione-about.css (.reviews-section / .review-card system,
   rendered by the shared sc_shop_render_testimonials()). Two token swaps vs
   the /about/ source: --sc-about-radius-xl -> --sc-promo-radius-md (10px) and
   --sc-about-shadow-soft -> --sc-promo-shadow-soft. Gold-glow hover is the
   page-signature treatment. Dark section flows into the dark Final CTA below.
   Two vestigial `.review-card::after` no-op rules from the source (the
   watermark long ago moved to `.stars::after`) were dropped.
   ========================================================================== */

.reviews-section {
    background:
        radial-gradient(900px 600px at 50% 0%, color-mix(in srgb, var(--sc-yellow) 7%, transparent), transparent 70%),
        linear-gradient(180deg, #0c0c0c 0%, #1a1a1a 100%);
    color: #fff;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 0;
    padding: var(--shop-section-gap-sm) 0 var(--shop-section-gap) 0;
}

.reviews-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
    text-align: center;
}

.reviews-eyebrow {
    color: var(--shop-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: var(--shop-small);
    margin: 0 0 0.75rem;
}

.reviews-title {
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
    font-size: var(--shop-h2);
    font-weight: 800;
}

.reviews-sub {
    font-size: var(--shop-body);
    color: var(--shop-text-medium);
    max-width: 760px;
    margin: 0.25rem auto 2rem;
    line-height: 1.7;
}

.reviews-link {
    color: var(--sc-yellow);
    text-decoration: none;
    font-weight: 800;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.reviews-link:hover {
    color: #ffd877;
    text-shadow: 0 0 6px color-mix(in srgb, var(--sc-yellow) 25%, transparent);
}

.reviews-link:focus-visible {
    outline: 2px solid var(--sc-yellow);
    outline-offset: 2px;
    text-decoration: underline;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    max-width: 1000px;
    margin: 0 auto;
}

.review-card {
    position: relative;
    overflow: hidden;
    background: rgba(26,26,26,0.95);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--sc-promo-radius-md);
    padding: 1.25rem;
    text-align: left;
    box-shadow: var(--sc-promo-shadow-soft);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Multi-image gallery strip at top of each card (up to 4 install photos). */
.review-card .review-card-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: -1.25rem -1.25rem 1rem -1.25rem;
}

.review-card .review-card-gallery-item {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    flex: 1 0 calc(50% - 2px);
    max-width: calc(50% - 2px);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #1a1a1a;
}

/* Single image: span full width, taller hero feel. */
.review-card .review-card-gallery-item:only-child {
    flex-basis: 100%;
    max-width: 100%;
}

/* 3-image case: items 1+2 at 50%, 3rd full-width 16/9 below. */
.review-card .review-card-gallery[data-count="3"] .review-card-gallery-item:nth-child(3) {
    flex-basis: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
}

.review-card .review-card-gallery-item img {
    /* PROMO-F-fix May 29 2026: gallery thumbs were rendering at their natural
       aspect (ragged grid). Cause pinned via Chrome MCP cascade scan: OUR OWN
       scopione-pages.css carries a high-specificity, NON-important rule
       `body.page:not(...) img { height: auto }` that loads on this custom
       template (but not on /about/ or /shop/, which is why those stay even) and
       beats the gallery's height:100% (0,2,1). The earlier absolute+inset
       attempt did NOT help — inset:0 cannot stretch a REPLACED element (img),
       which falls back to its intrinsic height. Fix: win the height cascade
       with a scoped !important (rule #1 is non-important, so important beats it
       regardless of specificity). Scoped to gallery thumbs only, so every other
       image on the page keeps its height:auto responsive sizing. Verified live
       (CSSOM): all thumbs snap to a uniform 115px filling the 4:3 cell. */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.review-card:hover .review-card-gallery-item img {
    transform: scale(1.04);
}

/* Magnifier zoom-icon overlay (pure box-shadow, no SVG). */
.review-card .review-card-gallery-item::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background: rgba(0,0,0,.55);
    box-shadow:
        inset  7px  7px 0 -5px #fff,
        inset  9px  5px 0 -5px #fff,
        inset  5px  9px 0 -5px #fff,
        inset -7px -7px 0 -5px #fff,
        inset -9px -5px 0 -5px #fff,
        inset -5px -9px 0 -5px #fff;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
    z-index: 3;
}

@media (hover: hover) and (pointer: fine) {
    .review-card .review-card-gallery-item:hover::after {
        opacity: 1;
        transform: scale(1);
    }
}

@media (hover: none) {
    .review-card .review-card-gallery-item::after {
        opacity: 0.7;
        transform: scale(1);
    }
    .review-card:hover:not(:focus-visible) .review-card-gallery-item img {
        transform: none;
    }
}

.review-card .review-card-gallery-item:focus-visible {
    outline: 2px solid var(--sc-yellow);
    outline-offset: 2px;
}

.review-card:hover {
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 0 14px color-mix(in srgb, var(--sc-yellow) 18%, transparent);
}

.review-card:focus-within {
    outline: 2px solid var(--sc-yellow);
    outline-offset: 2px;
}

/* Stars row with inlined S-logo watermark on the right. */
.stars {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--sc-yellow);
    letter-spacing: 0.06em;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.stars::after {
    content: "";
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: url("/wp-content/themes/scopione/img/scopione-logo-150x150.png") center / contain no-repeat;
    opacity: 0.2;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.review-card:hover .stars::after {
    opacity: 0.35;
}

.review-card:focus-within .stars::after {
    opacity: 0.35;
}

.review-copy {
    margin: 0.5rem 0 1rem;
    color: #eaeaea;
    line-height: 1.7;
}

.review-author {
    color: var(--sc-yellow);
    font-weight: 800;
}

/* Touch devices — disable hover lift, add tap feedback. */
@media (hover: none) {
    .reviews-section .review-card:hover:not(:focus-visible) {
        transform: none;
        box-shadow: var(--sc-promo-shadow-soft);
    }
    .reviews-section .review-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .reviews-link,
    .review-card {
        transition: none;
    }
}

/* High contrast. */
@media (forced-colors: active) {
    .review-card {
        border: 2px solid currentColor;
    }
    .review-card:focus-within {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }
}


/* ==========================================================================
   PROMO-I May 29 2026 — Page-wide scroll fade-ins (the deferred PROMO-4)

   Opacity-only `animation-timeline: view()` reveal as each section enters the
   viewport. Closes the last award-tier parity gap — /promotions/ was the only
   surface (vs home / shop / about) without scroll fades. Cloned from the
   homepage HOME-SCROLL-FADES block.

   OPACITY-ONLY by design (Trap #50): a translateY variant on a scroll-driven
   timeline shifts continuously during scroll and can flash the body bg as a
   band at section color boundaries. Pure opacity has no such artifact.

   Two-gate fallback: `@supports` keeps it parsed-but-inert on older browsers
   (Chrome <115 / Safari <17.4 / Firefox <134) and `prefers-reduced-motion`
   shows everything at full opacity immediately for motion-sensitive users.
   Hero + ticker are intentionally excluded (above-the-fold / continuous loop).
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .sc-promo-how-it-works,
        .sc-promotions-content-wrapper,
        .sc-promo-spotlight,
        .sc-promo-metrics,
        .reviews-section,
        .sc-about-cta {
            animation: promotions-fade-opacity linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 30%;
        }

        @keyframes promotions-fade-opacity {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
    }
}