.sv-slides [hidden] { display: none !important; }
.sv-slides .sv-hero-intro p { margin: 0; }
.sv-slides .sv-slide-title { color: var(--sv-ink); font-size: clamp(36px,4.2vw,58px); font-weight: 800; line-height: 1.08; letter-spacing: -.04em; margin: 0 0 22px; }
.sv-slide-controls { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; margin: .55rem .2rem; color: var(--sv-muted); }
.sv-slide-controls button { min-width: 44px; min-height: 44px; padding: .35rem .7rem; border: 1px solid var(--sv-line); border-radius: .7rem; background: var(--sv-surface); color: var(--sv-accent); font-weight: 650; cursor: pointer; }
.sv-slide-controls button:is(:hover,:focus-visible) { background: var(--sv-soft); }
.sv-slide-controls button:disabled { color: var(--sv-muted); cursor: default; }

.sv-slides .sv-brand { display: inline-flex; align-items: center; padding: 6px 12px;
  background: #fff; border-radius: 9px; border: 1px solid #d8e2f1; margin-bottom: .65rem; }
.sv-slides .sv-brand img { display: block; width: auto; height: 28px; max-width: 115px; object-fit: contain; }
.sv-slides .sv-brand-tod { padding: 0; overflow: hidden; }
.sv-slides .sv-brand-tod img { height: 42px; }
.sv-slides .sv-hero-intro .sv-source { font-size: .85rem; margin-top: .5rem; }
.sv-slides .sv-source a { color: var(--sv-accent); text-decoration: underline; text-underline-offset: .18em; }
.sv-slides .sv-brand-mango { background: #101c36; border-color: #354866; padding: 9px 13px; } .sv-slides .sv-brand-mango img { width: clamp(132px, 14vw, 175px); max-width: 100%; height: auto; }
/* Let the scene fade into the storefront palette across the whole banner. */
.sv-slides .sv-offer {
  background: linear-gradient(105deg, var(--sv-surface), var(--sv-hero) 68%, var(--sv-soft));
  grid-template-columns: 48% 1fr;
}
.sv-slides .sv-offer .sv-hero-copy {
  padding: clamp(2rem, 4vw, 4rem);
  padding-inline-end: clamp(1rem, 2.5vw, 2.5rem);
}
.sv-slides .sv-offer .sv-eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.sv-slides .sv-offer .sv-eyebrow::before {
  content: "";
  width: 1.8rem;
  height: 2px;
  background: currentColor;
}
.sv-slides .sv-offer .sv-hero-visual {
  position: absolute;
  inset: 0 0 0 36%;
  margin: 0;
  width: auto;
  height: auto;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.05) 9%, rgba(0,0,0,.48) 25%, rgba(0,0,0,.95) 43%, black 55%);
}
.sv-slides .sv-offer .sv-hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: 52% 50%;
}
@media (max-width: 767px) {
  .sv-slides .sv-offer .sv-hero-copy {
    width: 100%;
    padding: 1.65rem 1.4rem 0;
  }
  .sv-slides .sv-offer .sv-hero-visual {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 3/2;
    margin-top: -.15rem;
    mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.18) 9%, rgba(0,0,0,.83) 28%, black 41%);
  }
}