/* ==========================================================================
   Colihue Aventura – Página de producto (template "Producto individual – Colihue")
   TODO está scopeado a .ca-pdp: fuera de ese contenedor no cambia nada.
   Paleta (medida del boceto y del logo): naranja #ff6d00, tarjeta #2f2e2a,
   fondo de página #e0e0e0, celeste de pestaña activa #4ab0f4.
   ========================================================================== */

.ca-pdp {
	--ca-naranja: #ff6d00;
	--ca-naranja-oscuro: #e05f00;
	--ca-negro: #111111;
	--ca-tarjeta: #2f2e2a;
	--ca-tarjeta-borde: #ffffff;
	--ca-gris-fondo: #e0e0e0;
	--ca-gris-panel: #e6e6e6;
	--ca-gris-texto: #8a8a8a;
	--ca-gris-linea: #cfcfcf;
	--ca-celeste: #4ab0f4;
	--ca-blanco: #ffffff;
	--ca-display: "Oswald", "Arial Narrow", sans-serif;
	--ca-texto: "Krona One", "Hanken Grotesk", Arial, sans-serif;
	--ca-radio: 16px;
	--ca-radio-chico: 12px;
	--ca-sombra: 0 4px 16px rgba(0, 0, 0, .07);
	--ca-sombra-alta: 0 10px 30px rgba(0, 0, 0, .12);
	--ca-gap: 18px;
}

.ca-pdp,
.ca-pdp * { box-sizing: border-box; }

/* El bloque de abajo (información adicional + relacionados) no tiene menú al
   costado: va a todo el ancho del contenedor, alineado al ras con el bloque de
   arriba. Su ancho lo fija el propio contenedor del template (1420 boxed). */
.ca-pdp .ca-pdp-abajo { width: 100%; }

/* Centrado óptico: el menú ocupa una columna a la izquierda, así que el bloque
   del producto quedaría corrido a la derecha del centro de la pantalla. Se
   compensa con un espacio del mismo ancho al final. Desaparece cuando el menú
   se oculta (tablet y celular). */
.ca-pdp .ca-pdp-main::after {
	content: "";
	flex: 0 0 210px;
	align-self: stretch;
}
@media (max-width: 1024px) {
	.ca-pdp .ca-pdp-main::after { display: none; }
}

/* Guardas anti-desborde: ningún hijo flex puede empujar el ancho de la página. */
.ca-pdp .e-con,
.ca-pdp .e-con-inner,
.ca-pdp .elementor-widget { min-width: 0; }

/* --------------------------------------------------------------------------
   1. Foto principal
   -------------------------------------------------------------------------- */
/* Altura natural: cada columna mide lo que necesita. Estirar la foto para
   igualar la columna derecha dejaba un hueco enorme cuando el producto tiene
   pocas fotos y muchas variantes. */
.ca-pdp .ca-pdp-top { align-items: flex-start; }
.woocommerce div.product .ca-pdp .woocommerce-product-gallery {
	margin: 0;
	width: 100%;
	float: none;
	border: 0;
	border-radius: var(--ca-radio);
	overflow: hidden;
	background: var(--ca-blanco);
	box-shadow: var(--ca-sombra);
}
.woocommerce div.product .ca-pdp .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}
/* Las miniaturas se mueven con JS a la columna de la derecha (.ca-thumbs).
   Mientras el JS no corrió, quedan debajo de la foto con estilo neutro. */
.woocommerce div.product .ca-pdp .woocommerce-product-gallery .flex-control-thumbs { margin: 8px 0 0; padding: 0; }

/* Si FlexSlider no inicializó (no existe .flex-control-nav), la galería muestra
   TODAS las fotos apiladas a tamaño completo. Con las miniaturas propias ya
   armadas al costado, queda visible sólo la primera. */
.woocommerce div.product .ca-pdp .woocommerce-product-gallery.ca-sin-slider .woocommerce-product-gallery__image:not(:first-child) { display: none; }

/* El "¡Oferta!" del producto padre se oculta: cada tarjeta lleva su propio OFERTA. */
.woocommerce div.product .ca-pdp .elementor-widget-woocommerce-product-images .onsale { display: none; }

/* --------------------------------------------------------------------------
   2. Selectores (pills) – se inyectan al lado de cada <select> del formulario
   -------------------------------------------------------------------------- */
.woocommerce div.product .ca-pdp form.variations_form table.variations {
	width: 100%;
	margin: 0 0 12px;
	border: 0;
	border-collapse: collapse;
}
.woocommerce div.product .ca-pdp form.variations_form table.variations tr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 0 0 14px; border: 0; }
.woocommerce div.product .ca-pdp form.variations_form table.variations th,
.woocommerce div.product .ca-pdp form.variations_form table.variations td { padding: 0; border: 0; background: transparent; vertical-align: middle; }
.woocommerce div.product .ca-pdp form.variations_form table.variations th.label { flex: 0 0 auto; max-width: 40%; }
.woocommerce div.product .ca-pdp form.variations_form table.variations th.label label {
	font-family: var(--ca-display);
	font-weight: 600;
	font-size: 22px;
	line-height: 1;
	color: var(--ca-negro);
	text-transform: none;
	margin: 0;
	display: inline-block;
}
.woocommerce div.product .ca-pdp form.variations_form table.variations th.label label::after { content: ":"; }
.woocommerce div.product .ca-pdp form.variations_form table.variations td.value { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }

/* La fila del eje del carrusel (Variante) no se elige acá: la elige la tarjeta. */
.woocommerce div.product .ca-pdp form.variations_form table.variations tr.ca-row-combo { display: none; }

/* El <select> nativo sigue en el DOM (es la fuente de verdad de WooCommerce),
   pero se oculta visualmente cuando ya existen sus pills. */
.woocommerce div.product .ca-pdp form.variations_form table.variations select.ca-has-pills {
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	width: 1px !important;
	min-width: 0 !important;
	max-width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.ca-pills { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; }
.ca-pill {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	min-width: 50px;
	padding: 8px 24px;
	margin: 0;
	border: 2px solid rgba(0, 0, 0, .12);
	border-radius: 999px;
	background: var(--ca-blanco);
	box-shadow: var(--ca-sombra);
	color: #2a2a2a;
	font-family: var(--ca-display);
	font-weight: 500;
	font-size: 21px;
	line-height: 1;
	text-transform: none;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.34, 1.4, .64, 1);
}
.ca-pill:hover {
	background: var(--ca-blanco);
	border-color: rgba(255, 109, 0, .5);
	color: var(--ca-naranja-oscuro);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .10);
}
.ca-pill:active { transform: translateY(0); }
.ca-pill:focus-visible { outline: 3px solid var(--ca-naranja); outline-offset: 3px; }
.ca-pill.is-active {
	background: var(--ca-naranja);
	color: var(--ca-blanco);
	border-color: var(--ca-naranja);
	font-weight: 600;
	box-shadow: 0 6px 18px rgba(255, 109, 0, .38);
	transform: none;
}
.ca-pill.is-active:hover { background: var(--ca-naranja-oscuro); border-color: var(--ca-naranja-oscuro); color: var(--ca-blanco); transform: translateY(-2px); }
.ca-pill.is-disabled,
.ca-pill:disabled {
	opacity: .35;
	cursor: not-allowed;
	text-decoration: line-through;
}
/* Swatch de color: cuadrado con el color real (definido en functions.php). */
.ca-pill.ca-pill--color {
	width: 52px;
	min-width: 52px;
	height: 44px;
	padding: 0;
	border-radius: 8px;
	border: 2px solid #6b6b6b;
	font-size: 0;
	color: transparent;
	background: var(--ca-swatch, #999);
}
.ca-pill.ca-pill--color.is-active { border: 3px solid var(--ca-naranja); box-shadow: 0 0 0 2px var(--ca-blanco) inset; }

/* Aviso "elegí primero el calibre" sobre los pills. */
.ca-pills.ca-needs .ca-pill:not(.is-active) { animation: ca-shake .45s ease; border-color: var(--ca-naranja); }
@keyframes ca-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ca-hint {
	width: 100%;
	margin: 0;
	font-family: var(--ca-texto);
	font-size: 12px;
	color: var(--ca-naranja-oscuro);
}

/* Botón "Limpiar" de WooCommerce: discreto, a la derecha. */
.woocommerce div.product .ca-pdp form.variations_form .reset_variations {
	font-family: var(--ca-texto);
	font-size: 11px;
	color: var(--ca-gris-texto);
	text-decoration: underline;
	margin-left: auto;
}

/* --------------------------------------------------------------------------
   3. Miniaturas (galería) movidas a la columna derecha
   -------------------------------------------------------------------------- */
.ca-thumbs { display: block; width: 100%; clear: both; margin: 6px 0 16px; }

/* La lista es un <ol class="flex-control-nav flex-control-thumbs"> cuando la
   crea FlexSlider, y un <ul class="flex-control-nav ca-thumbs-propias"> cuando
   la armamos nosotros. Las dos van EN HORIZONTAL, con salto de línea. */
.ca-thumbs .flex-control-nav {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ca-thumbs .flex-control-nav > li {
	flex: 0 0 auto;
	display: block;
	width: 72px;
	max-width: 72px;
	margin: 0;
	padding: 0;
	float: none;
	list-style: none;
}
.ca-thumbs .flex-control-nav > li img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border: 2px solid transparent;
	border-radius: var(--ca-radio-chico);
	box-shadow: var(--ca-sombra);
	background: var(--ca-blanco);
	cursor: pointer;
	opacity: 1;
	transition: border-color .15s, transform .15s;
}
.ca-thumbs .flex-control-nav > li img:hover { transform: translateY(-2px); }
.ca-thumbs .flex-control-nav > li img:hover,
.ca-thumbs .flex-control-nav > li img.flex-active { border-color: var(--ca-naranja); }

/* --------------------------------------------------------------------------
   4. Precio y botón nativos (compra del rifle según lo elegido en pills/tarjeta)
   -------------------------------------------------------------------------- */
.woocommerce div.product .ca-pdp .single_variation_wrap .woocommerce-variation-price .price,
.woocommerce div.product .ca-pdp .single_variation_wrap .woocommerce-variation-price span.price,
.woocommerce div.product .ca-pdp .elementor-widget-woocommerce-product-price p.price,
.woocommerce div.product .ca-pdp .elementor-widget-woocommerce-product-price .price,
.woocommerce div.product .ca-pdp .elementor-widget-woocommerce-product-price .price .amount {
	font-family: var(--ca-display);
	font-weight: 700;
	font-size: 34px;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--ca-naranja);
}
/* Precio anterior tachado: chico y gris, arriba del actual */
.woocommerce div.product .ca-pdp .elementor-widget-woocommerce-product-price .price del,
.woocommerce div.product .ca-pdp .elementor-widget-woocommerce-product-price .price del .amount {
	display: block;
	font-size: 20px;
	font-weight: 400;
	color: var(--ca-gris-texto);
	margin: 0 0 2px;
}
.woocommerce div.product .ca-pdp .elementor-widget-woocommerce-product-price .price ins { text-decoration: none; }
.woocommerce div.product .ca-pdp .elementor-widget-woocommerce-product-price .price { margin: 0 0 4px; }
.woocommerce div.product .ca-pdp .single_variation_wrap .woocommerce-variation-price .price { font-size: 40px; line-height: 1.05; letter-spacing: -.01em; }
.woocommerce div.product .ca-pdp .single_variation_wrap .price del { display: block; color: var(--ca-gris-texto); font-weight: 400; font-size: .5em; margin: 0 0 2px; }
.woocommerce div.product .ca-pdp .single_variation_wrap .price ins { text-decoration: none; }
.woocommerce div.product .ca-pdp .woocommerce-variation-description { font-family: var(--ca-texto); font-size: 12px; color: #333; }
/* Con la tarjeta "Qué incluye" armada, la copia nativa sobra. */
.ca-pdp.ca-con-incluye .woocommerce-variation-description { display: none !important; }
.woocommerce div.product .ca-pdp .woocommerce-variation-availability { font-family: var(--ca-texto); font-size: 12px; }

/* Aviso de stock de WooCommerce (el del producto entero, no el de la tarjeta).
   Por defecto es un texto rojo suelto; acá va como pastilla, en la línea del
   resto del diseño. */
.woocommerce div.product .ca-pdp p.stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 10px;
	padding: 9px 16px;
	border-radius: 999px;
	font-family: var(--ca-display);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.woocommerce div.product .ca-pdp p.stock::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 9px;
}
.woocommerce div.product .ca-pdp p.stock.out-of-stock {
	background: rgba(20, 20, 20, .07);
	color: #4a4a4a;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.woocommerce div.product .ca-pdp p.stock.in-stock,
.woocommerce div.product .ca-pdp p.stock.available-on-backorder {
	background: rgba(255, 109, 0, .10);
	color: var(--ca-naranja-oscuro);
	box-shadow: inset 0 0 0 1px rgba(255, 109, 0, .25);
}

.woocommerce div.product .ca-pdp .woocommerce-variation-add-to-cart { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.woocommerce div.product .ca-pdp .woocommerce-variation-add-to-cart .quantity { display: flex; }
.woocommerce div.product .ca-pdp .woocommerce-variation-add-to-cart .quantity .qty {
	width: 70px;
	min-height: 48px;
	border: 2px solid var(--ca-negro);
	border-radius: var(--ca-radio-chico);
	text-align: center;
	font-family: var(--ca-display);
	font-size: 18px;
	background: var(--ca-blanco);
}
.woocommerce div.product .ca-pdp button.single_add_to_cart_button {
	flex: 1 1 180px;
	min-height: 48px;
	border: 2px solid var(--ca-negro);
	border-radius: 999px;
	background: var(--ca-negro);
	color: var(--ca-blanco);
	font-family: var(--ca-display);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}
.woocommerce div.product .ca-pdp button.single_add_to_cart_button:hover:not(.disabled),
.woocommerce div.product .ca-pdp button.single_add_to_cart_button:focus-visible { background: var(--ca-naranja); border-color: var(--ca-naranja); color: var(--ca-blanco); }
.woocommerce div.product .ca-pdp button.single_add_to_cart_button.disabled,
.woocommerce div.product .ca-pdp button.single_add_to_cart_button.disabled:hover { background: var(--ca-negro); color: var(--ca-blanco); }
.woocommerce div.product .ca-pdp button.single_add_to_cart_button.disabled { opacity: .45; cursor: not-allowed; }



/* --------------------------------------------------------------------------
   4c. Orden de la zona de compra
   Precio · miniaturas · comprar · calibre · (carrusel, que va después)
   -------------------------------------------------------------------------- */
.woocommerce div.product .ca-pdp form.variations_form.ca-orden-compra {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.woocommerce div.product .ca-pdp form.ca-orden-compra .single_variation_wrap { order: 1; }
.woocommerce div.product .ca-pdp form.ca-orden-compra .ca-thumbs { order: 2; }
.woocommerce div.product .ca-pdp form.ca-orden-compra .woocommerce-variation-add-to-cart { order: 3; margin: 4px 0 14px; }
.woocommerce div.product .ca-pdp form.ca-orden-compra table.variations { order: 4; margin: 0 0 6px; }
.woocommerce div.product .ca-pdp form.ca-orden-compra #ca-variantes { order: 5; margin: 0 0 16px; }
.woocommerce div.product .ca-pdp form.ca-orden-compra .reset_variations { order: 4; align-self: flex-end; margin: -4px 0 8px; }
.woocommerce div.product .ca-pdp form.ca-orden-compra .ca-incluye { order: 7; }

/* Un solo precio: mientras hay una variante elegida, el rango del producto
   ("$600.000 – $999.999") se esconde y manda el precio de esa variante. */
.ca-pdp.ca-con-variacion .elementor-widget-woocommerce-product-price { display: none; }
.woocommerce div.product .ca-pdp .elementor-widget-woocommerce-product-price .price {
	font-size: 22px;
	color: var(--ca-gris-texto);
}
.woocommerce div.product .ca-pdp .elementor-widget-woocommerce-product-price .price .amount { font-size: 26px; }
/* El precio de la variante, arriba de todo y en grande. */
.woocommerce div.product .ca-pdp form.ca-orden-compra .woocommerce-variation-price { margin: 0 0 6px; }

/* --------------------------------------------------------------------------
   4b. "Qué incluye" — el detalle del combo, de la descripción de la variación
   -------------------------------------------------------------------------- */
.ca-incluye {
	margin: 14px 0 0;
	padding: 16px 18px;
	border-radius: var(--ca-radio);
	background: var(--ca-blanco);
	box-shadow: var(--ca-sombra);
}
.ca-incluye[hidden] { display: none; }
.ca-incluye-tit {
	margin: 0 0 10px;
	padding: 0 0 9px;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	font-family: var(--ca-display);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ca-negro);
}
.ca-incluye-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.ca-incluye-lista li {
	position: relative;
	margin: 0;
	padding: 0 0 0 26px;
	list-style: none;
	font-family: var(--ca-texto);
	font-size: 11.5px;
	line-height: 1.5;
	color: #333;
	overflow-wrap: anywhere;
}
/* Tilde naranja al inicio de cada ítem */
.ca-incluye-lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(255, 109, 0, .12);
	box-shadow: inset 0 0 0 1px rgba(255, 109, 0, .35);
}
.ca-incluye-lista li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 6px;
	width: 4px;
	height: 7px;
	border-right: 2px solid var(--ca-naranja);
	border-bottom: 2px solid var(--ca-naranja);
	transform: rotate(45deg);
}
/* La cantidad ("1 x") resalta apenas */
.ca-incluye-uno { margin: 0; font-family: var(--ca-texto); font-size: 11.5px; line-height: 1.6; color: #333; }
.ca-incluye-cuerpo p { margin: 0 0 8px; font-family: var(--ca-texto); font-size: 11.5px; line-height: 1.6; color: #333; }
.ca-incluye-cuerpo p:last-child { margin-bottom: 0; }

/* En el celular ocupa todo el ancho, igual que el resto de la columna. */
@media (max-width: 767px) {
	.ca-incluye { padding: 14px 16px; }
	.ca-incluye-tit { font-size: 14px; }
	.ca-incluye-lista li { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   5. Carrusel de variantes
   -------------------------------------------------------------------------- */
.ca-variantes { position: relative; margin: 6px 0 22px; }
.ca-variantes.is-empty { display: none; }

.ca-carousel {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 48px;
	align-items: center;
	gap: 4px;
}
.ca-track {
	display: flex;
	gap: var(--ca-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 6px 2px 10px;
	margin: 0;
	list-style: none;
}
.ca-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .ca-track { scroll-behavior: auto; } }

.ca-arrow {
	appearance: none;
	-webkit-appearance: none;
	width: 48px;
	height: 64px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--ca-naranja);
	font-family: var(--ca-display);
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .15s, transform .15s;
}
.ca-arrow:hover { transform: scale(1.12); }
.ca-arrow:focus-visible { outline: 3px solid var(--ca-naranja); outline-offset: 2px; border-radius: 8px; }
.ca-arrow[disabled] { opacity: .2; cursor: default; transform: none; }
.ca-carousel.ca-no-scroll .ca-arrow { visibility: hidden; }

/* Tarjeta */
.ca-card {
	--ca-cols: 4;
	flex: 0 0 calc((100% - (var(--ca-cols) - 1) * var(--ca-gap)) / var(--ca-cols));
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: var(--ca-tarjeta);
	border: 0;
	border-radius: 18px;
	overflow: hidden;
	color: var(--ca-blanco);
	box-shadow: var(--ca-sombra-alta);
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ca-card { cursor: pointer; }
.ca-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .18); }
.ca-card:focus-visible { outline: 3px solid var(--ca-naranja); outline-offset: 3px; }
/* La tarjeta elegida se marca con un tilde para que se note que quedó seleccionada. */
.ca-card.is-active .ca-card-img::after {
	content: "✓";
	position: absolute;
	left: 8px;
	top: 8px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ca-naranja);
	color: var(--ca-blanco);
	font-family: var(--ca-texto);
	font-size: 13px;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.ca-card.is-active { box-shadow: 0 0 0 3px var(--ca-naranja), var(--ca-sombra-alta); }
/* Sin stock: la tarjeta se apaga y la foto queda en gris, con una faja clara
   cruzada sobre la imagen. Se sigue leyendo el precio y el nombre. */
.ca-card.is-unavailable { opacity: 1; }
.ca-card.is-sin-stock .ca-card-img img { filter: grayscale(1) contrast(.9); opacity: .55; }
.ca-card.is-sin-stock .ca-card-name,
.ca-card.is-sin-stock .ca-price ins { opacity: .6; }
.ca-card.is-sin-stock:hover { transform: none; box-shadow: var(--ca-sombra-alta); }
.ca-badge-stock {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-8deg);
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(20, 20, 20, .88);
	color: var(--ca-blanco);
	font-family: var(--ca-display);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.ca-card.is-sin-stock .ca-badge-stock { display: block; }
.ca-card.is-sin-stock .ca-badge { display: none; }
.ca-pdp-side .ca-badge-stock { padding: 4px 10px; font-size: 10px; letter-spacing: .05em; }

.ca-card-img {
	position: relative;
	margin: 10px 10px 8px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--ca-blanco);
	aspect-ratio: 1 / 1;
}
.ca-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
.ca-badge {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--ca-naranja);
	box-shadow: 0 3px 10px rgba(255, 109, 0, .35);
	font-family: var(--ca-display);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ca-blanco);
}

.ca-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 4px 12px 12px; text-align: center; }
.ca-price { display: flex; flex-direction: column; align-items: center; line-height: 1; margin: 0 0 6px; font-family: var(--ca-display); }
.ca-price del { color: #8f8f8f; font-weight: 400; font-size: 24px; text-decoration: line-through; margin-bottom: 2px; }
.ca-price ins { color: var(--ca-naranja); font-weight: 700; font-size: 34px; text-decoration: none; }
.ca-card:not(.is-sale) .ca-price del,
.ca-card:not(.is-sale) .ca-badge { display: none; }

.ca-card-name {
	margin: 0 0 4px;
	font-family: var(--ca-display);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--ca-blanco);
}
.ca-card-desc {
	margin: 0 0 6px;
	font-family: var(--ca-texto);
	font-size: 10px;
	line-height: 1.5;
	color: #d9d9d9;
}
.ca-card-desc p { margin: 0; }

.ca-card-btn {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	/* El tema le pone márgenes a los <button>: eso corría el botón fuera de la
	   tarjeta. */
	margin: auto 0 0 !important;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 8px 10px;
	border: 2px solid var(--ca-blanco);
	border-radius: 999px;
	background: var(--ca-blanco);
	color: var(--ca-negro);
	font-family: var(--ca-display);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.ca-card-btn:hover { background: var(--ca-naranja); border-color: var(--ca-naranja); color: var(--ca-blanco); }
.ca-card-btn:focus-visible { outline: 3px solid var(--ca-naranja); outline-offset: 2px; }
.ca-card-btn:disabled { opacity: .5; cursor: not-allowed; background: #777; border-color: #777; color: #ddd; }


.ca-edit-slot {
	display: block;
	padding: 22px 16px;
	border: 2px dashed var(--ca-naranja);
	border-radius: var(--ca-radio);
	background: rgba(255, 109, 0, .06);
	font-family: var(--ca-texto);
	font-size: 12px;
	color: var(--ca-naranja-oscuro);
	text-align: center;
}


/* Nombre de la variante elegida, al lado del título del producto. */
.woocommerce div.product .ca-pdp .product_title .ca-variante-elegida {
	display: inline-block;
	margin-left: 10px;
	padding: 5px 14px;
	border-radius: 999px;
	background: rgba(255, 109, 0, .12);
	color: var(--ca-naranja-oscuro);
	font-family: var(--ca-texto);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .03em;
	text-transform: none;
	vertical-align: middle;
	box-shadow: inset 0 0 0 1px rgba(255, 109, 0, .28);
}
@media (max-width: 767px) {
	.woocommerce div.product .ca-pdp .product_title .ca-variante-elegida { display: block; margin: 8px 0 0; font-size: 10.5px; }
}

/* --------------------------------------------------------------------------
   5b. Carrusel COMPACTO (va en la columna derecha, debajo de Comprar)
   Muestra 2 tarjetas y media para que se note que hay más al costado.
   -------------------------------------------------------------------------- */
.ca-variantes-titulo {
	margin: 4px 0 10px;
	font-family: var(--ca-display);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.2;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ca-negro);
}
.ca-variantes-titulo::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin-top: 7px;
	border-radius: 999px;
	background: var(--ca-naranja);
}

.ca-pdp-side .ca-variantes { --ca-gap: 10px; margin: 14px 0 0; }
.ca-pdp-side .ca-carousel { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 2px; }
.ca-pdp-side .ca-arrow { width: 30px; height: 46px; font-size: 30px; }
.ca-pdp-side .ca-track { padding: 4px 2px 8px; }

/* 2,5 tarjetas: cada una es (100% - 2 gaps) / 2,5 */
.ca-pdp-side .ca-card {
	flex: 0 0 calc((100% - 2 * var(--ca-gap)) / 2.5);
	border-radius: 14px;
}
.ca-pdp-side .ca-card-img { margin: 6px 6px 4px; border-radius: 9px; }
.ca-pdp-side .ca-card-body { padding: 2px 8px 8px; }
.ca-pdp-side .ca-badge { right: 5px; bottom: 5px; padding: 3px 8px; font-size: 10px; letter-spacing: .04em; }
.ca-pdp-side .ca-price { margin: 0 0 4px; }
.ca-pdp-side .ca-price del { font-size: 12px; margin-bottom: 0; }
.ca-pdp-side .ca-price ins { font-size: 19px; }
.ca-pdp-side .ca-card-name {
	font-size: 11px;
	line-height: 1.25;
	margin: 0 0 4px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* La descripción no entra en una tarjeta chica: se ve al elegir la variante,
   en el bloque nativo de WooCommerce que está arriba. */
.ca-pdp-side .ca-card-desc { display: none; }
.ca-pdp-side .ca-card-btn {
	min-height: 40px;
	padding: 7px 8px;
	font-size: 10.5px;
	line-height: 1.25;
	letter-spacing: .01em;
	border-width: 1px;
	white-space: normal;
	overflow-wrap: break-word;
}

@media (max-width: 767px) {
	/* En celular se ocultan las flechas: la grilla pasa a UNA columna, si no la
	   pista quedaría metida en la columna de 30px que dejaban los botones. */
	.ca-pdp-side .ca-carousel { grid-template-columns: minmax(0, 1fr); }
	.ca-pdp-side .ca-arrow { display: none; }
	/* En celular la columna derecha ocupa todo el ancho: las tarjetas pueden
	   ser un poco más grandes que en el panel de escritorio, pero mucho más
	   chicas que antes (antes ocupaban el 84% de la pantalla). */
	.ca-pdp-side .ca-card { flex: 0 0 calc((100% - 2 * var(--ca-gap)) / 2.35); }
	.ca-pdp-side .ca-price ins { font-size: 20px; }
	.ca-pdp-side .ca-card-name { font-size: 11.5px; }
	.ca-pdp-side .ca-card-btn { min-height: 38px; font-size: 11.5px; }
	.ca-variantes-titulo { font-size: 17px; }
}

/* Si el producto no tiene atributos ni descripción, WooCommerce no imprime las
   pestañas, pero el widget de Elementor deja igual su contenedor (y con él, el
   espacio entre bloques). Lo mismo con relacionados si no hay productos. */
.ca-pdp .elementor-widget-woocommerce-product-data-tabs:not(:has(.woocommerce-tabs)) { display: none; }
.ca-pdp .elementor-widget-woocommerce-product-related:not(:has(li.product)) { display: none; }

/* --------------------------------------------------------------------------
   6. Cuadro de información (pestañas + grilla de atributos)
   -------------------------------------------------------------------------- */
.woocommerce div.product .ca-pdp .woocommerce-tabs.wc-tabs-wrapper {
	background: var(--ca-gris-panel);
	border-radius: 22px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
	padding: 22px 26px 26px;
	margin: 0 0 28px;
}
.woocommerce div.product .ca-pdp .woocommerce-tabs ul.wc-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	list-style: none;
}
.woocommerce div.product .ca-pdp .woocommerce-tabs ul.wc-tabs::before,
.woocommerce div.product .ca-pdp .woocommerce-tabs ul.wc-tabs::after { display: none; }
.woocommerce div.product .ca-pdp .woocommerce-tabs ul.wc-tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 999px;
	box-shadow: none;
}
.woocommerce div.product .ca-pdp .woocommerce-tabs ul.wc-tabs li::before,
.woocommerce div.product .ca-pdp .woocommerce-tabs ul.wc-tabs li::after,
.woocommerce div.product .ca-pdp .woocommerce-tabs ul.wc-tabs li.active::before,
.woocommerce div.product .ca-pdp .woocommerce-tabs ul.wc-tabs li.active::after { display: none; content: none; box-shadow: none; }
.woocommerce div.product .ca-pdp .woocommerce-tabs ul.wc-tabs li.active { background: transparent; border: 0; box-shadow: none; }
.woocommerce div.product .ca-pdp .woocommerce-tabs ul.wc-tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 22px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: rgba(0, 0, 0, .07);
	color: #5a5a5a;
	font-family: var(--ca-texto);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .15s, color .15s, border-color .15s;
}
.woocommerce div.product .ca-pdp .woocommerce-tabs ul.wc-tabs li a:hover { background: #cfcfcf; }
.woocommerce div.product .ca-pdp .woocommerce-tabs ul.wc-tabs li.active a {
	background: var(--ca-blanco);
	color: var(--ca-naranja-oscuro);
	border-color: var(--ca-naranja);
	box-shadow: 0 3px 12px rgba(255, 109, 0, .22);
}
.woocommerce div.product .ca-pdp .woocommerce-tabs .woocommerce-Tabs-panel { padding: 0; margin: 0; border: 0; background: transparent; }
.woocommerce div.product .ca-pdp .woocommerce-tabs .woocommerce-Tabs-panel > h2 { display: none; }

/* Grilla de atributos: 4 columnas de pares etiqueta/valor. */
.woocommerce div.product .ca-pdp table.shop_attributes { width: 100%; border: 0; border-collapse: collapse; margin: 0; }
.woocommerce div.product .ca-pdp table.shop_attributes tbody {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 26px;
	row-gap: 0;
}
.woocommerce div.product .ca-pdp table.shop_attributes tr {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	align-items: baseline;
	column-gap: 10px;
	padding: 11px 2px;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	background: transparent;
}
.woocommerce div.product .ca-pdp table.shop_attributes tr:nth-child(odd),
.woocommerce div.product .ca-pdp table.shop_attributes tr:nth-child(even) { background: transparent; }
.woocommerce div.product .ca-pdp table.shop_attributes th,
.woocommerce div.product .ca-pdp table.shop_attributes td { padding: 0; border: 0; background: transparent; }
.woocommerce div.product .ca-pdp table.shop_attributes th {
	font-family: var(--ca-texto);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ca-gris-texto);
	text-align: left;
}
.woocommerce div.product .ca-pdp table.shop_attributes td {
	font-family: var(--ca-texto);
	font-size: 12px;
	font-weight: 700;
	color: var(--ca-negro);
	text-align: right;
	font-style: normal;
	overflow-wrap: anywhere;
}
.woocommerce div.product .ca-pdp table.shop_attributes th { overflow-wrap: anywhere; }
.woocommerce div.product .ca-pdp table.shop_attributes td p { margin: 0; }
/* Respaldo por si el filtro PHP no corriera: el eje del carrusel no se lista. */
.woocommerce div.product .ca-pdp table.shop_attributes tr.woocommerce-product-attributes-item--attribute_variante,
.woocommerce div.product .ca-pdp table.shop_attributes tr.woocommerce-product-attributes-item--attribute_pa_variante { display: none; }

/* Pestaña Descripción: el contenido lo escribe Lucas (suele traer una tabla).
   Se le da el mismo aire que a la grilla de atributos. */
.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description { font-family: var(--ca-texto); font-size: 13px; line-height: 1.7; color: #222; }
.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description p { margin: 0 0 12px; }
.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description img { max-width: 100%; height: auto; border-radius: var(--ca-radio-chico); }
.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description ul,
.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description ol { margin: 0 0 12px; padding-left: 20px; }

/* Las tablas de la descripción las pega Lucas desde el editor y suelen traer
   anchos fijos ("width: 828px", celdas con width="65%", cellpadding) que rompen
   la grilla y dejan las etiquetas en una columna de 40px, cortadas letra por
   letra. Se anulan esos anchos. */
.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description table {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 14px;
	border: 0;
	border-collapse: collapse;
	table-layout: auto;
	background: transparent;
}
.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description table td,
.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description table th {
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	justify-self: stretch;
	background-color: transparent !important;
}
.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description table tr {
	background: transparent;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description table tr:last-child { border-bottom: 0; }
.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description table th,
.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description table td {
	padding: 11px 12px;
	border: 0;
	background: transparent;
	vertical-align: top;
	overflow-wrap: anywhere;
}
/* Primera columna = etiqueta; el resto, valor en negrita. */
.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description table td:first-child,
.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description table th:first-child {
	width: 38%;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ca-gris-texto);
}
.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description table td:not(:first-child) {
	font-size: 12px;
	font-weight: 700;
	color: var(--ca-negro);
}
.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description table td p,
.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description table th p { margin: 0; }
/* En dos columnas cuando hay lugar, para no dejar media pantalla vacía. */
@media (min-width: 900px) {
	.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description table tbody {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 26px;
	}
	.woocommerce div.product .ca-pdp .woocommerce-Tabs-panel--description table tr {
		display: grid;
		grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
		align-items: baseline;
	}
}


/* --------------------------------------------------------------------------
   8. Menú lateral de categorías — acordeón
   La columna es una tarjeta blanca redondeada; cada categoría, una píldora.
   El submenú se despliega adentro (SmartMenus en modo colapsable, ver más
   abajo) sobre un panel propio, también redondeado. Nada de líneas duras.
   -------------------------------------------------------------------------- */
.ca-pdp .ca-pdp-menu {
	align-self: flex-start;
	padding: 10px;
	border-radius: var(--ca-radio);
	background: var(--ca-blanco);
	box-shadow: var(--ca-sombra);
}
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu { margin: 0; padding: 0; }
/* Cuando el menú es más largo que la ficha del producto se recorta a su alto
   y se desplaza por dentro, en vez de estirar el bloque y dejar un vacío. */
.ca-pdp .ca-pdp-menu.ca-menu-recortado {
	overflow-y: auto;
	overscroll-behavior-y: contain;
	scrollbar-width: thin;
	-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%);
	mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%);
}
.ca-pdp .ca-pdp-menu.ca-menu-recortado::-webkit-scrollbar { width: 6px; }
.ca-pdp .ca-pdp-menu.ca-menu-recortado::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 999px; }
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li {
	margin: 0 0 2px;
	border: 0;
	border-radius: var(--ca-radio-chico);
	overflow: hidden;
	transition: background-color .2s ease;
}
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li:last-child { margin-bottom: 0; }

/* Categoría */
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 11px 12px 11px 16px;
	border-radius: var(--ca-radio-chico);
	font-size: 11.5px;
	letter-spacing: .06em;
	line-height: 1.3;
	text-transform: uppercase;
	text-decoration: none;
	color: #1a1a1a;
	background: transparent;
	transition: color .18s ease, background-color .18s ease, padding-left .18s ease;
}
/* Punto naranja que crece hasta ser barra al pasar/abrir */
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 999px;
	background: var(--ca-naranja);
	opacity: 0;
	transition: height .22s ease, margin-top .22s ease, opacity .18s ease;
}
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item::after { display: none; }
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover,
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item.highlighted,
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item[aria-expanded="true"],
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li.current-menu-item > a.elementor-item,
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li.current-menu-ancestor > a.elementor-item,
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li.current-product-ancestor > a.elementor-item,
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li.current-product-parent > a.elementor-item {
	color: var(--ca-naranja-oscuro);
	background: rgba(255, 109, 0, .09);
	padding-left: 20px;
	transform: none;
}
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover::before,
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item.highlighted::before,
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item[aria-expanded="true"]::before,
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li.current-menu-item > a.elementor-item::before,
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li.current-menu-ancestor > a.elementor-item::before,
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li.current-product-ancestor > a.elementor-item::before {
	opacity: 1;
	height: 18px;
	margin-top: -9px;
}
/* Categoría con el submenú abierto: se une visualmente al panel de abajo */
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li:has(> ul.sub-menu[style*="block"]) { background: rgba(255, 109, 0, .06); }
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item[aria-expanded="true"] {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Elementor ya imprime un <span class="sub-arrow"> en el markup y SmartMenus
   agrega el suyo al inicializar: quedan dos. Se muestra sólo el primero. */
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu a .sub-arrow ~ .sub-arrow { display: none !important; }

/* Flecha: círculo suave que gira */
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu .sub-arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: -5px -2px -5px 6px;
	padding: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .05);
	color: #9a9a9a;
	cursor: pointer;
	transition: color .18s ease, background-color .18s ease, transform .3s cubic-bezier(.34, 1.4, .64, 1);
}
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu .sub-arrow svg { width: .7em; height: .7em; fill: currentColor; }
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover .sub-arrow { color: var(--ca-naranja); background: rgba(255, 109, 0, .16); }
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item[aria-expanded="true"] .sub-arrow {
	transform: rotate(180deg);
	color: var(--ca-blanco);
	background: var(--ca-naranja);
}

/* Submenú EN ACORDEÓN, no flotante.
   SmartMenus 1.2.1 decide el modo en isCollapsible(): devuelve true cuando el
   primer submenú tiene position:static. Con eso la propia librería lo abre
   hacia abajo con slideDown/slideUp de 200ms, en vez de sacarlo al costado. */
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu {
	position: static !important;
	display: none;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0;
	padding: 6px 8px 8px;
	border: 0;
	border-radius: 0 0 var(--ca-radio-chico) var(--ca-radio-chico);
	box-shadow: none;
	background: rgba(255, 109, 0, .06);
	overflow: hidden;
}
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu li { border: 0; margin: 0; padding: 0; }
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-sub-item {
	position: relative;
	display: block;
	margin: 1px 0;
	padding: 8px 12px 8px 30px;
	border-radius: 999px;
	font-size: 10.5px;
	letter-spacing: .04em;
	line-height: 1.35;
	text-transform: uppercase;
	text-decoration: none;
	color: #4a4a4a;
	white-space: normal;
	background: transparent;
	transition: color .16s ease, background-color .16s ease, padding-left .16s ease;
}
/* Guía vertical redondeada + punto por ítem */
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-sub-item::before {
	content: "";
	position: absolute;
	left: 17px;
	top: 0;
	bottom: 0;
	width: 2px;
	border-radius: 2px;
	background: rgba(255, 109, 0, .3);
}
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-sub-item::after {
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: var(--ca-blanco);
	border: 2px solid rgba(255, 109, 0, .5);
	transition: background-color .16s ease, transform .2s cubic-bezier(.34, 1.4, .64, 1);
}
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu li:first-child a.elementor-sub-item::before { top: 50%; }
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu li:last-child a.elementor-sub-item::before { bottom: 50%; }
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-sub-item:hover,
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-sub-item.highlighted,
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu li.current-menu-item > a.elementor-sub-item {
	color: var(--ca-naranja-oscuro);
	background: var(--ca-blanco);
	padding-left: 34px;
}
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-sub-item:hover::after,
.ca-pdp .ca-pdp-menu .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu li.current-menu-item > a.elementor-sub-item::after {
	background: var(--ca-naranja);
	border-color: var(--ca-naranja);
	transform: scale(1.2);
}

/* --------------------------------------------------------------------------
   9. Bloque de Mercado Pago dentro del formulario
   El plugin (woocommerce-mercadopago 8.9.3) inserta el aviso de cuotas y un
   modal a pantalla completa DENTRO de .elementor-add-to-cart. Su propio CSS
   deja el modal en visibility:hidden + position:fixed, pero ese CSS no se
   carga en el editor de Elementor: por eso ahí se ve desplegado y gigante.
   Acá se contiene el aviso y se replica el ocultamiento del modal, sin
   romperlo (sigue abriéndose con "Saber más", que le pone la clase/estilo).
   -------------------------------------------------------------------------- */
.ca-pdp .mp-credits-tooltip-container {
	max-width: 100% !important;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 10px;
	padding: 12px 14px;
	border: 1px solid var(--ca-gris-linea);
	border-radius: var(--ca-radio-chico);
	background: rgba(255, 255, 255, .55);
}
.ca-pdp .mp-credits-tooltip-icon { width: 26px; height: 26px; flex: 0 0 26px; object-fit: contain; }
.ca-pdp .mp-credits-tooltip-text { font-family: var(--ca-texto); font-size: 11px; line-height: 1.5; color: #333; }
.ca-pdp .mp-credits-tooltip-text b { font-weight: 700; }
.ca-pdp .mp-credits-tooltip-link a { color: var(--ca-naranja-oscuro); text-decoration: underline; cursor: pointer; }
/* Modal: oculto hasta que el plugin lo abre (replica su propia regla). */
.ca-pdp #mp-credits-modal:not([style*="visible"]) { visibility: hidden; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; }


/* --------------------------------------------------------------------------
   10. Productos relacionados (widget woocommerce-product-related)
   Mismo lenguaje visual que el carrusel de variantes: tarjeta clara con borde,
   nombre condensado, precio naranja, botón negro que vira a naranja.
   -------------------------------------------------------------------------- */
.woocommerce div.product .ca-pdp .ca-relacionados { margin-top: 6px; }
.woocommerce div.product .ca-pdp .ca-relacionados .related > h2,
.woocommerce div.product .ca-pdp .ca-relacionados .elementor-products-grid > h2 {
	position: relative;
	margin: 0 0 18px;
	padding-bottom: 12px;
	border: 0;
	font-family: var(--ca-display);
	font-weight: 600;
	font-size: 24px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ca-negro);
	text-align: left;
}
.woocommerce div.product .ca-pdp .ca-relacionados .related > h2::after,
.woocommerce div.product .ca-pdp .ca-relacionados .elementor-products-grid > h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 4px;
	border-radius: 999px;
	background: var(--ca-naranja);
}
.woocommerce div.product .ca-pdp .ca-relacionados ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	float: none;
}
.woocommerce div.product .ca-pdp .ca-relacionados ul.products::before,
.woocommerce div.product .ca-pdp .ca-relacionados ul.products::after { content: none; display: none; }
/* woocommerce.css le pone width en % y float a cada tarjeta: con grid sobra y descuadra. */
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product {
	width: auto;
	max-width: none;
	min-width: 0;
	float: none;
	margin: 0;
	clear: none;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 10px 10px 12px;
	border: 1px solid transparent;
	border-radius: 18px;
	background: var(--ca-blanco);
	box-shadow: var(--ca-sombra);
	text-align: center;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product:hover {
	border-color: var(--ca-naranja);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
	transform: translateY(-2px);
}
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product a { position: relative; display: block; }
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin: 0 0 14px;
	padding: 8px;
	border-radius: var(--ca-radio-chico);
	background: linear-gradient(180deg, #fbfbfb 0%, #f1f1f1 100%);
	box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .04);
	transition: box-shadow .18s ease, transform .18s ease;
}
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product:hover img {
	box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 109, 0, .25);
	transform: translateY(-2px);
}
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product a,
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product a:hover { text-decoration: none; }
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 6px;
	padding: 0;
	font-family: var(--ca-display);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.25;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--ca-negro);
	overflow-wrap: anywhere;
}
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product .price,
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product .price ins,
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product .price .amount {
	margin: 0 0 10px;
	font-family: var(--ca-display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	color: var(--ca-naranja);
}
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product .price del,
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product .price del .amount {
	display: block;
	margin: 0 0 2px;
	font-size: 13px;
	font-weight: 400;
	color: var(--ca-gris-texto);
}
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product .price ins { text-decoration: none; }
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product .button,
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product a.button.add_to_cart_button {
	margin-top: auto;
	min-height: 44px;
	padding: 8px 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--ca-negro);
	border-radius: 999px;
	background: var(--ca-negro);
	color: var(--ca-blanco);
	font-family: var(--ca-display);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: background-color .15s, border-color .15s;
}
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product .button:hover {
	background: var(--ca-naranja);
	border-color: var(--ca-naranja);
	color: var(--ca-blanco);
}
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product .button.loading,
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product .added_to_cart { font-family: var(--ca-texto); }
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product .added_to_cart {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	color: var(--ca-naranja-oscuro);
	text-decoration: underline;
}
.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product .onsale {
	top: 8px;
	right: 8px;
	left: auto;
	min-width: 0;
	min-height: 0;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ca-naranja);
	color: var(--ca-blanco);
	font-family: var(--ca-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.4;
	text-transform: uppercase;
}
@media (max-width: 1024px) {
	.woocommerce div.product .ca-pdp .ca-relacionados ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.woocommerce div.product .ca-pdp .ca-relacionados ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
	.woocommerce div.product .ca-pdp .ca-relacionados .related > h2,
	.woocommerce div.product .ca-pdp .ca-relacionados .elementor-products-grid > h2 { font-size: 20px; }
	.woocommerce div.product .ca-pdp .ca-relacionados ul.products li.product .woocommerce-loop-product__title { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
	.ca-card { --ca-cols: 3; }
}
@media (max-width: 1024px) {
	.woocommerce div.product .ca-pdp form.variations_form table.variations th.label label { font-size: 22px; }
	.ca-pill { font-size: 19px; padding: 6px 14px; }
	.woocommerce div.product .ca-pdp table.shop_attributes tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ca-card { --ca-cols: 2; }
	.ca-price ins { font-size: 30px; }
	.ca-price del { font-size: 20px; }
}
@media (max-width: 767px) {
	.woocommerce div.product .ca-pdp .woocommerce-tabs.wc-tabs-wrapper { padding: 14px 14px 18px; border-radius: 12px; }
	.woocommerce div.product .ca-pdp .woocommerce-tabs ul.wc-tabs { gap: 8px; }
	.woocommerce div.product .ca-pdp .woocommerce-tabs ul.wc-tabs li a { font-size: 11px; padding: 8px 14px; min-height: 40px; }
	.woocommerce div.product .ca-pdp table.shop_attributes tbody { grid-template-columns: minmax(0, 1fr); }
	.ca-carousel { grid-template-columns: minmax(0, 1fr); }
	.ca-carousel .ca-arrow { display: none; }
	.ca-track { padding: 6px 0 10px; scroll-padding-left: 0; }
	/* 1 tarjeta y un asomo de la siguiente: invita al swipe. */
	.ca-card { --ca-cols: 1; flex-basis: 84%; }
	.ca-price ins { font-size: 32px; }
	.ca-card-name { font-size: 17px; }
	.ca-card-btn { font-size: 17px; min-height: 48px; }
	.ca-thumbs .flex-control-nav > li,
	.ca-thumbs .flex-control-nav > li img { width: 64px; max-width: 64px; }
	.ca-thumbs .flex-control-nav > li img { height: 64px; }
}
@media (max-width: 400px) {
	.ca-pill { font-size: 17px; padding: 6px 12px; }
	.woocommerce div.product .ca-pdp form.variations_form table.variations th.label label { font-size: 20px; }
}


/* Si el producto tiene pocos atributos, 4 columnas dejan la mitad vacía:
   la grilla se ajusta a la cantidad real de filas. */
.woocommerce div.product .ca-pdp table.shop_attributes.ca-pocos-2 tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.woocommerce div.product .ca-pdp table.shop_attributes.ca-pocos-1 tbody { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
.woocommerce div.product .ca-pdp table.shop_attributes.ca-pocos-1,
.woocommerce div.product .ca-pdp table.shop_attributes.ca-pocos-2 { margin: 0 auto; }