/* ==========================================================
   Kasi Mattress
   File: home.css
   Folder: assets/css/pages
   Version: 1.0.0
   Last Updated: 2026-07-23
   ========================================================== */

/* ==========================================================
   Hero Section
   ========================================================== */

.km-hero {

    position: relative;

    overflow: hidden;

    padding: var(--space-24) 0;

    background:
        linear-gradient(135deg,
            #f8fbff 0%,
            #eef5fb 100%);

}

.km-hero::before {

    content: "";

    position: absolute;

    top: -120px;

    right: -120px;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: rgba(15, 76, 129, .05);

}

.km-hero-grid {

    display: grid;

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

    gap: var(--space-16);

    align-items: center;

}

/* ==========================================================
   Hero Content
   ========================================================== */

.km-hero-content {

    position: relative;

    z-index: 2;

}

.km-hero-label {

    display: inline-flex;

    align-items: center;

    gap: .6rem;

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

    padding: 10px 18px;

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

    background: rgba(15,76,129,.08);

    color: var(--primary);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

}

.km-hero h1 {

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

    font-size: clamp(2.8rem,5vw,4.5rem);

    line-height: 1.05;

}

.km-hero h1 span {

    color: var(--primary);

}

.km-hero p {

    max-width: 620px;

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

    font-size: var(--font-size-lg);

    line-height: 1.8;

}

/* ==========================================================
   Hero Buttons
   ========================================================== */

.km-hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: var(--space-4);

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

}

/* ==========================================================
   Hero Features
   ========================================================== */

.km-hero-features {

    display: flex;

    flex-wrap: wrap;

    gap: var(--space-6);

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

}

.km-hero-features div {

    display: flex;

    align-items: center;

    gap: .6rem;

    font-weight: var(--font-weight-medium);

}

.km-hero-features i {

    color: var(--accent);

}

/* ==========================================================
   Hero Stats
   ========================================================== */

.km-hero-stats {

    display: flex;

    gap: var(--space-10);

}

.km-hero-stats div {

    display: flex;

    flex-direction: column;

}

.km-hero-stats strong {

    font-size: var(--font-size-2xl);

    color: var(--primary);

}

.km-hero-stats span {

    color: var(--text-light);

    font-size: var(--font-size-sm);

}

/* ==========================================================
   Hero Image
   ========================================================== */

.km-hero-image {

    position: relative;

}

.km-hero-image-wrapper {

    position: relative;

}

.km-hero-image img {

    width: 100%;

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

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

}

/* ==========================================================
   Floating Cards
   ========================================================== */

.km-hero-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 18px;

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

    background: var(--white);

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

}

.km-hero-card i {

    display: grid;

    place-items: center;

    width: 54px;

    height: 54px;

    border-radius: 50%;

    background: var(--primary);

    color: var(--white);

    font-size: 1.2rem;

}

.km-card-top {

    top: 8%;

    left: -40px;

}

.km-card-bottom {

    right: -30px;

    bottom: 10%;

}

/* ==========================================================
   Shared Section Heading
   ========================================================== */

.km-section-heading {

    max-width: 760px;

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

    text-align: center;

}

.km-section-label {

    display: inline-block;

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

    color: var(--primary);

    font-weight: var(--font-weight-semibold);

    text-transform: uppercase;

    letter-spacing: 1px;

    font-size: var(--font-size-sm);

}

.km-section-heading h2 {

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

    font-size: clamp(2rem,4vw,3rem);

}

.km-section-heading p {

    margin: 0 auto;

    max-width: 680px;

    font-size: var(--font-size-lg);

}

/* ==========================================================
   Featured Categories
   ========================================================== */

.km-categories-grid {

    display: grid;

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

    gap: var(--space-8);

}

.km-category-card {

    overflow: hidden;

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

    background: var(--white);

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

    transition: all var(--transition-normal);

}

.km-category-card:hover {

    transform: translateY(-8px);

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

}

.km-category-image {

    overflow: hidden;

}

.km-category-image img {

    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    transition: transform .4s ease;

}

.km-category-card:hover img {

    transform: scale(1.05);

}

.km-category-content {

    padding: var(--space-8);

}

.km-category-icon {

    display: inline-grid;

    place-items: center;

    width: 60px;

    height: 60px;

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

    border-radius: 50%;

    background: rgba(15,76,129,.08);

    color: var(--primary);

    font-size: 1.3rem;

}

.km-category-content h3 {

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

}

.km-category-link {

    display: inline-flex;

    align-items: center;

    gap: .6rem;

    margin-top: var(--space-5);

    color: var(--primary);

    font-weight: var(--font-weight-semibold);

}

/* ==========================================================
   Featured Products
   ========================================================== */

.km-products {

    background: var(--white);

}

.km-products-grid {

    display: grid;

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

    gap: var(--space-8);

}

.km-product-card {

    position: relative;

    overflow: hidden;

    background: var(--white);

    border: 1px solid var(--border);

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

    transition: all var(--transition-normal);

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

}

.km-product-card:hover {

    transform: translateY(-8px);

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

}

.km-product-image {

    position: relative;

    overflow: hidden;

    background: #f8f9fb;

}

.km-product-image img {

    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: contain;

    padding: var(--space-6);

    transition: transform .4s ease;

}

.km-product-card:hover .km-product-image img {

    transform: scale(1.05);

}

/* Product Badge */

.km-product-badge {

    position: absolute;

    top: 16px;

    left: 16px;

    padding: 6px 12px;

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

    background: var(--accent);

    color: var(--white);

    font-size: var(--font-size-xs);

    font-weight: var(--font-weight-bold);

    text-transform: uppercase;

}

/* Wishlist */

.km-product-favourite {

    position: absolute;

    top: 16px;

    right: 16px;

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 50%;

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

    color: var(--text);

    transition: all var(--transition-normal);

}

.km-product-favourite:hover {

    background: var(--primary);

    color: var(--white);

}

.km-product-content {

    padding: var(--space-6);

}

.km-product-category {

    display: inline-block;

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

    color: var(--primary);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

}

.km-product-title {

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

    font-size: var(--font-size-xl);

}

.km-product-title a:hover {

    color: var(--primary);

}

.km-product-rating {

    display: flex;

    align-items: center;

    gap: .35rem;

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

}

.km-product-rating i {

    color: var(--accent);

    font-size: .9rem;

}

.km-product-rating span {

    color: var(--text-light);

    font-size: var(--font-size-sm);

}

.km-product-price {

    display: flex;

    align-items: center;

    gap: .8rem;

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

}

.km-price {

    font-size: var(--font-size-2xl);

    font-weight: var(--font-weight-bold);

    color: var(--primary);

}

.km-old-price {

    color: var(--text-muted);

    text-decoration: line-through;

}

.km-product-actions {

    display: flex;

    gap: var(--space-3);

}

.km-product-actions .km-btn {

    flex: 1;

}

/* ==========================================================
   Why Choose Us
   ========================================================== */

.km-why {

    position: relative;

}

.km-why-grid {

    display: grid;

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

    gap: var(--space-8);

}

.km-why-card {

    padding: var(--space-10);

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

    background: var(--white);

    text-align: center;

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

    transition: all var(--transition-normal);

}

.km-why-card:hover {

    transform: translateY(-8px);

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

}

.km-why-icon {

    width: 80px;

    height: 80px;

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

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: rgba(15,76,129,.08);

    color: var(--primary);

    font-size: 2rem;

    transition: all var(--transition-normal);

}

.km-why-card:hover .km-why-icon {

    background: var(--primary);

    color: var(--white);

    transform: rotateY(180deg);

}

.km-why-card h3 {

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

    font-size: var(--font-size-xl);

}

.km-why-card p {

    margin: 0;

    color: var(--text-light);

    line-height: 1.8;

}

/* ==========================================================
   Scroll Animation
   ========================================================== */

.km-product-card,
.km-category-card,
.km-why-card {

    animation: fadeUp .7s ease both;

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* ==========================================================
   Responsive Design
   ========================================================== */

/* ---------- Large Desktop ---------- */

@media (max-width: 1400px) {

    .km-hero-grid,
    .km-products-grid {

        gap: var(--space-10);

    }

}

/* ---------- Laptop ---------- */

@media (max-width: 1200px) {

    .km-categories-grid {

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

    }

    .km-products-grid {

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

    }

    .km-why-grid {

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

    }

    .km-hero-grid {

        gap: var(--space-12);

    }

}

/* ---------- Tablet ---------- */

@media (max-width: 992px) {

    .km-hero {

        padding: var(--space-20) 0;

    }

    .km-hero-grid {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .km-hero-content {

        order: 2;

    }

    .km-hero-image {

        order: 1;

        max-width: 650px;

        margin-inline: auto;

    }

    .km-hero-buttons,
    .km-hero-features,
    .km-hero-stats {

        justify-content: center;

    }

    .km-card-top,
    .km-card-bottom {

        display: none;

    }

    .km-products-grid {

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

    }

}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {

    .km-section {

        padding: var(--space-16) 0;

    }

    .km-section-heading {

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

    }

    .km-section-heading h2 {

        font-size: 2rem;

    }

    .km-hero h1 {

        font-size: 2.5rem;

    }

    .km-hero p {

        font-size: 1rem;

    }

    .km-categories-grid,
    .km-products-grid,
    .km-why-grid {

        grid-template-columns: 1fr;

    }

    .km-hero-buttons {

        flex-direction: column;

    }

    .km-hero-buttons .km-btn {

        width: 100%;

    }

    .km-product-actions {

        flex-direction: column;

    }

}

/* ---------- Small Mobile ---------- */

@media (max-width: 480px) {

    .km-hero {

        padding: var(--space-16) 0;

    }

    .km-hero-label {

        font-size: .75rem;

    }

    .km-hero h1 {

        font-size: 2rem;

    }

    .km-hero-features {

        flex-direction: column;

        align-items: center;

    }

    .km-hero-stats {

        flex-direction: column;

        gap: var(--space-6);

        text-align: center;

    }

    .km-category-content,
    .km-product-content,
    .km-why-card {

        padding: var(--space-6);

    }

}

/* ==========================================================
   Utilities
   ========================================================== */

.km-shadow-hover:hover {

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

}

.km-scale-hover {

    transition: transform var(--transition-normal);

}

.km-scale-hover:hover {

    transform: scale(1.03);

}

.km-rounded-xl {

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

}

.km-rounded-2xl {

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

}

.km-overflow-hidden {

    overflow: hidden;

}

/* ==========================================================
   MILESTONE 4B
   Mattress Sizes
   ========================================================== */

.km-sizes {

    background: var(--background);

}

.km-sizes-grid {

    display: grid;

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

    gap: var(--space-6);

}

.km-size-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: var(--space-8);

    background: var(--white);

    border: 1px solid var(--border);

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

    text-align: center;

    transition: all var(--transition-normal);

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

}

.km-size-card:hover {

    transform: translateY(-6px);

    border-color: var(--primary);

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

}

.km-size-card h3 {

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

    color: var(--primary);

    font-size: var(--font-size-xl);

}

.km-size-card p {

    margin: 0;

    color: var(--text-light);

}

/* ==========================================================
   Customer Reviews
   ========================================================== */

.km-reviews {

    background: var(--white);

}

.km-reviews-grid {

    display: grid;

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

    gap: var(--space-8);

}

.km-review-card {

    padding: var(--space-8);

    background: var(--background);

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

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

    transition: all var(--transition-normal);

}

.km-review-card:hover {

    transform: translateY(-6px);

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

}

.km-stars {

    display: flex;

    gap: 4px;

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

    color: var(--accent);

}

.km-review-card h4 {

    margin-top: var(--space-5);

    margin-bottom: 4px;

}

.km-review-card span {

    font-size: var(--font-size-sm);

    color: var(--text-muted);

}

/* ==========================================================
   Delivery Banner
   ========================================================== */

.km-delivery {

    padding: var(--space-20) 0;

    background: linear-gradient(135deg,
        var(--primary),
        var(--primary-dark));

    color: var(--white);

}

.km-delivery-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: var(--space-8);

}

.km-delivery h2 {

    color: var(--white);

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

}

.km-delivery p {

    color: rgba(255,255,255,.85);

    margin: 0;

}

/* ==========================================================
   Trust Badges
   ========================================================== */

.km-trust {

    background: var(--background);

}

.km-trust-grid {

    display: grid;

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

    gap: var(--space-6);

}

.km-trust-item {

    padding: var(--space-8);

    background: var(--white);

    text-align: center;

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

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

    transition: all var(--transition-normal);

}

.km-trust-item:hover {

    transform: translateY(-6px);

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

}

.km-trust-item i {

    font-size: 2.4rem;

    color: var(--primary);

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

}

.km-trust-item h3 {

    margin: 0;

}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width:1200px){

    .km-sizes-grid{

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

    }

    .km-trust-grid{

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

    }

}

@media (max-width:768px){

    .km-sizes-grid,

    .km-reviews-grid,

    .km-trust-grid{

        grid-template-columns:1fr;

    }

    .km-delivery-content{

        flex-direction:column;

        text-align:center;

    }

}