/* Слайдер картинок карточки: кликабельные точки (низ фото) + стрелки. Только для карточек с >1 фото. */

/* ВАЖНО: НЕ задавать position у .product-item-image-wrapper — у обёртки нет высоты,
   слайды (absolute) схлопнутся в 0 и картинки исчезнут. Стрелки/точки и так
   позиционируются от настоящего блока картинки (как нативные индикаторы темы). */

/* --- ТОЧКИ (число = число фото) --- */
.product-item-image-wrapper.cardslider-ready .product-item-image-slider-control-container{
  display:flex !important;
  top:auto !important;
  bottom:8px;
  left:0; right:0;
  width:auto;
  padding:0 10px;
  gap:6px;
  z-index:17;
  justify-content:center;
  pointer-events:auto;        /* точки кликабельны */
}
.product-item-image-wrapper.cardslider-ready .product-item-image-slider-control{
  width:7px; height:7px;
  max-width:7px;              /* перебиваем width:100% из темы */
  margin:0 !important;
  border-radius:50%;
  background-color:rgba(255,255,255,.65);
  box-shadow:0 0 2px rgba(0,0,0,.35);
  cursor:pointer;
  transition:background-color .2s, transform .2s;
}
.product-item-image-wrapper.cardslider-ready .product-item-image-slider-control:hover{transform:scale(1.25)}
.product-item-image-wrapper.cardslider-ready .product-item-image-slider-control.active{
  background-color:#5262A6;
  box-shadow:0 0 2px rgba(0,0,0,.45);
}

/* --- СТРЕЛКИ ‹ › --- */
.cardslider-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:18;
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  padding:0; margin:0; border:none; border-radius:50%;
  background:rgba(255,255,255,.78);
  color:#3D4158; font-size:22px; line-height:1; font-family:Montserrat,Arial,sans-serif;
  cursor:pointer;
  box-shadow:0 1px 5px rgba(0,0,0,.2);
  opacity:.55; transition:opacity .2s, background-color .2s;
  -webkit-tap-highlight-color:transparent;
}
.cardslider-arrow--prev{left:6px}
.cardslider-arrow--next{right:6px}
.cardslider-arrow:hover{opacity:1; background:#fff}
.product-item-image-wrapper.cardslider-ready:hover .cardslider-arrow{opacity:.95}
@media (hover:none){ .cardslider-arrow{opacity:.85} } /* на тач — видны сразу */

@media (max-width:600px){
  .cardslider-arrow{width:26px;height:26px;font-size:19px}
  .product-item-image-wrapper.cardslider-ready .product-item-image-slider-control{width:8px;height:8px;max-width:8px}
}