/*
Theme Name: UpStore Child
Theme URI: http://demo.theme-sky.com/upstore/
Author: Theme Sky Team
Author URI: http://theme-sky.com/
Description: A Premium and Responsive WordPress theme, designed for E-Commerce websites
Template: upstore
Version: 1.0.0
License: GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, left-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: upstore-child
*/



/* Hacer el header sticky */
.my-tailwind-header {
    margin: 0 !important;
    /* Ya tienes overflow y z-index configurados */
    position: sticky;
    top: 0;
}

   header.ts-header,
   header.ts-header * {
       display: none !important;
   }
   
   body.woocommerce-account .my-tailwind-header .max-w-2xl {
    margin: 0 auto !important;
    float: none !important;
    clear: both !important;
}


   .tw-hide-mobile {
    display: none;
}
@media (min-width: 640px) {
    .tw-hide-mobile {
        display: block;
    }
}

/* =======================================
   2. Clase personalizada para ocultar el menú horizontal en móviles y mostrarlo en escritorio
   ======================================= */
.desktop-menu {
    display: none;
}
@media (min-width: 640px) {
    .desktop-menu {
        display: flex !important; /* Forzar a flex en pantallas grandes */
        gap: 1.5rem;
        justify-content: center;
        align-items: center;
    }
}

/* =======================================
   3. Ajustar el z-index y overflow para asegurar que el header tenga prioridad
   ======================================= */
.my-tailwind-header {
    background: linear-gradient(to right, #005aa7, #003f7a) !important; /* Gradiente aplicado */
    overflow: visible !important;
    z-index: 9999 !important;
}

/* =======================================
   4. Ajustes para el contador del carrito para que sea más pequeño y bien posicionado
   ======================================= */
.my-tailwind-header .relative .absolute {
    width: 14px;
    height: 14px;
    padding: 0;
}

.my-tailwind-header .relative .absolute span {
    padding: 0.25rem; /* px-1 py-0.5 */
    font-size: 0.75rem; /* text-xs */
    width: 11px;
    height: 11px;
}

/* =======================================
   5. Estilos para el menú desplegable en móviles
   ======================================= */
.menu-desplegable {
    display: none; /* Oculto por defecto en móviles */
    background: linear-gradient(to right, #005aa7, #003f7a) !important; /* Gradiente */
    transition: max-height 0.3s ease-in-out;
    overflow: hidden;
    max-height: 0;
}

.menu-desplegable.active {
    display: flex !important; /* Usar flex para mejor manejo del espacio */
    flex-direction: column;
    max-height: 1000px; /* Suficiente para mostrar todo el contenido */
}

/* Asegurar que el menú desplegable esté siempre oculto en escritorio */
@media (min-width: 640px) {
    .menu-desplegable {
        display: none !important;
        max-height: none !important;
    }
}

/* =======================================
   6. Menú horizontal en pantallas grandes (siempre visible)
   ======================================= */
.menu-horizontal {
    display: none; /* Oculto en móviles */
}
@media (min-width: 640px) {
    .menu-horizontal {
        display: flex !important; /* Forzar a flex en pantallas grandes */
        gap: 1rem;
        justify-content: center;
        align-items: center;
    }
}
@media (min-width: 640px) {
    .menu-desplegable,
    .menu-desplegable.active {
        display: none !important;
        max-height: none !important;
    }
}

/* =======================================
   7. Ajustes para centrar el menú en pantallas grandes
   ======================================= */
.menu-container {
    max-width: 1200px; /* Ajusta según el ancho máximo de tu contenido */
    margin: 0 auto;
}

/* =======================================
   8. Estilos para el botón "Cerrar Menú" sin fondo y con ícono
   ======================================= */
.close-menu-button {
    background: none !important; /* Sin fondo */
    border: none !important; /* Sin borde */
    display: flex;
    align-items: center;
    color: white !important;
    font-size: 1rem !important; /* text-base */
    cursor: pointer;
}

.close-menu-button svg {
    margin-right: 0.5rem; /* Espacio entre el ícono y el texto */
}

/* =======================================
   9. Asegurar que los enlaces del menú tengan el cursor pointer y texto blanco
   ======================================= */
.menu-item {
    cursor: pointer;
    color: white !important; /* Asegurar que el texto sea blanco */
}

/* =======================================
   10. Asegurar que los SVGs dentro del menú sean blancos
   ======================================= */
.menu-horizontal svg,
.menu-desplegable svg {
    color: white !important;
  
}

/* =======================================
   11. Asegurar que los elementos internos no tengan fondo blanco
   ======================================= */
.my-tailwind-header .header-left,
.my-tailwind-header .header-right,
.my-tailwind-header .flex,
.my-tailwind-header .flex-1,
.my-tailwind-header a {
    background: transparent !important;
}

/* =======================================
   12. Ajustar el tamaño del logo de la empresa según la versión
   ======================================= */
.my-tailwind-header img {
    height: 2.5rem !important; /* Mobile: 2.5rem */
    width: auto !important;
}

@media (min-width: 640px) { /* Tablet */
    .my-tailwind-header img {
        height: 3rem !important; /* Ajusta según prefieras */
    }
}

@media (min-width: 1024px) { /* Desktop */
    .my-tailwind-header img {
        height: 3.5rem !important; /* Ajusta según prefieras */
    }
}

/* =======================================
   13. Forzar tamaño consistente de los íconos de Heroicons en el menú
   ======================================= */
/* Ajustar tamaños de los íconos en el menú */


/* =======================================
   14. Reset de Márgenes y Rellenos por Defecto
   ======================================= */
/* Eliminar márgenes y rellenos por defecto */
body, html {
    margin: 0;
    padding: 0;
}

/* =======================================
   15. Ajustes Finales para Asegurar la Stickyidad
   ======================================= */
/* Asegurar que el encabezado no tenga márgenes que lo desplacen */
.my-tailwind-header {
    margin: 0 !important;
}

/* Asegurar que los elementos dentro del encabezado estén alineados correctamente */
.my-tailwind-header .flex {
    align-items: center !important;
}

/* =======================================
   16. Ajustar el tamaño del texto para "Identifícate" y "Cerrar Sesión"
   ======================================= */

/* Seleccionar los <span> dentro de los enlaces de identificación y cierre de sesión */
.my-tailwind-header a span.text-xl,
.my-tailwind-header a span.text-xl.sm\:text-xl.md\:text-2xl {
    font-size: 1.1rem !important; /* text-lg */
    /* Puedes ajustar el valor a 1.5rem si prefieres un tamaño mayor */
    /* font-size: 1.5rem !important; */ 
}

body.woocommerce-account div.woocommerce {
    overflow: visible !important;
    /* Si deseas mantener el margen del padre, simplemente no lo toques.
       Si quieres eliminarlo, puedes anularlo también: */
    margin: 0 !important; 
}
/* Ejemplo: centrar el texto de existencias */
/* Mostrar las etiquetas de FiboSearch pese a ocultar las de WooCommerce */
.dgwt-wcas-suggestion .dgwt-wcas-stock {
    display: block !important;
    margin-top: 5px;
    font-weight: bold;
    text-align: center;
}
.dgwt-wcas-stock.in-stock {
    color: green;
}
.dgwt-wcas-stock.out-of-stock {
    color: red;
}

/*ocultar agotado de woocommerce predeterminado*/
body.woocommerce div.product .images .product-label span.out-of-stock {
    display: none !important;
}
/* Ejemplo: hasta 419px (smartphones pequeños) */
@media only screen and (max-width: 419px) {
    body.woocommerce div.product .images .product-label span.out-of-stock {
        display: none !important;
    }
}

/* Ejemplo extra: hasta 767px (tablets vertical) */
@media only screen and (max-width: 767px) {
    body.woocommerce div.product .images .product-label span.out-of-stock {
        display: none !important;
    }
}
span.out-of-stock,
span.stock.out-of-stock {
  display: none !important;
}