/* ==========================================================
   Kasi Mattress
   Responsive
   File: assets/css/responsive.css
   Version: 8.2.0
   ========================================================== */


/* ==========================================================
   LARGE DESKTOP
   1400px ↓
========================================================== */

@media (max-width:1400px){

    .km-container{

        width:min(100%,calc(100% - 48px));

    }

}


/* ==========================================================
   DESKTOP
   1200px ↓
========================================================== */

@media (max-width:1200px){

    .km-container{

        width:min(100%,calc(100% - 40px));

    }

}


/* ==========================================================
   COMPACT DESKTOP
   1100px ↓
========================================================== */

@media (max-width:1100px){

    .km-header-actions .km-btn{

        padding-inline:18px;

        font-size:.92rem;

    }

}


/* ==========================================================
   TABLET
   992px ↓
========================================================== */

@media (max-width:992px){

    /* -----------------------------
       Header
    ----------------------------- */

    .km-navigation{

        display:none;

    }

    .km-menu-toggle{

        display:flex;

    }

    .km-mobile-nav{

        display:flex;

    }

    .km-mobile-overlay{

        display:block;

    }

    .km-header-actions .km-btn{

        display:none;

    }

    .km-logo img{

        height:54px;

    }


    /* -----------------------------
       Footer
       Tablet layout
    ----------------------------- */

    .km-footer-columns{

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

    }

    .km-footer-trust{

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

    }

    .km-footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}


/* ==========================================================
   MOBILE
   768px ↓
========================================================== */

@media (max-width:768px){

    html{

        font-size:15px;

    }

    .km-container{

        width:calc(100% - 32px);

    }

    section{

        padding:70px 0;

    }

    h1{

        font-size:2.2rem;

    }

    h2{

        font-size:1.8rem;

    }

    h3{

        font-size:1.3rem;

    }


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

    .km-header{

        position:sticky;

    }

    .km-header .km-container{

        height:72px;

    }

    .km-header-inner{

        gap:12px;

    }

    .km-logo img{

        height:48px;

    }


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

    /*
    |--------------------------------------------------------------------------
    | Mobile Footer Strategy
    |--------------------------------------------------------------------------
    |
    | Keep:
    |   - Footer brand
    |   - Social section
    |   - Footer bottom / legal
    |
    | Hide:
    |   1. Footer navigation
    |   2. Trust badges
    |   3. Footer CTA
    |
    */


    /* ------------------------------------------------------
       1. FOOTER NAVIGATION
       ------------------------------------------------------ */

    .km-footer-columns{

        display:none !important;

    }


    /* ------------------------------------------------------
       2. TRUST BADGES
       ------------------------------------------------------ */

    .km-footer-trust{

        display:none !important;

    }


    /* ------------------------------------------------------
       3. FOOTER CALL TO ACTION
       ------------------------------------------------------ */

    .km-footer-cta{

        display:none !important;

    }


    /* ------------------------------------------------------
       Footer Brand
       ------------------------------------------------------ */

    .km-footer-brand{

        padding-bottom:1.25rem;

    }


    /* ------------------------------------------------------
       Footer Logo
       ------------------------------------------------------ */

    .km-footer-logo img{

        height:90px;

    }


    /* ------------------------------------------------------
       Footer Legal
       ------------------------------------------------------ */

    .km-footer-legal{

        justify-content:center;

        gap:1rem;

    }

}


/* ==========================================================
   SMALL MOBILE
   576px ↓
========================================================== */

@media (max-width:576px){

    html{

        font-size:14px;

    }

    .km-container{

        width:calc(100% - 24px);

    }

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.6rem;

    }

    h3{

        font-size:1.2rem;

    }


    /* -----------------------------
       Header
    ----------------------------- */

    .km-header .km-container{

        height:68px;

    }

    .km-logo img{

        height:42px;

    }


    /* -----------------------------
       Footer
    ----------------------------- */

    .km-footer-logo img{

        height:76px;

    }

}


/* ==========================================================
   EXTRA SMALL
   400px ↓
========================================================== */

@media (max-width:400px){

    .km-container{

        width:calc(100% - 20px);

    }

    h1{

        font-size:1.8rem;

    }

    h2{

        font-size:1.45rem;

    }

    h3{

        font-size:1.1rem;

    }

    .km-logo img{

        height:38px;

    }

}

/* ==========================================================
   MOBILE FOOTER — HIDE SECONDARY CONTENT
   768px ↓
========================================================== */

@media (max-width:768px){

    /* Footer navigation */
    footer.km-footer .km-footer-columns{
        display:none !important;
    }

    /* Trust badges */
    footer.km-footer .km-footer-trust{
        display:none !important;
    }

    /* Footer CTA */
    footer.km-footer .km-footer-cta{
        display:none !important;
    }

}


/* ==========================================================
   SMALL MOBILE
   576px ↓
========================================================== */

@media (max-width:576px){

    footer.km-footer .km-footer-columns,
    footer.km-footer .km-footer-trust,
    footer.km-footer .km-footer-cta{
        display:none !important;
    }

}


/* ==========================================================
   EXTRA SMALL
   400px ↓
========================================================== */

@media (max-width:400px){

    footer.km-footer .km-footer-columns,
    footer.km-footer .km-footer-trust,
    footer.km-footer .km-footer-cta{
        display:none !important;
    }

}