/* Afina Recommendations — estilos frontend.
   Colores de marca: amarillo #FFD931, azul #2E508A, gris #686868. */

.afina-reco {
	margin: 2.5em 0;
	clear: both;
}

.afina-reco__title {
	font-size: 1.4em;
	margin: 0 0 1em;
	color: #2E508A;
	position: relative;
	padding-bottom: .4em;
}

.afina-reco__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: #FFD931;
	border-radius: 2px;
}

.afina-reco__loading {
	color: #686868;
	font-size: .95em;
	padding: 1em 0;
}

/* ---- Comprados juntos frecuentemente (FBT) ---- */

.afina-reco-fbt__items {
	list-style: none;
	margin: 0 0 1.2em;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}

.afina-reco-fbt__item {
	position: relative;
	display: flex;
	align-items: center;
}

.afina-reco-fbt__item > label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 150px;
	padding: 12px;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	cursor: pointer;
	text-align: center;
	transition: border-color .15s ease, box-shadow .15s ease;
	background: #fff;
	height: 100%;
}

.afina-reco-fbt__item > label:hover {
	border-color: #2E508A;
	box-shadow: 0 2px 10px rgba(46, 80, 138, .12);
}

.afina-reco-fbt__check {
	align-self: flex-start;
	margin: 0 0 2px;
	accent-color: #2E508A;
}

.afina-reco-fbt__thumb img {
	max-width: 90px;
	height: auto;
	margin: 0 auto;
}

.afina-reco-fbt__name {
	font-size: .82em;
	line-height: 1.25;
	color: #333;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.afina-reco-fbt__price {
	font-weight: 700;
	color: #2E508A;
	font-size: .9em;
}

.afina-reco-fbt__item.is-current > label {
	border-color: #FFD931;
	box-shadow: 0 0 0 2px rgba(255, 217, 49, .35);
}

.afina-reco-fbt__plus {
	font-size: 1.6em;
	font-weight: 700;
	color: #686868;
	padding: 0 2px;
	align-self: center;
}

.afina-reco-fbt__footer {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.afina-reco-fbt__total {
	color: #686868;
	font-size: .95em;
}

.afina-reco-fbt__total-value {
	color: #2E508A;
	font-size: 1.15em;
}

.afina-reco-fbt__add {
	background: #FFD931 !important;
	color: #222 !important;
	border: none !important;
	font-weight: 700 !important;
}

.afina-reco-fbt__add:hover {
	background: #ffcf00 !important;
}

.afina-reco-fbt__add[disabled] {
	opacity: .6;
	cursor: not-allowed;
}

.afina-reco-fbt__msg {
	margin-top: .8em;
	font-size: .9em;
	min-height: 1.2em;
}

.afina-reco-fbt__msg.is-ok { color: #1a7f37; }
.afina-reco-fbt__msg.is-error { color: #b32d2e; }

@media (max-width: 600px) {
	.afina-reco-fbt__item > label { width: 120px; }
	.afina-reco-fbt__thumb img { max-width: 70px; }
}

/* ---- Carrusel de recomendaciones (estilo cards del buscador) ---- */

.afina-reco-carousel {
	position: relative;
}

.afina-reco-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 2px 12px;
	-webkit-overflow-scrolling: touch;
}

.afina-reco-track::-webkit-scrollbar { height: 6px; }
.afina-reco-track::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 3px; }

.afina-reco-card {
	flex: 0 0 auto;
	width: 220px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	padding: 16px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.afina-reco-card:hover {
	border-color: #2E508A;
	box-shadow: 0 4px 14px rgba(46, 80, 138, .12);
}

.afina-reco-card__imglink {
	display: block;
	text-align: center;
	margin-bottom: 12px;
}

.afina-reco-card__imglink img {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.afina-reco-card__cat {
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #9a9a9a;
	font-weight: 600;
	margin-bottom: 6px;
}

.afina-reco-card__title {
	font-size: 14px;
	line-height: 1.3;
	color: #333;
	font-weight: 600;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 36px;
	margin-bottom: 10px;
}

.afina-reco-card__title:hover { color: #2E508A; }

.afina-reco-card__prices { margin-top: auto; margin-bottom: 12px; }

.afina-reco-card__saleline {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 2px;
}

.afina-reco-card__old {
	color: #9a9a9a;
	text-decoration: line-through;
	font-size: 12px;
}

.afina-reco-card__badge {
	background: #FFD931;
	color: #222;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 4px;
}

.afina-reco-card__price {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: #2E508A;
	margin-top: 4px;
}

.afina-reco-card__price em {
	font-size: 11px;
	font-weight: 400;
	color: #9a9a9a;
	font-style: normal;
	margin-left: 4px;
}

.afina-reco-card__price .amount { color: #2E508A; }

.afina-reco-card__btn {
	display: block;
	text-align: center;
	background: #2E508A;
	color: #fff;
	text-decoration: none;
	padding: 10px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	transition: background .15s ease, color .15s ease;
}

.afina-reco-card__btn:hover { background: #FFD931; color: #222; }

/* Flechas de navegación */
.afina-reco-nav {
	position: absolute;
	top: 42%;
	transform: translateY(-50%);
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid #e0e0e0;
	background: #fff;
	color: #2E508A;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.afina-reco-nav:hover { background: #2E508A; color: #fff; }
.afina-reco-nav--prev { left: -8px; }
.afina-reco-nav--next { right: -8px; }
.afina-reco-nav[disabled] { opacity: 0; pointer-events: none; }

@media (max-width: 600px) {
	.afina-reco-card { width: 160px; padding: 12px; }
	.afina-reco-nav { display: none; }
}