/*
Theme Name: The9 Shop Store
Author: aThemeArt
Author URI: https://athemeart.com/
Theme URI: https://athemeart.com/downloads/the9-shop-store/
Description:The9 Shop Store – your new favorite child theme that turns any WordPress site into a gorgeous, fully-loaded eCommerce fashion store in minutes! This isn’t just another template… it’s a complete, shoppable powerhouse built for selling anything you love: boutique apparel, clothing & footwear, jewelry, watches, bags, beauty & skincare products, cosmetics, electronics, cameras, sports goods, furniture, children’s toys, handmade craft items, digital goodies like fonts, stock photos, software, music, even event tickets or affiliate links. If you can dream it, The9 can sell it! The layout is clean, modern, and crazy flexible – total control over the look and feel, visual design, branding, and user interface right from the familiar WordPress appearance settings. Tweak the design, shopping cart, product catalog, and product management without touching a line of code (though devs will love the clean Bootstrap framework underneath). One-click easy install, plays perfectly with Elementor, WPML, Yoast, Contact Form 7, MetaSlider, and all your favorite plugins. Download once and watch your website transform into a stunning online shop that feels custom-made. Ready to launch your dream store? Grab The9 today and start selling in style! 🚀 
Template: the9-store
Version: 1.0.3
Requires at least: 5.0
Tested up to: 7.0
Requires PHP: 7.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl.html
Tags: blog, e-commerce, three-columns, grid-layout, left-sidebar, right-sidebar, sticky-post, custom-background, custom-header, custom-colors, custom-menu, featured-images, full-width-template, translation-ready, theme-options, threaded-comments, custom-logo, portfolio, footer-widgets
Text Domain: the9-shop-store
*/
/* =========================
   NAVBAR BASE
========================= */

#navbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#navbar ul > li > a{
  display: flex;
  align-items: center;
}

#navbar .top-form-minicart{
	width: auto;
	padding-right: 20px;
}

#navbar .top-form-minicart:before {
   top: calc(50% - 14px);
}

#navbar .top-form-minicart:after {
	 top: 50%;
	 height: 20px;
	 line-height: 0px;
}

/* =========================
   DESKTOP
========================= */

@media only screen and (min-width: 991px) {

    #navbar ul > li{
        display: flex;
        height: 100%;
    }

    #navbar ul ul.sub-menu{
        top: 100%;
    }

    #navbar ul.sub-menu ul.sub-menu{
        top: 0px;
    }

    #navbar .top-form-minicart a.cart-contents{
        display: flex;
        align-items: center;
    }

    #navbar .top-form-minicart .icofont-cart{
        margin-right: 10px;
    }

    .cat-menu-wrap{
        flex: 1;
        margin-right: 10px;
    }

    .cat-menu-wrap button.btn-mega{
        min-width: 220px;
    }
}

/* =========================
   CAT MENU
========================= */

.cat-menu-wrap{
    box-sizing: border-box;
}

.cat-menu-wrap button.btn-mega{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 0px;
    border: none;
    position: relative;
    text-align: center;
    font-size: 105%;
    margin-top: 1px;
    color: var(--nav-h-bg);
    background: var(--nav-h-color);
}

.cat-menu-wrap button.btn-mega:hover, 
.cat-menu-wrap button.btn-mega:focus{
    color: var(--nav-h-color);
    background: var(--nav-h-bg);
}

.cat-menu-wrap button.btn-mega span.bar{
    position:relative;
    height: 2px;
    margin-right: 15px;
    background-color: var(--nav-h-bg);
    display: block;
    width: 22px;
    transition: all 0.3s ease-in-out;
}

.cat-menu-wrap button.btn-mega span.bar:before,
.cat-menu-wrap button.btn-mega span.bar:after{
    content: '';
    position: absolute;
    left: 0px;
    height: 2px;
    width: 22px;
    background-color:var(--nav-h-bg);
}

.cat-menu-wrap button.btn-mega span.bar:before{
    top: -6px;
}

.cat-menu-wrap button.btn-mega span.bar:after{
    bottom: -6px;
}

#aside-nav-wrapper{
    display: flex;
}

/* =========================
   MOBILE FIXES
========================= */

@media (max-width: 991px) {

    #navbar {
        flex-direction: column;
        align-items: stretch;
    }

    #navbar ul > li{
        display: block;
        height: auto;
    }

    #aside-nav-wrapper{
        flex-direction: column;
        width: 100%;
    }

    .cat-menu-wrap{
        display: none !important;
    }

    /* BUSCADOR 
    #navbar .top-form-search,
    #navbar .search-form{
        width: 100%;
    }

    #navbar .search-form{
        display: flex;
        flex-wrap: nowrap;
    }

    #navbar .search-form input[type="search"]{
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        padding: 10px;
        box-sizing: border-box;
    }

    #navbar .search-form button{
        padding: 10px 14px;
        font-size: 14px;
    }

    #navbar .top-form-minicart{
        padding-right: 0;
        margin-top: 10px;
    }
} */

/* =========================
   PRODUCTS HOVER
========================= */

ul.products li.product{
    position: relative;
}

ul.products li.move.product {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

ul.products li.move.product:hover,
ul.products li.move.product:focus {
    transform: translateY(-8px);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}

/* =========================
   PAGINATION
========================= */

.pagination-custom ul {
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.pagination-custom a,
.pagination-custom span {
    text-decoration: none;
    font-size: 1rem;
    padding:12px 16px;
    display: block;
    border: 1px solid var(--secondary-color);
    background: var(--quaternary-color);
    color: var(--secondary-color);
    border-radius: 3px;
}

.pagination-custom a:hover,
.pagination-custom a:focus,
.pagination-custom .current{
    background: var(--secondary-color);
    color: var(--quaternary-color);
}

/* =========================
   FOOTER MOBILE
========================= */

@media only screen and (max-width: 740px) {
   #colophon .site_info .col-6{
     width: 100%;
   }
}

/* =========================
   PRELOADER
========================= */

body.overlay--enabled {
    overflow: hidden;
}

#the9_preloader {
    position: fixed;
    z-index: 9999;
    inset: 0;
}

#the9_preloader .preloader-animation {
    background: #F2F3F5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#the9_preloader .spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--secondary-color);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}