/**
 * CHINELATTO — Tema visual pra Glide.js
 * Integra com tokens de design do projeto (var(--accent), var(--surface), etc.)
 * Setas no padrão do lightbox (semitransparente, hover acentua).
 */

/* min-width:0 essencial em layouts flex/grid pais — sem isso o track do Glide
   (width inline calculado) empurra o grid item pra largura gigante (~33M px). */
.chin-carousel{position:relative;padding:0 48px;min-width:0;width:100%;overflow:hidden}
.chin-carousel .glide__track{overflow:hidden}
.chin-carousel .glide__slides{display:flex;list-style:none;padding:6px 0;margin:0}

/* Pre-aplica largura e margens dos slides ANTES do Glide montar (zera CLS).
   Valores espelham o que o Glide aplicaria via inline style com perView/gap das
   breakpoints do init.js — quando Glide monta, sobrescreve com mesmos valores ⇒
   sem shift visual. Crítico pra Core Web Vitals (era CLS ~0.31 antes). */
.chin-carousel .glide__slide{
  flex-shrink:0;height:auto;display:flex;
  width:calc((100% - 54px) / 4);     /* perView=4, gap=18 (54 = 3*gap) */
  margin:0 9px;                       /* gap/2 cada lado */
}
.chin-carousel .glide__slide:first-child{margin-left:0}
.chin-carousel .glide__slide:last-child{margin-right:0}
.chin-carousel .glide__slide > *{width:100%}

@media (max-width: 900px){
  /* perView=2.5, gap=14 (21 = 1.5*gap pra 2.5 slides com 1.5 gaps internos médios) */
  .chin-carousel .glide__slide{width:calc((100% - 21px) / 2.5);margin:0 7px}
}
@media (max-width: 600px){
  /* perView=1.2, gap=10 */
  .chin-carousel .glide__slide{width:calc((100% - 2px) / 1.2);margin:0 5px}
}

/* Setas — estilo lightbox */
.chin-carousel .glide__arrows{pointer-events:none}
.chin-carousel .glide__arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--accent,#C8181E);
  border:1px solid var(--border,#e6e6e6);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;pointer-events:auto;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:background .15s,transform .15s,box-shadow .15s;
  z-index:5;
  padding:0;
}
.chin-carousel .glide__arrow:hover{background:var(--accent,#C8181E);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.chin-carousel .glide__arrow:active{transform:translateY(-50%) scale(.94)}
.chin-carousel .glide__arrow:focus-visible{outline:2px solid var(--accent,#C8181E);outline-offset:2px}
.chin-carousel .glide__arrow svg{width:16px;height:16px;display:block;pointer-events:none}
.chin-carousel .glide__arrow--left{left:5px}
.chin-carousel .glide__arrow--right{right:5px}

/* Em telas pequenas, esconde setas — usuário usa swipe */
@media (max-width: 600px){
  .chin-carousel{padding:0}
  .chin-carousel .glide__arrow{display:none}
}

/* Categoria com 1-3 itens usa a mesma estrutura Glide (type=slider, sem setas) —
   isso garante que o slide width seja calculado pela mesma fórmula do Glide,
   evitando arredondamentos diferentes em viewports não-padrão (ex: celular em
   modo "Desktop site"). Não há mais wrapper .linha-single. */

/* Contador "X/N" — sinaliza posição em carrosséis infinitos (resolve
   confusão de "começou de novo" em mobile quando fotos são parecidas).
   Renderizado como irmão do .chin-carousel dentro de .cat-grupo-titulo,
   .linha-grupo-titulo ou similar. JS em js/carrossel-init.js atualiza on slide change. */
.chin-carousel-counter{
  display:inline-block;font-size:11px;font-weight:700;color:var(--accent,#c8391a);
  background:var(--accent-light,#fdf0ec);border:1px solid var(--accent-light,#fdf0ec);border-radius:10px;
  padding:1px 9px;margin-left:auto;letter-spacing:.3px;font-variant-numeric:tabular-nums;
  white-space:nowrap;line-height:1.6;
}
.cat-grupo-titulo .chin-carousel-counter,
.linha-grupo-titulo .chin-carousel-counter{margin-left:8px}
/* Header do carrossel mobile single-view (categoria.php) — counter alinhado à direita */
.produtos-carrossel-header{display:flex;justify-content:flex-end;padding:0 4px 6px}

html.dark-on .chin-carousel-counter{
  background:rgba(200,57,26,.18);border-color:rgba(200,57,26,.28);color:#f0a690;
}

/* Dark mode */
html.dark-on .chin-carousel .glide__arrow{background:rgba(40,36,32,.92);color:#f0a690;border-color:rgba(255,255,255,.15)}
html.dark-on .chin-carousel .glide__arrow:hover{background:var(--accent,#C8181E);color:#fff}