/* ==========================================================================
   PDP v2 — Editorial Rebuild — v3 (Sean Ruttl pivot 2026-04-30)
   ==========================================================================
   v3 changes:
   - Removed Kie-photography dependence; client doesn't have application
     photography, so the hero now displays the real product render inside a
     "museum vitrine" (light backdrop card on the dark page) — works for any
     product the client adds, no per-SKU image generation needed.
   - Compact horizontal wattage strip replaces the tall vertical output ladder.
   - Real lum-tech.com mounting-dimension diagram replaces the macro Kie
     detail image (which was rendering "half black" against the dark bg).
   - Configuration trimmed to only the three field-types a client can
     reasonably maintain per product (CCT / Dimming / Listings).
   ========================================================================== */

.pdp-v3 {
    /* v3 review-iteration sweep tokens (2026-04-30):
       - --pdp-v3-section-title standardizes all section H2 sizes (hero is H1, exempt). */
    --pdp-v3-section-title: clamp(1.75rem, 3.4vw, 2.625rem);

    background-color: #050B18;
    color: #E8EEF5;
    overflow-x: hidden;
}

/* Single fade-up entrance animation reused across every section's __inner.
   Caps motion at the brand's "minimal and purposeful" 5/10 — fades + 8px
   translate, easing per design-system.css. */
@keyframes pdp-v3-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.pdp-v3-hero__inner,
.pdp-v3-watt-strip__inner,
.pdp-v3-diagram__grid,
.pdp-v3-config-slim__inner,
.pdp-v3-downloads__inner,
.pdp-v3-gated__inner,
.pdp-v3-family__inner,
.pdp-v3-cta__inner {
    animation: pdp-v3-fade-up 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .pdp-v3-hero__inner,
    .pdp-v3-watt-strip__inner,
    .pdp-v3-diagram__grid,
    .pdp-v3-config-slim__inner,
    .pdp-v3-downloads__inner,
    .pdp-v3-gated__inner,
    .pdp-v3-family__inner,
    .pdp-v3-cta__inner {
        animation: none;
    }
}

.pdp-v3 .container--wide {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-left: clamp(1.25rem, 4vw, 3rem);
    padding-right: clamp(1.25rem, 4vw, 3rem);
}

.pdp-v3 .container--narrow {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding-left: clamp(1.25rem, 4vw, 2rem);
    padding-right: clamp(1.25rem, 4vw, 2rem);
}


/* ──────────────────────────────────────────────────────────────────────────
   1. Hero — vitrine (product render + identity right)
   ────────────────────────────────────────────────────────────────────────── */

.pdp-v3-hero--vitrine {
    position: relative;
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 5vw, 4rem);
    /* Two atmospheric spotlights — primary upper-left, secondary lower-right. */
    background:
        radial-gradient(ellipse 60% 50% at 30% 30%, rgba(0, 102, 204, 0.20) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 70% 70%, rgba(0, 102, 204, 0.12) 0%, transparent 65%),
        linear-gradient(180deg, #0A1628 0%, #050B18 100%);
    border-bottom: 1px solid rgba(232, 238, 245, 0.08);
}

.pdp-v3-hero__inner--split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 980px) {
    .pdp-v3-hero__inner--split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Vitrine — solid white card holding the product render. Bg matches the
   white background of typical catalog PNGs so there's no visible boundary
   between the PNG bg and the card. Depth comes from the outer shadow only. */
.pdp-v3-hero__vitrine {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Tightened from 4/3 to 5/4 so the product fills more of the vitrine. */
    aspect-ratio: 5 / 4;
    border-radius: 4px;
    overflow: hidden;
    background-color: #FFFFFF;
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(232, 238, 245, 0.06);
}

.pdp-v3-hero__vitrine-bg {
    display: none;
}

.pdp-v3-hero__product-img {
    position: relative;
    z-index: 2;
    /* Bumped from 78% to 88% to fix "product looks small in dead white space". */
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
    /* Soft shadow grounded under the product so it reads as sitting on a
       surface, not floating. */
    filter: drop-shadow(0 18px 22px rgba(15, 25, 50, 0.22));
}

.pdp-v3-hero__vitrine-shadow {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 8%;
    height: 40px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.18) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

/* Right column — identity stack */
.pdp-v3-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pdp-v3-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(232, 238, 245, 0.6);
    margin-bottom: 0.5rem;
}

.pdp-v3-hero__breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color 200ms ease;
}

.pdp-v3-hero__breadcrumb a:hover,
.pdp-v3-hero__breadcrumb a:focus-visible {
    color: #FFFFFF;
}

.pdp-v3-hero__family {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #6FA8E5;
    margin: 0 0 0.5rem 0;
}

.pdp-v3-hero__title {
    font-family: "Inter Display", "Inter", system-ui, sans-serif;
    font-weight: 200;
    /* Joe 2026-06-09: previous clamp(1.85rem, 4.6vw, 3.75rem) read as
       "too big" on the PDP. Halved across the board: min 1.85rem -> 1.25rem,
       mid 4.6vw -> 2.4vw, max 3.75rem -> 1.875rem. Mobile floor kept above
       1rem so the title still reads as a heading vs. body copy. */
    font-size: clamp(1.25rem, 2.4vw, 1.875rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: #FFFFFF;
    max-width: 28ch;
    margin: 0;
    text-wrap: balance;
    /* Force whole-word wrapping so multi-syllable product names never
       hyphenate at narrow viewports. */
    overflow-wrap: break-word;
    word-break: keep-all;
    hyphens: manual;
}

.pdp-v3-hero__subtitle {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.5;
    color: rgba(232, 238, 245, 0.78);
    max-width: 40ch;
    margin: 0.75rem 0 0 0;
}

.pdp-v3-hero__chips {
    list-style: none;
    margin: 1.5rem 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: baseline;
}

.pdp-v3-hero__chips li {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: rgba(232, 238, 245, 0.78);
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    position: relative;
}

/* Hairline vertical divider between chips so the row reads as scannable
   spec metadata rather than generic tag list. Last item has no divider. */
.pdp-v3-hero__chips li:not(:last-child)::after {
    content: '';
    width: 1px;
    height: 1em;
    background: rgba(232, 238, 245, 0.12);
    margin-left: 1.5rem;
    align-self: center;
}

/* iter1: strip dividers below 720px so they don't dangle when the chip row
   wraps to a 2-column layout. The hairlines only make sense as inline rule
   separators on a single horizontal row. */
@media (max-width: 720px) {
    .pdp-v3-hero__chips {
        gap: 0.4rem 1rem;
    }
    .pdp-v3-hero__chips li:not(:last-child)::after {
        display: none;
    }
}

.pdp-v3-hero__chip-num {
    font-family: "Inter Display", "Inter", system-ui, sans-serif;
    font-weight: 200;
    font-size: 1.5rem;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}

.pdp-v3-hero__sku-row {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.pdp-v3-hero__sku {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    /* Brand rule: tight 2/4/8px radii. Pills (999px) prohibited. */
    border-radius: 2px;
}

.pdp-v3-hero__sku-label {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(232, 238, 245, 0.5);
}

.pdp-v3-hero__sku-value {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #FFFFFF;
}

.pdp-v3-hero__primary-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Bumped to spec-grade button presence per brand button tokens. */
    padding: 1rem 2rem;
    background-color: #0066CC;
    color: #FFFFFF;
    text-decoration: none;
    /* Brand rule: tight 2/4/8px radii. */
    border-radius: 2px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background-color 200ms ease, transform 200ms ease;
}

.pdp-v3-hero__primary-cta:hover,
.pdp-v3-hero__primary-cta:focus-visible {
    background-color: #0078E8;
    transform: translateY(-1px);
    outline: none;
}

/* Inline SVG download glyph — replaces the unicode arrow, hairline 1px
   stroke matches the rest of the site's icon vocabulary. */
.pdp-v3-hero__primary-cta svg,
.pdp-v3-hero__secondary-cta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1px;
}

/* Paired secondary outline button on the FULL hero — "Request approval".
   Matches the brand button-secondary tokens in design-system.css. */
.pdp-v3-hero__secondary-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background-color: transparent;
    color: #E8EEF5;
    border: 1px solid rgba(232, 238, 245, 0.3);
    border-radius: 2px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.pdp-v3-hero__secondary-cta:hover,
.pdp-v3-hero__secondary-cta:focus-visible {
    border-color: rgba(232, 238, 245, 0.6);
    color: #FFFFFF;
    transform: translateY(-1px);
    outline: none;
}


/* ──────────────────────────────────────────────────────────────────────────
   2. Compact wattage strip — single horizontal row of 5 tiles
   ────────────────────────────────────────────────────────────────────────── */

.pdp-v3-watt-strip {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    /* Atmospheric top-spotlight gives the section its own identity vs the
       flat #0A1628 it shared with diagram + config bands. */
    background:
        radial-gradient(ellipse 80% 100% at 50% 0%, rgba(0, 102, 204, 0.06), transparent 65%),
        #0A1628;
    border-top: 1px solid rgba(232, 238, 245, 0.06);
}

.pdp-v3-watt-strip__header {
    /* Stack eyebrow above H2 (was inline at baseline) so the H2 reads as
       the section title rather than as a sibling of a label. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.pdp-v3-watt-strip__eyebrow {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #6FA8E5;
    margin: 0;
    flex-shrink: 0;
}

.pdp-v3-watt-strip__title {
    font-family: "Inter Display", "Inter", system-ui, sans-serif;
    font-weight: 200;
    /* Lifted to standardized section-title token to match other section H2s. */
    font-size: var(--pdp-v3-section-title);
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: #FFFFFF;
    margin: 0;
}

.pdp-v3-watt-strip__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}

.pdp-v3-watt-strip__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.25rem;
    background-color: rgba(255, 255, 255, 0.025);
    /* Bumped from 0.08 to 0.12 so tile borders read against the section bg. */
    border: 1px solid rgba(232, 238, 245, 0.12);
    border-radius: 4px;
    transition: background-color 220ms ease, border-color 220ms ease;
}

/* Spec-sheet identity — 1px electric-blue top stripe per tile. */
.pdp-v3-watt-strip__tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: rgba(0, 102, 204, 0.3);
}

.pdp-v3-watt-strip__tile:hover {
    background-color: rgba(0, 102, 204, 0.08);
    border-color: rgba(0, 102, 204, 0.35);
}

/* INVERTED HIERARCHY (was: lumens dominant 32px, watts as 11px eyebrow).
   Watts are the primary spec — they're what the specifier reads first. */
.pdp-v3-watt-strip__watts {
    font-family: "Inter Display", "Inter", system-ui, sans-serif;
    font-weight: 200;
    font-size: clamp(1.75rem, 2.8vw, 2.25rem);
    line-height: 1;
    color: #FFFFFF;
    letter-spacing: -0.02em;
    /* No uppercase, no tracked-out treatment — primary metric. */
    text-transform: none;
}

.pdp-v3-watt-strip__lumens {
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 400;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgba(232, 238, 245, 0.7);
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
}

.pdp-v3-watt-strip__lumens span {
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 400;
    font-size: 0.8125rem;
    color: rgba(232, 238, 245, 0.5);
    letter-spacing: 0.04em;
}

.pdp-v3-watt-strip__beam {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.75rem;
    color: rgba(232, 238, 245, 0.5);
    letter-spacing: 0.04em;
}

/* Mobile: 5 tiles in a 2-col grid creates an orphan row of 1 tile. Switch
   to single column with horizontal-card layout (watts left, lumens+beam
   right) so all 5 stack as readable rows. */
@media (max-width: 720px) {
    .pdp-v3-watt-strip__list {
        grid-template-columns: 1fr;
    }

    .pdp-v3-watt-strip__tile {
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
        padding: 1rem 1.25rem;
    }

    .pdp-v3-watt-strip__watts {
        flex-shrink: 0;
        min-width: 4rem;
    }

    .pdp-v3-watt-strip__lumens {
        flex: 1;
    }
}


/* ──────────────────────────────────────────────────────────────────────────
   3. Mounting dimensions diagram (real lum-tech.com schematic)
   ────────────────────────────────────────────────────────────────────────── */

.pdp-v3-diagram {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background-color: #050B18;
    border-top: 1px solid rgba(232, 238, 245, 0.06);
}

.pdp-v3-diagram__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    /* `start` instead of `center` — center bottom-aligned the figure when the
       copy column was taller, leaving the diagram drifting low. */
    align-items: start;
}

@media (max-width: 980px) {
    .pdp-v3-diagram__grid {
        grid-template-columns: 1fr;
    }
}

.pdp-v3-diagram__eyebrow {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #6FA8E5;
    margin: 0 0 1rem 0;
}

.pdp-v3-diagram__title {
    font-family: "Inter Display", "Inter", system-ui, sans-serif;
    font-weight: 200;
    font-size: var(--pdp-v3-section-title);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: #FFFFFF;
    margin: 0 0 1.25rem 0;
    text-wrap: balance;
}

.pdp-v3-diagram__lede {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(232, 238, 245, 0.7);
    margin: 0 0 1.75rem 0;
    max-width: 50ch;
}

.pdp-v3-diagram__dims {
    margin: 0 0 1.75rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
}

.pdp-v3-diagram__dims > div {
    border-top: 1px solid rgba(232, 238, 245, 0.10);
    padding-top: 0.75rem;
}

.pdp-v3-diagram__dims dt {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(232, 238, 245, 0.55);
    margin: 0 0 0.35rem 0;
}

.pdp-v3-diagram__dims dd {
    font-family: "Inter Display", "Inter", system-ui, sans-serif;
    font-weight: 200;
    /* Clamped so longer dimension strings (e.g. "12-3/8" × 7-7/8"") fit on
       one line at narrow viewports and don't break mid-fraction. */
    font-size: clamp(1.125rem, 4vw, 1.5rem);
    color: #FFFFFF;
    letter-spacing: -0.01em;
    margin: 0;
    white-space: nowrap;
}

.pdp-v3-diagram__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Bumped vertical padding so resulting tap height clears the 44px
       accessibility minimum. */
    padding: 0.875rem 0;
    color: #6FA8E5;
    text-decoration: none;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(111, 168, 229, 0.4);
    transition: color 200ms ease, border-color 200ms ease;
    align-self: flex-start;
}

.pdp-v3-diagram__cta:hover,
.pdp-v3-diagram__cta:focus-visible {
    color: #FFFFFF;
    border-color: #FFFFFF;
    outline: none;
}

.pdp-v3-diagram__figure {
    margin: 0;
    /* Solid #FFFFFF — matches the hero vitrine. The prior cream/beige radial
       gradient clashed with the cool-tone brand system. */
    background-color: #FFFFFF;
    border-radius: 4px;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(232, 238, 245, 0.10);
}

.pdp-v3-diagram__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

.pdp-v3-diagram__cap {
    margin: 1rem 0 0 0;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.75rem;
    color: rgba(15, 25, 50, 0.55);
    text-align: center;
    letter-spacing: 0.04em;
}


/* ──────────────────────────────────────────────────────────────────────────
   4. Configuration — slim (CCT / Dimming / Listings only)
   ────────────────────────────────────────────────────────────────────────── */

.pdp-v3-config-slim {
    /* COMPRESSED — reduced from clamp(3.5rem, 7vw, 6rem) so the section
       reads as a thin spec data band, not a full editorial section. */
    padding: clamp(2rem, 4vw, 3rem) 0;
    /* Slightly elevated surface so the band registers as its own slab
       against the diagram (#050B18) and downloads (#050B18) above/below. */
    background-color: #0C1A2E;
    border-top: 1px solid rgba(232, 238, 245, 0.06);
}

.pdp-v3-config-slim__header {
    /* Widened from 720px so the H2 "Spec the protocol, the temperature, the
       listing." breaks at the commas, not mid-clause. */
    max-width: 880px;
    margin: 0 0 clamp(1.5rem, 3vw, 2rem) 0;
}

.pdp-v3-config-slim__eyebrow,
.pdp-v3-downloads__eyebrow,
.pdp-v3-family__eyebrow,
.pdp-v3-cta__eyebrow,
.pdp-v3-gated__eyebrow {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #6FA8E5;
    margin: 0 0 1rem 0;
}

.pdp-v3-config-slim__title {
    font-family: "Inter Display", "Inter", system-ui, sans-serif;
    font-weight: 200;
    font-size: var(--pdp-v3-section-title);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: #FFFFFF;
    margin: 0 0 1rem 0;
    text-wrap: balance;
}

.pdp-v3-config-slim__lede {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(232, 238, 245, 0.72);
    margin: 0;
    max-width: 56ch;
}

.pdp-v3-config-slim__grid {
    /* 4 columns: CCT | Dimming | Listings | Warranty. Warranty was sharing
       the Listings column which produced the "Listings actually contains
       warranties" reviewer issue. */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2rem);
}

@media (max-width: 1100px) {
    .pdp-v3-config-slim__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .pdp-v3-config-slim__grid {
        grid-template-columns: 1fr;
    }
}

.pdp-v3-config-slim__group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pdp-v3-config-slim__group-label {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(232, 238, 245, 0.55);
    margin: 0 0 0.25rem 0;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid rgba(232, 238, 245, 0.10);
}

/* CCT pills (sustained from v2) */
.pdp-v3-config__cct {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pdp-v3-config__cct-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background-color: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Brand rule: tight 2/4/8px radii. Glass treatment matches dimming and
       listings chips so all 3 groups share visual language. */
    border-radius: 4px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(232, 238, 245, 0.92);
}

.pdp-v3-config__cct-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* Default = 2700K (warmest). Glow shadows dropped — pure circles read
       more spec-grade and won't compete with the subtle blue spotlights
       elsewhere on the page. */
    background: #FFB870;
    flex-shrink: 0;
}

/* Monotonic warm-to-cool dot color progression. */
.pdp-v3-config__cct-pill[data-cct="3000K"] .pdp-v3-config__cct-dot { background: #FFC890; }
.pdp-v3-config__cct-pill[data-cct="3500K"] .pdp-v3-config__cct-dot { background: #FFE0B8; }
.pdp-v3-config__cct-pill[data-cct="4000K"] .pdp-v3-config__cct-dot { background: #EDF2FF; }

/* Dimming chips */
.pdp-v3-config__dim {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pdp-v3-config__dim-chip {
    padding: 0.5rem 0.875rem;
    background-color: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.8125rem;
    color: rgba(232, 238, 245, 0.85);
}

/* Listings chips (reused from v2 compliance) */
.pdp-v3-compliance__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Mobile chip orphan rows — pair chips up cleanly at narrow viewports
   so single-chip stragglers don't break the visual rhythm. Applies to
   all 3 chip lists in the config-slim band. */
@media (max-width: 600px) {
    .pdp-v3-config__cct,
    .pdp-v3-config__dim,
    .pdp-v3-config-slim__listings {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
}

.pdp-v3-config-slim__listings {
    margin: 0 0 1rem 0;
}

.pdp-v3-compliance__chip {
    padding: 0.5rem 0.875rem;
    /* Demoted from electric-blue tint — listings chips were reading as
       interactive CTAs. Now neutral glass to match CCT/Dimming. */
    background-color: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(232, 238, 245, 0.85);
}

.pdp-v3-config-slim__warranty {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.pdp-v3-config-slim__warranty > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pdp-v3-config-slim__warranty dt {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(232, 238, 245, 0.55);
    margin: 0 0 0.25rem 0;
}

.pdp-v3-config-slim__warranty dd {
    font-family: "Inter Display", "Inter", system-ui, sans-serif;
    font-weight: 200;
    font-size: 1.125rem;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    margin: 0;
}


/* ──────────────────────────────────────────────────────────────────────────
   5. Downloads strip
   ────────────────────────────────────────────────────────────────────────── */

.pdp-v3-downloads {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background-color: #050B18;
    border-top: 1px solid rgba(232, 238, 245, 0.06);
}

.pdp-v3-downloads__header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.pdp-v3-downloads__title {
    font-family: "Inter Display", "Inter", system-ui, sans-serif;
    font-weight: 200;
    font-size: var(--pdp-v3-section-title);
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: #FFFFFF;
    margin: 0;
}

.pdp-v3-compliance__downloads-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (max-width: 720px) {
    .pdp-v3-compliance__downloads-list {
        grid-template-columns: 1fr;
    }
}

/* IES sub-section — one column, wattage as dominant scan column,
   with shared CRI/CCT group header. */
.pdp-v3-downloads__ies-block {
    margin-top: clamp(1.5rem, 3vw, 2rem);
}

.pdp-v3-downloads__ies-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(232, 238, 245, 0.10);
}

.pdp-v3-downloads__ies-subtitle {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(232, 238, 245, 0.7);
    margin: 0;
}

.pdp-v3-downloads__ies-shared {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.75rem;
    color: rgba(232, 238, 245, 0.55);
    letter-spacing: 0.04em;
    margin: 0;
}

.pdp-v3-downloads__ies-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
}

.pdp-v3-compliance__download a {
    display: grid;
    grid-template-columns: auto 1fr auto 24px;
    gap: 1rem;
    align-items: center;
    padding: 0.875rem 1rem;
    background-color: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

/* Spec sheet + install guide rows — left-side kind label, then name, then arrow.
   Same 3-column shape they had in v2 review, with file-type badge optional. */
.pdp-v3-compliance__download:not(.pdp-v3-compliance__download--ies) a {
    grid-template-columns: auto 1fr 24px;
}

.pdp-v3-compliance__download-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    padding: 0.25rem 0.5rem;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6FA8E5;
    background-color: rgba(0, 102, 204, 0.08);
    border: 1px solid rgba(0, 102, 204, 0.25);
    border-radius: 2px;
}

.pdp-v3-compliance__download-watts {
    font-family: "Inter Display", "Inter", system-ui, sans-serif;
    font-weight: 200;
    font-size: 1.5rem;
    line-height: 1;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}

.pdp-v3-compliance__download-lumens {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.875rem;
    color: rgba(232, 238, 245, 0.7);
    text-align: right;
    letter-spacing: 0.04em;
}

.pdp-v3-compliance__download a:hover,
.pdp-v3-compliance__download a:focus-visible {
    background-color: rgba(0, 102, 204, 0.10);
    border-color: rgba(0, 102, 204, 0.45);
    outline: none;
    transform: translateX(2px);
}

.pdp-v3-compliance__download--primary a {
    background:
        linear-gradient(135deg, rgba(0, 102, 204, 0.18) 0%, rgba(0, 102, 204, 0.06) 100%);
    border-color: rgba(0, 102, 204, 0.4);
    grid-column: span 2;
}

@media (max-width: 720px) {
    .pdp-v3-compliance__download--primary a {
        grid-column: span 1;
    }
}

.pdp-v3-compliance__download-kind {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6FA8E5;
}

.pdp-v3-compliance__download-name {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.875rem;
    color: rgba(232, 238, 245, 0.92);
    text-align: right;
}

.pdp-v3-compliance__download-arrow {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 102, 204, 0.20);
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 500;
}


/* ──────────────────────────────────────────────────────────────────────────
   6. Gated pricing panel
   ────────────────────────────────────────────────────────────────────────── */

.pdp-v3-gated {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background:
        radial-gradient(ellipse 70% 40% at 50% 0%, rgba(0, 102, 204, 0.12), transparent 65%),
        #0A1628;
    text-align: center;
    border-top: 1px solid rgba(232, 238, 245, 0.06);
}

/* Hairline-bordered card so the narrow container reads intentional rather
   than orphaned in the wider section. iter2: bumped fill from 0.02 → 0.035
   so the elevated-surface read is unambiguous on lower-quality monitors. */
.pdp-v3-gated__card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(232, 238, 245, 0.12);
    border-radius: 4px;
    padding: clamp(2rem, 4vw, 3rem);
}

.pdp-v3-gated__title {
    font-family: "Inter Display", "Inter", system-ui, sans-serif;
    font-weight: 200;
    font-size: var(--pdp-v3-section-title);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: #FFFFFF;
    margin: 0 0 1rem 0;
    text-wrap: balance;
}

/* iter2: trust strip promoted from a single text line to a structural
   pedigree row with hairline-bordered chips per project name. Reviewer
   identified the original strip as too quiet to carry the panel's only
   brand-distinct moment. The chip treatment turns project credentials
   into a scannable visual pedigree band that survives the
   "remove-the-brand-name-is-it-still-distinctive" test. */
.pdp-v3-gated__pedigree {
    margin: 2rem 0 0 0;
    padding: 1.25rem 0 0 0;
    border-top: 1px solid rgba(232, 238, 245, 0.10);
}

.pdp-v3-gated__pedigree-label,
.pdp-v3-gated__pedigree-meta {
    margin: 0;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(232, 238, 245, 0.5);
}

.pdp-v3-gated__pedigree-meta {
    margin-top: 0.875rem;
    color: rgba(232, 238, 245, 0.65);
}

.pdp-v3-gated__pedigree-list {
    list-style: none;
    margin: 0.875rem 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.pdp-v3-gated__pedigree-list li {
    padding: 0.4rem 0.75rem;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.8125rem;
    color: rgba(232, 238, 245, 0.85);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(232, 238, 245, 0.14);
    /* Brand rule: tight 2/4/8px radii. */
    border-radius: 2px;
    letter-spacing: 0.01em;
}

.pdp-v3-gated__lede {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(232, 238, 245, 0.72);
    margin: 0 auto 2rem;
    max-width: 50ch;
}

.pdp-v3-gated__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.pdp-v3-gated__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    /* Brand rule: tight 2/4/8px radii. Pills (999px) prohibited. */
    border-radius: 2px;
    transition: all 200ms ease;
}

.pdp-v3-gated__btn--primary {
    background-color: #0066CC;
    color: #FFFFFF;
}

.pdp-v3-gated__btn--primary:hover,
.pdp-v3-gated__btn--primary:focus-visible {
    background-color: #0078E8;
    transform: translateY(-1px);
    outline: none;
}

.pdp-v3-gated__btn--secondary {
    background-color: transparent;
    color: rgba(232, 238, 245, 0.92);
    border: 1px solid rgba(232, 238, 245, 0.25);
}

.pdp-v3-gated__btn--secondary:hover,
.pdp-v3-gated__btn--secondary:focus-visible {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(232, 238, 245, 0.4);
    outline: none;
}


/* ──────────────────────────────────────────────────────────────────────────
   7. Family alternates
   ────────────────────────────────────────────────────────────────────────── */

.pdp-v3-family {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background-color: #050B18;
    border-top: 1px solid rgba(232, 238, 245, 0.06);
}

.pdp-v3-family__header {
    max-width: 720px;
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem) 0;
}

.pdp-v3-family__title {
    font-family: "Inter Display", "Inter", system-ui, sans-serif;
    font-weight: 200;
    font-size: var(--pdp-v3-section-title);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: #FFFFFF;
    margin: 0;
    text-wrap: balance;
}

.pdp-v3-family__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 800px) {
    .pdp-v3-family__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pdp-v3-family__item {
    margin: 0;
}

/* iter4 (Sean 2026-04-30): the "currently viewing" highlight was removed
   so all four cards read as equal sibling links. The PDP body already
   tells you the current product; the family band is a sibling browse,
   not a "you are here" tracker. The --current modifier rules are gone
   entirely; every card now shares the single rule below. */
.pdp-v3-family__item > a {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    background-color: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
    min-height: 160px;
    justify-content: space-between;
}

.pdp-v3-family__item > a:hover,
.pdp-v3-family__item > a:focus-visible {
    background-color: rgba(0, 102, 204, 0.10);
    border-color: rgba(0, 102, 204, 0.4);
    outline: none;
    transform: translateY(-2px);
}

/* Inline aperture scale circle — sized in proportion to actual aperture
   (4"=24px, 6"=36px, 8"=48px, 9"=54px). Hairline 1px stroke matches the
   site's icon vocabulary. */
.pdp-v3-family__scale {
    flex-shrink: 0;
    color: rgba(232, 238, 245, 0.55);
}

.pdp-v3-family__aperture-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.pdp-v3-family__aperture {
    font-family: "Inter Display", "Inter", system-ui, sans-serif;
    font-weight: 200;
    font-size: clamp(2.25rem, 4.4vw, 3.25rem);
    line-height: 1;
    letter-spacing: -0.025em;
    color: #FFFFFF;
}

.pdp-v3-family__sku {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: #6FA8E5;
}

.pdp-v3-family__label {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(232, 238, 245, 0.55);
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Cutout dimension — fills empty middle of family cards. */
.pdp-v3-family__cutout {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.8125rem;
    color: rgba(232, 238, 245, 0.7);
    letter-spacing: 0.02em;
}


/* ──────────────────────────────────────────────────────────────────────────
   8. Specifier-direct CTA band
   ────────────────────────────────────────────────────────────────────────── */

.pdp-v3-cta {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background:
        linear-gradient(135deg, #0E1A30 0%, #050B18 65%);
    border-top: 1px solid rgba(232, 238, 245, 0.06);
    border-bottom: 1px solid rgba(232, 238, 245, 0.06);
}

.pdp-v3-cta__inner {
    display: grid;
    /* Asymmetric — copy column owns the field per reviewer recommendation. */
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

@media (max-width: 900px) {
    .pdp-v3-cta__inner {
        grid-template-columns: 1fr;
    }
}

.pdp-v3-cta__title {
    font-family: "Inter Display", "Inter", system-ui, sans-serif;
    font-weight: 200;
    font-size: var(--pdp-v3-section-title);
    line-height: 1.05;
    letter-spacing: -0.018em;
    color: #FFFFFF;
    margin: 0 0 1rem 0;
    text-wrap: balance;
}

.pdp-v3-cta__lede {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(232, 238, 245, 0.72);
    margin: 0;
    max-width: 50ch;
}

.pdp-v3-cta__contacts {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Phone tiles get the electric-blue tint — they're the primary action.
   Was inverted: directory tile was bright while phones read as dim. */
.pdp-v3-cta__contact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background-color: rgba(0, 102, 204, 0.14);
    border: 1px solid rgba(0, 102, 204, 0.4);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.pdp-v3-cta__contact:hover,
.pdp-v3-cta__contact:focus-visible {
    background-color: rgba(0, 102, 204, 0.22);
    border-color: rgba(0, 102, 204, 0.55);
    outline: none;
    transform: translateX(2px);
}

/* Directory tile is the secondary action — neutral glass. */
.pdp-v3-cta__contact--all {
    background-color: rgba(255, 255, 255, 0.025);
    border-color: rgba(232, 238, 245, 0.12);
}

.pdp-v3-cta__contact--all:hover,
.pdp-v3-cta__contact--all:focus-visible {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(232, 238, 245, 0.22);
}

.pdp-v3-cta__contact-label {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(232, 238, 245, 0.55);
}

.pdp-v3-cta__contact-value {
    font-family: "Inter Display", "Inter", system-ui, sans-serif;
    font-weight: 200;
    /* Bumped — phone numbers were undersold relative to directory link. */
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #FFFFFF;
    letter-spacing: -0.005em;
}

/* Mobile: tighten label tracking so "CALIFORNIA BRANCH" stays on one line. */
@media (max-width: 600px) {
    .pdp-v3-cta__contact-label {
        letter-spacing: 0.16em;
    }
}


/* ──────────────────────────────────────────────────────────────────────────
   PDP MINIMAL — companion variant additions (Sean Ruttl 2026-04-30)
   ──────────────────────────────────────────────────────────────────────────
   Reuses 100% of the FULL hero / downloads / gated / CTA primitives. Adds:
   - description text directly in hero (FULL puts long description in the
     diagram section; MINIMAL keeps it in hero so the diagram can stand alone)
   - secondary "Installation instructions" link next to the spec sheet CTA
   - solo diagram figure layout (no copy column on left)
   ────────────────────────────────────────────────────────────────────────── */

.pdp-v3-hero__description-text {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(232, 238, 245, 0.78);
    max-width: 50ch;
    /* Hairline divider visually separates the description block from the
       subtitle above it. */
    border-top: 1px solid rgba(232, 238, 245, 0.10);
    padding-top: 1rem;
    margin: 1.25rem 0 0 0;
}

/* Outlined button (was an underlined text link). Pairs with the primary
   spec-sheet button at the same height per brand secondary button tokens. */
.pdp-v3-hero__secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background-color: transparent;
    color: #E8EEF5;
    border: 1px solid rgba(232, 238, 245, 0.3);
    border-radius: 2px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.pdp-v3-hero__secondary-link:hover,
.pdp-v3-hero__secondary-link:focus-visible {
    color: #FFFFFF;
    border-color: rgba(232, 238, 245, 0.6);
    transform: translateY(-1px);
    outline: none;
}

.pdp-v3-hero__secondary-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1px;
}

.pdp-v3-diagram--minimal {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.pdp-v3-diagram__figure--solo {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}


/* ──────────────────────────────────────────────────────────────────────────
   SKU pill repositioned to top of hero copy column (Sean Ruttl 2026-04-30)
   ────────────────────────────────────────────────────────────────────────── */
.pdp-v3-hero__sku--top {
    margin: 0.25rem 0 0.5rem 0;
    align-self: flex-start;
}


/* ──────────────────────────────────────────────────────────────────────────
   Minimal hero — product render + diagram side-by-side, identity right.
   `.pdp-v3-hero__inner--minimal` is applied on top of `--split` (which gives
   the base grid display); this rule only overrides the column ratio so the
   visuals column gets a bit more weight to fit two stacked vitrines.
   ────────────────────────────────────────────────────────────────────────── */
/* iter1: wrapped in min-width 981px so the @media (max-width: 980px) collapse
   rule earlier in the file wins on mobile. Without this gate the 1.25fr/1fr
   split persisted at 375px, squeezing the H1 column to ~165px and forcing
   'Architectural' to break mid-word despite the typography-level guards. */
@media (min-width: 981px) {
    .pdp-v3-hero__inner--split.pdp-v3-hero__inner--minimal {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    }
}

.pdp-v3-hero__visuals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Gallery layout — single primary vitrine + optional thumbnail strip below.
   Used on MINIMAL where the diagram is one of the gallery images (rather
   than a separate section). Universal pattern: works with 1 image (no
   thumbnails render), 2-N images (thumbnails strip below). */
.pdp-v3-hero__visuals--gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pdp-v3-hero__main-vitrine {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: hidden;
    /* 2026-05-20 Shannon Ruttl: white backdrop returned (the transparent
       experiment from 2026-05-11 was reverted). Factory photography is
       almost all white-bg, so the vitrine card matches the source asset
       and Shannon avoids re-mastering every product image. The new image
       crop (product-render-cropped.png) trims excess whitespace so the
       fixture fills the frame. */
    background-color: #FFFFFF;
    cursor: zoom-in;
}

.pdp-v3-hero__main-img {
    position: relative;
    z-index: 2;
    /* 2026-05-21 Sean: "client wants the actual fixture larger and less
       whitespace." Source PNG upscaled 280->600 with PIL Lanczos; CSS now
       fills the container to its natural limits so the fixture reads ~3x
       larger relative to the vitrine. */
    width: 96%;
    height: 96%;
    object-fit: contain;
    transition: opacity 240ms ease;
}

.pdp-v3-hero__main-img[data-main-kind="diagram"] {
    max-width: 90%;
    max-height: 90%;
    filter: none;
}

/* QA st-9404 (Coda 2026-06-22): the canonical PDP is single-image, but
   .pdp-v3-hero__visuals defaults to a 2-column grid (1fr 1fr). The lone product
   image filled only the left half and the empty right column read as a big gap
   between the image and the product details. Make the single-image variant one
   column so the vitrine spans the full visuals width.
   QA st-9399: cap + center the vitrine so it stays centered on mobile. */
.pdp-v3-hero__visuals--single {
    display: block;
    grid-template-columns: none;
}
.pdp-v3-hero__visuals--single .pdp-v3-hero__main-vitrine {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}

/* QA st-9322: zoom trigger button wraps the product image (the lightbox opens on
   click). Reset the button chrome and fill the vitrine; the image keeps its own
   sizing. A small magnify badge hints the interaction on hover/focus. */
.pdp-v3-hero__zoom {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
}
.pdp-v3-hero__zoom-hint {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(10, 22, 40, 0.72);
    color: #FFFFFF;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}
.pdp-v3-hero__main-vitrine:hover .pdp-v3-hero__zoom-hint,
.pdp-v3-hero__zoom:focus-visible .pdp-v3-hero__zoom-hint {
    opacity: 1;
}

/* QA st-9322: fullscreen lightbox dialog. */
.pdp-v3-hero__lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(5, 11, 24, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.pdp-v3-hero__lightbox[hidden] {
    display: none;
}
.pdp-v3-hero__lightbox-img {
    max-width: min(92vw, 1100px);
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #FFFFFF;
    border-radius: 6px;
}
.pdp-v3-hero__lightbox-close {
    position: absolute;
    top: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(232, 238, 245, 0.3);
    border-radius: 8px;
    background: rgba(10, 22, 40, 0.6);
    color: #E8EEF5;
    cursor: pointer;
}
.pdp-v3-hero__lightbox-close:hover,
.pdp-v3-hero__lightbox-close:focus-visible {
    border-color: var(--color-accent, #0066CC);
    color: #FFFFFF;
    outline: none;
}
body.has-pdp-lightbox-open {
    overflow: hidden;
}

.pdp-v3-hero__thumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pdp-v3-hero__thumb-item {
    margin: 0;
    list-style: none;
}

.pdp-v3-hero__thumb {
    width: 84px;
    height: 84px;
    /* 2026-05-20 Shannon Ruttl: thumbnails match the main vitrine on white,
       so factory product photography reads the same in both surfaces. */
    background-color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 220ms ease, transform 220ms ease;
}

.pdp-v3-hero__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.pdp-v3-hero__thumb:hover,
.pdp-v3-hero__thumb:focus-visible {
    border-color: rgba(0, 102, 204, 0.5);
    outline: none;
    transform: translateY(-1px);
}

.pdp-v3-hero__thumb.is-active {
    border-color: #0066CC;
    border-width: 2px;
    padding: 7px;
}

@media (max-width: 600px) {
    .pdp-v3-hero__thumb {
        width: 68px;
        height: 68px;
    }
}