/* ========= slider-hero ========== */

.hero__swiper .swiper-pagination-bullet-active {
    background: #5C18E4;
    width: 24px !important;
    border-radius: 5px !important;
}
.hero__swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 100%;
}
.hero__swiper .swiper-pagination {
    bottom: 0;
    margin-top: 20px;
    position: relative;
    z-index: 0 ;
}

.slider-hero .swiper-button-next,
.slider-hero .swiper-button-prev {
    font-weight: 900;
    font-size: 24px;
    color: #9ca3af;
    width: 20px;
    height: 50px;
    background-color: transparent;
}
.brand-slider .swiper-button-next,
.brand-slider .swiper-button-prev {
    font-weight: 900;
    font-size: 24px;
    color: #9ca3af;
    width: 50px;
    height: 50px;
    background-color: transparent;
}

.brand-slider .swiper-button-next::after,
.brand-slider .swiper-button-prev::after,
.slider-hero .swiper-button-next::after,
.slider-hero .swiper-button-prev::after {
    font-size: 30px !important;
}

@media (max-width: 1024px) {
    .brand-slider .swiper-button-next::after,
    .brand-slider .swiper-button-prev::after,
    .slider-hero .swiper-button-next::after,
    .slider-hero .swiper-button-prev::after {
        font-size: 12px !important;
    }
}

/* Swiper 12 moved arrows 4px from the edge (11 used 10px); keep them where they were. */
:root {
    --swiper-navigation-sides-offset: 10px;
}

/* Swiper 12 draws the arrow as an SVG that fills the whole button, so the
   font-size rules above no longer size it. Same sizes as before: 30px, and
   12px on tablets and phones. */
.brand-slider .swiper-navigation-icon,
.slider-hero .swiper-navigation-icon {
    width: auto;
    height: 30px;
}

@media (max-width: 1024px) {
    .brand-slider .swiper-navigation-icon,
    .slider-hero .swiper-navigation-icon {
        height: 12px;
    }
}

.swiper-disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(1);
}
/* ========= Before Swiper starts =========
   Swiper loads at the end of the page, so on a slow phone the carousels are
   drawn first as plain rows of full-width slides, then re-laid out when it
   starts - measured 0.155 of layout shift on the home page (slow 4G): the
   banner's dots appearing pushed everything down 24px, and "Find your pet
   things" shrank from 452px to 248px tall as its cards went from one to two
   per row. These rules draw the carousels at their final size from the start.

   They mirror the breakpoints in public/website/js/slider.js - change both
   together. Swiper's slide width is (container - gap x (n - 1)) / n with the
   gap after each slide; once it starts, its inline styles take over. */

/* The banner's dots: reserve their row before the dots exist. */
.hero__swiper .swiper-pagination {
    min-height: 24px;
}

.swiper:not(.swiper-initialized) .swiper-slide {
    --gap: 12px;
    width: calc((100% - var(--gap) * (var(--per-view) - 1)) / var(--per-view));
    margin-inline-end: var(--gap);
}

/* Categories ("Find your pet things") - .pet_pet */
.pet_pet:not(.swiper-initialized) .swiper-slide { --per-view: 4; }
@media (min-width: 320px)  { .pet_pet:not(.swiper-initialized) .swiper-slide { --per-view: 2; } }
@media (min-width: 640px)  { .pet_pet:not(.swiper-initialized) .swiper-slide { --per-view: 2.5; } }
@media (min-width: 1024px) { .pet_pet:not(.swiper-initialized) .swiper-slide { --per-view: 3.5; } }
@media (min-width: 1280px) { .pet_pet:not(.swiper-initialized) .swiper-slide { --per-view: 4; } }

/* Product collections - .pet_slider */
.pet_slider:not(.swiper-initialized) .swiper-slide { --per-view: 4; }
@media (min-width: 320px)  { .pet_slider:not(.swiper-initialized) .swiper-slide { --per-view: 2.15; --gap: 10px; } }
@media (min-width: 530px)  { .pet_slider:not(.swiper-initialized) .swiper-slide { --per-view: 2.6; --gap: 10px; } }
@media (min-width: 1024px) { .pet_slider:not(.swiper-initialized) .swiper-slide { --per-view: 3.25; --gap: 12px; } }
@media (min-width: 1280px) { .pet_slider:not(.swiper-initialized) .swiper-slide { --per-view: 4; --gap: 12px; } }

/* Brands - .brand-slider */
.brand-slider:not(.swiper-initialized) .swiper-slide { --per-view: 5; --gap: 32px; }
@media (min-width: 320px)  { .brand-slider:not(.swiper-initialized) .swiper-slide { --per-view: 2; } }
@media (min-width: 768px)  { .brand-slider:not(.swiper-initialized) .swiper-slide { --per-view: 3; } }
@media (min-width: 1024px) { .brand-slider:not(.swiper-initialized) .swiper-slide { --per-view: 4; } }
@media (min-width: 1280px) { .brand-slider:not(.swiper-initialized) .swiper-slide { --per-view: 5; } }

/* The banner: one slide at a time. */
.slider-hero:not(.swiper-initialized) .swiper-slide { --per-view: 1; }