/* Approved UI Lab slider, 19 October 2026. Keep geometry aligned with #sliders. */
.sl-carousel { font: var(--bbr-text-md)/var(--bbr-leading) var(--bbr-font); }
:where(.sl-carousel) h1, :where(.sl-carousel) h2, :where(.sl-carousel) h3, :where(.sl-carousel) h4, :where(.sl-carousel) p { margin: 0 0 var(--bbr-space-4); }
:where(.sl-carousel) h1, :where(.sl-carousel) h2, :where(.sl-carousel) h3, :where(.sl-carousel) h4 { line-height: var(--bbr-leading-heading); letter-spacing: normal; }
.sl-carousel a { text-decoration: none; }
.sl-carousel button { font: inherit; cursor: pointer; }
.sl-carousel :focus-visible { outline: 3px solid var(--bbr-focus); outline-offset: 4px; }
.sl-carousel .sl-support p:last-child { margin: 0; }
.sl-carousel {
  /* Stable campaign contrast even in the historical light comparison. */
  --sl-bg: var(--bbr-block-background, var(--bbr-bg)); --sl-surface: var(--bbr-surface); --sl-text: var(--bbr-text);
  --sl-muted: var(--bbr-muted); --sl-ink: var(--bbr-on-light);
  position: relative; background: var(--sl-bg); color: var(--sl-text);
}

.sl-viewport { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sl-viewport::-webkit-scrollbar { display: none; }
.sl-viewport:focus-visible { outline-offset: -4px; }
.sl-track { display: flex; align-items: stretch; }
.sl-slide { position: relative; isolation: isolate; flex: 0 0 100%; width: 100%; min-width: 0; min-height: var(--sl-height-desktop, 613px); display: flex; align-items: center; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.sl-slide[data-sl-mode="mobile"] { display: none; }
.sl-background, .sl-background img, .sl-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl-background { z-index: -3; }
.sl-background img { display: block; object-fit: cover; }
.sl-shade { z-index: -2; background: var(--sl-bg); opacity: var(--sl-overlay, .54); }


.sl-copy { position: relative; min-width: 0; }
.sl-copy-left { width: min(var(--sl-content-width, min(36.6875rem, 46vw)), calc(100% - clamp(2rem, 5%, 5.5rem) - 1.5rem)); margin-left: clamp(2rem, 5%, 5.5rem); padding-block: var(--bbr-space-12) var(--bbr-space-24); }
.sl-copy-left > .sl-eyebrow, .sl-copy-left > .sl-heading, .sl-copy-left > .sl-support, .sl-copy-left > .sl-cta { max-width: min(100%, var(--sl-content-width, min(36.6875rem, 46vw))); }
@media (min-width: 768px) {
  .sl-editorial-title .sl-copy-left { width: calc(100% - clamp(2rem, 5%, 5.5rem) - 1.5rem); }
  .sl-copy-left > .sl-extra-title { max-width: 60vw; }
}
.sl-eyebrow { margin: 0 0 var(--bbr-space-3); font-size: var(--bbr-text-md); font-weight: 600; line-height: 1.2; text-transform: uppercase; }
.sl-heading { margin: 0 0 var(--bbr-space-5); font-size: clamp(1.875rem, 2.1vw, 2.25rem); font-weight: 700; line-height: 1.22; text-transform: uppercase; }
.sl-support { margin-bottom: var(--bbr-space-8); font-size: clamp(1.0625rem, 1.16vw, 1.25rem); line-height: 1.4; }
.sl-support p:last-child { margin: 0; }
.sl-cta { display: inline-flex; min-height: var(--bbr-control-height); align-items: center; justify-content: center; gap: var(--bbr-space-3); padding: var(--bbr-space-3) var(--bbr-space-10); background: var(--bbr-light-surface); color: var(--sl-ink); border: 2px solid var(--bbr-light-surface); border-radius: var(--bbr-radius-sm); font-size: var(--bbr-text-sm); font-weight: 700; text-transform: uppercase; transition: background var(--bbr-duration); }
.sl-cta:hover { background: var(--bbr-brand); border-color: var(--bbr-brand); color: var(--sl-ink); }
/* The native theme link color must not override the light CTA's dark ink. */
.sl-carousel a.sl-cta { color: var(--sl-ink); }
.sl-arrow { display: inline-flex; width: 1.375rem; height: 1.125rem; flex: 0 0 1.375rem; }
.sl-extra-title { margin: 0; font-size: clamp(1.875rem, 3.8vw, 3.5rem); line-height: 1.12; text-transform: uppercase; }
.sl-extra-title span { color: var(--bbr-brand); }
.sl-title-divider { display: block; width: 6rem; height: .1875rem; background: var(--bbr-brand); margin: var(--bbr-space-5) 0 var(--bbr-space-6); }
.sl-brand-layout { display: grid; width: 100%; min-height: var(--sl-height-desktop, 613px); grid-template-columns: minmax(0, 1fr) minmax(21.25rem, .92fr) minmax(0, 1fr); align-items: center; gap: clamp(1rem, 2vw, 2.25rem); padding: var(--bbr-space-10) var(--bbr-space-6) var(--bbr-space-16); }
.sl-copy-center { text-align: center; display: flex; align-items: center; flex-direction: column; max-width: 36.6875rem; justify-self: center; }
.sl-copy-center .sl-heading { color: var(--bbr-brand); }
.sl-brand-logo { width: 9rem; height: 3.25rem; object-fit: contain; margin-bottom: var(--bbr-space-4); }
.sl-divider { display: block; width: min(29.125rem, 100%); height: .125rem; background: var(--sl-text); margin-bottom: var(--bbr-space-6); }
.sl-visual { align-self: end; min-width: 0; }
.sl-visual img { display: block; width: 100%; height: 24.5rem; object-fit: contain; }

.sl-board { display: grid; width: 100%; min-height: var(--sl-height-desktop, 613px); grid-template-columns: minmax(0, 31fr) minmax(0, 69fr); grid-template-rows: 3.75rem minmax(12rem, 1fr) minmax(12rem, 1fr); gap: .75rem clamp(1rem, 1.85vw, 2rem); padding: var(--bbr-space-6) clamp(1.5rem, 3.7vw, 4rem) var(--bbr-space-16); }
.sl-board-title { display: flex; justify-content: center; align-items: center; margin: 0; border: 1px solid var(--bbr-brand); background: var(--sl-bg); color: var(--bbr-brand); font-size: clamp(1.5rem, 2.08vw, 2.25rem); text-transform: uppercase; }
.sl-promo-card { display: flex; flex-direction: column; min-width: 0; border: 2px solid var(--bbr-brand); background: var(--sl-surface); }
.sl-promo-card-1 { grid-column: 1; grid-row: 2; }
.sl-promo-card-2 { grid-column: 1; grid-row: 3; }
.sl-promo-card-3 { grid-column: 2; grid-row: 1 / span 2; }
.sl-promo-card-4 { grid-column: 2; grid-row: 3; }
.sl-promo-name { margin: 0; padding: .5rem .875rem; background: var(--bbr-brand); color: var(--sl-ink); font-size: clamp(.875rem, 1.15vw, 1.25rem); font-weight: 700; line-height: 1.2; text-align: center; text-transform: uppercase; overflow-wrap: anywhere; }
.sl-promo-body { flex: 1; display: grid; min-width: 0; min-height: 0; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--bbr-space-3); padding: var(--bbr-space-3); }
.sl-promo-card-3 .sl-promo-body, .sl-promo-card-4 .sl-promo-body { padding: var(--bbr-space-4) clamp(1rem, 3vw, 3.5rem); }
.sl-promo-details { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sl-fit { margin: 0 0 var(--bbr-space-2); font-size: clamp(.75rem, .92vw, 1rem); line-height: 1.3; }
.sl-fit > span { display: block; font-weight: 600; }
.sl-commercial { display: flex; align-items: center; flex-wrap: wrap; gap: var(--bbr-space-2); margin-bottom: var(--bbr-space-1); }
.sl-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem; font-variant-numeric: tabular-nums; }
.sl-price strong { color: var(--bbr-brand); font-size: clamp(1.125rem, 1.55vw, 1.6875rem); white-space: nowrap; }
.sl-price del { color: var(--sl-muted); font-size: var(--bbr-text-xs); white-space: nowrap; }
.sl-discount { padding: .1875rem .375rem; border: 1px solid var(--bbr-brand); color: var(--bbr-brand); font-size: var(--bbr-text-xs); font-weight: 700; white-space: nowrap; }
.sl-product-link { display: inline-flex; align-items: center; gap: var(--bbr-space-2); margin-top: auto; min-height: var(--bbr-target-min); padding-block: var(--bbr-space-2); color: var(--bbr-brand); font-size: var(--bbr-text-xs); font-weight: 700; text-transform: uppercase; text-decoration: underline; }
.sl-product-link:hover { color: var(--sl-text); }
.sl-product-link .sl-arrow { width: 1.125rem; flex-basis: 1.125rem; }
.sl-promo-media { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; margin: 0; background: var(--bbr-light-surface); border-radius: var(--bbr-radius-sm); }
.sl-promo-media img { display: block; width: 100%; height: 100%; max-height: 14rem; object-fit: contain; }
.sl-promo-card-3 .sl-promo-media img { max-height: 19rem; }
.sl-board .sl-promo-media img { position: absolute; inset: 0; max-height: 100%; }
.sl-controls { position: absolute; bottom: .75rem; inset-inline-start: clamp(2rem, 5%, 5.5rem); inset-inline-end: var(--bbr-gutter); display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--bbr-space-2); }
.sl-actions { grid-column: 2; justify-self: end; display: flex; padding-inline: .25rem; border-radius: 999px; background: color-mix(in srgb, var(--sl-bg) 65%, transparent); }
.sl-controls[hidden] { display: none; }
.sl-control, .sl-dot, .sl-play { width: var(--bbr-target-min); min-width: var(--bbr-target-min); min-height: var(--bbr-target-min); display: inline-flex; align-items: center; justify-content: center; padding: .25rem; border: 0; border-radius: 50%; background: transparent; color: var(--sl-text); }
.sl-control:hover, .sl-play:hover { color: var(--bbr-brand); }
.sl-control > .bbr-arrow { width:16px; height:16px; fill:currentColor; stroke:none; }
.sl-dots { grid-column: 1; justify-self: start; display: flex; border-radius: 999px; background: color-mix(in srgb, var(--sl-bg) 65%, transparent); }
.sl-dot span { width: .375rem; height: .375rem; border-radius: 999px; background: var(--sl-muted); transition: width var(--bbr-duration), background var(--bbr-duration); }
.sl-dot[aria-current="true"] span { width: 1.125rem; background: var(--bbr-brand); }
.sl-dot:hover span { background: var(--bbr-brand); }
.sl-play-symbol { width: 0; height: 0; margin-left: .125rem; border-top: .3125rem solid transparent; border-bottom: .3125rem solid transparent; border-left: .5rem solid currentColor; }
.sl-play[aria-pressed="true"] .sl-play-symbol { width: .5rem; height: .625rem; margin-left: 0; border: 0; border-inline: .1875rem solid currentColor; }
.sl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 767px) {
  .sl-slide { min-height: var(--sl-height-mobile, 640px); }
  .sl-slide[data-sl-mode="desktop"] { display: none; }
  .sl-slide[data-sl-mode="mobile"] { display: flex; }
  .sl-copy-left { width: min(100%, 32.5rem); margin: 0; align-self: flex-end; padding: var(--bbr-space-12) var(--bbr-space-6) var(--bbr-space-24); }
  .sl-copy-left > .sl-eyebrow, .sl-copy-left > .sl-heading, .sl-copy-left > .sl-support, .sl-copy-left > .sl-cta { max-width: min(100%, var(--sl-content-width, 100%)); }
  .sl-eyebrow { font-size: var(--bbr-text-sm); }
  .sl-heading { font-size: clamp(1.75rem, 8vw, 2.125rem); line-height: 1.16; }
  .sl-support { font-size: var(--bbr-text-md); margin-bottom: var(--bbr-space-6); }
  .sl-cta { padding-inline: var(--bbr-space-6); font-size: var(--bbr-text-xs); }
  .sl-extra-title { font-size: clamp(1.875rem, 8vw, 2.5rem); }
  .sl-brand-layout { min-height: var(--sl-height-mobile, 640px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(9.375rem, 1fr); gap: .5rem .75rem; padding: var(--bbr-space-8) var(--bbr-space-4) var(--bbr-space-16); }
  .sl-copy-center { grid-column: 1 / -1; grid-row: 1; max-width: 23.75rem; }
  .sl-copy-center .sl-heading { font-size: clamp(1.5625rem, 7vw, 1.9375rem); }
  .sl-copy-center .sl-support { margin-bottom: var(--bbr-space-5); }
  .sl-visual { grid-row: 2; }
  .sl-visual img { height: 11.875rem; }
  .sl-brand-logo { height: 2.75rem; margin-bottom: var(--bbr-space-2); }
  .sl-divider { width: min(17.5rem, 88%); margin-bottom: var(--bbr-space-4); }
  .sl-single-product { display: grid; width: 100%; min-height: var(--sl-height-mobile, 640px); grid-template-rows: 3rem minmax(0, 1fr); gap: .625rem; padding: var(--bbr-space-4) .875rem 4.5rem; }
  .sl-promo-card-mobile { grid-column: 1; grid-row: 2; }
  .sl-promo-card-mobile .sl-promo-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(10rem, 1fr) auto; gap: var(--bbr-space-3); padding: .875rem 1.125rem 1.125rem; }
  .sl-promo-card-mobile .sl-promo-details { grid-row: 2; }
  .sl-promo-card-mobile .sl-promo-media { grid-row: 1; }
  .sl-promo-card-mobile .sl-promo-media img { height: 13rem; max-height: 13rem; }
  .sl-promo-card-mobile .sl-promo-name { font-size: clamp(.875rem, 4vw, 1.0625rem); }
  .sl-fit { font-size: .8125rem; }
  .sl-price strong { font-size: 1.4375rem; }
  .sl-controls { inset-inline-start: var(--bbr-space-6); }
  .sl-dots { grid-column: 1; justify-self: start; }
  .sl-actions { grid-column: 2; }
}
@media (max-width: 389px) { .sl-copy-left { padding-inline: var(--bbr-space-5); } .sl-controls { inset-inline-start: var(--bbr-space-5); } }
@media (prefers-reduced-motion: reduce) { .sl-cta, .sl-dot span { transition: none; } }

.sl-arrow .bbr-arrow { width:100%; height:100%; fill:currentColor; stroke:none; }

.sl-carousel .sl-price ins { background: none; text-decoration: none; }
.sl-carousel .sl-price .amount { color: var(--bbr-brand); font-size: clamp(1.125rem, 1.55vw, 1.6875rem); font-weight: 700; white-space: nowrap; }
.sl-carousel .sl-price del .amount { color: var(--sl-muted); font-size: var(--bbr-text-xs); font-weight: 400; }
.sl-carousel .sl-support { overflow-wrap: anywhere; }
.sl-carousel .sl-extra-title { margin: 0; }
.sl-carousel .sl-extra-title span { color: inherit; }
.sl-carousel .sl-promo-name, .sl-carousel .sl-board-title, .sl-carousel .sl-price { margin: 0; }
.sl-carousel [data-sl-mode="mobile"], .sl-carousel [data-sl-dot-mode="mobile"] { display: none; }
.sl-carousel[data-sl-hide-dots="true"] .sl-dots, .sl-carousel[data-sl-hide-controls="true"] .sl-actions { display: none; }
.sl-carousel .sl-controls[hidden] { display: none; }
.sl-carousel .sl-control:hover, .sl-carousel .sl-play:hover, .sl-carousel .sl-dot:hover { background: transparent; }
.sl-carousel .sl-control:disabled, .sl-carousel .sl-play:disabled { opacity: .4; cursor: default; }
.sl-carousel.bbr-block-background--white .sl-dots, .sl-carousel.bbr-block-background--white .sl-actions { background: color-mix(in srgb, var(--sl-bg) 90%, transparent); }
.sl-carousel.bbr-block-background--white .sl-dot[aria-current="true"] span { background: var(--bbr-on-light); }
.sl-carousel.bbr-block-background--white .sl-copy-center .sl-heading, .sl-carousel.bbr-block-background--white .sl-product-link, .sl-carousel.bbr-block-background--white .sl-discount, .sl-carousel.bbr-block-background--white .sl-price .amount { color: var(--bbr-on-light); }
.sl-carousel.bbr-block-background--white .sl-promo-card { background: var(--bbr-light-surface); }
.sl-carousel.bbr-block-background--white .sl-board-title { color: var(--bbr-on-light); }
@media(max-width:767px) {
 .sl-carousel [data-sl-mode="desktop"], .sl-carousel [data-sl-dot-mode="desktop"] { display: none; }
 .sl-carousel [data-sl-mode="mobile"] { display: flex; }
 .sl-carousel [data-sl-dot-mode="mobile"] { display: inline-flex; }
 .sl-carousel .sl-editorial:not(.sl-editorial-title) .sl-copy-left.sl-custom-width { width: min(100%, calc(var(--sl-content-width) + 3rem)); }
 .sl-carousel .sl-price .amount { font-size: 1.4375rem; }
}
@media(max-width:389px) { .sl-carousel .sl-editorial:not(.sl-editorial-title) .sl-copy-left.sl-custom-width { width: min(100%, calc(var(--sl-content-width) + 2.5rem)); } }
/* SSR previews are static and remain selectable in the editor. */
.bbr-slider-preview { pointer-events: none; }
.bbr-slide-editor { padding: 16px; border: 1px solid var(--bbr-border); margin-block: 12px; }
.bbr-slide-editor .block-editor-rich-text__editable { min-height: 48px; padding: 12px; border: 1px solid var(--bbr-border); }

/* Long slide collections retain full touch targets in a scrollable dots group. */
.sl-carousel .sl-dots { min-width: 0; max-width: 50vw; overflow-x: auto; scrollbar-width: none; }
.sl-carousel .sl-dots::-webkit-scrollbar { display: none; }
.sl-carousel .sl-dot { flex: 0 0 var(--bbr-target-min); }
@media(max-width:767px) { .sl-carousel .sl-controls { grid-template-columns: minmax(0,1fr) auto; } .sl-carousel .sl-dots { max-width: 100%; } }