/*
 Theme Name: Th Top
 Theme URI: https://themehunk.com/product/top-store/
 Author: ThemeHunk
 Author URI: https://www.themehunk.com
 Template: top-store
 Description: Th Top is a powerful responsive eCommerce WordPress theme specially designed for eStore websites. Theme is deeply integrated with WooCommerce plugin to sell your products online. Best suited for websites like electronic, food, home appliances site, gadget store, jewelry shop, fashion shop, furniture, grocery, clothing, and decorative stores. Theme contains multiple widgets options, Header and footer layout combinations, Color and Background option. It also has Sidebar option for both the FrontPage and inner pages to show Widgets. Some highlighted features are Advance product search, Top slider layout, Product carousel, Product carousel with tabbed category filter, Woo Category slider, Product list layout, Top header with three layouts, Ribbon section, Brand Section, Call to Action section. It is supported by widgets like Highlight Widget, Testimonial Widget and Blog post widget slider. Theme has some special features like Quick View, Compare Products, Wishlist, Dropdown cart, AJAX Search, Pre loader, and Social icons. Th Top is Integrated with Lead Form Builder and WP Popup Builder Plugin. You can Import the whole demo in just one click. It has a neat and clean Customize panel which makes your website designing easier. Check Out Demo – https://themeth.com/wp-themes/topstore/
 Version: 1.0.6
 Requires at least: 5
 Tested up to: 6.2
 Requires PHP: 5.6
 License: GNU General Public License v3 or later
 License URI: https://www.gnu.org/licenses/gpl-3.0.en.html
 Text Domain: th-top
 Tags: e-commerce, blog, grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-logo, custom-menu, featured-image-header, featured-images, custom-header, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready

 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
*/
/***********root******************/
:root :where(a:where(:not(.wp-element-button))) {
    color:  #666 !important; /* O el color que prefieras */
   text-decoration: none !important; /* Si no deseas el subrayado */
   border: none;
   outline: none;
 }
:root :where(a:where(:not(.wp-element-button))):hover{
    color: #00d5d5 !important; /* O el color que prefieras */
    text-decoration: none !important; /* Si no deseas el subrayado */
    border: none;
    outline: none;
   }
:root :where(a:where(:not(.wp-element-button))):active {
    border: none;
    outline: none; 
}
:root :where(a:where(:not(.wp-element-button))):focus {
    border: none;
    outline: none; 
}
 
/***********CABECERA**************/
.top-header:before{
    background-color: #00d5d5 !important;
    font-weight:bold;
}
.top-header-col1{
    font-weight:bold;
}
.top-header .top-header-bar {
    line-height: 2rem !important; 
}
.main-header .container{
        margin-left: 0; 
        margin-right: 0;  
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: none !important;
} 
.main-header-bar{
    justify-content: space-around;
}
.mhdrfour{
    .main-header-col1, .main-header-col3 {
        width:unset !important;
    }
}
.main-header-col2{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: unset !important;
    
}
.menu-superior{
    display: flex;
    color: black;
    padding: 1rem 0;
    a{
        font-weight: bold;
        font-size: 1.2rem;
        padding: 2rem;

    }
}
#thaps-search-box {
    width: 45% !important;
    margin: unset;
}
.header-icon{
    border-radius: 100px;
    background-color: #00d5d5;
    border: 1px solid #00d5d5;
    padding: 0.5rem 0;
    align-items: center;
    a{
        display: flex !important;
        align-items: center !important;
        font-weight: bold;
        span{
            padding: 0 0.5em;
        }
    }
    
}
.header-icon:hover{
    background-color: white;
}
.cart-icon .taiowc-icon .th-icon, .cart-icon .taiowcp-icon .th-icon, .cart-icon .taiowcp-content .taiowcp-total, .cart-icon .taiowc-content .taiowc-total {
    color: #000000 !important;
}

span.th-icon.th-icon-Shopping_icons-01{
    
    font-weight: bold;
}
.th-icon-Shopping_icons-01:before {
    content: "\e929";
}
.thunk-icon-market .cart-count-item {
    top: unset !important;
    left: unset !important;
}
.taiowc-cart-item {
    margin: 0 1rem;
}
/**************FOOTER****************/
.contenedor_footer{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: transparent;
    background-image: linear-gradient(180deg, #0F004E 0%, #000000 100%);
    align-content: center;
    justify-content: space-around;
    align-items: flex-start;;
    padding: 2rem;
}

.columnas_footer{
    
    flex: 1 1 25%; /* Ajuste de las columnas para ocupar 25% del contenedor */;
    display:flex;
    flex-direction: column;
    color: white;
    padding: 1rem;
    
    img{
        padding-bottom: 2rem;
        max-width: 60%;
        align-items: flex-start;
    }
    p {
        
        text-align: justify;
    }
    a{
        font-size: 1.2em;
        color: white;  
    }
    h2{
        padding: 1rem 0;
    }

    .iconos-pagos{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 2rem;
        justify-content: space-around;
        align-items: center;
        
        svg{
            width: 50px;
            height: 40px;
            background-color: white;
            border-radius: 5px;
        }
        svg:hover{
            background-color: #00d5d5;
        }
    }
    #thaps-search-box {
        width: unset !important;
        margin: unset;
    }
}
   
    .footer-copyright {
        background: #000000;
        text-align:center;
        color:white;
        padding-bottom: 3rem;
        a{
            color:white;
        }
        
    }
.whatsapp{
    display: flex;
    flex-direction: row;
    border-radius: 50%;
    border: 1px solid #25d366;
    width: 4rem;
    height: 4rem;
    background-color: #25d366;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    align-items: center;
    justify-content: center;
   
}
.whatsapp:hover{
    border: 2px solid #35ad61;
    background-color: #61de8f;
}

.icon-whatsapp {
    width: 2rem;
    height: 2rem;
  }


/**************Pagina Inicio***********/
.main{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}


.contendor-imagen{
    background-color: #020745;
    background-size: cover;
    background-repeat: no-repeat;
    height: 500px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    .contenido-texto{
        padding: 0 6rem;
        color:white;
        .nombre-empresa{
            font-size: x-large;
            padding:1rem 0;
        }
        .eslogan{
            font-size: xx-large;
            font-weight: bold;
            padding:1rem 0;
            line-height: 1;
        }
        .eslogan2{
            font-size: large;
            padding:1rem 0;
        }
        .boton-clientes{
            border-radius: 50px;
            width: 200px;
            padding: 1rem; 
            background-color: #00d5d5;
            text-align: center;
            margin-bottom: 1rem;
            color: white;
            font-weight: bold;
        }
        .boton-tienda{
            border-radius: 50px;
            width: 200px;
            padding: 1rem; 
            background-color: white;
            text-align: center;
            color: black;
            font-weight: bold;
        }
        .boton-clientes:hover{
            background-color: #69727d;
        }
        .boton-tienda:hover{
            background-color: #69727d;
            color:white
        }
    }
}
.distribuidores{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
    background-color: white;
    img{
        width: 250px;
        padding: 2rem;
    }
    p{
        font-size: xx-large;
        padding: 1rem;
    }
    .marcas{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding-bottom: 2rem;
        max-width: 60%;
        justify-content: space-around;
        align-items: center;
        img{
            width: 250px;
        }
    }
}
/************Woocommerce****************/
.page-head-woo{
    display: flex;
    padding: 20px;
    margin-bottom: 1rem;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    background-color: #00d5d5;
    color: white;
}
.page-head{
    background-color: #00d5d5;
    justify-content: space-around;
    padding: 20px;
    margin-bottom: 1rem;
    h1 {
        font-size: 24px !important;
        line-height: 38px !important;
        color: white !important;
    }
}

.container{
    margin: unset !important;
    max-width: unset !important;
}
.woocommerce-pagination{
    margin-top: 2rem !important;
    a:hover{
        color: white !important;
    }
    position: relative;
}
/* .front .disable-right-sidebar .sidebar-content-area, .page-content .disable-right-sidebar .sidebar-content-area {
    width: 18%;
}
.front .disable-right-sidebar .primary-content-area, .page-content .disable-right-sidebar .primary-content-area {
    margin-right: 0;
    width: 80%;
} */

/******************Carrito**********/
.wp-block-group{
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: row;

    .woocommerce-notices-wrapper{
        width: 100% !important;
    }
    .wc-empty-cart-message{
        width: 100% !important;
    }
    .woocommerce-cart-form {
        flex: 1 1 60%; /* Ocupa el 50% del ancho disponible */
        margin-right: 30px; /* Margen derecho entre el formulario y la tabla */
    }
    
    /* Estilos para el div de collaterales */
    .cart-collaterals {
        flex: 1 1 30%; /* Ocupa el 30% del ancho disponible */
    }
    .cart_totals {
        width: unset !important;
        h2{
            margin-top: unset;
        }
        .wc-proceed-to-checkout{
            width: 100%;
            a{
                width: 100%;
            }
        }
        table{
            td{
                text-align: right !important;
                vertical-align: unset !important;
            }

        }
    }
    
}

/*******Pagina producto****************/

.thunk-single-product-summary-wrap{
    .woocommerce-product-gallery{
        width: 33% !important;
    }
    .summary{
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        width: 63% !important;
    }
    p{
        order: 0 !important;
    }
   
}
.product_meta{
    display: none !important;
}
.share-btn_whatsapp{
    color: #666;
    font-weight: 600;
    .compartir-whatsapp{
        background-color: #25d366;
        border-radius: 3px;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 120px;
        .share-btn__icon{
            height: 2rem;
            width: 2rem;
            padding: 0.5rem;
        }
        .share-btn__text{
            color: white;
            font-weight: bold;
        }
    }
}
.woocommerce div.product .product_title {
    font-weight: bold;
}

p.price{
    margin: 0.3rem 0 0.3rem 0 !important;
    font-weight: bold;
    color: black !important;
    del span bdi{
        color: #a7a7a7 ;
    }
    b{
        font-family: unset;
    }
    span bdi{
        color: #00d5d5;
    }
}
#descuentos .price del{
    font-weight: normal;
    color: black;
    span bdi{
        color: black;
    }
}
form.cart{
    margin-top: 1rem;
}
.ppc-button-wrapper{
    margin: 1rem 0;
    width: 48px;
    border-radius: 3px;
}
.share-btn_whatsapp a{
    display: flex;
    flex-direction: row;
    width: 120px;
}

/***********Tienda*********************/
.ppcp-messages{
    display: none !important;
}
.thunk-product-cat-list li a {
    line-height: 1.8 !important;
}

/*************Mensaje Emergente Area Cliente *********/
#mensaje-emergente{
    display: none;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    background: #00d5d5;
    padding: 20px;
    box-shadow: 0 -4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    
    #cerrar-mensaje{
        background: transparent;
        border: none;
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 2rem;
    }
    h2{
        color: white;
        margin-bottom: 2rem;
    }
    p{
        color: white;
        margin-bottom: 2rem;
        font-size: 1rem;
    }
    #abrir-formulario{
        background-color: white;
        color: #00d5d5;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
       
    }
    #abrir-formulario:hover{
        background-color: #888 !important;
        color: white !important;
    } 
}

#formulario-fondo{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    overflow-y: auto;
}

#formulario-popup{
    position: relative;
    top: 50%;
    left: 50%;
    max-width: 700px;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    #cerrar-formulario{
         background: transparent;
         border: none;
         position: absolute;
         top: 10px;
         right: 10px;
         font-size: 2rem;
    }
    h2{
        text-align: center;
        margin: 2rem 0;
    }
    #registro-formulario{
        .fila{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 1rem;
            label{
                margin-top: 5px;
                font-size:large;
                span{
                    color:red;
                }
            }
        }
        .elemento{
            flex: 1;
            min-width: 300px;
           
            input{
                width: 100%;
                padding: 5px;
                margin: 8px 0px;
                font-size: large;
                border: 1px solid #ddd;
                border-radius: 4px;
            }
        } 
        #lopd , #promociones{
            margin-right: 10px;
            
        }
        button{
            background-color: #00d5d5;;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            margin: 1rem 0px;
        }
        button:hover{
            background-color: #888 ;
        }
    }
}


/*********Version tablet***************/
@media screen and (max-width: 1024px) {
    .taiowc-content .taiowc-total, .taiowcp-content .taiowcp-total {
        display: flex !important;
    }
}


/***********Version Movil**************/
@media (width <= 990px) {
    /***CABECERA**/
    .taiowc-cart-item, .taiowc-icon, .taiowc-total {
        display: flex !important;
    }
    
    
    .contenedor_footer {
        flex-direction: column;
        align-items:flex-start;
    }
    .columnas_footer {
        flex: 1 1 100%; 
        max-width: 100%; 
        padding: 1rem 0;
    }
    .contendor-imagen {
        .contenido-texto {
            padding: 0 1rem;
        }
    }
    /*****WOO*****/
    #sidebar-primary {
        order: 1 !important;
    } 
   /*  .main-area{
        position: unset;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    } */
    .sidebar-1 .menu-category-list {
        display: block !important;
    } 

    .menu-category-list ul[data-menu-style="vertical"] li ul.sub-menu{
        left: 50% !important;
    }

    .thunk-single-product-summary-wrap{
        .woocommerce-product-gallery{
            width: 100% !important;
        }
        .summary{
           
            width: 100% !important;
        }
        
    }
    .woocommerce-tabs{
        display: none;
    }

    #formulario-popup{
        top: 100%;
    }
   
    /* .front .disable-right-sidebar .sidebar-content-area,
    .page-content .disable-right-sidebar .sidebar-content-area,
    .front .disable-right-sidebar .primary-content-area,
    .page-content .disable-right-sidebar .primary-content-area{
        width: 90%;
    } */
    
}


/***************Las del propio tema hijo***********/

article.thunk-post-article.post{
float:left;
width:49%;
clear:none;
margin-right:2%;
}
/* article.thunk-post-article.post:nth-child(2n+2){
margin-right:0;
} */

/* .thunk-icon-market .taiowc-icon svg{
fill:#fff;
}
.thunk-icon-market .taiowc-content .taiowc-total{
color:#fff;
}

.main-header-bar .header-icon a:hover{
color: #fff!important;    
} */

/* .thunk-icon-market .cart-icon .taiowc-cart-item{
 padding-left: 0;   
}  */
.th-search-inner {
    position: relative;
}
.th-search-close {
    background: transparent;
    width: 40px;
    height: 40px;
    color: #a7a7a7;
    font-size: 21px;
    float:none;
    position: absolute;
   top: 5px;
    right: 0;
}
@media screen and (max-width: 768px){
/* .thunk-icon-market .taiowc-content .taiowc-total{
    display: none;
} */
/* .main-header.mhdrfive .cart-icon {
    width: auto;
    padding-left: 0;
    margin-left: 0;
} */
/* .thunk-icon-market .cart-count-item {
    display: none;
} */
.th-search-close {
    background: transparent;
    width: 40px;
    height: 40px;
    color: #a7a7a7;
    font-size: 21px;
    float:none;
    position: absolute;
   top: 5px;
   right: auto;
    left: 0;
}
}