/* Compartido por Home ("colecciones"), Tienda y Favoritos.
   Se carga siempre (assets base) porque la tarjeta de producto
   (woocommerce/content-product.php) aparece en más de una página. */

.colecciones__grid.products,
.tienda ul.products {
    display: grid;
    /* Nordstrom mantiene cuatro tarjetas en escritorio y reduce columnas
       en los breakpoints inferiores. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    list-style: none;
}

/* WooCommerce agrega float, ancho porcentual y margen a cada <li>. Dentro
   de nuestra grilla esos valores achicaban la tarjeta dentro de su columna. */
.woocommerce .colecciones__grid.products li.product,
.woocommerce .tienda ul.products li.product,
.colecciones__grid.products > li.product,
.tienda ul.products > li.product {
    float: none;
    clear: none;
    width: 100%;
    max-width: none;
    margin: 0;
}

@media (max-width: 1100px) {
    .colecciones__grid.products,
    .tienda ul.products {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 780px) {
    .colecciones__grid.products,
    .tienda ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .colecciones__grid.products,
    .tienda ul.products {
        grid-template-columns: 1fr;
    }
}

.producto-card {
    position: relative;
}

.producto-card__imagen {
    position: relative;
    width: 100%;
    aspect-ratio: 15 / 23;
    background: var(--color-fondo-alt);
    overflow: visible;
}

.producto-card__imagen img {
    width: 100%;
    height: 100% !important;
    aspect-ratio: auto;
    object-fit: cover;
    display: block;
}

/* Etiqueta apoyada sobre el borde inferior de la imagen (estilo Nordstrom) */
.producto-card__badge-oferta {
    position: absolute;
    left: .75rem;
    bottom: 0;
    transform: translateY(50%);
    background: var(--color-primario);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: .3rem .7rem;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 3;
}

.producto-card__nombre {
    font-size: .95rem;
    margin-top: .9rem;
    letter-spacing: .02em;
    font-weight: 600;
}

.producto-card__grupo-atributo {
    margin-top: .5rem;
}
.producto-card__grupo-etiqueta {
    font-size: .68rem;
    color: #999;
    margin-right: .5rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 500;
}
.producto-card__grupo-opciones {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.producto-card__opcion-pill {
    min-width: 34px;
    height: 30px;
    padding: 0 .7rem;
    border: 1px solid #e2ddd9;
    border-radius: 999px;
    background: #fff;
    color: var(--color-texto);
    font-size: .72rem;
    letter-spacing: .02em;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.producto-card__opcion-pill:hover {
    border-color: var(--color-primario);
}
.producto-card__opcion-pill.is-seleccionado {
    background: var(--color-primario);
    color: #fff;
    border-color: var(--color-primario);
}
.producto-card__color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.15);
    display: inline-block;
    cursor: pointer;
    transition: transform .15s;
}
.producto-card__color-dot:hover {
    transform: scale(1.15);
    border-color: var(--color-primario);
}
.producto-card__color-dot.is-seleccionado {
    border: 2px solid var(--color-primario);
    box-shadow: 0 0 0 2px #fff inset;
}
.producto-card__color-mas {
    font-size: .7rem;
    color: #777;
    margin-left: .1rem;
}

.producto-card__precio-link {
    display: block;
}

.producto-card__rating {
    margin-top: .3rem;
}
.producto-card__rating .star-rating {
    font-size: .8rem;
    color: var(--color-primario);
}

.producto-card__precio {
    display: block;
    font-weight: 600;
    margin-top: .35rem;
    color: var(--color-texto);
}
.producto-card__precio del {
    color: #999;
    font-weight: 400;
    margin-right: .4rem;
    text-decoration: line-through;
}
.producto-card__precio ins {
    text-decoration: none;
    color: var(--color-primario);
}

.producto-card__accion {
    margin-top: .6rem;
}

.producto-card__accion a.button,
.producto-card__accion a.added_to_cart {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: .65rem 1rem;
    border: 1px solid var(--color-texto);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: background .2s, color .2s;
}

.producto-card__accion a.button:hover {
    background: var(--color-texto);
    color: #fff;
}

/* Cantidad + Añadir al carrito */
.producto-card__form-carrito {
    display: flex;
    gap: .5rem;
    align-items: stretch;
}

.producto-card__cantidad {
    display: flex;
    align-items: center;
    border: 1px solid #e2ddd9;
    border-radius: 999px;
    background: #fff;
    height: 40px;
    overflow: hidden;
    padding: 0 .2rem;
}
.producto-card__cantidad-btn {
    width: 26px;
    height: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-primario);
    transition: opacity .15s;
}
.producto-card__cantidad-btn:hover {
    opacity: .6;
}
.producto-card__cantidad-input {
    width: 28px;
    height: 100%;
    border: none;
    text-align: center;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-texto);
    -moz-appearance: textfield;
}
.producto-card__cantidad-input::-webkit-outer-spin-button,
.producto-card__cantidad-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.producto-card__boton-carrito {
    flex: 1;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: var(--color-texto);
    color: #fff;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s, transform .15s;
}
.producto-card__boton-carrito:hover {
    background: var(--color-primario);
}
.producto-card__boton-carrito:active {
    transform: scale(.97);
}
.producto-card__boton-carrito:disabled {
    opacity: .6;
    cursor: default;
}

.producto-card__mensaje-carrito {
    display: block;
    width: 100%;
    font-size: .72rem;
    color: var(--color-primario);
    margin-top: .35rem;
}

.producto-card__form-carrito--variable {
    flex-wrap: wrap;
}

/* Botón de favorito (corazón) */
.btn-favorito {
    position: absolute;
    top: .6rem;
    right: .6rem;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

/* Ícono de corazón real (SVG vía mask, no clip-path) */
.icon-corazon {
    width: 18px;
    height: 18px;
    display: inline-block;
    background-color: var(--color-texto);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.btn-favorito.is-favorito .icon-corazon {
    background-color: var(--color-primario);
}