/* ==================== ZIP3 - Comparador de Produtos (teste) ====================
   Checkbox "Comparar" em cada card de produto (canto superior esquerdo, ao
   lado oposto do coracao de favoritos), uma barra fixa no topo da pagina
   (logo abaixo do menu) que aparece com 2+ produtos selecionados, e um modal
   com a tabela comparativa lado a lado. Tudo em sessionStorage (nao precisa
   ficar salvo entre visitas, e uma decisao do momento). */

.zip3-cmp-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 4;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #FF5C26;
    background: rgba(255, 255, 255, 0.95);
    color: #ADADAD;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: transform .2s ease, color .2s ease, background-color .2s ease;
}

.zip3-cmp-btn:hover {
    transform: scale(1.1);
}

.zip3-cmp-btn.is-active {
    background: #FF5C26;
    color: #FFFFFF;
}

.zip3-cmp-btn.is-disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Barra "sticky" encaixada logo depois do menu (.z3m-nav-wrap) no DOM -
   gruda no topo (embaixo do menu, que tambem e sticky) automaticamente via
   CSS nativo, sem precisar recalcular posicao a cada scroll via JS. */
.zip3-cmp-bar {
    position: sticky;
    left: 0;
    right: 0;
    z-index: 1015;
    background: #1B1714;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
    flex-wrap: wrap;
    text-align: center;
}

.zip3-cmp-bar.is-visible {
    max-height: 80px;
    opacity: 1;
    padding: 12px 20px;
}

.zip3-cmp-bar-text {
    font-size: 14px;
    font-weight: 600;
}

.zip3-cmp-bar-text strong {
    color: #FF5C26;
}

.zip3-cmp-bar-btn {
    background: #FF5C26;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 8px 22px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background-color .2s ease;
}

.zip3-cmp-bar-btn:hover {
    background: #E14D18;
}

.zip3-cmp-bar-btn:disabled {
    background: #6B6B6B;
    cursor: not-allowed;
}

.zip3-cmp-bar-clear {
    background: none;
    border: none;
    color: #BBBBBB;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.zip3-cmp-bar-clear:hover {
    color: #FFFFFF;
}

/* Modal com a tabela comparativa */
.zip3-cmp-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}

.zip3-cmp-modal-backdrop.is-open {
    display: flex;
}

.zip3-cmp-modal {
    background: #FFFFFF;
    border-radius: 14px;
    width: 100%;
    max-width: 960px;
    padding: 24px;
    position: relative;
}

.zip3-cmp-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: #F1F1F1;
    color: #333333;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zip3-cmp-modal-close:hover {
    background: #FF5C26;
    color: #FFFFFF;
}

.zip3-cmp-modal h5 {
    margin: 0 0 20px;
    text-transform: uppercase;
    font-weight: 700;
    padding-right: 40px;
}

.zip3-cmp-table-wrap {
    overflow-x: auto;
}

.zip3-cmp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px 0;
    table-layout: fixed;
}

.zip3-cmp-table th,
.zip3-cmp-table td {
    width: 220px;
    min-width: 220px;
    text-align: center;
    vertical-align: top;
    padding: 10px 6px;
}

.zip3-cmp-table .zip3-cmp-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.zip3-cmp-table .zip3-cmp-title {
    font-weight: 700;
    font-size: 13px;
    margin-top: 10px;
    display: block;
    min-height: 36px;
}

.zip3-cmp-table .zip3-cmp-badge {
    width: 100%;
    max-width: 160px;
    border-radius: 6px;
    margin: 8px auto 0;
    display: block;
}

.zip3-cmp-table .zip3-cmp-cta {
    display: inline-block;
    margin-top: 12px;
    background: #FF5C26;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
}

.zip3-cmp-table .zip3-cmp-cta:hover {
    background: #E14D18;
    color: #FFFFFF;
}

.zip3-cmp-table .zip3-cmp-remove {
    display: block;
    margin: 8px auto 0;
    background: none;
    border: none;
    color: #999999;
    font-size: 11px;
    text-decoration: underline;
    cursor: pointer;
}

.zip3-cmp-table .zip3-cmp-remove:hover {
    color: #FF5C26;
}

@media (max-width: 767px) {
    .zip3-cmp-bar {
        gap: 10px;
        padding: 10px 14px;
    }
    .zip3-cmp-bar-text {
        font-size: 12px;
        width: 100%;
    }
}