/**
 * Purific Blocks: shared card slider (front end and editor).
 *
 * Registered by blocks.php as the style 'purific-blocks-card-slider'.
 * Behaviour: shared/card-slider.js. The cards themselves are styled by
 * the block that uses the slider; this file lays out the row, the dots,
 * the pause button and the arrows (look of the theme's Product Carousel
 * arrows, with its own class names).
 *
 * The block's outer element clips (overflow:hidden) and its content box
 * is narrower, so the next card peeks in up to the screen edge.
 */
.pf-card-slider__viewport{
  position:relative;
  /* Before the script runs (or without it) the row scrolls sideways. */
  overflow-x:auto;scrollbar-width:none;
}
.pf-card-slider__viewport::-webkit-scrollbar{display:none}
.is-ready .pf-card-slider__viewport{overflow:visible}

.pf-card-slider__track{
  position:relative;
  display:flex;flex-wrap:nowrap;align-items:stretch;gap:var(--pf-s5);
  margin:0;padding:0;
}
.is-ready .pf-card-slider__track{
  transition:transform .45s var(--pf-ease);
  touch-action:pan-y;cursor:grab;
  -webkit-user-select:none;user-select:none;
}
.pf-card-slider__track.is-dragging{cursor:grabbing}
.pf-card-slider__track > *{flex:none}
.pf-card-slider__track img{-webkit-user-drag:none}

/* ---------- Controls: pause + dots on the left, arrows on the right ---------- */
.pf-card-slider__controls{
  display:flex;align-items:center;justify-content:space-between;gap:var(--pf-s5);
  margin-top:var(--pf-s7);
}
.pf-card-slider__controls[hidden]{display:none}
.pf-card-slider__left{display:flex;align-items:center;gap:var(--pf-s3);min-width:0}

.pf-card-slider__dots{display:flex;flex-wrap:wrap;align-items:center;gap:var(--pf-s1)}
.pf-card-slider .pf-card-slider__dot{
  display:grid;place-items:center;width:24px;height:24px;padding:0;
  border:0;background:none;cursor:pointer;
  transition:width .3s var(--pf-ease);
}
.pf-card-slider__dot span{
  display:block;width:8px;height:8px;border-radius:999px;background:var(--pf-line);
  transition:width .3s var(--pf-ease),background .3s var(--pf-ease);
}
.pf-card-slider .pf-card-slider__dot[aria-current="true"]{width:40px}
.pf-card-slider__dot[aria-current="true"] span{width:32px;background:var(--pf-text)}
.pf-card-slider__dot:focus-visible{outline:2px solid var(--pf-text);outline-offset:2px;border-radius:999px}

.pf-card-slider .pf-card-slider__pause,
.pf-card-slider .pf-card-slider__arrow{
  display:grid;place-items:center;
  width:36px;height:36px;padding:0;
  border:1px solid var(--pf-line);border-radius:50%;
  background:none;color:inherit;cursor:pointer;
  transition:background .15s var(--pf-ease),opacity .15s var(--pf-ease);
}
.pf-card-slider__pause[hidden]{display:none}
.pf-card-slider__pause svg,
.pf-card-slider__arrow svg{width:15px;height:15px}
.pf-card-slider__pause svg{fill:currentColor}
.pf-card-slider__arrow svg{fill:none;stroke:currentColor;stroke-width:2}
.pf-card-slider__pause .is-play{display:none}
.pf-card-slider__pause.is-paused .is-play{display:block}
.pf-card-slider__pause.is-paused .is-pause{display:none}
.pf-card-slider .pf-card-slider__arrow[disabled]{opacity:.35;cursor:default}
.pf-card-slider__pause:focus-visible,
.pf-card-slider__arrow:focus-visible{outline:2px solid var(--pf-text);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .pf-card-slider__pause:hover,
  .pf-card-slider__arrow:not([disabled]):hover{background:var(--pf-hover)}
}

.pf-card-slider__nav{display:flex;gap:var(--pf-s2);margin-left:auto}

/* ---------- Smaller screens ---------- */
@media (max-width:900px){
  .pf-card-slider__controls{margin-top:var(--pf-s6)}
}
@media (max-width:520px){
  .pf-card-slider__track{gap:var(--pf-s4)}
  .pf-card-slider .pf-card-slider__dot{width:16px}
  .pf-card-slider .pf-card-slider__dot[aria-current="true"]{width:28px}
  .pf-card-slider__dot[aria-current="true"] span{width:20px}
}

@media (prefers-reduced-motion:reduce){
  .is-ready .pf-card-slider__track,
  .pf-card-slider__dot,
  .pf-card-slider__dot span{transition:none}
}