/* Isa Beauty - Ténis (catálogo)
   Objetivo: copiar ESPECIFICAMENTE o estilo do catálogo de Perfumes.
   Para evitar duplicação excessiva, reaproveitamos o CSS base e mantemos o escopo dentro de .tenis-context.
*/

@import url('./perfumes.css');

/* botão + / comprar agora herda de perfumes.css (stack) */

/* Ajustes de escopo para aplicar corretamente na página de Ténis */
main[data-category="tenis"].tenis-context {
    padding: 130px 8% 80px 8%;
    background-color: #ffffff;
    min-height: 100vh;
}

main[data-category="tenis"] .catalog-control-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 20px;
    margin-bottom: 40px;
}

main[data-category="tenis"] #catalogGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    width: 100%;
}

@media (max-width: 1024px) {
    main[data-category="tenis"] #catalogGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    /* Anti-overflow / cards quadrados em mobile (2 colunas) */
    main[data-category="tenis"] .product-card-item,
    main[data-category="tenis"] .product-img-wrapper,
    main[data-category="tenis"] .perfume-img-wrapper,
    main[data-category="tenis"] .catalog-product-img,
    main[data-category="tenis"] .catalog-perfume-img {
        width: 100% !important;
        overflow: hidden !important;
        aspect-ratio: 1 / 1 !important;
    }

    main[data-category="tenis"] .product-img-wrapper,
    main[data-category="tenis"] .perfume-img-wrapper {
        height: auto;
    }

    main[data-category="tenis"] .catalog-product-img,
    main[data-category="tenis"] .catalog-perfume-img {
        object-fit: cover !important;
    }
}


@media (max-width: 500px) {
    /* Mantém 2 colunas no mobile (exigência do catálogo) */
    main[data-category="tenis"] #catalogGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        overflow-x: hidden;
    }

    .product-card-item,
    .perfume-card-item {
        min-height: 280px !important;
    }

    .product-img-wrapper,
    .perfume-img-wrapper {
        aspect-ratio: 1 / 1 !important;
        padding: 8px !important;
    }

    .product-meta-info,
    .perfume-meta-info {
        padding: 10px 12px !important;
    }

    .product-hover-actions,
    .perfume-hover-actions {
        gap: 4px !important;
        padding-bottom: 6px !important;
    }

    .btn-product-icon-action,
    .btn-perfume-icon-action,
    .btn-product-add-cart,
    .btn-perfume-add-cart,
    .btn-buy-now-isa,
    .btn-add-to-cart-isa,
    .product-hover-actions a,
    .perfume-hover-actions a {
        height: 36px !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .btn-buy-now-isa {
        width: 75% !important;
        padding: 9px 10px !important;
        font-size: 15px !important;
    }

    .btn-add-to-cart-isa {
        width: 22% !important;
        padding: 8px !important;
    }

    .product-hover-actions a,
    .perfume-hover-actions a {
        width: 40px !important;
        background: #e6b012 !important;
        color: #ffffff !important;
    }

    .btn-buy-now-isa i,
    .btn-add-to-cart-isa i {
        font-size: 16px !important;
    }
}








/* ==========================================select de categrias=========================== */
.menu-select-isa {
    background: transparent;
    color: #D4AF37;
    border: none;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    font-family: 'Inter', sans-serif;
    transition: color 0.3s ease, background-image 0.3s ease;
    
    /* 1. TRAVA DE LARGURA SÊNIOR (Resolve o problema de esticar visto no print) */
    width: auto;
    max-width: 125px; /* Força o select a não ocupar mais do que o tamanho da palavra + seta */
    display: inline-block;
    
    /* 2. Ajuste fino de respiro */
    padding: 0 18px 0 0; 
    
    /* 3. Remove as setas padrão do sistema de vez */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Remove a seta nativa especificamente no Internet Explorer/Edge antigo se houver resquício */
.menu-select-isa::-ms-expand {
    display: none;
}

.menu-select-isa {
    /* 4. Reinjeta o nosso SVG dourado colado à direita do bloco reduzido */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right center;
}

.menu-select-isa:hover {
    color: #ffffff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
}

/* Garante que o fundo das opções combine com o header preto de luxo */
.menu-select-isa option {
    background-color: #000000;
    color: #ffffff;
    font-size: 15px;
}

.menu-select-isa option:disabled {
    color: #888888;
}

/* ===================================================================================
   FOOTER LUXURY (RODAPÉ)
   =================================================================================== */
.footer-isa {
    width: 100%;
    background: linear-gradient(to right, #ebd490 0%, #a38132 30%, #543f0e 50%, #a38132 70%, #ebd490 100%);
    position: relative;
    font-family: 'Inter', sans-serif;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 8% 50px 8%;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-brand-block {
    gap: 25px;
}

.footer-logo-wrapper {
    max-width: 180px;
    background-color: #000000;
    padding: 12px 20px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.footer-logo-img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.footer-title {
    color: #E2C034;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.footer-text {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 8px;
}

.font-whatsapp {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-list li {
    margin-bottom: 10px;
}

.footer-links-list a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.25s ease, transform 0.25s ease;
    display: inline-block;
}

.footer-links-list a:hover {
    color: #E2C034;
    transform: translateX(4px);
}

.footer-social-section {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 0 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    text-align: center !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.footer-social-section .footer-title {
    color: #ffffff;
}

.footer-social-section .footer-text {
    color: rgba(255, 255, 255, 0.95);
}

.footer-social-links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
}

.footer-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.footer-social-links a:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.footer-social-links a i {
    font-size: 18px;
}

.footer-admin-link {
    opacity: 0.28;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.footer-admin-link a {
    color: #ffffff;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-admin-link:hover {
    opacity: 1;
    transform: translateX(4px);
}

.footer-bottom-bar {
    background-color: #000000;
    width: 100%;
    padding: 18px 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom-bar p {
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin: 0;
}

@media (max-width: 1024px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
        padding: 50px 5%;
    }
}

@media (max-width: 600px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 40px 25px;
        text-align: left;
    }

    .footer-links-list a:hover {
        transform: translateX(0);
    }
}