@import url("style.6da5360a9f55.css");

/* * {
    border: 1px dashed red;
} */

/* SECTION */

/* Define altura fixa e corte proporcional */
.card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s ease;
    border-radius: 10px;
}

.card-img-top:hover {
    /* transform: scale(1.04); */
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
}

.card-img-container {
    padding: 16px;
    overflow: hidden;
    height: 300px; /* ajuste como quiser */
    object-fit: contain;
}

/* Faz todos os cards terem mesma altura */
.card {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all .3s ease;
    overflow: hidden;
    border-radius: 16px;
    /* border: 1px solid var(--gris); */
}

.card:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* Mantém o título na parte de baixo */
.card-body {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column ;
    /* border: 1px solid var(--gris); */
}

.swiper-slide {
    height: auto;
}

/* Garante que o container do Swiper seja relativo */
.swiper {
    position: relative;
    padding: 25px 15px;
}

/* wrapper para posicionar setas fora */
.slider-outer {
    position: relative;
    display: flex;
    align-items: center;
}

/* setas externas */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-40%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    cursor:pointer;
    z-index:5;
    transition: all .3s ease;
}
.nav-prev { 
    left:-45px; 
}

.nav-next { 
    right:-45px; 
}

.nav-arrow:hover {
    background:#f8f8f8;
}
.nav-prev:hover {
    left:-50px;
}
.nav-next:hover {
    right:-50px;
}

/* chevrons em CSS puro */
.nav-arrow::before {
    content:'';
    display:block;
    width:10px;
    height:10px;
    margin:auto;
    border-top:2px solid gray;
    border-right:2px solid gray;
    transform:rotate(45deg) translate(-10%, 20%);
}
.nav-prev::before { 
    transform:rotate(-135deg) translate(-10%, 20%);
}

.swiper-container .nav-arrow::before{
    border-color: var(--vert) !important;
}


@media (max-width:576px) {
  .nav-arrow { display: none; }
  .card-img-top { height: 200px; }
}

/* CATEGORY */
/* Modal mais "arejado" e com proporção confortável */
.modal-content {
  border-radius: 12px;
  overflow: hidden;
}

/* Modal em layout flex: body cresce, footer fica no fundo */
.qv-modal { display:flex; flex-direction:column; border-radius:14px; }
.qv-body { flex:1 1 auto; overflow:auto; padding-top:0; }

/* Footer fixo como link */
.qv-link {
  display:block; text-align:center; text-decoration:none;
  font-weight:600;
  padding:12px 16px; border-radius:8px;
  border:1px solid #198754; /* verde do seu tema */
}
.qv-link:hover { background:#19875410; }

/* Imagem responsiva com crop */
.qv-img-wrap { width:100%; aspect-ratio: 4 / 3; border-radius:12px; overflow:hidden; }
.qv-img { width:100%; height:100%; object-fit:cover; display:block; }

/* Tipografia */
.qv-title { font-weight:700; line-height:1.2; }
.qv-price { font-weight:700; }

/* Swiper: setas e paginação */
.qv-nav {
  width:38px; height:38px;
  border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.qv-nav::after { font-size:16px; color:#333; }
.qv-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
  width:8px; height:8px; opacity:.5;
}
.qv-swiper .swiper-pagination-bullet-active { opacity:1; }

/* Mobile: dá respiro e empilha melhor */