/**
 * Recomendaciones de la ficha de producto: "Complementa tu compra", "Productos similares"
 * y "Vistos recientemente".
 *
 * Todos los selectores van con el prefijo .sym-rec para no afectar al resto del sitio.
 * Lee los tokens de assets/css/sym-tokens.css (los encola la plantilla de la ficha) y trae
 * valores de respaldo, así que también se ve bien sin ellos.
 */

.sym-rec {
	--rec-text: var(--sym-color-text, #111313);
	--rec-muted: var(--sym-color-text-muted, #5e6565);
	--rec-bg: var(--sym-color-bg, #fff);
	--rec-subtle: var(--sym-color-bg-subtle, #f2f4f4);
	--rec-media-bg: var(--sym-color-neutral-50, #f7f8f8);
	--rec-border: var(--sym-color-border, #e3e6e6);
	--rec-border-strong: var(--sym-color-border-strong, #c9cece);
	--rec-accent: var(--sym-color-accent, #ffc300);
	--rec-accent-hover: var(--sym-color-yellow-hover, #e6af00);
	--rec-on-accent: var(--sym-color-on-accent, #000);
	--rec-sale: var(--sym-color-price-sale, #c62828);
	--rec-regular: var(--sym-color-price-regular, #5e6565);
	--rec-danger: var(--sym-color-danger, #c62828);
	--rec-out-bg: var(--sym-color-neutral-800, #222525);
	--rec-addi: var(--sym-color-info, #1f57d6);
	--rec-font: var(--sym-font-body, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
	--rec-radius: var(--sym-radius-md, 8px);
	--rec-radius-lg: var(--sym-radius-lg, 16px);
	--rec-radius-sm: var(--sym-radius-sm, 4px);
	--rec-shadow: var(--sym-shadow-md, 0 4px 12px rgb(0 0 0 / 0.1));
	--rec-shadow-sm: var(--sym-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.08));
	--rec-tap: var(--sym-tap-target, 2.75rem);
	--rec-gap: var(--sym-space-4, 1rem);
	--rec-fast: var(--sym-motion-fast, 120ms);
	--rec-base: var(--sym-motion-base, 200ms);
	--rec-ease: var(--sym-motion-ease, cubic-bezier(0.2, 0, 0, 1));

	box-sizing: border-box;
	font-family: var(--rec-font);
	color: var(--rec-text);
}
.sym-rec *,
.sym-rec *::before,
.sym-rec *::after { box-sizing: inherit; }
.sym-rec[hidden],
.sym-rec [hidden] { display: none !important; }

.sym-rec-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sym-rec-icon {
	width: 20px;
	height: 20px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Encabezados ---------- */
.sym-rec__head { margin-bottom: var(--sym-space-4, 1rem); }
.sym-rec__head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sym-space-3, 0.75rem);
}
.sym-rec .sym-rec__title {
	margin: 0;
	font-family: var(--rec-font);
	font-size: var(--sym-font-size-xl, clamp(1.5rem, 1.333rem + 0.741vw, 2rem));
	font-weight: var(--sym-font-weight-bold, 700);
	line-height: var(--sym-line-height-snug, 1.3);
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--rec-text);
}
.sym-rec .sym-rec__title--sm { font-size: var(--sym-font-size-md, 1.125rem); }
.sym-rec__subtitle {
	margin: var(--sym-space-1, 0.25rem) 0 0;
	font-size: var(--sym-font-size-sm, 0.875rem);
	color: var(--rec-muted);
}

/* ---------- Botones ---------- */
.sym-rec .sym-rec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sym-space-1, 0.25rem);
	width: 100%;
	min-height: var(--rec-tap);
	margin: 0;
	padding: 0 var(--sym-space-3, 0.75rem);
	border: 2px solid transparent;
	border-radius: var(--rec-radius);
	background: transparent;
	font-family: var(--rec-font);
	font-size: var(--sym-font-size-sm, 0.875rem);
	font-weight: var(--sym-font-weight-bold, 700);
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	color: var(--rec-text);
	cursor: pointer;
	transition: background-color var(--rec-fast) var(--rec-ease), border-color var(--rec-fast) var(--rec-ease);
}
.sym-rec .sym-rec-btn--primary { background: var(--rec-accent); color: var(--rec-on-accent); }
.sym-rec .sym-rec-btn--primary:hover { background: var(--rec-accent-hover); color: var(--rec-on-accent); }
.sym-rec .sym-rec-btn--outline { border-color: var(--rec-text); background: var(--rec-bg); }
.sym-rec .sym-rec-btn--outline:hover { background: var(--rec-subtle); }
.sym-rec .sym-rec-btn--ghost { border-color: var(--rec-border-strong); background: var(--rec-bg); }
.sym-rec .sym-rec-btn--ghost:hover { border-color: var(--rec-text); }
.sym-rec .sym-rec-btn:focus-visible,
.sym-rec .sym-rec-carousel__btn:focus-visible,
.sym-rec .sym-rec-carousel__track:focus-visible {
	outline: var(--sym-focus-outline, 2px solid #000);
	outline-offset: var(--sym-focus-offset, 2px);
	box-shadow: var(--sym-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 0 6px #ffc300);
}
/* Estados del "añadir al carrito" por AJAX de WooCommerce. */
.sym-rec .sym-rec-btn.loading { opacity: 0.6; pointer-events: none; }
.sym-rec .sym-rec-btn.loading::after,
.sym-rec .sym-rec-btn.added::after { display: none; }
.sym-rec .sym-rec-card__cta .added_to_cart {
	display: block;
	margin-top: var(--sym-space-1, 0.25rem);
	font-size: var(--sym-font-size-xs, 0.75rem);
	font-weight: var(--sym-font-weight-semibold, 600);
	text-align: center;
	color: var(--rec-text);
	text-decoration: underline;
}

/* ---------- Insignias, precio y Addi ---------- */
.sym-rec-badge {
	display: inline-block;
	padding: 2px var(--sym-space-2, 0.5rem);
	border-radius: var(--rec-radius-sm);
	font-size: var(--sym-font-size-xs, 0.75rem);
	font-weight: var(--sym-font-weight-bold, 700);
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.sym-rec-badge--sale { background: var(--rec-accent); color: var(--rec-on-accent); }
.sym-rec-badge--out { background: var(--rec-out-bg); color: #fff; }

.sym-rec .sym-rec-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--sym-space-2, 0.5rem);
	margin: 0;
	font-size: var(--sym-font-size-sm, 0.875rem);
}
.sym-rec .sym-rec-price__current {
	font-size: var(--sym-font-size-md, 1.125rem);
	font-weight: var(--sym-font-weight-bold, 700);
	color: var(--rec-text);
	text-decoration: none;
	background: none;
}
.sym-rec .sym-rec-price__current--sale { color: var(--rec-sale); }
.sym-rec .sym-rec-price__regular { font-size: var(--sym-font-size-sm, 0.875rem); color: var(--rec-regular); }
.sym-rec .sym-rec-addi {
	margin: 0;
	font-size: var(--sym-font-size-xs, 0.75rem);
	line-height: 1.4;
	color: var(--rec-text);
}
.sym-rec .sym-rec-addi strong,
.sym-rec .sym-rec-addi__brand { color: var(--rec-addi); font-weight: 800; }

/* ---------- Tarjeta (grande) ---------- */
.sym-rec-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--rec-bg);
}
.sym-rec-card__media {
	position: relative;
	aspect-ratio: 1 / 1; /* proporción fija: sin saltos de diseño */
	overflow: hidden;
	border-radius: var(--rec-radius);
	background: var(--rec-media-bg);
}
.sym-rec-card__media > a { position: absolute; inset: 0; display: block; }
.sym-rec .sym-rec-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	mix-blend-mode: multiply; /* fondos blancos de las fotos sobre el gris suave */
	transition: transform var(--rec-base) var(--rec-ease);
}
@media (hover: hover) {
	.sym-rec-card:hover .sym-rec-card__img { transform: scale(1.04); }
}
.sym-rec-card.is-out .sym-rec-card__img { opacity: 0.55; }
.sym-rec-card__badges {
	position: absolute;
	top: var(--sym-space-2, 0.5rem);
	left: var(--sym-space-2, 0.5rem);
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sym-space-1, 0.25rem);
	pointer-events: none;
}
.sym-rec-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--sym-space-1, 0.25rem);
	padding-top: var(--sym-space-3, 0.75rem);
}
.sym-rec .sym-rec-card__brand {
	margin: 0;
	font-size: var(--sym-font-size-xs, 0.75rem);
	font-weight: var(--sym-font-weight-semibold, 600);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rec-muted);
}
.sym-rec .sym-rec-card__title {
	display: -webkit-box;
	min-height: calc(2em * 1.3); /* reserva dos líneas: precios alineados */
	margin: 0;
	overflow: hidden;
	font-family: var(--rec-font);
	font-size: var(--sym-font-size-sm, 0.875rem);
	font-weight: var(--sym-font-weight-medium, 500);
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
@media (min-width: 768px) {
	.sym-rec .sym-rec-card--default .sym-rec-card__title { font-size: var(--sym-font-size-base, 1rem); }
}
.sym-rec .sym-rec-card__title a { color: inherit; text-decoration: none; }
.sym-rec .sym-rec-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; } /* toda la tarjeta es clicable */
.sym-rec .sym-rec-card__title a:focus-visible { outline: none; box-shadow: none; }
.sym-rec-card:has(.sym-rec-card__title a:focus-visible) {
	outline: var(--sym-focus-outline, 2px solid #000);
	outline-offset: 4px;
	border-radius: var(--rec-radius);
}
@media (hover: hover) {
	.sym-rec .sym-rec-card:hover .sym-rec-card__title a { text-decoration: underline; text-underline-offset: 2px; }
}
.sym-rec .sym-rec-card__stock {
	margin: 0;
	font-size: var(--sym-font-size-xs, 0.75rem);
	font-weight: var(--sym-font-weight-semibold, 600);
	color: var(--rec-danger);
}
.sym-rec-card__cta {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding-top: var(--sym-space-3, 0.75rem);
}

/* ---------- Complementa tu compra ---------- */
.sym-rec--complements {
	container-type: inline-size;
	margin: var(--sym-space-5, 1.5rem) 0;
	padding: var(--sym-space-4, 1rem);
	border: 1px solid var(--rec-border);
	border-radius: var(--rec-radius-lg);
	background: var(--rec-subtle);
}
.sym-rec--complements .sym-rec__head { margin-bottom: var(--sym-space-3, 0.75rem); }
.sym-rec .sym-rec-complements {
	display: grid;
	grid-auto-columns: minmax(16rem, 82%);
	grid-auto-flow: column;
	gap: var(--sym-space-3, 0.75rem);
	margin: 0 calc(var(--sym-space-4, 1rem) * -1);
	padding: 2px var(--sym-space-4, 1rem) var(--sym-space-2, 0.5rem);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--sym-space-4, 1rem);
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	list-style: none;
}
.sym-rec-complements__item { margin: 0; padding: 0; scroll-snap-align: start; }
.sym-rec-complements__item::before { display: none; }
@container (min-width: 30rem) {
	.sym-rec .sym-rec-complements {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin: 0;
		padding: 0;
		overflow: visible;
	}
}
@container (min-width: 56rem) {
	.sym-rec .sym-rec-complements { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Tarjeta compacta: imagen a la izquierda, datos y botón a la derecha. */
.sym-rec-card--compact {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: var(--sym-space-3, 0.75rem);
	align-items: start;
	height: 100%;
	padding: var(--sym-space-3, 0.75rem);
	border: 1px solid var(--rec-border);
	border-radius: var(--rec-radius);
	box-shadow: var(--rec-shadow-sm);
	transition: box-shadow var(--rec-base) var(--rec-ease), border-color var(--rec-base) var(--rec-ease);
}
@media (hover: hover) {
	.sym-rec-card--compact:hover { border-color: var(--rec-border-strong); box-shadow: var(--rec-shadow); }
}
.sym-rec-card--compact .sym-rec-card__media { border-radius: var(--rec-radius-sm); background: var(--rec-bg); }
.sym-rec-card--compact .sym-rec-card__badges { top: 2px; left: 2px; }
.sym-rec-card--compact .sym-rec-badge { padding: 0 4px; font-size: 0.6875rem; }
.sym-rec-card--compact .sym-rec-card__body { gap: 2px; padding-top: 0; }
.sym-rec .sym-rec-card--compact .sym-rec-card__brand { font-size: 0.6875rem; }
.sym-rec .sym-rec-card--compact .sym-rec-price__current { font-size: var(--sym-font-size-base, 1rem); }
.sym-rec .sym-rec-card--compact .sym-rec-price__regular { font-size: var(--sym-font-size-xs, 0.75rem); }
.sym-rec-card--compact .sym-rec-card__cta { padding-top: var(--sym-space-2, 0.5rem); }
.sym-rec .sym-rec-card--compact .sym-rec-btn { min-height: 2.5rem; font-size: var(--sym-font-size-sm, 0.875rem); }
@media (hover: hover) {
	.sym-rec-card--compact:hover .sym-rec-card__img { transform: none; }
}
@container (min-width: 56rem) {
	/* Con mucho espacio (bloque a todo el ancho) la tarjeta compacta pasa a vertical. */
	.sym-rec-card--compact { grid-template-columns: minmax(0, 1fr); }
	.sym-rec-card--compact .sym-rec-card__media { max-width: 10rem; width: 100%; margin-inline: auto; }
}

/* ---------- Carruseles: Productos similares y Vistos recientemente ---------- */
.sym-rec--similar,
.sym-rec--recent {
	margin: var(--sym-space-section, clamp(2.5rem, 1.667rem + 3.7vw, 5rem)) 0 0;
}
.sym-rec-carousel { container-type: inline-size; }
.sym-rec-carousel__nav { display: flex; flex: none; gap: var(--sym-space-2, 0.5rem); }
.sym-rec .sym-rec-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--rec-tap);
	height: var(--rec-tap);
	margin: 0;
	padding: 0;
	border: 1px solid var(--rec-border-strong);
	border-radius: 999px;
	background: var(--rec-bg);
	color: var(--rec-text);
	cursor: pointer;
	transition: background-color var(--rec-fast) var(--rec-ease), border-color var(--rec-fast) var(--rec-ease);
}
.sym-rec .sym-rec-carousel__btn:hover:not(:disabled) { border-color: var(--rec-text); background: var(--rec-subtle); }
.sym-rec .sym-rec-carousel__btn:disabled { opacity: 0.35; cursor: default; }

.sym-rec .sym-rec-carousel__track {
	--rec-per-view: 1.3;
	display: grid;
	grid-auto-columns: calc((100% - (var(--rec-per-view) - 1) * var(--rec-gap)) / var(--rec-per-view));
	grid-auto-flow: column;
	gap: var(--rec-gap);
	margin: 0;
	padding: 4px 2px var(--sym-space-3, 0.75rem);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	list-style: none;
}
.sym-rec .sym-rec-carousel__track::-webkit-scrollbar { display: none; }
.sym-rec-carousel__item { margin: 0; padding: 0; scroll-snap-align: start; min-width: 0; }
.sym-rec-carousel__item::before { display: none; }

@container (min-width: 34rem) {
	.sym-rec .sym-rec-carousel__track { --rec-per-view: 2; --rec-gap: var(--sym-space-5, 1.5rem); }
}
@container (min-width: 56rem) {
	.sym-rec .sym-rec-carousel__track { --rec-per-view: 3; }
}
@container (min-width: 74rem) {
	.sym-rec .sym-rec-carousel__track { --rec-per-view: 4; }
}
/* Vistos recientemente: tarjetas un poco más pequeñas. */
@container (min-width: 34rem) {
	.sym-rec .sym-rec-carousel__track--small { --rec-per-view: 3; }
}
@container (min-width: 56rem) {
	.sym-rec .sym-rec-carousel__track--small { --rec-per-view: 5; }
}
@container (min-width: 74rem) {
	.sym-rec .sym-rec-carousel__track--small { --rec-per-view: 6; }
}
.sym-rec--recent .sym-rec__title { font-size: var(--sym-font-size-lg, 1.375rem); }
.sym-rec--recent .sym-rec-price__current { font-size: var(--sym-font-size-base, 1rem); }
@container (max-width: 33.99rem) {
	.sym-rec .sym-rec-carousel__track--small { --rec-per-view: 2.3; --rec-gap: var(--sym-space-3, 0.75rem); }
}

@media (prefers-reduced-motion: reduce) {
	.sym-rec *,
	.sym-rec .sym-rec-carousel__track { scroll-behavior: auto; transition: none !important; }
	.sym-rec-card:hover .sym-rec-card__img { transform: none; }
}

/* Celular: título más contenido para que quepa en una línea junto a las flechas. */
@container (max-width: 33.99rem) {
	.sym-rec .sym-rec-carousel .sym-rec__title { font-size: var(--sym-font-size-lg, 1.25rem); }
}

/* Productos similares en escritorio: grilla de 4 con "Ver más" (en vez de carrusel). */
.sym-rec .sym-rec-more { display: none; }
@media (min-width: 1024px) {
	.sym-rec--similar .sym-rec-carousel__nav { display: none !important; }
	.sym-rec--similar .sym-rec-carousel__track {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-columns: auto;
		overflow: visible;
		scroll-snap-type: none;
	}
	.sym-rec--similar:not(.is-expanded) .sym-rec-carousel__item:nth-child(n+5) { display: none; }
	.sym-rec .sym-rec-more { display: flex; justify-content: center; margin-top: var(--sym-space-4, 1rem); }
	.sym-rec .sym-rec-more .sym-rec-btn { width: auto; min-width: 16rem; padding-inline: var(--sym-space-6, 2rem); border-radius: 999px; gap: 0.5rem; }
	.sym-rec .sym-rec-more .sym-rec-icon { width: 1.125rem; height: 1.125rem; transition: transform 0.2s ease; }
	.sym-rec--similar.is-expanded .sym-rec-more .sym-rec-icon { transform: rotate(180deg); }
}