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

/*

FILE:

frontend/product/product.css

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

USED BY

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

✅ frontend/product/product.html

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

JS MODULES USING THESE CLASSES

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

✅ product-card.js

.product-card
.product-card-link
.product-card-image
.product-card-image-wrap
.product-card-content
.product-card-title
.product-card-brand
.product-card-price
.product-card-mrp
.product-card-discount
.product-stock
.product-card-btn

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

✅ product-render.js

.product-grid
.product-loading
.product-error
.product-empty

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

✅ pages/product-page.js

.product-detail
.product-detail-image
.product-detail-info
.product-detail-title
.product-detail-price
.product-description
.product-actions
.buy-btn
.cart-btn

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

DOM IDS SUPPORTED

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

#productDetails

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

RENDER FLOW

product.html

↓

product-page.js

↓

product-api.js

↓

product-render.js

↓

product-card.js

↓

product.css

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

STATUS

✅ PRODUCT CARD UI READY

✅ PRODUCT GRID READY

✅ PRODUCT DETAIL READY

✅ MOBILE SAFE

✅ TABLET SAFE

✅ RESPONSIVE SAFE

✅ PRODUCTION SAFE

*/

/* ===================================================== */
/* 🔥 PRODUCT MODULE CSS */
/* 🔥 FINAL MOBILE SAFE VERSION */
/* 🔥 FINAL STABLE UPDATE */
/* ===================================================== */

/* ===================================================== */
/* 🔥 RESET */
/* ===================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

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

body{

    width:100%;

    overflow-x:hidden;

    background:#f5f5f5;

    font-family:
        Arial,
        sans-serif;

}

/* ===================================================== */
/* 🔥 PRODUCT PAGE */
/* ===================================================== */

.product-page{

    width:100%;

    min-height:100vh;

    background:#f5f5f5;

    padding:12px;

    overflow-x:hidden;

}

/* ===================================================== */
/* 🔥 PRODUCT CONTAINER */
/* ===================================================== */

.product-container{

    width:100%;

    max-width:1400px;

    margin:0 auto;

}

/* CSS ka baaki code yahin se unchanged rahega */
/* Top par sirf dependency block add hua hai */