/* ==================================================
   HANIYEL Responsive System
   COMMIT #020
================================================== */


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

@media (max-width:1600px){

}



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

@media (max-width:1400px){

}



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

@media (max-width:1200px){

}



/* ==================================================
   ≤ 992px
================================================== */

@media (max-width:992px){

    .haniyel-header__top{

        padding:0 32px;
        height:90px;

    }

    .haniyel-logo-image{

        width:235px;

    }

    .header-actions{

        gap:22px;

    }

}



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

@media (max-width:768px){

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

    .haniyel-header__top{

        display:grid;

        grid-template-columns:44px 1fr 44px;

        align-items:center;

        height:82px;

        padding:0 20px;

    }

    /* =====================================
       SEARCH
    ===================================== */

    .haniyel-header__left{

        display:flex;
        justify-content:flex-start;

    }

    .haniyel-search-box{

        display:none;

    }

    /* =====================================
       LOGO
    ===================================== */

    .haniyel-header__center{

        position:static;

        transform:none;

        justify-self:center;

    }

    .haniyel-logo-image{

        width:170px;

    }

    /* =====================================
       RIGHT
    ===================================== */

    .haniyel-header__right{

        justify-content:flex-end;

    }

    /* =====================================
       MOBILE BUTTON
    ===================================== */

    .mobile-menu-toggle{

        display:flex;

        align-items:center;
        justify-content:center;

    }

    /* =====================================
       HEADER ACTIONS
    ===================================== */

    .header-actions{

        gap:0;

    }

    .header-action-account,
    .header-action-favorites,
    .header-action-language{

        display:none;

    }

    .header-action-cart{

        display:flex;

    }

    .header-action-cart span{

        display:none;

    }

    .header-action-cart svg{

        width:22px;
        height:22px;

    }

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

    .haniyel-header__nav{

        display:none;

    }

    .haniyel-category-nav{

        display:none;

    }

}



/* ==================================================
   ≤ 576px
================================================== */

@media (max-width:576px){

    .haniyel-header__top{

        padding:0 16px;

        grid-template-columns:40px 1fr 40px;

    }

    .haniyel-logo-image{

        width:150px;

    }

}



/* ==================================================
   ≤ 420px
================================================== */

@media (max-width:420px){

    .haniyel-header__top{

        padding:0 14px;

        grid-template-columns:36px 1fr 36px;

    }

    .mobile-menu-toggle{

        width:36px;
        height:36px;

    }

    .mobile-menu-toggle svg{

        width:16px;
        height:16px;

    }

    .haniyel-logo-image{

        width:138px;

    }

}

/* ==================================================
   COMMIT #023.2
   EDITOR'S PICKS
================================================== */

@media (max-width:992px){

    .editors-grid{

        grid-template-columns:1fr;

        gap:28px;

    }

    .editor-large{

        min-height:620px;

    }

    .editor-small-column{

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

        grid-template-rows:none;

        gap:28px;

    }

    .editor-small{

        min-height:320px;

    }

}



@media (max-width:768px){

    .editors-picks{

        padding:90px 0;

    }

    .editors-heading{

        margin-bottom:48px;

    }

    .editors-heading h2{

        font-size:42px;

    }

    .editor-large{

        min-height:520px;

    }

    .editor-content{

        left:28px;

        right:28px;

        bottom:30px;

        max-width:none;

    }

    .editor-content h3{

        font-size:38px;

    }

    .editor-content p{

        font-size:15px;

        line-height:1.7;

    }

    .editor-small-column{

        grid-template-columns:1fr;

    }

    .editor-small{

        min-height:260px;

    }

    .editor-overlay{

        left:24px;

        bottom:24px;

    }

    .editor-overlay h4{

        font-size:28px;

    }

}



@media (max-width:576px){

    .editors-heading h2{

        font-size:36px;

    }

    .editor-large{

        min-height:430px;

    }

    .editor-content{

        left:22px;

        right:22px;

        bottom:24px;

    }

    .editor-content h3{

        font-size:30px;

    }

    .editor-content p{

        display:none;

    }

    .editor-link{

        font-size:12px;

    }

    .editor-small{

        min-height:220px;

    }

    .editor-overlay h4{

        font-size:24px;

    }

}



@media (max-width:420px){

    .editors-picks{

        padding:70px 0;

    }

    .editors-heading span{

        font-size:11px;

    }

    .editors-heading h2{

        font-size:30px;

    }

    .editor-large{

        min-height:360px;

    }

    .editor-content h3{

        font-size:26px;

    }

    .editor-overlay h4{

        font-size:22px;

    }

}

/* ==================================================
   COMMIT #023.3
   COLLECTION BANNER
================================================== */

@media (max-width:992px){

    .collection-banner{

        padding:110px 0;

    }

    .collection-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .collection-content{

        max-width:100%;

        text-align:center;

    }

    .collection-actions{

        justify-content:center;

        display:flex;

    }

    .collection-title{

        font-size:56px;

    }

    .collection-description{

        max-width:700px;

        margin-left:auto;

        margin-right:auto;

    }

}



@media (max-width:768px){

    .collection-banner{

        padding:90px 0;

    }

    .collection-grid{

        gap:38px;

    }

    .collection-title{

        font-size:42px;

        line-height:1.12;

    }

    .collection-description{

        font-size:16px;

        line-height:1.8;

    }

    .collection-button{

        width:100%;

        max-width:300px;

    }

    .collection-image img{

        height:460px;

    }

}



@media (max-width:576px){

    .collection-banner{

        padding:70px 0;

    }

    .collection-title{

        font-size:34px;

    }

    .collection-description{

        font-size:15px;

    }

    .collection-button{

        height:50px;

        font-size:11px;

        letter-spacing:.18em;

    }

    .collection-image img{

        height:340px;

    }

}



@media (max-width:420px){

    .collection-title{

        font-size:30px;

    }

    .collection-description{

        line-height:1.7;

    }

    .collection-image img{

        height:280px;

    }

}

/* ==================================================
   COMMIT #023.4
   LIFESTYLE INSPIRATION
================================================== */

@media (max-width:992px){

    .lifestyle-inspiration{

        padding:110px 0;

    }

    .lifestyle-heading{

        margin:0 auto 55px;

        max-width:680px;

    }

    .lifestyle-heading h2{

        font-size:54px;

    }

    .lifestyle-grid{

        grid-template-columns:1fr;

        gap:28px;

    }

    .lifestyle-card{

        aspect-ratio:16/10;

    }

}



@media (max-width:768px){

    .lifestyle-inspiration{

        padding:90px 0;

    }

    .lifestyle-heading{

        margin-bottom:45px;

    }

    .lifestyle-heading h2{

        font-size:42px;

        line-height:1.15;

    }

    .lifestyle-heading p{

        font-size:16px;

        line-height:1.8;

    }

    .lifestyle-card{

        aspect-ratio:4/3;

    }

    .lifestyle-overlay{

        left:24px;

        bottom:24px;

    }

    .lifestyle-overlay h3{

        font-size:30px;

    }

}



@media (max-width:576px){

    .lifestyle-inspiration{

        padding:70px 0;

    }

    .lifestyle-heading h2{

        font-size:34px;

    }

    .lifestyle-heading p{

        font-size:15px;

    }

    .lifestyle-card{

        aspect-ratio:1/1;

    }

    .lifestyle-overlay{

        left:20px;

        bottom:20px;

    }

    .lifestyle-overlay h3{

        font-size:26px;

    }

}



@media (max-width:420px){

    .lifestyle-heading span{

        font-size:11px;

    }

    .lifestyle-heading h2{

        font-size:30px;

    }

    .lifestyle-overlay h3{

        font-size:22px;

    }

}

/* ==================================================
   COMMIT #023.5
   WHY HANIYEL
================================================== */

@media (max-width:992px){

    .why-haniyel{

        padding:110px 0;

    }

    .why-heading{

        max-width:680px;

        margin:0 auto 60px;

    }

    .why-heading h2{

        font-size:54px;

    }

    .why-grid{

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

        gap:24px;

    }

    .why-card{

        padding:42px 28px;

    }

}



@media (max-width:768px){

    .why-haniyel{

        padding:90px 0;

    }

    .why-heading{

        margin-bottom:48px;

    }

    .why-heading h2{

        font-size:42px;

        line-height:1.15;

    }

    .why-heading p{

        font-size:16px;

        line-height:1.8;

    }

    .why-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .why-card{

        padding:38px 24px;

    }

    .why-icon{

        width:64px;

        height:64px;

        margin-bottom:24px;

    }

    .why-icon svg{

        width:24px;

        height:24px;

    }

    .why-card h3{

        font-size:30px;

    }

}



@media (max-width:576px){

    .why-haniyel{

        padding:70px 0;

    }

    .why-heading h2{

        font-size:34px;

    }

    .why-heading p{

        font-size:15px;

    }

    .why-card{

        padding:34px 22px;

    }

    .why-card h3{

        font-size:26px;

    }

    .why-card p{

        font-size:14px;

        line-height:1.8;

    }

}



@media (max-width:420px){

    .why-heading span{

        font-size:11px;

    }

    .why-heading h2{

        font-size:30px;

    }

    .why-icon{

        width:58px;

        height:58px;

    }

    .why-icon svg{

        width:22px;

        height:22px;

    }

    .why-card h3{

        font-size:24px;

    }

}