/**
 * Single Product — OVERRIDE de rediseño 2026 (estilo ROCKBROS USA)
 * ============================================================================
 * PREVIEW gated: se enqueua SOLO con ?rediseno=1 (ver functions.php). NO afecta
 * las fichas normales — es un sandbox para iterar el rediseño sobre productos
 * reales sin pisar single-product.css (que conserva el trabajo de CLS).
 *
 * Se carga DESPUÉS de single-product.css → gana en igualdad de especificidad.
 *
 * Dirección (réplica fiel USA): monocromo · Barlow · más aire · esquinas rectas
 * SALVO botones y cantidad (pill, como USA) · CTA "Agregar" en amarillo de marca.
 * Estrategia: redeclarar las custom props locales del template (precios→negro)
 * para que las reglas existentes se actualicen solas, + override de tipografía a
 * Barlow donde el CSS base la hardcodea (Poppins/Archivo/etc.).
 * ============================================================================ */

/* ---- 1. Redeclarar tokens locales → recto + monocromo --------------------
   Estas 3 props ya las consume single-product.css; al cambiarlas acá, todos los
   botones, inputs y precios se vuelven rectos/negros sin tocar cada regla. */
.single-product div.product {
	--rb-green-price:  var(--rb-black);  /* precios negros (monocromo)              */
	--rb-radius:       60px;             /* botones REDONDEADOS (pill) — único curvo */
	--rb-input-radius: 0;                /* selects rectos (la cantidad va aparte)   */
}

/* ---- 2. Tipografía → Barlow (el base hardcodea Poppins/Archivo/Ubuntu/etc.)- */
.single-product div.product .product_title {
	font-family: "Barlow", sans-serif;
	font-weight: 700;
	text-transform: none;               /* respeta el nombre real (no "Mtb")  */
	color: var(--rb-black);
}
.single-product div.product p.price,
.single-product div.product span.price,
.single-product div.product .woocommerce-product-details__short-description,
.single-product div.product form.cart .single_add_to_cart_button,
.single-product div.product form.cart .wc-buy-now-btn,
.single-product div.product .variations_form .variations td.label,
.single-product div.product .variations_form .variations td.value select {
	font-family: "Barlow", sans-serif;
}

/* ---- 3. Precio de oferta en rojo (único color de UI), regular en negro ---- */
.single-product div.product p.price ins,
.single-product div.product span.price ins {
	color: var(--rb-sale);
}

/* ---- 4. FAQ → Barlow + saca el acento verde del hover -------------------- */
.rockbros-product-faq__title,
.rockbros-product-faq summary {
	font-family: "Barlow", sans-serif;
}
.rockbros-product-faq__body {
	font-family: "Barlow", sans-serif;  /* base usa Merriweather serif        */
	font-weight: 400;
}
.rockbros-product-faq summary:hover {
	color: var(--rb-black);
}

/* ---- 4b. FAQ estilo USA: ícono a la izq + chevron en círculo a la derecha
   El markup (íconos + chevron) lo inyecta single-product-hooks.php solo en
   preview. Acá reemplazamos el layout del base (que tenía el "+" a la izq). */
/* Sin título "¿Tienes preguntas?" en el preview (los ítems ya no son preguntas) */
.single-product .rockbros-product-faq__title {
	display: none;
}
/* el bloque sube: menos hueco entre el strip de pagos y la 1ª pregunta */
.single-product .rockbros-product-faq {
	margin-top: 2px;
}
.single-product .rockbros-product-faq summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 0;            /* fila ~20% más baja (de 14px); resetea la sangría del "+" base */
	font-size: 16px;
	font-weight: 700;          /* letra más gruesa (+15%) */
}
/* íconos más gruesos (+15% de stroke) */
.single-product .rockbros-product-faq__icon svg {
	stroke-width: 1.85;
}
/* matar el "+"/"−" del base */
.single-product .rockbros-product-faq summary::after,
.single-product .rockbros-product-faq details[open] > summary::after {
	content: none !important;
}
/* ícono temático (camión, regalo, etc.) */
.single-product .rockbros-product-faq__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--rb-black);
}
.single-product .rockbros-product-faq__q {
	flex: 1 1 auto;
	line-height: 1.3;
}
/* chevron en círculo gris suave a la derecha (rota al abrir) */
.single-product .rockbros-product-faq__chevron {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #f3f3f3;
	color: #555;
	transition: transform .2s, background .2s;
}
.single-product .rockbros-product-faq summary:hover .rockbros-product-faq__chevron {
	background: #ececec;
}
.single-product .rockbros-product-faq details[open] .rockbros-product-faq__chevron {
	transform: rotate(180deg);
	background: #e6e6e6;
}
/* cuerpo alineado bajo el texto (no bajo el ícono) */
.single-product .rockbros-product-faq__body {
	padding: 0 44px 14px 34px;   /* 34 = ancho ícono (20) + gap (14) */
}

/* ---- 5. Reseñas → contenedor recto + rating en Barlow -------------------- */
.rockbros-reviews__carousel { border-radius: 0; }
.rockbros-reviews__rating   { font-family: "Barlow", sans-serif; }
/* (las flechas circulares se mantienen — los círculos son la única curva ok) */

/* ---- 5b. Mini-rating bajo el título (estrellas + "(N reseñas)") ----------
   Reseñas NATIVAS por producto (motor reconectado en single-product-hooks.php,
   solo preview). Astra lo renderiza en el orden 'ratings' del array, entre título
   y precio → no hay que reposicionar, solo estilar. Estrellas MONOCROMAS (negro
   relleno / gris vacío) coherentes con D2 (el amarillo se reserva al CTA). Sin
   reseñas el bloque no existe (WooCommerce no lo pinta) → cero estrellas vacías. */
.single-product div.product .woocommerce-product-rating {
	display: flex !important;   /* gana al display que trae Woo/Astra */
	flex-direction: row;
	align-items: center;
	gap: 10px;
	/* Simetría: el título trae margin-bottom 17px y el precio margin-top 0 → el
	   rating sin margen propio arriba y 17px abajo deja huecos iguales (17/17). */
	margin: 0 0 17px;
	font-family: "Barlow", sans-serif;
	line-height: 1;
}
/* Woo/Astra meten un clearfix ::before/::after (content:" "; display:table). Al
   ser el contenedor flex, esos pseudos se vuelven flex items y empujaban las
   estrellas a la derecha (espacio + gap). Los anulamos → estrellas flush izq. */
.single-product div.product .woocommerce-product-rating::before,
.single-product div.product .woocommerce-product-rating::after {
	display: none !important;
}
/* Orden: estrellas PRIMERO, conteo DESPUÉS. Astra mete `.review-rating{order:2}`
   (wrapper de las estrellas) → quedaban a la derecha. El flex item real es
   `.review-rating`, no `.star-rating`; le ganamos el order. */
.single-product div.product .woocommerce-product-rating .review-rating {
	order: 0 !important;
	margin: 0;
}
.single-product div.product .woocommerce-product-rating .woocommerce-review-link {
	order: 1 !important;       /* conteo DESPUÉS de las estrellas */
}
.single-product div.product .woocommerce-product-rating .star-rating {
	float: none !important;
	font-size: 20px;           /* +20% (era 17px) */
	margin: 0;                  /* flush izquierda (el offset era el pseudo, ya anulado) */
	color: #1a1a1a;            /* estrellas llenas */
}
.single-product div.product .woocommerce-product-rating .star-rating::before {
	color: #d9d9d9;            /* estrellas vacías (track) */
}
.single-product div.product .woocommerce-product-rating .star-rating span::before {
	color: #1a1a1a;            /* relleno según el rating */
}
/* "(N reseñas)" — link sobrio, ancla a la sección de reseñas */
.single-product div.product .woocommerce-product-rating .woocommerce-review-link {
	font-size: 14.5px;          /* un poco más grande (era 13px) */
	font-weight: 400;
	color: #8a8a8a;
	text-decoration: none;
	transition: color .15s;
}
.single-product div.product .woocommerce-product-rating .woocommerce-review-link:hover {
	color: var(--rb-black);
	text-decoration: underline;
}
.single-product div.product .woocommerce-product-rating .woocommerce-review-link .count {
	font-weight: 600;
	color: #5a5a5a;
}

/* ---- 6. Tabs → Barlow, rectos, activo en negro -------------------------- */
.single-product div.product .woocommerce-tabs ul.tabs li,
.single-product div.product .woocommerce-tabs ul.tabs li a,
.single-product div.product .woocommerce-tabs .panel {
	border-radius: 0;
}
.single-product div.product .woocommerce-tabs ul.tabs li a,
.single-product div.product .woocommerce-tabs .panel,
.single-product div.product .woocommerce-tabs .panel h2 {
	font-family: "Barlow", sans-serif;
}
.single-product div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--rb-black);
}
/* Solo queda "Descripción" → ocultamos la barra de pestañas (sobra con 1 sola).
   El panel del base trae border lateral+inferior (border-top:0) → quedaba una caja
   abierta arriba. Quitamos TODAS las líneas y el relleno lateral: descripción limpia,
   alineada con el resto del contenido. */
.single-product div.product .woocommerce-tabs ul.tabs {
	display: none;
}
.single-product div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}
.single-product div.product .woocommerce-tabs .panel {
	margin: 0;
	border: 0;
	padding-left: 0;
	padding-right: 0;
}

/* ---- 6b. Guía de tallas → link bajo la talla + modal (popup) -------------
   La pestaña se reemplazó por un link que abre un <dialog>. El contenido es
   editable en Gutenberg (CPT rb_size_guide); las tablas se estilan abajo. */
.rb-sizeguide-link {
	display: inline-flex;        /* a la izquierda, como el resto de la columna */
	align-items: center;
	gap: 9px;
	margin: 14px 0 18px;         /* más aire arriba/abajo → centrado entre tallas y disponibilidad */
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: "Barlow", sans-serif;
	font-size: 18px;             /* ~30% más grande que los 14px previos */
	font-weight: 600;
	color: #1a1a1a;
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* !important para matar el hover VERDE heredado de los botones globales del sitio */
.rb-sizeguide-link:hover,
.rb-sizeguide-link:focus,
.rb-sizeguide-link:active {
	background: none !important;
	color: #1a1a1a !important;
	box-shadow: none !important;
	text-decoration: underline;
	outline: none;
}
.rb-sizeguide-link svg { flex: 0 0 auto; width: 26px; height: 26px; }

/* Modal (<dialog> nativo) */
.rb-sizeguide-modal {
	border: 0;
	padding: 0;
	background: transparent;
	width: 92%;
	max-width: 680px;
	max-height: 90vh;
	overflow: visible;
}
.rb-sizeguide-modal::backdrop { background: rgba(20, 20, 20, .55); }
.rb-sizeguide-modal__box {
	position: relative;
	background: #fff;
	padding: 40px 32px 32px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
	font-family: "Barlow", sans-serif;
	color: #1a1a1a;
}
/* !important en la geometría: el estilo global de botones del sitio le metía
   min-width/padding/margin → deformaba el círculo y lo empujaba fuera de la caja. */
.rb-sizeguide-modal .rb-sizeguide-modal__close {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none !important;
	font-size: 22px;
	line-height: 1;
	color: #8a8a8a;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.rb-sizeguide-modal__close:hover,
.rb-sizeguide-modal__close:focus,
.rb-sizeguide-modal__close:active {
	background: #efefef !important;
	color: #1a1a1a !important;
	outline: none;
}
.rb-sizeguide-modal__title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 18px;
	padding-right: 28px;          /* no choca con la ✕ */
}

/* Contenido de la guía (imagen o tabla editada en Gutenberg) */
.rb-sizeguide__content img { max-width: 100%; height: auto; display: block; }
.rb-sizeguide__content > *:first-child { margin-top: 0; }
.rb-sizeguide__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin: 0 0 14px;
}
.rb-sizeguide__content th,
.rb-sizeguide__content td {
	border: 1px solid #e0e0e0;
	padding: 8px 10px;
	text-align: center;
}
.rb-sizeguide__content th { background: #1a1a1a; color: #fff; font-weight: 600; }
.rb-sizeguide__content tr:nth-child(even) td { background: #f7f7f6; }
.rb-sizeguide__content p { font-size: 13.5px; line-height: 1.55; color: #6b6b6b; }

/* ---- 7. Productos relacionados → Barlow + precios negros ----------------- */
.single-product .related.products > h2,
.single-product .upsells.products > h2,
.single-product .related.products ul.products li.product .price,
.single-product .upsells.products ul.products li.product .price,
.single-product .related.products ul.products li.product .woocommerce-loop-product__title,
.single-product .upsells.products ul.products li.product .woocommerce-loop-product__title {
	font-family: "Barlow", sans-serif;
}
/* Precio de las tarjetas de relacionados/upsells: oferta (ins) PRIMERO en rojo,
   tachado (del) DESPUÉS. Son loops como el archive pero SIN el scope
   `.rb-redesign-archive` → no heredan su orden; por defecto Woo emite `<del>`
   antes que `<ins>` (tachado-izquierda/oferta-derecha = mal). Se invierte con
   flex + order:-1, igual que en home/archive. */
.single-product .related.products ul.products li.product .price,
.single-product .upsells.products ul.products li.product .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;   /* tarjeta centrada (default Astra) */
	gap: 8px;
}
.single-product .related.products ul.products li.product .price ins,
.single-product .upsells.products ul.products li.product .price ins,
.single-product .related.products ul.products li.product .price ins .woocommerce-Price-amount,
.single-product .upsells.products ul.products li.product .price ins .woocommerce-Price-amount {
	order: -1;
	color: var(--rb-sale);
	text-decoration: none;
}
.single-product .related.products ul.products li.product .price .screen-reader-text,
.single-product .upsells.products ul.products li.product .price .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---- 8. Tipografía más chica + más aire (más minimalista) ----------------
   Punto medio entre lo actual (título 34px) y USA (~22px). clamp() escala en
   mobile sin chocar con las reglas responsive/CLS del base. */
.single-product div.product { gap: 48px; }

/* Título: 34px → ~28px desktop */
.single-product div.product .product_title {
	font-size: clamp(22px, 2.6vw, 28px);
	line-height: 1.25;
	margin-bottom: 17px;          /* espacio título→reseñas (+20% sobre 14) */
}

/* Precio: achicar manteniendo jerarquía (oferta sigue siendo el más grande) */
.single-product div.product p.price,
.single-product div.product span.price > .woocommerce-Price-amount:only-child {
	font-size: clamp(23px, 2.65vw, 26px);  /* +15% */
	margin-bottom: 14px;          /* ritmo vertical más parejo */
}
.single-product div.product p.price ins,
.single-product div.product span.price ins {
	font-size: clamp(22px, 2.4vw, 25px);  /* oferta +15% */
}
.single-product div.product p.price del,
.single-product div.product span.price del {
	font-size: 18px;              /* tachado +15% (era 16px) */
}

/* Más respiración alrededor del bloque de compra */
.single-product div.product form.cart { margin-bottom: 28px; }

/* ---- 8b. Espacio bajo el header — Astra mete 140px (60px de `#primary`
   margin-top 4em + 80px de padding-top de `.ast-woocommerce-container`). Para el
   look USA (producto cerca del header) lo bajamos a ~60px. Gana por especificidad
   (.single-product #primary > #primary). Solo afecta el preview (CSS gateado). */
.single-product #primary { margin-top: 0; }
.single-product .ast-woocommerce-container { padding-top: 60px; }

/* ---- 9. SKU + categorías arriba del título — chico y gris (estilo USA) ----
   El movimiento de posición lo hace single-product-hooks.php (gateado). */
.single-product div.product .product_meta {
	order: -1;                 /* refuerzo: por si el summary fuese flex column */
	font-size: 12px;
	line-height: 1.5;
	color: #8a8a8a;
	letter-spacing: .02em;
	margin: 0 0 10px 0;
	/* Astra pinta border-top + padding-top en .product_meta para separarlo del
	   add-to-cart en su posición original (abajo). Aquí el meta va ARRIBA como
	   eyebrow, así que ese borde queda como una línea gris encima del SKU. Lo
	   anulamos. (Apareció al sincronizar el stage: la nueva versión de Astra
	   añadió ese border-top que la anterior no traía.) */
	border-top: 0;
	padding-top: 0;
}
.single-product div.product .product_meta > span { display: inline; }
/* Separador "·" entre SKU y categorías para que vayan en una sola línea */
.single-product div.product .product_meta .sku_wrapper::after {
	content: "·";
	margin: 0 10px;
	color: #c4c4c4;
}
.single-product div.product .product_meta a { color: inherit; text-decoration: none; }
.single-product div.product .product_meta a:hover { color: var(--rb-black); }

/* En móvil dejamos SOLO el SKU: las categorías (.posted_in) envolvían 2-3 líneas
   y restaban jerarquía al título/precio. Ocultamos categorías + etiquetas y el
   separador "·" que colgaba tras el SKU; el bloque colapsa a una línea y su
   margen inferior se reduce para aprovechar el espacio ganado. */
@media (max-width: 767px) {
	.single-product div.product .product_meta .posted_in,
	.single-product div.product .product_meta .tagged_as { display: none; }
	.single-product div.product .product_meta .sku_wrapper::after { content: none; }
	.single-product div.product .product_meta { margin-bottom: 4px; }
}

/* ---- 10. Precio: oferta PRIMERO, regular tachado DESPUÉS + menos grueso ----
   p.price ya es flex (base), así que reordenamos con order sin tocar el markup. */
.single-product div.product p.price ins,
.single-product div.product span.price ins { order: 0; }
.single-product div.product p.price del,
.single-product div.product span.price del { order: 1; }

.single-product div.product p.price,
.single-product div.product span.price {
	font-weight: 600;          /* precio regular: 700 → 600 */
}
.single-product div.product p.price ins,
.single-product div.product span.price ins {
	font-weight: 500;          /* promo: más delgado aún */
}

/* Badge "Ahorra S/ X" junto al precio (pill rojo, estilo USA "Save $").
   Inyectado por single-product-hooks.php. Va último en la línea de precio. */
.single-product div.product p.price .rb-save-badge,
.single-product div.product span.price .rb-save-badge,
.single-product div.product .single_variation .price .rb-save-badge {
	display: inline-block;
	order: 2;
	align-self: center;
	margin-left: 10px;
	background: var(--rb-sale);
	color: var(--rb-white);
	font-family: "Barlow", sans-serif;
	font-size: 14px;             /* +15% (era 12px) */
	font-weight: 600;
	line-height: 1;
	padding: 5px 13px;          /* +15% acompaña el texto */
	border-radius: 60px;
	white-space: nowrap;
	vertical-align: middle;
}
.single-product div.product .rb-save-badge .woocommerce-Price-amount,
.single-product div.product .rb-save-badge .woocommerce-Price-currencySymbol {
	color: var(--rb-white);    /* el monto dentro del badge en blanco */
	font-weight: 600;
}

/* En móvil, single-product.css reserva `min-height:56px` en p.price (CLS guard).
   Con align-items:baseline los precios se pegan ARRIBA de esa caja y el badge
   con align-self:center caía ~16px por debajo (desalineado). Lo alineamos al
   cross-start, donde viven los precios, para que quede a su misma altura.
   Solo <=767px: en desktop la caja == contenido y `center` ya alinea bien. */
@media (max-width: 767px) {
	.single-product div.product p.price .rb-save-badge,
	.single-product div.product span.price .rb-save-badge {
		align-self: flex-start;
	}
}

/* ---- 9. Descripción corta — ocultada (USA no usa prosa; usa specs en viñetas)
   PASO 1: quitamos el relleno de marketing. PASO 2 (futuro): reemplazar este
   slot por una lista de specs clave por producto (presión, peso, batería…). */
.single-product div.product .woocommerce-product-details__short-description {
	display: none;
}

/* ---- 11. Zona de compra — layout, botones y cantidad ---------------------
   - form.cart en columna: Cantidad arriba, botones abajo (no apretados).
   - Botones al 50/50, mismo alto/ancho, alargados y más finos.
   - Add to cart: borde amarillo 2px + texto negro (legible) → hover relleno.
   - Comprar ahora: negro sólido (contraste).
   - Cantidad: stepper pill [− | n | +], sin flechas nativas, con label gris.
   Pill viene de --rb-radius:60px (sección 1). */

/* Layout en columna con aire */
.single-product div.product form.cart {
	flex-direction: column;
	align-items: flex-start;
	gap: 13px;
}

/* Label "Cantidad" — gris (+25%) */
.single-product div.product form.cart .rb-qty-label {
	font-family: "Barlow", sans-serif;
	font-size: 16px;
	color: #8a8a8a;
	letter-spacing: .01em;
}

/* Cantidad: stepper pill [− | n | +], compacto, en su propia fila.
   !important porque WooCommerce core fuerza `.woocommerce-js .quantity .qty
   { width:3.631em; min-height:35px }` y algún script le mete width inline —
   sin !important el input se queda ancho y el pill se ve enorme. */
.single-product div.product form.cart .quantity {
	display: inline-flex !important;
	width: auto !important;
	align-items: stretch;
	align-self: flex-start;
	margin-top: -8px;            /* acerca el pill a su label */
	border: 1px solid #d8d8d8;
	border-radius: 60px;
	overflow: hidden;
	background: var(--rb-white);
}
.single-product div.product form.cart .quantity input.qty {
	border: 0;
	border-radius: 0;
	width: 34px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	padding: 10px 0 !important;
	text-align: center;
	font-size: 14px;
	line-height: 1;
	background: transparent;
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	-moz-appearance: textfield;
	appearance: textfield;
}
/* Quitar las flechas nativas del input number → número centrado */
.single-product div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.single-product div.product form.cart .quantity .rb-qty-btn {
	border: 0;
	background: transparent;
	width: 29px !important;
	min-width: 0 !important;
	flex: 0 0 auto;
	padding: 0;
	font-size: 17px;
	font-weight: 700;            /* símbolos +/− más gruesos, que resalten */
	line-height: 1;
	color: var(--rb-black);
	cursor: pointer;
	font-family: "Barlow", sans-serif;
	transition: background .15s;
}
.single-product div.product form.cart .quantity .rb-qty-btn:hover { background: #f2f2f2; }

/* Fila de botones: 50/50, mismo tamaño, ancho completo */
.single-product div.product form.cart .rb-btn-row {
	display: flex;
	width: 100%;
	gap: 12px;
}
.single-product div.product form.cart .rb-btn-row .single_add_to_cart_button,
.single-product div.product form.cart .rb-btn-row .wc-buy-now-btn {
	flex: 1 1 0;
	margin: 0;
}

/* Texto + ALTO de botones de compra.
   Woo core trae .woocommerce-js div.product form.cart .button.single_add_to_cart_button
   con padding 10px 20px y mayor especificidad. Igualamos su especificidad (.button)
   y además forzamos con !important para que mande nuestro alto. */
.single-product div.product form.cart .button.single_add_to_cart_button,
.single-product div.product form.cart .button.wc-buy-now-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;                  /* separa ícono y texto */
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: .01em;
	height: auto !important;
	min-height: 0 !important;
	padding: 17px 24px !important;   /* refuerzo: el alto real lo fija el JS inline (un script tardío lo pisaba) */
	transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s;
}

/* Añadir al carrito = PRIMARIO: amarillo de marca SÓLIDO + texto/ícono negro */
.single-product div.product form.cart .single_add_to_cart_button {
	background: var(--rb-yellow);
	border: 2px solid var(--rb-yellow);
	color: var(--rb-black);
}
/* Ícono de carrito — solo en "Añadir" (Comprar ahora comparte la clase, lo excluimos) */
.single-product div.product form.cart .single_add_to_cart_button:not(.wc-buy-now-btn)::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.single-product div.product form.cart .single_add_to_cart_button:hover,
.single-product div.product form.cart .single_add_to_cart_button:focus {
	background: #e6b50d;        /* amarillo un toque más oscuro al hover */
	border-color: #e6b50d;
	color: var(--rb-black);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

/* Comprar ahora: negro sólido → contraste claro (mismo borde 2px = misma altura) */
.single-product div.product form.cart .wc-buy-now-btn {
	background: var(--rb-black);
	border: 2px solid var(--rb-black);
	color: var(--rb-white);
}
.single-product div.product form.cart .wc-buy-now-btn:hover,
.single-product div.product form.cart .wc-buy-now-btn:focus {
	background: #333333;
	border-color: #333333;
	color: var(--rb-white);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/* ---- 12. Stock / disponibilidad — gris suave + delgado (saca el verde) ---- */
.single-product div.product .stock,
.single-product div.product .stock.in-stock,
.single-product div.product p.stock {
	color: #8a8a8a;
	font-weight: 400;
	font-family: "Barlow", sans-serif;
	font-size: 13px;            /* más chico (lo mantenemos, lo achicamos) */
}
/* El bloque real es <p class="ast-stock-detail"> (el <span class="stock"> es inline
   adentro). El margen va AQUÍ, si no el <p> conserva el margen grande de Astra y
   deja un hoyo antes de "Cantidad" en productos simples. Ritmo = 14px como el precio. */
.single-product div.product .ast-stock-detail {
	margin: 0 0 14px 0;
}

/* ---- 13. Trust icons — más sobrios (PRUEBA): gris + más chicos -----------
   La tira "PAGO SEGURO" con logos a color es ruidosa para un diseño minimalista.
   Prueba: la pasamos a gris y la achicamos. Si no convence, se revierte fácil. */
.single-product div.product .rockbros-trust-icons {
	margin-top: 18px;                /* menos aire muerto entre botones y la línea */
	padding-top: 16px;
	padding-bottom: 4px;
	border-top: 1px solid #ececec;   /* línea fina que ancla la zona (estilo USA) */
}
.single-product div.product .rockbros-trust-icons__strip {
	max-width: 360px;
	filter: grayscale(1);
	opacity: .55;
}

/* ---- 14. Badge de oferta + galería más grande --------------------------- */

/* Badge "-20%": tag rectangular rojo y chico (saca el círculo negro pesado).
   Ata con el rojo del precio de oferta → acento coherente. */
.single-product div.product span.onsale {
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	padding: 5px 11px;
	border-radius: 0;
	line-height: 1.2;
	top: 14px;
	left: 14px;
	margin: 0;
	background: var(--rb-sale);
	color: var(--rb-white);
	font-family: "Barlow", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
}

/* NOTA: se revirtió el agrandado de galería (45%→50% + img width:100%). Forzaba
   el ancho del slide a fracciones de píxel y a zoom 90/110% se asomaba un sliver
   de la siguiente imagen del flexslider. Se vuelve al tamaño base (estable).
   Para dar más presencia a la foto sin tocar el slider, reencuadrar los PNG
   de origen (el producto viene chico dentro del marco). */

/* ---- 15. Productos VARIABLES — selector de talla/color en pills (estilo USA)
   Problema base: WC renderiza las variaciones como <table> con <select>, y mete
   cantidad+botón en .woocommerce-variation-add-to-cart. Eso rompía el layout en
   columna del rediseño. Acá: (a) la tabla se vuelve bloque → label gris arriba,
   pills abajo; (b) el <select> se oculta (el JS lo mantiene vivo) y se reemplaza
   por .rb-swatches; (c) el bloque variación cantidad+botón hereda el layout en
   columna de la zona de compra. */

/* (a) Desarmar la <table> de variaciones → cada atributo apilado */
.single-product div.product form.cart .variations,
.single-product div.product form.cart .variations tbody,
.single-product div.product form.cart .variations tr,
.single-product div.product form.cart .variations th,
.single-product div.product form.cart .variations td {
	display: block;
	width: auto;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
}
/* Huecos verticales del bloque variable, simétricos con el producto simple.
   El form variable trae gap flex ruidoso (un hijo invisible hacía aparecer 13px
   antes de la tabla + 13px antes del bloque de compra). Lo anulamos (gap:0, ver
   abajo en sección 15d) y controlamos los dos huecos SOLO con estos márgenes:
   - arriba (precio→Color): 14px del precio + 6px de aquí ≈ 20px
   - abajo (swatches→Cantidad): 20px de aquí ≈ 20px  → simétrico. */
.single-product div.product form.cart .variations { margin-top: 6px; margin-bottom: 20px; }
.single-product div.product form.cart .variations tr + tr { margin-top: 18px; }
.single-product div.product form.cart .variations th.label label {
	display: block;
	font-family: "Barlow", sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #8a8a8a;
	letter-spacing: .02em;
	margin-bottom: 8px;
}

/* (b) Ocultar el <select> nativo sin sacarlo del DOM (WC lo necesita) */
.single-product div.product form.cart .variations td.value select.rb-select-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Pills de variación — pill monocromo, activo = aro negro (sin reflow) */
.single-product div.product .rb-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.single-product div.product .rb-swatch {
	font-family: "Barlow", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	min-width: 46px;
	padding: 10px 16px;
	background: var(--rb-white);
	color: var(--rb-black);
	border: 1px solid #d2d2d2;
	border-radius: 60px;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, color .15s, opacity .15s;
}
.single-product div.product .rb-swatch:hover { border-color: #8a8a8a; }
.single-product div.product .rb-swatch.is-active {
	border-color: transparent;
	box-shadow: inset 0 0 0 2px var(--rb-black);   /* aro sin cambiar el tamaño */
	font-weight: 600;
}
/* Combinación no disponible: gris, tachado, no clickeable */
.single-product div.product .rb-swatch--disabled {
	opacity: .4;
	cursor: not-allowed;
	text-decoration: line-through;
}
.single-product div.product .rb-swatch--disabled:hover { border-color: #d2d2d2; }

/* Link "Limpiar" (reset_variations) — chico y gris, compacto para no inflar el
   hueco swatches→Cantidad (vive dentro de la tabla, debajo de los pills). */
.single-product div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 6px;
	margin-bottom: 0;
	font-family: "Barlow", sans-serif;
	font-size: 12px;
	color: #8a8a8a;
	text-decoration: underline;
}

/* (c) El bloque de la variación seleccionada hereda la columna con aire */
.single-product div.product .single_variation_wrap { width: 100%; }
.single-product div.product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	margin: 0;
}
/* Precio de la variación: misma jerarquía que el precio principal */
.single-product div.product .single_variation .price,
.single-product div.product .single_variation .price .woocommerce-Price-amount {
	font-family: "Barlow", sans-serif;
	color: var(--rb-black);
}
.single-product div.product .single_variation .price {
	font-size: clamp(20px, 2.3vw, 23px);
	font-weight: 600;
	margin-bottom: 4px;
}
.single-product div.product .single_variation .price ins { color: var(--rb-sale); font-weight: 500; }
/* La disponibilidad de la variación ya hereda los estilos grises de la sección 12 */

/* (d) Cerrar el hueco extra BAJO los botones en variables.
   El form variable trae estructura que el simple no: el wrap + el bloque
   .single_variation (precio) que, vacío y sin variación elegida, igual reserva
   aire. Igualamos la compacidad del producto simple sin tocarlo (scope a
   .variations_form). El alto del precio aparece solo cuando hay variación. */
.single-product div.product form.variations_form.cart { margin-bottom: 20px; }
/* gap:0 → matamos los 13px+13px del gap flex; los huecos los fija .variations
   (margin-top/bottom arriba). Scope a variations_form: el form simple conserva
   su gap:13px (Cantidad↔botones) intacto. */
.single-product div.product form.variations_form.cart { gap: 0; }
.single-product div.product .single_variation_wrap { margin: 0; }
/* Astra fuerza .single_variation{margin-bottom:1.2em} con 6 clases → igualamos su
   contexto para que, VACÍO (sin variación elegida), no reserve ese aire. */
.woocommerce-js div.product form.cart .single_variation_wrap .single_variation:empty {
	margin: 0;
	padding: 0;
	border: 0;
}
.single-product div.product .woocommerce-variation-add-to-cart {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}