/*
Theme Name: OceanWP Child
Theme URI: https://example.com
Description: OceanWP Child Theme
Author: Tu Nombre
Template: oceanwp
Version: 1.0
*/



/* ==========================================================================
   Árbol de Categorías Personalizado (WooCommerce)
   ========================================================================== */

/* 1. Quitar viñetas por defecto y limpiar espaciados */
.wc-category-tree-container ul {
    list-style: none !important;
    padding-left: 18px !important;
    margin: 0 !important;
}
.wc-category-tree-container .wc-category-tree-root {
    padding-left: 0 !important;
}
.wc-category-tree-container li {
    margin: 2px 0 !important;
    list-style-type: none !important;
}

/* 2. Control de altura y animación del acordeón */
.wc-category-tree-container .wc-tree-childs {
    max-height: 0 !important;
    overflow: hidden !important;
    display: block !important;
    transition: max-height 0.35s cubic-bezier(0, 1, 0, 1) !important;
}
.wc-category-tree-container li.open > .wc-tree-childs {
    max-height: 4000px !important;
    transition: max-height 0.45s ease-in-out !important;
}

/* 3. Tipografía unificada y estilos base de filas */
.wc-category-tree-container a {
    color: inherit !important;
    text-decoration: none !important;
}
.wc-category-tree-container .wc-product-item {
    color: inherit !important;
    display: block !important;
    padding: 5px 8px !important;
    box-sizing: border-box;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.wc-category-tree-container .wc-tree-no-children {
    display: block !important;
    width: 100%;
    padding: 5px 8px !important;
    box-sizing: border-box;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

/* 4. Agregar indicador + / - a la derecha SOLO en categorías con hijos */
.wc-category-tree-container .wc-tree-toggle {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
    padding: 5px 8px !important;
    box-sizing: border-box;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.wc-category-tree-container .wc-tree-toggle::after {
    content: '+' !important;
    font-weight: bold !important;
    font-size: 14px !important;
    margin-left: 12px !important;
}
.wc-category-tree-container .wc-tree-toggle.open::after {
    content: '-' !important;
}

/* 5. Efecto Hover unificado a #f7f7f7 */
.wc-category-tree-container .wc-tree-toggle:hover,
.wc-category-tree-container .wc-tree-no-children:hover,
.wc-category-tree-container .wc-product-item:hover {
    background-color: #d3d3d3 !important;
}