/* Valid list items and native WooCommerce actions in every product loop. */
.woocommerce ul.products,
.raro-home-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding: 0;
    list-style: none
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none
}

.woocommerce ul.products li.product,
.raro-home-product-grid li.product {
    float: none;
    width: auto;
    margin: 0;
    min-width: 0;
    position: relative
}

.raro-product-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    background: var(--raro-bg-soft);
    transition: transform .25s ease
}

.raro-product-card:hover img {
    transform: scale(1.015)
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.raro-product-card .woocommerce-loop-product__title {
    font: 500 14px/1.5 Inter, sans-serif;
    padding: 14px 0 8px;
    margin: 0
}

.woocommerce ul.products li.product .price,
.raro-product-card .price {
    display: block;
    color: var(--raro-ivory);
    font-size: 14px;
    margin-bottom: 12px
}

.raro-product-card .button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--raro-line);
    background: transparent;
    color: var(--raro-ivory);
    font-size: 12px;
    line-height: 1.4;
    white-space: normal
}

.raro-product-card .added_to_cart {
    display: block;
    padding: 10px 0;
    font-size: 13px
}

/* Etiqueta de oferta Raro */
.woocommerce ul.products li.product .onsale,
.raro-home-product-grid li.product .onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    right: auto;
    margin: 0;
    padding: 5px 10px;
    min-width: 0;
    min-height: 0;
    border: 1px solid #C9A23D;
    border-radius: 0;
    background: #141512;
    color: #E5BC54;
    font: 500 11px/1.4 Inter, sans-serif;
    letter-spacing: .04em;
    z-index: 5;
}

@media(max-width:1100px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:700px) {

    .woocommerce ul.products,
    .raro-home-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 14px;
    }
}

/* WooCommerce columns-* rules otherwise shrink cards inside the CSS mgrid.
   Keep this scoped to the shop and native related/upsell loops, not the home. */
.woocommerce .raro-shop ul.products>li.product,
.woocommerce .raro-shop ul.products[class*="columns-"]>li.product {
    width: 100%;
    max-width: none;
    min-width: 0;
    float: none;
    clear: none;
    margin: 0;
    justify-self: stretch;
}

/* Precios de productos en oferta */
.woocommerce ul.products li.product .price del,
.raro-product-card .price del {
    color: #898780;
    opacity: 1;
    font-size: 12px;
    font-weight: 400;
    margin-right: 9px;
}

.woocommerce ul.products li.product .price ins,
.raro-product-card .price ins {
    color: #E5BC54;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.woocommerce ul.products li.product .price,
.raro-product-card .price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 22px;
    margin-bottom: 12px;
}

/* Product archive density: five compact cards on wide desktop, four on laptop. */
@media(min-width:1400px) {
    .woocommerce .raro-archive ul.products {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 18px;
    }
}

@media(min-width:1101px) and (max-width:1399px) {
    .woocommerce .raro-archive ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }
}