.product-miniature {
    margin-bottom: 0;
    border-radius: 8px;
}

.product-miniature .card {
    height: auto;
}

.product-miniature>.card {
    --weu-miniature-corner-inset: 12px;
    border: 1px solid var(--weu-color-grey);
    transition: var(--weu-miniature-bg-transition), transform 0.15s ease;
    border-radius: var(--weu-radius-default);
    background-color: var(--weu-color-grey);
    padding: var(--weu-spacing-xs);
    padding-bottom: 6px;
    height: 100%;
    position: relative;
    transform-origin: center center;
}

.product-miniature > .card.is-pressed,
.product-miniature > .card:has(.product-miniature__stretched-link:active) {
    transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
    .product-miniature > .card.is-pressed,
    .product-miniature > .card:has(.product-miniature__stretched-link:active) {
        transform: none;
    }
}

.product-miniature__stretched-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: auto;
    cursor: pointer;
}

.product-miniature__stretched-link:focus-visible {
    outline: 2px solid var(--weu-color-primary);
    outline-offset: -2px;
}

.product-miniature > .card .product-miniature__link,
.product-miniature > .card .product-miniature__infos,
.product-miniature > .card .product-miniature__infos__top,
.product-miniature > .card .product-miniature__infos__bottom,
.product-miniature > .card .product-miniature__prices,
.product-miniature > .card .product-miniature__title {
    pointer-events: none;
}

.product-miniature > .card:is(:hover, :focus-within) {
    cursor: pointer;
}

.product-miniature .variant-links,
.product-miniature .variant-links a,
.product-miniature .product-add-to-cart,
.product-miniature .product-add-to-cart * {
    position: relative;
    z-index: 2;
}

/* Hover desktop: rosa + fondos transparentes → multiply mezcla con la tarjeta */
@media (hover: hover) and (pointer: fine) {
    .product-miniature>.card:is(:hover, :focus-within) {
        filter: none;
        background-color: var(--weu-color-primary-soft-hover);
    }

    .product-miniature>.card:hover .product-miniature__link,
    .product-miniature>.card:focus-within .product-miniature__link,
    .product-miniature>.card:hover .product-miniature__image-container,
    .product-miniature>.card:focus-within .product-miniature__image-container {
        background-color: transparent;
    }

    .product-miniature__image {
        filter: contrast(1.1);
    }

    .product-miniature>.card:is(:hover, :focus-within) .product-miniature__manufacturer {
        background-color: var(--weu-color-primary-soft-hover-solid-fallback);
        background-color: var(--weu-color-primary-soft-hover-solid);
        isolation: isolate;
    }

    .product-miniature>.card:is(:hover, :focus-within) .product-miniature__discount-badge {
        background-color: var(--weu-color-primary-soft-hover-solid-fallback);
        background-color: var(--weu-color-primary-soft-hover-solid);
    }
}

/* iOS / táctil: sin hover rosa (evita flash al tocar); fondos de imagen estables */
@media (hover: none) {
    .product-miniature__image-container {
        background-color: var(--weu-color-grey);
    }

    .product-miniature__manufacturer {
        isolation: isolate;
    }

    .product-miniature__manufacturer img {
        mix-blend-mode: darken;
    }

    .product-miniature__image {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.product-miniature>.card .product-miniature__link {
    --weu-miniature-corner-inset: 12px;
    display: block;
    position: relative;
    padding: 4px;
    background-color: var(--weu-color-grey);
    margin-bottom: 0;
    transition: var(--weu-miniature-bg-transition);
    color: inherit;
    text-decoration: none;
}

.product-miniature__image-container {
    position: relative;
    transition: var(--weu-miniature-bg-transition);
}

.product-miniature__image-container picture {
    display: block;
    line-height: 0;
}

/* Logo de marca: "chip" con fondo propio (= color de la tarjeta) + isolation.
   Así el multiply del logo (JPG con fondo blanco) mezcla SIEMPRE contra un fondo
   conocido (gris en reposo, rosa en hover) y nunca contra la foto blanca del
   producto. Funciona igual en Chrome y en Safari/iOS. Alineado con "Agotado". */
.product-miniature__manufacturer {
    position: absolute;
    top: var(--weu-miniature-corner-inset, 12px);
    right: var(--weu-miniature-corner-inset, 12px);
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 2;
    isolation: isolate;
    background-color: var(--weu-color-grey);
    transition: var(--weu-miniature-bg-transition);
    pointer-events: none;
    overflow: hidden;
    line-height: 0;
}


.product-miniature__manufacturer img {
    height: 22px !important;
    width: auto !important;
    max-width: none;
    object-fit: contain;
    mix-blend-mode: multiply;
    display: block;
    /* Solo recorta bordes oscuros arriba/abajo del JPG, sin cortar los lados */
    transform: scaleY(1.2);
    transform-origin: center center;
}

.product-miniature__image {
    mix-blend-mode: multiply;
    display: block;
    width: 100%;
}

.product-miniature .product-miniature__infos {
    gap: 2px;
    justify-content: flex-start;
    padding: 10px 8px 4px !important;
    margin: 0;
}

.product-miniature__infos__top {
    height: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    gap: 0;
}

/* Misma zona/inset que el logo de marca (esquina superior) */
.product-miniature .product-flags {
    padding: 0 !important;
    left: var(--weu-miniature-corner-inset, 12px) !important;
    top: var(--weu-miniature-corner-inset, 12px) !important;
    gap: 4px;
    z-index: 2;
}

.product-miniature .product-flags .badge {
    margin: 0;
    font-size: 10px;
    padding: 2px 8px;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-transform: lowercase;
    border-radius: 100px;
}

.product-miniature .product-flags .badge.on-sale,
.product-flags li.badge.on-sale {
    --bs-badge-color: var(--weu-color-primary);
    background-color: var(--weu-color-grey) !important;
    color: var(--weu-color-primary) !important;
    border: 1.5px solid var(--weu-color-primary) !important;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
    text-transform: none;
}

@layer bs-base {
    .product-miniature .product-flags .badge.out_of_stock:not(.discount),
    .product-flags .badge.out_of_stock:not(.discount),
    .product-flags li.badge.out_of_stock:not(.discount) {
        --bs-badge-color: #1d1d1d;
        background-color: #ededed !important;
        color: #1d1d1d !important;
        border: none !important;
        text-transform: none;
    }
}

.page-product .product-miniature .product-flags {
    left: var(--weu-miniature-corner-inset, 12px) !important;
    top: var(--weu-miniature-corner-inset, 12px) !important;
}

.product-miniature .product-miniature__infos__top {
    padding-top: 0 !important;
    padding-left: 0;
    padding-right: 0;
    background-color: unset;
}

.product-miniature__infos__top {
    color: var(--weu-color-black);
    width: 100%;
}

.product-miniature__title {
    min-height: 0;
    margin: 0 0 2px;
    font-weight: 600;
    text-align: left;
    /* Trunca el título a 2 líneas y añade "..." al final */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-miniature .product-miniature__infos__bottom {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    background-color: unset;
}

.product-miniature .product-miniature__infos__top {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.product-miniature .product-miniature__infos {
    position: relative;
}

.product-miniature__discount-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border: 1.5px solid var(--weu-color-primary);
    border-radius: 100px;
    background-color: var(--weu-color-grey);
    color: var(--weu-color-primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
    transition: var(--weu-miniature-bg-transition);
}

/* Badge -15%: alineado con el texto, solapado en el borde inferior de la imagen */
.product-miniature__link > .product-miniature__discount-badge {
    position: absolute;
    left: 8px;
    bottom: 4px;
    z-index: 3;
    transform: translateY(40%);
    pointer-events: none;
}

.product-miniature__prices {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 6px;
    line-height: 1.2;
    min-width: 0;
}

.product-miniature__price {
    font-size: var(--font-size-base);
    color: var(--weu-color-black);
    font-weight: 700;
    line-height: 1.2;
    flex-shrink: 0;
}

.product-miniature__discount-price {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    font-size: var(--font-size-sm);
    line-height: 1.2;
    min-width: 0;
}

.product-miniature .product-miniature__regular-price {
    text-decoration: none;
    position: relative;
    display: inline-block;
    color: var(--bs-tertiary-color, rgba(33, 37, 41, 0.75));
    font-weight: 700;
    font-size: var(--font-size-sm);
    line-height: 1.2;
}

.product-miniature .product-miniature__regular-price::after {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    right: 0;
    border-top: 1px solid;
    border-color: inherit;
    transform: rotate(-7deg);
}

/* Contenedor principal para alinearlos */
.product-miniature .product-add-to-cart {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    padding-left: var(--weu-spacing-sm);
    padding-right: var(--weu-spacing-sm);
}

/* El selector de cantidad estilo "Pastilla" */
.product-miniature .quantity-button {
    display: flex;
    border: 1px solid var(--weu-color-border);
    border-radius: var(--weu-radius-default);
    /* 8px */
    overflow: hidden;
    height: 40px;
    background: #fdfdfd;
}

.product-miniature .quantity-button button {
    background: none;
    border: none;
    padding: 0 12px;
    cursor: pointer;
    color: var(--weu-color-dark);
    transition: background 0.2s;
}

.product-miniature .quantity-button button:hover {
    background: #f0f0f0;
}

.product-miniature .quantity-button input {
    width: 35px;
    border: none;
    text-align: center;
    font-weight: 600;
    background: none;
    padding: 0;
}

/* Botón de Carrito Rediseñado */
.product-miniature .add-to-cart-btn {
    background-color: var(--weu-color-dark);
    /* Negro como tu newsletter */
    color: #fff;
    border: none;
    border-radius: var(--weu-radius-default);
    /* 8px */
    height: 40px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
    flex-grow: 1;
    /* Para que el botón sea más protagonista */
}

.product-miniature .add-to-cart-btn:hover {
    background-color: var(--weu-color-primary);
    /* Cambio al rojo en hover */
}

.product-miniature .add-to-cart-btn .material-icons {
    font-size: var(--font-size-md);
}

/* Eliminar el zoom de la imagen en hover */
.thumbnail-container:hover .product-miniature__image,
.product-miniature:hover .product-miniature__image,
.product-miniature:hover .card-img-top,
.thumbnail-container:hover img {
    transform: none !important;
}

@media (min-width: 576px) {
    .products.row {
        --weu-product-grid-gap: calc(var(--weu-spacing-sm) + var(--weu-spacing-xs) / 2);
        --bs-gutter-x: var(--weu-product-grid-gap);
        --bs-gutter-y: 0;
    }

    .products.row > .product-miniature,
    .products.row > [class*="col-"] {
        margin-bottom: var(--weu-product-grid-gap);
    }

    #js-product-list .products.row > .product-miniature,
    #js-product-list .products.row > [class*="col-"] {
        margin-bottom: 0;
    }
}

@media(max-width: 575px) {
    /* Gutter uniforme entre columnas, filas y bordes de pantalla */
    :root {
        --weu-mobile-product-gap: 12px;
        /* Padding interior más ajustado: más ancho útil para el nombre del producto */
        --weu-mobile-miniature-pad: 2px;
        --weu-mobile-listing-inset: var(--weu-spacing-sm);
        --weu-mobile-grid-outset: calc(var(--weu-mobile-listing-inset) - var(--weu-mobile-product-gap) / 2);
    }

    .products.row {
        --bs-gutter-x: var(--weu-mobile-product-gap);
        --bs-gutter-y: 0;
    }

    .products.row > .product-miniature,
    .products.row > [class*="col-"] {
        margin-bottom: var(--weu-mobile-product-gap);
    }

    #js-product-list .products.row > .product-miniature,
    #js-product-list .products.row > [class*="col-"] {
        margin-bottom: 0;
    }

    :is(#category, #search, #manufacturer, #prices-drop, #new-products, #best-sales) #js-product-list > .products.row {
        margin-inline: calc(-1 * var(--weu-mobile-grid-outset));
        width: calc(100% + (2 * var(--weu-mobile-grid-outset)));
    }

    .product-miniature > .card {
        --weu-miniature-corner-inset: 8px;
        padding: var(--weu-mobile-miniature-pad);
        padding-bottom: 6px;
    }

    .product-miniature > .card .product-miniature__link {
        --weu-miniature-corner-inset: 8px;
        padding: var(--weu-mobile-miniature-pad);
        margin-bottom: 0;
    }

    .product-miniature__link > .product-miniature__discount-badge {
        left: 8px;
        bottom: 6px;
        transform: translateY(35%);
    }

    .product-miniature .product-miniature__infos {
        padding: 9px 8px 8px !important;
    }

    .product-miniature .product-miniature__infos__top,
    .product-miniature .product-miniature__infos__bottom {
        padding-left: 0;
        padding-right: 0;
    }

    .product-miniature .product-flags .badge {
        font-size: 9px;
        padding: 2px 7px;
    }

    .product-miniature__title {
        min-height: 0;
        font-size: 13px;
        line-height: 1.25;
        margin-bottom: 2px;
    }

    .product-miniature__price {
        font-size: var(--font-size-secondary);
    }

    .product-miniature .product-miniature__regular-price {
        font-size: var(--font-size-sm);
    }

    .product-miniature__discount-badge {
        font-size: 10px;
        padding: 1px 5px;
    }
}

@media (max-width: 991px) {
    /* Tablet/móvil: etiquetas en columna y por delante del logo de marca */
    .product-miniature .product-flags {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 3px;
        max-width: calc(100% - 72px);
        z-index: 3;
    }
}

@media (max-width: 767px) {
    .weu-category-toolbar__count {
        display: none;
    }

    /* Móvil: sin logo de marca en miniaturas (más aire para flags/imagen) */
    .product-miniature__manufacturer {
        display: none;
    }

    .product-miniature .product-flags {
        max-width: 100%;
    }
}