/* ==========================================================================
   Componente: Migas de Pan (Single Product Breadcrumbs)
   ========================================================================== */

/* Fondo de pantalla completa */
.single-breadcrumb-area {
    width: 100%;
    background-color: #def1de; /* El verde clarito del Figma */
    display: flex;
    align-items: center;
    height: 72px; /* Altura exacta en Desktop */
}

/* Contenedor interno centrado */
.single-breadcrumb-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 50px; /* Mismo padding lateral de tu layout general */
    
    /* Tipografía Desktop */
    font-size: 20px;
    font-weight: 600; /* Semibold */
    color: #00a803; /* Verde oscuro para el texto */
    
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

/* Enlaces */
.single-breadcrumb-container a {
    color: #00a803;
    text-decoration: none;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.single-breadcrumb-container a:hover {
    opacity: 0.7;
}

/* El separador ">" */
.single-breadcrumb-container .separator {
    margin: 0 8px; /* Espacio exacto a los lados del símbolo */
    color: #00a803;
    font-weight: 600;
}

/* ==========================================================================
   Responsive (Adaptación a Móvil)
   ========================================================================== */
@media screen and (max-width: 768px) {
    .single-breadcrumb-area {
        height: 48px; /* Altura exacta en Móvil */
    }

    .single-breadcrumb-container {
        font-size: 13px; /* Tipografía Móvil */
        padding: 0 20px; /* Reducimos el padding lateral para móviles */
        
        /* Permitimos scroll horizontal invisible si la ruta es larguísima */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Ocultamos la barrita de scroll en móviles para que se vea limpio */
    .single-breadcrumb-container::-webkit-scrollbar {
        display: none;
    }
}