/** Shopify CDN: Minification failed

Line 804:11 Expected ":"

**/
/* Hero Slider (slideshow-new) — scroll-snap track, no JS required for basic swipe/scroll */

slideshow-new {
  display: block;
  position: relative;
  padding-block: var(--slideshow-new-padding-block, 0);
}

.slideshow-new--full {
  width: 100%;
}

.slideshow-new--centered {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  border-radius: var(--slideshow-new-radius, 0);
  overflow: hidden;
}

/* Layout: carousel (active slide centered, neighbors peeking on both sides).
   No padding on the track: the first/last slide naturally sits flush against
   that edge (scroll can't go further), which is correct — there's no neighbor
   there to peek at. Every other slide has slack on both sides and scroll-snaps
   to true center, showing a neighbor peeking left and right. */
.slideshow-new--carousel {
  width: 100%;
}

.slideshow-new--carousel .slideshow-new__track {
  gap: 16px;
}

.slideshow-new--carousel .slideshow-new__slide {
  flex: 0 0 86%;
  width: 86%;
  scroll-snap-align: center;
  border-radius: var(--slideshow-new-radius, 0);
  /* box-shadow: 0 20px 60px rgba(9, 34, 47, 0.14); */
}

@media screen and (min-width: 750px) {
  .slideshow-new--carousel .slideshow-new__track {
    gap: 24px;
  }

  .slideshow-new--carousel .slideshow-new__slide {
    flex: 0 0 min(var(--page-width), 78%);
    width: min(var(--page-width), 78%);
    cursor: pointer;
    opacity: 0.5;
    /* transform: scale(0.94); */
    transition: opacity 0.5s, transform 0.5s;
  }

  .slideshow-new--carousel .slideshow-new__slide--active {
    cursor: default;
    opacity: 1;
    transform: scale(1);
    z-index: 1;
  }

  .slideshow-new--active-scale .slideshow-new__slide--active {
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slideshow-new--carousel .slideshow-new__slide { transition: none; }
}

.slideshow-new__viewport {
  position: relative;
  height: var(--slideshow-new-height, 75vh);
  min-height: 22rem;
}

/* Mobile height override, set independently from the desktop "Hauteur" setting. */
@media screen and (max-width: 749px) {
  .slideshow-new__viewport {
    height: var(--slideshow-new-height-mobile, var(--slideshow-new-height, 75vh));
  }
}

.slideshow-new__track {
  display: flex;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.slideshow-new__track::-webkit-scrollbar {
  display: none;
}

.slideshow-new__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.slideshow-new__media {
  position: absolute;
  inset: 0;
  background: var(--color-background, #e9eff2);
}

.slideshow-new__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slideshow-new__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.slideshow-new__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: clamp(20px, 7vw, 64px);
}

.slideshow-new__content--left { justify-content: flex-start; }
.slideshow-new__content--center { justify-content: center; }
.slideshow-new__content--right { justify-content: flex-end; }

/* Vertical position of the content block: separate settings for mobile and desktop
   (content_vertical_position_mobile / content_vertical_position), each scoped to its
   own breakpoint so one doesn't leak into the other. */
@media screen and (max-width: 749px) {
  .slideshow-new__content--valign-mobile-top { align-items: flex-start; }
  .slideshow-new__content--valign-mobile-center { align-items: center; }
  .slideshow-new__content--valign-mobile-bottom { align-items: flex-end; }
}

@media screen and (min-width: 750px) {
  .slideshow-new__content--valign-top { align-items: flex-start; }
  .slideshow-new__content--valign-center { align-items: center; }
  .slideshow-new__content--valign-bottom { align-items: flex-end; }
}

/* Full-bleed slideshow, content kept aligned with the theme's page-width column.
   max-width + auto inline margins re-center the (inset: 0) box within page-width
   once the slide is wider than it — a no-op on smaller screens, same as .page-width. */
.slideshow-new__content--boxed {
  max-width: var(--page-width);
  margin-inline: auto;
}

.slideshow-new__content-inner {
  max-width: min(560px, 90%);
  border-radius: var(--slideshow-new-content-radius, 0);
  background: color-mix(
    in srgb,
    var(--slideshow-new-content-bg, transparent) calc(var(--slideshow-new-content-bg-opacity, 0) * 100%),
    transparent
  );
}

.slideshow-new__content-inner--padding-small { padding: 2rem 1.5rem; }
.slideshow-new__content-inner--padding-medium { padding: 3rem 2.5rem; }
.slideshow-new__content-inner--padding-large { padding: 4rem 3.5rem; }

.slideshow-new__content--center .slideshow-new__content-inner { text-align: center; }
.slideshow-new__content--left .slideshow-new__content-inner { text-align: left; }
.slideshow-new__content--right .slideshow-new__content-inner { text-align: right; }

.slideshow-new__eyebrow {
  font-family: var(--font-body-family);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--slideshow-new-heading-color, #fff);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  margin: 0 0 18px;
}

.slideshow-new__heading {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight, 800);
  font-size: clamp(30px, 8.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--slideshow-new-heading-color, #fff);
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
  margin: 0;
}

.slideshow-new__heading--h2 { font-size: clamp(22px, 6vw, 32px); }
.slideshow-new__heading--h0 { font-size: clamp(36px, 10vw, 56px); }

.slideshow-new__text {
  font-family: var(--font-body-family);
  font-weight: 600;
  font-size: clamp(14px, 3.4vw, 16px);
  line-height: 1.5;
  color: var(--slideshow-new-text-color, rgba(255, 255, 255, 0.92));
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
  margin: 18px 0 0;
  max-width: 44ch;
}

.slideshow-new__text p { margin: 0; }
.slideshow-new__text p + p { margin-top: 0.6em; }
.slideshow-new__text a { color: inherit; text-decoration: underline; }

.slideshow-new__content-inner--no-text-shadow .slideshow-new__eyebrow,
.slideshow-new__content-inner--no-text-shadow .slideshow-new__heading,
.slideshow-new__content-inner--no-text-shadow .slideshow-new__text {
  text-shadow: none;
}

.slideshow-new__content--center .slideshow-new__text { margin-inline: auto; }

.slideshow-new__buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(22px, 4vw, 32px);
}

.slideshow-new__content--center .slideshow-new__buttons { justify-content: center; }
.slideshow-new__content--right .slideshow-new__buttons { justify-content: flex-end; }

/* Wraps each button so its own color scheme applies independently, without
   becoming a flex item itself (.button--secondary relies on a `.color-*`
   ancestor, see base.css). */
.slideshow-new__button-scheme {
  display: contents;
}

/* Button style: custom outline — border and text in a merchant-picked color, replacing
   the theme's .button--primary/--secondary color scheme entirely. `!important` guards
   against base.css's own button color rules, which this is deliberately overriding. */
.slideshow-new__button--custom {
  background: transparent !important;
  border: 1.5px solid var(--slideshow-new-button-custom-color, currentColor) !important;
  color: var(--slideshow-new-button-custom-color, currentColor) !important;
  transition: background 0.2s, color 0.2s;
}

.slideshow-new__button--custom:hover {
  background: var(--slideshow-new-button-custom-color, currentColor) !important;
  color: rgb(var(--color-base-background-1, 255, 255, 255)) !important;
}

/* Button style: liquid glass — frosted pill matching the arrow/pagination glass styles,
   with only the text/border color left up to the merchant (buttons_glass_color). */
.slideshow-new__button--glass {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 5px 5px #0000001a;
  color: rgb(var(--slideshow-new-button-glass-color, 255, 255, 255)) !important;
  transition: background 0.2s, transform 0.2s;
}

.slideshow-new__button--glass:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-2px);
}

.slideshow-new__button--glass:after {
  box-shadow: initial !important;
}

/* Button style: liquid glass, tinted — same frosted look, background tinted with the
   theme's accent-1 color (navy in this theme) instead of plain white, for guaranteed
   contrast over pale/busy photos. Text is always white — this style forces its own
   contrast rather than exposing a color choice. */
.slideshow-new__button--glass-navy {
  background: rgba(var(--color-base-accent-1, 0, 59, 97), 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 5px 18px rgba(9, 34, 47, 0.24);
  color: #fff !important;
  transition: background 0.2s, transform 0.2s;
}

.slideshow-new__button--glass-navy:hover {
  background: rgba(var(--color-base-accent-1, 0, 59, 97), 0.4) !important;
  transform: translateY(-2px);
}

.slideshow-new__button--glass-navy:after {
  box-shadow: initial !important;
}

/* Optional arrow pastille appended to a glass/glass-navy button (button_show_arrow_1/2) —
   a small filled circle with a right-pointing caret, signalling the action more strongly. */
.slideshow-new__button-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #003b61;
  margin-left: 12px;
  vertical-align: middle;
}

.slideshow-new__button-arrow .icon {
  width: 13px;
  height: 13px;
  transform: rotate(-90deg);
}

/* Slide layout "card" (mobile only): image shrinks to a rounded box at the top of the
   slide instead of filling it, and the text content sits below it in normal flow instead
   of overlaid on top. Desktop always keeps the full-bleed overlay design regardless of
   this setting — only `.slideshow-new__slide--mobile-card` is affected, and only under
   750px. */
@media screen and (max-width: 749px) {
  .slideshow-new__slide--mobile-card {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 8px;
    background: var(--slideshow-new-card-bg, rgb(var(--color-base-background-2, 233, 239, 242)));
  }

  .slideshow-new__slide--mobile-card .slideshow-new__media {
    position: relative;
    inset: auto;
    flex: 0 0 42%;
    min-height: 160px;
    overflow: hidden;
    border-radius: var(--slideshow-new-card-radius, 18px);
  }

  .slideshow-new__slide--mobile-card .slideshow-new__media img {
    border-radius: var(--slideshow-new-card-radius, 18px);
  }

  .slideshow-new__slide--mobile-card .slideshow-new__overlay {
    display: none;
  }

  .slideshow-new__slide--mobile-card .slideshow-new__content {
    position: relative;
    inset: auto;
    flex: 1;
    min-height: 0;
    justify-content: center;
    padding: 8px 18px 18px;
  }

  .slideshow-new__slide--mobile-card .slideshow-new__content-inner {
    max-width: 100%;
    text-align: center;
  }

  .slideshow-new__slide--mobile-card .slideshow-new__eyebrow,
  .slideshow-new__slide--mobile-card .slideshow-new__heading {
    color: var(--slideshow-new-heading-color-mobile-card, rgb(18, 25, 32));
    text-shadow: none;
  }

  .slideshow-new__slide--mobile-card .slideshow-new__text {
    color: var(--slideshow-new-text-color-mobile-card, rgba(18, 25, 32, 0.75));
    text-shadow: none;
  }

  .slideshow-new__slide--mobile-card .slideshow-new__text,
  .slideshow-new__slide--mobile-card .slideshow-new__buttons {
    margin-inline: auto;
    justify-content: center;
  }
}

@media screen and (min-width: 750px) {
  .slideshow-new__heading { font-size: clamp(34px, 5.6vw, 74px); }
  .slideshow-new__heading--h2 { font-size: clamp(26px, 3.4vw, 40px); }
  .slideshow-new__heading--h0 { font-size: clamp(40px, 6.4vw, 88px); }
  .slideshow-new__text { font-size: clamp(15px, 1.5vw, 19px); }
  .slideshow-new__content-inner { max-width: min(720px, 92%); }
}

/* Controls: arrows, pagination, pause */

.slideshow-new__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}

.slideshow-new__controls > * {
  pointer-events: auto;
}

/* Controls position: below (in normal flow under the slides, instead of overlaid on them).
   Higher specificity than the later desktop media query, so `bottom` stays auto at every width. */
.slideshow-new--controls-below .slideshow-new__controls {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  padding: 18px clamp(20px, 4vw, 40px);
}

/* Controls position is forced to "below" on mobile regardless of the `controls_position`
   setting — on small screens the control bar always sits under the slides in normal flow,
   never overlaid on top of them. Same specificity as `.slideshow-new__controls` above, so
   source order (this comes after) makes it win at matching widths; the desktop media query
   further down still applies the user's chosen `controls_position` above 750px. */
@media screen and (max-width: 749px) {
  .slideshow-new__controls {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    padding: 18px clamp(20px, 4vw, 40px);
  }
}

/* Controls orientation (mobile only): row — pagination centered, one arrow on each side.
   Scoped to max-width so it never fights the desktop layout below, which always uses its
   own row arrangement regardless of this setting. Pagination is pulled out of flow and
   centered the same way the desktop layout does, and `.slideshow-new__row` is flattened
   with `display: contents` so prev/pause/next become direct flex children that can be
   ordered to either side of it. */
@media screen and (max-width: 749px) {
  .slideshow-new--controls-mobile-row .slideshow-new__controls {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .slideshow-new--controls-mobile-row .slideshow-new__pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .slideshow-new--controls-mobile-row .slideshow-new__row {
    display: contents;
  }

  .slideshow-new--controls-mobile-row .slideshow-new__arrow--prev,
  .slideshow-new--controls-mobile-row .slideshow-new__arrow-pill {
    order: 1;
  }

  .slideshow-new--controls-mobile-row .slideshow-new__pause {
    order: 2;
  }

  .slideshow-new--controls-mobile-row .slideshow-new__arrow--next {
    order: 3;
  }
}

.slideshow-new__pagination {
  display: flex;
  gap: 8px;
  align-items: center;
}

.slideshow-new__dot {
  width: 28px;
  height: 5px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(var(--slideshow-new-pagination-color, 255, 255, 255), 0.4);
  overflow: hidden;
  cursor: pointer;
}

.slideshow-new__dot-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: rgb(var(--slideshow-new-pagination-color, 255, 255, 255));
  border-radius: 999px;
}

.slideshow-new--no-js .slideshow-new__dot-fill,
.slideshow-new__dot[aria-selected="true"] .slideshow-new__dot-fill {
  width: 100%;
}

.slideshow-new__dot-fill[data-animated] {
  transition: width 0.12s linear;
}

.slideshow-new__arrow,
.slideshow-new__pause {
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, filter 0.2s, color 0.2s, border-color 0.2s;
}

/* Arrow size, set via the `arrow_size` setting (small/medium/large). Independent from the
   pause button, which keeps its own fixed size regardless of this setting. Applies at every
   breakpoint — see the `--arrow-` modifier classes below and their desktop-query exemption. */
.slideshow-new__arrow {
  width: var(--slideshow-new-arrow-size, 48px);
  height: var(--slideshow-new-arrow-size, 48px);
}

.slideshow-new__pause {
  width: 48px;
  height: 48px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
}

.slideshow-new__pause:hover {
  background: rgba(255, 255, 255, 0.28);
}

.slideshow-new__arrow .icon {
  width: var(--slideshow-new-arrow-icon-size, 18px);
  height: var(--slideshow-new-arrow-icon-size, 18px);
}

.slideshow-new__pause .icon {
  width: 18px;
  height: 18px;
}

.slideshow-new--arrow-small {
  --slideshow-new-arrow-size: 24px;
  --slideshow-new-arrow-icon-size: 12px;
}

.slideshow-new--arrow-medium {
  --slideshow-new-arrow-size: 36px;
  --slideshow-new-arrow-icon-size: 15px;
}

.slideshow-new--arrow-large {
  --slideshow-new-arrow-size: 48px;
  --slideshow-new-arrow-icon-size: 18px;
}

.slideshow-new__arrow--prev .icon { transform: rotate(90deg); }
.slideshow-new__arrow--next .icon { transform: rotate(-90deg); }

/* Arrow style: glass (frosted liquid glass, default) */

.slideshow-new__arrow--glass {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 5px 5px #0000001a;
  /* box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.65),
    inset 0 -6px 14px rgba(255, 255, 255, 0.14),
    0 10px 26px rgba(9, 34, 47, 0.28);
  color: rgb(var(--slideshow-new-arrow-color, 255, 255, 255)); */
}

.slideshow-new__arrow--glass:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

/* Arrow style: glass-pill (merged frosted capsule, single unit replacing both buttons) */

.slideshow-new__arrow-pill {
  display: flex;
  align-items: center;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  /* box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.65),
    inset 0 -6px 14px rgba(255, 255, 255, 0.14),
    0 10px 26px rgba(9, 34, 47, 0.28); */
    box-shadow: 0 5px 5px #0000001a;
}

.slideshow-new__arrow-pill-btn {
  width: 60px;
  height: 52px;
  border: none;
  background: transparent;
  color: rgb(var(--slideshow-new-arrow-color, 255, 255, 255));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.slideshow-new__arrow-pill-btn:hover { background: rgba(255, 255, 255, 0.2); }
.slideshow-new__arrow-pill-btn .icon { width: 18px; height: 18px; }
.slideshow-new__arrow-pill-btn--prev .icon { transform: rotate(90deg); }
.slideshow-new__arrow-pill-btn--next .icon { transform: rotate(-90deg); }

.slideshow-new__arrow-pill-divider {
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.45);
  flex: 0 0 auto;
}

/* Arrow style: solid (brand-colored — prev tinted, next filled) */

.slideshow-new__arrow--solid.slideshow-new__arrow--prev {
  border: none;
  background: rgba(var(--slideshow-new-arrow-color, 47, 167, 206), 0.12);
  color: rgb(var(--slideshow-new-arrow-color, 47, 167, 206));
}

.slideshow-new__arrow--solid.slideshow-new__arrow--prev:hover {
  background: rgba(var(--slideshow-new-arrow-color, 47, 167, 206), 0.2);
  transform: translateY(-2px);
}

.slideshow-new__arrow--solid.slideshow-new__arrow--next {
  border: none;
  background: rgb(var(--slideshow-new-arrow-color, 47, 167, 206));
  color: #fff;
  box-shadow: 0 10px 26px rgba(var(--slideshow-new-arrow-color, 47, 167, 206), 0.42);
}

.slideshow-new__arrow--solid.slideshow-new__arrow--next:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* Arrow style: outline (minimal border, fills on hover) */

.slideshow-new__arrow--outline {
  border: 1.5px solid rgb(var(--slideshow-new-arrow-color, 255, 255, 255));
  background: transparent;
  color: rgb(var(--slideshow-new-arrow-color, 255, 255, 255));
}

.slideshow-new__arrow--outline:hover {
  background: rgb(var(--slideshow-new-arrow-color, 255, 255, 255));
  color: rgb(var(--color-base-text, 18, 25, 32));
}

/* Arrow style: squares (rounded-square buttons — prev tinted, next filled) */

.slideshow-new__arrow--squares {
  border-radius: 14px;
}

.slideshow-new__arrow--squares.slideshow-new__arrow--prev {
  border: 1.5px solid rgb(var(--slideshow-new-arrow-color, 255, 255, 255));
  background: transparent;
  color: rgb(var(--slideshow-new-arrow-color, 255, 255, 255));
}

.slideshow-new__arrow--squares.slideshow-new__arrow--prev:hover {
  background: rgba(var(--slideshow-new-arrow-color, 255, 255, 255), 0.14);
}

.slideshow-new__arrow--squares.slideshow-new__arrow--next {
  border: none;
  background: rgb(var(--slideshow-new-arrow-color, 255, 255, 255));
  color: #fff;
}

.slideshow-new__arrow--squares.slideshow-new__arrow--next:hover {
  filter: brightness(1.1);
}

.slideshow-new__row {
  display: flex;
  gap: 14px;
  align-items: center;
}

/* Pause button, when embedded next to the pagination instead of between the arrows */
.slideshow-new__pause--bars,
.slideshow-new__pause--pill,
.slideshow-new__pause--glass,
.slideshow-new__pause--dots,
.slideshow-new__pause--circle-fill,
.slideshow-new__pause--ring-svg,
.slideshow-new__pause--counter {
  width: 40px;
  height: 40px;
}

.slideshow-new__pause--glass {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  /* box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.65),
    inset 0 -6px 14px rgba(255, 255, 255, 0.14),
    0 10px 26px rgba(9, 34, 47, 0.28); */
}

.slideshow-new__pause--glass:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Pagination style: glass (liquid glass expanding pill) */

.slideshow-new__glass {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  /* box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.65),
    inset 0 -6px 14px rgba(255, 255, 255, 0.14),
    0 10px 26px rgba(9, 34, 47, 0.28); */
    box-shadow: 0 5px 5px #0000001a;
}

.slideshow-new__glass-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(var(--slideshow-new-pagination-color, 255, 255, 255), 0.4);
  /* box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6); */
  cursor: pointer;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s, box-shadow 0.3s;
}

.slideshow-new__glass-dot[aria-selected="true"] {
  width: 32px;
  background: rgb(var(--slideshow-new-pagination-color, 255, 255, 255));
  /* box-shadow: 0 0 10px rgba(var(--slideshow-new-pagination-color, 255, 255, 255), 0.55); */
}

/* Pagination style: pill (Apple-style expanding dots) */

.slideshow-new__pill {
  display: flex;
  align-items: center;
  gap: 8px;
  /* background: rgba(255, 255, 255, 0.16); */
  background-color:rgba(232, 232, 237, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 9px 14px;
}

@media screen and (min-width: 750px) {

  .slideshow-new__pill{
    min-height:36px;
    padding 9px 20px;
  }

}

.slideshow-new__pill-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(var(--slideshow-new-pagination-color, 255, 255, 255), 0.5);
  cursor: pointer;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
}

.slideshow-new__pill-dot[aria-selected="true"] {
  width: 22px;
  background: rgb(var(--slideshow-new-pagination-color, 255, 255, 255));
}

/* Pagination style: dots (minimal ring) */

.slideshow-new__pagination--dots { gap: 10px; }

.slideshow-new__ring-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 2px solid rgba(var(--slideshow-new-pagination-color, 255, 255, 255), 0.6);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: all 0.25s;
}

.slideshow-new__ring-dot[aria-selected="true"] {
  width: 12px;
  height: 12px;
  background: rgb(var(--slideshow-new-pagination-color, 255, 255, 255));
  border-color: rgb(var(--slideshow-new-pagination-color, 255, 255, 255));
}

/* Pagination style: circle-fill (dot fills clockwise with the slide's autoplay progress) */

.slideshow-new__pagination--circle-fill { gap: 16px; }

.slideshow-new__circle-dot {
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s;
  background: conic-gradient(
    rgb(var(--slideshow-new-pagination-color, 255, 255, 255)) calc(var(--slideshow-new-dot-progress, 0) * 1%),
    rgba(var(--slideshow-new-pagination-color, 255, 255, 255), 0.35) 0
  );
}

/* Pagination style: ring-svg (ring is drawn progressively around the slide's autoplay progress) */

.slideshow-new__pagination--ring-svg { gap: 16px; }

.slideshow-new__ring-svg-dot {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgb(var(--slideshow-new-pagination-color, 255, 255, 255));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.slideshow-new__ring-svg-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.5;
}

.slideshow-new__ring-svg-fill {
  transition: fill 0.2s;
}

.slideshow-new__ring-svg-progress {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 0.12s linear;
}

/* Pagination style: counter (index + single progress line) */

.slideshow-new__pagination--counter {
  gap: 14px;
  color: rgb(var(--slideshow-new-pagination-color, 255, 255, 255));
}

.slideshow-new__counter-text {
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.slideshow-new__counter-track {
  display: block;
  width: 120px;
  height: 4px;
  border-radius: 999px;
  background: rgba(var(--slideshow-new-pagination-color, 255, 255, 255), 0.3);
  overflow: hidden;
}

.slideshow-new__counter-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: rgb(var(--slideshow-new-pagination-color, 255, 255, 255));
  border-radius: 999px;
}

@media screen and (min-width: 750px) {
  .slideshow-new__controls {
    bottom: clamp(20px, 3vh, 36px);
    flex-direction: row;
    justify-content: space-between;
    padding: 0 clamp(20px, 4vw, 40px);
  }

  .slideshow-new__pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    gap: 9px;
  }

  .slideshow-new__dot { width: 32px; }

  .slideshow-new__counter-track { width: 180px; }

  .slideshow-new__row { margin-left: auto; }

  .slideshow-new__pause {
    width: clamp(46px, 3.4vw, 54px);
    height: clamp(46px, 3.4vw, 54px);
  }
}

/* If there is only one slide, hide the whole control bar */
.slideshow-new__controls:empty { display: none; }

/* Shop panel (slide_shop) */

.slideshow-new__shop-panel {
  position: absolute;
  z-index: 4;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 92%);
}

/* On mobile the full panel is replaced entirely by the .slideshow-new__shop-toggle pill
   below, which opens the same product list as a bottom sheet (.slideshow-new__shop-sheet)
   instead — see slideshow-new-slide-shop.liquid. */
@media screen and (max-width: 749px) {
  .slideshow-new__shop-panel {
    display: none;
  }
}

.slideshow-new__shop-panel--mobile-bottom { bottom: 1.6rem; }
.slideshow-new__shop-panel--mobile-top { top: 20px; }

.slideshow-new__shop-card {
  background: rgba(var(--color-base-background-1, 255, 255, 255), var(--slideshow-new-shop-bg-opacity, 1));
  color: var(--slideshow-new-shop-text-color, rgb(var(--color-base-text, 18, 25, 32)));
  border-radius: 18px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

/* The shared `price` snippet sets its own explicit `color`, so it doesn't pick up the
   inherited `color` above — re-target it directly with the same merchant override /
   per-style fallback instead. */
.slideshow-new__shop-card .price {
  color: var(--slideshow-new-shop-text-color, rgb(var(--color-foreground)));
}

/* Panel style: glass (frosted clear) — matches the arrow/pagination/CTA glass surfaces. */
.slideshow-new__shop-card--glass {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  color: var(--slideshow-new-shop-text-color, #fff);
}

.slideshow-new__shop-card--glass .price {
  color: var(--slideshow-new-shop-text-color, #fff);
}

.slideshow-new__shop-card--glass .slideshow-new__shop-item {
  border-top-color: rgba(255, 255, 255, 0.28);
}

.slideshow-new__shop-card--glass .slideshow-new__shop-add {
  background: rgba(255, 255, 255, 0.9);
  color: #003b61;
}

/* Panel style: glass, tinted — same frosted look, tinted with the theme's accent-1 color
   (navy in this theme) for guaranteed contrast on pale/busy photos. */
.slideshow-new__shop-card--glass-navy {
  background: rgba(var(--color-base-accent-1, 0, 59, 97), 0.28);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  color: var(--slideshow-new-shop-text-color, #fff);
}

.slideshow-new__shop-card--glass-navy .price {
  color: var(--slideshow-new-shop-text-color, #fff);
}

.slideshow-new__shop-card--glass-navy .slideshow-new__shop-item {
  border-top-color: rgba(255, 255, 255, 0.22);
}

.slideshow-new__shop-card--glass-navy .slideshow-new__shop-add {
  background: #fff;
  color: #003b61;
}

/* Panel style: glass header, opaque list — safest for legibility: only the title bandeau
   is frosted, the product rows stay on the theme's usual light background so prices and
   promo badges keep their normal contrast. */
.slideshow-new__shop-card--glass-header {
  background: rgb(var(--color-base-background-1, 255, 255, 255));
}

.slideshow-new__shop-card--glass-header .slideshow-new__shop-header {
  background: rgba(var(--color-base-accent-1, 0, 59, 97), 0.28);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  color: var(--slideshow-new-shop-text-color, #fff);
  border-radius: 18px 18px 0 0;
}

.slideshow-new__shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-weight: 800;
  font-size: 15px;
}

.slideshow-new__shop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.slideshow-new__shop-item-media {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.05);
}

.slideshow-new__shop-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slideshow-new__shop-item-info {
  flex: 1;
  min-width: 0;
}

.slideshow-new__shop-item-info .club_biolane_price_label{
  transform: inherit;
}

.slideshow-new__shop-item-title {
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slideshow-new__shop-add {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  background: rgb(var(--color-button, 18, 25, 32));
  color: rgb(var(--color-button-text, 255, 255, 255));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: filter 0.2s;
}

.slideshow-new__shop-add:hover { filter: brightness(1.15); }
.slideshow-new__shop-add .icon { width: 16px; height: 16px; }

@media screen and (min-width: 750px) {
  .slideshow-new__shop-panel {
    width: min(360px, 38vw);
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
  }

  .slideshow-new__shop-panel--desktop-top-left {
    top: clamp(20px, 4vw, 48px);
    left: clamp(20px, 4vw, 48px);
  }

  .slideshow-new__shop-panel--desktop-top-right {
    top: clamp(20px, 4vw, 48px);
    right: clamp(20px, 4vw, 48px);
  }

  .slideshow-new__shop-panel--desktop-middle-left {
    top: 50%;
    left: clamp(20px, 4vw, 48px);
    transform: translateY(-50%);
  }

  .slideshow-new__shop-panel--desktop-middle-right {
    top: 50%;
    right: clamp(20px, 4vw, 48px);
    transform: translateY(-50%);
  }

  .slideshow-new__shop-panel--desktop-bottom-left {
    bottom: clamp(20px, 4vw, 48px);
    left: clamp(20px, 4vw, 48px);
  }

  .slideshow-new__shop-panel--desktop-bottom-right {
    bottom: clamp(20px, 4vw, 48px);
    right: clamp(20px, 4vw, 48px);
  }

  .slideshow-new__shop-panel--boxed.slideshow-new__shop-panel--desktop-top-left,
  .slideshow-new__shop-panel--boxed.slideshow-new__shop-panel--desktop-middle-left,
  .slideshow-new__shop-panel--boxed.slideshow-new__shop-panel--desktop-bottom-left {
    left: max(clamp(20px, 4vw, 48px), calc((100% - var(--page-width)) / 2));
  }

  .slideshow-new__shop-panel--boxed.slideshow-new__shop-panel--desktop-top-right,
  .slideshow-new__shop-panel--boxed.slideshow-new__shop-panel--desktop-middle-right,
  .slideshow-new__shop-panel--boxed.slideshow-new__shop-panel--desktop-bottom-right {
    right: max(clamp(20px, 4vw, 48px), calc((100% - var(--page-width)) / 2));
  }

  .slideshow-new__shop-item-media { width: 56px; height: 56px; }
}

/* Hotspots (slide_hotspot) */

.slideshow-new__hotspot {
  position: absolute;
  top: var(--slideshow-new-hotspot-y-mobile, 50%);
  left: var(--slideshow-new-hotspot-x-mobile, 50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  border: none;
  border-radius: 13px;
  background: rgb(var(--color-base-background-1, 255, 255, 255));
  color: rgb(var(--color-base-text, 18, 25, 32));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  text-align: left;
  opacity: var(--slideshow-new-hotspot-opacity, 1);
  transition: transform 0.2s, opacity 0.2s;
}

@media screen and (min-width: 750px) {

  .slideshow-new__hotspot{
    gap: 10px;
    padding: 10px 14px;
  }

}


.slideshow-new__hotspot:hover,
.slideshow-new__hotspot:focus-visible,
.slideshow-new__hotspot[aria-expanded="true"] {
  transform: translateY(-2px);
  opacity: 1;
}

.slideshow-new__hotspot-label {
  display: block;
  font-weight: 700;
  font-size: 11px;
  color: var(--slideshow-new-hotspot-text-color, rgba(0, 0, 0, 0.55));
}

.slideshow-new__hotspot-price {
  display: block;
  font-weight: 800;
  font-size: 16px;
  color: var(--slideshow-new-hotspot-text-color, rgb(var(--color-base-text, 18, 25, 32)));
}

.slideshow-new__hotspot-dot {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(var(--color-base-accent-1, 47, 167, 206), 0.12);
  color: rgb(var(--color-base-accent-1, 47, 167, 206));
  display: flex;
  align-items: center;
  justify-content: center;
}

.slideshow-new__hotspot-dot .icon { width: 13px; height: 13px; }
.slideshow-new__hotspot-dot .icon-caret { transform: rotate(-90deg); }

/* Hotspot style: glass (frosted clear) — matches the arrow/pagination/CTA/shop-panel
   glass surfaces. Label/price go white, the dot flips to a solid white circle with a
   navy icon (same treatment as the glass shop-add button) for contrast against the frost. */
.slideshow-new__hotspot--glass {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 5px 18px rgba(9, 34, 47, 0.18);
}

.slideshow-new__hotspot--glass .slideshow-new__hotspot-label { color: var(--slideshow-new-hotspot-text-color, rgba(255, 255, 255, 0.85)); }
.slideshow-new__hotspot--glass .slideshow-new__hotspot-price { color: var(--slideshow-new-hotspot-text-color, #fff); }

.slideshow-new__hotspot--glass .slideshow-new__hotspot-dot {
  background: rgba(255, 255, 255, 0.9);
  color: #003b61;
}

/* Hotspot style: glass, tinted — same frosted look, tinted with the theme's accent-1
   color (navy in this theme) for guaranteed contrast on pale/busy photos. */
.slideshow-new__hotspot--glass-navy {
  background: rgba(var(--color-base-accent-1, 0, 59, 97), 0.28);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 5px 18px rgba(9, 34, 47, 0.24);
}

.slideshow-new__hotspot--glass-navy .slideshow-new__hotspot-label { color: var(--slideshow-new-hotspot-text-color, rgba(255, 255, 255, 0.8)); }
.slideshow-new__hotspot--glass-navy .slideshow-new__hotspot-price { color: var(--slideshow-new-hotspot-text-color, #fff); }

.slideshow-new__hotspot--glass-navy .slideshow-new__hotspot-dot {
  background: #fff;
  color: #003b61;
}

/* Hotspot style: split — the single pill is broken into two visually separate glass
   capsules (a round icon dot + a label/price pill), like a map pin next to its callout.
   Still one semantic <button> (same [data-hotspot-toggle] target) — only the background
   moves from the outer button onto each inner span, and `order` visually leads with the
   dot without touching the label-before-icon markup order (kept for reading order). */
.slideshow-new__hotspot--split {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 10px;
}

.slideshow-new__hotspot--split > span:first-child {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}

.slideshow-new__hotspot--split .slideshow-new__hotspot-label { color: var(--slideshow-new-hotspot-text-color, rgba(255, 255, 255, 0.85)); }
.slideshow-new__hotspot--split .slideshow-new__hotspot-price { color: var(--slideshow-new-hotspot-text-color, #fff); }

.slideshow-new__hotspot--split .slideshow-new__hotspot-dot {
  order: -1;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  color: #fff;
}

.slideshow-new__hotspot-popover {
  z-index: 10;
  background: rgb(var(--color-base-background-1, 255, 255, 255));
  color: rgb(var(--color-base-text, 18, 25, 32));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.slideshow-new__hotspot-popover[hidden] { display: none; }

/* Mobile (<750px): bottom sheet — fixed to the viewport and slides up from the bottom,
   like a native iOS sheet, with a dimmed backdrop behind it (see
   .slideshow-new__hotspot-backdrop below). It's deliberately NOT hidden via the `hidden`
   attribute while animating shut — display:none can't transition — so JS only re-applies
   `hidden` once the closing transition finishes (see slideshow-new-script.liquid).
   JS also relocates this element to a direct child of <body> for as long as it's open
   (see openPopover() in slideshow-new-script.liquid): a `position: fixed` descendant is
   still clipped by a non-transformed `overflow: hidden` ancestor (here,
   `.slideshow-new__slide`) in most browsers, which is what previously kept the sheet
   from reaching the page's real bottom edge or painting over the site footer. */
@media screen and (max-width: 749px) {
  .slideshow-new__hotspot-popover {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
    padding: 24px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .slideshow-new__hotspot-popover--open {
    transform: translateY(0);
  }
}

/* Desktop (≥750px): small card anchored at the hotspot's own position, unchanged —
   except its exact placement can now be nudged by JS (a `transform: translate()` layered
   on top of this) so it never overflows past the slide's edges when the hotspot itself
   sits close to one, see positionHotspotPopover() in slideshow-new-script.liquid. */
@media screen and (min-width: 750px) {
  .slideshow-new__hotspot-popover {
    position: absolute;
    top: var(--slideshow-new-hotspot-y-desktop, var(--slideshow-new-hotspot-y-mobile, 50%));
    left: var(--slideshow-new-hotspot-x-desktop, var(--slideshow-new-hotspot-x-mobile, 50%));
    width: min(280px, 78vw);
    border-radius: 16px;
    padding: 16px;
  }

  .slideshow-new__hotspot {
    top: var(--slideshow-new-hotspot-y-desktop, var(--slideshow-new-hotspot-y-mobile, 50%));
    left: var(--slideshow-new-hotspot-x-desktop, var(--slideshow-new-hotspot-x-mobile, 50%));
  }
}

.slideshow-new__hotspot-popover-grabber {
  display: none;
}

@media screen and (max-width: 749px) {
  .slideshow-new__hotspot-popover-grabber {
    display: block;
    width: 40px;
    height: 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.15);
    margin: 0 auto 12px;
  }
}

/* Dimmed backdrop behind the mobile bottom sheet. Toggled by JS alongside the popover;
   desktop never shows it (its popover is a small anchored card, not a full sheet).
   JS also relocates this element to a direct child of <body> once, at init (see
   initHotspots() in slideshow-new-script.liquid), so it can never be clipped by
   `.slideshow-new--centered`'s own `overflow: hidden` either. */
.slideshow-new__hotspot-backdrop {
  display: none;
}

@media screen and (max-width: 749px) {
  .slideshow-new__hotspot-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9;
    background: rgba(9, 34, 47, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  .slideshow-new__hotspot-backdrop[hidden] {
    display: none;
  }
}

.slideshow-new__hotspot-popover-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.slideshow-new__hotspot-popover-close .icon { width: 12px; height: 12px; }

/* Mobile shop badge (slide_shop) — replaces the desktop panel entirely below 750px (see
   the display:none rule on .slideshow-new__shop-panel above). Positioned on the image via
   the shop_icon_position_x/y_mobile settings, same top-left-anchored convention as
   .slideshow-new__hotspot. Opens the sheet below through the same [data-hotspot-toggle]
   mechanism as the hotspot popovers (see slideshow-new-script.liquid) — same bottom-sheet
   design, backdrop, scroll lock and portal-to-<body> clipping fix.
   Merchants pick one of 3 styles via shop_badge_style_mobile (see
   snippets/slideshow-new-slide-shop.liquid): label_icon (shop_title_mobile label next to
   the icon, collapsing to icon+count after 2.5s), halo (breathing shadow pulse + nudging
   chevron) or hint_dot (bouncier entrance + pulsing "new" dot). The halo/hint_dot cues
   only play until the shopper has opened the sheet once — see initShopBadges() in
   slideshow-new-script.liquid, which removes --first-view and persists that to
   localStorage. */
.slideshow-new__shop-toggle {
  display: none;
  position: absolute;
  z-index: 5;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  /* Same opacity control as the desktop panel (--slideshow-new-shop-bg-opacity, set
     inline from the "Opacité du fond du panneau" setting — see
     slideshow-new-slide-shop.liquid), so the merchant's one opacity slider governs both. */
  background: rgba(var(--color-base-background-1, 255, 255, 255), var(--slideshow-new-shop-bg-opacity, 1));
  color: var(--slideshow-new-shop-toggle-text-color, rgb(var(--color-base-text, 18, 25, 32)));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  font-weight: 800;
  font-size: 15px;
  animation: slideshow-new-badge-in 0.5s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.slideshow-new__shop-toggle .icon {
  width: 18px;
  height: 18px;
  color: var(--slideshow-new-shop-toggle-text-color, rgb(var(--color-base-accent-1, 47, 167, 206)));
  flex-shrink: 0;
}

.slideshow-new__shop-toggle-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgb(var(--color-base-text, 18, 25, 32));
  color: rgb(var(--color-base-background-1, 255, 255, 255));
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slideshow-new__shop-toggle-count--plain {
  min-width: 0;
  height: auto;
  padding: 0;
  background: none;
  color: inherit;
  font-size: 16px;
}

/* Badge surface: glass (frosted clear) — matches the arrow/pagination/CTA/shop-panel/
   hotspot glass surfaces. Icon, label and plain count go white (or the merchant's
   chosen shop_badge_text_color_mobile); the "pill" count badge inverts to a white
   circle with a navy number so it stays legible against the frost. */
.slideshow-new__shop-toggle--surface-glass {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 5px 18px rgba(9, 34, 47, 0.18);
  color: var(--slideshow-new-shop-toggle-text-color, #fff);
}

.slideshow-new__shop-toggle--surface-glass .icon {
  color: var(--slideshow-new-shop-toggle-text-color, #fff);
}

.slideshow-new__shop-toggle--surface-glass .slideshow-new__shop-toggle-count {
  background: rgba(255, 255, 255, 0.9);
  color: #003b61;
}

.slideshow-new__shop-toggle--surface-glass .slideshow-new__shop-toggle-dot {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.slideshow-new__shop-toggle--surface-glass .slideshow-new__shop-toggle-dot::after {
  background: #fff;
}

.slideshow-new__shop-toggle--surface-glass.slideshow-new__shop-toggle--halo.slideshow-new__shop-toggle--first-view {
  animation:
    slideshow-new-badge-in 0.5s cubic-bezier(0.32, 0.72, 0, 1) both,
    slideshow-new-badge-halo-glass 2.4s ease-out 0.5s infinite;
}

@keyframes slideshow-new-badge-halo-glass {
  0% { box-shadow: 0 5px 18px rgba(9, 34, 47, 0.18), 0 0 0 0 rgba(255, 255, 255, 0.5); }
  70% { box-shadow: 0 5px 18px rgba(9, 34, 47, 0.18), 0 0 0 12px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 5px 18px rgba(9, 34, 47, 0.18), 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Badge surface: glass, tinted — same frosted look, tinted with the theme's accent-1
   color (navy in this theme) for guaranteed contrast on pale/busy photos. */
.slideshow-new__shop-toggle--surface-glass-navy {
  background: rgba(var(--color-base-accent-1, 0, 59, 97), 0.28);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 5px 18px rgba(9, 34, 47, 0.24);
  color: var(--slideshow-new-shop-toggle-text-color, #fff);
}

.slideshow-new__shop-toggle--surface-glass-navy .icon {
  color: var(--slideshow-new-shop-toggle-text-color, #fff);
}

.slideshow-new__shop-toggle--surface-glass-navy .slideshow-new__shop-toggle-count {
  background: #fff;
  color: #003b61;
}

.slideshow-new__shop-toggle--surface-glass-navy .slideshow-new__shop-toggle-dot {
  background: #fff;
  border-color: rgba(0, 59, 97, 0.5);
}

.slideshow-new__shop-toggle--surface-glass-navy .slideshow-new__shop-toggle-dot::after {
  background: #fff;
}

.slideshow-new__shop-toggle--surface-glass-navy.slideshow-new__shop-toggle--halo.slideshow-new__shop-toggle--first-view {
  animation:
    slideshow-new-badge-in 0.5s cubic-bezier(0.32, 0.72, 0, 1) both,
    slideshow-new-badge-halo-glass-navy 2.4s ease-out 0.5s infinite;
}

@keyframes slideshow-new-badge-halo-glass-navy {
  0% { box-shadow: 0 5px 18px rgba(9, 34, 47, 0.24), 0 0 0 0 rgba(var(--color-base-accent-1, 0, 59, 97), 0.45); }
  70% { box-shadow: 0 5px 18px rgba(9, 34, 47, 0.24), 0 0 0 12px rgba(var(--color-base-accent-1, 0, 59, 97), 0); }
  100% { box-shadow: 0 5px 18px rgba(9, 34, 47, 0.24), 0 0 0 0 rgba(var(--color-base-accent-1, 0, 59, 97), 0); }
}

@media screen and (max-width: 749px) {
  .slideshow-new__shop-toggle {
    display: flex;
    top: var(--slideshow-new-shop-icon-y-mobile, 84%);
    left: var(--slideshow-new-shop-icon-x-mobile, 84%);
  }
}

@keyframes slideshow-new-badge-in {
  0% { opacity: 0; transform: translateY(10px) scale(0.9); }
  60% { transform: translateY(0) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* label_icon: the label collapses out (rather than just disappearing) once
   --collapsed is added by JS 2.5s after mount, leaving icon + count only. Skipped
   entirely when the merchant left shop_title_mobile blank — the label span isn't
   rendered, so there's nothing to collapse. */
.slideshow-new__shop-toggle-label {
  display: inline-block;
  overflow: hidden;
  max-width: 220px;
  white-space: nowrap;
  transition: max-width 0.4s ease, margin-left 0.4s ease, opacity 0.3s ease;
}

.slideshow-new__shop-toggle--collapsed .slideshow-new__shop-toggle-label {
  max-width: 0;
  margin-left: -8px;
  opacity: 0;
}

/* halo: breathing shadow pulse (first-view only) + a nudging chevron that always plays,
   both inviting a tap without a text label. */
.slideshow-new__shop-toggle--halo.slideshow-new__shop-toggle--first-view {
  animation:
    slideshow-new-badge-in 0.5s cubic-bezier(0.32, 0.72, 0, 1) both,
    slideshow-new-badge-halo 2.4s ease-out 0.5s infinite;
}

.slideshow-new__shop-toggle--halo .icon-chevron {
  width: 15px;
  height: 15px;
  animation: slideshow-new-badge-chevron 1.4s ease-in-out infinite;
}

@keyframes slideshow-new-badge-halo {
  0% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 0 0 rgba(var(--color-base-text, 18, 25, 32), 0.3); }
  70% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 0 12px rgba(var(--color-base-text, 18, 25, 32), 0); }
  100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 0 0 rgba(var(--color-base-text, 18, 25, 32), 0); }
}

@keyframes slideshow-new-badge-chevron {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

/* hint_dot: bouncier entrance + a pulsing "new" dot pinned to the badge's top-right
   corner, shown only pre-first-view (same --first-view/localStorage gate as halo above). */
.slideshow-new__shop-toggle--hint_dot {
  animation: slideshow-new-badge-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.slideshow-new__shop-toggle-dot {
  display: none;
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgb(var(--color-base-text, 18, 25, 32));
  border: 2px solid rgb(var(--color-base-background-1, 255, 255, 255));
}

.slideshow-new__shop-toggle--hint_dot.slideshow-new__shop-toggle--first-view .slideshow-new__shop-toggle-dot {
  display: block;
}

.slideshow-new__shop-toggle--hint_dot.slideshow-new__shop-toggle--first-view .slideshow-new__shop-toggle-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgb(var(--color-base-text, 18, 25, 32));
  animation: slideshow-new-badge-dot-pulse 1.8s ease-out infinite;
}

@keyframes slideshow-new-badge-dot-pulse {
  0% { transform: scale(0.8); opacity: 0.9; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { opacity: 0; }
}

/* Product-list bottom sheet (slide_shop, mobile). Shares every mechanic with the
   slide_hotspot popover (see .slideshow-new__hotspot-popover rules above) — it's the
   same class, just with its own header/content underneath the shared grabber + close
   button. `.slideshow-new__shop-item` here is the same row used in the desktop panel;
   its own left/right padding is zeroed out since the sheet already supplies it. */
.slideshow-new__shop-sheet-header {
  font-weight: 800;
  font-size: 15px;
  margin: 0 0 14px;
  padding-right: 28px;
}

.slideshow-new__shop-sheet-items .slideshow-new__shop-item {
  padding-left: 0;
  padding-right: 0;
}

.slideshow-new__shop-sheet-items .slideshow-new__shop-item:first-child {
  border-top: none;
}

/* Body scroll lock, applied by JS while the mobile hotspot bottom sheet is open (see
   lockScroll()/unlockScroll() in slideshow-new-script.liquid). `position: fixed` — not
   just `overflow: hidden` — is what actually stops iOS Safari from rubber-band scrolling
   the page behind the sheet; JS sets `top` inline to the saved scroll offset so the page
   doesn't jump. The sheet itself is unaffected: it's its own `overflow-y: auto` box. */
.slideshow-new-scroll-lock {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}

.slideshow-new__hotspot-popover-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
  margin-bottom: 12px;
}

.slideshow-new__hotspot-popover-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slideshow-new__hotspot-popover-title {
  font-weight: 800;
  font-size: 15px;
  margin: 0 0 4px;
}

.slideshow-new__hotspot-popover-footer {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.slideshow-new__hotspot-popover-footer product-form{
  width:100%;
}

.slideshow-new__hotspot-popover-footer product-form button[type=submit]{
  width:100%;
  padding:16px;
}

/* Reduced motion: no smooth scroll, no animated fill */
@media (prefers-reduced-motion: reduce) {
  .slideshow-new__track { scroll-behavior: auto; }
  .slideshow-new__dot-fill { transition: none !important; }
  .slideshow-new__circle-dot { transition: none !important; }
  .slideshow-new__ring-svg-progress { transition: none !important; }
  .slideshow-new__arrow,
  .slideshow-new__pause { transition: none; }
  .slideshow-new__hotspot-popover { transition: none; }
  .slideshow-new__shop-toggle,
  .slideshow-new__shop-toggle * { animation: none !important; }
}