/**
 * Downloads Library
 *
 * Same design language as the Video Library (css/cpro-video-library.css): #000 base, #121314
 * raised, #333 borders, radius 0, 1200 main + 40 gap + 280 rail. The two pages are siblings and
 * should read as one system.
 *
 * ON THE DUPLICATION: the rail, facet, sheet and button blocks below are near-identical to the
 * video library's. They are copied rather than shared because extracting a common shell means
 * renaming every class on a page that has already been reviewed and signed off, and the risk of
 * that is not worth paying today. If a third library ever lands here, extract then — the natural
 * seam is everything from "rail" down, under a neutral cpro-lib-* prefix.
 */

/* Scoped border-box. Several elements combine width/max-width with padding (the CTA body, the
   sheet's scroller, the search field); under the theme's default content-box the padding is added
   OUTSIDE the width and they overflow the viewport on narrow screens. Scoped so it cannot affect
   the rest of the theme. */
[class*="cpro-dl-"],
[class*="cpro-dl-"]::before,
[class*="cpro-dl-"]::after,
[class*="cpro-dl-"] * {
    box-sizing: border-box;
}

/* =========================================================================
   HERO
   Shares the Video Library's reel. Same treatment: the copy sits on moving
   footage, so everything here is about keeping it readable.
   ========================================================================= */

.cpro-dl-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 40px;
    align-items: start;
    padding-block: 8px 48px;
}

.cpro-dl-hero--media {
    position: relative;
    isolation: isolate;
    align-items: center;
    min-height: 400px;
    padding: 56px 48px;
}

/* Flush under the header. Three paddings would otherwise stack above a full-bleed hero: the
   theme's .tm-main.uk-section, our own wrapper, and the hero's own 56px — which stays, because
   that is the copy's breathing room rather than dead space. Scoped by body class so no other
   .tm-main loses its section padding. */
body.post-type-archive-downloads .tm-main { padding-top: 0; }
body.post-type-archive-downloads .cpro-dl-page { padding-top: 0; }

/* FULL BLEED. The theme wraps archive output in its own .uk-container, so the hero has to break
   out of it. Capped at 1600 rather than a bare 100vw because .tm-page is itself max-width:1600 —
   an unbounded 100vw hero would be wider than the entire site on a large display.
   Safe without an overflow guard of our own: the theme already sets `body { overflow-x: clip }`.
   clip, not hidden — hidden would make body a scroll container and break the rail's
   position: sticky. */
.cpro-dl-hero--bleed {
    width: min(100vw, 1600px);
    margin-inline: calc(50% - min(50vw, 800px));
    /* Restore the 1200 reading column exactly, so the headline sits on the same left edge as the
       sections below it. 40px is the theme container's own padding. */
    padding-inline: max(40px, calc((min(100vw, 1600px) - 1200px) / 2));
}

.cpro-dl-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.cpro-dl-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* CENTRE, not a raised focal point. This is the Video Library's reel, which was already
       rendered cropped to its safe band (1280x402, 3.18:1) — there are no heads near the edges
       left to protect, and biasing it upward only re-crops an already-tight band. */
    object-position: center;
    display: block;
}

/* Two-stop scrim, matched to the Video Library's: a left-weighted wash so the headline has
   contrast, plus a floor of overall darkening. Measured on this reel — its brightest beat is
   158/255, which lands at ~32/255 behind this, or 17.5:1 against white text (past WCAG AAA). */
.cpro-dl-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgb(0 0 0 / .88) 0%, rgb(0 0 0 / .72) 42%, rgb(0 0 0 / .35) 100%),
        linear-gradient(0deg, rgb(0 0 0 / .45) 0%, rgb(0 0 0 / .25) 100%);
}

.cpro-dl-hero__copy { max-width: 620px; }

.cpro-dl-hero__eyebrow {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity: .7;
    margin-block-end: 14px;
}

.cpro-dl-hero__title {
    margin: 0;
    font-size: 52px;
    line-height: 1.1;
    text-transform: uppercase;
}

.cpro-dl-hero__sub {
    margin: 18px 0 0;
    font-size: 18px;
    line-height: 1.55;
    opacity: .8;
}

/* Library size, stated plainly. It is the reason to trust the search box. */
.cpro-dl-hero__stat {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-block-start: 26px;
    padding: 10px 16px;
    border: 1px solid #333;
    background: rgb(0 0 0 / .45);
}

.cpro-dl-hero__stat-num {
    font-size: 22px;
    font-variant-numeric: tabular-nums;
}

.cpro-dl-hero__stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .7;
}

/* =========================================================================
   TYPE STRIP — browse by document type, above the library
   ========================================================================= */

.cpro-dl-strip {
    padding-block: 36px 40px;
    border-bottom: 1px solid #333;
    margin-block-end: 44px;
}

.cpro-dl-strip__eyebrow {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity: .55;
    margin-block-end: 18px;
}

.cpro-dl-strip__items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cpro-dl-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 11px 16px;
    border: 1px solid #333;
    background: #121314;
    color: #fff;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: background-color .2s ease, border-color .2s ease;
}

.cpro-dl-chip:hover,
.cpro-dl-chip:focus-visible {
    background: #1d1f20;
    border-color: #555;
}

.cpro-dl-chip__count {
    font-size: 12px;
    opacity: .5;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* =========================================================================
   LIBRARY
   ========================================================================= */

.cpro-dl-library {
    --cpro-dl-surface: #000;
    --cpro-dl-raised: #121314;
    --cpro-dl-border: #333;
    --cpro-dl-text: #fff;
    --cpro-dl-rail: 280px;

    color: var(--cpro-dl-text);
}

.cpro-dl-library__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cpro-dl-rail);
    gap: 40px;
    align-items: start;
}

.cpro-dl-library__grid--norail {
    grid-template-columns: minmax(0, 1fr);
}

.cpro-dl-section {
    padding-block-end: 28px;
    border-bottom: 1px solid var(--cpro-dl-border);
    margin-block-end: 44px;
}

.cpro-dl-section:last-child { margin-block-end: 0; }

.cpro-dl-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-block-end: 20px;
}

.cpro-dl-section__title {
    margin: 0;
    font-size: 24px;
    line-height: 1.4;
    text-transform: uppercase;
}

.cpro-dl-section__count {
    margin-inline-start: 10px;
    font-size: 14px;
    opacity: .45;
    font-variant-numeric: tabular-nums;
}

.cpro-dl-link {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    color: var(--cpro-dl-text);
    opacity: .7;
    text-decoration: none;
    white-space: nowrap;
}

.cpro-dl-link:hover,
.cpro-dl-link:focus-visible { opacity: 1; }

/* =========================================================================
   ROW
   A download has no artwork. The scannable things are the format, the name
   and which fixture it belongs to — so it is a list row, not a card.
   ========================================================================= */

.cpro-dl-list {
    display: flex;
    flex-direction: column;
}

.cpro-dl-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid rgb(255 255 255 / .09);
}

.cpro-dl-row:first-child { border-top: 0; }

/* The format badge is the fastest thing to scan down a column, so it leads the row. */
.cpro-dl-row__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 40px;
    border: 1px solid var(--cpro-dl-border);
    background: var(--cpro-dl-raised);
    font-size: 11px;
    letter-spacing: .06em;
    opacity: .75;
}

.cpro-dl-row__body { min-width: 0; }

.cpro-dl-row__title {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    /* Long generated titles ("COLORado PXL Curve 5 — Quick Reference Guide") must not push the
       button off the row. */
    overflow-wrap: anywhere;
}

.cpro-dl-row__meta {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .5;
}

.cpro-dl-row__type::after {
    content: "·";
    margin-inline: 8px;
    opacity: .6;
}

/* No type term on the entry — drop the separator rather than leading with a stray dot. */
.cpro-dl-row__type:last-child::after { content: none; }

/* Inside a browse section the type is already the heading above it, so repeating it on all six
   rows is pure noise ("QUICK REFERENCE GUIDE" six times under a QUICK REFERENCE GUIDE heading).
   It stays in the flat results list, where the rows are mixed and it is the only thing saying what
   each file is. */
.cpro-dl-section .cpro-dl-row__type { display: none; }

.cpro-dl-row__for a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgb(255 255 255 / .25);
}

.cpro-dl-row__for a:hover,
.cpro-dl-row__for a:focus-visible { border-bottom-color: #fff; }

.cpro-dl-row__more { opacity: .6; }

.cpro-dl-row__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 140px;
    height: 42px;
    padding-inline: 18px;
    border: 1px solid var(--cpro-dl-border);
    background: transparent;
    color: var(--cpro-dl-text);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease;
}

.cpro-dl-row__btn:hover,
.cpro-dl-row__btn:focus-visible {
    background: #fff;
    border-color: #fff;
    color: #000;
}

/* =========================================================================
   RAIL
   ========================================================================= */

/* The aside must span the whole grid row, or position:sticky inside it has nowhere to travel.
   With the grid's `align-items: start` the aside is only as tall as its own content (564px), so on
   a 6,500px library the filters scrolled away after the first section and never came back. Stretch
   is scoped to the rail so the main column keeps its natural height. */
.cpro-dl-rail {
    align-self: stretch;
}

.cpro-dl-rail__inner {
    position: sticky;
    top: 100px; /* clears the 80px sticky navbar */
    background: var(--cpro-dl-raised);
    border: 1px solid var(--cpro-dl-border);
    padding: 20px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.cpro-dl-rail__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.cpro-dl-rail__title {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cpro-dl-rail__search { margin-block-start: 14px; }

.cpro-dl-rail__search input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    background: var(--cpro-dl-surface);
    border: 1px solid var(--cpro-dl-border);
    border-radius: 0;
    color: var(--cpro-dl-text);
    font-size: 14px;
}

.cpro-dl-rail__search input::placeholder { color: rgb(255 255 255 / .45); }

.cpro-dl-facet {
    margin-block-start: 22px;
    padding-block-start: 18px;
    border-top: 1px solid var(--cpro-dl-border);
}

.cpro-dl-facet:first-of-type {
    border-top: 0;
    padding-block-start: 0;
}

.cpro-dl-facet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--cpro-dl-text);
    font: inherit;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .85;
}

.cpro-dl-facet__count {
    opacity: .5;
    margin-inline-start: 4px;
}

.cpro-dl-facet__icon {
    position: relative;
    width: 12px;
    height: 12px;
    flex: none;
}

.cpro-dl-facet__icon::before,
.cpro-dl-facet__icon::after {
    content: "";
    position: absolute;
    background: currentColor;
    inset: 50% 0 auto 0;
    height: 1px;
}

/* the vertical stroke disappears when the group is open, turning + into – */
.cpro-dl-facet__icon::after {
    inset: 0 50% auto auto;
    width: 1px;
    height: 100%;
    translate: 50% 0;
    transition: opacity .15s ease;
}

.cpro-dl-facet__head[aria-expanded="true"] .cpro-dl-facet__icon::after { opacity: 0; }

.cpro-dl-facet__body {
    margin-block-start: 12px;
    /* 11 document types in a 280px rail is a tall column; the scroll belongs to the facet rather
       than the whole rail so the search field stays in view while scanning it. */
    max-height: 320px;
    overflow-y: auto;
}

.cpro-dl-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 4px;
    font-size: 14px;
    cursor: pointer;
}

.cpro-dl-check input {
    width: 13px;
    height: 13px;
    flex: none;
    accent-color: #fff;
    margin: 0;
}

.cpro-dl-check__name {
    flex: 1 1 auto;
    opacity: .85;
}

.cpro-dl-check__count {
    opacity: .4;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* =========================================================================
   RESULTS / EMPTY / LOAD MORE
   ========================================================================= */

.cpro-dl-empty {
    margin: 32px 0 0;
    opacity: .6;
}

.cpro-dl-more {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-block-start: 28px;
}

.cpro-dl-more[hidden] { display: none; }

.cpro-dl-more__count {
    font-size: 12px;
    opacity: .45;
    font-variant-numeric: tabular-nums;
}

.cpro-dl-library.is-loading .cpro-dl-library__main {
    opacity: .45;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* =========================================================================
   BUTTONS / CTA BAND
   ========================================================================= */

.cpro-dl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 52px;
    border-radius: 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .2s ease, color .2s ease;
}

.cpro-dl-btn--solid {
    background: #fff;
    color: #000;
    border: 1px solid #fff;
}

.cpro-dl-btn--solid:hover,
.cpro-dl-btn--solid:focus-visible {
    background: #d9d9d9;
    border-color: #d9d9d9;
    color: #000;
}

.cpro-dl-btn--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
}

.cpro-dl-btn--ghost:hover,
.cpro-dl-btn--ghost:focus-visible {
    background: rgb(255 255 255 / .12);
    color: #fff;
}

/* Matched to the Video Library's CTA band, value for value — the two pages sit one click apart in
   the same support flow and a differently-proportioned band reads as a mistake rather than a
   variation. The copy is vertically CENTRED against the still (align-self), which is the part that
   was wrong here first: without it the body sits at the top of a 420px row and the band looks
   top-heavy. */
.cpro-dl-cta {
    display: grid;
    grid-template-columns: 45% minmax(0, 1fr);
    align-items: stretch;
    margin-block-start: 72px;
    background: #121314;
}

.cpro-dl-cta__still {
    min-height: 420px;
    background-color: #000;
    background-size: cover;
    background-position: center;
}

/* the still is decorative; dim it so the copy beside it stays dominant */
.cpro-dl-cta__still:not(.cpro-dl-cta__still--empty) {
    filter: grayscale(1) brightness(.55);
}

.cpro-dl-cta__body {
    align-self: center;
    padding: 64px 72px;
}

.cpro-dl-cta__eyebrow {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .65;
}

.cpro-dl-cta__head {
    margin: 16px 0 0;
    font-size: 32px;
    line-height: 1.25;
    text-transform: uppercase;
    max-width: 16ch;
}

.cpro-dl-cta__sub {
    margin: 18px 0 0;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.55;
    opacity: .7;
}

.cpro-dl-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-block-start: 32px;
}

/* No still available: the band becomes one centred column rather than a lopsided half. */
.cpro-dl-cta--noart {
    grid-template-columns: minmax(0, 1fr);
}

.cpro-dl-cta--noart .cpro-dl-cta__body {
    width: 100%;
    max-width: 780px;
    margin-inline: auto;
    padding-block: 72px;
    text-align: center;
}

.cpro-dl-cta--noart .cpro-dl-cta__head,
.cpro-dl-cta--noart .cpro-dl-cta__sub {
    max-width: none;
}

.cpro-dl-cta--noart .cpro-dl-cta__actions {
    justify-content: center;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1199px) {
    .cpro-dl-hero { grid-template-columns: minmax(0, 1fr); }
    .cpro-dl-hero__title { font-size: 42px; }
    .cpro-dl-hero__sub { font-size: 17px; }

    .cpro-dl-cta { grid-template-columns: minmax(0, 1fr); }
    .cpro-dl-cta__still { min-height: 260px; }
    .cpro-dl-cta__body { padding: 56px 48px; }

    /* The rail leaves the flow entirely — it is fixed — so the main column is simply full width. */
    .cpro-dl-library__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 959px) {
    /* 48px of side padding costs a quarter of the width on a phone. 15px, not a rounder number,
       because that is what UIkit's .uk-container drops to below 640 — the hero copy has to sit on
       the same left edge as the body content, not 9px inside it. */
    .cpro-dl-hero--media {
        padding: 40px 15px;
        min-height: 380px;
    }

    /* The left-weighted wash assumes copy BESIDE footage. Stacked on a phone the copy spans the
       full width, so a horizontal gradient dims the whole frame to near-black and the reel simply
       disappears. Even it out vertically instead: footage at the top, darkest under the copy. */
    .cpro-dl-hero__scrim {
        background:
            linear-gradient(0deg, rgb(0 0 0 / .85) 0%, rgb(0 0 0 / .55) 60%, rgb(0 0 0 / .45) 100%);
    }
}

@media (max-width: 767px) {
    .cpro-dl-hero__title { font-size: 32px; }
    .cpro-dl-section__title { font-size: 20px; }

    .cpro-dl-cta__body { padding: 40px 24px; }
    .cpro-dl-cta__head { font-size: 26px; }
    .cpro-dl-cta__actions .cpro-dl-btn { width: 100%; }

    /* The row stays THREE columns; the button becomes a square glyph.
       Stacking a full-width Download button under each title was the first attempt and it made
       every row ~150px tall — eleven sections of that is an enormous amount of scrolling for a
       list whose whole job is to be scanned. Dropping the word "Download" costs nothing here: the
       downward arrow beside a PDF badge is unambiguous, and the label is still read out (it is
       moved off-screen, not removed) along with the file's own name. */
    .cpro-dl-row {
        grid-template-columns: 40px minmax(0, 1fr) 44px;
        gap: 12px;
        padding: 14px 0;
    }

    .cpro-dl-row__badge {
        width: 40px;
        height: 32px;
        font-size: 10px;
        align-self: start;
        margin-block-start: 2px;
    }

    .cpro-dl-row__title { font-size: 15px; }

    .cpro-dl-row__meta {
        font-size: 11px;
        /* Type + product on one line: on a 390px screen these wrap to three lines and turn the
           meta into the loudest thing in the row. */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cpro-dl-row__btn {
        width: 44px;
        min-width: 0;
        height: 44px;
        padding-inline: 0;
        align-self: start;
    }

    /* Off-screen, not display:none — the button would otherwise be an unlabelled link. */
    .cpro-dl-row__btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .cpro-dl-row__btn-glyph { font-size: 16px; }

    .cpro-dl-strip { padding-block: 28px 30px; }
}

/* =========================================================================
   MOBILE FILTER SHEET (below 1200)
   A sheet rather than UIkit offcanvas: offcanvas only slides from the sides,
   and filters you reach by thumb belong at the bottom of the screen.
   ========================================================================= */

/* The sheet chrome only exists below 1200; above it the rail is a plain sidebar. */
.cpro-dl-rail__close,
.cpro-dl-rail__ctas,
.cpro-dl-fab,
.cpro-dl-sheet-backdrop {
    display: none;
}

/* The sheet takes focus on open so the dialog is announced. It is not a control and must not look
   like one; its children keep their focus rings. */
.cpro-dl-rail:focus { outline: none; }

.cpro-dl-library :is(button, a, input):focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 1199px) {
    .cpro-dl-fab {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 1090;
        padding: 13px 22px;
        border: 1px solid #333;
        border-radius: 0;
        cursor: pointer;
        background: #121314;
        color: #fff;
        font: inherit;
        font-size: 13px;
        letter-spacing: .06em;
        text-transform: uppercase;
        box-shadow: 0 6px 20px rgb(0 0 0 / .45);
    }

    .cpro-dl-fab__count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        background: #fff;
        color: #000;
        font-size: 11px;
        letter-spacing: 0;
    }

    .cpro-dl-fab__count[hidden] { display: none; }

    .cpro-dl-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1095;
        background: rgb(0 0 0 / .6);
        opacity: 0;
        transition: opacity .28s ease;
    }

    .cpro-dl-sheet-backdrop[hidden] { display: none; }

    .cpro-dl-library[data-filters-open="1"] .cpro-dl-sheet-backdrop { opacity: 1; }

    .cpro-dl-rail {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1100;
        max-height: 85vh;
        overflow: hidden;
        background: #121314;
        border-top: 1px solid #333;
        box-shadow: 0 -8px 40px rgb(0 0 0 / .5);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility .28s;
    }

    .cpro-dl-library[data-filters-open="1"] .cpro-dl-rail {
        transform: translateY(0);
        visibility: visible;
    }

    /* Decoration: signals "this pulls up from the bottom". */
    .cpro-dl-rail::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        translate: -50% 0;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: #555;
        z-index: 3;
    }

    /* __inner scrolls; head and CTAs stick to its edges. Done this way rather than a flex column so
       no extra wrapper is needed around the facets. */
    .cpro-dl-rail__inner {
        position: static;
        max-height: 85vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 0 20px;
        border: 0;
        background: #121314;
    }

    /* Inside the sheet the panel itself scrolls, so a second scroller in the facet traps the
       gesture and the list feels stuck. */
    .cpro-dl-facet__body {
        max-height: none;
        overflow: visible;
    }

    .cpro-dl-rail__head {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #121314;
        padding: 24px 0 12px;
    }

    /* Redundant inside the sheet — the CTA bar carries Clear all where a thumb can reach it. */
    .cpro-dl-rail__head .cpro-dl-rail__clear { display: none; }

    .cpro-dl-rail__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-inline-start: auto;
        width: 32px;
        height: 32px;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
        color: #fff;
        font-size: 24px;
        line-height: 1;
        opacity: .7;
    }

    .cpro-dl-rail__ctas {
        display: flex;
        gap: 10px;
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: #121314;
        padding: 14px 0 18px;
        margin-block-start: 8px;
        border-top: 1px solid #333;
    }

    .cpro-dl-rail__ctas .cpro-dl-btn {
        flex: 1 1 0;
        width: auto;
        min-height: 48px;
        height: auto;
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cpro-dl-rail,
    .cpro-dl-sheet-backdrop { transition: none; }

    /* The reel is decoration; someone who has asked for less motion gets the poster. */
    .cpro-dl-hero__video { display: none; }
}