/* ==========================================================================
   BENEFITS SECTION
   ========================================================================== */
/* Your existing desktop styles */
#main > section.section-benefits.bg-secondary.px-4.py-6.md\:p-16 > div > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 360px;
}

/* Mobile override */
@media (max-width: 768px) {
    #main > section.section-benefits.bg-secondary.px-4.py-6.md\:p-16 > div > div {
        flex-direction: column;
        gap: 50px;
    }
}

/* ==========================================================================
   MOBILE HERO OVERRIDES
   ========================================================================== */
@media (max-width: 768px) {
    #main > section:nth-child(1) {
        padding: 0 !important;
        min-height: 180px !important;
    }

    #main > section:nth-child(1) .section-hero img {
        width: 100% !important;
        height: 180px !important;
        object-fit: cover !important;
        display: block;
    }
} 


/* ==========================================================================
   GLOBAL LAYOUT & SECTIONS (Mobile Defaults / Base Rules)
   ========================================================================== */

#main > section:nth-child(1) {
    padding: 0 !important;
    min-height: 140px !important;
}

#main > section:nth-child(1) .section-hero img {
    width: 100px !important;
    height: 100px !important;
    display: block !important;
}

#main > section:nth-child(5),
#main > section:nth-child(7),
#main > section:nth-child(9),
#main > section:nth-child(11),
#main > section:nth-child(13),
#main > section:nth-child(15),
#main > section:nth-child(16) {
    padding: 0 !important;
    min-height: 180px !important;
}

#main > section:nth-child(5) .section-hero img,
#main > section:nth-child(7) .section-hero img,
#main > section:nth-child(9) .section-hero img,
#main > section:nth-child(11) .section-hero img,
#main > section:nth-child(13) .section-hero img,
#main > section:nth-child(15) .section-hero img,
#main > section:nth-child(16) .section-hero img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    display: block !important;
}

/* ==========================================================================
   EQUAL HEIGHT PRODUCT CARDS (Cross-Platform Structural Base)
   ========================================================================== */
.products-grid,
.product-list,
[class*="products-grid"],
[class*="product-list"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

/* Force elements inside the grid to behave as flex items */
.products-grid > *,
.product-list > *,
[class*="product"] > article,
[class*="product-card"],
[class*="product-item"] {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex: 1 1 calc(50% - 10px) !important; /* 2 items per row baseline */
    box-sizing: border-box !important;
}

/* Inner Content Stretching */
[class*="product-card"] > *,
[class*="product-item"] > * {
    flex: 1 !important;
}

/* Pinning Buttons and Prices to Bottom */
button,
.price,
[class*="price"],
[data-add-to-cart] {
    margin-top: auto !important;
}


/* ==========================================================================
   DESKTOP OVERRIDES & LAYOUT ADJUSTMENTS (Screens broader than 768px)
   ========================================================================== */
@media (min-width: 768px) {
    #main > section:nth-child(1) {
        min-height: 400px !important; 
        margin: 30px !important;
    }

    #main > section:nth-child(5),
    #main > section:nth-child(7),
    #main > section:nth-child(9),
    #main > section:nth-child(11),
    #main > section:nth-child(13),
    #main > section:nth-child(15),
    #main > section:nth-child(16) {
        min-height: 600px !important; 
    }

    #main > section:nth-child(5) .section-hero img,
    #main > section:nth-child(7) .section-hero img,
    #main > section:nth-child(9) .section-hero img,
    #main > section:nth-child(11) .section-hero img,
    #main > section:nth-child(13) .section-hero img,
    #main > section:nth-child(15) .section-hero img,
    #main > section:nth-child(16) .section-hero img {
        height: 600px !important; 
    }

    /* Force Desktop Grid to show 4 cards per row */
    .products-grid > *,
    [class*="products-grid"] > * {
        flex: 1 1 calc(25% - 15px) !important; 
        max-width: calc(25% - 15px) !important;
    }
}


/* ==========================================================================
   ZID PRODUCTS -> SALLA STYLE (Universal UI Styling)
   ========================================================================== */

/* Card Container */
[data-product-card] {
    background: #ffffff !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    padding: 14px !important;
    transition: transform .35s ease, box-shadow .35s ease !important;
    border: 1px solid rgba(0,0,0,.05) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.04) !important;
}

/* Hover Effect */
[data-product-card]:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.10) !important;
}

/* Image Wrapper */
[data-product-card] > a {
    border-radius: 20px !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

/* Image Core */
[data-product-card] img,
[class*="product"] img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    transition: transform .5s ease !important;
}

/* Hover Zoom */
[data-product-card]:hover img {
    transform: scale(1.08) !important;
}

/* Wishlist Button */
[data-wishlist-btn] {
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.85) !important;
    backdrop-filter: blur(12px) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.12) !important;
    transition: transform .3s ease, background-color .3s ease !important;
}

[data-wishlist-btn] svg {
    width: 18px !important;
    height: 18px !important;
}

[data-wishlist-btn]:hover {
    transform: scale(1.1) !important;
    background: white !important;
}

/* Badges */
.badge,
.bundle-offer-badge {
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}

/* Title */
[data-product-card] h3 {
    margin: 0 !important;
}

[data-product-card] h3 a {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #2c3d2e !important;
    line-height: 1.6 !important;
    text-decoration: none !important;
    transition: color .3s ease !important;
}

[data-product-card]:hover h3 a {
    color: var(--theme-primary, #2c3d2e) !important;
}

/* Price styling */
[data-product-card] p {
    margin: 0 !important;
}

/* Current Price */
[data-product-card] .font-semibold,
[data-product-card] .text-foreground {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #2c3d2e !important;
}

/* Old Price */
.line-through {
    opacity: .55 !important;
    font-size: 14px !important;
}

/* Discount Badge */
.bg-success\/20 {
    border-radius: 999px !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    background: rgba(34,197,94,.14) !important;
}

/* Action Buttons */
[data-add-to-cart],
[data-open-quick-view],
[data-notify-me-trigger] {
    width: 100% !important;
    height: 48px !important;
    border-radius: 14px !important;
    border: none !important;
    background: black !important;
    color: white !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    transition: transform .3s ease, background-color .3s ease !important;
}

[data-add-to-cart]:hover,
[data-open-quick-view]:hover,
[data-notify-me-trigger]:hover {
    transform: translateY(-2px) !important;
    background: #333333 !important; 
}

@media (max-width: 767px) {
    [section-id="43226714-1c6f-480f-bc71-e5dff36d5759"] .embla .embla__container .embla__slide {
        min-height: 200px !important;
    }
}