/* =========================================================
   TiendaPro - estilos personalizados
   Los estilos embebidos originales fueron extraídos del HTML.
   ========================================================= */

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dropdown:hover .dropdown-menu { display: block; }


/* Barra de categorías - estilo menú sin cápsulas */
#nav-categories-container > button,
#nav-categories-container > .tp-mega-item > button {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
    color: #cbd5e1 !important;
    position: relative;
}
#nav-categories-container > button:hover,
#nav-categories-container > .tp-mega-item > button:hover,
#nav-categories-container > .tp-mega-item:focus-within > button {
    background: rgba(255,255,255,.05) !important;
    color: #fff !important;
}
#nav-categories-container > button::after,
#nav-categories-container > .tp-mega-item > button::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 5px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform .18s ease;
}
#nav-categories-container > button:hover::after,
#nav-categories-container > .tp-mega-item > button:hover::after,
#nav-categories-container > .tp-mega-item:focus-within > button::after {
    transform: scaleX(1);
}
@media (max-width: 767px) {
    #nav-categories-container {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
    }
    #nav-categories-container > button,
    #nav-categories-container > .tp-mega-item {
        flex: 0 0 auto;
    }
}