/* Wavecon Product Loop — beautify WC default product cards + mobile Swiper
   Cross-site (wavecon.icu + shoeslist.com) compatible.
   wavecon uses grocery-store theme → .product-loop-wrp / .product-image
   shoeslist uses OceanWP theme → .product-inner / .woo-entry-image
   Both selectors handled for cross-site portability.

   Same design language as product-rail.css.
   Colors: --ocean-primary (OceanWP) → --e-global-color-primary (Elementor) → #c62828 (fallback) */

:root {
    --loop-accent:  var(--ocean-primary, var(--e-global-color-primary, #c62828));
    --loop-text:    var(--ocean-body-color, var(--e-global-color-text, #1a1a1a));
    --loop-muted:   #888;
    --loop-border:  #eee;
    --loop-bg:      #fff;
    --loop-soft-bg: #f7f7f7;
}

/* === Card shell: target BOTH theme wrappers === */
.woocommerce ul.products li.product {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 24px;
}

.woocommerce ul.products li.product .product-loop-wrp,   /* grocery-store (wavecon) */
.woocommerce ul.products li.product .product-inner,       /* OceanWP (shoeslist) */
.woocommerce ul.products li.product > a {                 /* generic fallback */
    display: flex;
    flex-direction: column;
    background: var(--loop-bg);
    border: 1px solid var(--loop-border);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    text-decoration: none;
    color: inherit;
}

/* === Layered hover shadow (stronger, more premium) === */
.woocommerce ul.products li.product:hover .product-loop-wrp,
.woocommerce ul.products li.product:hover .product-inner,
.woocommerce ul.products li.product:hover > a {
    transform: translateY(-3px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 12px 28px rgba(0, 0, 0, 0.14);
}

/* === Image: target both wrappers === */
.woocommerce ul.products li.product .product-image,
.woocommerce ul.products li.product .woo-entry-image {
    aspect-ratio: 1 / 1;
    background: var(--loop-soft-bg);
    overflow: hidden;
    position: relative;
}
.woocommerce ul.products li.product .product-image img,
.woocommerce ul.products li.product .woo-entry-image img,
.woocommerce ul.products li.product .woo-entry-image-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}
.woocommerce ul.products li.product .product-image figure {
    margin: 0;
    width: 100%;
    height: 100%;
}
/* OceanWP uses .attachment-woocommerce_thumbnail */
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* === Title === */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    padding: 12px 12px 4px !important;
    margin: 0 !important;
    color: var(--loop-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-transform: none;
    letter-spacing: 0;
}

/* === Price === */
.woocommerce ul.products li.product .price {
    padding: 0 12px 8px;
    color: var(--loop-accent) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: auto;
}
.woocommerce ul.products li.product .price del {
    color: var(--loop-muted) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    margin-right: 4px;
}
.woocommerce ul.products li.product .price ins {
    background: transparent;
    color: var(--loop-accent);
    text-decoration: none;
}

/* === Add to cart button === */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
    margin: 4px 12px 12px;
    padding: 8px 12px;
    background: var(--loop-accent) !important;
    color: #fff !important;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
    transition: opacity 0.2s, transform 0.2s;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.woocommerce ul.products li.product .button.added {
    background: var(--loop-text) !important;
}

/* === Rating === */
.woocommerce ul.products li.product .star-rating {
    margin: 0 12px 6px;
    font-size: 12px;
}

/* === Mobile Swiper (<990px) — JS adds .swiper + .swiper-wrapper classes === */
@media (max-width: 990px) {
    .product-loop-swiper {
        overflow: visible;
        padding: 0 16px 16px;
        position: relative;
    }
    .woocommerce ul.products.swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        grid-template-columns: none !important;
    }
    .woocommerce ul.products li.product.swiper-slide {
        flex: 0 0 calc(70vw - 24px) !important;
        width: auto !important;
        max-width: none;
        margin: 0 6px 0 0 !important;
        padding: 0 !important;
        scroll-snap-align: start;
    }
    .woocommerce ul.products li.product.swiper-slide:last-child {
        margin-right: 0 !important;
    }
    .product-loop-pagination {
        text-align: center;
        margin-top: 12px;
        position: static;
    }
    .product-loop-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: #ddd;
        opacity: 1;
        margin: 0 4px;
        transition: background 0.2s, transform 0.2s;
    }
    .product-loop-pagination .swiper-pagination-bullet-active {
        background: var(--loop-accent);
        transform: scale(1.3);
    }
}

@media (max-width: 479px) {
    .woocommerce ul.products li.product.swiper-slide {
        flex: 0 0 calc(78vw - 24px) !important;
    }
}

@media (min-width: 480px) and (max-width: 749px) {
    .woocommerce ul.products li.product.swiper-slide {
        flex: 0 0 calc(45vw - 16px) !important;
    }
}

@media (min-width: 750px) and (max-width: 990px) {
    .woocommerce ul.products li.product.swiper-slide {
        flex: 0 0 calc(31vw - 16px) !important;
    }
}

/* === Desktop (>=991px): preserve 4-col grid === */
@media (min-width: 991px) {
    .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }
    .woocommerce ul.products li.product {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }
    .product-loop-swiper > .product-loop-pagination,
    .product-loop-pagination {
        display: none;
    }
}