/**
 * Category / shop loop product cards.
 *
 * Category archives (archive-product.php → #loja-produtos) do not load Divi's
 * shop + overlay CSS, so .et_shop_image stays an uncontained inline span.
 * mix-blend-mode:multiply then composites first-row images into the sticky
 * transparent header. Shop (/loja/ .et_pb_shop) already looks correct; this
 * file gives category cards the same containment and a reserved image box.
 */

/* --- Grid: category loop only (do not retarget wishlist tables) --- */
#loja-produtos.products,
#marca-produtos.products,
.loja ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px 24px;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: center;
    justify-items: stretch;
    padding: 15px !important;
}

/* --- Card shell: keep positioned / blended children inside --- */
#loja-produtos li.product,
#marca-produtos li.product,
.loja ul.products li.product {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100%;
    isolation: isolate;
    box-sizing: border-box;
}

#loja-produtos li.product .woocommerce-LoopProduct-link,
#marca-produtos li.product .woocommerce-LoopProduct-link,
.loja ul.products li.product .woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* --- Image wrap: Divi shop equivalent + reserved box + contained blend --- */
#loja-produtos li.product .et_shop_image,
#marca-produtos li.product .et_shop_image,
.loja ul.products li.product .et_shop_image {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
    contain: paint;
    mix-blend-mode: normal;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 180px !important;
    margin: 8px auto 0 !important;
    background-color: #fff;
    box-sizing: border-box;
}

#loja-produtos li.product .et_shop_image img,
#marca-produtos li.product .et_shop_image img,
.loja ul.products li.product .et_shop_image img,
#loja-produtos li.product a img,
#marca-produtos li.product a img,
.loja ul.products li.product a img {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100%;
    margin: 0 auto !important;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.2s ease !important;
}

#loja-produtos li.product .et_overlay,
#marca-produtos li.product .et_overlay,
.loja ul.products li.product .et_overlay {
    position: absolute;
    inset: 0;
    display: block;
}

/* Hover zoom stays inside the reserved image box (not the whole wrap). */
@media (min-width: 769px) {
    #loja-produtos li.product.type-product:hover .et_shop_image,
    #marca-produtos li.product.type-product:hover .et_shop_image,
    .loja ul.products li.product.type-product:hover .et_shop_image {
        transform: none;
    }

    #loja-produtos li.product.type-product:hover .et_shop_image img,
    #marca-produtos li.product.type-product:hover .et_shop_image img,
    .loja ul.products li.product.type-product:hover .et_shop_image img {
        transform: scale(1.08);
    }
}

/* --- Titles: keep word spaces visible, wrap instead of running together --- */
#loja-produtos li.product .woocommerce-loop-product__title,
#marca-produtos li.product .woocommerce-loop-product__title,
.loja ul.products li.product .woocommerce-loop-product__title {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    white-space: normal;
    word-spacing: normal;
    letter-spacing: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
    line-height: 1.35 !important;
    text-align: center;
}

/* Sale badge stays on the card, not hanging outside. */
#loja-produtos li.product span.onsale,
#marca-produtos li.product span.onsale,
.loja ul.products li.product span.onsale,
#loja-produtos li.product a span.onsale,
.loja ul.products li.product a span.onsale {
    z-index: 2;
    right: 0 !important;
}

/* Price / CTA sit after the reserved image + title block. */
#loja-produtos li.product span.price,
#marca-produtos li.product span.price,
.loja ul.products li.product span.price {
    margin-top: auto !important;
}

#loja-produtos li.product .button,
#marca-produtos li.product .button,
.loja ul.products li.product .button,
#loja-produtos li.product .psc-loop-btn,
#marca-produtos li.product .psc-loop-btn,
.loja ul.products li.product .psc-loop-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    #loja-produtos.products,
    #marca-produtos.products,
    .loja ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    #loja-produtos li.product .et_shop_image,
    #marca-produtos li.product .et_shop_image,
    .loja ul.products li.product .et_shop_image {
        max-width: 140px !important;
    }
}

@media (max-width: 480px) {
    #loja-produtos.products,
    #marca-produtos.products,
    .loja ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}