/*
 * Restaurant Orders Pro — hoja principal.
 *
 *  1. Base y accesibilidad
 *  2. Marco de la aplicación
 *  3. Botones y controles
 *  4. Cabecera
 *  5. Portada
 *  6. Paneles, píldoras y rejilla
 *  7. Plato destacado y ficha de producto
 *  8. Agregados
 *  9. Maridajes
 * 10. Panel de pedido
 * 11. Móvil: barra flotante, menú y navegación
 * 12. WooCommerce
 * 13. Estados, pie y utilidades
 * 14. Responsive
 *
 * Los colores, radios, sombras y tipografías provienen de las variables que
 * imprime inc/dynamic-css.php desde el panel del restaurante.
 */

/* 1. Base -------------------------------------------------------------- */

:root {
	--rop-line: #ececed;
	--rop-dash: #e1e1e6;
	--rop-shell-max: 1440px;
	--rop-order-width: 360px;
	--rop-header-height: 74px;
	--rop-mobile-nav-height: 64px;
	--rop-safe-bottom: env( safe-area-inset-bottom, 0px );
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--rop-page, #1d1d1d);
	color: var(--rop-ink, #141414);
	font-family: var(--rop-font-body);
	font-size: var(--rop-size-base, 16px);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

[hidden] {
	display: none !important;
}

h1, h2, h3, h4 {
	font-family: var(--rop-font-heading);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 0 0 .5em;
}

h1 { font-size: var(--rop-size-h1, 48px); }
h2 { font-size: var(--rop-size-h2, 26px); }
h3 { font-size: 1.1rem; }

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--rop-primary, #e4141b);
	outline-offset: 2px;
	border-radius: 8px;
}

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

.rop-skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 300;
	width: auto;
	height: auto;
	clip: auto;
	padding: .8rem 1.1rem;
	background: var(--rop-primary, #e4141b);
	color: #fff;
	border-radius: 12px;
}

.rop-label {
	display: block;
	margin: 0 0 .55rem;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--rop-muted, #8b8d93);
}

/* 2. Marco de la aplicación -------------------------------------------- */

.rop-page-pattern {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .5;
	background-image:
		radial-gradient( circle at 12% 20%, rgba( 255, 255, 255, .05 ) 0 2px, transparent 2px ),
		radial-gradient( circle at 78% 68%, rgba( 255, 255, 255, .05 ) 0 2px, transparent 2px );
	background-size: 160px 160px, 220px 220px;
}

.rop-shell {
	position: relative;
	z-index: 1;
	width: calc( 100% - 32px );
	max-width: var(--rop-shell-max);
	margin: 22px auto;
	padding: 16px;
	background: var(--rop-shell, #f4f4f5);
	border-radius: var(--rop-radius-lg, 32px);
	box-shadow: 0 30px 70px rgba( 0, 0, 0, .35 );
}

.rop-shell__body {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 16px;
	align-items: start;
	margin-top: 16px;
}

.rop-has-docked-cart .rop-shell__body {
	grid-template-columns: minmax( 0, 1fr ) var(--rop-order-width);
}

.rop-main {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* 3. Botones ----------------------------------------------------------- */

.rop-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: 52px;
	padding: 0 1.6rem;
	border: 0;
	border-radius: 999px;
	background: var(--rop-shell, #f4f4f5);
	color: var(--rop-ink, #141414);
	font-weight: 600;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.rop-btn:hover {
	text-decoration: none;
	transform: translateY( -1px );
}

.rop-btn:active {
	transform: translateY( 1px );
}

.rop-btn--primary {
	background: var(--rop-primary, #e4141b);
	color: #fff;
	box-shadow: 0 10px 24px rgba( var(--rop-primary-rgb, 228, 20, 27 ), .3 );
}

.rop-btn--ink {
	background: var(--rop-ink, #141414);
	color: #fff;
}

.rop-btn--wa {
	background: #25d366;
	color: #05300f;
}

.rop-btn--link {
	min-height: 40px;
	padding: 0 .4rem;
	background: none;
	color: var(--rop-muted, #8b8d93);
	font-weight: 500;
	font-size: .88rem;
}

.rop-btn--link:hover {
	color: var(--rop-primary, #e4141b);
}

.rop-btn--block {
	width: 100%;
}

.rop-btn[aria-disabled="true"] {
	opacity: .45;
	pointer-events: none;
	box-shadow: none;
}

.rop-no-animations *,
.rop-no-animations *::before {
	transition: none !important;
	animation: none !important;
}

/* 4. Cabecera ---------------------------------------------------------- */

.rop-header {
	background: var(--rop-surface, #fff);
	border-radius: 999px;
	box-shadow: var(--rop-shadow-sm);
}

.rop-sticky-header .rop-header {
	position: sticky;
	top: 16px;
	z-index: 60;
}

.rop-header__inner {
	display: flex;
	align-items: center;
	gap: clamp( 8px, 1.6vw, 18px );
	min-height: var(--rop-header-height);
	padding: 0 14px 0 26px;
}

.rop-header__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--rop-shell, #f4f4f5);
	cursor: pointer;
}

.rop-brand {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
}

.rop-brand:hover {
	text-decoration: none;
}

.rop-brand__logo {
	max-height: 42px;
	width: auto;
}

.rop-brand__name {
	font-family: var(--rop-font-heading);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--rop-primary, #e4141b);
	text-transform: uppercase;
}

.rop-topnav {
	flex: 1;
	min-width: 0;
}

.rop-topnav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.rop-topnav__list::-webkit-scrollbar {
	display: none;
}

.rop-topnav__link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 48px;
	padding: 0 1.1rem;
	border-radius: 999px;
	color: var(--rop-ink, #141414);
	font-weight: 600;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.rop-topnav__link:hover {
	text-decoration: none;
	background: var(--rop-shell, #f4f4f5);
}

.rop-topnav__link.is-active {
	background: rgba( var(--rop-primary-rgb, 228, 20, 27 ), .1 );
	color: var(--rop-primary, #e4141b);
}

.rop-header__actions {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-left: auto;
}

.rop-search {
	position: relative;
}

.rop-search__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--rop-ink, #141414);
	cursor: pointer;
}

.rop-search__toggle:hover {
	background: var(--rop-shell, #f4f4f5);
}

.rop-search__panel {
	position: absolute;
	top: calc( 100% + 12px );
	right: 0;
	z-index: 70;
	width: min( 340px, 78vw );
	padding: 12px;
	border-radius: var(--rop-radius, 22px);
	background: var(--rop-surface, #fff);
	box-shadow: 0 20px 48px rgba( 20, 20, 20, .18 );
}

.rop-search__panel form {
	display: grid;
	gap: 8px;
}

.rop-search__panel input[type="search"] {
	width: 100%;
	min-height: 46px;
	padding: 0 .9rem;
	border: 1px solid var(--rop-line);
	border-radius: 999px;
	font: inherit;
}

.rop-cart-button {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 48px;
	padding: 0 1.2rem;
	border: 0;
	border-radius: 999px;
	background: var(--rop-primary, #e4141b);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	position: relative;
}

.rop-cart-button__count {
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: #fff;
	color: var(--rop-primary, #e4141b);
	font-size: .74rem;
	line-height: 22px;
	text-align: center;
}

.rop-state {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .8rem;
	color: var(--rop-muted, #8b8d93);
}

.rop-state__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	flex: none;
}

.rop-state--closed .rop-state__dot {
	background: #f97316;
}

/* 5. Banners de la portada -------------------------------------------- */

.rop-banners {
	position: relative;
	border-radius: var(--rop-radius, 22px);
	overflow: hidden;
	background: var(--rop-ink, #141414);
}

.rop-banners__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.rop-banners__track::-webkit-scrollbar {
	display: none;
}

.rop-banner {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
	min-height: var(--rop-hero-height, 420px);
	padding: clamp( 26px, 4vw, 54px );
	color: #fff;
}

.rop-banner__media,
.rop-banner__media picture,
.rop-banner__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.rop-banner__image {
	object-fit: cover;
}

.rop-banner__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba( 12, 12, 13, calc( var(--rop-banner-overlay, .42 ) + .35 ) ) 0%,
		rgba( 12, 12, 13, calc( var(--rop-banner-overlay, .42 ) + .05 ) ) 55%,
		rgba( 12, 12, 13, calc( var(--rop-banner-overlay, .42 ) - .2 ) ) 100%
	);
}

.rop-banner__content {
	position: relative;
	max-width: 560px;
}

.rop-banner--center {
	justify-content: center;
	text-align: center;
}

.rop-banner--center .rop-banner__content {
	margin-inline: auto;
}

.rop-banner--right {
	justify-content: flex-end;
	text-align: right;
}

.rop-banner__title {
	margin-bottom: .35rem;
	font-size: var(--rop-size-h1, 48px);
}

.rop-banner__highlight {
	display: block;
	color: var(--rop-primary, #e4141b);
}

.rop-banner__rule {
	display: block;
	width: 64px;
	height: 4px;
	margin-bottom: 1.1rem;
	border-radius: 4px;
	background: var(--rop-primary, #e4141b);
}

.rop-banner--center .rop-banner__rule {
	margin-inline: auto;
}

.rop-banner--right .rop-banner__rule {
	margin-left: auto;
}

.rop-banner__subtitle {
	margin: 0 0 1.6rem;
	max-width: 34ch;
	font-size: 1.05rem;
	color: rgba( 255, 255, 255, .88 );
}

.rop-banner--center .rop-banner__subtitle {
	margin-inline: auto;
}

.rop-banner--right .rop-banner__subtitle {
	margin-left: auto;
}

.rop-banner__actions {
	margin: 0;
}

/* Controles del carrusel */
.rop-banners__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-top: -23px;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .16 );
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur( 4px );
	transition: background-color .15s ease;
}

.rop-banners__arrow:hover {
	background: rgba( 255, 255, 255, .3 );
}

.rop-banners__arrow--prev {
	left: 14px;
}

.rop-banners__arrow--prev .rop-icon {
	transform: rotate( 90deg );
}

.rop-banners__arrow--next {
	right: 14px;
}

.rop-banners__arrow--next .rop-icon {
	transform: rotate( -90deg );
}

.rop-banners__controls {
	position: absolute;
	left: clamp( 26px, 4vw, 54px );
	bottom: 18px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: .8rem;
}

.rop-banners__dots {
	display: flex;
	gap: .4rem;
}

.rop-banners__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .4 );
	cursor: pointer;
	transition: width .2s ease, background-color .2s ease;
}

.rop-banners__dot.is-active {
	width: 28px;
	background: var(--rop-primary, #e4141b);
}

.rop-banners__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .16 );
	color: #fff;
	cursor: pointer;
}

/* Dos barras (pausa) o un triángulo (reanudar), dibujados con CSS. */
.rop-banners__pause-icon {
	width: 10px;
	height: 11px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

.rop-banners__pause[aria-pressed="true"] .rop-banners__pause-icon {
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-left: 10px solid currentColor;
	margin-left: 3px;
}

/* 6. Paneles y rejilla -------------------------------------------------- */

.rop-panel {
	padding: clamp( 16px, 2vw, 24px );
	background: var(--rop-surface, #fff);
	border-radius: var(--rop-radius, 22px);
	box-shadow: var(--rop-shadow-sm);
}

.rop-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.rop-panel__title {
	margin: 0;
	font-size: var(--rop-size-h2, 26px);
}

.rop-panel__more {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-weight: 600;
	color: var(--rop-primary, #e4141b);
	white-space: nowrap;
}

.rop-panel__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--rop-primary, #e4141b);
	background: rgba( var(--rop-primary-rgb, 228, 20, 27 ), .08 );
}

/* La carta filtrable */
.rop-menu__count {
	margin: 0;
	color: var(--rop-muted, #8b8d93);
	font-weight: 600;
	white-space: nowrap;
}

.rop-menu__empty {
	padding: 2.5rem 0;
	color: var(--rop-muted, #8b8d93);
	text-align: center;
}

.rop-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 230px, 1fr ) );
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rop-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--rop-line);
	border-radius: var(--rop-radius, 22px);
	background: var(--rop-surface, #fff);
	transition: transform .18s ease, box-shadow .18s ease;
}

.rop-card:hover {
	transform: translateY( -3px );
	box-shadow: 0 14px 32px rgba( 20, 20, 20, .1 );
}

.rop-card.is-out {
	opacity: .68;
}

.rop-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 11;
	background: var(--rop-shell, #f4f4f5);
}

.rop-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rop-card__badges {
	position: absolute;
	top: .6rem;
	left: .6rem;
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	max-width: calc( 100% - 1.2rem );
}

.rop-badge {
	padding: .2rem .55rem;
	border-radius: 999px;
	background: rgba( 20, 20, 20, .82 );
	color: #fff;
	font-size: .68rem;
	font-weight: 600;
	line-height: 1.6;
}

.rop-badge--sale { background: var(--rop-primary, #e4141b); }
.rop-badge--out { background: #6b7280; }

.rop-card__body {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	flex: 1;
	padding: .9rem 1rem 1rem;
}

.rop-card__title {
	margin: 0;
	font-family: var(--rop-font-body);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
}

.rop-card__meta {
	margin: 0;
	font-size: .86rem;
	color: var(--rop-muted, #8b8d93);
}

.rop-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	margin-top: auto;
	padding-top: .7rem;
}

.rop-card__price,
.rop-pairing__price {
	color: var(--rop-primary, #e4141b);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.rop-card__price del,
.rop-pairing__price del {
	display: block;
	color: var(--rop-muted, #8b8d93);
	font-size: .8rem;
	font-weight: 500;
}

.rop-card__price ins,
.rop-pairing__price ins {
	text-decoration: none;
}

.rop-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: none;
	border: 0;
	border-radius: 50%;
	background: var(--rop-ink, #141414);
	color: #fff;
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease;
}

.rop-add:hover {
	text-decoration: none;
	transform: scale( 1.08 );
	background: var(--rop-primary, #e4141b);
}

.rop-add.is-disabled {
	width: auto;
	padding: 0 .85rem;
	border-radius: 999px;
	background: var(--rop-shell, #f4f4f5);
	color: var(--rop-muted, #8b8d93);
	font-size: .76rem;
	cursor: not-allowed;
}

.rop-add.is-loading {
	opacity: .5;
	pointer-events: none;
}

/* 7. Ficha de producto -------------------------------------------------- */

/* Píldoras de tamaño creadas a partir del selector de variaciones. */
.rop-size {
	margin-bottom: 1.2rem;
}

.rop-size__options {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.rop-size__option {
	min-height: 46px;
	padding: 0 1.2rem;
	border: 1px dashed var(--rop-dash);
	border-radius: 999px;
	background: transparent;
	font-weight: 600;
	cursor: pointer;
}

.rop-size__option.is-active {
	background: var(--rop-ink, #141414);
	border-style: solid;
	border-color: var(--rop-ink, #141414);
	color: #fff;
}

/* Fila de cantidad + precio + botón, como una sola píldora. */
.rop-buy {
	display: flex;
	align-items: center;
	gap: .8rem;
	flex-wrap: wrap;
	margin-top: 1.2rem;
}

.rop-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--rop-line);
	border-radius: 999px;
	overflow: hidden;
}

.rop-qty button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 0;
	background: none;
	font-size: 1.1rem;
	cursor: pointer;
}

.rop-qty button:hover {
	background: var(--rop-shell, #f4f4f5);
}

.rop-qty__value {
	min-width: 28px;
	text-align: center;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.rop-buy__action {
	display: inline-flex;
	align-items: stretch;
	border-radius: 999px;
	overflow: hidden;
	background: var(--rop-ink, #141414);
	color: #fff;
}

.rop-buy__price {
	display: inline-flex;
	align-items: center;
	padding: 0 1.2rem;
	font-weight: 700;
	border-right: 1px solid rgba( 255, 255, 255, .18 );
	font-variant-numeric: tabular-nums;
}

/*
 * El botón de compra se estiliza sin depender del envoltorio `.woocommerce`,
 * porque en el cuadro rápido el formulario vive fuera de él.
 */
.rop-buy .quantity {
	margin: 0;
	float: none;
}

.rop-buy .qty {
	width: 68px;
	min-height: 46px;
	padding: 0 .3rem;
	border: 1px solid var(--rop-line);
	border-radius: 999px;
	background: var(--rop-surface, #fff);
	font: inherit;
	font-weight: 700;
	text-align: center;
}

.rop-buy__action .single_add_to_cart_button,
.rop-buy__action .button {
	min-height: 52px;
	padding: 0 1.5rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.rop-buy__action .single_add_to_cart_button:hover,
.rop-buy__action .button:hover {
	background: rgba( 255, 255, 255, .12 );
	color: #fff;
}

.rop-buy__action .single_add_to_cart_button:disabled,
.rop-buy__action .button:disabled,
.rop-buy__action .single_add_to_cart_button.disabled {
	opacity: .5;
	cursor: not-allowed;
}

.rop-buy__action .single_add_to_cart_button.is-loading {
	opacity: .6;
	pointer-events: none;
}

/* 8. Agregados --------------------------------------------------------- */

.rop-addons {
	display: grid;
	gap: 1.1rem;
	margin: 1.2rem 0;
}

.rop-addons__group {
	margin: 0;
	padding: 0;
	border: 0;
}

.rop-addons__hint {
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.rop-addons__options {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.rop-addon {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	width: 92px;
	cursor: pointer;
	text-align: center;
}

.rop-addon__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.rop-addon__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	overflow: hidden;
	border: 1px dashed var(--rop-dash);
	border-radius: 18px;
	background: var(--rop-surface, #fff);
}

.rop-addon__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rop-addons__initial {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--rop-muted, #8b8d93);
}

.rop-addon__check {
	position: absolute;
	top: 68px;
	left: 50%;
	transform: translateX( -50% );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid var(--rop-surface, #fff);
	background: #cfcfd4;
	color: #fff;
	transition: background-color .15s ease;
}

.rop-addon__input:checked ~ .rop-addon__check {
	background: var(--rop-ink, #141414);
}

.rop-addon__input:checked ~ .rop-addon__media {
	border-style: solid;
	border-color: var(--rop-ink, #141414);
}

.rop-addon__input:focus-visible ~ .rop-addon__media {
	outline: 3px solid var(--rop-primary, #e4141b);
	outline-offset: 2px;
}

.rop-addon__input:disabled ~ .rop-addon__media {
	opacity: .4;
}

.rop-addon__label {
	margin-top: .5rem;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.25;
}

.rop-addon__price {
	font-size: .76rem;
	color: var(--rop-muted, #8b8d93);
}

.rop-addons__note {
	margin: .4rem 0 0;
	font-size: .82rem;
	color: var(--rop-muted, #8b8d93);
}

.rop-item-note,
.rop-order__note {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 1rem 0 0;
	padding: 0 1rem;
	border: 1px dashed var(--rop-dash);
	border-radius: 999px;
	color: var(--rop-muted, #8b8d93);
}

.rop-item-note input,
.rop-order__note input {
	flex: 1;
	min-height: 48px;
	border: 0;
	background: none;
	font: inherit;
	color: var(--rop-ink, #141414);
}

.rop-item-note input:focus,
.rop-order__note input:focus {
	outline: none;
}

/* 9. Maridajes --------------------------------------------------------- */

.rop-pairings {
	margin-top: 1.8rem;
}

.rop-pairings__list {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 230px, 1fr ) );
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rop-pairing {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .7rem;
	border: 1px dashed var(--rop-dash);
	border-radius: var(--rop-radius, 22px);
}

.rop-pairing__media img {
	width: 62px;
	height: 62px;
	border-radius: 14px;
	object-fit: cover;
}

.rop-pairing__body {
	flex: 1;
	min-width: 0;
}

.rop-pairing__name {
	margin: 0;
	font-weight: 700;
	font-size: .95rem;
}

.rop-pairing__meta {
	margin: 0;
	font-size: .8rem;
	color: var(--rop-muted, #8b8d93);
}

.rop-pairing__price {
	margin: .15rem 0 0;
	font-size: .95rem;
}

/* 10. Panel de pedido --------------------------------------------------- */

.rop-order {
	position: sticky;
	top: calc( var(--rop-header-height) + 32px );
	align-self: start;
	background: var(--rop-surface, #fff);
	border-radius: var(--rop-radius, 22px);
	box-shadow: var(--rop-shadow-sm);
}

.rop-order__inner {
	display: flex;
	flex-direction: column;
	max-height: calc( 100vh - var(--rop-header-height) - 60px );
	padding: 18px;
}

.rop-order__head {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	margin-bottom: 1rem;
}

.rop-order__title {
	margin: 0;
	font-size: 1.25rem;
}

.rop-order__count {
	margin: 0 0 0 auto;
	font-size: .85rem;
	color: var(--rop-muted, #8b8d93);
}

.rop-order__close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--rop-shell, #f4f4f5);
	cursor: pointer;
}

.rop-order__body {
	flex: 1;
	overflow-y: auto;
	margin: 0 -4px;
	padding: 0 4px;
}

.rop-order__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rop-order-item {
	display: grid;
	grid-template-columns: 64px minmax( 0, 1fr );
	gap: .8rem;
	padding: .7rem;
	border: 1px dashed var(--rop-dash);
	border-radius: 18px;
}

.rop-order-item__thumb {
	width: 64px;
	height: 64px;
	border-radius: 14px;
	object-fit: cover;
	background: var(--rop-shell, #f4f4f5);
}

.rop-order-item__name {
	margin: 0;
	font-weight: 700;
	font-size: .95rem;
}

.rop-order-item__meta,
.rop-order-item__options {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .78rem;
	color: var(--rop-muted, #8b8d93);
}

.rop-order-item__price {
	display: block;
	margin-top: .2rem;
	color: var(--rop-primary, #e4141b);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.rop-order-item__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-top: .4rem;
}

.rop-order-item__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--rop-muted, #8b8d93);
	cursor: pointer;
}

.rop-order-item__remove:hover {
	background: rgba( var(--rop-primary-rgb, 228, 20, 27 ), .08 );
	color: var(--rop-primary, #e4141b);
}

.rop-order__empty {
	padding: 2rem 0;
	color: var(--rop-muted, #8b8d93);
	text-align: center;
}

.rop-order__foot {
	padding-top: 1rem;
	margin-top: 1rem;
	border-top: 1px dashed var(--rop-dash);
}

.rop-order__warnings:empty {
	display: none;
}

.rop-order__warnings {
	margin: 0 0 .8rem;
	padding: .6rem .8rem;
	border-radius: 14px;
	background: #fff7ed;
	color: #7c2d12;
	font-size: .84rem;
}

.rop-promo {
	margin-bottom: 1rem;
}

.rop-promo__label {
	margin: 0 0 .4rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--rop-muted, #8b8d93);
}

.rop-promo__form {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: 0 .4rem 0 1rem;
	border: 1px dashed var(--rop-dash);
	border-radius: 999px;
}

.rop-promo__form input {
	flex: 1;
	min-width: 0;
	min-height: 46px;
	border: 0;
	background: none;
	font: inherit;
}

.rop-promo__form input:focus {
	outline: none;
}

.rop-promo__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: var(--rop-ink, #141414);
	color: #fff;
	cursor: pointer;
}

.rop-promo__list {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: .6rem 0 0;
	padding: 0;
	list-style: none;
}

.rop-coupon {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .25rem .5rem .25rem .7rem;
	border-radius: 999px;
	background: var(--rop-shell, #f4f4f5);
	font-size: .82rem;
	font-weight: 600;
}

.rop-coupon button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--rop-muted, #8b8d93);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
}

.rop-coupon button:hover {
	color: var(--rop-primary, #e4141b);
}

.rop-totals {
	margin: 0 0 1rem;
}

.rop-totals div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .18rem 0;
}

.rop-totals dt,
.rop-totals dd {
	margin: 0;
	font-size: .88rem;
	color: var(--rop-muted, #8b8d93);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.rop-totals__total {
	margin-top: .5rem;
	padding-top: .7rem;
	border-top: 1px dashed var(--rop-dash);
}

.rop-totals__total dt {
	font-size: 1rem;
	font-weight: 800;
	color: var(--rop-ink, #141414);
}

.rop-totals__total dd {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--rop-ink, #141414);
	text-transform: none;
	font-variant-numeric: tabular-nums;
}

.rop-order__links {
	display: flex;
	justify-content: space-between;
	gap: .5rem;
	margin-top: .5rem;
}

/* Selector de entrega */
.rop-delivery {
	position: relative;
	margin-bottom: 1rem;
}

.rop-delivery__toggle {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	min-height: 48px;
	padding: 0 1rem;
	border: 1px dashed var(--rop-dash);
	border-radius: 999px;
	background: none;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
}

.rop-delivery__value {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rop-delivery__panel {
	position: absolute;
	bottom: calc( 100% + 8px );
	left: 0;
	right: 0;
	z-index: 40;
	padding: 12px;
	border-radius: var(--rop-radius, 22px);
	background: var(--rop-surface, #fff);
	box-shadow: 0 18px 44px rgba( 20, 20, 20, .2 );
}

.rop-delivery__title {
	margin: 0 0 .5rem;
	font-size: .8rem;
	font-weight: 700;
}

.rop-delivery__options {
	display: grid;
	gap: .35rem;
}

.rop-delivery__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	width: 100%;
	min-height: 44px;
	padding: 0 .8rem;
	border: 1px solid var(--rop-line);
	border-radius: 12px;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.rop-delivery__option.is-active {
	border-color: var(--rop-ink, #141414);
	background: var(--rop-ink, #141414);
	color: #fff;
}

.rop-delivery__cost {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.rop-delivery__hint,
.rop-delivery__empty {
	margin: .6rem 0 0;
	font-size: .78rem;
	color: var(--rop-muted, #8b8d93);
}

/* Pedido exprés: confirmar sin salir del panel ------------------------- */

.rop-order.is-express .rop-order__head,
.rop-order.is-express .rop-order__body,
.rop-order.is-express .rop-order__foot,
.rop-order.is-done .rop-order__head,
.rop-order.is-done .rop-order__body,
.rop-order.is-done .rop-order__foot {
	display: none;
}

/* Con retiro en local el panel no pide dirección. */
.rop-order.is-pickup .rop-field-delivery {
	display: none;
}

.rop-express,
.rop-express-done {
	display: flex;
	flex-direction: column;
	max-height: calc( 100vh - var(--rop-header-height) - 60px );
}

.rop-express__head {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: .9rem;
}

.rop-express__back {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .3rem .5rem .3rem .2rem;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--rop-muted, #8b8d93);
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
}

.rop-express__back .rop-icon {
	transform: rotate( 90deg );
}

.rop-express__back:hover {
	color: var(--rop-primary, #e4141b);
}

.rop-express__title {
	margin: 0 0 0 auto;
	font-weight: 700;
}

.rop-express__body {
	flex: 1;
	overflow-y: auto;
	display: grid;
	gap: .9rem;
	/* Deja aire para que el anillo de foco no quede cortado. */
	padding: 2px;
}

/* Barra de desplazamiento discreta en las zonas que scrollean. */
.rop-express__body,
.rop-order__body {
	scrollbar-width: thin;
	scrollbar-color: #d7d7dc transparent;
}

.rop-express__body::-webkit-scrollbar,
.rop-order__body::-webkit-scrollbar {
	width: 6px;
}

.rop-express__body::-webkit-scrollbar-track,
.rop-order__body::-webkit-scrollbar-track {
	background: transparent;
}

.rop-express__body::-webkit-scrollbar-thumb,
.rop-order__body::-webkit-scrollbar-thumb {
	background: #d7d7dc;
	border-radius: 999px;
}

.rop-express__field {
	display: grid;
	gap: .25rem;
	margin: 0;
}

.rop-express__field label {
	margin-left: .2rem;
	font-size: .82rem;
	font-weight: 600;
	color: var(--rop-ink, #141414);
}

.rop-express__field input {
	min-height: 50px;
	padding: 0 1rem;
	border: 1px solid var(--rop-line);
	border-radius: 14px;
	background: var(--rop-shell, #f4f4f5);
	font: inherit;
	color: var(--rop-ink, #141414);
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.rop-express__field input::placeholder {
	color: var(--rop-muted, #8b8d93);
}

.rop-express__field input:hover {
	border-color: #d5d5db;
}

.rop-express__field input:focus {
	outline: none;
	background: var(--rop-surface, #fff);
	border-color: var(--rop-ink, #141414);
	box-shadow: 0 0 0 3px rgba( var(--rop-ink-rgb, 20, 20, 20 ), .08 );
}

/* Elegir entre despacho y retiro */
.rop-express__modality {
	display: grid;
	gap: .55rem;
	padding-bottom: .9rem;
	margin-bottom: .2rem;
	border-bottom: 1px dashed var(--rop-dash);
}

.rop-express__legend {
	margin: 0 0 0 .2rem;
	font-size: .82rem;
	font-weight: 600;
	color: var(--rop-ink, #141414);
}

.rop-modality {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .4rem;
	padding: 4px;
	border-radius: 999px;
	background: var(--rop-shell, #f4f4f5);
}

.rop-modality__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-height: 44px;
	padding: 0 .7rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--rop-muted, #8b8d93);
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.rop-modality__btn:hover:not( :disabled ) {
	color: var(--rop-ink, #141414);
}

.rop-modality__btn.is-active {
	background: var(--rop-surface, #fff);
	color: var(--rop-ink, #141414);
	box-shadow: 0 1px 3px rgba( 20, 20, 20, .12 );
}

.rop-modality__btn:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.rop-express__select {
	min-height: 50px;
	padding: 0 .9rem;
	border: 1px solid var(--rop-line);
	border-radius: 14px;
	background: var(--rop-shell, #f4f4f5);
	font: inherit;
	color: var(--rop-ink, #141414);
}

.rop-express__select:focus {
	outline: none;
	background: var(--rop-surface, #fff);
	border-color: var(--rop-ink, #141414);
	box-shadow: 0 0 0 3px rgba( var(--rop-ink-rgb, 20, 20, 20 ), .08 );
}

.rop-express__note:empty {
	display: none;
}

.rop-express__note {
	margin: 0 0 0 .2rem;
	font-size: .8rem;
	font-weight: 600;
	color: var(--rop-primary, #e4141b);
}

.rop-express__payments {
	margin: .2rem 0 0;
	padding: 0;
	border: 0;
}

.rop-express__payments legend {
	padding: 0;
	margin-left: .2rem;
	font-size: .82rem;
	font-weight: 600;
	color: var(--rop-ink, #141414);
}

.rop-express__payment {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: .15rem .7rem;
	min-height: 52px;
	padding: .55rem .9rem;
	margin-top: .4rem;
	border: 1px solid var(--rop-line);
	border-radius: 14px;
	background: var(--rop-surface, #fff);
	cursor: pointer;
	font-weight: 600;
	transition: border-color .15s ease, background-color .15s ease;
}

.rop-express__payment:hover {
	border-color: #d5d5db;
}

.rop-express__payment input {
	accent-color: var(--rop-primary, #e4141b);
}

.rop-express__payment small {
	grid-column: 2;
	font-weight: 400;
	font-size: .78rem;
	color: var(--rop-muted, #8b8d93);
}

.rop-express__payment:has( input:checked ) {
	border-color: var(--rop-primary, #e4141b);
	background: rgba( var(--rop-primary-rgb, 228, 20, 27 ), .05 );
}

.rop-express__payment:has( input:focus-visible ) {
	box-shadow: 0 0 0 3px rgba( var(--rop-primary-rgb, 228, 20, 27 ), .18 );
}

.rop-express__error:empty {
	display: none;
}

.rop-express__error {
	margin: 0;
	padding: .6rem .8rem;
	border-radius: 14px;
	background: #fef2f2;
	color: #b91c1c;
	font-size: .85rem;
}

.rop-express__foot {
	padding-top: .9rem;
	margin-top: .9rem;
	border-top: 1px dashed var(--rop-dash);
}

.rop-express__hint {
	margin: .5rem 0 0;
	font-size: .78rem;
	color: var(--rop-muted, #8b8d93);
	text-align: center;
}

.rop-express-done {
	text-align: center;
	padding: 1rem 0;
}

.rop-express-done__check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: rgba( 34, 197, 94, .12 );
	color: #16a34a;
}

.rop-express-done__number {
	font-size: 1.15rem;
	font-weight: 800;
}

.rop-btn--wa.is-highlighted {
	animation: rop-pulse 1.2s ease-in-out 3;
}

@keyframes rop-pulse {
	0%, 100% { transform: scale( 1 ); }
	50% { transform: scale( 1.04 ); }
}

/* 11. Móvil ------------------------------------------------------------- */

.rop-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba( 15, 15, 16, .45 );
}

.rop-cart-bar {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc( var(--rop-mobile-nav-height) + var(--rop-safe-bottom) + 12px );
	z-index: 70;
	display: none;
	align-items: center;
	gap: .7rem;
	min-height: 58px;
	padding: 0 1rem 0 .6rem;
	border: 0;
	border-radius: 999px;
	background: var(--rop-primary, #e4141b);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 14px 30px rgba( var(--rop-primary-rgb, 228, 20, 27 ), .4 );
	cursor: pointer;
}

.rop-cart-bar__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .2 );
}

.rop-cart-bar__count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 20px;
	height: 20px;
	border-radius: 999px;
	background: #fff;
	color: var(--rop-primary, #e4141b);
	font-size: .72rem;
	line-height: 20px;
	text-align: center;
}

.rop-cart-bar__label {
	flex: 1;
	text-align: left;
}

.rop-cart-bar__total {
	font-variant-numeric: tabular-nums;
}

.rop-mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	width: min( 320px, 88% );
	height: 100dvh;
	overflow-y: auto;
	background: var(--rop-surface, #fff);
	box-shadow: 10px 0 40px rgba( 15, 15, 16, .2 );
}

.rop-mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem;
	border-bottom: 1px solid var(--rop-line);
}

.rop-mobile-menu__head .rop-order__close {
	display: inline-flex;
}

.rop-mobile-menu__label {
	margin: 1rem 1rem .3rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--rop-muted, #8b8d93);
}

.rop-mobile-menu__list {
	margin: 0;
	padding: .5rem;
	list-style: none;
}

.rop-mobile-menu__list a {
	display: flex;
	align-items: center;
	gap: .8rem;
	min-height: 50px;
	padding: 0 .9rem;
	border-radius: 14px;
	font-weight: 600;
}

.rop-mobile-menu__list a:hover {
	background: var(--rop-shell, #f4f4f5);
	text-decoration: none;
}

.rop-mobile-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	display: none;
	background: var(--rop-surface, #fff);
	border-top: 1px solid var(--rop-line);
	padding-bottom: var(--rop-safe-bottom);
}

.rop-mobile-nav__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rop-mobile-nav__item {
	flex: 1;
}

.rop-mobile-nav__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: var(--rop-mobile-nav-height);
	padding: 6px 2px;
	color: var(--rop-muted, #8b8d93);
	font-size: .68rem;
	font-weight: 600;
}

.rop-mobile-nav__link:hover,
.rop-mobile-nav__link.is-active {
	text-decoration: none;
	color: var(--rop-primary, #e4141b);
}

/* Con un panel abierto la barra flotante estorba: se oculta. */
.rop-panel-open .rop-cart-bar {
	display: none;
}

/* Cuadro rápido del plato ---------------------------------------------- */

.rop-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 110;
	transform: translate( -50%, -50% );
	width: min( 900px, calc( 100vw - 32px ) );
	max-height: min( 88vh, 780px );
	overflow: hidden;
	border-radius: var(--rop-radius-lg, 32px);
	background: var(--rop-surface, #fff);
	box-shadow: 0 30px 70px rgba( 15, 15, 16, .35 );
}

.rop-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .9 );
	color: var(--rop-ink, #141414);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba( 20, 20, 20, .16 );
}

.rop-modal__close:hover {
	background: var(--rop-shell, #f4f4f5);
}

.rop-modal__body {
	max-height: min( 88vh, 780px );
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #d7d7dc transparent;
}

.rop-modal__body::-webkit-scrollbar {
	width: 6px;
}

.rop-modal__body::-webkit-scrollbar-thumb {
	background: #d7d7dc;
	border-radius: 999px;
}

.rop-quick {
	display: grid;
	grid-template-columns: minmax( 0, 42% ) minmax( 0, 1fr );
	gap: clamp( 16px, 3vw, 32px );
	align-items: start;
}

.rop-quick__media {
	position: relative;
	height: 100%;
	min-height: 260px;
	background: var(--rop-shell, #f4f4f5);
}

.rop-quick__image {
	width: 100%;
	height: 100%;
	max-height: min( 88vh, 780px );
	object-fit: cover;
}

.rop-quick__media .rop-card__badges {
	top: 1rem;
	left: 1rem;
}

.rop-quick__info {
	padding: clamp( 20px, 3vw, 32px ) clamp( 20px, 3vw, 32px ) clamp( 20px, 3vw, 32px ) 0;
}

.rop-quick__title {
	margin: 0 0 .2rem;
	font-size: clamp( 26px, 3vw, 36px );
}

.rop-quick__meta {
	margin: 0 0 .6rem;
	color: var(--rop-muted, #8b8d93);
	font-weight: 600;
}

.rop-quick__desc {
	margin: 0 0 1rem;
	color: var(--rop-muted, #8b8d93);
}

.rop-quick .price {
	margin: 0 0 1rem;
	color: var(--rop-primary, #e4141b);
	font-size: 1.35rem;
	font-weight: 800;
}

.rop-quick__out {
	padding: .7rem 1rem;
	border-radius: 14px;
	background: var(--rop-shell, #f4f4f5);
	color: var(--rop-muted, #8b8d93);
	font-weight: 600;
}

.rop-quick__link {
	margin: 1rem 0 0;
	font-size: .85rem;
}

.rop-quick__link a {
	color: var(--rop-muted, #8b8d93);
	text-decoration: underline;
}

/* 12. WooCommerce ------------------------------------------------------- */

/* Con retiro en local no se piden los datos de dirección. */
body.rop-pickup .rop-field-delivery {
	display: none !important;
}


.rop-woo > .woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 1rem;
	padding: .9rem 1.1rem;
	border: 1px solid var(--rop-line);
	border-radius: var(--rop-radius, 22px);
	background: var(--rop-shell, #f4f4f5);
	list-style: none;
}

.woocommerce-error {
	border-color: #fca5a5;
	background: #fef2f2;
}

.woocommerce div.product .product_title {
	font-size: var(--rop-size-h1, 48px);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--rop-primary, #e4141b);
	font-weight: 700;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce div.product form.cart .button {
	min-height: 52px;
	padding: 0 1.6rem;
	border-radius: 999px;
	background: var(--rop-ink, #141414);
	color: #fff;
	font-weight: 600;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce div.product form.cart .button:hover {
	background: var(--rop-primary, #e4141b);
	color: #fff;
}

.woocommerce .quantity .qty {
	min-height: 46px;
	border: 1px solid var(--rop-line);
	border-radius: 14px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .input-text {
	min-height: 48px;
	padding: .55rem .9rem;
	border: 1px solid var(--rop-line);
	border-radius: 14px;
}

.woocommerce-checkout #payment {
	border-radius: var(--rop-radius, 22px);
	background: var(--rop-shell, #f4f4f5);
}

.rop-datalist {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .3rem 1.2rem;
	margin: 1rem 0;
	font-size: .93rem;
}

.rop-datalist dt {
	font-weight: 600;
	color: var(--rop-muted, #8b8d93);
}

.rop-datalist dd {
	margin: 0;
}

.rop-breadcrumbs {
	margin-bottom: .8rem;
	font-size: .84rem;
	color: var(--rop-muted, #8b8d93);
}

.rop-confirm {
	padding: 1.4rem;
	margin-bottom: 1.4rem;
	border: 1px dashed var(--rop-dash);
	border-radius: var(--rop-radius, 22px);
}

.rop-confirm__number strong {
	font-size: 1.3em;
}

.rop-confirm__hint {
	font-size: .88rem;
	color: var(--rop-muted, #8b8d93);
}

/* 13. Estados, pie y utilidades ----------------------------------------- */

.rop-closed {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: 1rem 1.2rem;
	border-radius: var(--rop-radius, 22px);
	background: #fff7ed;
	border: 1px solid #fdba74;
	color: #7c2d12;
}

.rop-closed strong {
	display: block;
}

.rop-empty {
	padding: clamp( 30px, 7vw, 70px ) 1rem;
	text-align: center;
}

.rop-empty__code {
	margin: 0 0 .2em;
	font-family: var(--rop-font-heading);
	font-size: clamp( 60px, 13vw, 120px );
	font-weight: 800;
	line-height: 1;
	color: var(--rop-primary, #e4141b);
}

.rop-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	justify-content: center;
}

.rop-posts {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 1.2rem;
}

.rop-post__media img,
.rop-page__media img {
	border-radius: var(--rop-radius, 22px);
}

.rop-page-content > * + * {
	margin-top: 1rem;
}

.rop-contact {
	display: grid;
	grid-template-columns: minmax( 240px, 360px ) minmax( 0, 1fr );
	gap: clamp( 18px, 4vw, 40px );
	align-items: start;
}

.rop-loadmore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-top: 1.6rem;
}

.rop-loadmore .rop-skeleton--grid {
	width: 100%;
}

.rop-footer {
	margin-top: 16px;
	padding: clamp( 20px, 3vw, 34px );
	border-radius: var(--rop-radius, 22px);
	background: var(--rop-ink, #141414);
	color: rgba( 255, 255, 255, .78 );
}

.rop-footer__inner {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: clamp( 16px, 3vw, 36px );
}

.rop-footer__title {
	margin-bottom: .5rem;
	color: #fff;
	font-size: 1.05rem;
}

.rop-footer__line {
	margin: .2rem 0;
	font-size: .92rem;
}

.rop-footer__menu,
.rop-footer__social {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .92rem;
}

.rop-footer__social {
	display: flex;
	gap: 1rem;
	margin-top: .6rem;
}

.rop-footer__bottom {
	margin-top: 1.4rem;
	padding-top: 1rem;
	border-top: 1px solid rgba( 255, 255, 255, .14 );
	font-size: .84rem;
}

.rop-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	z-index: 200;
	transform: translateX( -50% );
	max-width: min( 90vw, 380px );
	padding: .8rem 1.2rem;
	border-radius: 999px;
	background: var(--rop-ink, #141414);
	color: #fff;
	font-weight: 600;
	box-shadow: 0 14px 30px rgba( 0, 0, 0, .35 );
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
}

.rop-toast.is-visible {
	opacity: 1;
	transform: translate( -50%, -6px );
}

.rop-toast--error {
	background: #b91c1c;
}

/* 14. Responsive -------------------------------------------------------- */

@media ( max-width: 1199px ) {
	.rop-has-docked-cart .rop-shell__body {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* El pedido pasa a panel deslizante. */
	.rop-order {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		width: min( 400px, 100% );
		border-radius: 0;
		box-shadow: -10px 0 40px rgba( 15, 15, 16, .2 );
	}

	.rop-order:not( .is-open ) {
		display: none;
	}

	.rop-order__inner {
		max-height: 100dvh;
		height: 100dvh;
	}

	.rop-order__close {
		display: inline-flex;
		margin-left: .4rem;
	}

	.rop-cart-bar {
		display: flex;
	}
}

@media ( max-width: 1023px ) {
	.rop-topnav {
		order: 3;
		width: 100%;
		flex: none;
	}

	.rop-header__inner {
		flex-wrap: wrap;
		padding: 10px 12px;
		border-radius: var(--rop-radius, 22px);
	}

	.rop-header {
		border-radius: var(--rop-radius, 22px);
	}

	.rop-header__burger {
		display: inline-flex;
	}

	.rop-contact {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( max-width: 767px ) {
	:root {
		--rop-header-height: 62px;
	}

	.rop-shell {
		width: 100%;
		margin: 0;
		padding: 0 10px 10px;
		border-radius: 0;
		box-shadow: none;
	}

	/* La cabecera se pega al borde superior, a sangre y sin esquinas. */
	.rop-header {
		margin: 0 -10px 10px;
		border-radius: 0;
		box-shadow: 0 2px 12px rgba( 20, 20, 20, .12 );
	}

	.rop-header__inner {
		border-radius: 0;
	}

	.rop-sticky-header .rop-header {
		top: 0;
	}

	.rop-shell__body {
		margin-top: 0;
	}

	.rop-page-pattern {
		display: none;
	}

	.rop-mobile-nav {
		display: block;
	}

	body.rop-has-mobile-nav {
		padding-bottom: calc( var(--rop-mobile-nav-height) + var(--rop-safe-bottom) );
	}

	.rop-header__brand {
		flex: 1;
		display: flex;
		justify-content: center;
	}

	.rop-cart-button__label {
		display: none;
	}

	.rop-cart-button {
		width: 48px;
		padding: 0;
		justify-content: center;
	}

	.rop-cart-button__count {
		position: absolute;
		top: -4px;
		right: -4px;
		border: 2px solid var(--rop-surface, #fff);
	}

	/* Tarjetas en lista horizontal. */
	.rop-grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 10px;
	}

	.rop-card {
		flex-direction: row;
	}

	.rop-card__media {
		width: 116px;
		flex: none;
		aspect-ratio: auto;
	}

	.rop-card__body {
		justify-content: center;
		padding: .75rem .85rem;
	}

	.woocommerce div.product .product_title {
		font-size: clamp( 30px, 8vw, var(--rop-size-h1, 48px ) );
	}

	.rop-banner__title {
		font-size: clamp( 32px, 8.5vw, var(--rop-size-h1, 48px ) );
	}

	.rop-banners__arrow {
		display: none;
	}

	.rop-banners__controls {
		bottom: 12px;
	}

	.rop-order {
		width: 100%;
	}

	.rop-pairings__list {
		grid-template-columns: minmax( 0, 1fr );
	}

	.rop-modal {
		top: auto;
		bottom: 0;
		left: 0;
		width: 100%;
		max-height: 92dvh;
		transform: none;
		border-radius: var(--rop-radius-lg, 32px) var(--rop-radius-lg, 32px) 0 0;
	}

	.rop-modal__body {
		max-height: 92dvh;
	}

	.rop-quick {
		grid-template-columns: minmax( 0, 1fr );
		gap: 0;
	}

	.rop-quick__media {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.rop-quick__image {
		max-height: none;
	}

	.rop-quick__info {
		padding: 1.1rem 1.1rem calc( 1.4rem + var(--rop-safe-bottom) );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}