/**
 * Estilos front-end de "Productos" (rbl-web-cooking): slider de un
 * producto a la vez con flechas, y popup de detalle completo.
 */

.rblweb-prod-slider {
	display: flex;
	align-items: center;
	gap: 20px;
}

.rblweb-prod-arrow {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
}

/* Anula el resaltado nativo de :hover/:active/:focus que ponen algunos
   navegadores en los <button> (el "marrón claro" de fondo) — el único
   efecto de hover queda a cargo de .rblweb-prod-arrow-svg de abajo. */
.rblweb-prod-arrow:hover,
.rblweb-prod-arrow:active,
.rblweb-prod-arrow:focus,
.rblweb-prod-arrow:focus-visible {
	background: none;
	box-shadow: none;
}

.rblweb-prod-arrow-svg {
	width: 100%;
	height: 100%;
	transition: transform 0.2s ease;
}

.rblweb-prod-arrow:hover .rblweb-prod-arrow-svg,
.rblweb-prod-arrow:focus-visible .rblweb-prod-arrow-svg {
	transform: scale( 1.08 );
}

.rblweb-prod-arrow-prev:hover .rblweb-prod-arrow-svg,
.rblweb-prod-arrow-prev:focus-visible .rblweb-prod-arrow-svg {
	transform: scaleX( -1 ) scale( 1.08 );
}

/* El botón "siguiente" (flecha original, apunta a la derecha) se usa tal
   cual; "anterior" reutiliza el mismo SVG espejado, en vez de un segundo
   archivo. */
.rblweb-prod-arrow-prev .rblweb-prod-arrow-svg {
	transform: scaleX( -1 );
}

.rblweb-prod-slides {
	position: relative;
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.rblweb-prod-slides-track {
	display: flex;
	transition: transform 0.55s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.rblweb-prod-slide {
	flex: 0 0 100%;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

.rblweb-prod-image-wrap {
	position: relative;
	flex: 0 0 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
}

.rblweb-prod-blob {
	position: absolute;
	inset: 8% 15%;
	background: var( --rblweb-prod-blob-color, #eee );
	border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
	z-index: 0;
	display: none !important;
}

.rblweb-prod-image {
	position: relative;
	z-index: 1;
	max-width: 100%;
	max-height: 400px;
	height: auto;
	display: block;
}

.rblweb-prod-content {
	flex: 1 1 400px;
	display: flex;
	align-items: flex-start;
	gap: 24px;
	min-width: 0;
}

/* 70/30 entre la descripción y la columna del círculo/kcal/formatos
   (la imagen queda afuera de esta cuenta, es un flex item aparte). */
.rblweb-prod-info {
	flex: 0 0 70%;
	max-width: 70%;
	min-width: 0;
}

.rblweb-prod-side {
	flex: 0 0 30%;
	max-width: 30%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
}

.rblweb-prod-eyebrow {
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: #8a7355;
	margin: 0 0 4px;
}

.rblweb-prod-title {
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 12px;
}

.rblweb-prod-description {
	font-size: 14px;
	line-height: 1.6;
	color: #444;
	margin: 0 0 14px;
}

.rblweb-prod-formatos {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #e2704f;
	line-height: 1.6;
	margin: 0;
}

.rblweb-prod-open-popup {
	background: #f85e2b;
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 10px 26px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

.rblweb-prod-badge {
	position: relative;
	flex-shrink: 0;
	width: 96px;
	height: 96px;
}

.rblweb-prod-badge-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Un poco más chico que el contenedor (no 100%), para que el borde del
   sticker no quede pegado/cortado contra el límite de la caja. */
.rblweb-prod-badge-svg {
	width: 88%;
	height: 88%;
	color: var( --rblweb-prod-badge-color, #f85e2b );
}

/* Fuerza el color del término incluso si el SVG subido trae su propio
   fill/stroke fijo por atributo — currentColor toma el color de arriba. */
.rblweb-prod-badge-svg * {
	fill: currentColor !important;
	stroke: currentColor !important;
}

/*
 * Si el ícono subido tiene más de una forma (ej. sticker-etapa.svg: la
 * forma principal + el "doblez" de la esquina), la última se trata como
 * sombra en vez de teñirla del mismo color — negro semitransparente,
 * para que el relieve se note sin importar qué color elija el cliente.
 * Un ícono de una sola forma (:only-child) no entra acá y queda con
 * currentColor normal.
 */
.rblweb-prod-badge-svg path:not( :only-child ):last-child {
	fill: rgba( 0, 0, 0, 0.8 ) !important;
}

.rblweb-prod-badge-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	text-align: center;
	padding: 0 10px;
}

.rblweb-prod-kcal {
	font-size: 12px;
}

.rblweb-prod-kcal-label {
	display: block;
	letter-spacing: 0.05em;
	color: #888;
}

.rblweb-prod-kcal-value {
	display: block;
	font-weight: 700;
	color: #333;
	margin-top: 2px;
}

/* Popup de detalle */
.rblweb-prod-popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.rblweb-prod-popup.is-open {
	display: flex;
}

.rblweb-prod-popup-overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.6 );
}

.rblweb-prod-popup-content {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 32px;
	max-width: 480px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
}

.rblweb-prod-popup-close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #666;
}

.rblweb-prod-popup-image {
	display: block;
	max-width: 200px;
	width: 100%;
	height: auto;
	margin: 0 auto 16px;
}

.rblweb-prod-popup-section {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 2px solid #ccc;
}

.rblweb-prod-popup-section-title {
	margin: 0 0 6px;
	padding: 4px 8px;
	background: #c0c0c0;
	border-radius: 4px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #333;
}

.rblweb-prod-popup-valor-nutricional + .rblweb-prod-popup-section-title {
	margin-top: 10px;
}

.rblweb-prod-popup-composicion,
.rblweb-prod-popup-valor-nutricional {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #555;
}

.rblweb-prod-popup-kcal {
	font-size: 13px;
	color: #555;
	margin: 8px 0 0;
}

.rblweb-prod-popup-formatos {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rblweb-prod-popup-formatos li {
	padding: 8px 0;
	border-bottom: 1px solid #eee;
	font-size: 14px;
}

body.rblweb-prod-popup-lock {
	overflow: hidden;
}

@media ( max-width: 1024px ) and ( min-width: 601px ) {
	.rblweb-prod-image-wrap {
		flex: 0 0 100%;
	}
}

@media ( max-width: 600px ) {
	.rblweb-prod-slide {
		flex-direction: column;
		text-align: center;
	}

	.rblweb-prod-image-wrap {
		padding-bottom: 16px;
		margin-bottom: 20px;
	}

	.rblweb-prod-content {
		flex-direction: column;
		align-items: center;
	}

	.rblweb-prod-info,
	.rblweb-prod-side {
		flex-basis: auto;
		max-width: 100%;
	}

	/* "Ver más" pasa a ser lo primero dentro de .rblweb-prod-info, así
	   queda justo después de la imagen y antes de subtítulo/título/
	   descripción — sin tocar el orden del HTML. */
	.rblweb-prod-info {
		display: flex;
		flex-direction: column;
	}

	.rblweb-prod-open-popup {
		order: -1;
		margin-top: 20px;
		margin-bottom: 14px;
	}

	.rblweb-prod-badge {
		margin: 0 auto;
	}
}