/* =========================================================
   MotoReflex — single de producto (ficha individual de WooCommerce).
   Archivo aparte de woocommerce.css: se enquea solo con is_product()
   (inc/enqueue.php) para que tienda/categoría/carrito/checkout no bajen
   este CSS que nunca usan, y viceversa. Mismo prefijo ".woocommerce " que
   el resto del CSS de WooCommerce del tema, por la misma razón de
   especificidad documentada en woocommerce.css.

   Rediseño 2026-09-13, referencia visual: motocard.com (ficha de
   producto). Reemplaza 3 rondas de parches incrementales (grid quitado
   9-sep, opacity forzada 10-sep, ancho explícito 12-sep) que fueron
   corrigiendo síntomas de una estructura con demasiados niveles de
   grid/flex anidados sin ancho explícito — la causa real del colapso a
   22×22px. La estructura de abajo la evita desde el diseño: un solo
   nivel de grid para la galería (el wrapper intermedio de WooCommerce se
   aplana con display:contents) y columnas con minmax() en vez de 1fr
   puro, que nunca deja un track en 0. */

.woocommerce div.product {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 24px 64px;
	display: grid;
	gap: 24px;
	grid-template-areas: "images" "summary" "tabs";
}
/* Escritorio: panel de compra (resumen) a la derecha con ancho acotado
   (minmax, no 1fr — nunca colapsa a 0), abarcando la altura de galería +
   pestañas, que se apilan a la izquierda. Mismo patrón que usa
   motocard.com para su panel de compra "alto". "Relacionados"/upsells ya
   NO son parte de este grid (2026-09-13, ver inc/woocommerce.php): medido
   que el containing block de un position:sticky dentro de un grid es el
   grid COMPLETO, no el área con nombre del item, así que mientras
   "related" siguiera acá adentro (sin importar la fila) el panel sticky
   viajaba de más y soltaba tarde. Al sacarlo del grid por completo, este
   grid pasa a tener solo 2 filas y el sticky de div.summary suelta justo
   al terminar la 2ª (pedido explícito: "que persiga hasta el punto
   marcado en azul y se quede ahí"). */
@media (min-width: 901px) {
	.woocommerce div.product {
		grid-template-areas: "images summary" "tabs summary";
		/* minmax(0,620px) en vez de 1fr puro: con una sola foto (grid-
		   column:1/-1 + aspect-ratio:1) un track 1fr sin tope crecía hasta
		   ~700-900px de ANCHO en pantallas grandes, y por el aspect-ratio
		   la foto se volvía igual de ALTA — dominaba la pantalla y dejaba
		   un hueco vacío bajo el panel de compra, más corto (reportado
		   2026-09-13). */
		grid-template-columns: minmax(0, 620px) minmax(320px, 440px);
		gap: 32px;
		align-items: start;
	}
}
.woocommerce div.product > span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: var(--mr-accent);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	padding: 4px 10px;
	border-radius: 999px;
}

/* =========== Galería =========== */
/* Un solo nivel de grid (antes: flex → grid → aspect-ratio, 3 niveles).
   El wrapper que imprime WooCommerce entre .images y cada foto
   (.woocommerce-product-gallery__wrapper) se aplana con display:contents
   —mismo truco ya usado en main.css para las tablas de specs de moto—
   así sus hijos son items directos de ESTE grid, sin capa intermedia que
   pueda perder el ancho. */
.woocommerce div.product div.images {
	grid-area: images;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.woocommerce-product-gallery {
	/* WooCommerce escribe opacity:0 inline y depende de su propio JS de
	   zoom para revelarla — si ese script tarda o falla, la foto queda
	   invisible indefinidamente (pasó en un producto real, 2026-09-10).
	   !important en hoja externa gana sobre style="" inline sin
	   !important: se muestra siempre, sin esperar ningún JS. */
	opacity: 1 !important;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper {
	display: contents;
}
.woocommerce div.product .woocommerce-product-gallery__image {
	position: relative;
	aspect-ratio: 1;
	border-radius: 14px;
	overflow: hidden;
	/* Fondo gris claro + mix-blend-mode:multiply (estilo motocard): las
	   fotos de producto suelen tener fondo blanco/transparente, y esta
	   combinación las integra contra el fondo sin bordes duros, en vez de
	   dejarlas "flotando" sobre blanco puro. */
	background: #f5f5f5;
}
.woocommerce div.product .woocommerce-product-gallery__image:first-child {
	grid-column: 1 / -1;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
	cursor: zoom-in;
}
@media (max-width: 480px) {
	.woocommerce div.product div.images { grid-template-columns: 1fr; }
	.woocommerce div.product .woocommerce-product-gallery__image:first-child { grid-column: 1; }
}
/* Por debajo de escritorio (<901px) .images no tiene grid-template-columns
   propio en div.product (todo apilado en 1 columna) y puede llegar a medir
   ~100% del viewport. En teléfonos angostos (<481px) eso da una foto
   razonable, pero entre 481-900px (tablets, celulares grandes u
   horizontales) la foto cuadrada (:first-child + aspect-ratio:1) se estira
   sin límite y domina la pantalla — mismo bug que el tope de 620px de
   escritorio, sin parchar en este rango (reportado 2026-09-13). */
@media (max-width: 900px) {
	.woocommerce div.product div.images {
		max-width: 480px;
		margin: 0 auto;
	}
}

/* =========== Resumen / panel de compra =========== */
.woocommerce div.product div.summary {
	grid-area: summary;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	float: none;
	width: auto;
}
/* Panel "flotante" (estilo motocard): al ocupar un área que abarca 3
   filas (galería+pestañas+relacionados) pero sin estirarse a esa altura
   (align-items:start del contenedor), sticky tiene margen real para
   "viajar" — se pega bajo el header mientras se hace scroll por el resto
   del contenido, y se suelta solo al llegar al final de "relacionados"
   (fin del área), sin JS. top:108px ≈ alto de .mr-header-main (logo/
   búsqueda + fila de categorías, ambos sticky juntos) — ajustar si no
   calza exacto al verlo en vivo. */
@media (min-width: 901px) {
	.woocommerce div.product div.summary {
		position: sticky;
		top: 108px;
		align-self: start;
	}
}
.woocommerce div.product .product_title {
	position: relative;
	margin: 0 28px 0 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
}
/* SKU/categoría/etiquetas nativas de WooCommerce (woocommerce_template_
   single_meta): no tenían NINGÚN estilo propio ni del tema ni del plugin
   (su hoja default fue dequeued en inc/enqueue.php) — se veían como texto
   plano sin jerarquía. */
.woocommerce div.product .product_meta {
	font-size: 12.5px;
	color: var(--mr-muted);
}
.woocommerce div.product .product_meta > span { display: block; margin-top: 2px; }
.woocommerce div.product .product_meta a { color: inherit; }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 30px;
	font-weight: 800;
	color: var(--mr-accent);
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.woocommerce div.product p.price del { font-size: 16px; color: var(--mr-muted); font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--mr-save); }
.woocommerce div.product .stock {
	display: inline-block;
	width: fit-content;
	background: rgba(27, 161, 82, .1);
	color: #178a47;
	font-weight: 700;
	font-size: 12px;
	border-radius: 5px;
	padding: 3px 8px;
}
.woocommerce div.product .stock.out-of-stock { background: rgba(212, 42, 32, .1); color: var(--mr-accent-dark); }

/* "Añadir al carrito" nativo (woocommerce_template_single_add_to_cart, sin
   tocar) restyleado con el mismo lenguaje visual de .mr-btn-primary/
   .mr-btn-whatsapp en vez de duplicar clases — ver inc/whatsapp.php. */
.woocommerce div.product table.variations { width: 100%; margin: 0 0 4px; }
.woocommerce div.product table.variations td.label { font-weight: 700; font-size: 13px; padding: 0 0 4px; }
.woocommerce div.product table.variations select {
	width: 100%; padding: 10px 12px; border: 1px solid var(--mr-border-strong);
	border-radius: 8px; font-size: 14px; background: #fff;
}
.woocommerce div.product .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart {
	display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0;
}
.woocommerce div.product form.cart .quantity { display: flex; }
.woocommerce div.product form.cart .quantity .qty {
	width: 64px; height: 50px; border: 1px solid var(--mr-border-strong);
	border-radius: 8px; text-align: center; font-size: 14.5px;
}
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	flex: 1; min-width: 160px; height: 50px; margin: 0;
	background: var(--mr-accent); color: #fff;
	border: none; border-radius: 8px;
	font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
	box-shadow: none;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover { background: var(--mr-accent-dark); color: #fff; }
.woocommerce div.product form.cart .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; }
.woocommerce div.product .woocommerce-variation-availability { flex-basis: 100%; }

/* Métodos de pago + envío: estilos base de .mr-product-extra/.mr-payment-
   badge en main.css (compartidos con el footer). Aquí solo el contenedor
   propio de la ficha. */
.woocommerce .mr-product-extra {
	background: #fff;
	border: 1px solid var(--mr-border);
	border-radius: 10px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.woocommerce .mr-shipping-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--mr-muted-soft); }
.woocommerce .mr-shipping-bullets li { display: flex; gap: 10px; align-items: center; }
.woocommerce .mr-shipping-bullets li::before {
	content: "";
	width: 8px; height: 8px; flex: none;
	background: var(--mr-accent); border-radius: 2px;
}

/* =========== Pestañas (acordeón) =========== */
.woocommerce div.product .woocommerce-tabs {
	grid-area: tabs;
	margin: 0;
	background: #fff;
	border: 1px solid var(--mr-border);
	border-radius: 14px;
	overflow: hidden;
}
.mr-product-accordion__item { border-bottom: 1px solid var(--mr-border); }
.mr-product-accordion__item:last-child { border-bottom: none; }
.mr-product-accordion__heading { margin: 0; }
.mr-product-accordion__header {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: 16px 22px;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--mr-muted-soft);
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
}
.mr-product-accordion__item.is-open .mr-product-accordion__header { color: var(--mr-ink); }
.mr-product-accordion__header::after {
	content: "+";
	font-size: 16px;
	color: var(--mr-muted);
	flex: none;
	margin-left: 12px;
}
.mr-product-accordion__item.is-open .mr-product-accordion__header::after { content: "−"; color: var(--mr-accent); }
.mr-product-accordion__panel { display: none; }
.mr-product-accordion__item.is-open .mr-product-accordion__panel { display: block; }
.woocommerce div.product .woocommerce-tabs .panel { padding: 26px 28px; max-width: 820px; }
.woocommerce div.product .woocommerce-tabs table.shop_attributes { border: none; }
.woocommerce div.product .woocommerce-tabs table.shop_attributes tr { border-bottom: 1px solid var(--mr-border); }
.woocommerce div.product .woocommerce-tabs table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs table.shop_attributes td {
	padding: 11px 0; font-size: 13.5px; border: none; background: none;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes th { color: var(--mr-muted); font-weight: 400; width: auto; }
.mr-compat-tab p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.7; color: var(--mr-muted-soft); }

/* Relacionados/upsells: la tarjeta/rail (.mr-product-card*, .mr-rail*) es
   compartida con tienda/categoría/home y vive en woocommerce.css. YA NO son
   items del grid de .woocommerce div.product (2026-09-13): se reubicaron
   por PHP a woocommerce_after_single_product (ver inc/woocommerce.php),
   que dispara DESPUÉS de que ese grid cierra. Motivo: se midió con
   Playwright que el containing block de un position:sticky dentro de un
   grid es el GRID COMPLETO, no el área con nombre que se le asigne al
   item — con "related" todavía adentro (aunque en su propia fila con
   nombre), el panel de compra sticky viajaba a través de las 3 filas
   completas y se soltaba mucho más tarde de lo debido en fichas donde el
   panel es más alto que galería+pestañas (reportado con captura, ficha de
   guantes Motowolf 0302). Sacarlo del grid es la única forma de que el
   sticky suelte justo al llegar acá.
   Selector ".woocommerce ..." (no "> div.product > ...") porque ya no es
   hijo directo de .product — ".woocommerce" es la clase que WordPress pone
   en <body>, así que sigue matcheando sin depender de la profundidad exacta
   del nuevo DOM. Ancho de 1200px + padding de 24px replicado a mano (antes
   lo heredaba de ser hijo del grid) para seguir alineado con el margen de
   la imagen/título de arriba, mismo pedido del 2026-09-13. El sangrado
   propio de .mr-rail (woocommerce.css) sigue intacto: dentro de este
   contenedor de 1200px, las tarjetas individuales llegan hasta el borde
   DEL CONTENEDOR (no de la pantalla), igual que el resto del sitio. */
.woocommerce .related.products,
.woocommerce .upsells.products {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px 64px;
}