@import url("styles.css");

/* Estilos específicos para a página "Ver todos os produtos" */
/* Início: carrossel de cards (modo horizontal) */
.carousel-wrapper{display:flex; flex-direction:column; gap:12px}
#vermaisCarousel{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 18px 8px; scroll-behavior:smooth; touch-action:pan-x; overscroll-behavior-inline:contain;}
#vermaisCarousel::-webkit-scrollbar{display:none}
#vermaisCarousel .card{min-width:280px; max-width:280px; flex:0 0 auto; scroll-snap-align:start; scroll-snap-stop:always; overflow:hidden; border-radius:12px;}
#vermaisCarousel .card-media{aspect-ratio:16/9; display:grid; place-items:center; background:radial-gradient(800px 200px at -10% 0%, rgba(25, 31, 105, 0.575), transparent 50%), linear-gradient(135deg, rgba(155, 189, 2, 0.3), rgba(56, 83, 151, 0.699)); overflow:hidden;}
#vermaisCarousel .card-media img{width:100% !important; height:100% !important; object-fit:cover; border-radius:0;}

@media (min-width: 1200px) {
  #vermaisCarousel .card {
    min-width: calc((100% - 42px) / 4);
    max-width: calc((100% - 42px) / 4);
    flex: 0 0 calc((100% - 42px) / 4);
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  #vermaisCarousel .card {
    min-width: calc((100% - 28px) / 3);
    max-width: calc((100% - 28px) / 3);
    flex: 0 0 calc((100% - 28px) / 3);
  }
}

@media (max-width: 899px) {
  #vermaisCarousel .card {
    min-width: calc((100% - 21px) / 2);
    max-width: calc((100% - 21px) / 2);
    flex: 0 0 calc((100% - 21px) / 2);
  }
}
/* Fim: carrossel de cards */

.grid { overflow-x: hidden; }
.button-group { display: flex; gap: 10px; }
.card-body{padding:16px}
.pill{display:inline-flex; align-items:center; gap:10px; font-size:.8rem; color:#09bcdb; background:rgba(64, 64, 117, 0.973); border:1px solid rgb(141, 156, 185); padding:6px 10px; border-radius:999px; font-weight:700;}
.carousel-controls{display:flex; justify-content:center; gap:12px; margin-top:4px}
.carousel-btn{border:1px solid rgba(255,255,255,.2); color:#fff; background:#0b1220; border-radius:10px; padding:8px 12px; cursor:pointer; font-size:1.1rem}
.carousel-btn:hover{background:#172940}