/* =====================================================
   KASI MATTRESS
   GLOBAL LAYOUT
   Version: 1.1.0
   ===================================================== */

/* ==========================================
   CONTAINER
========================================== */

.km-container{
    width:100%;
    max-width:var(--container-width);
    margin:0 auto;
    padding-inline:var(--container-padding);
}

/* ==========================================
   SECTIONS
========================================== */

section{
    position:relative;
    padding:var(--section-padding) 0;
}

.km-section{
    padding:var(--section-padding) 0;
}

.km-section-sm{
    padding:var(--space-16) 0;
}

.km-section-lg{
    padding:var(--space-24) 0;
}

.km-section-alt{
    background:var(--surface-alt);
}

/* ==========================================
   PRODUCT DETAIL PAGE OVERRIDE
   Product pages manage their own section
   spacing so the global section padding does
   not create excessive vertical gaps.
========================================== */

.km-product-page section{
    padding:0;
}

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

.km-section-header{

    max-width:700px;

    margin:0 auto var(--space-16);

    text-align:center;

}

.km-section-header h1,
.km-section-header h2{

    margin-bottom:var(--space-4);

}

.km-section-header p{

    margin:0;

}

/* ==========================================
   GRID
========================================== */

.km-grid{

    display:grid;

    gap:var(--space-8);

}

.km-grid-2{

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

}

.km-grid-3{

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

}

.km-grid-4{

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

}

.km-grid-auto{

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

}

/* ==========================================
   FLEX
========================================== */

.km-flex{

    display:flex;

}

.km-flex-column{

    display:flex;

    flex-direction:column;

}

.km-flex-wrap{

    flex-wrap:wrap;

}

.km-flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.km-flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.km-align-center{

    align-items:center;

}

.km-justify-center{

    justify-content:center;

}

.km-justify-between{

    justify-content:space-between;

}

/* ==========================================
   GAPS
========================================== */

.km-gap-sm{

    gap:var(--space-4);

}

.km-gap{

    gap:var(--space-6);

}

.km-gap-lg{

    gap:var(--space-8);

}

/* ==========================================
   WIDTHS
========================================== */

.km-w-25{

    width:25%;

}

.km-w-50{

    width:50%;

}

.km-w-75{

    width:75%;

}

.km-w-100{

    width:100%;

}

.km-max-600{

    max-width:600px;

}

.km-max-700{

    max-width:700px;

}

.km-max-900{

    max-width:900px;

}

/* ==========================================
   TEXT
========================================== */

.km-text-left{

    text-align:left;

}

.km-text-center{

    text-align:center;

}

.km-text-right{

    text-align:right;

}

/* ==========================================
   MARGIN UTILITIES
========================================== */

.km-mt-0{margin-top:0;}

.km-mt-1{margin-top:var(--space-2);}
.km-mt-2{margin-top:var(--space-4);}
.km-mt-3{margin-top:var(--space-6);}
.km-mt-4{margin-top:var(--space-8);}
.km-mt-5{margin-top:var(--space-10);}

.km-mb-0{margin-bottom:0;}

.km-mb-1{margin-bottom:var(--space-2);}
.km-mb-2{margin-bottom:var(--space-4);}
.km-mb-3{margin-bottom:var(--space-6);}
.km-mb-4{margin-bottom:var(--space-8);}
.km-mb-5{margin-bottom:var(--space-10);}

/* ==========================================
   PADDING UTILITIES
========================================== */

.km-p-1{

    padding:var(--space-4);

}

.km-p-2{

    padding:var(--space-6);

}

.km-p-3{

    padding:var(--space-8);

}

/* ==========================================
   BACKGROUNDS
========================================== */

.km-bg-white{

    background:var(--white);

}

.km-bg-light{

    background:var(--background-color);

}

.km-bg-primary{

    background:var(--primary);

    color:var(--white);

}

.km-bg-dark{

    background:var(--surface-dark);

    color:var(--white);

}

/* ==========================================
   DISPLAY
========================================== */

.km-hidden{

    display:none !important;

}

.km-block{

    display:block;

}

.km-inline-block{

    display:inline-block;

}

.km-d-flex{

    display:flex;

}

.km-d-grid{

    display:grid;

}

/* ==========================================
   BORDERS & SHADOWS
========================================== */

.km-rounded{

    border-radius:var(--radius-lg);

}

.km-rounded-xl{

    border-radius:var(--radius-2xl);

}

.km-shadow-sm{

    box-shadow:var(--shadow-sm);

}

.km-shadow-md{

    box-shadow:var(--shadow-md);

}

.km-shadow-lg{

    box-shadow:var(--shadow-lg);

}

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

@media (max-width:1024px){

    .km-grid-4{

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

    }

}

@media (max-width:768px){

    section{

        padding:var(--section-padding-mobile) 0;

    }

    /*
     * Keep product detail sections independent
     * from the mobile global section padding.
     */
    .km-product-page section{

        padding:0;

    }

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

        grid-template-columns:1fr;

    }

    .km-flex-between{

        flex-direction:column;

        align-items:flex-start;

        gap:var(--space-6);

    }

    .km-w-25,
    .km-w-50,
    .km-w-75{

        width:100%;

    }

    .km-section-header{

        margin-bottom:var(--space-12);

    }

}