/*=========================================================
    RESPONSIVE.CSS
    MundoArte Premium UI
=========================================================*/


/*=========================================================
1600px
=========================================================*/

@media (max-width:1600px){

    .container{

        width:94%;

    }

}


/*=========================================================
1400px
=========================================================*/

@media (max-width:1400px){

    :root{

        --space-section:100px;

    }

    .products-grid{

        gap:30px;

    }

}


/*=========================================================
1200px
=========================================================*/

@media (max-width:1200px){

    .grid-4{

        grid-template-columns:repeat(2,1fr);

    }

    .products-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .categories-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .category-large,
    .category-medium,
    .category-half{

        grid-column:span 1;

    }

    .process-timeline{

        grid-template-columns:repeat(1,1fr);

        gap:60px;

    }

    .process-timeline::before,
    .process-timeline::after{

        display:none;

    }

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .customizer-wrapper{

        grid-template-columns:1fr;

    }

}


/*=========================================================
1024px
=========================================================*/

@media (max-width:1024px){

    .hero{

        min-height:850px;

    }

    .hero-title{

        font-size:4rem;

    }

    .hero-description{

        max-width:100%;

    }

    .grid-3{

        grid-template-columns:repeat(2,1fr);

    }

    .stats{

        grid-template-columns:repeat(2,1fr);

    }

}


/*=========================================================
900px
=========================================================*/

@media (max-width:900px){

    .hero-buttons{

        flex-direction:column;

        align-items:flex-start;

    }

    .footer-cta{

        flex-direction:column;

        text-align:center;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}


/*=========================================================
768px
=========================================================*/

@media (max-width:768px){

    :root{

        --space-section:80px;

    }

    h1{

        font-size:3rem;

    }

    h2{

        font-size:2.3rem;

    }

    h3{

        font-size:1.8rem;

    }

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

    .products-grid{

        grid-template-columns:1fr;

    }

    .categories-grid{

        grid-template-columns:1fr;

    }

    .testimonials-grid{

        grid-template-columns:1fr;

    }

    .stats{

        grid-template-columns:1fr;

    }

    .features{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

    }

    .hero{

        min-height:760px;

    }

    .hero-card{

        display:none;

    }

    .footer-cta{

        padding:50px 35px;

    }

}


/*=========================================================
600px
=========================================================*/

@media (max-width:600px){

    .hero-title{

        font-size:2.8rem;

    }

    .hero-description{

        font-size:1rem;

    }

    .btn{

        width:100%;

    }

    .header-button{

        display:none;

    }

    .preview-gallery{

        justify-content:center;

        flex-wrap:wrap;

    }

    .process-step{

        width:100%;


    }

}


/*=========================================================
480px
=========================================================*/

@media (max-width:480px){

    section{

        padding:70px 0;

    }

    .container{

        width:92%;

    }

    .hero{

        min-height:680px;

    }

    .hero-title{

        font-size:2.4rem;

    }

    .hero-tag{

        font-size:.7rem;

    }

    .category-content{

        left:25px;

        right:25px;

        bottom:25px;

    }

    .category-content h3{

        font-size:1.7rem;

    }

    .product-content{

        padding:25px;

    }

    .customizer-preview{

        padding:30px;

    }

    .customizer-panel{

        padding:30px;

    }

    .footer-main{

        padding:130px 0 60px;

    }

    .footer-cta{

        border-radius:28px;

    }

}


/*=========================================================
360px
=========================================================*/

@media (max-width:360px){

    .hero-title{

        font-size:2rem;

    }

    .footer-social{

        flex-wrap:wrap;

        justify-content:center;

    }

    .footer-bottom-links{

        flex-direction:column;

        gap:15px;

    }

}


/*=========================================================
LANDSCAPE PHONE
=========================================================*/

@media (max-height:600px){

    .hero{

        min-height:100vh;

    }

}


/*=========================================================
4K
=========================================================*/

@media (min-width:2200px){

    html{

        font-size:18px;

    }

}


/*=========================================================
HEADER RESPONSIVE
=========================================================*/

@media (max-width:1024px){

    /*-----------------------------------------------------
    HEADER
    -----------------------------------------------------*/

    .header{

        height:72px;

    }

    .header-container{

        height:72px;

        padding:0 18px;

    }


    /*-----------------------------------------------------
    LOGO
    -----------------------------------------------------*/

    .logo{

        position:absolute;

        left:18px;

        top:50%;

        transform:translateY(-50%);

        width:74px;

        z-index:20;

    }

    .logo img{

        width:100%;

        height:auto;

    }


    /*-----------------------------------------------------
    DESKTOP MENU
    -----------------------------------------------------*/


    .main-nav {
        display: none !important;
    }

    .main-nav.show {
        display: flex !important;

        position: fixed;

        top: 72px;
        left: 0;

        width: 100%;
        height: calc(100vh - 72px);

        padding: 30px 24px;

        background: rgba(255,255,255,.97);

        backdrop-filter: blur(18px);

        z-index: 999;

        overflow-y: auto;

        justify-content: flex-start;
    }

    .main-nav.show .nav-menu {
    display: flex !important;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    width: 100%;

    gap: 0;

    margin: 0;
    padding: 0;

    list-style: none;
    }

    .main-nav.show .nav-menu > li {
        width: 100%;
    }

    .main-nav.show .nav-menu > li > a {
        display: flex;

        width: 100%;

        padding: 16px 5px;

        color: #333 !important;

        font-size: 1.05rem;

        border-bottom: 1px solid rgba(0,0,0,.08);
    }

    .mobile-toggle.active {
        background: #ff7a00;
        color: #fff;
    }


    .nav-menu{

        display:none !important;

    }

    .mega-menu{

        display:none !important;

    }


    /*-----------------------------------------------------
    HEADER ACTIONS
    -----------------------------------------------------*/

    .header-actions{

        display:flex;

        align-items:center;

        margin-left:auto;

        gap:8px;

    }


    /*-----------------------------------------------------
    HIDE DESKTOP BUTTONS
    -----------------------------------------------------*/

    .header-actions .header-button{

        display:none !important;

    }


    /*-----------------------------------------------------
    HIDE USER / FAVORITES
    -----------------------------------------------------*/

    .header-actions .header-icon:nth-child(1),
    .header-actions .header-icon:nth-child(2){

        display:none !important;

    }


    /*-----------------------------------------------------
    CART
    -----------------------------------------------------*/

    .header-actions .cart-button{

        display:flex;

        align-items:center;

        justify-content:center;

        width:38px;

        height:38px;

        padding:0;

        font-size:1rem;

    }


    /*-----------------------------------------------------
    MOBILE TOGGLE
    -----------------------------------------------------*/

    .mobile-toggle{

        display:flex !important;

        align-items:center;

        justify-content:center;

        width:40px;

        height:40px;

        margin:0;

        padding:0;

        border:none;

        border-radius:50%;

        background:#fff;

        color:#333;

        font-size:1.1rem;

        cursor:pointer;

        box-shadow:0 6px 18px rgba(0,0,0,.08);

    }

}


/*=========================================================
HEADER MOBILE PEQUEÑO
=========================================================*/

@media (max-width:480px){

    .header{

        height:68px;

    }

    .header-container{

        height:68px;

        padding:0 15px;

    }

    .logo{

        left:15px;

        width:68px;

    }

    .header-actions{

        gap:6px;

    }

    .header-actions .cart-button{

        width:36px;

        height:36px;

    }

    .mobile-toggle{

        width:38px;

        height:38px;

        font-size:1rem;

    }

}