/*
 * Los contenedores que JavaScript debe recolocar se ocultan hasta que están
 * colocados: el fallback y la posición final cuando la imprime el hook del tema.
 * Las posiciones de resumen y metadatos no se ocultan.
 */
html.wc-cross-sells-js .wc-custom-cross-sells-container[data-wc-cross-sells-position]:not(.wc-cross-sells-positioned),
html.wc-cross-sells-js .wc-custom-cross-sells-container[data-wc-cross-sells-cart-fallback]:not(.wc-cross-sells-positioned) {
	display: none !important;
}

.wc-custom-cross-sells-container {
	--wc-custom-cross-sells-title-font-size: 24px;
	--wc-custom-cross-sells-columns: 4;
	box-sizing: border-box;
	flex-basis: 100%;
	grid-column: 1 / -1;
	margin: 2rem 0;
	max-width: 100%;
	width: 100%;
}

.wc-custom-cross-sells--columns-1 ul.products {
	--wc-custom-cross-sells-columns: 1;
}

.wc-custom-cross-sells--columns-2 ul.products {
	--wc-custom-cross-sells-columns: 2;
}

.wc-custom-cross-sells--columns-3 ul.products {
	--wc-custom-cross-sells-columns: 3;
}

.wc-custom-cross-sells--columns-4 ul.products {
	--wc-custom-cross-sells-columns: 4;
}

.wc-custom-cross-sells--columns-5 ul.products {
	--wc-custom-cross-sells-columns: 5;
}

.wc-custom-cross-sells--columns-6 ul.products {
	--wc-custom-cross-sells-columns: 6;
}

.wc-custom-cross-sells-container *,
.wc-custom-cross-sells-container *::before,
.wc-custom-cross-sells-container *::after {
	box-sizing: border-box;
}

.wc-custom-cross-sells-container .wc-custom-cross-sells__title {
	font-size: var(--wc-custom-cross-sells-title-font-size, 24px);
	line-height: 1.2;
	margin: 0 0 1rem;
	overflow-wrap: anywhere;
}

.wc-custom-cross-sells-container ul.products {
	align-items: stretch;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(var(--wc-custom-cross-sells-columns, 4), minmax(0, 1fr));
	justify-content: center;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	width: 100%;
}

.wc-custom-cross-sells-container ul.products::before,
.wc-custom-cross-sells-container ul.products::after {
	content: none;
	display: none;
}

/*
 * Modo automático en la posición final: el ancho disponible decide cuántas
 * tarjetas caben, con un tamaño controlado y el conjunto centrado. Así no se
 * estiran cuatro tarjetas gigantes en una fila ancha ni se apilan sin criterio.
 */
.wc-custom-cross-sells--auto-columns.wc-custom-cross-sells--position-woocommerce_after_single_product ul.products {
	grid-template-columns: repeat(auto-fit, minmax(160px, 200px));
	justify-content: center;
}

.wc-custom-cross-sells-container ul.products li.product {
	clear: none !important;
	display: flex;
	flex-direction: column;
	float: none !important;
	margin: 0 !important;
	max-width: none !important;
	min-width: 0;
	width: 100% !important;
}

/*
 * WooCommerce aplica width: 48% (o el porcentaje de sus columnas) con una
 * especificidad mayor que la regla anterior. Esta variante la supera para que
 * cada tarjeta ocupe su celda de la cuadrícula del plugin.
 */
body .wc-custom-cross-sells-container ul.products[class*="columns-"] li.product {
	clear: none !important;
	display: flex !important;
	flex-direction: column !important;
	float: none !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

.wc-custom-cross-sells-container ul.products li.product > .wc-custom-cross-sells__add-to-cart {
	margin-top: auto;
	padding-top: 0.75rem;
}

/* Carrusel: pista horizontal con scroll-snap y navegación opcional. */
.wc-custom-cross-sells__carousel-controls {
	display: none;
	gap: 0.5rem;
	justify-content: flex-end;
	margin: 0 0 0.75rem;
}

.wc-custom-cross-sells--carousel-ready .wc-custom-cross-sells__carousel-controls {
	display: flex;
}

.wc-custom-cross-sells__carousel-controls button {
	align-items: center;
	background: #fff;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font-size: 1.25rem;
	height: 2.25rem;
	justify-content: center;
	line-height: 1;
	padding: 0;
	width: 2.25rem;
}

.wc-custom-cross-sells__carousel-controls button:disabled {
	cursor: default;
	opacity: 0.35;
}

.wc-custom-cross-sells__carousel-controls button:focus-visible,
.wc-custom-cross-sells__carousel-track:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.wc-custom-cross-sells__carousel-track {
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
	.wc-custom-cross-sells__carousel-track {
		scroll-behavior: auto;
	}
}

.wc-custom-cross-sells--carousel .wc-custom-cross-sells__carousel-track ul.products {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	width: 100%;
}

.wc-custom-cross-sells--carousel .wc-custom-cross-sells__carousel-track ul.products li.product {
	flex: 0 0 calc(100% / var(--wc-custom-cross-sells-columns, 4));
	max-width: none;
	padding: 0 0.75rem;
	scroll-snap-align: start;
	width: calc(100% / var(--wc-custom-cross-sells-columns, 4));
}

body .wc-custom-cross-sells--carousel .wc-custom-cross-sells__carousel-track ul.products[class*="columns-"] li.product {
	width: calc(100% / var(--wc-custom-cross-sells-columns, 4)) !important;
}

.wc-custom-cross-sells-container ul.products li.product img {
	aspect-ratio: 1 / 1;
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: cover;
	width: 100%;
}

.wc-custom-cross-sells-container ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	line-height: 1.3;
	margin: 0.6rem 0;
	overflow-wrap: anywhere;
}

.wc-custom-cross-sells-container ul.products li.product .price {
	font-size: 0.95rem;
	overflow-wrap: anywhere;
}

.wc-custom-cross-sells__add-to-cart {
	margin-top: 0.75rem;
}

.wc-custom-cross-sells__add-to-cart .button {
	text-align: center;
	width: 100%;
}

/* Opción "sin botón": cubre el marcado clásico y el de bloques. */
.wc-custom-cross-sells--no-add-to-cart ul.products li.product .add_to_cart_button,
.wc-custom-cross-sells--no-add-to-cart ul.products li.product .added_to_cart,
.wc-custom-cross-sells--no-add-to-cart ul.products li.product .single_add_to_cart_button,
.wc-custom-cross-sells--no-add-to-cart ul.products li.product .product_type_simple,
.wc-custom-cross-sells--no-add-to-cart ul.products li.product .product_type_variable,
.wc-custom-cross-sells--no-add-to-cart ul.products li.product .product_type_grouped,
.wc-custom-cross-sells--no-add-to-cart ul.products li.product .product_type_external,
.wc-custom-cross-sells--no-add-to-cart ul.products li.product form.cart,
.wc-custom-cross-sells--no-add-to-cart ul.products li.product .wc-block-components-product-button,
.wc-custom-cross-sells--no-add-to-cart ul.products li.product .wp-block-woocommerce-add-to-cart-form {
	display: none !important;
}

.wc-custom-cross-sells--hide-image ul.products li.product a img,
.wc-custom-cross-sells--hide-image ul.products li.product img {
	display: none !important;
}

.wc-custom-cross-sells--hide-price ul.products li.product .price {
	display: none !important;
}

@media (max-width: 768px) {
	.wc-custom-cross-sells-container ul.products {
		gap: 1rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wc-custom-cross-sells--columns-1 ul.products {
		grid-template-columns: minmax(0, 1fr);
	}

	.wc-custom-cross-sells--carousel .wc-custom-cross-sells__carousel-track ul.products {
		--wc-custom-cross-sells-columns: 2;
		gap: 0;
	}

	.wc-custom-cross-sells--carousel.wc-custom-cross-sells--columns-1 .wc-custom-cross-sells__carousel-track ul.products {
		--wc-custom-cross-sells-columns: 1;
	}
}

@media (max-width: 480px) {
	.wc-custom-cross-sells-container ul.products {
		grid-template-columns: minmax(0, 1fr);
	}

	.wc-custom-cross-sells--auto-columns.wc-custom-cross-sells--position-woocommerce_after_single_product ul.products {
		grid-template-columns: minmax(0, 1fr);
	}

	.wc-custom-cross-sells--carousel .wc-custom-cross-sells__carousel-track ul.products {
		--wc-custom-cross-sells-columns: 1;
	}
}