/**
 * Ficha de producto individual — capa visual (estilo Singer).
 *
 * ETAPA 1 — solo estructura:
 *   1. Elimina el hueco vacío superior. La causa real NO era solo el
 *      min-height:50vh de .site-main: el override del hijo para
 *      woocommerce/archive/banner-bar.php pintaba el CARRUSEL COMPLETO de
 *      categorías de la tienda a todo el ancho de página (single-product.php
 *      del padre llama al mismo template). Se corrigió dejando ese hook VACÍO
 *      en is_product() — ni carrusel ni banner "Productos" a ancho completo.
 *   2. Sidebar propio de la ficha (.oz-single-sidebar): categorías + banner.
 *   3. Layout de 2 columnas: [ sidebar | contenido principal ]. La franja
 *      "Singer Producto" + migas ahora se imprime DENTRO del contenido
 *      principal (template-parts/single-product-header.php, ver functions.php)
 *      para que empiece donde empieza la galería, no donde empieza el sidebar.
 *   4. Dentro del contenido principal, galería/summary quedan mitad y mitad
 *      (el grid 46/54 ya lo define el padre en .oz-single-product div.product)
 *      con gap moderado y sin el padding/fondo gris que achicaba la imagen.
 *   5. Miniaturas de galería en fila horizontal: el padre las pone en row por
 *      defecto en single-product.css, pero product-gallery.css (otro CSS del
 *      padre, con su propio media query >=992px) las fuerza a `column
 *      !important` cuando la galería es --vertical. Ambos archivos dependían
 *      del mismo handle base, así que WP no garantizaba el orden de impresión
 *      entre "hermanos" — se corrigió en functions.php añadiendo
 *      oz-tema-2-wc-product-gallery como dependencia explícita de este CSS.
 *
 * Todo scopeado a is_product() (vía el propio contenedor .oz-single-layout,
 * que solo existe en esta página) — no toca tienda, header ni footer.
 *
 * @package OZ_Tema_2_Child
 */

/* ── 1. Quitar el hueco vacío superior restante ─────────────────────────
   .site-main {min-height:50vh} es GLOBAL (style.css del padre, aplica a
   toda página); en single-product el contenido es más corto que 50vh. */
.site-main.site-main--woo-single {
	min-height: 0;
}

.oz-single-product {
	padding-top: 0.75rem;
}

/* ── 2/3. Layout de 2 columnas: sidebar | contenido principal ───────────
   El sidebar mantiene un ancho fijo razonable (no crece); el resto del
   ancho disponible va todo al contenido principal (galería + summary). */
.oz-single-layout {
	display: grid;
	grid-template-columns: minmax(220px, 21fr) minmax(0, 79fr);
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: start;
}

.oz-single-layout__main {
	min-width: 0;
}

/* Franja "Singer Producto" + migas — dentro del contenido principal, empieza
   donde empieza la galería (no donde empieza el sidebar). */
.oz-single-header {
	background: #f3f4f6;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

.oz-single-header__title {
	margin: 0;
	font-family: var(--OZ-Font-Headings);
	font-size: 1.05rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.2;
}

.oz-single-header__wc-breadcrumb {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.35rem;
	font-size: 0.8125rem;
	color: #6b7280;
}

.oz-single-header__wc-breadcrumb a {
	color: #4b5563;
	font-weight: 600;
	text-decoration: none;
}

.oz-single-header__wc-breadcrumb a:hover {
	text-decoration: underline;
}

.oz-single-header__crumb-sep {
	color: #9ca3af;
}

/* Grid interno galería/summary: el padre lo define 46/54 sobre
   `.oz-single-product div.product`; se sube a 54/46 (galería dominante, como
   pide la referencia) y se acerca el gap. Mismo selector de 2 clases que el
   padre (misma especificidad) pero declarado DESPUÉS en la cascada. */
.oz-single-layout__main div.product {
	grid-template-columns: minmax(0, 54fr) minmax(0, 46fr) !important;
	margin-top: 0;
	column-gap: clamp(1rem, 2vw, 1.5rem) !important;
}

/* ANCHO REAL DEL SUMMARY — CAUSA CONFIRMADA con getComputedStyle() real en
   Chrome: .summary.entry-summary computaba float:right, y 463.578px (ancho
   real de la columna de grid) × 48% = 222.517px — coincide EXACTO con los
   222.516px medidos. La causa es una regla LEGACY del core de WooCommerce,
   en un archivo CSS separado que no se había revisado antes
   (plugins/woocommerce/assets/css/woocommerce-layout.css, no
   woocommerce.css):
     .woocommerce div.product div.summary,
     .woocommerce-page div.product div.summary,
     (+ variantes con #content) { float:right; width:48%; clear:none; }
   Mi fix anterior (width:100% !important, sin tocar float) no alcanzaba:
   un elemento con float:right activo se comporta como caja flotante
   clásica dentro de la celda de grid, ignorando el "stretch" de Grid en la
   práctica — el ancho de una caja flotada lo determina su propio width
   (aquí, ese 48% legacy), no el tamaño de la celda que la contiene. Por
   eso hacía falta neutralizar TAMBIÉN float/clear, no solo width. */
.oz-single-layout__main div.product > .summary.entry-summary {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	clear: none !important;
	justify-self: stretch !important;
	box-sizing: border-box;
}

/* La galería venía con padding interno + fondo gris (pensada como "tarjeta"
   separada); eso reducía el área real de la imagen. Se quita para que la
   imagen ocupe todo el ancho de su columna. */
.oz-single-layout .woocommerce-product-gallery {
	padding: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
}

.oz-single-layout .woocommerce-product-gallery__wrapper,
.oz-single-layout .flex-viewport {
	border: 1px solid #e6e6e6;
}

/* Flechas del carrusel de imágenes (FlexSlider, .flex-direction-nav):
   la librería posiciona cada flecha con un "top" inline en px,
   recalculado en JS como la mitad de la altura del .flex-viewport en
   el momento de inicializarse — pero cuando la imagen del producto no
   llena todo ese alto (mucho espacio blanco alrededor, como en las
   fotos de combos), el centro geométrico del contenedor no coincide
   con el centro visual de la imagen, y las flechas quedan flotando en
   un punto que no corresponde a nada.
   .flex-direction-nav es HERMANO de .flex-viewport (no su padre), con
   height:0 — y .woocommerce-product-gallery (el único ancestro con
   position:relative disponible) incluye TAMBIÉN las miniaturas de
   abajo (.flex-control-thumbs) en su altura total, así que centrar al
   50% de ESE contenedor desplaza las flechas hacia las miniaturas, no
   al centro de la imagen. Solución: mover .flex-direction-nav DENTRO
   de .flex-viewport con JS (un solo appendChild, sin reimplementar la
   librería) para que su position:relative/absolute se calcule
   correctamente contra la altura real de la imagen. */
.oz-single-layout .flex-viewport {
	position: relative;
}
.oz-single-layout .flex-viewport .flex-direction-nav .flex-prev,
.oz-single-layout .flex-viewport .flex-direction-nav .flex-next {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}
.oz-single-layout .flex-viewport .flex-direction-nav .flex-prev {
	left: 12px !important;
	right: auto !important;
}
.oz-single-layout .flex-viewport .flex-direction-nav .flex-next {
	right: 12px !important;
	left: auto !important;
}

@media (max-width: 991px) {
	.oz-single-layout {
		grid-template-columns: 1fr;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR PROPIO DE LA FICHA — .oz-single-sidebar
   Misma identidad visual que el sidebar de tienda (.oz-shop-archive__sidebar
   en shop-sidebar.css) pero SIN reutilizar esa clase: acá no hay filtros de
   precio/atributos, solo categorías + banner. Todo scopeado a esta raíz.
   ══════════════════════════════════════════════════════════════════════ */
.oz-single-sidebar {
	--oz-ss-accent: #ff0047;
	--oz-ss-accent-dark: #d6003c;
	--oz-ss-border: #e6e6e6;
	--oz-ss-sep: #eeeeee;
	--oz-ss-title: #1f2937;
	--oz-ss-text: #4b5563;
}

.oz-single-sidebar > * + * {
	margin-top: 14px;
}

.oz-single-sidebar__widget {
	background: #fff;
	border: 1px solid var(--oz-ss-border);
	border-radius: 8px;
	box-shadow: none;
	padding: 13px 15px 15px;
	box-sizing: border-box;
}

.oz-single-sidebar__title {
	position: relative;
	display: block;
	margin: 0 0 11px;
	padding: 0 0 9px;
	border-bottom: 1px solid var(--oz-ss-sep);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
	color: var(--oz-ss-title);
	line-height: 1.25;
}

.oz-single-sidebar__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 34px;
	height: 2px;
	background: var(--oz-ss-accent);
	border-radius: 2px;
}

.oz-single-sidebar__cats {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oz-single-sidebar__cat {
	border-bottom: 1px solid var(--oz-ss-sep);
}

.oz-single-sidebar__cat:last-child {
	border-bottom: 0;
}

.oz-single-sidebar__cat > a {
	display: block;
	padding: 8px 2px;
	color: var(--oz-ss-text);
	background: transparent;
	font-size: 13.5px;
	line-height: 1.35;
	text-decoration: none;
}

.oz-single-sidebar__cat > a:hover {
	color: var(--oz-ss-accent);
}

.oz-single-sidebar__cat.is-active > a {
	color: var(--oz-ss-accent);
	font-weight: 600;
}

/* Banner catálogo: ocupa el ancho, sin deformar (mismo patrón que la tienda). */
.oz-single-sidebar__widget--banner {
	padding: 0;
	overflow: hidden;
}

.oz-single-sidebar__widget--banner a,
.oz-single-sidebar__widget--banner img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

@media (max-width: 768px) {
	.oz-single-sidebar {
		display: none;
	}

	/* Galería arriba, summary debajo: .oz-single-layout__main div.product
	   fija 54/46 en 2 columnas con !important SIN media query (línea ~109),
	   lo que en pantallas angostas seguía comprimiendo galería+summary lado
	   a lado en vez de apilar. Se sube a 1 columna aquí (mismo selector y
	   misma especificidad, declarado después → gana sin duplicar
	   !important extra); con grid-template-columns:1fr el orden visual
	   sigue el orden real del DOM (galería primero, luego .summary). */
	.oz-single-layout__main div.product {
		grid-template-columns: 1fr !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   GALERÍA — solo tamaño/posición; NO se reconstruye.
   ══════════════════════════════════════════════════════════════════════ */

/* CAUSA REAL de las miniaturas "verticales" (no era solo la dirección del
   <ol> de miniaturas): product-gallery.css del padre, en su bloque
   `@media (min-width:992px) .oz-wc-gallery.oz-wc-gallery--vertical`, pone el
   WRAPPER EXTERIOR COMPLETO (.oz-wc-gallery, que contiene tanto
   .flex-viewport como .flex-control-thumbs) en `display:flex !important`
   (fila) y además da a las miniaturas `order:-1` — es decir, las coloca como
   una COLUMNA LATERAL a la izquierda de la imagen, no como una fila debajo.

   Neutraliza SOLO el wrapper exterior (.oz-wc-gallery--vertical, el <div>
   raíz de nuestro tema que engloba viewport+thumbs) para que sea columna en
   vez de fila con thumbs a un costado. NO se toca nada por debajo de eso
   (.flex-viewport, .woocommerce-product-gallery__wrapper, cada
   __image/slide): esas capas las gestiona FlexSlider en JS (posiciona los
   slides superpuestos vía float/position/transform calculados dinámicamente
   a partir del ancho real que mide con jQuery .width()). Forzar display:block
   o float:none sobre esas capas internas rompe esa superposición: cada slide
   cae en flujo normal de documento y se apilan verticalmente (bug detectado
   con getBoundingClientRect(): .flex-viewport medía ~3546px de alto = varias
   imágenes de ~575px apiladas, en vez de superpuestas dentro de un viewport
   de altura ~575px). El único ancho que se fuerza es el del wrapper raíz
   (.oz-wc-gallery--vertical), que SÍ es seguro: no es gestionado por
   FlexSlider, solo decide si es columna (viewport+thumbs) o fila. */
.oz-single-layout.oz-single-layout .oz-wc-gallery.oz-wc-gallery--vertical {
	display: block !important;
	width: 100% !important;
}

/* Miniaturas: fila horizontal debajo del viewport, sin la columna lateral
   angosta (width fijo + max-height + overflow-y del padre) que las obligaba
   a apilarse. order:0 anula el order:-1 que las ponía antes que el viewport. */
.oz-single-layout .oz-wc-gallery.oz-wc-gallery--vertical .flex-control-thumbs,
.oz-single-layout .oz-wc-gallery.oz-wc-gallery--vertical .flex-control-nav.flex-control-thumbs {
	order: 0 !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	width: 100% !important;
	min-width: 0 !important;
	max-height: none !important;
	overflow: visible !important;
	gap: 0.625rem !important;
	margin: 0.875rem 0 0 !important;
	padding: 0 !important;
}

.oz-single-layout .oz-wc-gallery.oz-wc-gallery--vertical .flex-control-thumbs li {
	flex: 0 0 72px !important;
	width: 72px !important;
}

.oz-single-layout .oz-wc-gallery.oz-wc-gallery--vertical .flex-control-thumbs img {
	width: 72px !important;
	height: 72px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	object-fit: contain !important;
}

/* Imagen principal: protagonista, usa el 100% del ancho de su columna.
   El <img> trae atributos HTML width="600" height="600" (no solo CSS); estos
   !important cubren tanto la cascada normal como cualquier user-agent que dé
   peso a los atributos de presentación heredados de HTML. */
.oz-single-layout.oz-single-layout .woocommerce-product-gallery__image img,
.oz-single-layout .oz-wc-gallery.oz-wc-gallery--vertical .woocommerce-product-gallery__image img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	object-fit: contain;
}

/* ══════════════════════════════════════════════════════════════════════
   ETAPA 2 — SUMMARY (.summary.entry-summary): solo capa visual.
   Auditoría + recuperación de implementaciones legacy (`ozado`) confirmó:
     - Precio (del/ins), descuento % (calculado en vivo), descripción corta,
       stock, categoría/etiqueta, botón "Presupuestar", ficha técnica (ACF
       `pdf`) → datos reales del sistema actual.
     - Nota de cotización, garantía (solo categoría Máquinas de Coser
       Doméstica), botón "Consulte" (WhatsApp, mismo número ya usado en el
       footer) y botón "Compartir" → RECUPERADOS del tema legacy `ozado`
       (ver comentarios en functions.php junto a cada callback).
     - Entrega estimada → plugin "Estimate delivery date for WooCommerce"
       recién reinstalado por el usuario; pendiente de confirmación visual.
     - Distribuidores → sin fuente limpia y confiable (el slider real vivía
       en tablas huérfanas de un plugin SmartSlider3 ya desinstalado); queda
       pendiente.
   El botón "Agregar"/"Presupuestar" y el de ficha técnica YA tienen estilo
   completo del padre (single-product.css:393-410, 503-544) — no se tocan.
   ══════════════════════════════════════════════════════════════════════ */

/* Nota de cotización: texto pequeño y discreto, "NOTA:" resaltado. */
.oz-single-layout .summary.entry-summary .oz-single-quote-note {
	margin: 0;
	padding: 0.6rem 0.75rem;
	background: #fff5fa;
	border-left: 3px solid #ff0047;
	border-radius: 4px;
	font-size: 0.8rem;
	line-height: 1.45;
	color: #6b7280;
}

.oz-single-layout .summary.entry-summary .oz-single-quote-note strong {
	color: #ff0047;
}

/* ══════════════════════════════════════════════════════════════════════
   ZONA DE COMPRA — DOM deliberado, construido desde PHP (ver functions.php,
   sección "Zona de compra"):

     .oz-single-purchase-area
       .oz-single-delivery              (solo si el plugin de entrega generó
                                          algo — capturado por output
                                          buffering desde el hook real del
                                          plugin, NUNCA generado a mano)
         .pi-edd.pi-edd-product
       .oz-single-purchase-actions
         form.cart                      (REAL, sin display:contents — sigue
                                          siendo una caja flex propia con
                                          .quantity + botón, heredando SIN
                                          trucos las reglas flex:0 0 auto /
                                          flex:1 1 auto que el padre ya
                                          define para form.cart .quantity /
                                          form.cart .single_add_to_cart_button)
           p.stock                      (si WooCommerce lo imprimió — con
                                          stock normalmente no se ve, sin
                                          stock ES el único contenido del form
                                          ... salvo que sin stock el <form>
                                          NUNCA se genera: p.stock queda
                                          FUERA, como hijo directo de
                                          .oz-single-purchase-actions)
           .quantity
           button.single_add_to_cart_button
         a.oz-single-consult-btn
         details.oz-single-share

   .oz-single-purchase-actions es un flex-row real: form.cart (como caja
   completa) + Consulte + Compartir son 3 ítems flex, alineados en la misma
   línea con align-items:center — ya no depende de wrap accidental ni de
   display:contents en el form. */
.oz-single-layout .summary.entry-summary .oz-single-purchase-area {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.oz-single-layout .summary.entry-summary .oz-single-delivery {
	width: 100%;
}

.oz-single-layout .summary.entry-summary .oz-single-delivery .pi-edd.pi-edd-product {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
	margin: 0 !important;
	padding: 0.55rem 0.9rem !important;
	background: #374151 !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 8px !important;
	font-size: 0.8rem !important;
	line-height: 1.35;
	text-align: center !important;
	white-space: normal;
	box-sizing: border-box;
}

.oz-single-layout .summary.entry-summary .oz-single-delivery .pi-edd.pi-edd-product span {
	font-weight: 700;
	color: #ffffff;
}

/* Composición DELIBERADA de la fila de acciones (ya no se intenta caber los
   4 controles en una sola línea): form.cart (stepper+Presupuestar) en su
   propia fila completa arriba; Consulte+Compartir juntos en la fila de
   abajo, alineados a la izquierda, sin estirarse. justify-content:flex-start
   (valor inicial, explícito por claridad) evita que Consulte/Compartir se
   repartan por todo el ancho al quedar solos en su fila. */
.oz-single-layout .summary.entry-summary .oz-single-purchase-actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
}

/* form.cart real: fila propia COMPLETA (flex-basis:100% fuerza el salto de
   línea de todo lo que venga después — Consulte/Compartir caen siempre a la
   fila de abajo, sin depender de que el ancho se quede corto). Dentro del
   form, stepper+Presupuestar siguen alineados horizontalmente entre sí
   (display:flex propio, ya existía).
   El order:0 !important se MANTIENE: sigue siendo necesario neutralizar
   `.oz-single-product .entry-summary form.cart { order:1 }` del padre
   (single-product.css:325-326), que si no se overridea coloca el form
   DESPUÉS de Consulte/Compartir (order:0 implícito) pese a ir primero en
   el DOM — ver detalle en el comentario original más abajo si hace falta
   reconstruir el razonamiento. */
.oz-single-layout .summary.entry-summary .oz-single-purchase-actions form.cart {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	order: 0 !important;
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	gap: 0.5rem;
	margin: 0 !important;
}

.oz-single-layout .summary.entry-summary .oz-single-purchase-actions .oz-single-consult-btn,
.oz-single-layout .summary.entry-summary .oz-single-purchase-actions .oz-single-share {
	order: 1 !important;
	flex: 0 0 auto;
}

/* Stepper de cantidad — CAUSA REAL del ancho excesivo (rastreada en el CSS
   fuente del padre, single-product.css:459-461):
     .oz-qty-stepper__input { flex: 1 1 auto; width: 100%; }
   El <input> real tiene flex-grow:1 dentro de .oz-qty-stepper (que también
   es flex, línea 422-435) — y CRÍTICAMENTE, .oz-qty-stepper no tiene NINGÚN
   width/max-width propio (max-width:none explícito, línea 426). En flexbox,
   cuando un contenedor sin ancho fijo (.quantity, flex:0 0 auto) alberga un
   hijo (.oz-qty-stepper) que a su vez contiene un elemento con flex-grow:1
   (el input), ese input reclama TODO el espacio libre que el layout externo
   le deje disponible — y como form.cart heredaba width:100% del padre
   (single-product.css:317, `.oz-single-product form.cart:not(...) { width:
   100% }`, aplicado directo a nuestro form real sin necesitar prefijo del
   plugin ausente) antes de mi propio override, el <input> se expandía para
   llenar ese ancho completo. Mi override anterior (form.cart{width:auto})
   ya corta el ancho del FORM, pero no acota el ancho del STEPPER en sí, que
   sigue sin límite propio.
   CORRECCIÓN: dar a .oz-qty-stepper (y a .quantity, su contenedor) un ANCHO
   MÁXIMO explícito y a __input un flex-basis compacto — calculado a partir
   de las piezas reales ya definidas por el padre (2 botones de 46px c/u +
   input compacto ~54px = 146px), en vez de dejar que el flex-grow del input
   reclame espacio libre indefinido. */
.oz-single-layout .summary.entry-summary .oz-single-purchase-actions .quantity {
	flex: 0 0 auto !important;
	width: 146px;
	max-width: 146px;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
}

.oz-single-layout .summary.entry-summary .oz-single-purchase-actions .oz-qty-stepper {
	width: 146px;
	max-width: 146px;
	border-radius: 0;
}

.oz-single-layout .summary.entry-summary .oz-single-purchase-actions .oz-qty-stepper__input {
	flex: 0 0 54px !important;
	width: 54px !important;
}

/* "Presupuestar": padding lateral reducido (1.35rem del padre → 1rem) solo
   dentro de la fila de acciones, para ayudar a que quepan los 4 controles
   juntos en los ~492px reales del summary. No se toca min-height (44px,
   misma altura que Consulte/Compartir) ni el texto del botón. */
.oz-single-layout .summary.entry-summary .oz-single-purchase-actions .single_add_to_cart_button {
	padding: 0 1rem;
}

/* p.stock cuando SÍ hay form (con stock, normalmente vacío/oculto por regla
   de abajo) queda dentro del form; cuando NO hay form (sin stock), WooCommerce
   lo imprime como hijo directo de .oz-single-purchase-actions — mismo
   selector cubre ambos casos por posición real. */
.oz-single-layout .summary.entry-summary .oz-single-purchase-actions > p.stock,
.oz-single-layout .summary.entry-summary .oz-single-purchase-actions form.cart > p.stock {
	margin: 0 !important;
	flex: 0 0 auto;
}

/* Garantía: etiqueta compacta, borde suave, check verde. */
.oz-single-layout .summary.entry-summary .oz-single-warranty {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: fit-content;
	margin: 0;
	padding: 0.35rem 0.75rem;
	border: 1px solid #d1fae5;
	background: #f0fdf4;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	color: #166534;
}

.oz-single-layout .summary.entry-summary .oz-single-warranty__check {
	color: #16a34a;
	font-weight: 700;
}

/* Botones "Consulte" y "Compartir": misma altura que "Presupuestar"
   (single_add_to_cart_button, min-height:44px en single-product.css:399),
   oscuro/gris para diferenciarlos del CTA principal (fucsia/azul). Padding
   lateral reducido (1.1rem→0.85rem) para ayudar a que los 4 controles de
   la fila de acciones quepan juntos en los ~492px reales del summary, sin
   tocar min-height (altura sigue igual a Presupuestar) ni el texto. */
.oz-single-layout .summary.entry-summary .oz-single-consult-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 0.85rem;
	border-radius: 8px;
	border: 1px solid #374151;
	background: #374151;
	color: #ffffff;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.oz-single-layout .summary.entry-summary .oz-single-consult-btn:hover {
	background: #1f2937;
	border-color: #1f2937;
	color: #ffffff;
}

.oz-single-layout .summary.entry-summary .oz-single-share {
	position: relative;
	display: inline-block;
}

.oz-single-layout .summary.entry-summary .oz-single-share__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 0.85rem;
	border-radius: 8px;
	border: 1px solid #d1d5db;
	background: #ffffff;
	color: #374151;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}

.oz-single-layout .summary.entry-summary .oz-single-share__toggle::-webkit-details-marker {
	display: none;
}

.oz-single-layout .summary.entry-summary .oz-single-share__toggle:hover {
	border-color: #9ca3af;
}

.oz-single-layout .summary.entry-summary .oz-single-share__list {
	position: absolute;
	z-index: 20;
	bottom: calc(100% + 6px);
	left: 0;
	min-width: 160px;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.oz-single-layout .summary.entry-summary .oz-single-share__list a {
	display: block;
	padding: 0.45rem 0.6rem;
	border-radius: 6px;
	font-size: 0.85rem;
	color: #374151;
	text-decoration: none;
}

.oz-single-layout .summary.entry-summary .oz-single-share__list a:hover {
	background: #f3f4f6;
	color: #ff0047;
}

/* Precio: jerarquía visual COMPACTA — ambos precios juntos en línea, el
   actual destacado pero sin quedar aislado/gigante. El padre solo define
   color/tamaño del contenedor .price (single-product.css:240-243); del/ins
   no tenían CSS propio. */
.oz-single-layout .summary.entry-summary > .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 1.05rem;
}

.oz-single-layout .summary.entry-summary > .price del {
	order: 1;
	font-size: 0.8em;
	font-weight: 400;
	color: #9ca3af;
	text-decoration: line-through;
}

.oz-single-layout .summary.entry-summary > .price ins {
	order: 0;
	text-decoration: none;
	font-size: 1.05em;
	font-weight: 700;
	color: #111827;
}

/* Sin oferta (precio único, sin del/ins): mismo tratamiento que el precio
   actual con oferta, para consistencia visual. */
.oz-single-layout .summary.entry-summary > .price:not(:has(del)) {
	color: #111827;
	font-weight: 700;
}

/* Descuento: bloque compacto, justo debajo del precio. Calculado en vivo por
   PHP (functions.php, prioridad 11 de woocommerce_single_product_summary) —
   nunca hardcodeado. No se imprime si no hay rebaja real. */
.oz-single-layout .summary.entry-summary .oz-single-discount {
	margin: -0.35rem 0 0;
	font-size: 0.85rem;
	color: #6b7280;
}

.oz-single-layout .summary.entry-summary .oz-single-discount__value {
	font-weight: 700;
	color: #ff0047;
}

/* Descripción corta: más compacta (la columna angosta hacía que el
   line-height:1.7 del padre se sintiera muy suelto). Fuente casi igual
   (0.98rem → 0.9rem), no reducida agresivamente. */
.oz-single-layout .summary.entry-summary .woocommerce-product-details__short-description {
	font-size: 0.9rem;
	line-height: 1.5;
}

.oz-single-layout .summary.entry-summary .woocommerce-product-details__short-description p {
	margin: 0 0 0.5rem;
}

/* Estado de stock (.stock.in-stock / .stock.out-of-stock, clases nativas de
   WooCommerce): badge pequeño y compacto, sin texto propio. */
.oz-single-layout .summary.entry-summary p.stock {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: fit-content;
	margin: 0;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
}

.oz-single-layout .summary.entry-summary p.stock.in-stock {
	background: #ecfdf3;
	color: #15803d;
}

.oz-single-layout .summary.entry-summary p.stock.out-of-stock {
	background: #fef2f2;
	color: #b91c1c;
}

/* Categoría / Etiqueta: cada una en su propia fila con separador, como pide
   la referencia (antes iban pegadas en una sola línea: product_meta solo
   tenía tipografía genérica, sin display:block por span). Markup real
   (WooCommerce core, single-product/meta.php): .product_meta > span.posted_in
   + span.tagged_as, hermanos directos. */
.oz-single-layout .summary.entry-summary .product_meta {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex-basis: 100%;
}

/* La etiqueta ("Categoría:"/"Etiqueta:") es texto plano directo dentro del
   span (WooCommerce lo concatena así, sin markup propio); el valor real está
   en el <a> hijo. font-weight fuerte en el span cubre la etiqueta; se
   sobreescribe a normal específicamente en el <a> para el valor. Padding y
   line-height reducidos: algunos productos tienen varias etiquetas y el
   texto envuelve en más de una línea, antes ocupaba demasiada altura. */
.oz-single-layout .summary.entry-summary .product_meta > span {
	display: block;
	padding: 0.35rem 0;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	color: #1f2937;
}

.oz-single-layout .summary.entry-summary .product_meta > span:last-child {
	border-bottom: 0;
}

.oz-single-layout .summary.entry-summary .product_meta > span a {
	color: #374151;
	font-weight: 400;
	text-decoration: none;
}

.oz-single-layout .summary.entry-summary .product_meta > span a:hover {
	color: #ff0047;
}

/* ══════════════════════════════════════════════════════════════════════
   DISTRIBUIDORES — dentro del summary, debajo de las acciones. 15 logos
   reales (recuperados del slider legacy SmartSlider3, ver functions.php),
   carrusel propio JS vanilla, ~3 visibles en desktop, flechas fucsias,
   fondo blanco, borde gris suave, altura compacta.
   ══════════════════════════════════════════════════════════════════════ */
.oz-single-layout .summary.entry-summary .oz-single-distributors {
	margin-top: 0.75rem;
	padding: 12px 14px;
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
}

.oz-single-layout .summary.entry-summary .oz-single-distributors__title {
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: #4b5563;
	text-align: center;
}

.oz-single-layout .summary.entry-summary .oz-single-distributors__slider {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.oz-single-layout .summary.entry-summary .oz-single-distributors__nav {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #ff0047;
	color: #ffffff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.oz-single-layout .summary.entry-summary .oz-single-distributors__nav:hover {
	background: #d6003c;
}

.oz-single-layout .summary.entry-summary .oz-single-distributors__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.oz-single-layout .summary.entry-summary .oz-single-distributors__track {
	display: flex;
	align-items: center;
	transition: transform 0.35s ease;
}

.oz-single-layout .summary.entry-summary .oz-single-distributors__item {
	flex: 0 0 var(--dist-w, 100px);
	width: var(--dist-w, 100px);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
}

.oz-single-layout .summary.entry-summary .oz-single-distributors__item img {
	display: block;
	max-width: 100%;
	max-height: 52px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.7;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.oz-single-layout .summary.entry-summary .oz-single-distributors__item:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

@media (max-width: 480px) {
	.oz-single-layout .summary.entry-summary .oz-single-distributors__item {
		height: 60px;
	}

	.oz-single-layout .summary.entry-summary .oz-single-distributors__item img {
		max-height: 52px;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   TABS — hasta 6 pestañas reales (Descripción, Información adicional +
   hasta 4 legacy recuperadas: Ficha Técnica, Manual de Instrucciones,
   Especificación Técnica, Puntada — solo las que el producto realmente
   tenga). Franja carbón #252b35 continua, tab activo fucsia Singer
   #ff0047, texto blanco, sin radios ni sombras. Ancho completo del
   contenido principal (grid-column:1/-1 ya lo pone el padre en
   .oz-single-product div.product).
   ══════════════════════════════════════════════════════════════════════ */
.oz-single-layout .woocommerce-tabs {
	margin-top: 1.5rem;
}

/* Barra de tabs integrada: ul.tabs es la franja horizontal completa
   (width:100%, fondo carbón más oscuro #1c2129 que el de cada tab
   individual #252b35), y cada <li> tiene ancho natural (contenido +
   padding, flex:0 0 auto) flotando dentro de esa franja. En desktop los
   tabs intentan mantenerse en una sola línea (nowrap); si el total de los
   6 tabs excede el ancho disponible (pantallas más angostas), la propia
   barra scrollea horizontalmente en vez de partir en 2 filas. gap:2px +
   fondo del <ul> más oscuro que el de los <li>: cada tab se percibe como
   una caja separada de la siguiente (la franja oscura del <ul> se asoma
   entre ellos), no como una franja continua sin cortes. */
/* Valores tomados del tema legacy ozado real (woo-custom.css líneas
   1204-1260, recuperado de un snapshot de Wayback Machine de
   singer.pe/producto/maquina-de-coser-m3305-singer/ del 2025-01-15,
   producción actualmente en mantenimiento/503): ul.tabs sin padding ni
   gap (background carbón continuo), li a con padding real
   "10px 1rem" ≈ 10px 16px, font-size 14px, font-weight 400. */
.oz-single-layout .woocommerce-tabs ul.tabs {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: #252b35 !important;
	border: 0 !important;
	border-radius: 0 !important;
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	position: static !important;
	box-sizing: border-box !important;
}

/* El CORE de WooCommerce (plugins/woocommerce/assets/css/woocommerce.css)
   dibuja "puntas de pestaña" decorativas con ul.tabs li::before/::after
   (position:absolute, 5×5px, border+box-shadow — efecto carpeta clásico) Y
   además pone margin:0 -5px en ul.tabs li (los <li> se solapan a propósito
   para que las puntas encajen). La ronda anterior solo neutralizó los
   pseudo-elementos del <ul>, NUNCA los de <li> — seguían activos, generando
   pequeños cuadrados con position:absolute sobre/junto al texto de cada tab
   y contribuyendo a que el segundo tab se percibiera roto/fusionado. */
.oz-single-layout .woocommerce-tabs ul.tabs::before,
.oz-single-layout .woocommerce-tabs ul.tabs::after {
	content: none !important;
	display: none !important;
}

.oz-single-layout .woocommerce-tabs ul.tabs li {
	flex: 0 0 auto !important;
	position: static !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #252b35 !important;
	overflow: visible !important;
}

.oz-single-layout .woocommerce-tabs ul.tabs li::before,
.oz-single-layout .woocommerce-tabs ul.tabs li::after {
	content: none !important;
	display: none !important;
}

/* <a> ancho según contenido+padding (no estirado), altura compacta 35px con
   el texto centrado en ambos ejes (display:flex + align/justify:center) en
   vez de depender solo de line-height. Con 6 tabs reales (2 nativos +
   hasta 4 legacy) el padding/tamaño se reduce respecto a la versión de 2
   tabs para que los 6 quepan en una sola línea en desktop (~1440px);
   white-space:nowrap evita que el texto de cada tab envuelva y rompa la
   altura fija de la franja. */
.oz-single-layout .woocommerce-tabs ul.tabs li a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: auto !important;
	padding: 10px 16px !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: #ffffff !important;
	text-decoration: none !important;
	border: 0 !important;
	margin: 0 !important;
	white-space: nowrap !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.oz-single-layout .woocommerce-tabs ul.tabs li.active {
	background: #ff0047 !important;
}

.oz-single-layout .woocommerce-tabs ul.tabs li.active a,
.oz-single-layout .woocommerce-tabs ul.tabs li a:hover,
.oz-single-layout .woocommerce-tabs ul.tabs li a:focus-visible {
	background: #ff0047;
	color: #ffffff !important;
}

/* CAUSA CONFIRMADA (getComputedStyle real en Chrome, no asumida): el color
   final del <a> inactivo era rgb(38,38,38) (#262626) pese a la regla de
   arriba — es decir, alguna otra regla (no localizada por texto exacto en
   los archivos estáticos; probablemente CSS generado dinámicamente por el
   Customizer del padre a partir de una variable de color de marca) ganaba
   sobre color:#ffffff sin !important. Refuerzo con !important + selectores
   redundantes de máxima especificidad práctica para blindar el resultado
   computado final en ambos estados (activo/inactivo), sin tocar ancho,
   markup, pseudo-elementos ni JS de tabs. */
.oz-single-layout .woocommerce-tabs ul.tabs li > a {
	color: #ffffff !important;
}

.oz-single-layout .woocommerce-tabs ul.tabs li.active > a {
	color: #ffffff !important;
}

.oz-single-layout .woocommerce-tabs {
	height: auto !important;
	min-height: 0 !important;
}

.oz-single-layout .woocommerce-tabs .woocommerce-Tabs-panel {
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 2rem;
	background: #f8f8f8;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #4b5563;
	font-size: 0.9rem;
	line-height: 1.55;
}

.oz-single-layout .woocommerce-tabs .woocommerce-Tabs-panel > h2 {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
}

/* ── Contenido del tab Descripción — un único bloque de reglas, sin
   overrides duplicados. Fiel al markup real de cada producto:
     p (texto plano, sin <strong> único hijo) → párrafo introductorio
     p > strong (único hijo)                   → subtítulo fucsia 13px
     h2/h3/h4 (si el producto los usa)          → encabezado real
     ul/ol > li                                 → lista compacta, disc nativo
   Todo en flujo de bloque normal, una sola columna, fondo gris claro,
   sin card blanca, sin separadores ni checks artificiales. */
.oz-single-layout .woocommerce-Tabs-panel--description.woocommerce-Tabs-panel.panel.entry-content.wc-tab,
.oz-single-layout .woocommerce-Tabs-panel--description {
	display: block !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 2rem !important;
	background: #f8f8f8 !important;
}

.oz-single-layout .woocommerce-Tabs-panel--description > p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: #333 !important;
}

.oz-single-layout .woocommerce-Tabs-panel--description > p.oz-single-desc-subtitle {
	display: block !important;
	margin-top: 16px !important;
	margin-bottom: 6px !important;
}

.oz-single-layout .woocommerce-Tabs-panel--description > p.oz-single-desc-subtitle strong {
	color: #ff0047 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
}

.oz-single-layout .woocommerce-Tabs-panel--description > h2,
.oz-single-layout .woocommerce-Tabs-panel--description > h3,
.oz-single-layout .woocommerce-Tabs-panel--description > h4 {
	margin: 10px 0 4px !important;
	font-size: 1.4rem;
	font-weight: 700;
	color: #111827;
}

.oz-single-layout .woocommerce-Tabs-panel--description > p.oz-single-desc-empty {
	display: none !important;
}

.oz-single-layout .woocommerce-Tabs-panel--description ul,
.oz-single-layout .woocommerce-Tabs-panel--description ol {
	display: block !important;
	grid-template-columns: none !important;
	columns: auto !important;
	column-count: auto !important;
	column-width: auto !important;
	list-style: disc outside !important;
	margin: 0 !important;
	padding-left: 18px !important;
}

.oz-single-layout .woocommerce-Tabs-panel--description ol {
	list-style: decimal outside !important;
}

.oz-single-layout .woocommerce-Tabs-panel--description > ul > li,
.oz-single-layout .woocommerce-Tabs-panel--description > ol > li {
	display: list-item !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #333 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* Nada de checks/iconos artificiales */
.oz-single-layout .woocommerce-Tabs-panel--description li::before,
.oz-single-layout .woocommerce-Tabs-panel--description li::after {
	content: none !important;
	display: none !important;
}

/* Quitar separadores heredados */
.oz-single-layout .woocommerce-Tabs-panel--description > * {
	border-top: 0 !important;
	border-bottom: 0 !important;
}

/* El último <ul>/<ol> (p. ej. la lista de Beneficios) no debe sumar su
   propio margin-bottom al padding-bottom del panel — los <p>&nbsp;</p>
   finales ya están en display:none (no ocupan espacio), así que el
   espacio grande tras el último <li> queda en ese padding único, igual
   que en la referencia real, sin acumular otro margen debajo. */
.oz-single-layout .woocommerce-Tabs-panel--description > ul:last-of-type,
.oz-single-layout .woocommerce-Tabs-panel--description > ol:last-of-type {
	margin-bottom: 0 !important;
}

/* ── Tab Información adicional: tabla de atributos, ancho completo, filas
   limpias con separadores grises suaves. Se conserva la lógica nativa de
   WooCommerce (tab click sigue siendo el JS core de jQuery UI Tabs, aquí
   solo se estiliza el contenido si el producto tiene atributos). */
.oz-single-layout .woocommerce-Tabs-panel--additional_information table.woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.oz-single-layout .woocommerce-Tabs-panel--additional_information table.woocommerce-product-attributes tr {
	border-bottom: 1px solid #e5e7eb;
}

.oz-single-layout .woocommerce-Tabs-panel--additional_information table.woocommerce-product-attributes tr:last-child {
	border-bottom: 0;
}

.oz-single-layout .woocommerce-Tabs-panel--additional_information table.woocommerce-product-attributes th {
	width: 35%;
	padding: 0.6rem 0.75rem 0.6rem 0;
	text-align: left;
	font-weight: 600;
	color: #1f2937;
	vertical-align: top;
}

.oz-single-layout .woocommerce-Tabs-panel--additional_information table.woocommerce-product-attributes td {
	padding: 0.6rem 0;
	color: #4b5563;
	vertical-align: top;
}

.oz-single-layout .woocommerce-Tabs-panel--additional_information table.woocommerce-product-attributes td p {
	margin: 0;
}

/* ── Tabs legacy recuperados (Ficha Técnica, Manual de Instrucciones,
   Especificación Técnica, Puntada) — el HTML guardado en
   yikes_woo_products_tabs NO se modifica ni reconstruye; solo se contiene
   visualmente para que imágenes/PDFs/tablas no desborden el panel del
   summary. Los enlaces a PDF siguen siendo clicables (no se toca href). */
.oz-single-layout .oz-single-legacy-tab {
	font-size: 0.875rem;
	line-height: 1.45;
	color: #4b5563;
	max-width: 100%;
	overflow-x: auto;
}

.oz-single-layout .oz-single-legacy-tab .yikes-custom-woo-tab-title {
	margin: 0 0 10px;
	font-size: 1rem;
	font-weight: 700;
	color: #111827;
}

.oz-single-layout .oz-single-legacy-tab img {
	max-width: 100%;
	height: auto;
}

.oz-single-layout .oz-single-legacy-tab table {
	max-width: 100%;
	border-collapse: collapse;
}

.oz-single-layout .oz-single-legacy-tab table td,
.oz-single-layout .oz-single-legacy-tab table th {
	padding: 0.4rem 0.6rem;
	border: 1px solid #e5e7eb;
	font-size: 0.85rem;
}

.oz-single-layout .oz-single-legacy-tab a {
	color: #ff0047;
	word-break: break-word;
}

.oz-single-layout .oz-single-legacy-tab p {
	margin: 0 0 0.5rem;
}

.oz-single-layout .oz-single-legacy-tab p:last-child {
	margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   PRODUCTOS RELACIONADOS — barra de título gris clara, igual densidad que
   tabs. NO toca las cards (.oz-loop-product--singer, ya estilizadas).
   ══════════════════════════════════════════════════════════════════════ */
.oz-single-layout .related.products {
	margin-top: 1.5rem;
}

.oz-single-layout .related.products > h2 {
	margin: 0 0 1rem;
	padding: 0.75rem 1.25rem;
	background: #f3f4f6;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 700;
	color: #1f2937;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — breakpoints del OZ-Maquetador (no Bootstrap), desktop-first:
   laptop≤1366 · tablet_h≤1024 · tablet_v≤768 · mobile≤480. En laptop/
   tablet_h se mantiene la estructura mientras haya espacio (el summary ya
   se apila con la galería en column desde 991px, definido arriba). Los
   ajustes de esta sección son solo para la ZONA DE COMPRA (galería+summary
   ya pasan a 1 columna en max-width:991px), donde SÍ puede faltar ancho
   para 4 controles en línea aunque el summary tenga toda la columna. */
@media (max-width: 768px) {
	/* Tablet vertical: las acciones pueden reorganizarse (wrap) pero nunca
	   solaparse ni desaparecer — cada control conserva su tamaño mínimo. */
	.oz-single-layout .summary.entry-summary .oz-single-purchase-actions form.cart {
		flex-basis: 100%;
	}
}

@media (max-width: 480px) {
	/* Móvil: entrega arriba (ya 100% en cualquier ancho) → cantidad+botón
	   (el form ya es flex-row propio: se fuerza a columna aquí para que
	   "Presupuestar" tenga ancho completo, más fácil de tocar) → Consulte +
	   Compartir agrupados debajo. No es una fila diminuta forzada: cada
	   grupo usa el ancho que necesita. */
	.oz-single-layout .summary.entry-summary .oz-single-purchase-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.oz-single-layout .summary.entry-summary .oz-single-purchase-actions form.cart {
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.oz-single-layout .summary.entry-summary .oz-single-purchase-actions form.cart .single_add_to_cart_button {
		flex: 1 1 auto;
	}

	.oz-single-layout .summary.entry-summary .oz-single-consult-btn,
	.oz-single-layout .summary.entry-summary .oz-single-share {
		flex: 1 1 0;
	}

	.oz-single-layout .summary.entry-summary .oz-single-share {
		display: block;
	}

	.oz-single-layout .summary.entry-summary .oz-single-share__toggle {
		width: 100%;
	}

	/* Tabs en móvil (≤480px): con 6 tabs reales y textos largos ("Manual de
	   Instrucciones"), una sola línea con scroll horizontal dejaba el
	   último tab ("Puntada") cortado sin indicio claro de que había más
	   contenido a la derecha. Se permite envolver en 2+ filas (flex-wrap)
	   para que los 6 sean visibles de inmediato, sin gestos extra. */
	.oz-single-layout .woocommerce-tabs ul.tabs {
		flex-wrap: wrap !important;
		overflow-x: visible !important;
	}

	.oz-single-layout .woocommerce-tabs ul.tabs li a {
		padding: 8px 12px !important;
		font-size: 12px !important;
		height: auto !important;
	}

	.oz-single-layout .woocommerce-tabs .woocommerce-Tabs-panel--description.woocommerce-Tabs-panel.panel.entry-content.wc-tab,
	.oz-single-layout .woocommerce-Tabs-panel--description {
		padding: 1.25rem !important;
	}

	.oz-single-layout .woocommerce-tabs .woocommerce-Tabs-panel {
		padding: 1.25rem;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Tabs (barra + panel Descripción) en los 3 breakpoints del
   OZ-Maquetador (--oz-container-laptop:1366px, --oz-container-tablet:1024px,
   --oz-container-mobile:480px, definidos en OZ-Maquetador-Pro-V2/assets/
   global/global.css), más un punto intermedio en 767px para separar
   tablet horizontal ("echada", 768-1024px) de tablet vertical ("parada",
   481-767px), ya que ambas comparten el mismo ancho de contenedor del
   maquetador pero necesitan distinto tamaño de tab. El bloque
   @media(max-width:480px) de arriba sigue siendo el de "móvil".
   ══════════════════════════════════════════════════════════════════════ */

/* Tablet parada (481-767px): un peldaño más grande que móvil. */
@media (min-width: 481px) and (max-width: 767px) {
	/* Igual que en móvil: con 6 tabs reales, una sola línea con scroll
	   dejaba el último tab cortado. Se envuelve en 2+ filas. */
	.oz-single-layout .woocommerce-tabs ul.tabs {
		flex-wrap: wrap !important;
		overflow-x: visible !important;
	}

	.oz-single-layout .woocommerce-tabs ul.tabs li a {
		padding: 9px 13px !important;
		font-size: 12.5px !important;
		height: auto !important;
	}

	.oz-single-layout .woocommerce-tabs .woocommerce-Tabs-panel--description.woocommerce-Tabs-panel.panel.entry-content.wc-tab,
	.oz-single-layout .woocommerce-Tabs-panel--description {
		padding: 1.5rem !important;
	}

	.oz-single-layout .woocommerce-tabs .woocommerce-Tabs-panel {
		padding: 1.5rem;
	}
}

/* Tablet echada (768-1024px): un peldaño más grande que tablet parada. */
@media (min-width: 768px) and (max-width: 1024px) {
	.oz-single-layout .woocommerce-tabs ul.tabs li a {
		padding: 10px 14px !important;
		font-size: 13px !important;
		height: auto !important;
	}

	.oz-single-layout .woocommerce-tabs .woocommerce-Tabs-panel--description.woocommerce-Tabs-panel.panel.entry-content.wc-tab,
	.oz-single-layout .woocommerce-Tabs-panel--description {
		padding: 1.75rem !important;
	}

	.oz-single-layout .woocommerce-tabs .woocommerce-Tabs-panel {
		padding: 1.75rem;
	}
}

/* Laptop (1025-1366px): un peldaño por debajo de desktop completo
   (que ya usa 10px 16px / padding:2rem en la regla base). */
@media (min-width: 1025px) and (max-width: 1366px) {
	.oz-single-layout .woocommerce-tabs ul.tabs li a {
		padding: 10px 15px !important;
		font-size: 13.5px !important;
		height: auto !important;
	}
}