/**
 * Printeez embed grid⇄slider chrome — shared by the Category Products and
 * Categories blocks. Loaded only alongside grid-slider.js (enqueued when a
 * block instance selects a slider layout). The .ps-grid-slider element is
 * inserted INSIDE the embed root, so the embed's scoped skin tokens (RGB
 * triplets) are in scope.
 */

.ps-grid-slider {
  /* Swiper's built-in chrome (nav arrows, pagination dots) themes from this. */
  --swiper-theme-color: rgb(var(--color-fill, 31 41 55));
}

/* grid-slider.js parks the grid behind `hidden` while the slider is
   mounted. The UA's `[hidden] { display: none }` LOSES to the embed CSS's
   author-level `display: grid` rules (scope-prefixed, so their specificity
   isn't ours to undercut) — this override, scoped to the slider wrappers,
   is what actually hides it. */
[data-ps-layout-mobile] .product-grid[hidden],
[data-ps-layout-desktop] .product-grid[hidden],
[data-ps-layout-mobile] .categories-grid[hidden],
[data-ps-layout-desktop] .categories-grid[hidden] {
  display: none !important;
}

/* Cards keep their natural height (Swiper's default stretches slides). */
.ps-grid-slider .swiper-slide {
  height: auto;
}

/* Optional dot navigation renders BELOW the cards in flow — Swiper's
   default absolute-bottom placement would overlap them. */
.ps-grid-slider .swiper-pagination {
  position: static;
  margin-top: 0.75rem;
}

/* Mobile relies on the peeked next card (and the dots, when enabled) to
   invite swiping — no arrows. From 640px (the embed grid CSS's 40rem
   boundary) mouse users get them. */
.ps-grid-slider .swiper-button-prev,
.ps-grid-slider .swiper-button-next {
  display: none;
}

@media (min-width: 640px) {
  .ps-grid-slider .swiper-button-prev,
  .ps-grid-slider .swiper-button-next {
    display: flex;
  }
}