/* ===================================================== */
/* 🔥 FILE INFO */
/* 🔥 DEPENDENCY MAP */
/* ===================================================== */

/*

FILE:

frontend/home/home.css

======================================================

USED BY

======================================================

✅ frontend/home/home.html

✅ frontend/home/home.js

✅ frontend/home/home-render.js

✅ frontend/home/home-products.js

✅ frontend/home/home-slider.js

======================================================

REQUIRED DOM IDS

======================================================

✅ app

✅ homeSlider

✅ homeProducts

✅ categoryBar

✅ categorySidebar

✅ homeCategoryTree

======================================================

REQUIRED CLASSES FROM JS

======================================================

HOME MODULE

✅ home-page
✅ home-container
✅ home-loading
✅ home-error
✅ home-empty-state

------------------------------------------------------

HOME SLIDER MODULE

✅ home-slider-wrap
✅ home-slider-track
✅ home-slide
✅ home-slide.active
✅ home-slide-image
✅ home-slide-overlay
✅ home-slide-title
✅ home-slide-subtitle
✅ home-slider-dots
✅ home-slider-dot
✅ home-slider-dot.active

------------------------------------------------------

HOME PRODUCTS MODULE

✅ home-product-section
✅ home-product-header
✅ home-product-title-link
✅ home-product-title

✅ home-products-loading
✅ home-products-error
✅ home-products-empty

------------------------------------------------------

PRODUCT MODULE

✅ product-card
✅ product-card-image
✅ product-card-body
✅ product-card-title
✅ product-card-price

------------------------------------------------------

CATEGORY MODULE

Expected From Category Render

✅ category-bar-wrap
✅ category-sidebar-wrap
✅ home-category-tree

======================================================

RENDER FLOW

======================================================

home.html

↓

home.js

↓

home-render.js

↓

home-slider.js

↓

home-products.js

↓

product-render.js

======================================================

STATUS

======================================================

✅ HOME CSS READY

✅ HOME SLIDER READY

✅ HOME PRODUCTS READY

✅ PRODUCT CARD SUPPORT READY

✅ CATEGORY UI SUPPORT READY

✅ MOBILE READY

✅ ROUTE SAFE

✅ PRODUCTION SAFE

======================================================

HOME FOLDER STATUS

======================================================

✅ home.js

✅ home-render.js

✅ home-products.js

✅ home-slider.js

✅ home.css

🎉 HOME FOLDER COMPLETE

======================================================

*/

/* ===================================================== */
/* 🔥 HOME PAGE STYLES */
/* 🔥 FINAL CLEAN VERSION */
/* ===================================================== */

/* ===================================================== */
/* 🔥 HOME MAIN */
/* ===================================================== */

.home-page{

    width:100%;

    min-height:100vh;

    background:#f5f5f5;

}

/* ===================================================== */
/* 🔥 HOME CONTAINER */
/* ===================================================== */

.home-container{

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding:12px;

    box-sizing:border-box;

}

/* ===================================================== */
/* 🔥 HOME SLIDER */
/* ===================================================== */

.home-slider-wrap{

    position:relative;

    width:100%;

    height:240px;

    overflow:hidden;

    border-radius:14px;

    background:#000;

    margin-bottom:20px;

}

.home-slider-track{

    width:100%;

    height:100%;

    position:relative;

}

.home-slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transition:all .4s ease;

}

.home-slide.active{

    opacity:1;

    visibility:visible;

    z-index:2;

}

.home-slide-image{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.home-slide-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.35);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#fff;

    padding:20px;

}

.home-slide-title{

    font-size:32px;

    font-weight:700;

    margin:0 0 10px;

}

.home-slide-subtitle{

    font-size:18px;

    margin:0;

}

/* ===================================================== */
/* 🔥 SLIDER DOTS */
/* ===================================================== */

.home-slider-dots{

    position:absolute;

    left:50%;

    bottom:14px;

    transform:translateX(-50%);

    display:flex;

    gap:10px;

    z-index:5;

}

.home-slider-dot{

    width:12px;

    height:12px;

    border:none;

    border-radius:50%;

    background:#ffffff88;

    cursor:pointer;

    transition:.3s;

}

.home-slider-dot.active{

    background:#fff;

    transform:scale(1.2);

}


/* ===================================================== */
/* 🔥 PRODUCT HEADER */
/* ===================================================== */

.home-product-header{

    margin-bottom:16px;

}





/* ===================================================== */
/* 🔥 PRODUCT IMAGE */
/* ===================================================== */

.product-card-image{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

}

/* ===================================================== */
/* 🔥 PRODUCT BODY */
/* ===================================================== */

.product-card-body{

    padding:14px;

}



/* ===================================================== */
/* 🔥 LOADING */
/* ===================================================== */

.home-loading,
.home-products-loading{

    padding:40px;

    text-align:center;

    font-size:18px;

    font-weight:600;

}

/* ===================================================== */
/* 🔥 ERROR */
/* ===================================================== */

.home-error,
.home-products-error{

    padding:40px;

    text-align:center;

    color:red;

    font-size:18px;

    font-weight:600;

}

/* ===================================================== */
/* 🔥 EMPTY */
/* ===================================================== */

.home-empty-state,
.home-products-empty{

    padding:40px;

    text-align:center;

    font-size:18px;

    font-weight:600;

    color:#777;

}



/* ===================================================== */
/* 🔥 MOBILE */
/* ===================================================== */

@media(max-width:768px){

    .home-slider-wrap{

        height:180px;

    }

    .home-slide-title{

        font-size:22px;

    }

    .home-slide-subtitle{

        font-size:14px;

    }


 
}
/* ===================================================== */
/* 🔥 HOME SLIDER CONTAINER */
/* ===================================================== */

.home-slider{

    width:100%;

    margin-bottom:20px;

}
/* ===================================================== */
/* 🔥 READY */
/* ===================================================== */

.home-css-ready{

    display:none;

}
/* ===================================================== */
/* 🔥 HOME PRODUCT POLISHING */
/* ===================================================== */

.home-product-section{

    margin-top:40px;

}

.home-product-header{

    margin-bottom:16px;

}
.home-product-title{

    display:inline-flex !important;
    align-items:center !important;

    padding:10px 22px !important;

    background:linear-gradient(
        135deg,
        #fff7d6,
        #ffd86b
    ) !important;

    color:#111 !important;

    font-size:24px !important;

    font-weight:800 !important;
    letter-spacing: 1px !important;

    border:1px solid #f0c94d !important;

    border-radius:999px !important;

    box-shadow:
        0 6px 18px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.7) !important;

    width: fit-content !important;
    display: flex !important;

    margin:0 auto 24px auto !important;

    text-align:center !important;

    transition:.25s !important;
}

.home-product-title:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.home-product-title-link{

    text-decoration:none;

    color:inherit;

}

.home-product-title-link:hover{

    opacity:1;

}
    
/* ===================================================== */
/* 🔥 CHILD CATEGORY TITLE */
/* ===================================================== */

.home-product-section h3{

    font-size:24px;

    font-weight:700;

    margin:0 0 14px;

    color:#111;

}



/* ===================================================== */
/* 🔥 PRODUCT CARD */
/* ===================================================== */

.product-card{

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 3px 12px rgba(0,0,0,.08);

    transition:all .25s ease;

}

.product-card:hover{

    transform:translateY(-5px);

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

}

/* ===================================================== */
/* 🔥 PRODUCT IMAGE */
/* ===================================================== */



/* ===================================================== */
/* 🔥 PRODUCT BODY */
/* ===================================================== */

.product-card-body{

    padding:16px;

}

.product-card-title{

    font-size:16px;

    font-weight:600;

    line-height:1.4;

    margin:0 0 10px;

    color:#111;

}

.product-card-price{

    font-size:20px;

    font-weight:700;

    color:#000;

}

/* ===================================================== */
/* 🔥 COMING SOON CARD */
/* ===================================================== */

.product-coming-soon{

    width:100%;

    height:240px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f2f2f2;

    border-radius:12px;

    color:#777;

    font-size:18px;

    font-weight:600;

}


/* ===================================== */
/* FINAL GRID OVERRIDE */
/* ===================================== */

.home-product-grid{

    display:grid !important;

    grid-template-columns:repeat(4,minmax(0,1fr)) !important;

    gap:20px !important;

    align-items:start;

}

.home-category-product-block{

    width:100%;

    min-width:0;

}
/* ===================================== */
/* HOME FULL WIDTH FIX */
/* ===================================== */

.category-layout{
    display:block !important;
}

.category-sidebar-wrap{
    display:none !important;
}

.category-main{
    width:100% !important;
    max-width:1400px !important;
    margin:0 auto !important;
    padding:0 20px !important;
    box-sizing:border-box;
}

.home-page{
    width:100% !important;
}

.home-slider{
    width:100% !important;
}

#homeProducts{
    width:100% !important;
}

/* ===================================== */
/* HOME FULL WIDTH GRID FIX */
/* ===================================== */


.home-product-title:hover{

    background:#f3f3f3 !important;

    color:#111 !important;

    border-color:#dcdcdc !important;

    box-shadow:0 10px 28px rgba(0,0,0,.12) !important;

}



/* ===================================== */
/* CHILD CATEGORY BUTTON */
/* ===================================== */

.home-child-title{

    display:inline-block;

    padding:8px 16px;

    background:#f8f8f8;

    border:1px solid #e5e5e5;

    border-radius:10px;

    cursor:pointer;

    transition:.25s;

}


/* ===================================== */
/* SAME HEIGHT PRODUCT CARDS */
/* ===================================== */

.home-category-product-block{

    display:block;



    height:auto;

}

/* ===================================== */
/* SAME SIZE IMAGES */
/* ===================================== */

.home-category-product-block img{

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:12px;

}
@media (max-width:768px){

    .home-product-grid{
        display:grid !important;
        grid-template-columns:repeat(2,1fr) !important;
        gap:10px !important;
    }

    .home-category-product-block{
        width:100% !important;
        min-width:0 !important;
    }

    .product-card{
        width:100% !important;
    }

    .product-card-image,
    .home-category-product-block img{
        height:140px !important;
        width:100% !important;
        object-fit:cover !important;
    }

}
/* ===================================================== */
/* 🔥 MOBILE */
/* ===================================================== */

@media(max-width:768px){

  .home-product-title{
    font-size:28px !important;
    padding:14px 32px !important;
    background:linear-gradient(135deg,#fff7d6,#ffd86b) !important;
    border:1px solid #f0c94d !important;
    border-radius:999px !important;
}
    .home-product-section h3{
        font-size:16px;
    }

    .home-child-title{
        font-size:16px;
        padding:6px 12px;
        margin-bottom:8px;
    }

    .home-product-grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .product-card-image{
        height:140px;
    }

    .product-card-title{
        font-size:14px;
    }

    .product-card-price{
        font-size:16px;
    }

    .home-category-product-block img{
        height:140px;
    }

}
/* ===================================== */
/* MOBILE CARD HEIGHT FIX */
/* ===================================== */

@media (max-width:768px){

    .home-category-product-block{
        display:block !important;
        height:auto !important;
    }

    .product-card{
        height:auto !important;
        min-height:auto !important;
    }

    .product-card-body{
        padding:10px !important;
    }

    .home-product-grid{
        align-items:start !important;
    }

}
.home-child-title{
    font-size:18px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    transition:all .25s ease !important;
}

.home-child-title:hover{
    background:#ff9900 !important;
    color:#fff !important;
    border-color:#ff9900 !important;
    box-shadow:0 6px 16px rgba(255,153,0,.35) !important;
}
/* ================================================= */
/* 🔥 FMCG + CHILD CATEGORY POLISH */
/* ================================================= */

.home-product-title{

    font-size:20px !important;

    padding:8px 18px !important;

    border-radius:50px !important;

    margin:0 auto 18px auto !important;

}

.home-product-section{

    text-align:center !important;

}

.home-product-section h3{

    display:inline-block !important;

    font-size:18px !important;

    font-weight:600 !important;

    padding:6px 16px !important;

    border-radius:30px !important;

    background:#fff7e0 !important;

    margin:0 auto 12px auto !important;

}

.home-category-product-block{

    text-align:center !important;

}