.epc-vg { margin: 0 0 16px; background: transparent; }
.epc-vg-grupos { display: flex; flex-direction: column; gap: var(--epc-vg-entre, 20px); }
.epc-vg-grupos > .epc-vg { margin: 0; min-width: 0; }
.epc-vg__titulo { font-weight: 600; font-size: 15px; margin-bottom: 8px; color: #222; }
.epc-vg__opciones { display: flex; flex-wrap: wrap; gap: var(--epc-vg-gap, 10px); }

/* Tarjeta vertical: imagen arriba, variación, precio. */
.epc-vg__op {
	box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
	width: 150px; gap: 6px; padding: 10px; border: 1px solid #d0d5dd; border-radius: 10px; background: transparent; color: #222;
	font-size: 14px; line-height: 1.25; text-decoration: none; cursor: pointer; overflow: hidden;
	transition: border-color .15s, background-color .15s, color .15s, box-shadow .15s;
}
a.epc-vg__op:hover, a.epc-vg__op:focus-visible { border-color: #2271b1; color: #2271b1; text-decoration: none; }
.epc-vg__op.is-activa { border-color: #2271b1; color: #222; cursor: default; box-shadow: 0 0 0 1px #2271b1; }

.epc-vg__media { display: flex; align-items: center; justify-content: center; width: 100%; height: 110px; flex: 0 0 auto; overflow: hidden; }
.epc-vg__media img.epc-vg__img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; margin: 0; }

.epc-vg__etq { font-weight: 600; }
.epc-vg__precios { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.epc-vg__precio { font-weight: 700; font-size: 15px; color: #2271b1; }
.epc-vg__precio .woocommerce-Price-amount, .epc-vg__normal .woocommerce-Price-amount { color: inherit; }
.epc-vg__normal { font-size: 12px; opacity: .6; }
.epc-vg__agotado { font-size: 11px; color: #b32d2e; }
.epc-vg__op.is-agotado:not(.is-activa) .epc-vg__media,
.epc-vg__op.is-agotado:not(.is-activa) .epc-vg__etq { opacity: .55; }
.epc-vg__op.is-agotado:not(.is-activa) .epc-vg__etq { text-decoration: line-through; }

/* Rejilla opcional (widget de Elementor) */
.epc-vg--grid .epc-vg__opciones { display: grid; grid-template-columns: repeat(var(--epc-vg-cols, 2), minmax(0, 1fr)); }
.epc-vg--grid .epc-vg__op { width: 100%; }
.epc-vg--sin-tachado .epc-vg__op.is-agotado:not(.is-activa) .epc-vg__etq { text-decoration: none; }

/* ---------- Carrusel (lo activa front.js cuando hay más tarjetas que las visibles) ---------- */
.epc-vg__carril { position: relative; }
.epc-vg .epc-vg__flecha { display: none; }
.epc-vg.is-carrusel .epc-vg__opciones {
	display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 2px;
	scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.epc-vg.is-carrusel .epc-vg__opciones::-webkit-scrollbar { display: none; }
.epc-vg.is-carrusel .epc-vg__carril > .epc-vg__opciones > .epc-vg__op {
	flex: 0 0 auto; scroll-snap-align: start;
	width: calc((100% - (var(--epc-vg-vis, 4) - 1) * var(--epc-vg-gap, 10px)) / var(--epc-vg-vis, 4));
}
.epc-vg.is-carrusel .epc-vg__carril > .epc-vg__flecha {
	display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; z-index: 2;
	transform: translateY(-50%); width: var(--epc-vg-flecha, 32px); height: var(--epc-vg-flecha, 32px); padding: 0; margin: 0;
	border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #222; cursor: pointer;
	box-sizing: border-box; min-width: 0; min-height: 0; max-width: none; font-size: 0; text-transform: none; letter-spacing: 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transition: background-color .15s, color .15s, opacity .15s; line-height: 1;
}
.epc-vg.is-carrusel .epc-vg__flecha:hover, .epc-vg.is-carrusel .epc-vg__flecha:focus-visible { background: #2271b1; color: #fff; }
.epc-vg .epc-vg__flecha svg { width: 60%; height: 60%; fill: currentColor; display: block; }
.epc-vg__flecha--prev { left: 4px; }
.epc-vg__flecha--next { right: 4px; }

/* Fotos con fondo blanco sólido: el blanco se funde con lo que haya detrás (se ve transparente). */
.epc-vg--sin-blanco .epc-vg__media { background: transparent; }
.epc-vg--sin-blanco .epc-vg__media img.epc-vg__img { mix-blend-mode: multiply; }

/* ---------- Modo centro (celular): tarjeta del medio destacada, las vecinas asoman a los lados ---------- */
.epc-vg.is-carrusel.is-centro .epc-vg__carril > .epc-vg__opciones > .epc-vg__op {
	width: var(--epc-vg-centro-ancho, 62%); scroll-snap-align: center;
	transform: scale(var(--epc-vg-centro-escala, .88)); opacity: var(--epc-vg-centro-opacidad, .6);
	transition: transform .3s ease, opacity .3s ease, border-color .15s, background-color .15s, color .15s, box-shadow .15s;
}
.epc-vg.is-carrusel.is-centro .epc-vg__carril > .epc-vg__opciones > .epc-vg__op.is-centrado { transform: none; opacity: 1; }
/* Sin bucle infinito: espacio a los lados para poder centrar la primera y la última. */
.epc-vg.is-centro:not(.is-infinito) .epc-vg__opciones::before,
.epc-vg.is-centro:not(.is-infinito) .epc-vg__opciones::after {
	content: ''; flex: 0 0 max(0px, calc((100% - var(--epc-vg-centro-ancho, 62%)) / 2 - var(--epc-vg-gap, 10px)));
}