.dm-section--slider{padding:0}
/* Astra's own `#primary{margin:4em 0}` (theme CSS, not this plugin) is what
   puts ~60px above the very first homepage section regardless of which
   section that is — not a Duck Mark rhythm token, so compact_section_gap's
   inline style can't touch it. body.home + #primary beats plain #primary on
   class-count, so this reliably wins without !important. Scoped to the
   homepage only; every other template keeps Astra's normal top margin
   (2026-08-20). */
body.home #primary{margin-top:0!important}
/*
 * The "torn paper" beige zigzag above wide-banner-carousel is not this
 * plugin's CSS and not an "unplaced section" warning — it's
 * `[data-dm-layout="street-magazine"][data-dm-seam="torn-paper"] .dm-slot +
 * .dm-slot::before` in layouts/street-magazine.css: a deliberate seam drawn
 * between EVERY pair of adjacent layout slots. hero.slider_2 (second
 * hero-family instance) exceeds this layout's single-capacity "hero" slot,
 * so it lands in `.dm-slot--unplaced`, which is still just another slot in
 * the sequence and gets the same seam as any other. Confirmed live (2026-08-20):
 * disabling `.dm-coverflow__card`/`.dm-coverflow__media` backgrounds did
 * NOT remove it — the shape comes from `.dm-slot--unplaced::before`'s own
 * clip-path, not from coverflow's content.
 * Scoped by [data-dm-slider-player] (present only when player_ui_enabled
 * resolves true, i.e. only for the wide-banner-carousel preset today) rather
 * than by resource_key, so this follows the preset, not a specific instance
 * or its position. Every OTHER slot boundary (hero→coverflow included) keeps
 * its seam untouched — verified via computed style after this rule: only
 * `.dm-slot--unplaced::before` reports display:none.
 */
[data-dm-layout="street-magazine"][data-dm-seam="torn-paper"] .dm-slot:has([data-dm-slider-player])::before{display:none!important}
.dm-native-slider{position:relative;overflow:hidden;min-height:var(--dm-slider-h-desktop,620px);aspect-ratio:var(--dm-slider-ratio,auto);background:var(--dm-bg);color:var(--dm-text);isolation:isolate}
.dm-native-slider__track,.dm-native-slider__slide{min-height:inherit;height:100%}
.dm-native-slider__track{position:relative}
.dm-native-slider__slide{position:absolute;inset:0;display:grid;align-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s ease,transform .55s ease}
.dm-native-slider__slide[data-active="true"]{position:relative;opacity:1;visibility:visible;pointer-events:auto;z-index:2}
.dm-native-slider--slide .dm-native-slider__slide{transform:translateX(5%)}
.dm-native-slider--slide .dm-native-slider__slide[data-active="true"]{transform:translateX(0)}
.dm-native-slider__slide-link{position:absolute;inset:0;display:block}
/* `body.dm-site-shell-enabled img{height:auto}` (site-shell.css, a sitewide
   image reset) outranks this rule's specificity (1 class vs. 1 class + 2
   elements), so every slide's image was rendering at ITS OWN intrinsic
   height instead of filling the slide box — invisible on slide 1 only
   because that image happens to be the one --dm-slider-ratio was computed
   from, but any OTHER slide with a different native ratio left a real gap
   below itself, exposing raw background there. General engine bug, not
   specific to any preset — the `!important` is scoped to this one selector,
   not a global override (2026-08-20). */
.dm-native-slider__image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:var(--dm-slider-image-fit,cover);object-position:var(--dm-slider-image-position,50% 50%);z-index:-3}
.dm-native-slider__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,var(--dm-slider-overlay,.28)),rgba(0,0,0,calc(var(--dm-slider-overlay,.28) * .28)));z-index:-2}
.dm-native-slider__inner{width:min(var(--dm-container,1240px),calc(100% - 48px));margin:0 auto;padding:64px 0}
/* content_container:"viewport" — the copy escapes the shared site container and
   insets from the raw viewport edge instead, for a composition that sits close
   to the screen edge. Opt-in per instance via the data attribute; the rule
   above (no attribute / "contained") is completely untouched (2026-08-21). */
.dm-native-slider[data-content-container="viewport"] .dm-native-slider__inner{width:100%;margin:0;padding:64px clamp(24px,3vw,64px)}
.dm-native-slider__content{width:min(100%,var(--dm-slider-content,620px));text-align:left}
.dm-native-slider--text-center .dm-native-slider__content{margin-inline:auto;text-align:center}
.dm-native-slider--text-right .dm-native-slider__content{margin-left:auto;text-align:right}
.dm-native-slider__eyebrow{margin:0 0 14px;font:600 var(--dm-slider-eyebrow-size,.78rem)/1.2 var(--dm-font-body,inherit);letter-spacing:var(--dm-slider-eyebrow-ls,.18em);text-transform:uppercase;color:var(--dm-slider-eyebrow-color,inherit)}
/* Author-typed line breaks (title/description are both <textarea> in Studio)
   render as real line breaks via pre-line rather than a constructed <br> —
   the value itself stays plain esc_html() text, never markup (2026-08-21).
   Sizing: --dm-slider-title-size is unset by default, so font-size falls to
   the exact original clamp() — zero visual change for every existing preset. */
.dm-native-slider__title{margin:0;font-family:var(--dm-slider-title-font,var(--dm-font-display,inherit));font-weight:var(--dm-slider-title-weight,700);font-size:var(--dm-slider-title-size,clamp(2.6rem,6vw,5.6rem));line-height:var(--dm-slider-title-lh,.95);letter-spacing:var(--dm-slider-title-ls,-.04em);color:var(--dm-slider-title-color,inherit);white-space:pre-line}
.dm-native-slider__title-line{display:block}.dm-native-slider__title-line--accent{color:var(--dm-primary);font-style:italic}
.dm-native-slider__copy{max-width:52ch;margin:22px 0 0;font-family:var(--dm-font-body,inherit);font-weight:400;font-size:var(--dm-slider-copy-size,clamp(1rem,1.4vw,1.18rem));line-height:1.6;color:var(--dm-slider-copy-color,inherit);white-space:pre-line}
.dm-native-slider--text-center .dm-native-slider__copy{margin-inline:auto}.dm-native-slider--text-right .dm-native-slider__copy{margin-left:auto}
.dm-native-slider__cta{display:inline-flex;align-items:center;justify-content:center;margin-top:28px;min-height:46px;padding:0 24px;border-radius:var(--dm-btn-radius,999px);background:var(--dm-slider-cta-color,var(--dm-primary));color:var(--dm-on-primary);font-weight:700;text-decoration:none}
/* cta_style variants. "solid" (default, no class override needed below) is
   exactly the rule above — existing hero.slider instances never emit any of
   these classes' selectors changing, since dm-native-slider__cta--solid has
   no rule of its own. */
.dm-native-slider__cta--outline{background:transparent;border:2px solid var(--dm-slider-cta-color,var(--dm-primary));color:var(--dm-slider-cta-color,var(--dm-primary))}
.dm-native-slider__cta--text-link{min-height:0;margin-top:22px;padding:0;border-radius:0;background:transparent;color:var(--dm-slider-cta-color,var(--dm-primary));font-weight:600;letter-spacing:.02em;text-underline-offset:4px}
.dm-native-slider__cta--text-link:hover,.dm-native-slider__cta--text-link:focus-visible{text-decoration:underline}
.dm-native-slider__arrow{position:absolute;top:50%;z-index:4;transform:translateY(-50%);width:44px;height:44px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(0,0,0,.24);color:var(--dm-on-primary);backdrop-filter:blur(10px);cursor:pointer}
.dm-native-slider__arrow--prev{left:20px}.dm-native-slider__arrow--next{right:20px}
/* Arrow design variants (arrows_style). "ghost" is the default look above. */
.dm-native-slider[data-arrows-style="solid"] .dm-native-slider__arrow{background:var(--dm-primary);border-color:transparent;color:var(--dm-on-primary);backdrop-filter:none}
.dm-native-slider[data-arrows-style="minimal"] .dm-native-slider__arrow{background:transparent;border-color:transparent;backdrop-filter:none;font-size:22px}
/* Arrow position variants (arrows_position). "edge" is the default above;
   "corner" clusters both arrows together in the bottom-right, out of the
   vertical-centre reading path and clear of the centred dots. */
.dm-native-slider[data-arrows-position="corner"] .dm-native-slider__arrow{top:auto;bottom:20px;transform:none}
.dm-native-slider[data-arrows-position="corner"] .dm-native-slider__arrow--prev{left:auto;right:76px}
.dm-native-slider[data-arrows-position="corner"] .dm-native-slider__arrow--next{right:20px}
.dm-native-slider__dots{position:absolute;left:50%;bottom:22px;z-index:4;display:flex;gap:9px;transform:translateX(-50%)}
.dm-native-slider__dot{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.45);cursor:pointer}
.dm-native-slider__dot[aria-current="true"]{width:28px;background:var(--dm-on-primary)}
@media(max-width:900px){.dm-native-slider{min-height:var(--dm-slider-h-tablet,520px)}.dm-native-slider__inner{width:min(100% - 36px,var(--dm-container,1240px))}.dm-native-slider__arrow{width:40px;height:40px}.dm-native-slider__arrow--prev{left:12px}.dm-native-slider__arrow--next{right:12px}
/* Falls through to the desktop size (fixed or clamp) when no tablet-specific
   value was authored — same chain the responsive width editor's other
   fields already assume, so an instance with only title_size_desktop set
   still shrinks sensibly instead of jumping back to the raw clamp(). */
.dm-native-slider__title{font-size:var(--dm-slider-title-size-tablet,var(--dm-slider-title-size,clamp(2.6rem,6vw,5.6rem)))}}
@media(max-width:640px){.dm-native-slider{min-height:var(--dm-slider-h-mobile,560px)}.dm-native-slider__inner{width:calc(100% - 32px);padding:56px 0 80px}.dm-native-slider__title{font-size:var(--dm-slider-title-size-mobile,clamp(2.3rem,13vw,4.2rem))}.dm-native-slider__arrow{display:none}.dm-native-slider__shade{background:linear-gradient(0deg,rgba(0,0,0,var(--dm-slider-overlay,.28)),rgba(0,0,0,calc(var(--dm-slider-overlay,.28) * .28)))}}
@media(prefers-reduced-motion:reduce){.dm-native-slider__slide{transition:none!important}}

/* Video-player-like control bar (player_ui_enabled). Not a <video> control —
   it mirrors the carousel's own autoplay timer (patterns/slider.js). A thin,
   transparent overlay pinned to the bottom of the banner — no backing scrim,
   just the icons/track/text directly over the artwork (2026-08-20). */
.dm-native-slider__player{position:absolute;left:clamp(16px,4vw,44px);right:clamp(16px,4vw,44px);bottom:clamp(18px,3vw,30px);z-index:5;display:flex;align-items:center;gap:clamp(10px,1.6vw,16px);flex-wrap:nowrap}
.dm-native-slider__player-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;margin:0;border:0;background:transparent;color:#f4f5ef;cursor:pointer;line-height:0}
.dm-native-slider__player-btn:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:2px}
.dm-native-slider__icon{width:17px;height:17px;fill:currentColor;display:block}
.dm-native-slider__player-play .dm-native-slider__icon--play{display:none}
.dm-native-slider__player-play.is-paused .dm-native-slider__icon--pause{display:none}
.dm-native-slider__player-play.is-paused .dm-native-slider__icon--play{display:block}
.dm-native-slider__player-volume .dm-native-slider__icon--vol-off{display:none}
.dm-native-slider__player-volume.is-muted .dm-native-slider__icon--vol-on{display:none}
.dm-native-slider__player-volume.is-muted .dm-native-slider__icon--vol-off{display:block}
.dm-native-slider__player-progress{flex:1 1 auto;min-width:0;padding:9px 0;cursor:default}
.dm-native-slider__player-track{position:relative;display:block;width:100%;height:3px;border-radius:999px;background:rgba(255,255,255,.32)}
.dm-native-slider__player-fill{position:absolute;top:0;left:0;bottom:0;width:0%;border-radius:999px;background:#c3d925;transition:width .22s linear}
@media(prefers-reduced-motion:reduce){.dm-native-slider__player-fill{transition:none}}
.dm-native-slider__player-knob{position:absolute;top:50%;right:-5px;width:10px;height:10px;border-radius:999px;background:#f5f6ef;transform:translateY(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.dm-native-slider__player.is-static .dm-native-slider__player-knob,
.dm-native-slider__player.is-static .dm-native-slider__player-fill{display:none}
.dm-native-slider__player-time{flex:0 0 auto;font:500 12px/1 var(--dm-font-body,inherit);color:#f4f5ef;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:640px){.dm-native-slider__player{left:14px;right:14px;gap:10px}.dm-native-slider__player-volume,.dm-native-slider__player-fullscreen{display:none}.dm-native-slider__player-time{font-size:11px}}