/**
 * Synext Restaurant Ordering - frontend styles.
 *
 * Mobile-first. Colors are themable via CSS variables set on :root:
 *
 *   :root {
 *     --synext-order-primary:    #000000;
 *     --synext-order-accent:     #d8b15a;
 *     --synext-order-background: #ffffff;
 *     --synext-order-text:       #1a1a1a;
 *   }
 */

.synext-ro {
	color: var(--synext-order-text, #1a1a1a);
	line-height: 1.5;
}

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

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

/* ---------------------------------------------------------------------------
 * Status banner.
 * ------------------------------------------------------------------------- */

.synext-ro-banner {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	background: var(--synext-order-background, #ffffff);
}

.synext-ro-banner-label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.synext-ro-banner-dot {
	width: 0.6em;
	height: 0.6em;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #767676;
}

.synext-ro-banner--open .synext-ro-banner-dot {
	background: #1e7e34;
}

.synext-ro-banner--closing_soon .synext-ro-banner-dot {
	background: var(--synext-order-accent, #d8b15a);
}

.synext-ro-banner--open,
.synext-ro-banner--closing_soon {
	border-color: rgba(30, 126, 52, 0.4);
}

.synext-ro-banner-detail {
	font-size: 0.9em;
	opacity: 0.85;
}

.synext-ro-closed-message {
	margin-top: 0.5rem;
	font-size: 0.95em;
}

.synext-ro-closed-message p {
	margin: 0.25rem 0 0;
}

.synext-ro-next-opening {
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Category navigation (horizontally scrollable, sticky on mobile).
 * ------------------------------------------------------------------------- */

.synext-ro-nav {
	/* Sticky, but self-hiding: frontend.js adds synext-ro-nav--hidden while
	   the visitor scrolls down, so the navigation is never parked on top of
	   the products they are reading, and removes it on the first upward
	   scroll so it is always one small gesture away.
	   The nested scroll container used in 1.1.0 solved the overlap but
	   swallowed wheel and touch gestures; the page now scrolls normally
	   everywhere. */
	position: sticky;
	top: var(--synext-ro-admin-bar-height, 0px);
	z-index: 30;
	margin: 0 0 1rem;
	transition: transform 0.2s ease;
	will-change: transform;
	/* Opaque by design: content scrolling underneath must not show through.
	   This deliberately uses its own variable rather than
	   --synext-order-background: if a theme sets that one to transparent or
	   to an rgba() with alpha, the fallback would not apply and product text
	   would bleed through the navigation. Override
	   --synext-ro-nav-background to recolour it. */
	background-color: #ffffff;
	background-color: var(--synext-ro-nav-background, #ffffff);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.synext-ro-nav-list {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.synext-ro-nav-list li {
	margin: 0;
	flex: 0 0 auto;
}

.synext-ro-nav-link {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	text-decoration: none;
	color: var(--synext-order-text, #1a1a1a);
	white-space: nowrap;
}

.synext-ro-nav-link[aria-current="true"] {
	background: var(--synext-order-primary, #000000);
	color: var(--synext-order-background, #ffffff);
}

/* ---------------------------------------------------------------------------
 * Sections and product cards.
 * ------------------------------------------------------------------------- */

.synext-ro-section {
	margin: 0 0 2rem;
	/* Keep section headings clear of the sticky navigation on anchor jumps.
	   The offset is composed from measured heights, never a fixed guess:
	   see the custom property block near the end of this file.
	   This is the ONLY scroll offset in the plugin. Adding
	   scroll-padding-top on the scrollport as well would not override it:
	   the two add up, which previously doubled the offset. */
	scroll-margin-top: var(--synext-ro-scroll-offset, 5rem);
}

.synext-ro-section-title {
	margin: 0 0 0.25rem;
	font-size: 1.35rem;
}

.synext-ro-section-description {
	margin: 0 0 0.75rem;
	opacity: 0.8;
}

.synext-ro-products {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.synext-ro-card {
	display: flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0.75rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	background: var(--synext-order-background, #ffffff);
}

.synext-ro-card--unavailable {
	opacity: 0.6;
}

.synext-ro-card-media {
	flex: 0 0 84px;
}

.synext-ro-card-media img {
	display: block;
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 8px;
}

.synext-ro-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.synext-ro-card-title {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
}

.synext-ro-card-description {
	margin: 0 0 0.5rem;
	font-size: 0.9em;
	opacity: 0.8;
}

.synext-ro-card-description p {
	margin: 0;
}

.synext-ro-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	flex-wrap: wrap;
}

.synext-ro-card-price {
	font-weight: 700;
}

.synext-ro-card-unavailable {
	font-size: 0.9em;
	font-style: italic;
}

/* ---------------------------------------------------------------------------
 * Buttons.
 * ------------------------------------------------------------------------- */

.synext-ro-button {
	display: inline-block;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--synext-order-primary, #000000);
	border-radius: 8px;
	background: var(--synext-order-primary, #000000);
	color: var(--synext-ro-on-accent, #0A0A0A);
	font: inherit;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.synext-ro-button:hover {
	opacity: 0.85;
	color: var(--synext-ro-on-accent, #0A0A0A);
}

.synext-ro-button--secondary {
	background: transparent;
	color: var(--synext-order-primary, #000000);
}

.synext-ro-button--secondary:hover {
	color: var(--synext-order-primary, #000000);
}

.synext-ro-button:disabled,
.synext-ro-button[aria-disabled="true"] {
	background: #a7a7a7;
	border-color: #a7a7a7;
	cursor: not-allowed;
	opacity: 1;
}

/* Visible focus for every interactive element (WCAG 2.4.7). */
.synext-ro a:focus-visible,
.synext-ro button:focus-visible {
	outline: 3px solid var(--synext-order-accent, #d8b15a);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Wider screens.
 * ------------------------------------------------------------------------- */

@media (min-width: 600px) {
	.synext-ro-products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.synext-ro-products {
		grid-template-columns: repeat(3, 1fr);
	}

	.synext-ro-card {
		flex-direction: column;
	}

	.synext-ro-card-media {
		flex-basis: auto;
	}

	.synext-ro-card-media img {
		width: 100%;
		height: 160px;
	}
}

/* ---------------------------------------------------------------------------
 * Reduced motion.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.synext-ro *,
	.synext-ro *::before,
	.synext-ro *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
 * Phase 5: toast, sticky cart bar, floating cart button, drawer.
 * ------------------------------------------------------------------------- */

.synext-ro-toast {
	position: fixed;
	top: 1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1100;
	max-width: min(92vw, 420px);
	padding: 0.6rem 1rem;
	border-radius: 8px;
	background: var(--synext-order-primary, #000000);
	color: var(--synext-order-background, #ffffff);
	font-size: 0.95em;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	text-align: center;
}

.synext-ro-toast--error {
	background: #b32d2e;
}

/* Sticky bottom bar (mobile / tablet). */
.synext-ro-cartbar {
	display: block;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
	background: var(--synext-order-background, #ffffff);
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.synext-ro-cartbar-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
}

.synext-ro-cartbar-meta {
	font-weight: 400;
	opacity: 0.9;
}

/* Floating cart button (desktop). */
.synext-ro-cartfab {
	display: none;
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 1000;
	width: 56px;
	height: 56px;
	border: none;
	border-radius: 50%;
	background: var(--synext-order-primary, #000000);
	color: var(--synext-order-background, #ffffff);
	font-size: 1.35rem;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.synext-ro-cartfab-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	border-radius: 11px;
	background: var(--synext-order-accent, #d8b15a);
	color: var(--synext-order-text, #1a1a1a);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

@media (min-width: 960px) {
	.synext-ro-cartbar {
		display: none;
	}

	.synext-ro-cartfab:not([hidden]) {
		display: block;
	}
}

/* Overlay + drawer. */
.synext-ro-overlay {
	position: fixed;
	inset: 0;
	z-index: 1040;
	display: none;
	background: rgba(0, 0, 0, 0.45);
}

.synext-ro-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1050;
	/* Closed by default. Visibility is granted only by the open class,
	   which frontend.js adds; never set display here. */
	display: none;
	flex-direction: column;
	width: min(92vw, 400px);
	background: var(--synext-order-background, #ffffff);
	color: var(--synext-order-text, #1a1a1a);
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25);
}

.synext-ro-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.9rem 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.synext-ro-drawer-title {
	margin: 0;
	font-size: 1.15rem;
}

.synext-ro-drawer-close {
	border: none;
	background: transparent;
	color: inherit;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
}

.synext-ro-drawer-content {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1rem;
}

.synext-ro-drawer-empty {
	text-align: center;
	padding: 2rem 0;
}

.synext-ro-drawer-empty-hint {
	opacity: 0.7;
}

.synext-ro-drawer-items {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.synext-ro-drawer-item {
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.synext-ro-drawer-item-info {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.synext-ro-drawer-item-name {
	font-weight: 600;
}

.synext-ro-drawer-item-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

/* Quantity controls.
 *
 * Selectors are doubled up (.synext-ro .synext-ro-qty-button) to reach
 * specificity 0,2,0 so they beat the common theme patterns
 * (.entry-content button, .woocommerce .button, #content button).
 * !important is used ONLY on reset properties that themes set on every
 * button and that would otherwise distort the round target: padding,
 * margins, min/max sizing, borders, shadows, inline text metrics and
 * native appearance. Colour and background stay unflagged so hover,
 * focus and theming still work. */

.synext-ro .synext-ro-qty {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 999px;
	padding: 0.1rem;
	/* Keep the pill from being stretched by a flex parent. */
	flex: 0 0 auto;
}

.synext-ro .synext-ro-qty-button {
	/* Centring: the icon is a flex item, not a glyph on a baseline. */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	flex: 0 0 40px;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	max-width: 40px !important;
	max-height: 40px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	box-shadow: none !important;
	text-shadow: none !important;

	/* Neutralise inherited inline-text metrics that would otherwise shift
	   the content box or add trailing space inside it. */
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: 0 !important;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	text-transform: none !important;
	vertical-align: middle;

	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	overflow: visible;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

/* Themes frequently attach icon-font pseudo-elements to buttons. */
.synext-ro .synext-ro-qty-button::before,
.synext-ro .synext-ro-qty-button::after {
	content: none !important;
	display: none !important;
}

.synext-ro .synext-ro-qty-button .synext-ro-qty-icon {
	display: block;
	width: 18px;
	height: 18px;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible;
	/* Clicks always resolve to the button, never to the svg or path. */
	pointer-events: none;
	flex: 0 0 auto;
}

.synext-ro .synext-ro-qty-button .synext-ro-qty-icon path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.synext-ro .synext-ro-qty-button:hover {
	background: rgba(0, 0, 0, 0.08);
}

.synext-ro .synext-ro-qty-button:focus-visible {
	outline: 3px solid var(--synext-order-accent, #d8b15a);
	outline-offset: 2px;
}

.synext-ro .synext-ro-qty-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 32px;
	min-width: 32px;
	height: 40px;

	margin: 0;
	padding: 0;

	/* Reset the font-size: 0 that would otherwise be inherited if a theme
	   scoped a rule at the container level. */
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.synext-ro-remove {
	border: none;
	background: transparent;
	color: inherit;
	font-size: 0.85em;
	text-decoration: underline;
	cursor: pointer;
	padding: 0.25rem;
}

.synext-ro-drawer-footer {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: 0.75rem;
}

.synext-ro-drawer-subtotal {
	display: flex;
	justify-content: space-between;
	margin: 0 0 0.25rem;
	font-weight: 700;
}

.synext-ro-drawer-note {
	margin: 0 0 0.75rem;
	font-size: 0.85em;
	opacity: 0.7;
}

.synext-ro-drawer-checkout {
	display: block;
	width: 100%;
}

/* Keep the menu content clear of the sticky bar. */
.synext-ro {
	padding-bottom: 4.5rem;
}

@media (min-width: 960px) {
	.synext-ro {
		padding-bottom: 0;
	}
}

/* Busy state while an AJAX request runs. */
.synext-ro [aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Drawer open state and hidden guard.
 *
 * The hidden attribute is only honored by the user-agent stylesheet, which
 * loses to any author rule that sets display. These explicit rules make it
 * impossible for an element to be painted while it is marked hidden, and
 * make the open class the single visual source of truth for the drawer.
 * ------------------------------------------------------------------------- */

.synext-ro [hidden],
.synext-ro-drawer[hidden],
.synext-ro-overlay[hidden],
.synext-ro-cartbar[hidden],
.synext-ro-cartfab[hidden],
.synext-ro-toast[hidden] {
	display: none !important;
}

.synext-ro-drawer.synext-ro-is-open {
	display: flex;
}

.synext-ro-overlay.synext-ro-is-open {
	display: block;
}

/* Background scroll lock while the drawer is open. Applied as a class so no
   inline style on <body> is clobbered or left behind. */
body.synext-ro-scroll-locked {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Phase 8: accessibility and responsive refinements.
 * ------------------------------------------------------------------------- */

/* The sticky category nav must clear the WordPress admin bar for logged-in
   users, otherwise the first category is hidden underneath it.
 *
 * The admin bar's height is NOT a constant, and it cannot be read from the
 * #wpadminbar element either: WordPress gives that element a fixed height
 * and does not clip its overflow, so wrapped toolbar items paint below it
 * without enlarging it. frontend.js measures the lowest bottom edge among
 * the toolbar and its visible top-level items and publishes the result as
 * --synext-ro-admin-bar-height.
 *
 * The measured value is only applied while the bar is actually fixed.
 * Below 783px WordPress switches #wpadminbar to position: absolute, so it
 * scrolls away with the page; reserving space for it there would leave a
 * permanent gap. In that case the script publishes 0px.
 *
 * The literals below are only no-JavaScript fallbacks. The custom property
 * itself is declared once, together with the other layout measurements, in
 * the composed scroll offset block near the end of this file. */
body.admin-bar .synext-ro-nav {
	top: var(--synext-ro-admin-bar-height, 32px);
}

body:not(.admin-bar) .synext-ro-nav {
	top: 0;
}

@media screen and (max-width: 782px) {
	body.admin-bar .synext-ro-nav {
		top: var(--synext-ro-admin-bar-height, 46px);
	}
}

/* Focus visibility on every interactive element, including those added by
   the drawer after an AJAX refresh. :focus is the fallback for engines
   without :focus-visible; the :focus-visible rule then narrows it so mouse
   users do not see a ring. */
.synext-ro a:focus,
.synext-ro button:focus {
	outline: 3px solid var(--synext-order-accent, #d8b15a);
	outline-offset: 2px;
}

.synext-ro a:focus:not(:focus-visible),
.synext-ro button:focus:not(:focus-visible) {
	outline: none;
}

.synext-ro a:focus-visible,
.synext-ro button:focus-visible {
	outline: 3px solid var(--synext-order-accent, #d8b15a);
	outline-offset: 2px;
}

/* Comfortable, WCAG 2.5.8-compliant target for the text-style remove
   control, which would otherwise be a very small hit area. */
.synext-ro .synext-ro-remove {
	min-height: 44px;
	padding: 0.5rem 0.35rem;
}

/* The nav pills are links; give them the same generous target on touch. */
.synext-ro .synext-ro-nav-link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Windows High Contrast / forced-colors mode: system colours replace ours,
   so restore the borders that convey structure and make the status dot
   visible without relying on background colour. */
@media (forced-colors: active) {
	.synext-ro-banner,
	.synext-ro-card,
	.synext-ro-drawer,
	.synext-ro-qty {
		border: 1px solid CanvasText;
	}

	.synext-ro-button {
		border: 1px solid ButtonText;
	}

	.synext-ro-banner-dot {
		border: 2px solid CanvasText;
		background: Canvas;
	}

	.synext-ro .synext-ro-qty-button .synext-ro-qty-icon path {
		stroke: ButtonText;
	}

	.synext-ro a:focus-visible,
	.synext-ro button:focus-visible {
		outline: 3px solid Highlight;
	}
}

/* Users who ask for more contrast get stronger separators. */
@media (prefers-contrast: more) {
	.synext-ro-card,
	.synext-ro-banner,
	.synext-ro-qty {
		border-color: rgba(0, 0, 0, 0.55);
	}

	.synext-ro-card-description,
	.synext-ro-drawer-note,
	.synext-ro-section-description {
		opacity: 1;
	}
}

/* Narrow phones: the drawer takes the full width and the menu grid stays
   single column with tighter padding. */
@media (max-width: 480px) {
	.synext-ro-drawer {
		width: 100vw;
	}

	.synext-ro-card {
		padding: 0.6rem;
	}

	.synext-ro-cartbar-button {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.15rem;
	}
}

/* Large desktops: a fourth column once there is genuinely room for it. */
@media (min-width: 1400px) {
	.synext-ro-products {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Landscape phones and short viewports: keep the drawer scrollable rather
   than letting the footer push the checkout button off screen. */
@media (max-height: 480px) {
	.synext-ro-drawer-content {
		padding: 0.6rem;
	}

	.synext-ro-drawer-header {
		padding: 0.5rem 0.75rem;
	}
}

/* Print: the cart interface is chrome, the menu is the content. */
@media print {
	.synext-ro-drawer,
	.synext-ro-overlay,
	.synext-ro-cartbar,
	.synext-ro-cartfab,
	.synext-ro-toast,
	.synext-ro-nav {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Composed scroll offset.
 *
 * An anchor jump to a category must land below everything that is pinned to
 * the top of the viewport: the WordPress admin bar (when it is fixed) and
 * the sticky category navigation. Both heights are measured at runtime by
 * frontend.js and published as custom properties; neither can be assumed,
 * because the admin bar wraps and the navigation's height follows the
 * theme's typography and the viewport.
 *
 * scroll-margin-top is applied to the sections and nothing else. It is
 * honoured both by scrollIntoView, which the navigation links use, and by
 * the scrolls the browser performs itself: a URL opened with a #category
 * fragment, back and forward navigation, and find-in-page. A
 * scroll-padding-top on the scrollport would NOT replace it but add to it,
 * which is what previously scrolled category jumps twice as far as
 * intended.
 *
 * The fallbacks in the var() calls only apply before the script has run or
 * if it is unavailable; they are intentionally generous.
 * ------------------------------------------------------------------------- */

:root {
	--synext-ro-nav-background: #ffffff;
	--synext-ro-admin-bar-height: 0px;
	--synext-ro-category-nav-height: 0px;
	--synext-ro-cart-bar-height: 0px;
	--synext-ro-scroll-gap: 16px;
	--synext-ro-scroll-offset: calc(
		var(--synext-ro-admin-bar-height, 0px) +
		var(--synext-ro-category-nav-height, 0px) +
		var(--synext-ro-scroll-gap, 16px)
	);
}

/* Declared once, on the sections themselves. Applies equally to link
   clicks, #fragment URLs, back/forward navigation and find-in-page. */
.synext-ro .synext-ro-section,
.synext-ro .synext-ro-section:focus,
.synext-ro .synext-ro-section:target {
	scroll-margin-top: var(--synext-ro-scroll-offset, 5rem);
}

/* ---------------------------------------------------------------------------
 * Menu shell and auto-hiding navigation.
 *
 * The shell is a plain block: no height constraint, no nested scrolling.
 * The document is the only scroll container, so wheel, touch, keyboard and
 * scrollbar all behave exactly as on any other page.
 *
 * Products are kept clear of the navigation by hiding it while the visitor
 * scrolls down rather than by reserving space for it.
 * ------------------------------------------------------------------------- */

.synext-ro-menu-shell {
	display: block;
}

.synext-ro-nav--hidden {
	transform: translateY(-100%);
}

/* Never animate, and never hide, for visitors who asked for reduced motion:
   an element that slides in and out is exactly what they opted out of. */
@media (prefers-reduced-motion: reduce) {
	.synext-ro-nav {
		transition: none;
	}

	.synext-ro-nav--hidden {
		transform: none;
	}
}

@media print {
	.synext-ro-nav--hidden {
		transform: none;
	}
}
}

/* ===========================================================================
 * Printed-card layout.
 *
 * Reproduces the restaurant's own menu design. Every colour and font comes
 * from a custom property so the dashboard Appearance settings can change
 * them; the fallbacks are the restaurant's original values, so the menu
 * looks identical before anything is configured.
 * ======================================================================== */

.synext-ro--list {
	background-color: var(--synext-ro-bg, #0A0A0A);
	color: var(--synext-ro-text, #F7E8C6);
	font-family: var(--synext-ro-font-body, "Montserrat", sans-serif);
	line-height: 1.75;
}

.synext-ro--list h2,
.synext-ro--list h3 {
	font-family: var(--synext-ro-font-heading, "Cormorant Garamond", serif);
	font-weight: 500;
	letter-spacing: 0.005em;
}

/* -------------------------------------------------------------- tab strip */

.synext-ro-tabs-wrap {
	position: sticky;
	top: var(--synext-ro-admin-bar-height, 0px);
	z-index: 30;
	margin-bottom: clamp(1.5rem, 4vw, 3rem);
	padding-block: 0.6rem 1.4rem;
	background: linear-gradient(180deg, var(--synext-ro-bg, #0A0A0A) 62%, transparent);
	transition: transform 0.2s ease;
}

.synext-ro-tabs {
	display: flex;
	gap: 0.4rem;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
	padding-bottom: 2px;
	border-bottom: 1px solid rgba(212, 162, 76, 0.2);
	border-bottom-color: color-mix(in srgb, var(--synext-ro-accent, #D4A24C) 20%, transparent);
}

.synext-ro-tabs::-webkit-scrollbar { display: none; }

.synext-ro-tab {
	flex: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--synext-ro-text, #F7E8C6);
	opacity: 0.6;
	font-family: inherit;
	font-size: 0.85rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 0.85rem 1.15rem;
	min-height: 46px;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.3s ease, opacity 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.synext-ro-tab:hover { opacity: 1; }

.synext-ro-tab[aria-selected="true"] {
	opacity: 1;
	color: var(--synext-ro-accent, #D4A24C);
	border-bottom-color: var(--synext-ro-accent, #D4A24C);
}

.synext-ro-tabs-arrow {
	display: none;
	position: absolute;
	top: 0.6rem;
	z-index: 4;
	width: 42px;
	height: 46px;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: var(--synext-ro-bg, #0A0A0A);
	border: 1px solid var(--synext-ro-accent, #D4A24C);
	border-radius: var(--synext-ro-radius, 2px);
	color: var(--synext-ro-accent, #D4A24C);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
}

.synext-ro-tabs-arrow--prev { left: 0; }
.synext-ro-tabs-arrow--next { right: 0; }

.synext-ro-tabs-wrap--overflow { position: sticky; }
.synext-ro-tabs-wrap--overflow .synext-ro-tabs-arrow { display: inline-flex; }
.synext-ro-tabs-wrap--overflow .synext-ro-tabs { padding-inline: 48px; }
.synext-ro-tabs-arrow:disabled { opacity: 0.22; cursor: default; }

/* On phones the arrows become the category navigator. Only the active
   category label is shown between them, centered in the available space. */
@media (max-width: 620px) {
	.synext-ro-tabs-arrow {
		width: 34px;
		height: 42px;
		font-size: 1.15rem;
	}

	.synext-ro-tabs-wrap--overflow .synext-ro-tabs {
		padding-inline: 38px;
		scroll-padding-inline: 38px;
	}

	/* Mobile category navigation intentionally shows only the currently active
	   category between the previous/next arrows. The hidden tabs stay in the
	   DOM so the arrow controls can activate them through the same tab-click
	   logic used elsewhere. */
	.synext-ro-tabs-wrap .synext-ro-tabs-arrow {
		display: inline-flex;
	}

	.synext-ro-tabs-wrap .synext-ro-tabs {
		padding-inline: 38px;
		scroll-padding-inline: 38px;
	}

	.synext-ro-tabs-wrap .synext-ro-tab:not([aria-selected="true"]) {
		display: none;
	}

	.synext-ro-tabs-wrap .synext-ro-tab[aria-selected="true"] {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		padding-inline: 0.35rem;
		text-align: center;
		white-space: normal;
		line-height: 1.2;
	}
}

/* ---------------------------------------------------------------- panels */

.synext-ro-panel {
	border: 1px solid rgba(212, 162, 76, 0.2);
	border-color: color-mix(in srgb, var(--synext-ro-accent, #D4A24C) 20%, transparent);
	border-radius: var(--synext-ro-radius, 2px);
	padding: clamp(1.35rem, 3.5vw, 3rem);
	scroll-margin-top: var(--synext-ro-scroll-offset, 5rem);
}

.synext-ro-panel[hidden] { display: none !important; }
.synext-ro-panel + .synext-ro-panel { margin-top: 1.5rem; }
.synext-ro--list.synext-ro--tabbed .synext-ro-panel + .synext-ro-panel { margin-top: 0; }

.synext-ro-panel-title {
	font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
	color: var(--synext-ro-accent, #D4A24C);
	text-align: center;
	margin: 0 0 0.4rem;
}

.synext-ro-panel-title::after {
	content: "";
	display: block;
	width: 60px;
	height: 1px;
	margin: 0.9rem auto 1.8rem;
	background: linear-gradient(90deg, transparent, var(--synext-ro-accent, #D4A24C), transparent);
}

.synext-ro-panel-note {
	text-align: center;
	font-size: 0.85rem;
	opacity: 0.7;
	margin: -0.8rem 0 1.5rem;
}

/* ------------------------------------------------------------- dish rows */

.synext-ro-list {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.synext-ro-list:not(.synext-ro-list--2col) {
	max-width: 720px;
	margin-inline: auto;
}

.synext-ro-list--2col {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 4vw, 3.5rem);
}

.synext-ro-row {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0;
	padding: 0.72rem 0.6rem;
	border-radius: var(--synext-ro-radius, 2px);
	transition: background-color 0.3s ease;
}

.synext-ro-row:hover {
	background: rgba(212, 162, 76, 0.12);
	background: color-mix(in srgb, var(--synext-ro-accent, #D4A24C) 12%, transparent);
}

.synext-ro-row--unavailable { opacity: 0.55; }

.synext-ro-row-main { min-width: 0; }

.synext-ro-row-name {
	margin: 0;
	color: var(--synext-ro-heading, #FFF8EE);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.3;
}

.synext-ro-row-note {
	margin: 0.15rem 0 0;
	font-size: 0.76rem;
	opacity: 0.65;
	letter-spacing: 0.04em;
	line-height: 1.5;
}

.synext-ro-row-note p { margin: 0; }

.synext-ro-row-dots {
	flex: 1 1 auto;
	min-width: 1.5rem;
	border-bottom: 1px dotted rgba(212, 162, 76, 0.32);
	border-bottom-color: color-mix(in srgb, var(--synext-ro-accent, #D4A24C) 32%, transparent);
	transform: translateY(-0.28em);
}

.synext-ro-row-price {
	flex: none;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: 1rem;
	color: var(--synext-ro-accent, #D4A24C);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.synext-ro-row-price del { opacity: 0.5; font-weight: 400; }
.synext-ro-row-price ins { text-decoration: none; }

.synext-ro-row-action { flex: none; }

.synext-ro-row-unavailable {
	font-size: 0.75rem;
	font-style: italic;
	opacity: 0.8;
}

/* --------------------------------------------------------- order control */

.synext-ro .synext-ro-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 36px;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--synext-ro-accent, #D4A24C);
	border-radius: var(--synext-ro-radius, 2px);
	background: transparent;
	color: var(--synext-ro-accent, #D4A24C);
	font-family: inherit;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}

.synext-ro .synext-ro-add:hover {
	background: var(--synext-ro-accent, #D4A24C);
	color: var(--synext-ro-bg, #0A0A0A);
}

.synext-ro .synext-ro-add:disabled,
.synext-ro .synext-ro-add[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
	background: transparent;
	color: var(--synext-ro-accent, #D4A24C);
}

.synext-ro-add-icon { display: inline-flex; }

.synext-ro-add-icon svg path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* ---------------------------------------------------------- size picker */

.synext-ro-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-top: 0.45rem;
}

.synext-ro .synext-ro-size {
	min-height: 30px;
	padding: 0.25rem 0.7rem;
	border: 1px solid rgba(212, 162, 76, 0.32);
	border-color: color-mix(in srgb, var(--synext-ro-accent, #D4A24C) 32%, transparent);
	border-radius: 999px;
	background: transparent;
	color: var(--synext-ro-text, #F7E8C6);
	font-family: inherit;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.synext-ro .synext-ro-size:hover { border-color: var(--synext-ro-accent, #D4A24C); }

.synext-ro .synext-ro-size[aria-pressed="true"] {
	background: var(--synext-ro-accent, #D4A24C);
	border-color: var(--synext-ro-accent, #D4A24C);
	color: var(--synext-ro-bg, #0A0A0A);
	font-weight: 600;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
	.synext-ro-list--2col { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
	.synext-ro-panel { padding: 1.35rem 1.1rem 1.6rem; }

	.synext-ro-row {
		flex-wrap: wrap;
		align-items: center;
		gap: 0.3rem 0.6rem;
		padding: 0.8rem 0.35rem;
	}

	.synext-ro-row-main { flex: 1 1 100%; }
	.synext-ro-row-dots { display: none; }
	.synext-ro-row-price { margin-right: auto; }
	.synext-ro-row-action { margin-left: auto; }
}

/* ---------------------------------------------------------------------------
 * Label colour on filled buttons.
 *
 * These are anchors as well as buttons, and a theme rule such as
 * "#mq-site a { color: ... }" carries an id, so it outranks any class
 * selector here however it is written. !important is limited to this one
 * property on this one component; the colour itself stays configurable
 * through --synext-ro-on-accent in the Appearance settings.
 * ------------------------------------------------------------------------- */

.synext-ro a.synext-ro-button,
.synext-ro button.synext-ro-button,
.synext-ro .synext-ro-button,
.synext-ro .synext-ro-drawer-checkout,
.synext-ro .synext-ro-cartbar-button {
	color: var(--synext-ro-on-accent, #0A0A0A) !important;
}

.synext-ro a.synext-ro-button:hover,
.synext-ro button.synext-ro-button:hover,
.synext-ro .synext-ro-drawer-checkout:hover,
.synext-ro .synext-ro-cartbar-button:hover {
	color: var(--synext-ro-on-accent, #0A0A0A) !important;
}

/* The disabled state keeps its grey background, so its label must not use
   the accent-contrast colour. */
.synext-ro .synext-ro-button:disabled,
.synext-ro .synext-ro-button[aria-disabled="true"] {
	color: #ffffff !important;
}

/* Outlined controls sit on the page background and keep the accent colour. */
.synext-ro .synext-ro-button--secondary,
.synext-ro .synext-ro-add,
.synext-ro .synext-ro-size {
	color: var(--synext-ro-accent, #D4A24C) !important;
}

.synext-ro .synext-ro-add:hover,
.synext-ro .synext-ro-size[aria-pressed="true"] {
	color: var(--synext-ro-on-accent, #0A0A0A) !important;
}