/* ===== FIXES PROFESIONALES GLOBALES PARA TODOS LOS DISEÑOS DE CATÁLOGO ===== */
/* Responsive, botones de carrito, alturas de cards y header */

/* --- Cards: altura automática en layouts premium --- */
body[class*="catalog-style-"] .product-card[class*="-showcase-card"],
body[class*="catalog-style-"] .product-card[class*="-minimal-card"],
body[class*="catalog-style-"] .product-card[class*="-overlay-card"],
body[class*="catalog-style-"] .product-card[class*="-row-card"],
body[class*="catalog-style-"] .product-card[class*="-bento-card"],
body[class*="catalog-style-"] .product-card[class*="-masonry-card"],
body[class*="catalog-style-"] .product-card[class*="-compact-card"],
body[class*="catalog-style-"] .product-card[class*="-list-card"],
body[class*="catalog-style-"] .product-card[class*="-card"]:not(.product-card-default) {
    min-height: auto !important;
    height: auto !important;
}

/* --- Restaurar botones de carrito de cada plantilla --- */
body[class*="catalog-style-"] .product-card [class*="-minimal-footer"] button,
body[class*="catalog-style-"] .product-card [class*="-overlay-content"] button,
body[class*="catalog-style-"] .product-card [class*="-masonry-body"] button,
body[class*="catalog-style-"] .product-card [class*="-masonry-overlay"] button,
body[class*="catalog-style-"] .product-card [class*="-compact-body"] button,
body[class*="catalog-style-"] .product-card [class*="-bento-body"] button[class*="-btn"],
body[class*="catalog-style-"] .product-card button[class*="-add"],
body[class*="catalog-style-"] .product-card button[class*="-order-btn"],
body[class*="catalog-style-"] .product-card button[class*="-cart-btn"],
body[class*="catalog-style-"] .product-card button[class*="-play"],
body[class*="catalog-style-"] .product-card button.tesla-order-btn,
body[class*="catalog-style-"] .product-card button.amazon-add-btn,
body[class*="catalog-style-"] .product-card button.nike-cart-btn,
body[class*="catalog-style-"] .product-card button.nike-cart-hero,
body[class*="catalog-style-"] .product-card button.italian-cart-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* --- Header: evitar solapamiento de acciones en móvil --- */
body[class*="catalog-style-"] .catalog-header .header-content {
    flex-wrap: nowrap !important;
    gap: 12px !important;
}

body[class*="catalog-style-"] .catalog-header .brand {
    flex: 1 !important;
    min-width: 0 !important;
}

body[class*="catalog-style-"] .catalog-header .brand-text h1,
body[class*="catalog-style-"] .catalog-header #companyName {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ===== TABLET (≤1024px) ===== */
@media (max-width: 1024px) {
    body[class*="catalog-style-"] .catalog-header {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    body[class*="catalog-style-"] .header-actions {
        position: static !important;
        right: auto !important;
        flex-shrink: 0 !important;
    }

    body[class*="catalog-style-"] .catalog-header .header-content {
        justify-content: space-between !important;
    }

    body[class*="catalog-style-"] .catalog-header .brand {
        justify-content: flex-start !important;
    }

    body[class*="catalog-style-"] .categories-section {
        padding-left: 24px !important;
        padding-right: 24px !important;
        top: auto !important;
    }

    body[class*="catalog-style-"] .catalog-main {
        padding: 48px 24px 80px !important;
    }

    body[class*="catalog-style-"] .catalog-footer {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    body[class*="catalog-style-"] #companyName,
    body[class*="catalog-style-"] .brand-text h1 {
        font-size: clamp(18px, 4vw, 28px) !important;
        letter-spacing: 0.12em !important;
    }

    body[class*="catalog-style-"] .categories-scroll {
        justify-content: flex-start !important;
        gap: 24px !important;
    }
}

/* ===== MÓVIL (≤768px) ===== */
@media (max-width: 768px) {
    body[class*="catalog-style-"] .catalog-header {
        padding: 12px 16px !important;
    }

    body[class*="catalog-style-"] .catalog-main {
        padding: 32px 16px 64px !important;
    }

    body[class*="catalog-style-"] .categories-section {
        padding: 16px !important;
    }

    body[class*="catalog-style-"] .products-grid,
    body[class*="catalog-style-"] .products-grid.view-grid {
        gap: 16px !important;
        padding: 16px 0 !important;
    }

    body[class*="catalog-style-"] .modal-body {
        grid-template-columns: 1fr !important;
        padding: 32px 20px !important;
        gap: 24px !important;
    }

    body[class*="catalog-style-"] .modal-image-section {
        padding: 20px !important;
    }

    body[class*="catalog-style-"] .modal-main-image {
        max-height: 320px !important;
    }

    body[class*="catalog-style-"] .footer-content {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    body[class*="catalog-style-"] .catalog-toolbar {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /* Showcase horizontal scroll: Zara, H&M, Sephora */
    body.catalog-style-zara .products-grid,
    body.catalog-style-zara .products-grid.view-grid,
    body.catalog-style-hm .products-grid,
    body.catalog-style-hm .products-grid.view-grid,
    body.catalog-style-sephora .products-grid,
    body.catalog-style-sephora .products-grid.view-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        grid-template-columns: unset !important;
        padding: 16px !important;
        gap: 16px !important;
    }

    body.catalog-style-zara .zara-showcase-card,
    body.catalog-style-hm .hm-showcase-card,
    body.catalog-style-sephora .sephora-showcase-card {
        flex: 0 0 200px !important;
        width: 200px !important;
        min-width: 200px !important;
    }

    /* Tesla minimal: 1 columna en móvil */
    body.catalog-style-tesla .products-grid,
    body.catalog-style-tesla .products-grid.view-grid,
    body.catalog-style-ford .products-grid,
    body.catalog-style-ford .products-grid.view-grid,
    body.catalog-style-uber .products-grid,
    body.catalog-style-uber .products-grid.view-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    body.catalog-style-tesla .tesla-minimal-footer,
    body.catalog-style-ford .ford-minimal-footer,
    body.catalog-style-uber .uber-minimal-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
    }

    body.catalog-style-tesla .tesla-minimal-footer button,
    body.catalog-style-ford .ford-minimal-footer button,
    body.catalog-style-uber .uber-minimal-footer button {
        width: 100% !important;
        margin-top: 8px !important;
    }
}

/* ===== TELÉFONOS PEQUEÑOS (≤480px) ===== */
@media (max-width: 480px) {
    body[class*="catalog-style-"] .btn-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    body[class*="catalog-style-"] #companyName,
    body[class*="catalog-style-"] .brand-text h1 {
        font-size: 15px !important;
        letter-spacing: 0.08em !important;
    }

    body[class*="catalog-style-"] .category-chip {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    body[class*="catalog-style-"] .modal-body {
        padding: 24px 16px !important;
    }

    body[class*="catalog-style-"] #modalProductName {
        font-size: 22px !important;
    }

    body[class*="catalog-style-"] .current-price {
        font-size: 28px !important;
    }

    body.catalog-style-zara .zara-showcase-card,
    body.catalog-style-hm .hm-showcase-card,
    body.catalog-style-sephora .sephora-showcase-card {
        flex: 0 0 170px !important;
        width: 170px !important;
        min-width: 170px !important;
    }
}