/* COLLAB Vitrine
   ------------------------------------------------------------------
   A marcação dos cards vem do JetEngine (.jet-listing-grid__items /
   .jet-listing-grid__item). Aqui a gente assume o controle da grade,
   do espaçamento e do carrossel.
   ------------------------------------------------------------------ */

.cv-vitrine {
    --cv-cols: var(--cv-cols-d, 4);
    --cv-gap: var(--cv-gap-d, 20px);
    --cv-line: currentColor;
    --cv-nav-bg: #0E1A2B;
    --cv-nav-icon: #ffffff;
    --cv-nav-size: 40px;
    --cv-dot: #0E1A2B;

    position: relative;
    width: 100%;
}

/* box-sizing só nos elementos da vitrine. Uma regra universal aqui vazava
   para dentro do card e mexia no que o Listing Item desenha. */
.cv-vitrine,
.cv-head,
.cv-title,
.cv-all,
.cv-body,
.cv-nav,
.cv-pag,
.cv-notice { box-sizing: border-box; }

@media (max-width: 1024px) {
    .cv-vitrine { --cv-cols: var(--cv-cols-t, 3); --cv-gap: var(--cv-gap-t, 16px); }
}

@media (max-width: 767px) {
    .cv-vitrine { --cv-cols: var(--cv-cols-m, 2); --cv-gap: var(--cv-gap-m, 12px); }
}

/* ---------------------------------------------------------------- */
/* Cabeçalho                                                         */
/* ---------------------------------------------------------------- */

.cv-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.cv-align-center .cv-head { flex-direction: column; text-align: center; }
.cv-align-left .cv-head { justify-content: space-between; }

.cv-title {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 0;
    line-height: 1.2;
}

.cv-align-left .cv-title { width: auto; }

.cv-title-lines::before,
.cv-title-lines::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--cv-line);
    border-radius: 2px;
}

.cv-align-left .cv-title-lines::before,
.cv-align-left .cv-title-lines::after { display: none; }

.cv-title > span { flex: none; }

.cv-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    transition: gap .2s ease;
}

.cv-all:hover { gap: 10px; }

/* ---------------------------------------------------------------- */
/* Grade                                                             */
/* ---------------------------------------------------------------- */

.cv-body { position: relative; }

.cv-vitrine .jet-listing-grid,
.cv-vitrine .jet-listing-grid__items { width: 100%; margin: 0; }

.cv-vitrine:not(.cv-has-carousel) .jet-listing-grid__items {
    display: grid;
    grid-template-columns: repeat(var(--cv-cols), minmax(0, 1fr));
    gap: var(--cv-gap);
}

/* Na grade, a largura do card vem das colunas do CSS grid. */
.cv-vitrine:not(.cv-has-carousel) .jet-listing-grid__item {
    width: auto !important;
    max-width: none !important;
    flex: initial;
}

.cv-vitrine .jet-listing-grid__item {
    min-width: 0;
    padding: 0 !important;
}

.cv-vitrine:not(.cv-has-carousel) .jet-listing-grid__item { margin: 0 !important; }

/* A altura igual dos cards fica por conta da opção do próprio JetEngine:
   forçar display/width aqui alterava a montagem interna do card. */

/* ---------------------------------------------------------------- */
/* Imagem do card — proporção fixa                                   */
/* ---------------------------------------------------------------- */

/* A regra que aplica a proporção sai no <style> do próprio bloco, porque o
   seletor da imagem muda conforme a opção "Onde aplicar". Aqui ficam só os
   ajustes de estrutura que valem para qualquer caso: sem eles o link ou o
   wrapper da imagem continua sendo inline e sobra um respiro embaixo. */

.cv-img-preset .jet-listing-dynamic-image,
.cv-img-preset .jet-listing-dynamic-image > a,
.cv-img-preset .elementor-widget-image a,
.cv-img-preset .woocommerce-loop-product__link > img {
    display: block;
}

.cv-img-preset .jet-listing-dynamic-image > a { line-height: 0; }

/* Qualquer imagem marcada com esta classe no Listing Item fica de fora do
   preset — útil para selo de promoção, bandeira e logo de marca. */
.cv-img-preset img.cv-skip-ratio {
    aspect-ratio: auto !important;
    height: auto !important;
    object-fit: fill !important;
    padding: 0 !important;
}

/* ---------------------------------------------------------------- */
/* Carrossel                                                         */
/* ---------------------------------------------------------------- */

/* O Swiper roda sobre a marcação do JetEngine: o JS marca .jet-listing-grid
   como container e adiciona as classes que o CSS do Swiper espera. */

.cv-has-carousel .jet-listing-grid__items {
    flex-wrap: nowrap !important;
    margin: 0 !important;
    grid-template-columns: none !important;
}

/* No carrossel, margin-right é o espaçamento entre cards e quem define é o
   Swiper, inline. Só as outras margens são zeradas. */
.cv-has-carousel .jet-listing-grid__item {
    max-width: none !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
}

/* A largura do card é calculada aqui, e o Swiper roda em slidesPerView: 'auto'
   apenas lendo esse valor. Assim o card mede o mesmo antes e depois de
   inicializar, e nunca sobra card cortado na borda. */
.cv-has-carousel .jet-listing-grid__item {
    flex: 0 0 auto;
    width: calc((100% - (var(--cv-cols) - 1) * var(--cv-gap)) / var(--cv-cols)) !important;
}

.cv-has-carousel .jet-listing-grid:not(.swiper-initialized) .jet-listing-grid__items {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: var(--cv-gap);
}

/* Depois de inicializado o espaço entre cards é o spaceBetween do Swiper. */
.cv-has-carousel .jet-listing-grid.swiper-initialized .jet-listing-grid__items { gap: 0 !important; }

/* As setas são <button>: muitos temas e kits do Elementor pintam todo button
   com a cor primária deles. As declarações abaixo usam !important sobre
   variáveis, então os controles de cor do widget continuam mandando. */

.cv-vitrine .cv-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cv-nav-size) !important;
    height: var(--cv-nav-size) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%);
    border: 0 !important;
    border-radius: var(--cv-nav-radius, 999px) !important;
    background-color: var(--cv-nav-bg) !important;
    background-image: none !important;
    box-shadow: var(--cv-nav-shadow, 0 4px 14px rgba(14, 26, 43, .18)) !important;
    line-height: 1 !important;
    text-decoration: none;
    cursor: pointer;
    opacity: .95;
    -webkit-appearance: none;
    appearance: none;
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}

.cv-vitrine .cv-nav:hover,
.cv-vitrine .cv-nav:focus {
    opacity: 1;
    background-color: var(--cv-nav-bg-hover, var(--cv-nav-bg)) !important;
}

.cv-vitrine .cv-nav:hover { transform: translateY(-50%) scale(1.06); }
.cv-vitrine .cv-nav:focus-visible { outline: 3px solid rgba(15, 163, 107, .45); outline-offset: 2px; }

.cv-vitrine .cv-prev { left: 0; }
.cv-vitrine .cv-next { right: 0; }
.cv-vitrine .cv-nav.is-hidden { display: none; }

.cv-vitrine .cv-nav svg {
    width: 45%;
    height: 45%;
    fill: none;
    stroke: var(--cv-nav-icon);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .2s ease;
}

.cv-vitrine .cv-nav:hover svg { stroke: var(--cv-nav-icon-hover, var(--cv-nav-icon)); }

/* Posição das setas */
.cv-nav-inside .cv-prev  { left: var(--cv-nav-offset, 0px); }
.cv-nav-inside .cv-next  { right: var(--cv-nav-offset, 0px); }

/* Metade para dentro, metade para fora — encostadas na borda dos cards. */
.cv-nav-edge .cv-prev { left: calc((var(--cv-nav-size) / -2) - var(--cv-nav-offset, 0px)); }
.cv-nav-edge .cv-next { right: calc((var(--cv-nav-size) / -2) - var(--cv-nav-offset, 0px)); }

/* Totalmente fora, com respiro reservado. */
.cv-nav-outside .cv-body { padding-left: calc(var(--cv-nav-size) + 10px); padding-right: calc(var(--cv-nav-size) + 10px); }
.cv-nav-outside .cv-prev { left: var(--cv-nav-offset, 0px); }
.cv-nav-outside .cv-next { right: var(--cv-nav-offset, 0px); }

.cv-nav-flat { --cv-nav-shadow: none; }

.cv-vitrine .cv-pag {
    position: static;
    margin-top: 16px;
    line-height: 0;
    text-align: center;
}

.cv-vitrine .cv-pag .swiper-pagination-bullet {
    width: var(--cv-dot-size, 8px);
    height: var(--cv-dot-size, 8px);
    margin: 0 4px !important;
    background: var(--cv-dot) !important;
    opacity: .3;
    transition: opacity .2s ease, width .2s ease;
}

.cv-vitrine .cv-pag .swiper-pagination-bullet-active {
    opacity: 1;
    width: calc(var(--cv-dot-size, 8px) * 2.6);
    border-radius: 999px;
    background: var(--cv-dot-active, var(--cv-dot)) !important;
}

@media (max-width: 767px) {
    .cv-vitrine { --cv-nav-size: 32px; }
    .cv-head { margin-bottom: 16px; }
}

/* ---------------------------------------------------------------- */
/* Avisos                                                            */
/* ---------------------------------------------------------------- */

.cv-notice {
    padding: 22px 20px;
    border: 1px dashed #C4CEDC;
    border-radius: 10px;
    background: #F4F6FA;
    color: #6B7A90;
    text-align: center;
    font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .cv-nav, .cv-all, .cv-pag .swiper-pagination-bullet {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}