/* Dependency-free replacements for the captured Owl/Swiper instances. */
.owl-carousel { display: flex !important; gap: 57px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.owl-carousel::-webkit-scrollbar, .native-carousel-track::-webkit-scrollbar { display: none; }
.owl-carousel > .item { flex: 0 0 100%; scroll-snap-align: start; }
.native-carousel { overflow: hidden; }
.native-carousel-track { display: flex; align-items: stretch; gap: 16px; overflow-x: auto; scroll-snap-type: none !important; scroll-behavior: smooth; scrollbar-width: none; touch-action: pan-y; }
.native-carousel-track.native-carousel-rebasing { scroll-behavior: auto !important; }
.native-carousel-track > .swiper-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: none; }
.native-carousel-track > .swiper-slide > .shping-box-newsroom { height: 100%; }

/* Newsroom is a conventional, leading-edge carousel. Its widths account for
   the gaps, so it never crops a fifth card at desktop or a second card on
   mobile. The two changing edge cards get a restrained editorial hand-off. */
.swiper-shping-newsroom .native-carousel-track { scroll-snap-type: x mandatory !important; }
.swiper-shping-newsroom .native-carousel-track > .swiper-slide { scroll-snap-align: start; }
.swiper-shping-newsroom .swiper-slide.native-newsroom-enter { animation: native-newsroom-enter .42s cubic-bezier(.22, .8, .25, 1) both; }
.swiper-shping-newsroom .swiper-slide.native-newsroom-leave { animation: native-newsroom-leave .34s ease-out both; }
@keyframes native-newsroom-enter {
  from { opacity: .22; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes native-newsroom-leave {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: .18; transform: translateY(8px); }
}
.swiper-shping .swiper-slide:not(.swiper-slide-visible) .shping-box-w-street { opacity: .5; padding-bottom: 77px; }
.swiper-shping .swiper-slide.swiper-slide-visible .shping-box-w-street { opacity: 1; padding-bottom: 0; }

/* Home review strip: it deliberately escapes the text container so the
   reviews feel like an editorial carousel rather than a four-card grid. The
   mask leaves a dimmed glimpse of the adjacent cards at both viewport edges. */
@media (min-width: 768px) {
  #the_street .swiper-shping {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
  }

  #the_street .swiper-shping .native-carousel-track {
    gap: 16px;
  }

  #the_street .swiper-shping .native-carousel-track > .swiper-slide {
    flex: 0 0 clamp(230px, 19vw, 344px);
  }

  #the_street .swiper-shping .native-carousel-edge .shping-box-w-street {
    opacity: .42;
    transition: opacity .28s ease;
  }
}
.native-carousel-dots { display: flex; justify-content: center; gap: 16px !important; margin-top: 36px; padding: 0 8px; }
.native-carousel-dot { width: 9px; height: 9px; margin: 0 !important; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; opacity: .55; cursor: pointer; }
.native-carousel-dot[aria-current="true"] { background: currentColor; opacity: 1; }

@property --native-dot-progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

@keyframes native-carousel-dot-progress {
  from { --native-dot-progress: 0%; }
  to { --native-dot-progress: 100%; }
}

/* The red home review strip uses light, low-contrast controls. The active
   marker is a six-second ring that completes just as the carousel advances. */
#the_street .native-carousel-dots {
  gap: 12px !important;
  margin-top: 32px;
  color: rgba(255, 255, 255, .94);
}

#the_street .native-carousel-dot {
  position: relative;
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 1;
}

#the_street .native-carousel-dot::before,
#the_street .native-carousel-dot::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
}

#the_street .native-carousel-dot::before {
  border: 1px solid rgba(255, 255, 255, .42);
}

#the_street .native-carousel-dot::after {
  --native-dot-progress: 0%;
  background: conic-gradient(from -90deg, rgba(255, 255, 255, .98) 0 var(--native-dot-progress), transparent var(--native-dot-progress) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
}

#the_street .native-carousel-dot[aria-current="true"] {
  border: 0;
  background: transparent;
}

#the_street .native-carousel-dot[aria-current="true"]::before { border-color: rgba(255, 255, 255, .68); }
#the_street .native-carousel-dot[aria-current="true"]::after { animation: native-carousel-dot-progress 6s linear forwards; }

@media (prefers-reduced-motion: reduce) {
  #the_street .native-carousel-dot[aria-current="true"]::after { animation: none; --native-dot-progress: 100%; }
}
.swiper-pagi-style .native-carousel-dot { display: block !important; width: 9px !important; height: 9px !important; min-width: 0; border: 1px solid currentColor !important; border-radius: 50% !important; background: transparent !important; opacity: .55; }
.swiper-pagi-style .native-carousel-dot[aria-current="true"] { background: currentColor !important; opacity: 1; }
.swiper-logos-mb .native-carousel-track,
.swiper-logo .native-carousel-track {
  gap: 35px;
  align-items: center;
  /* The marquee advances in sub-pixel rAF increments. Smooth scrolling
     rounds those increments away, leaving the As Seen On strip stationary. */
  scroll-behavior: auto;
}
.swiper-logos-mb,
.swiper-logo {
  /* Keep an entire logo clear of the clipped marquee edge. Fractional scroll
     positions otherwise shave pixels from the first brand mark on load. */
  box-sizing: border-box;
  padding-inline: 32px !important;
}
.swiper-logos-mb .native-carousel-track > .swiper-slide,
.swiper-logo .native-carousel-track > .swiper-slide { flex-basis: auto; width: clamp(105px, 14vw, 170px); }
/* Six trusted-brand marks are shown together on desktop. Account for their
   five gaps and the protected stage edges so the final Fanta mark is whole. */
.swiper-logos-mb .native-carousel-track > .swiper-slide {
  flex-basis: clamp(105px, calc((100% - 175px) / 6), 170px);
  width: clamp(105px, calc((100% - 175px) / 6), 170px);
}
/* The trusted FMCG marks are deliberately a static, complete row—not a
   marquee. Seven equal cells preserve every logo on desktop and mobile. */
.trusted_maketers .swiper-logos-mb {
  --native-logo-height: clamp(30px, 4.3vw, 58px);
  overflow: visible !important;
  padding-inline: 0 !important;
}
.trusted_maketers .swiper-logos-mb .swiper-wrapper {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  gap: clamp(7px, 2vw, 30px);
  overflow: visible !important;
}
.trusted_maketers .swiper-logos-mb .swiper-slide {
  width: auto !important;
  min-width: 0;
}
.swiper-logos-mb { --native-logo-height: 64px; }
.swiper-logo { --native-logo-height: 32px; }
.swiper-logos-mb .truseted_img,
.swiper-logo .truseted_img { height: var(--native-logo-height); }
.swiper-logos-mb .truseted_img > a,
.swiper-logo .truseted_img > a { display: block; position: relative; height: 100%; }
.swiper-logos-mb .swiper-slide .truseted_img img,
.swiper-logo .swiper-slide .truseted_img img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  margin: auto;
  object-fit: contain;
  object-position: center;
  transition: opacity .28s ease;
}
.swiper-logos-mb .swiper-slide .heniz,
.swiper-logo .swiper-slide .heniz { display: block; position: absolute; inset: 0; opacity: 0; }
.swiper-logos-mb .swiper-slide .heniz_d,
.swiper-logo .swiper-slide .heniz_d { opacity: 1; }
.swiper-logos-mb .swiper-slide .truseted_img:hover .heniz_d,
.swiper-logos-mb .swiper-slide .truseted_img:focus-within .heniz_d,
.swiper-logo .swiper-slide .truseted_img:hover .heniz_d,
.swiper-logo .swiper-slide .truseted_img:focus-within .heniz_d { opacity: 0; }
.swiper-logos-mb .swiper-slide .truseted_img:hover .heniz,
.swiper-logos-mb .swiper-slide .truseted_img:focus-within .heniz,
.swiper-logo .swiper-slide .truseted_img:hover .heniz,
.swiper-logo .swiper-slide .truseted_img:focus-within .heniz { opacity: 1; }

/* Reveal the initial, real logo cycle in sequence. Inert marquee copies stay
   available for a seamless loop but do not participate in the introduction. */
.native-logo-reveal .swiper-slide:not([aria-hidden="true"]) { opacity: 0; transform: translateY(12px); }
.native-logo-reveal.is-logo-revealed .swiper-slide:not([aria-hidden="true"]) {
  animation: native-logo-reveal .45s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: var(--native-logo-reveal-delay, 0ms);
}
@keyframes native-logo-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .native-logo-reveal .swiper-slide:not([aria-hidden="true"]) { opacity: 1; transform: none; }
}
@media (min-width: 768px) { .owl-carousel > .item { flex-basis: calc((100% - 57px) / 2); } .native-carousel-track > .swiper-slide { flex-basis: calc((100% - 16px) / 2); } }
@media (min-width: 992px) { .owl-carousel > .item { flex-basis: calc((100% - 114px) / 3); } .owl-carousel + .native-carousel-dots { display: none; } .native-carousel-track > .swiper-slide { flex-basis: calc((100% - 32px) / 3); } }
@media (min-width: 1200px) { .native-carousel-track > .swiper-slide { flex-basis: calc((100% - 48px) / 4); } }