/* ========================================
   UNIFIED PRODUCT GRID - RESPONSIVE
   ======================================== */

/* Force grid layout on all screens - NO LIST VIEW */
.product_main_div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 12px !important;
    background: #f8f8f8;
    justify-content: flex-start !important;
}

/* Perfect Product Card Design */
.product_main_div .product_item,
.p_service_main_div .product_item {
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 1px solid #e5e5e5 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    height: 100% !important;
}

.product_item:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-2px) !important;
    border-color: #d0d0d0 !important;
}

/* Image Container */
.product_item .product_img {
    width: 100%;
    overflow: hidden !important;
    background: #fafafa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.variant_popup_div .product_img {
    width: 40%;
    height: 100%;
}

.variant_popup_div .product_item .product_detail {
    gap: 0;
    justify-content: center;
    padding: 0;
}

.variant_popup_div .product_item .product_img {
    height: auto !important;
}

.variant_popup_div .product_item .product_detail {
    min-height: auto !important;
}

.product_item .product_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 8px !important;
    transition: transform 0.3s ease !important;
}

.product_item:hover .product_img img {
    transform: scale(1.05) !important;
}

/* Product Details Container */
.product_item .product_detail {
    padding: 14px;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    flex: 1 !important;
    min-height: 180px !important;
}

.variant_popup_body2 .product_detail {
    padding: 5px;

}

/* Product Description */
.product_item .prduct_desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.45 !important;
    margin: 0 0 4px 0 !important;
    color: #333 !important;
    font-weight: 500 !important;
    height: 33px !important;
}

/* Hide long description */
.product_item .product_long_desc {
    display: none !important;
}

/* Price Section - Main Container */
.product_price_div {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 0 !important;
}

/* Price Row with Discount and Quality */
.price_and_color_div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    min-height: 28px !important;
}

/* Left Side: Price Container */
.price_div {
    display: flex !important;
    align-items: center !important;
    column-gap: 8px !important;
    flex-wrap: wrap !important;
    flex: 1 !important;
}

/* Main Price */
.product_item .product_price {
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 700 !important;
    color: #000 !important;
    line-height: 1.3 !important;
}

/* Original Price (Strikethrough) */
.price_div .orginal_price {
    text-decoration: line-through !important;
    color: #999 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Discount Badge (in price row) - LIGHT GREEN */
.price_div .offer_div {
    background: #4caf50 !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    box-shadow: 0 1px 3px rgba(76, 175, 80, 0.3) !important;
}

/* Ensure all discount badges are light green */
.offer_main_div .offer_div:not(.quality-label) {
    background: #e5f7ee !important;
    color: #03753c !important;
}

/* Right Side: Quality Label Container */
.price_and_color_div .offer_main_div {
    margin: 0 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Quality Label - Only for quality text */
.offer_main_div .offer_div.quality-label,
.price_and_color_div>.offer_main_div .offer_div {
    background: #f0f0f0 !important;
    color: #666 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    max-width: 100px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Average Cost */
.avg_cost {
    color: #666 !important;
    font-size: 11px !important;
    margin: 4px 0 0 0 !important;
    display: block !important;
}

/* Color Selection */
.color_selection_div {
    margin-top: 4px !important;
}

/* Add to Cart Button */
.product_item .product_quantity {
    margin-top: 10px !important;
}

.product_item .default_add_btn,
.product_item .plus_minus_buttons {
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

.product_item .default_add_btn:hover {
    transform: scale(1.05) !important;
}

/* Wishlist Icon */
.product_item .favourite_btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: white !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* ===== MOBILE (Default) ===== */
.product_main_div .product_item,
.p_service_main_div .product_item {
    width: calc(50% - 6px) !important;
    padding: 0 !important;
}

.product_item .product_img {
    height: 160px !important;
}

.product_item .prduct_desc {
    font-size: 12px !important;
}

.product_item .product_price {
    font-size: 14px !important;
}

.price_div .orginal_price {
    font-size: 12px !important;
}

.product_item .default_add_btn,
.product_item .plus_minus_buttons {
    width: 70px !important;
    height: 30px !important;
    font-size: 12px !important;
}

/* ===== TABLET (501-768px) ===== */
@media (min-width: 501px) {
    .product_main_div {
        gap: 12px !important;
        padding: 12px !important;
    }

    .product_main_div .product_item,
    .p_service_main_div .product_item {
        width: calc(33.333% - 8px) !important;
    }

    .product_item .product_img {
        height: 180px !important;
    }

    .product_item .prduct_desc {
        font-size: 13px !important;
    }

    .product_item .product_price {
        font-size: 15px !important;
    }
}

/* ===== DESKTOP (769-1024px) ===== */
@media (min-width: 769px) {
    .product_main_div {
        gap: 14px !important;
        padding: 14px !important;
    }

    .product_main_div .product_item,
    .p_service_main_div .product_item {
        width: calc(25% - 10.5px) !important;
    }

    .product_item .product_img {
        height: 220px !important;
    }

    .product_item .product_detail {
        padding: 14px;
        gap: 0px !important;
    }

    .product_item .prduct_desc {
        font-size: 13px !important;
        height: 38px !important;
    }

    .product_item .product_price {
        font-size: 18px !important;
    }

    .price_div .orginal_price {
        font-size: 14px !important;
    }

    .price_div .offer_div {
        font-size: 11px !important;
    }

    .product_item .default_add_btn,
    .product_item .plus_minus_buttons {
        width: 85px !important;
        height: 34px !important;
        font-size: 13px !important;
    }
}

/* ===== LARGE DESKTOP (1025-1399px) ===== */
@media (min-width: 1025px) {

    .product_main_div .product_item,
    .p_service_main_div .product_item {
        width: calc(20% - 12px) !important;
    }

    .product_item .product_img {
        height: 200px !important;
    }
}

/* ===== EXTRA LARGE (≥1400px) ===== */
@media (min-width: 1400px) {

    .product_main_div .product_item,
    .p_service_main_div .product_item {
        width: calc(16.666% - 13px) !important;
    }

    .product_item .product_img {
        height: 200px !important;
    }
}

/* ===== ULTRA WIDE (≥1600px) ===== */
@media (min-width: 1600px) {

    .product_main_div .product_item,
    .p_service_main_div .product_item {
        width: calc(16.666% - 13px) !important;
    }
}

/* ===== HOVER EFFECTS (Desktop only) ===== */
@media (hover: hover) and (pointer: fine) {
    .product_item {
        cursor: pointer !important;
    }
}

/* Ensure grid is always active */
body .product_main_div {
    display: flex !important;
    flex-wrap: wrap !important;
}