/* =========================================================
   IO PARFUM — CATEGORIAS HORIZONTAIS v3.8.1
   Sempre mostra cards completos, sem pedaço cortado nas laterais.
   ========================================================= */

#categorias .pa-category-carousel{
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

#categorias .pa-category-carousel__viewport{
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

#categorias .pa-category-carousel .pa-category-grid{
  --pa-cat-visible:6;
  --pa-cat-gap:14px;

  display:flex !important;
  grid-template-columns:none !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;

  width:100% !important;
  max-width:none !important;
  gap:var(--pa-cat-gap) !important;

  margin:0 !important;
  padding:2px 0 8px !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;

  scroll-behavior:smooth !important;
  scroll-snap-type:x mandatory !important;
  overscroll-behavior-x:contain !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  touch-action:pan-x !important;

  box-sizing:border-box !important;
}

#categorias .pa-category-carousel .pa-category-grid::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}

/* Exatamente 6 cards completos no desktop */
#categorias .pa-category-carousel .pa-category{
  position:relative !important;

  flex:0 0 calc(
    (100% - ((var(--pa-cat-visible) - 1) * var(--pa-cat-gap)))
    / var(--pa-cat-visible)
  ) !important;

  width:calc(
    (100% - ((var(--pa-cat-visible) - 1) * var(--pa-cat-gap)))
    / var(--pa-cat-visible)
  ) !important;

  min-width:calc(
    (100% - ((var(--pa-cat-visible) - 1) * var(--pa-cat-gap)))
    / var(--pa-cat-visible)
  ) !important;

  max-width:calc(
    (100% - ((var(--pa-cat-visible) - 1) * var(--pa-cat-gap)))
    / var(--pa-cat-visible)
  ) !important;

  height:198px !important;
  min-height:198px !important;

  aspect-ratio:auto !important;
  margin:0 !important;

  scroll-snap-align:start !important;
  scroll-snap-stop:always !important;

  border-radius:16px !important;
  overflow:hidden !important;

  box-sizing:border-box !important;
}

#categorias .pa-category__label{
  left:14px !important;
  right:14px !important;
  bottom:15px !important;
  font-size:11.5px !important;
  line-height:1.22 !important;
  letter-spacing:.025em !important;
}

/* Setas exatamente sobre a linha externa */
#categorias .pa-category-carousel__arrow{
  position:absolute !important;
  top:50% !important;
  z-index:20 !important;

  width:42px !important;
  height:42px !important;
  min-width:42px !important;

  padding:0 !important;
  margin:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid rgba(197,154,78,.34) !important;
  border-radius:50% !important;

  background:#fff !important;
  color:#8d6841 !important;

  box-shadow:none !important;

  appearance:none !important;
  -webkit-appearance:none !important;

  cursor:pointer !important;
  transition:opacity .2s ease, background .2s ease !important;
}

#categorias .pa-category-carousel__arrow svg{
  display:block !important;
  width:20px !important;
  height:20px !important;
  pointer-events:none !important;
}

/* Metade para fora, metade sobre a borda do card — igual dos dois lados */
#categorias .pa-category-carousel__arrow--prev{
  left:0 !important;
  transform:translate(-50%, -50%) !important;
}

#categorias .pa-category-carousel__arrow--next{
  right:0 !important;
  transform:translate(50%, -50%) !important;
}

#categorias .pa-category-carousel__arrow:hover{
  background:#fffaf4 !important;
}

#categorias .pa-category-carousel__arrow.is-disabled{
  opacity:0 !important;
  pointer-events:none !important;
}

/* Notebook / tablet horizontal: 5 inteiros */
@media(max-width:1100px){
  #categorias .pa-category-carousel .pa-category-grid{
    --pa-cat-visible:5;
    --pa-cat-gap:12px;
  }

  #categorias .pa-category-carousel .pa-category{
    height:184px !important;
    min-height:184px !important;
  }

  #categorias .pa-category-carousel__arrow{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
  }
}

/* Tablet: 4 inteiros */
@media(max-width:850px){
  #categorias .pa-category-carousel .pa-category-grid{
    --pa-cat-visible:4;
    --pa-cat-gap:12px;
  }

  #categorias .pa-category-carousel .pa-category{
    height:172px !important;
    min-height:172px !important;
  }
}

/* Mobile: cerca de 4 visíveis */
@media(max-width:600px){
  #categorias .pa-category-carousel .pa-category-grid{
    --pa-cat-visible:4;
    --pa-cat-gap:8px;
    padding-bottom:6px !important;
  }

  #categorias .pa-category-carousel .pa-category{
    height:138px !important;
    min-height:138px !important;
    border-radius:14px !important;
  }

  #categorias .pa-category__label{
    left:8px !important;
    right:8px !important;
    bottom:10px !important;
    font-size:9.5px !important;
    line-height:1.18 !important;
  }

  #categorias .pa-category-carousel__arrow{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
  }
}

/* Telas bem pequenas: cerca de 3 visíveis para não esmagar */
@media(max-width:420px){
  #categorias .pa-category-carousel .pa-category-grid{
    --pa-cat-visible:3;
    --pa-cat-gap:8px;
  }

  #categorias .pa-category-carousel .pa-category{
    height:132px !important;
    min-height:132px !important;
  }

  #categorias .pa-category__label{
    font-size:9px !important;
  }
}
