/* ========================================
   CLEAN SHOP PAGE DESIGN - DESKTOP & MOBILE
   ======================================== */

/* Desktop: 3-Column CSS Grid Layout */
.shop-page-section .our-shop .shop-grid-content {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Product Card Container - CRITICAL: Must target items inside grid */
.shop-page-section .shop-grid-content .shop-block-one {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: relative !important;
    display: block !important;
}

/* Product Card Inner Box */
.shop-page-section .shop-grid-content .shop-block-one .inner-box {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 15px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.shop-page-section .shop-grid-content .shop-block-one .inner-box:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
    border-color: #d0d0d0 !important;
    transform: translateY(-2px) !important;
}

/* Image Area */
.shop-page-section .shop-grid-content .shop-block-one .inner-box .image-box {
    position: relative !important;
    background: #f8f8f8 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 15px !important;
    padding: 10px !important;
}

.shop-page-section .shop-grid-content .shop-block-one .inner-box .image-box .image {
    max-width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
}

.shop-page-section .shop-grid-content .shop-block-one .inner-box .image-box .image img {
    width: 100% !important;
    height: 220px !important;
    object-fit: contain !important;
    display: block !important;
}

/* ========================================
   MODERN CORNER RIBBON & GLASSMORPHISM ICONS
   ======================================== */

/* Corner Ribbon for Discount Badge */
.discount-corner-ribbon {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 60px 60px 0 0 !important;
    border-color: #25D366 transparent transparent transparent !important;
    z-index: 3 !important;
    overflow: visible !important;
}

.discount-corner-ribbon span {
    position: absolute !important;
    top: -52px !important;
    left: 4px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    transform: rotate(-45deg) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    white-space: nowrap !important;
}

/* Glassmorphism WhatsApp Icon - Bottom Right */
.whatsapp-icon-glass {
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    z-index: 4 !important;
}

.whatsapp-icon-glass a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.whatsapp-icon-glass a:hover {
    transform: scale(1.15) !important;
    background: rgba(37, 211, 102, 0.95) !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important;
}

.whatsapp-icon-glass a i {
    color: #25D366 !important;
    font-size: 18px !important;
    transition: color 0.3s ease !important;
}

.whatsapp-icon-glass a:hover i {
    color: #fff !important;
}

/* Out of Stock Diagonal Ribbon */
.out-of-stock-ribbon {
    position: absolute !important;
    top: 20px !important;
    left: -35px !important;
    width: 150px !important;
    background: linear-gradient(135deg, #ff4d4d 0%, #d32f2f 100%) !important;
    color: #fff !important;
    text-align: center !important;
    padding: 6px 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    transform: rotate(-45deg) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
    z-index: 3 !important;
    letter-spacing: 0.5px !important;
}

/* Content Area */
.shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content {
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Category Tag */
.shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .text {
    font-size: 12px !important;
    color: #888 !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Product Title */
.shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content h4 {
    font-size: 16px !important;
    line-height: 22px !important;
    margin: 8px 0 !important;
    min-height: 44px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content h4 a {
    color: #333 !important;
    text-decoration: none !important;
}

.shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content h4 a:hover {
    color: #E92530 !important;
}

/* Star Rating */
.shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .rating {
    margin: 8px 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3px !important;
}

/* PRICE - CRITICAL VISIBILITY */
.shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .price {
    color: #E92530 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 12px 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    line-height: 1.2 !important;
}

.shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .price del {
    color: #999 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    margin-right: 8px !important;
    text-decoration: line-through !important;
}

/* ORDER BUTTON - CRITICAL VISIBILITY */
.shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .btn-box {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 30px !important;
    padding-top: 0 !important;
    width: 100% !important;
    position: relative !important;
    transform: none !important;
    z-index: 10 !important;
}

.shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .btn-box a {
    display: block !important;
    width: 100% !important;
    background: #25D366 !important;
    /* WhatsApp green background */
    color: #fff !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .btn-box a:hover {
    background: #3a1c1a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(74, 44, 42, 0.3) !important;
}

.shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .btn-box a i {
    margin-right: 6px !important;
    font-size: 16px !important;
}


/* Badges */
.shop-page-section .shop-grid-content .shop-block-one .image-box .discount-product-2,
.shop-page-section .shop-grid-content .shop-block-one .image-box .status-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 5 !important;
}

/* WhatsApp Icon (Top Right) */
.shop-page-section .shop-grid-content .shop-block-one .image-box .whatsapp-icon-box {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 5 !important;
}

/* ========================================
   MOBILE RESPONSIVE (2 COLUMNS)
   ======================================== */

@media only screen and (max-width: 991px) {

    /* Fix container overflow - reduce side padding */
    .shop-page-section .inner-container,
    .shop-page-section .auto-container,
    .item-shorting {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .shop-page-section .our-shop .shop-grid-content {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box {
        padding: 8px !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .image-box {
        margin-bottom: 8px !important;
        padding: 5px !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .image-box .image img {
        height: 120px !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .rating {
        margin: 5px 0 !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content h4 {
        font-size: 13px !important;
        line-height: 16px !important;
        min-height: 32px !important;
        margin: 4px 0 !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .price {
        font-size: 15px !important;
        margin: 6px 0 !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .btn-box {
        margin-top: 12px !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .btn-box a {
        padding: 9px 12px !important;
        font-size: 12px !important;
    }

    /* Mobile Icon Adjustments - Tablet */
    .discount-corner-ribbon {
        border-width: 50px 50px 0 0 !important;
    }

    .discount-corner-ribbon span {
        top: -44px !important;
        left: 3px !important;
        font-size: 11px !important;
    }

    .whatsapp-icon-glass a {
        width: 30px !important;
        height: 30px !important;
    }

    .whatsapp-icon-glass a i {
        font-size: 16px !important;
    }

    .out-of-stock-ribbon {
        top: 18px !important;
        left: -38px !important;
        width: 140px !important;
        font-size: 11px !important;
        padding: 5px 0 !important;
    }
}

@media only screen and (max-width: 480px) {

    /* Fix container overflow - tighter padding for phones */
    .shop-page-section .inner-container,
    .shop-page-section .auto-container,
    .item-shorting {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .shop-page-section .our-shop .shop-grid-content {
        gap: 8px !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box {
        padding: 6px !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .image-box {
        margin-bottom: 6px !important;
        padding: 4px !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .image-box .image img {
        height: 100px !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .rating {
        margin: 4px 0 !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content h4 {
        font-size: 12px !important;
        line-height: 15px !important;
        min-height: 30px !important;
        margin: 3px 0 !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .price {
        font-size: 14px !important;
        margin: 5px 0 !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .btn-box {
        margin-top: 10px !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .btn-box a {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    /* Mobile Icon Adjustments - Phone */
    .discount-corner-ribbon {
        border-width: 40px 40px 0 0 !important;
    }

    .discount-corner-ribbon span {
        top: -36px !important;
        left: 2px !important;
        font-size: 10px !important;
    }

    .whatsapp-icon-glass {
        bottom: 8px !important;
        right: 8px !important;
    }

    .whatsapp-icon-glass a {
        width: 28px !important;
        height: 28px !important;
    }

    .whatsapp-icon-glass a i {
        font-size: 14px !important;
    }

    .out-of-stock-ribbon {
        top: 16px !important;
        left: -40px !important;
        width: 130px !important;
        font-size: 10px !important;
        padding: 4px 0 !important;
    }
}

/* Ultra-compact for iPhone 12/13/14 Pro and similar (390px) */
@media only screen and (max-width: 400px) {

    /* Fix container overflow - minimal padding for small phones */
    .shop-page-section .inner-container,
    .shop-page-section .auto-container,
    .item-shorting {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .shop-page-section .our-shop .shop-grid-content {
        gap: 6px !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box {
        padding: 5px !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .image-box {
        margin-bottom: 5px !important;
        padding: 3px !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .image-box .image img {
        height: 95px !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .text {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .rating {
        margin: 3px 0 !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content h4 {
        font-size: 11px !important;
        line-height: 14px !important;
        min-height: 28px !important;
        margin: 2px 0 !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .price {
        font-size: 13px !important;
        margin: 4px 0 !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .price del {
        font-size: 11px !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .btn-box {
        margin-top: 8px !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .btn-box a {
        padding: 7px 8px !important;
        font-size: 10px !important;
        border-radius: 20px !important;
    }

    /* Mobile Icon Adjustments - Ultra-Small */
    .discount-corner-ribbon {
        border-width: 35px 35px 0 0 !important;
    }

    .discount-corner-ribbon span {
        top: -32px !important;
        left: 2px !important;
        font-size: 9px !important;
    }

    .whatsapp-icon-glass {
        bottom: 6px !important;
        right: 6px !important;
    }

    .whatsapp-icon-glass a {
        width: 26px !important;
        height: 26px !important;
    }

    .whatsapp-icon-glass a i {
        font-size: 13px !important;
    }

    .out-of-stock-ribbon {
        top: 14px !important;
        left: -42px !important;
        width: 120px !important;
        font-size: 9px !important;
        padding: 4px 0 !important;
    }

    .shop-page-section .shop-grid-content .shop-block-one .inner-box .lower-content .btn-box a i {
        font-size: 12px !important;
        margin-right: 4px !important;
    }
}