/* =====================================================
   SLIDER DE PRODUTOS — donacoelha.com
   PEEK: só aplica a sliders com card de produto (.product-small).
   Sliders de outro conteúdo (ex.: "últimos posts" da home) usam
   a mesma estrutura row-slider/slider-nav-outside e NÃO podem
   ser afetados — daí o :has(.product-small) em cada regra de peek.
   SETAS: estilo, posição e ocultar-quando-disabled aplicam a
   TODO row-slider.slider-nav-outside (produto ou não) — isso é
   intencional, é o padrão visual de navegação do site inteiro.
   ===================================================== */

/* ── PEEK: Mobile (< 550px) — fator 0.88 ── */
.row-slider.slider-nav-outside.small-columns-2:has(.product-small) .col,
.row-slider.slider-nav-outside.small-columns-2:has(.product-small) .flickity-slider > .col {
  flex-basis: calc(100%/2*0.88) !important; /* 44% */
  max-width: calc(100%/2*0.88) !important;
}
.row-slider.slider-nav-outside.small-columns-3:has(.product-small) .col,
.row-slider.slider-nav-outside.small-columns-3:has(.product-small) .flickity-slider > .col {
  flex-basis: calc(100%/3*0.88) !important; /* ~29,3% */
  max-width: calc(100%/3*0.88) !important;
}

/* ── PEEK: Tablet (550–849px) — fator 0.90 ── */
@media screen and (min-width: 550px) and (max-width: 849px) {
  .row-slider.slider-nav-outside.medium-columns-2:has(.product-small) .col,
  .row-slider.slider-nav-outside.medium-columns-2:has(.product-small) .flickity-slider > .col {
    flex-basis: calc(100%/2*0.9) !important; /* 45% */
    max-width: calc(100%/2*0.9) !important;
  }
  .row-slider.slider-nav-outside.medium-columns-3:has(.product-small) .col,
  .row-slider.slider-nav-outside.medium-columns-3:has(.product-small) .flickity-slider > .col {
    flex-basis: calc(100%/3*0.9) !important; /* 30% */
    max-width: calc(100%/3*0.9) !important;
  }
  .row-slider.slider-nav-outside.medium-columns-4:has(.product-small) .col,
  .row-slider.slider-nav-outside.medium-columns-4:has(.product-small) .flickity-slider > .col {
    flex-basis: calc(100%/4*0.9) !important; /* 22,5% — corrige a vitrine 2, hoje sem cobertura */
    max-width: calc(100%/4*0.9) !important;
  }
}

/* ── PEEK: Desktop (≥ 850px) — fator 0.90 ── */
@media screen and (min-width: 850px) {
  .row-slider.slider-nav-outside.large-columns-3:has(.product-small) .col,
  .row-slider.slider-nav-outside.large-columns-3:has(.product-small) .flickity-slider > .col {
    flex-basis: calc(100%/3*0.9) !important; /* 30% */
    max-width: calc(100%/3*0.9) !important;
  }
  .row-slider.slider-nav-outside.large-columns-4:has(.product-small) .col,
  .row-slider.slider-nav-outside.large-columns-4:has(.product-small) .flickity-slider > .col {
    flex-basis: calc(100%/4*0.9) !important; /* 22,5% */
    max-width: calc(100%/4*0.9) !important;
  }
  .row-slider.slider-nav-outside.large-columns-5:has(.product-small) .col,
  .row-slider.slider-nav-outside.large-columns-5:has(.product-small) .flickity-slider > .col {
    flex-basis: calc(100%/5*0.9) !important; /* 18% */
    max-width: calc(100%/5*0.9) !important;
  }
  .row-slider.slider-nav-outside.large-columns-6:has(.product-small) .col,
  .row-slider.slider-nav-outside.large-columns-6:has(.product-small) .flickity-slider > .col {
    flex-basis: calc(100%/6*0.9) !important; /* 15% */
    max-width: calc(100%/6*0.9) !important;
  }
}

/* ── SETAS: estilo visual — todo row-slider ── */
.row-slider.flickity-enabled .flickity-button {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgb(255, 102, 102) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  opacity: 1 !important;
}

.row-slider.flickity-enabled .flickity-button:hover {
  background: rgb(220, 70, 70) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

.row-slider.flickity-enabled .flickity-button-icon,
.row-slider.flickity-enabled .flickity-button svg path {
  fill: #ffffff !important;
}

@media screen and (max-width: 549px) {
  .row-slider.flickity-enabled .flickity-button {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ── SETAS: posição padrão — apenas slider-nav-outside (homepage/categoria) ── */
/* O slider-nav-reveal (produtos relacionados) mantém posição do tema */
.row-slider.slider-nav-outside.flickity-enabled .flickity-button.previous {
  left: 0 !important;
  right: auto !important;
  z-index: 10 !important;
}

.row-slider.slider-nav-outside.flickity-enabled .flickity-button.next {
  right: 0 !important;
  left: auto !important;
  z-index: 10 !important;
}

/* ── SETAS: ocultar quando desabilitada (sem mais itens pra rolar e sem infinite scroll) ── */
.row-slider.slider-nav-outside.flickity-enabled .flickity-button:disabled {
  display: none !important;
}

/* ── SETAS desktop: reposiciona na altura da imagem ── */
@media screen and (min-width: 850px) {
  .row-slider.slider-nav-outside.flickity-enabled .flickity-button {
    top: 240px !important;
    transform: translateY(-50%) !important;
  }
  .row-slider.slider-nav-outside.flickity-enabled .flickity-button.previous {
    left: -20px !important;
    right: auto !important;
    z-index: 10 !important;
  }
  .row-slider.slider-nav-outside.flickity-enabled .flickity-button.next {
    right: -20px !important;
    left: auto !important;
    z-index: 10 !important;
  }
}