/* ===================================================== */
/* 🔥 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 SECTION */
/* ===================================================== */

.home-product-section{

    margin-top:30px;

}

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

.home-product-header{

    margin-bottom:16px;

}

.home-product-title{

    font-size:24px;

    font-weight:700;

    margin:0;

    color:#111;

}

/* ===================================================== */
/* 🔥 PRODUCT GRID */
/* ===================================================== */

.home-product-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(220px,1fr));

    gap:18px;

}

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

.product-card{

    background:#fff;

    border-radius:14px;

    overflow:hidden;

    box-shadow:0 2px 8px rgba(0,0,0,.06);

    transition:.3s;

}

.product-card:hover{

    transform:translateY(-4px);

}

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

.product-card-image{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

}

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

.product-card-body{

    padding:14px;

}

.product-card-title{

    font-size:16px;

    font-weight:600;

    margin:0 0 10px;

    color:#111;

}

.product-card-price{

    font-size:18px;

    font-weight:700;

    color:#000;

}

/* ===================================================== */
/* 🔥 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;

}

.home-product-title-link{

    text-decoration:none;

    color:inherit;

    display:inline-block;

}

.home-product-title-link:hover{

    opacity:.8;

}

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

@media(max-width:768px){

    .home-slider-wrap{

        height:180px;

    }

    .home-slide-title{

        font-size:22px;

    }

    .home-slide-subtitle{

        font-size:14px;

    }

    .home-product-grid{

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

        gap:12px;

    }

    .product-card-image{

        height:160px;

    }

}

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

.home-css-ready{

    display:none;

}