/* Agrileader Slider — front */

.agr-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  container-type: inline-size;
  container-name: agrslider;
  /* Approximates the theme header's own container inset so hero text lines up with the logo. */
  --content-inset: clamp(24px, 13%, 260px);
}

.agr-slider__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 5;
  max-height: 600px;
  min-height: 280px;
  overflow: hidden;
  background: #111;
}

@container agrslider (max-width: 768px) {
  .agr-slider__viewport {
    aspect-ratio: 1 / 1;
    max-height: 460px;
    min-height: 320px;
  }
}

/* ---- slide stacking + transitions ---- */
.agr-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  background: var(--accent-bg, var(--accent, #0C8E44));
  transition: opacity .65s ease, transform .65s cubic-bezier(.77, 0, .175, 1), clip-path .7s ease, visibility .65s ease;
}
.agr-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.agr-slide[data-transition="slide"] { transform: translateX(4%); }
.agr-slide[data-transition="slide"].is-active { transform: translateX(0); }
.agr-slide[data-transition="zoom"] { transform: scale(1.08); }
.agr-slide[data-transition="zoom"].is-active { transform: scale(1); }
.agr-slide[data-transition="stripes"] { clip-path: inset(0 0 0 100%); }
.agr-slide[data-transition="stripes"].is-active { clip-path: inset(0 0 0 0%); }

@media (prefers-reduced-motion: reduce) {
  .agr-slide { transition: opacity .4s ease; transform: none !important; clip-path: none !important; }
}

/* ---- background image + Ken Burns ---- */
.agr-slide__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
}
/* Paused until the slide is actually active: without this, EVERY slide's Ken Burns keeps
   running in the background for as long as the page is open, even though only one background
   is ever visible at a time — wasted GPU/CPU/battery on mobile. */
/* Only present at all when a distinct mobile image was actually uploaded (see slider.tpl) — when
   both exist, exactly one is ever visible: desktop by default, swapped for mobile below 768px. */
.agr-slide__bg--mobile-only { display: none; }
@container agrslider (max-width: 768px) {
  .agr-slide__bg--desktop-only { display: none; }
  .agr-slide__bg--mobile-only { display: block; }
}
.agr-slide__bg.kb-on { animation: agr-kenburns 11s ease-in-out infinite alternate; animation-play-state: paused; }
.agr-slide.is-active .agr-slide__bg.kb-on { animation-play-state: running; }
@keyframes agr-kenburns {
  from { transform: scale(1.0) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.6%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .agr-slide__bg.kb-on { animation: none; }
}

/* ---- voile (dark overlay), driven by --voile 0..1 ---- */
.agr-slide__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, calc(var(--voile, 0.5) * 0.55));
}
.agr-slide[data-layout="centered"] .agr-slide__overlay {
  background: radial-gradient(ellipse at 50% 50%,
    rgba(0, 0, 0, calc(var(--voile, 0.5) * 0.18)) 0%,
    rgba(0, 0, 0, calc(var(--voile, 0.5) * 1.1)) 68%,
    rgba(0, 0, 0, calc(var(--voile, 0.5) * 1.5)) 100%);
}
.agr-slide[data-layout="full"] .agr-slide__overlay {
  background: linear-gradient(0deg, rgba(0, 0, 0, calc(var(--voile, 0.5) * 1.4)) 12%, transparent 62%);
}
.agr-slide[data-layout="minimal"] .agr-slide__overlay {
  background: linear-gradient(100deg, rgba(0, 0, 0, calc(var(--voile, 0.5) * 0.96)) 0%, rgba(0, 0, 0, calc(var(--voile, 0.5) * 0.1)) 46%);
}

/* ---- panel shape (diagonal / split) ---- */
.agr-slide__panel { position: absolute; inset: 0; z-index: 2; display: none; background: var(--accent-bg, var(--accent, #0C8E44)); }
.agr-slide[data-layout="diagonal"] .agr-slide__panel {
  display: block; width: 56%;
  clip-path: polygon(0 0, 82% 0, 100% 100%, 0% 100%);
}
.agr-slide[data-layout="split"] .agr-slide__panel { display: block; width: 42%; }

/* All 4 [data-side="right"] rules below are desktop-only (min-width:769px) on purpose: each has
   higher specificity (4 selectors) than its corresponding mobile override 3 rows down (3
   selectors, e.g. ".agr-slide[data-layout=\"split\"] .agr-slide__panel"), and specificity wins
   over source order even across an @container boundary — without this guard, a right-panel slide
   would keep e.g. its diagonal clip-path or its `right:`-based content position UNDER the mobile
   rule that's supposed to replace it with a full-width panel / a centered, transform-recentered
   content box, producing a broken hybrid of both rules' properties (this exact bug shipped once:
   content clipped on both edges because `right:` from here fought the mobile translate(-50%,-50%)). */
@container agrslider (min-width: 769px) {
  .agr-slide[data-layout="diagonal"][data-side="right"] .agr-slide__panel {
    left: auto; right: 0;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
  }
  .agr-slide[data-layout="split"][data-side="right"] .agr-slide__panel { left: auto; right: 0; }
}

/* Confine the background photo to the visible (non-panel) side, so object-fit:cover crops it
   for the actual space it occupies instead of the full slide width. */
.agr-slide[data-layout="diagonal"] .agr-slide__bg { left: auto; right: 0; width: 58%; }
.agr-slide[data-layout="split"] .agr-slide__bg { left: auto; right: 0; width: 62%; }
@container agrslider (min-width: 769px) {
  .agr-slide[data-layout="diagonal"][data-side="right"] .agr-slide__bg { left: 0; right: auto; }
  .agr-slide[data-layout="split"][data-side="right"] .agr-slide__bg { left: 0; right: auto; }
}

@container agrslider (max-width: 768px) {
  .agr-slide[data-layout="diagonal"] .agr-slide__panel,
  .agr-slide[data-layout="split"] .agr-slide__panel {
    width: 100%; clip-path: none; background: rgba(0, 0, 0, .46);
  }
  .agr-slide[data-layout="diagonal"] .agr-slide__bg,
  .agr-slide[data-layout="split"] .agr-slide__bg {
    left: 0; right: 0; width: 100%;
  }
}

/* ---- product visual cluster (diagonal / split, desktop only) ---- */
.agr-slide__product {
  position: absolute; z-index: 3;
  top: 50%; width: 38%; max-width: 250px; height: 66%; max-height: 230px;
  transform: translateY(-50%);
  pointer-events: none;
}
.agr-slide__product img {
  position: absolute; display: block; width: 100%; height: auto;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .35));
}
/* 1 visuel : grand, centré dans la zone */
.agr-slide__product img:only-child { width: 82%; left: 9%; top: 9%; z-index: 3; }

/* 2 visuels : duo centré (un devant en grand, un décalé derrière) */
.agr-slide__product img:first-child:nth-last-child(2) { width: 78%; left: 18%; top: 18%; z-index: 3; }
.agr-slide__product img:nth-child(2):last-child { width: 58%; left: -6%; top: 0%; z-index: 1; transform: rotate(-9deg); opacity: .92; }

/* 3 visuels : grappe (un devant, deux décalés derrière) */
.agr-slide__product img:first-child:nth-last-child(3) { width: 78%; left: 11%; top: 12%; z-index: 3; }
.agr-slide__product img:nth-child(2):nth-last-child(2) { width: 58%; left: -8%; top: 2%; z-index: 1; transform: rotate(-10deg); opacity: .92; }
.agr-slide__product img:nth-child(3):last-child { width: 58%; left: 38%; top: 32%; z-index: 2; transform: rotate(9deg); opacity: .94; }

.agr-slide[data-layout="diagonal"] .agr-slide__product,
.agr-slide[data-layout="split"] .agr-slide__product { right: 6%; }
.agr-slide[data-layout="diagonal"][data-side="right"] .agr-slide__product,
.agr-slide[data-layout="split"][data-side="right"] .agr-slide__product { right: auto; left: 6%; }
.agr-slide:not([data-layout="diagonal"]):not([data-layout="split"]) .agr-slide__product { display: none; }
@container agrslider (max-width: 768px) {
  .agr-slide__product { display: none; }
}

/* ---- content ---- */
.agr-slide__content {
  position: absolute; z-index: 4;
  font-family: var(--font-body, 'Poppins'), sans-serif !important;
  color: var(--text-color, #fff) !important;
}
/* !important here too: extra_html (admin-authored free HTML, slider.tpl) is injected as a direct
   child of .agr-slide__content, unlike badge/title/sub which already carry their own protection —
   without it, a host theme's own color/font-family on generic content wrappers would silently
   leak into that free HTML block. */
/* max-width tracks the panel's own (narrower, worst-case) edge rather than a flat percentage:
   without this, long lines can render past the panel onto the bare photo, where only the weak
   generic overlay sits behind them instead of the opaque panel. Diagonal's panel narrows toward
   its slanted top edge (down to ~46% of the slide at its narrowest), so that's the bound used. */
.agr-slide[data-layout="diagonal"] .agr-slide__content { left: var(--content-inset) !important; top: 50% !important; max-width: calc(46% - var(--content-inset)) !important; transform: translateY(-50%) !important; text-align: left !important; }
.agr-slide[data-layout="diagonal"] .agr-slide__ctas { justify-content: flex-start !important; }
/* Desktop-only guard: see the panel/bg rules above for why — same specificity-vs-container-query
   conflict, this is the instance that actually shipped visibly broken (content clipped on both
   edges on mobile for a right-panel slide). */
/* !important from here down on every positioning/alignment property of .agr-slide__content and
   .agr-slide__ctas: these had none, unlike the text elements below (badge/title/sub), and a host
   theme's own generic text-align rule (very common — many themes set a default text-align on
   headings/paragraphs/content wrappers) was overriding text-align:right with no !important of its
   own needed to win, since ours simply wasn't competing at all. Confirmed live: a right-panel
   slide's content correctly repositioned to the right (a "right:" declaration from this exact
   rule, so the rule WAS matching) but rendered left-aligned anyway — only explainable by something
   else's plain text-align beating this property specifically. */
@container agrslider (min-width: 769px) {
  .agr-slide[data-layout="diagonal"][data-side="right"] .agr-slide__content { left: auto !important; right: var(--content-inset) !important; text-align: right !important; }
  .agr-slide[data-layout="diagonal"][data-side="right"] .agr-slide__ctas { justify-content: flex-end !important; }
}

.agr-slide[data-layout="centered"] .agr-slide__content { left: 50% !important; top: 50% !important; max-width: 68% !important; transform: translate(-50%, -50%) !important; text-align: center !important; }
/* !important here too (see the .agr-cta/.agr-slide__ctas note below): without it, .agr-slide__sub's
   own base margin shorthand (margin:0 0 1.1em, which sets left/right:0 as a side effect) already
   beats this — this rule shipped silently dead since the day it was added, a component-internal
   collision rather than a host-theme one, but the exact same fix applies. */
.agr-slide[data-layout="centered"] .agr-slide__sub { margin-left: auto !important; margin-right: auto !important; }
.agr-slide[data-layout="centered"] .agr-slide__ctas { justify-content: center !important; }

.agr-slide[data-layout="full"] .agr-slide__content { left: var(--content-inset) !important; top: 50% !important; max-width: 54% !important; transform: translateY(-50%) !important; text-align: left !important; }
.agr-slide[data-layout="full"] .agr-slide__ctas { justify-content: flex-start !important; }

/* Same reasoning as diagonal above: split's panel is a flat 42% (front.css .agr-slide__panel),
   so the text column must stay within that minus its own inset, with a small safety margin. */
.agr-slide[data-layout="split"] .agr-slide__content { left: var(--content-inset) !important; top: 50% !important; max-width: calc(42% - var(--content-inset) - 16px) !important; transform: translateY(-50%) !important; text-align: left !important; }
.agr-slide[data-layout="split"] .agr-slide__ctas { justify-content: flex-start !important; }
@container agrslider (min-width: 769px) {
  .agr-slide[data-layout="split"][data-side="right"] .agr-slide__content { left: auto !important; right: var(--content-inset) !important; text-align: right !important; }
  .agr-slide[data-layout="split"][data-side="right"] .agr-slide__ctas { justify-content: flex-end !important; }
}

.agr-slide[data-layout="minimal"] .agr-slide__content { left: var(--content-inset) !important; top: 50% !important; max-width: 40% !important; transform: translateY(-50%) !important; text-align: left !important; }
.agr-slide[data-layout="minimal"] .agr-slide__ctas { justify-content: flex-start !important; }

@container agrslider (max-width: 768px) {
  /* Every layout centers on mobile, regardless of its desktop treatment (left/right panel,
     left-aligned full/minimal, etc.) — simpler and far more robust than trying to replicate each
     desktop-specific alignment at a width where there's no room for an asymmetric layout anyway,
     and it closes off the whole class of bug this file kept hitting (a desktop-only alignment rule
     surviving into the mobile view through some cascade edge case). One rule, every layout. */
  /* [data-layout] (attribute present, any value) rather than plain .agr-slide__content: needs to
     match the (0,3,0) specificity of the per-layout desktop rules above — those now carry
     !important on every positioning property, so a lower-specificity selector here would lose to
     them even inside this @container block, importance alone no longer being enough to decide. */
  .agr-slide[data-layout] .agr-slide__content {
    left: 50% !important; right: auto !important; top: 50% !important; transform: translate(-50%, -50%) !important;
    text-align: center !important; max-width: 84% !important;
  }
  .agr-slide[data-layout] .agr-slide__ctas { justify-content: center !important; }
  .agr-slide[data-layout="centered"] .agr-slide__content { max-width: 88% !important; }
}

/* ---- text elements ----
   !important throughout: this component can be embedded inside host pages with their own
   heading/link resets (the PrestaShop admin preview and its Bootstrap theme, in particular),
   so its own typography must never be overridable by the surrounding page. */
.agr-slide {
  --text-color: #fff;
  --text-sub-color: rgba(255, 255, 255, .8);
  --badge-bg: rgba(0, 0, 0, .35);
  --badge-border: rgba(255, 255, 255, .3);
}
.agr-slide[data-text-theme="sombre"] {
  --text-color: #17281c;
  --text-sub-color: rgba(23, 40, 28, .78);
  --badge-bg: rgba(255, 255, 255, .82);
  --badge-border: rgba(0, 0, 0, .12);
}
.agr-slide__badge {
  display: inline-block !important;
  font-family: var(--font-body, 'Poppins'), sans-serif !important;
  background: var(--badge-bg) !important;
  border: 1px solid var(--badge-border) !important;
  color: var(--badge-color, var(--text-color)) !important;
  font-size: 12px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important;
  padding: .5em 1em !important; border-radius: 5px !important; margin: 0 0 .8em !important;
  overflow-wrap: break-word !important; word-break: break-word !important;
}
.agr-slide__title {
  font-family: var(--font-display, 'Protest Strike'), sans-serif !important;
  font-weight: var(--font-weight, 400) !important;
  font-size: var(--title-size-d, clamp(22px, 2.7cqw, 40px)) !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  color: var(--title-color, var(--text-color)) !important;
  margin: 0 0 .4em !important;
  text-wrap: balance;
  overflow-wrap: break-word !important; word-break: break-word !important;
}
/* title_accent_color (--title-accent-color) is an explicit per-slide override: when set, it always
   wins, on every layout. When left empty, the old behavior applies unchanged — accent_color
   normally, or title_color/text_color on diagonal/split (see below) where accent_color would sit
   on a same-colored panel and be invisible. */
.agr-slide__title .accent { color: var(--title-accent-color, var(--accent, #0C8E44)) !important; }
/* On diagonal/split, the text sits directly on top of .agr-slide__panel, whose own background IS
   --accent-bg (= --accent when no gradient/accent_color2 is set) — recommended precisely because a
   flat single color reads better with a real photo (see the diagonal/split panel rules above). That
   means the "accent" word would be rendered in the exact same color as the panel behind it: legible
   nowhere, UNLESS title_accent_color is explicitly set to something else. Centered/full/minimal
   don't have this problem (their content sits over the photo/voile, not over a same-colored panel),
   so this fallback is scoped to just the two layouts where it's structural. */
.agr-slide[data-layout="diagonal"] .agr-slide__title .accent,
.agr-slide[data-layout="split"] .agr-slide__title .accent {
  color: var(--title-accent-color, var(--title-color, var(--text-color))) !important;
}
/* Split/diagonal have a much narrower text column than centered/full/minimal (see max-width
   above), so the same flat --title-size-d (up to 80px at "xl") wraps to more lines there and can
   push badge+title+subtitle+CTAs past the slide's own fixed height. Scaling the title down for
   just these two layouts keeps the worst case contained without capping every layout to the
   narrowest one's safe size. Scoped to min-width so it can never outrank the mobile rule below on
   specificity (3 selectors vs. 1) and silently override the fixed --title-size-m on phones — the
   narrow-column problem this solves is desktop-only anyway: mobile already goes full-width. */
@container agrslider (min-width: 769px) {
  .agr-slide[data-layout="split"] .agr-slide__title,
  .agr-slide[data-layout="diagonal"] .agr-slide__title {
    font-size: calc(var(--title-size-d, clamp(22px, 2.7cqw, 40px)) * 0.8) !important;
  }
}
@container agrslider (max-width: 768px) {
  .agr-slide__title { font-size: var(--title-size-m, 20px) !important; }
}
.agr-slide__sub {
  font-family: var(--font-body, 'Poppins'), sans-serif !important;
  font-size: 15px !important; font-weight: 400 !important;
  color: var(--subtitle-color, var(--text-sub-color)) !important;
  line-height: 1.6 !important; margin: 0 0 1.1em !important; max-width: 42ch;
  overflow-wrap: break-word !important; word-break: break-word !important;
}
@container agrslider (max-width: 768px) { .agr-slide__sub { font-size: 12.5px !important; max-width: 30ch; } }

/* !important on display: without it, a host theme rule targeting this element (its <a> children
   are real links — see .agr-cta below for why that specifically matters) could turn off flex
   entirely, and every justify-content !important above would then have nothing left to do. */
.agr-slide__ctas { display: flex !important; gap: .7em; flex-wrap: wrap; }
.agr-cta,
.agr-cta:hover,
.agr-cta:focus {
  font-family: var(--font-body, 'Poppins'), sans-serif !important;
  font-size: 13px !important; font-weight: 700 !important; letter-spacing: .03em !important; text-transform: uppercase !important;
  padding: .95em 1.7em !important; border-radius: 8px !important; text-decoration: none !important; display: inline-block !important;
}
/* !important on background/color from here down: these render as real <a> tags (slider.tpl), and
   unlike badge/title/sub these were left completely unprotected — a host theme rule as generic as
   ".content a { color: ... }" has just enough specificity to beat an unprotected .agr-cta--primary
   (and its own :hover), silently replacing the button's colors with the theme's default link style. */
.agr-cta--primary {
  background: var(--cta-bg, var(--accent-bg, var(--accent, #0C8E44))) !important; color: #fff !important;
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .5); transition: background .2s ease;
}
.agr-cta--primary:hover, .agr-cta--primary:focus { background: #000 !important; }
/* Same root cause as the title's accent word (see .agr-slide__title .accent above): on
   diagonal/split the button sits on .agr-slide__panel, whose own background IS --accent-bg —
   with no cta_color override, the button's fill is the exact same color as the panel behind it,
   so only the white text floats with no visible button shape. A thin border was tried here first,
   but at any noticeably reduced scale (e.g. the admin preview's own desktop simulation, painted
   at under half size) a ~1.5px border shrinks to a sub-pixel line and stops being visible at all.
   filter:brightness() has no such width to disappear at any zoom/scale — the whole button fill
   visibly lightens relative to the panel regardless of what color it started as (white text stays
   white: RGB values can't be pushed past 255, so only the colored background actually shifts). */
.agr-slide[data-layout="diagonal"] .agr-cta--primary,
.agr-slide[data-layout="split"] .agr-cta--primary {
  filter: brightness(1.4) !important;
}
.agr-cta--outline {
  background: rgba(255, 255, 255, .08) !important; color: var(--text-color, #fff) !important;
  border: 1.5px solid var(--badge-border, rgba(255, 255, 255, .5)) !important; transition: background .2s ease;
}
.agr-slide[data-text-theme="sombre"] .agr-cta--outline { background: rgba(0, 0, 0, .05) !important; }
.agr-cta--outline:hover, .agr-cta--outline:focus { background: #000 !important; }
@container agrslider (max-width: 768px) { .agr-cta { font-size: 11px; padding: .85em 1.3em; } }

/* ---- text reveal: staggered ("one by one") always; the visual style is chosen via
   [data-text-effect] on .agr-slide (douceur / cascade / rebond / rapide). ---- */
.agr-slide__badge, .agr-slide__title, .agr-slide__sub, .agr-slide__ctas {
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease, filter .5s ease;
}
.agr-slide__title { transition-delay: .12s; }
.agr-slide__sub   { transition-delay: .28s; }
.agr-slide__ctas  { transition-delay: .44s; }
.agr-slide.is-active .agr-slide__badge,
.agr-slide.is-active .agr-slide__title,
.agr-slide.is-active .agr-slide__sub,
.agr-slide.is-active .agr-slide__ctas { opacity: 1; transform: none; filter: none; }

/* douceur (default): simple, clean fade + slide, no scale/blur */
.agr-slide__badge { transform: translateY(-12px); }
.agr-slide__title { transform: translateY(-12px); }
.agr-slide__sub   { transform: translateY(10px); }
.agr-slide__ctas  { transform: translateY(12px); }

/* cascade: badge/CTA bounce in, title comes into focus from a blur */
.agr-slide[data-text-effect="cascade"] .agr-slide__badge {
  transform: translateY(-16px) scale(.85); transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
}
.agr-slide[data-text-effect="cascade"] .agr-slide__title {
  transform: translateY(-16px); filter: blur(6px);
}
.agr-slide[data-text-effect="cascade"] .agr-slide__ctas {
  transform: translateY(18px) scale(.92); transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
}

/* rebond: every element pops in with a scale bounce */
.agr-slide[data-text-effect="rebond"] .agr-slide__badge,
.agr-slide[data-text-effect="rebond"] .agr-slide__title,
.agr-slide[data-text-effect="rebond"] .agr-slide__sub,
.agr-slide[data-text-effect="rebond"] .agr-slide__ctas {
  transform: scale(.7); transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
}

/* rapide: short, subtle, quick succession — sober/professional feel */
.agr-slide[data-text-effect="rapide"] .agr-slide__badge,
.agr-slide[data-text-effect="rapide"] .agr-slide__title,
.agr-slide[data-text-effect="rapide"] .agr-slide__sub,
.agr-slide[data-text-effect="rapide"] .agr-slide__ctas {
  transform: translateY(4px); transition-duration: .25s;
}
.agr-slide[data-text-effect="rapide"] .agr-slide__title { transition-delay: .05s; }
.agr-slide[data-text-effect="rapide"] .agr-slide__sub   { transition-delay: .1s; }
.agr-slide[data-text-effect="rapide"] .agr-slide__ctas  { transition-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
  .agr-slide__badge, .agr-slide__title, .agr-slide__sub, .agr-slide__ctas {
    transition-delay: 0s !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ---- HTML-direct mode ---- */
.agr-slide__custom { position: absolute; inset: 0; }
.agr-slide__custom > * { width: 100%; height: 100%; }

/* ---- controls ---- */
.agr-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .32);
  color: #fff; font-size: 22px; line-height: 1; cursor: pointer; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.agr-slider__arrow:hover { background: rgba(0, 0, 0, .38); }
.agr-slider__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.agr-slider__arrow--prev { left: 16px; }
.agr-slider__arrow--next { right: 16px; }
@container agrslider (max-width: 560px) {
  .agr-slider__arrow { display: none; }
  /* Arrows are gone at this width, so the dots no longer need to leave room for them. */
  .agr-slider__dots { max-width: calc(100% - 20px); }
}

.agr-slider__playpause {
  position: absolute; top: 16px; right: 16px; z-index: 6;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 255, 255, .32);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.agr-slider__playpause:hover { background: rgba(0, 0, 0, .55); }
.agr-slider__playpause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* CSS-only pause/play glyph: two bars by default (pause icon, meaning "click to pause" — i.e.
   currently playing); .is-paused swaps to a single triangle (play icon, meaning "click to play"). */
.agr-slider__playpause-icon,
.agr-slider__playpause-icon::before,
.agr-slider__playpause-icon::after {
  box-sizing: border-box;
}
.agr-slider__playpause-icon { position: relative; width: 10px; height: 12px; }
.agr-slider__playpause-icon::before,
.agr-slider__playpause-icon::after {
  content: ''; position: absolute; top: 0; width: 3px; height: 12px; background: currentColor;
}
.agr-slider__playpause-icon::before { left: 0; }
.agr-slider__playpause-icon::after { left: 6px; }
.agr-slider__playpause.is-paused .agr-slider__playpause-icon {
  width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 10px solid currentColor;
}
.agr-slider__playpause.is-paused .agr-slider__playpause-icon::before,
.agr-slider__playpause.is-paused .agr-slider__playpause-icon::after { content: none; }

.agr-slider__dots {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; z-index: 6;
  max-width: calc(100% - 96px); overflow: hidden;
}
.agr-slider__dot {
  width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .4); transition: all .25s ease;
}
.agr-slider__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.agr-slider__dot.is-active { width: 26px; border-radius: 5px; background: #fff; }

.agr-slider__progress {
  position: absolute; bottom: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: rgba(255, 255, 255, .85); z-index: 6; transition: transform linear;
}

.agr-slider .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}