.product-status {
	position: absolute;
    align-items: center;
    gap: 5px;

    padding: .4rem .4rem;

	font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;

    width: max-content;
}


/* OFERTA */
.product-status--discount {
    background: #e52f50;
    color: #fff;
}


/* NUEVO */
.product-status--new {
    background: #2799d6;
    color: #fff;
}


/* OUTLET (Karen 26/10/2026): en verde, el de la antigua etiqueta de descuento y el punto del menú;
   «Últimas unidades», amarillo de marca con texto navy */
.product-status--outlet {
    background: #1f7a4d;
    color: #fff;
}

.product-status--ultimas {
    background: #FDCF63;
    color: #06163d;
}


/* POCO STOCK */
.product-status--stock {
    background: #f8c644;
    color: #fff;
}

/* PRICE */
.text:has(del) {
	display: flex;
    flex-direction: row-reverse !important;
	gap: .5rem;
}
del {
	text-decoration: none !important;
	/* line-height: 10px; */
}
del .amount {
	font-weight: 400;
	font-size: 10px;
	color: #ccc;
    text-decoration: line-through;
}

/* Product Card: formato 1:1, cambio seguro y zoom progresivo. */
:is(.product-card, .e-loop-item, li.product, article)
img.img-product {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	transform: scale(1);
	transform-origin: center center;
	transition:
		opacity 140ms ease-in-out,
		transform 4s cubic-bezier(.18, .72, .24, 1);
	will-change: opacity, transform;
}

img.img-product[data-eprilux-hover-ready="1"].is-switching {
	opacity: 0;
}

:is(.product-card, .e-loop-item, li.product, article):hover
img.img-product[data-eprilux-hover-ready="1"] {
	transform: scale(1.08);
}

:is(.product-card, .e-loop-item, li.product, article)
.elementor-widget-e-image:has(img.img-product),
:is(.product-card, .e-loop-item, li.product, article)
.elementor-widget-e-image:has(img.img-product)
.elementor-widget-container,
:is(.product-card, .e-loop-item, li.product, article)
.elementor-widget-e-image:has(img.img-product) a {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	contain: paint;
	isolation: isolate;
}

@media (prefers-reduced-motion: reduce) {
	img.img-product {
		transition: none;
		transform: none !important;
	}
}

/* ================================
   CARRITO EN CARD: stepper + botón
   ================================ */

/* Tipografía del sitio */
.pc-cart,
.pc-cart button,
.pc-cart input,
.pc-add {
    font-family: 'Montserrat', sans-serif;
}

/* Contenedor */
.pc-cart {
    display: flex;
    align-items: center;   /* evita que el stepper se estire */
    gap: 8px;
    width: 100%;
}

/* --- Stepper (− 1 +) --- */
.pc-qty {
    display: inline-flex;
    align-items: center;
    height: 40px;
    border: 1px solid #d8dee9;
    background: #fff;
    flex-shrink: 0;
}
.pc-qty button {
    border: 0;
    background: transparent;
    width: 28px;
    height: 40px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    color: #16244A;
    transition: background .2s;
}
.pc-qty button:hover { background: #f1f3f7; }
.pc-qty .pc-input {
    width: 30px;
    height: 40px;
    text-align: center;
    border: 0;
    border-inline: 1px solid #eceff3;
    font-weight: 700;
    font-size: 13px;
    color: #16244A;
    background: transparent;
    pointer-events: none;
}

/* --- Botón AGREGAR --- */
.pc-add {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    background: #16244A;
    color: #fff !important;
    border-left: 4px solid #E9B44C;
    border-radius: 0;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .8px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color .35s ease;
}

/* Barrido dorado izquierda → derecha en hover */
.pc-add::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #E9B44C;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s ease;
    z-index: -1;
}
.pc-add:hover::before { transform: scaleX(1); }
.pc-add:hover { color: #16244A !important; }

/* Círculo dorado con icono */
.pc-add .pc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #E9B44C;
    color: #16244A;
    flex-shrink: 0;
    transition: background .35s ease, color .35s ease;
}
.pc-add .pc-icon svg { width: 12px; height: 12px; }

/* En hover el icono se invierte para verse sobre el dorado */
.pc-add:hover .pc-icon {
    background: #16244A;
    color: #E9B44C;
}

/* Ocultar el "Ver carrito" que aparece al añadir */
.pc-cart .added_to_cart,
.woocommerce a.added_to_cart,
a.added_to_cart.wc-forward {
    display: none !important;
}

.stock-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: .2px;
}
.stock-chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.stock-chip--in  { color: #1D9E75; }   /* verde  */
.stock-chip--low { color: #C26A12; }   /* naranja */
.stock-chip--out { color: #9AA3B2; }   /* gris   */

/* Product Card: composición compacta para dos columnas en móvil. */
@media (max-width: 767px) {
    /* La caja visual completa conserva 1:1; no depende de las dimensiones
       intrínsecas ni de la proporción del archivo original. */
    .elementor-532 .elementor-element-cfd47cb,
    .elementor-532 .elementor-element-cfd47cb > .e-image-link-base {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
    }

    /* 25/10/2026: la caja de la foto no encoge. Antes se encogía de 212 a 144 px (la columna de textos tiene
       height:100%) y dejaba ~70 px vacíos entre «En stock» y los colores. Ahora la foto es cuadrada y no hay hueco. */
    .elementor-532 .elementor-element-cfd47cb {
        flex-shrink: 0 !important;
    }

    .elementor-532 .elementor-element-cfd47cb > .e-image-link-base {
        height: 100% !important;
    }

    .elementor-532 .elementor-element-cfd47cb img.img-product {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    .elementor-532,
    .elementor-532 > .e-con,
    .elementor-532 [data-id="bc89df3"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .elementor-532 [data-id="754a35a"] {
        gap: 6px !important;
        padding: 10px 8px !important;
    }

    .elementor-532 [data-id="420be7b"] {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .elementor-532 [data-id="e5cd94a"] {
        font-size: 9px !important;
        line-height: 1.25 !important;
    }

    .elementor-532 [data-id="b0bb584"],
    .elementor-532 [data-id="b0bb584"] :is(h1,h2,h3,h4,h5,h6,a) {
        min-height: 2.4em;
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .elementor-532 [data-id="f496b1c"],
    .elementor-532 [data-id="f496b1c"] .amount {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    .elementor-532 [data-id="9d5e6af"] {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    .elementor-532 .product-status {
        padding: 5px 6px;
        font-size: 10px;
    }

    .elementor-532 .stock-chip {
        gap: 3px;
        margin: 0;
        font-size: 10px;
    }

    .elementor-532 .stock-chip svg {
        width: 11px;
        height: 11px;
    }

    .elementor-532 .pc-cart {
        gap: 4px;
        flex-wrap: wrap;
    }

    .elementor-532 .pc-qty,
    .elementor-532 .pc-qty button,
    .elementor-532 .pc-qty .pc-input,
    .elementor-532 .pc-add {
        height: 36px;
    }

    .elementor-532 .pc-qty button {
        width: 20px;
        padding: 0;
        font-size: 12px;
    }

    .elementor-532 .pc-qty .pc-input {
        width: 22px;
        padding: 0;
        font-size: 11px;
    }

    .elementor-532 .pc-add {
        flex: 0 0 100%;
        width: 100%;
        gap: 0;
        padding: 0 5px;
        border-left-width: 3px;
        font-size: 9px;
        letter-spacing: .03em;
    }

    .elementor-532 .pc-add .pc-icon {
        display: none;
    }
}