/* ============================================================
   PDP V2 — Empuje · rediseño de la ficha de producto
   Todo el CSS nuevo del proyecto vive acá. No editar los .scss
   del tema: se compilan enteros y generan conflictos en el rebase.
   Se carga desde layouts/layout.tpl con una sola línea, entre
   marcadores {# PDP-V2 START #} / {# PDP-V2 END #}.

   Medidas tomadas de topwhite-pdp-comparativo.html, Propuesta 2.
   ============================================================ */

/* PDP-V2 · CONFIGURACIÓN — colores del botón de compra, en un solo lugar.
   2026-09-24: el cliente pasó el CTA del azul del mockup (#1A0DAB, cambio
   #16) a negro. El "hover" y el estado "Agregando…" usan un gris muy
   oscuro: con negro no hay un tono más oscuro que marque el cambio. */
:root {
	--pdp-v2-cta: #000;
	--pdp-v2-cta-hover: #333;
	--pdp-v2-cta-sombra: rgba(0, 0, 0, .28);
}

/* ---- #4 · línea "con transferencia N% off" -------------------
   Mockup: 13.5px / 400, negro. La negrita queda solo en el monto
   y en el porcentaje. Neutralizamos el h5/font-price del tema,
   que la agrandaba y la ponía en color de acento. */
.pdp-v2-transfer .item-price-transfer-amount,
.pdp-v2-transfer .item-price-transfer-label {
	font-size: 13.5px !important;
	font-weight: 400 !important;
	line-height: 1.3;
	color: #000;
}

.pdp-v2-transfer .item-price-transfer-amount b,
.pdp-v2-transfer .item-price-transfer-label b {
	font-weight: 700;
}

/* ---- #2 · aire del bloque de precio --------------------------
   Ritmo del mockup: 9px entre precio y transferencia, 9px hasta
   las cuotas. */
.pdp-v2-transfer {
	margin-top: 9px !important;
	margin-bottom: 0 !important;
}

/* ---- #3 · nombre y precio en la misma línea ------------------
   Mockup: fila flex, space-between, alineados por baseline.
   El nombre queda a la izquierda y el precio a la derecha.

   Implementación: el contenedor de la ficha pasa a grid de dos
   columnas. A .price-container le damos display:contents para que
   sus hijos suban a ser ítems del grid: así el bloque de precios
   puede ir a la fila 1 columna 2, y la transferencia y las cuotas
   quedan debajo, a ancho completo. No movemos el .price-container
   en el HTML porque el JS del propio archivo depende de él. */
.pdp-v2-head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	column-gap: 12px;
}

.pdp-v2-head > * { grid-column: 1 / -1; }

.pdp-v2-head > .page-header {
	grid-column: 1;
	grid-row: 1;
	margin-bottom: 0;
}

.pdp-v2-head > .price-container { display: contents; }

.pdp-v2-head .pdp-v2-prices {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	display: flex;
	align-items: baseline;
	gap: 6px;
}

/* La transferencia y las cuotas vuelven a ancho completo, debajo. */
.pdp-v2-head .pdp-v2-transfer,
.pdp-v2-head .custom-installments-box {
	grid-column: 1 / -1;
}

/* Nombre: 19px / 700 según el mockup.
   Va con !important porque el tema define font-weight con mayor peso y,
   sin esto, el nombre queda en 400. Medido en mobile: 19px/400 -> 19px/700. */
.pdp-v2-head > .page-header .js-product-name,
.pdp-v2-head > .page-header h1 {
	font-size: 19px !important;
	font-weight: 700 !important;
	letter-spacing: 0.38px;
	margin: 0;
}

/* ---- #15 · producto con descuento ----------------------------
   Sin referencia visual en el mockup (usa TOP ABALO, sin oferta).
   Pedido del cliente (24/09): precio anterior tachado a la IZQUIERDA y
   precio actual a la DERECHA, contra el borde. Se invierte con `order`,
   sin mover el markup del theme. Se anula el mr-1 de Bootstrap del
   precio (que va con !important): con el precio al final, ese margen lo
   despegaba del borde derecho. */
.pdp-v2-prices > span { margin: 0 !important; }
.pdp-v2-prices > span.font-big { order: -1; }
/* Refuerzo por si el theme cambia la clase del contenedor. Regla aparte a
   propósito: un navegador que no entiende :has descarta la regla entera, y
   no tiene que arrastrar a la de arriba. */
.pdp-v2-prices > span:has(.js-compare-price-display) { order: -1; }

.pdp-v2-prices .js-price-display {
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: -0.18px;
	line-height: 1.2;
}

.pdp-v2-prices .js-compare-price-display {
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.2;
	color: #7C7C7C;
	text-decoration: line-through;
}

/* ---- #2 · aire del bloque ------------------------------------ */
.pdp-v2-head .custom-installments-box { margin-top: 9px; }

/* ---- Cuotas: 12px según el mockup --------------------------
   product-form.tpl trae un <style> inline con .custom-installments-box
   { font-size: 13px }. Al estar en el body, gana por orden de documento
   sobre nuestro <link> del head. Por eso va !important. */
.pdp-v2-head .custom-installments-box {
	font-size: 12px !important;
	color: #2C3E50 !important;
}

.pdp-v2-head .custom-installments-box strong {
	font-weight: 700 !important;
}

/* ---- #7 · guía de talles en la línea de "Talle" ---------------
   Mockup: la etiqueta TALLE a la izquierda y el link GUÍA DE TALLES
   a la derecha, en la misma fila; los botones de talle abajo.

   El contenedor .js-product-variants ya es flex con wrap y todos sus
   hijos son col-12, por eso se apilaban. Le damos ancho automático al
   grupo de talle y al link, y alineamos arriba: el grupo conserva su
   etiqueta y sus botones apilados, y el link queda al costado a la
   altura de la etiqueta. El grupo de color sigue a ancho completo. */
.pdp-v2-head .js-product-variants {
	align-items: flex-start;
}

/* Corrección del 2026-09-23: antes el grupo de talle iba a
   calc(100% - 140px) para dejarle lugar a la guía al costado. Pero ese
   grupo contiene la etiqueta Y los botones, así que la fila de botones
   también perdía 140px: con 7 talles (TOP PABLA · NEGRO) el "L" bajaba
   solo a una segunda línea. El mockup no hace eso: la guía comparte
   línea SOLO con la etiqueta, y los botones van debajo a todo el ancho.

   Cómo: el grupo de talle vuelve a 100%. La guía se reordena ANTES del
   grupo (order), queda a la derecha (margin-left:auto) y con un margen
   inferior negativo igual a su alto sube al grupo hasta su misma línea:
   la etiqueta queda a la izquierda y la guía a la derecha. El alto se
   fija en 15px, el mismo de la etiqueta. z-index para que el grupo, que
   se pinta después, no le tape el click. */
.pdp-v2-head .js-product-variants > .js-product-variants-group:not(.js-color-variants-container) {
	order: 2;
	flex: 0 0 100%;
	max-width: 100%;
}

.pdp-v2-head .js-product-variants > a[data-modal-url="modal-fullscreen-size-guide"] {
	order: 1;
	flex: 0 0 auto;
	width: auto;
	margin-left: auto !important;   /* sin !important el theme lo deja en 0 */
	margin-top: 0 !important;
	margin-bottom: -15px !important;
	padding: 0 !important;
	height: 15px;
	line-height: 15px;
	position: relative;
	z-index: 2;
}

/* El tema le agrega un "+" al final de .btn-link vía ::after. En el
   contexto original (dentro de la descripción) funcionaba como ícono de
   acordeón; acá, junto al talle, queda como un signo suelto encima del
   texto. Lo anulamos solo para este link.
   Nota: los pseudo-elementos no aparecen en querySelectorAll — este se
   detectó mirando la captura, no midiendo el DOM. */
.pdp-v2-head .js-product-variants > a[data-modal-url="modal-fullscreen-size-guide"] .btn-link::after {
	content: none !important;
}

/* ---- #16 · color del CTA -------------------------------------
   El mockup lo pedía azul (#1A0DAB, hover #140A85); desde el 24/09 es
   negro por pedido del cliente. Los valores están en el bloque de
   configuración de arriba del archivo.

   Se fuerza SOLO acá, no se toca el setting button_background_color
   del admin: ese pinta los botones de toda la tienda (carrito,
   grillas, formularios) y excede el alcance del proyecto. Si el
   cliente lo quiere global después, es un campo del admin.

   El botón "ME LO QUIERO PROBAR" (probador virtual) y el de
   "Avisame cuando vuelva el stock" NO se tocan: son del cliente. */
.pdp-v2-head .js-addtocart,
.pdp-v2-head .btn-add-to-cart {
	background-color: var(--pdp-v2-cta) !important;
	border-color: var(--pdp-v2-cta) !important;
	color: #fff !important;
}

.pdp-v2-head .js-addtocart:hover,
.pdp-v2-head .btn-add-to-cart:hover,
.pdp-v2-head .js-addtocart:focus,
.pdp-v2-head .btn-add-to-cart:focus {
	background-color: var(--pdp-v2-cta-hover) !important;
	border-color: var(--pdp-v2-cta-hover) !important;
}

/* ---- #13 · CTA flotante en mobile ----------------------------
   Maqueta tomada de la clase .fab del mockup (Propuesta 2).

   POR QUÉ NO position:sticky, que es lo que usa el mockup:
   sticky solo flota mientras su bloque contenedor está en pantalla, y
   acá ese bloque es la fila del CTA, de 90px. Medido: a scrollY 1200 el
   botón quedaba en y=-283, o sea que se iba con el scroll. En el mockup
   funciona porque el contenedor del teléfono es largo.

   Se usa position:fixed. Es viable porque la trampa que marca el brief
   está despejada: se verificó que ningún ancestro del CTA tiene
   transform, filter, perspective ni contain.

   Como el contenedor sale del flujo, se compensa con padding-bottom en
   el footer para que el botón no tape los legales del final. */
@media screen and (max-width: 767px) {

	.pdp-v2-head .pdp-v2-fab {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 45;
		padding: 26px 16px 16px !important;   /* el !important vence al pl-0 del tema */
		margin: 0 !important;
		width: auto;
		max-width: 100%;
		pointer-events: none;                  /* la zona borrosa no bloquea clics */
		isolation: isolate;                    /* contiene el z-index -1 del ::before */
	}

	.pdp-v2-head .pdp-v2-fab > * {
		pointer-events: auto;
	}

	.pdp-v2-head .pdp-v2-fab::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		-webkit-backdrop-filter: blur(18px) saturate(125%);
		backdrop-filter: blur(18px) saturate(125%);
		background: linear-gradient(to top, rgba(255,255,255,.30), rgba(255,255,255,0));
		-webkit-mask-image: linear-gradient(to top, #000 0%, #000 38%, rgba(0,0,0,.45) 72%, transparent 100%);
		mask-image: linear-gradient(to top, #000 0%, #000 38%, rgba(0,0,0,.45) 72%, transparent 100%);
	}

	/* Fallback que pide el brief: sin backdrop-filter, fondo blanco ~90%.
	   Sin esto el botón queda sobre las fotos y se vuelve ilegible. */
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.pdp-v2-head .pdp-v2-fab::before {
			background: rgba(255, 255, 255, 0.9);
		}
	}

	.pdp-v2-head .pdp-v2-fab .js-addtocart,
	.pdp-v2-head .pdp-v2-fab [data-avisame-stock-btn] {
		box-shadow: 0 8px 26px var(--pdp-v2-cta-sombra), 0 2px 6px rgba(0, 0, 0, .14);
	}

	/* Espacio al final para que el botón flotante no tape nada.
	   Va en el FOOTER, no en la columna de info. Estaba en la columna y
	   dejaba 110px de hueco blanco a mitad de página, entre los
	   acordeones y "Productos similares": medido 134px de espacio muerto
	   en N8N contra 24px en producción. Ahí no hacía falta, porque la
	   página sigue y el usuario scrollea.

	   Donde SÍ hace falta es al final del todo: medido, el fab se
	   superponía al "Botón de arrepentimiento" del footer, y el brief
	   pide explícitamente que los legales queden visibles.

	   El footer tiene fondo negro propio, así que el espacio extra no
	   deja franja blanca. La clase pdp-v2-ficha la pone el JS solo en la
	   ficha, para no tocar el footer del resto de la tienda.

	   El !important es necesario: el tema fija el padding del footer con
	   !important (verificado: un padding-bottom inline computaba 0px),
	   y es la trampa que marca el brief sobre Bootstrap. */
	body.pdp-v2-ficha .js-footer {
		padding-bottom: 110px !important;
	}

	/* El z-index del fab quedaba encerrado: .product-info-column tiene
	   position:sticky, y eso crea un contexto de apilado propio con
	   z-index:auto. Adentro de ese contexto el 45 no sirve de nada
	   contra los hermanos de la columna, así que el botón se iba abajo
	   de otros elementos al scrollear.

	   Se le da z-index a la columna para que el contexto entero suba.
	   El valor queda por encima del contenido de la página y muy por
	   debajo del header (10000) y de los modales (20000), así que no
	   tapa nada del tema. */
	.product-info-column {
		z-index: 46;
	}
}

/* ---- #14 · barra superior de desktop al scrollear -------------
   Maqueta tomada de .dfloat-wrap / .dfloat del mockup.

   El wrapper es sticky top:0 con height:0 para no ocupar lugar en el
   flujo; la barra de adentro entra deslizándose con translateY cuando
   el JS agrega .activa.

   z-index 60: por encima del contenido y del CTA flotante (45/46),
   y MUY por debajo del header del theme (10000) y de los modales
   (20000), así que no tapa nada del tema. */
@media screen and (min-width: 768px) {

	.pdp-v2-barra-wrap {
		position: sticky;
		/* Debajo del header del theme, que es sticky en top:0 con z-index
		   10000. Con top:0 la barra quedaba TAPADA por el header y apenas
		   se veía una franja. El alto lo mide el JS y lo escribe en la
		   variable, porque cambia si esta la barra de avisos. */
		top: var(--pdp-v2-alto-header, 62px);
		height: 0;
		z-index: 60;
	}

	.pdp-v2-barra {
		background: rgba(255, 255, 255, .72);
		-webkit-backdrop-filter: blur(20px) saturate(125%);
		backdrop-filter: blur(20px) saturate(125%);
		border-bottom: 1px solid #E4E4E4;
		box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
		padding: 10px 30px;
		display: flex;
		align-items: center;
		gap: 20px;
		transform: translateY(-100%);
		opacity: 0;
		transition: transform .26s cubic-bezier(.2, .8, .3, 1), opacity .2s;
		pointer-events: none;
	}

	.pdp-v2-barra-wrap.activa .pdp-v2-barra {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}

	/* Fallback del brief, igual que en el #13: sin backdrop-filter,
	   fondo casi opaco para que el texto se lea. */
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.pdp-v2-barra { background: rgba(255, 255, 255, .97); }
	}

	.pdp-v2-barra-img {
		width: 40px;
		height: 52px;
		object-fit: cover;
		background: #F3F3F3;
		flex: 0 0 auto;
	}

	.pdp-v2-barra-info { flex: 1 1 auto; min-width: 0; }

	.pdp-v2-barra-nombre {
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .03em;
		line-height: 1.2;
	}

	.pdp-v2-barra-precio {
		font-size: 15px;
		font-weight: 700;
		margin-top: 2px;
		line-height: 1.1;
	}

	.pdp-v2-barra-transfer {
		font-size: 10.5px;
		color: #7C7C7C;
		margin-top: 2px;
	}

	.pdp-v2-barra-transfer b { color: #000; font-weight: 700; }

	.pdp-v2-barra-grupo {
		display: flex;
		align-items: center;
		gap: 9px;
		flex: 0 0 auto;
		min-width: 0;
	}

	/* El grupo de color es el unico que puede tener muchas opciones: BODY
	   PALMA tiene 11 y no entran. Es el que cede espacio y, si aun asi no
	   entra, scrollea en lugar de encimarse. El resto conserva su ancho. */
	.pdp-v2-barra-grupo--color { flex: 0 1 auto; }

	.pdp-v2-barra-grupo--color .pdp-v2-barra-opciones {
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 1px;
	}

	.pdp-v2-barra-grupo--color .pdp-v2-barra-opciones::-webkit-scrollbar { display: none; }

	.pdp-v2-barra-etiqueta {
		font-size: 9px;
		letter-spacing: .13em;
		text-transform: uppercase;
		color: #7C7C7C;
		font-weight: 500;
	}

	.pdp-v2-barra-opciones {
		display: flex;
		align-items: center;
		gap: 6px;
		flex-wrap: nowrap;
	}

	.pdp-v2-barra-opcion {
		/* flex-shrink 0: sin esto las pastillas se comprimen unas sobre
		   otras y el nombre se desborda. Se encogia el boton, no el texto. */
		flex: 0 0 auto;
		min-width: 31px;
		height: 29px;
		padding: 0 7px;
		font-size: 10.5px;
		white-space: nowrap;
		background: #fff;
		border: 1px solid #DADADA;
		border-radius: 0;
		cursor: pointer;
		line-height: 1;
	}

	.pdp-v2-barra-opcion.seleccionada { border-color: #000; }

	.pdp-v2-barra-opcion--color {
		width: 23px;
		min-width: 23px;
		height: 23px;
		padding: 2px;
		border-radius: 50%;
	}

	.pdp-v2-barra-opcion--color i {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.pdp-v2-barra-cta {
		/* contra el borde derecho, como en el mockup */
		margin-left: auto;
		flex: 0 0 195px;
		width: 195px;
		height: 43px;
		background: var(--pdp-v2-cta);
		color: #fff;
		border: none;
		font-size: 11.5px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .03em;
		cursor: pointer;
	}

	.pdp-v2-barra-cta:hover { background: var(--pdp-v2-cta-hover); }
}

/* En mobile no existe: ahí manda el CTA flotante del #13. */
@media screen and (max-width: 767px) {
	.pdp-v2-barra-wrap { display: none; }
}

/* ============================================================
   Circulos de color · #7 y barra #14
   El relleno es un <i> real y no un ::after: un pseudoelemento
   puede computar bien y no pintarse, y esto tiene que verse.
   Solo en la barra de desktop: lo agrega pintarCirculosDeLaBarra() en
   pdp-v2.js, copiando el color que el CSS personalizado del CLIENTE ya
   le da al círculo del formulario. El formulario no se toca.
   ============================================================ */
.pdp-v2-sw {
	position: relative;
	width: 29px !important;
	min-width: 29px !important;
	height: 29px !important;
	padding: 2px !important;
	border-radius: 50% !important;
	border: 1px solid #D5D5D5 !important;
	background: #fff !important;
	overflow: hidden;
	font-size: 0 !important;
	line-height: 0 !important;
	flex: 0 0 auto;
}

/* el nombre sigue en el DOM para lectores de pantalla y para el
   title, pero deja de ocupar lugar */
.pdp-v2-sw > *:not(.pdp-v2-sw-fill) {
	font-size: 0 !important;
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.pdp-v2-sw-fill {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.pdp-v2-sw.selected,
.pdp-v2-sw.seleccionada {
	border-color: #000 !important;
	border-width: 1.5px !important;
}

/* En la barra los circulos son algo mas chicos, como en el mockup */
.pdp-v2-barra .pdp-v2-sw {
	width: 23px !important;
	min-width: 23px !important;
	height: 23px !important;
}

/* CTA de la barra mientras agrega al carrito.
   Nada de opacity ni de disabled: con opacity el boton entero se
   lavaba y el texto se perdia, y un <button disabled> ademas se pinta
   con el gris del navegador. El cambio de estado se nota por el tono
   del hover, con el texto en blanco pleno. */
.pdp-v2-barra-cta.ocupado {
	background: var(--pdp-v2-cta-hover);
	color: #fff;
	cursor: default;
	pointer-events: none;
}

/* ============================================================
   #8 · stock
   El tachado de talles agotados es NATIVO del theme
   (.btn-variant-no-stock) y no se toca. Acá va solo lo que el
   theme no hace.
   ============================================================ */

/* Colores sin ningún talle disponible: no se muestran. La clase la pone
   ocultarColoresAgotados() en pdp-v2.js. !important porque las utilidades
   de Bootstrap del theme también usan !important para el display. */
.pdp-v2-color-agotado {
	display: none !important;
}

/* La barra de desktop copia el tachado del formulario. Con un fondo en el
   propio botón y no con ::after: un pseudoelemento puede computar bien y no
   pintarse. Mismo trazo que el nativo (style-critical.scss ~L3559). */
.pdp-v2-barra-opcion.agotada {
	color: rgba(0, 0, 0, .5);
	background: linear-gradient(to top left, transparent 49%, rgba(0, 0, 0, .5), transparent 52%), #fff;
}

/* Talles que no existen para el color elegido (TOP PABLA mezcla XS-L y
   1-2-3 según el color). No están agotados: no existen. Tocarlos dejaba
   la ficha sin precio. La clase la pone acomodarTallesDelColor(). */
.pdp-v2-talle-inexistente {
	display: none !important;
}

/* CTA de la barra cuando la variante elegida no tiene stock: dice "Sin
   stock" (lo pone pdp-v2.js) y no invita a tocarlo. Mismo criterio que el
   estado ocupado: sin opacity, que lava el texto. */
.pdp-v2-barra-cta.sin-stock {
	background: #7C7C7C;
	color: #fff;
	cursor: default;
	pointer-events: none;
}

/* ---- #1 · todas las fotos de la galería en la misma caja -----------
   CELULAR, 3:4 · pedido del cliente vía Gastón (2026-09-23): en el primer
   pantallazo del celular la galería quedaba alta y el nombre y el precio
   caían fuera.
   ESCRITORIO, 2:3 · pedido de Gastón (2026-09-24): el 26% de las fichas
   tiene la primera foto cuadrada; con su proporción real quedaba más baja
   que las demás y dejaba 300 px en blanco debajo (pasa igual en
   producción). 2:3 es la proporción del 97% de las fotos, así que esas se
   ven exactamente como antes.

   El theme arma la caja de cada foto con un padding-bottom inline
   calculado con la proporción real de la imagen (150% para una 2:3, 100%
   para una cuadrada) y la foto va absoluta, a lo ancho, con alto
   automático. Acá todas las cajas pasan a la misma proporción y la foto
   la cubre con object-fit: cover, centrada, que es lo que hace el mockup
   (.a-rail figure / img: aspect-ratio 3/4 + object-fit cover).
   Recorte medido sobre producción (bitácora A11):
   - celular: 2:3 -> 5,5% arriba y abajo; cuadrada -> 12,5% por costado;
     9:16 -> 12,5% arriba y abajo.
   - escritorio: 2:3 -> nada; cuadrada -> 16,7% por costado;
     9:16 -> 7,8% arriba y abajo.
   Los archivos de las fotos no se tocan: solo cambia el encuadre.

   !important porque el padding-bottom viene inline en el HTML. */
#single-product .js-swiper-product .js-product-slide-link {
	padding-bottom: 150% !important;
	overflow: hidden;
}

@media screen and (max-width: 767px) {
	#single-product .js-swiper-product .js-product-slide-link {
		padding-bottom: 133.3333% !important;
	}
}

#single-product .js-swiper-product .js-product-slide-link .product-slider-image {
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	-webkit-transform: none !important;
	transform: none !important;
	object-fit: cover;
	object-position: center;
}

/* ---- Galería: puntitos, en celular y escritorio --------------------
   Medidas del mockup: .dots { gap: 4px }, .dot { 4px, #D9D9D9 },
   .dot.on { 14px, negro, alargado }, con 8 px de aire arriba (.gmeta).
   En mobile desde el 23/09; en escritorio desde el 24/09 (pedido de
   Gastón). Reemplazan al contador y a las flechas del theme. */
#single-product .pdp-v2-puntos {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 12px;          /* 8 de aire + 4 del punto: el lugar ya reservado */
	padding-top: 8px;
	box-sizing: border-box;
}

.pdp-v2-punto {
	display: block;
	flex: 0 0 auto;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #D9D9D9;
	transition: width .2s ease, background-color .2s ease;
}

.pdp-v2-punto.activo {
	width: 14px;
	border-radius: 99px;
	background: #000;
}

/* ---- Galería: flechas sobre la foto, en celular y escritorio ----------
   Las del mockup (.arr): círculo blanco al 93% de 29 px, sombra suave,
   centrado en alto y a 18 px del borde. Los botones los agrega pdp-v2.js
   dentro del carrusel. El botón mide 44 px (área tocable cómoda) y el
   círculo visible 29 px, así que el botón se corre 7,5 px hacia afuera.
   La que no tiene a dónde ir NO se muestra (pedido de Gastón, 24/09: en
   la primera foto no va la flecha de la izquierda); el mockup la apagaba
   al 25%. */
#single-product .pdp-v2-flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: #000;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Escritorio: el carrusel arranca en el borde de la foto -> 18 - 7,5. */
#single-product .pdp-v2-flecha.anterior { left: 10.5px; }
#single-product .pdp-v2-flecha.siguiente { right: 10.5px; }

/* Celular: la columna tiene 15 px de margen, así que el círculo queda a
   18 px del borde de la pantalla, como en el mockup. */
@media screen and (max-width: 767px) {
	#single-product .pdp-v2-flecha.anterior { left: -4.5px; }
	#single-product .pdp-v2-flecha.siguiente { right: -4.5px; }
}

#single-product .pdp-v2-flecha-circulo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 29px;
	height: 29px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .93);
	box-shadow: 0 2px 9px rgba(0, 0, 0, .15);
}

#single-product .pdp-v2-flecha[disabled] {
	visibility: hidden;
	pointer-events: none;
}

/* ---- Botón de WhatsApp del theme en la ficha (mobile) ---------------
   25/09, visto recién en producción (en N8N el WhatsApp no está
   configurado). El círculo del theme (.btn-whatsapp, fijo a 20 px del
   borde) tapaba el extremo derecho del CTA flotante; subido por encima
   del CTA, tapaba el PRECIO en el primer pantallazo de las pantallas
   bajas (iPhone con las barras de Safari, 390 × 664; iPhone SE).
   Pedido de Gastón: oculto de entrada y visible recién al scrollear. La
   clase la pone pdp-v2-temprano.js cuando se bajan más de 120 px; al
   volver arriba de todo se oculta de nuevo.

   Se oculta con visibility + opacity, no con display: el theme lo muestra
   y lo oculta con fadeIn/fadeOut (display y opacity inline) cuando abre su
   popup de la home; por eso los !important.

   Dos reglas iguales A PROPÓSITO: la de :has aplica desde el primer
   pintado, sin esperar ningún script, y evita el "salto" (antes la regla
   dependía de una clase que ponía pdp-v2.js tarde y el botón se veía
   deslizarse); la de la clase cubre los navegadores que no entienden :has.
   Van separadas porque si un navegador no entiende un selector descarta la
   regla entera. */
@media screen and (max-width: 767px) {
	body:has(#single-product) .btn-whatsapp {
		bottom: 76px;          /* 16 de margen + 48 del CTA + 12 de aire */
		visibility: hidden !important;
		opacity: 0 !important;
		transition: opacity .2s ease, visibility 0s linear .2s;
	}
	body.pdp-v2-ficha .btn-whatsapp {
		bottom: 76px;
		visibility: hidden !important;
		opacity: 0 !important;
		transition: opacity .2s ease, visibility 0s linear .2s;
	}
	/* Mostrar. También en dos reglas: el :has(#single-product) de arriba
	   suma especificidad de id y le ganaría a la regla sin :has. */
	body:has(#single-product).pdp-v2-scrolleado .btn-whatsapp {
		visibility: visible !important;
		opacity: 1 !important;
		transition: opacity .2s ease;
	}
	body.pdp-v2-ficha.pdp-v2-scrolleado .btn-whatsapp {
		visibility: visible !important;
		opacity: 1 !important;
		transition: opacity .2s ease;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.pdp-v2-ficha .btn-whatsapp { transition: none !important; }
}

/* ---- Guía de talles: la imagen se amplía al tocarla (pdp-v2.js) ------- */
#single-product .size-guide-content img,
.size-guide-content img {
	cursor: zoom-in;
}