/* ==========================================================
   SoapKits — Hero Carousel (.shc-*)

   A frosted-glass hero slider. Structure, proportions and motion
   are ported from the BlackBerry homepage hero carousel
   (blackberry.com/en); the palette is re-mapped onto Spring Valley
   Ranch. Measured reference spec: docs/_bb/SPEC.md

   Reference geometry @1440 (container 1138 x 810):
     frame radius 14px
     slot padding 0 92px, panel flush-left
     panel 453x684, padding 48px, radius 14px, blur(8px)
     headline 40/44 wt500 ls -0.5px
     body 18/24
     CTA padding 8px 24px, radius 6px, 16/500, 24px icon sw3
     arrows 40x40, radius 10px, inset 24px, vertically centred
     pause bottom-right, dots centred underneath, 8px, gap 12px

   SPECIFICITY NOTE (see REFERENCE.md G27):
   Elementor's base element rules are (0,1,1) and beat any bare
   single-class rule. Every rule that must win is scoped to at least
   two classes (.shc-carousel .shc-x = 0,2,0), and Elementor's own
   per-widget rules are beaten with !important where a control's
   emitted declaration would otherwise lose.
   ========================================================== */

.shc-carousel {
  /* Arrow / control box */
  --shc-arrow: 40px;
  --shc-arrow-radius: 10px;
  --shc-arrow-inset: 24px;

  /* Dots */
  --shc-dot: 8px;
  --shc-dot-active-w: 12px;
  --shc-dot-gap: 12px;
  --shc-dots-margin: 24px;

  /* Panel geometry (control-driven values land on .shc-panel, these are fallbacks) */
  --shc-gap: 64px;
  --shc-text-gap: 24px;
  --shc-panel-alpha: 60%;
  --shc-panel-blur: 8px;
  --shc-panel-rgb: 9, 34, 16;

  /* Image overlay — a scrim between the photo and the text.
     NOTE the shape here is deliberately DIFFERENT from the panel above.
     The panel stores an `R, G, B` triple and rebuilds `rgba(triple, alpha)`.
     That only works while the colour is a literal hex: Elementor's
     `{{R}}, {{G}}, {{B}}` placeholders cannot decompose a GLOBAL colour
     (`var(--e-global-color-xxxx)`), so it substitutes the whole colour and
     the result is `rgba(#021D11, 100%)` — invalid CSS, silently dropped, and
     the overlay renders nothing. That is exactly what happened live (G78).

     So the overlay keeps the colour WHOLE in `--shc-overlay-color` and
     applies the strength as a plain `opacity` on the layer. That works for
     hex, rgb(), hsl(), named colours and global-colour references alike,
     and it sidesteps G29 (`color-mix` pins when the source colour is
     transparent) because we never mix — we fade to `transparent` and scale
     the whole layer. `--shc-overlay-strength` is therefore a UNITLESS 0–1
     number, not a percentage.

     BOTH names are deliberately NEW (`--shc-overlay-rgb` and
     `--shc-overlay-alpha` were the 1.9.3 names). Elementor's generated CSS is
     cached per post and does NOT regenerate on a plugin update, so any page
     already carrying the 1.9.3 rule still declares the old names directly on
     `.shc-overlay` — where they would outrank an inline value on the parent.
     Renaming makes that stale rule inert instead of wrong. */
  --shc-overlay-color: #021d11;
  --shc-overlay-strength: 0.5;

  /* Palette — Spring Valley Ranch */
  --shc-cta-bg-rest: #ffffff;
  --shc-cta-fg-rest: #092210;
  --shc-cta-bd-rest: transparent;
  --shc-cta-bg-hover: #ffb565;
  --shc-cta-fg-hover: #092210;
  --shc-cta-bd-hover: transparent;

  --shc-ctrl-bg-rest: #f4f6f8;
  --shc-ctrl-fg-rest: #092210;
  --shc-ctrl-bd-rest: #e4e7ec;
  --shc-ctrl-bg-hover: #092210;
  --shc-ctrl-fg-hover: #ffffff;
  --shc-ctrl-bd-hover: #092210;

  --shc-dot-c-rest: #092210;
  --shc-dot-off-rest: #9aa6a0;

  --shc-transition: 600ms;

  position: relative;
  width: 100%;
  display: block;
}

/* Focus ring: the widget is keyboard-focusable as a whole so arrow-key
   navigation can be announced, but we don't want a ring around the whole
   block on click. */
.shc-carousel:focus {
  outline: none;
}
.shc-carousel:focus-visible {
  outline: 3px solid #ef4444;
  outline-offset: 4px;
  border-radius: 16px;
}

/* ---------- Frame ---------------------------------------------------- */

.shc-carousel .shc-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: #0b1a12;
  isolation: isolate;
}

/* Fallback floor — ASPECT MODE ONLY.
   A derived height can round to nothing before the first image decodes, so it
   gets a floor. An EXPLICIT height must never be overridden by a fallback:
   `height: 300px` silently becoming 460px on a phone is exactly the "my
   setting does nothing" bug. The height-mode class comes from render(). */
.shc-carousel.shc-h-aspect .shc-frame {
  min-height: 320px;
}

/* Fill the Section. `height: 100%` only resolves against an ancestor with a
   definite height, so the root becomes a column flex box and the frame takes
   whatever the dots footer leaves. The floor stops it collapsing to 0 when
   the surrounding section has no height at all. */
.shc-carousel.shc-h-fill {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.shc-carousel.shc-h-fill .shc-frame {
  flex: 1 1 auto;
  min-height: 320px;
}

.shc-carousel.shc-bleed .shc-frame {
  border-radius: 0;
}

.shc-carousel .shc-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.shc-carousel .shc-track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
}

/* ---------- Slide ---------------------------------------------------- */

.shc-carousel .shc-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

/* Elementor's base `.elementor img { height: auto; max-width: 100% }` is
   (0,1,1) and would beat a bare `.shc-media { height: 100% }` (0,1,0),
   leaving the photo sized by its intrinsic ratio. Two classes win. (G27) */
.shc-carousel .shc-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- Image overlay -------------------------------------------- */
/* Sits directly on the photo and under the panel: .shc-slot is z-index 3,
   so 2 puts the scrim above the image and below every word and control.
   `pointer-events: none` matters — the overlay covers the whole slide, and
   without it it would swallow swipes, dots and CTA clicks.

   This rule is LAYOUT ONLY, deliberately: the tint is defined by the
   `.shc-overlay--*` variants below. If it painted a fallback background here,
   any stray `.shc-overlay` element would darken the photo with no way to see
   why from the panel — and "no tint" is the safe failure, not "wrong tint".

   The parent must carry `shc-has-overlay` (emitted only when the Overlay
   switcher is on). That is what makes the class load-bearing rather than
   decorative: a layer is only positioned when the widget actually opted in,
   and the specificity lands at (0,3,0), clear of Elementor's (0,1,1) base
   rules. */

.shc-carousel.shc-has-overlay .shc-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Strength lives here, once, for every variant. See the variable note at
     the top of this file for why this is `opacity` and not an rgba() alpha. */
  opacity: var(--shc-overlay-strength, 0.5);
}

/* Solid tint. */
.shc-carousel.shc-overlay--solid .shc-overlay {
  background-image: linear-gradient(
    var(--shc-overlay-color),
    var(--shc-overlay-color)
  );
}

/* Fade from the left — the default, because the glass panel is flush-left. */
.shc-carousel.shc-overlay--left .shc-overlay {
  background-image: linear-gradient(
    90deg,
    var(--shc-overlay-color) 0%,
    transparent 100%
  );
}

/* Fade from the right — for a right-aligned panel. */
.shc-carousel.shc-overlay--right .shc-overlay {
  background-image: linear-gradient(
    270deg,
    var(--shc-overlay-color) 0%,
    transparent 100%
  );
}

/* Fade from the bottom — anchors a low panel without dimming the sky. */
.shc-carousel.shc-overlay--bottom .shc-overlay {
  background-image: linear-gradient(
    0deg,
    var(--shc-overlay-color) 0%,
    transparent 100%
  );
}

/* Fade from the top — for a top-aligned panel. */
.shc-carousel.shc-overlay--top .shc-overlay {
  background-image: linear-gradient(
    180deg,
    var(--shc-overlay-color) 0%,
    transparent 100%
  );
}

/* Vignette — darkens the edges, leaves the centre of the photo honest. */
.shc-carousel.shc-overlay--vignette .shc-overlay {
  background-image: radial-gradient(
    ellipse at center,
    transparent 30%,
    var(--shc-overlay-color) 100%
  );
}

/* On a phone the panel is full-width, so a horizontal fade would dim one half
   of the text for no reason. Turn the side fades into a bottom fade, which is
   where the panel's weight actually sits at this width. */
@media (max-width: 767px) {
  .shc-carousel.shc-overlay--left .shc-overlay,
  .shc-carousel.shc-overlay--right .shc-overlay {
    background-image: linear-gradient(
      0deg,
      var(--shc-overlay-color) 0%,
      transparent 100%
    );
  }
}

/* The cross-fade variant stacks the slides instead of translating them. */
.shc-carousel.shc-transition-fade .shc-track {
  display: block;
  position: relative;
}
.shc-carousel.shc-transition-fade .shc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--shc-transition) cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear var(--shc-transition);
}
.shc-carousel.shc-transition-fade .shc-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  z-index: 2;
}

/* Plain slide: only the active slide is interactive/visible to AT. */
.shc-carousel.shc-transition-slide .shc-slide {
  transition: none;
}

/* ---------- Slot + panel --------------------------------------------- */

.shc-carousel .shc-slot {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  /* fallbacks; the Dimensions control overrides these */
  padding: 40px 92px;
  box-sizing: border-box;
}

.shc-carousel .shc-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--shc-gap);
  width: 453px;
  max-width: 92%;
  min-height: 460px;
  padding: 48px;
  border-radius: 14px;
  box-sizing: border-box;

  /* The tint is driven by a --rgb triple + an --alpha percentage rather
     than color-mix, because color-mix multiplies IN the source colour's
     alpha and pins the result when a control default is transparent.
     (see REFERENCE.md G29) */
  background-color: rgba(var(--shc-panel-rgb), calc(var(--shc-panel-alpha) / 100%));
  -webkit-backdrop-filter: blur(var(--shc-panel-blur));
  backdrop-filter: blur(var(--shc-panel-blur));
}

/* Graceful degradation: no backdrop-filter support -> make the panel
   solid enough to stay legible over a busy photo. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .shc-carousel .shc-panel {
    background-color: rgba(var(--shc-panel-rgb), calc((var(--shc-panel-alpha) / 100%) + 0.25));
  }
}

/* ---------- Panel contents ------------------------------------------- */

.shc-carousel .shc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  flex-shrink: 0;
}

.shc-carousel .shc-logo {
  height: 32px;
  width: auto;
  max-width: 60%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.shc-carousel .shc-eyebrow {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0;
}

.shc-carousel .shc-body {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--shc-text-gap);
}

.shc-carousel .shc-title {
  margin: 0;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: #ffffff;
  /* Honour the author's line breaks, like the reference does. */
  white-space: pre-line;
  text-wrap: balance;
}

.shc-carousel .shc-caption {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 400;
  color: #ffffff;
  max-width: 46ch;
}

/* ---------- CTA ------------------------------------------------------ */

.shc-carousel .shc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  width: auto;
  padding: 8px 24px;
  border-radius: 6px;
  border: 1px solid var(--shc-cta-bd-rest);
  background-color: var(--shc-cta-bg-rest);
  color: var(--shc-cta-fg-rest);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

/* Two classes so Elementor's (0,1,1) hover rules can't outrank this. */
.shc-carousel .shc-cta:hover,
.shc-carousel .shc-cta:focus-visible {
  background-color: var(--shc-cta-bg-hover);
  color: var(--shc-cta-fg-hover);
  border-color: var(--shc-cta-bd-hover);
}

.shc-carousel .shc-cta:focus-visible {
  outline: 3px solid #ef4444;
  outline-offset: 2px;
}

.shc-carousel .shc-cta__label {
  white-space: normal;
  overflow-wrap: anywhere;
}

.shc-carousel .shc-cta__arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.shc-carousel .shc-cta:hover .shc-cta__arrow {
  transform: translateX(4px);
}

.shc-carousel.shc-cta-full-mobile .shc-cta {
  /* overridden in the mobile media query below */
}

/* ---------- Arrows --------------------------------------------------- */

.shc-carousel .shc-arrow {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--shc-arrow);
  height: var(--shc-arrow);
  padding: 0;
  margin: 0;
  border-radius: var(--shc-arrow-radius);
  border: 1px solid var(--shc-ctrl-bd-rest);
  background-color: var(--shc-ctrl-bg-rest);
  color: var(--shc-ctrl-fg-rest);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.shc-carousel .shc-arrow:hover,
.shc-carousel .shc-arrow:focus-visible {
  background-color: var(--shc-ctrl-bg-hover);
  color: var(--shc-ctrl-fg-hover);
  border-color: var(--shc-ctrl-bd-hover);
}

.shc-carousel .shc-arrow:focus-visible {
  outline: 3px solid #ef4444;
  outline-offset: 2px;
}

.shc-carousel .shc-arrow svg {
  width: 20px;
  height: 20px;
  display: block;
}

.shc-carousel .shc-prev {
  left: var(--shc-arrow-inset);
  top: 50%;
  transform: translateY(-50%);
}

.shc-carousel .shc-next {
  right: var(--shc-arrow-inset);
  top: 50%;
  transform: translateY(-50%);
}

/* Pause / play sits inside the frame, bottom-right — as in the reference. */
.shc-carousel .shc-pause {
  right: var(--shc-arrow-inset);
  bottom: 22px;
  top: auto;
  width: calc(var(--shc-arrow) * 0.9);
  height: calc(var(--shc-arrow) * 0.9);
}

.shc-carousel .shc-pause .shc-ic-play {
  display: none;
}
.shc-carousel .shc-pause[data-state="paused"] .shc-ic-pause {
  display: none;
}
.shc-carousel .shc-pause[data-state="paused"] .shc-ic-play {
  display: block;
}

/* Arrows are hidden by default on phones; the toggle adds the class back. */
@media (max-width: 767px) {
  .shc-carousel:not(.shc-arrows-mobile) .shc-arrow.shc-prev,
  .shc-carousel:not(.shc-arrows-mobile) .shc-arrow.shc-next {
    display: none;
  }
}

/* ---------- Hover reveal (reference behaviour) ------------------------
   On the reference the prev/next arrows carry
   `lg:opacity-0 lg:group-hover:opacity-100 lg:focus-visible:opacity-100`
   — they are INVISIBLE until the carousel is hovered. Reproduce that from
   a switcher, and keep the arrows permanently visible whenever the widget
   opts out (`.shc-arrows-always`), when the pointer cannot hover, and for
   keyboard users, so the control is never unreachable.

   Note `.shc-carousel .shc-arrow` is (0,2,0), so this block must also be
   (0,2,0) and come later in the sheet — it does both. */
.shc-carousel.shc-arrows-hover .shc-arrow.shc-prev,
.shc-carousel.shc-arrows-hover .shc-arrow.shc-next {
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.shc-carousel.shc-arrows-hover:hover .shc-arrow.shc-prev,
.shc-carousel.shc-arrows-hover:hover .shc-arrow.shc-next,
.shc-carousel.shc-arrows-hover:focus-within .shc-arrow.shc-prev,
.shc-carousel.shc-arrows-hover:focus-within .shc-arrow.shc-next {
  opacity: 1;
}

/* Touch devices and any pointer without hover: reveal unconditionally, an
   `opacity: 0` button is unreachable by tap there. */
@media (hover: none), (pointer: coarse) {
  .shc-carousel.shc-arrows-hover .shc-arrow.shc-prev,
  .shc-carousel.shc-arrows-hover .shc-arrow.shc-next {
    opacity: 1;
  }
}

/* ---------- Footer: dots + counter ----------------------------------- */

.shc-carousel .shc-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: var(--shc-dots-margin);
}

.shc-carousel .shc-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--shc-dot-gap);
}

.shc-carousel .shc-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.shc-carousel .shc-dot__mark {
  display: block;
  width: var(--shc-dot);
  height: var(--shc-dot);
  border-radius: 999px;
  background-color: var(--shc-dot-off-rest);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.shc-carousel .shc-dot.is-active .shc-dot__mark {
  width: var(--shc-dot-active-w);
  background-color: var(--shc-dot-c-rest);
}

.shc-carousel .shc-dot:focus-visible {
  outline: 3px solid #ef4444;
  outline-offset: 2px;
  border-radius: 6px;
}

.shc-carousel .shc-counter {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--shc-dot-off-rest);
  font-variant-numeric: tabular-nums;
}

.shc-carousel .shc-counter__now {
  color: var(--shc-dot-c-rest);
}

.shc-carousel .shc-counter__sep {
  margin: 0 2px;
  opacity: 0.6;
}

/* Automatic / manual slide announcements */
.shc-carousel .shc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Dragging ------------------------------------------------ */

.shc-carousel.shc-swipeable .shc-viewport {
  touch-action: pan-y;
  cursor: grab;
}
.shc-carousel.shc-swipeable.shc-dragging .shc-viewport {
  cursor: grabbing;
}
.shc-carousel.shc-dragging .shc-track {
  transition: none !important;
}

/* ==========================================================
   Responsive
   Reference breakpoints (measured): <=1024 arrows shrink to 36px and the
   panel switches to the compact 24/28 headline; <=767 the panel is a
   350px column with 32px/24px padding and the CTA goes full width.
   ========================================================== */

@media (max-width: 1200px) {
  .shc-carousel .shc-slot {
    padding: 40px 76px;
  }
}

@media (max-width: 1024px) {
  .shc-carousel {
    --shc-arrow: 36px;
    --shc-dot-gap: 10px;
  }

  .shc-carousel .shc-slot {
    padding: 36px 64px;
  }

  .shc-carousel .shc-panel {
    width: 503px;
    max-width: 94%;
    min-height: 0;
    padding: 32px 24px;
    border-radius: 8px;
    gap: 40px;
  }

  .shc-carousel .shc-title {
    font-size: 28px;
    line-height: 1.17;
  }

  .shc-carousel .shc-caption {
    font-size: 17px;
  }
}

@media (max-width: 767px) {
  .shc-carousel {
    --shc-arrow: 40px;
    --shc-arrow-inset: 16px;
    --shc-dots-margin: 20px;
  }

  /* SAFETY NET — ASPECT MODE ONLY. The frame is `overflow: hidden`, so a
     too-short aspect ratio silently CLIPS the panel, and the headline is the
     first thing to go, which reads as "the widget lost my text" rather than
     as a sizing bug. Elementor's responsive default is now 150% on phones;
     this floor keeps a hand-set 71% from destroying the slide. The panel's
     own content drives the height, so the frame grows instead of cropping.
     Scoped to `.shc-h-aspect` so it cannot override an explicit height. */
  .shc-carousel.shc-h-aspect .shc-frame {
    min-height: 460px;
  }

  /* On a phone the panel is nearly the full width, so the reference's
     92px gutter collapses and the dots get room at the foot of the frame. */
  .shc-carousel .shc-slot {
    padding: 24px 20px 88px;
    align-items: flex-end;
    /* The slot fills the frame; with the 460px floor above the panel can now
       be taller than the slot, so let the slot scroll rather than crop. */
    min-height: 0;
  }

  .shc-carousel .shc-panel {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 32px 24px;
    border-radius: 8px;
    gap: 32px;
  }

  .shc-carousel .shc-head {
    min-height: 28px;
  }

  .shc-carousel .shc-logo {
    height: 28px;
  }

  .shc-carousel .shc-eyebrow {
    font-size: 14px;
  }

  .shc-carousel .shc-title {
    font-size: 24px;
    line-height: 1.17;
    letter-spacing: -0.3px;
  }

  .shc-carousel .shc-caption {
    font-size: 16px;
    line-height: 1.45;
  }

  .shc-carousel.shc-cta-full-mobile .shc-cta {
    align-self: stretch;
    width: 100%;
  }

  .shc-carousel .shc-pause {
    bottom: 16px;
  }
}

@media (max-width: 400px) {
  .shc-carousel .shc-title {
    font-size: 22px;
  }
  .shc-carousel .shc-caption {
    font-size: 15px;
  }
}

/* ---------- Reduced motion ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .shc-carousel .shc-track,
  .shc-carousel.shc-transition-fade .shc-slide {
    transition: none !important;
  }
  .shc-carousel .shc-cta__arrow,
  .shc-carousel .shc-dot__mark {
    transition: none !important;
  }
}