/**
 * HEADER OVERLAP FIX - Solapamiento Header/Breadcrumb
 * Solución: Agregar padding-top al contenido para evitar que se oculte detrás del header
 * Versión: 1.0
 * Fecha: 2025-07-30
 */

/* ================================================
   FIX PRINCIPAL: Compensar altura del header fijo
   ================================================ */

/* Contenedor principal - agregar padding superior */
#wrapper {
    padding-top: 35px !important;
}

/* Breadcrumb específico - asegurar visibilidad */
.breadcrumb {
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    z-index: 10 !important;
    position: relative !important;
}

/* ================================================
   RESPONSIVE: Ajustes por dispositivo
   ================================================ */

/* Desktop: Header más alto, más padding */
@media (min-width: 768px) {
    #wrapper {
        padding-top: 50px !important;
    }
    
    .breadcrumb {
        margin-top: 15px !important;
        margin-bottom: 20px !important;
    }
}

/* Tablet */
@media (min-width: 992px) {
    #wrapper {
        padding-top: 60px !important;
    }
}

/* ================================================
   ESPECÍFICO PARA PÁGINA DE PRODUCTO
   ================================================ */

/* Página de producto: padding extra por si tiene header más grande */
body.product #wrapper {
    padding-top: 45px !important;
}

@media (min-width: 768px) {
    body.product #wrapper {
        padding-top: 60px !important;
    }
}

@media (min-width: 992px) {
    body.product #wrapper {
        padding-top: 70px !important;
    }
}

/* ================================================
   BACKUP: Forzar visibilidad del breadcrumb
   ================================================ */

/* Si el breadcrumb sigue oculto, forzar posición */
.breadcrumb {
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 8px 0 !important;
    backdrop-filter: blur(5px) !important;
}

/* Container del breadcrumb */
.container .breadcrumb {
    position: relative !important;
    z-index: 100 !important;
}