/*
 * Restaurante theme – styles (Stage 4, from the Figma mockups).
 * Desktop reference: 1440 px wide; mobile reference: 402 px wide.
 * Fonts are local (no external requests): Fraunces + PT Sans, both SIL Open Font License 1.1.
 */

/* Fraunces (SIL OFL 1.1, assets/fonts/OFL-Fraunces.txt) replaces Larken, which has no confirmed web licence.
   PT Sans (SIL OFL 1.1, assets/fonts/OFL-PTSans.txt). Static instances, Latin subset, served locally. */
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-light-italic.woff") format("woff");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-text-italic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-bold-italic.woff") format("woff");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "PT Sans";
	src: url("../fonts/pt-sans-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--cream: #ffedd4;
	--blue: #29abe2;
	--blue-dark: #1f8fc0;
	--brown: #5c4c44;
	--beige: #f0dec4;
	--divider: #000;
	--strip: clamp(50px, 7.85vw, 113px);
	--float-bottom: 24px;
	--cta: 0px;          /* reservation badge diameter (0 = not shown) */
	--cta-gutter: 0px;   /* side room kept free for the badge next to the menu */
	--cta-shift: 0px;    /* moves the badge a little off the strip where "back to top" would not fit on beige */
	--serif: "Fraunces", Georgia, "Times New Roman", serif;
	--sans: "PT Sans", "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* iPhone / iPad (WebKit on iOS only; the feature query matches nothing else): Safari paints the area it reveals
   beyond the end of the page (the rubber-band bounce at the bottom) with a flat page colour, never with the blue
   pattern — that is the empty band under the waves. Switching the bounce off at the page level removes that area,
   so the page always ends with the waves. Android / desktop keep their normal behaviour (pull-to-refresh). */
@supports (-webkit-touch-callout: none) {
	html,
	body { overscroll-behavior-y: none; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--brown);
	font: 16px/1.4 var(--sans);
}
body.is-locked { overflow: hidden; }

img { max-width: 100%; height: auto; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; }
abbr[title] { text-decoration: none; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.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;
}
.skip-link {
	position: absolute; left: 8px; top: -60px; z-index: 2000;
	padding: 10px 16px;
	background: var(--brown); color: var(--cream);
	text-decoration: none;
}
.skip-link:focus { top: 8px; }

.icon { display: block; width: 100%; height: 100%; }

/* ---------- Page frame: blue pattern strips + cream panel ---------- */
/* Strips: 150 px on wide screens, scaling down in between (the 221 px image is only reduced, never stretched).
   They scroll with the page (.site-frame). A fixed copy behind the page (body::before/::after, taller than the
   screen) fills any area outside the page itself: iOS bounce at the end, the iPhone home-indicator area
   (viewport-fit=cover) — so the strip never stops before the bottom edge of the screen. */
@media (min-width: 768px) {
	:root {
		--strip: clamp(60px, calc(13.4vw - 42.9px), 150px); /* 60 px at 768 → 150 px from 1440 */
		--cta: 87px;
		--cta-gutter: calc(var(--cta) / 2 + 52px); /* badge half over the strip (0.2.5): its inner half + 52 px */
	}
}
@media (min-width: 1100px) {
	:root { --cta: 139px; } /* +60 % (desktop only) */
}
@media (min-width: 768px) and (max-width: 1099px) {
	:root { --cta-shift: 4px; } /* 87 px badge: its inner half is narrower than "back to top" (44 px) */
}
body { background: var(--cream); }
body::before,
body::after {
	content: "";
	position: fixed;
	z-index: -1;
	top: -50vh;
	height: 200vh;
	width: var(--strip);
	background: url("../img/pattern.webp") left top / var(--strip) auto repeat-y;
	pointer-events: none;
}
body::before { left: 0; }
body::after { right: 0; }
.site-frame {
	position: relative;
	min-height: 100vh;
	padding: 0 var(--strip);
	background:
		url("../img/pattern.webp") left top / var(--strip) auto repeat-y,
		url("../img/pattern.webp") right top / var(--strip) auto repeat-y,
		var(--cream);
	overflow-x: clip;
}

/* ---------- Header ---------- */
.site-header {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	min-height: 290px;
	padding-top: 32px;
}
.site-header__map { position: relative; padding-left: 77px; }
.site-header__italy { display: block; width: 220px; }
.site-header__claim { position: absolute; top: 88px; left: 50px; }
.site-header__tagline {
	font-size: 14.3px;
	letter-spacing: .22em;
	text-transform: uppercase;
	line-height: 1.2;
}
.site-header__hours--mobile,
.site-header__open--mobile { display: none; }
.site-header__open { margin-right: .9em; }

.site-header__brand { padding-top: 10px; text-align: center; }
.site-title { line-height: 0; }
.site-title a { display: inline-block; }
.site-logo { width: 232px; }

.site-header__info { padding-top: 26px; padding-right: 27px; text-align: right; }
.site-header__top { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } /* ES | EN on top, hours below (0.2.5) */
.site-header__time,
.site-header__open { white-space: nowrap; }
.site-header__hours {
	font-size: 14px;
	letter-spacing: .25em;
	text-transform: uppercase;
	line-height: 1.5;
}
.site-header__address {
	margin-top: 14px;
	font-size: 13.7px;
	overflow-wrap: anywhere;
	font-style: normal;
	letter-spacing: .08em;
	line-height: 1.45;
}
.site-header__address a { text-decoration: none; }
.site-header__address a:hover { text-decoration: underline; }

.lang-switch ul { display: flex; gap: 0; }
.lang-switch li + li::before { content: "|"; padding: 0 .45em; }
.lang-switch a { text-decoration: none; }
.lang-switch a[aria-current] { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lang-switch--header { font-size: 13.5px; letter-spacing: .12em; }

.social { display: flex; justify-content: flex-end; gap: 19px; margin-top: 12px; }
.social a { display: block; border-radius: 50%; }
.social img { display: block; width: 35px; height: 35px; }
.social a:hover img { opacity: .85; }

.reservation {
	/* Follows the visible screen (desktop/tablet only; never on mobile). */
	position: fixed;
	top: var(--cta-top, 280px); /* set by JS: level with the "Menú" title at the top of the page */
	right: calc(var(--strip) - var(--cta) / 2 + var(--cta-shift)); /* about half of the circle over the blue strip */
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var(--cta);
	height: var(--cta);
	padding: 0 0 calc(var(--cta) * .12); /* icon and text a little higher in the circle */
	border-radius: 50%;
	background: var(--brown);
	color: var(--cream);
	text-decoration: none;
	text-align: center;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
	line-height: 14px;
	transition: background-color .2s, box-shadow .2s;
}
.reservation { --k: calc(var(--cta) / 87px); transition: background-color .2s, box-shadow .2s, opacity .25s, visibility .25s; }
.reservation.is-hidden { opacity: 0; visibility: hidden; }
.reservation__icon { display: block; width: calc(26px * var(--k)); height: calc(26px * var(--k)); margin: 0 auto calc(1px * var(--k)); }
.reservation__label { display: block; font-family: var(--serif); font-weight: 300; font-style: italic; font-size: calc(12.5px * var(--k)); line-height: calc(13px * var(--k)); }
/* Upright, one line, inside the circle (international prefix dropped on the badge only; the link keeps it). */
.reservation__number { display: block; margin-top: calc(1px * var(--k)); font-family: var(--serif); font-weight: 700; font-style: normal; font-size: calc(11.5px * var(--k)); line-height: calc(13px * var(--k)); white-space: nowrap; }
.reservation:hover { background: #4a3c35; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }

.menu-toggle,
.mobile-menu__close {
	display: none;
	position: absolute;
	top: 28px;
	right: 15px;
	width: 50px;
	height: 50px;
	padding: 12px;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.menu-toggle { background: var(--blue); color: #fff; }
.mobile-menu__close { background: var(--brown); color: var(--cream); }

/* ---------- Intro (front page content, optional) ---------- */
.intro { max-width: 640px; margin: 0 auto 24px; text-align: center; font-size: 17px; line-height: 1.55; }
.intro p + p { margin-top: .8em; }

/* ---------- Menu ---------- */
.menu__title {
	margin-top: 22px;
	font-family: var(--serif);
	font-weight: 300;
	font-style: italic;
	font-size: 74.7px;
	line-height: 1;
	text-align: center;
}
.menu__empty { margin: 30px 0 60px; text-align: center; }

.menu-nav { margin: 14px auto 0; max-width: min(1180px, calc(100% - 2 * var(--cta-gutter))); }
.menu-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 17px 15px; }
.chip {
	display: inline-block;
	padding: 8px 13px;
	background: var(--beige);
	color: var(--brown);
	font-family: var(--serif);
	font-weight: 300;
	font-style: italic;
	font-size: 18.9px;
	line-height: 23px;
	border-radius: 2px; /* 0.2.12: as in Figma (all states) */
	text-decoration: none;
}
.chip:hover,
.chip:focus-visible,
.chip[aria-current="true"] { background: var(--brown); color: var(--cream); }
.chip--gallery { background: var(--blue); color: #fff; }
.chip--gallery:hover,
.chip--gallery:focus-visible { background: var(--blue-dark); color: #fff; }

.menu-category { position: relative; margin-top: 96px; }
.menu-category:first-of-type { margin-top: 38px; }
.menu-category__title {
	position: relative;
	z-index: 1;
	padding-inline: var(--cta-gutter); /* long titles wrap before reaching the reservation badge */
	font-family: var(--serif);
	font-weight: 300;
	font-style: italic;
	font-size: 37.3px;
	line-height: 1.15;
	text-align: center;
	scroll-margin-top: 24px;
}
.menu-category__title::after {
	content: "";
	display: block;
	width: 211.5px; /* +50 % (0.2.5); the 234 px image is only reduced */
	height: 9px;
	margin: 7px auto 0;
	background: url("../img/wave-blue.png") center / contain no-repeat;
}

.menu-category__deco {
	position: absolute;
	z-index: 0;
	top: 20px;
	transform: translateY(-50%); /* Centred on the category title, beside it. */
	/* Never wider than the free side margin, so it cannot reach the text columns. */
	width: min(calc(var(--w) * .72px), 26vw, calc(50vw - 370px));
	height: auto;
	pointer-events: none;
	user-select: none;
}
.has-deco--left .menu-category__deco { left: calc(-1 * var(--strip)); }
.has-deco--right .menu-category__deco { right: calc(-1 * var(--strip)); }
/* First category (Figma): the decoration hangs below the two rows of category chips,
   its top just under the title line, at half the size of its 2x export. */
@media (min-width: 1100px) {
	.menu-category:first-of-type .menu-category__deco {
		top: 23px;
		transform: none;
		width: min(calc(var(--w) * .5px), 26vw, calc(50vw - 370px));
	}
}

.dishes {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: min(1186px, calc(100% - 2 * var(--cta-gutter))); /* ~100 px wider (0.2.5), never under the badge */
	margin: 25px auto 0; /* 25 px under the blue wave */
}
.dish {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 24px;
	text-align: center;
	overflow-wrap: anywhere;
}
.dish__name {
	max-width: 560px;
	font-family: var(--serif);
	font-weight: 700;
	font-size: 18.6px;
	line-height: 1.35;
}
.dish__description {
	max-width: 500px;
	margin-top: 6px;
	font-family: var(--serif);
	font-weight: 400;
	font-style: italic;
	font-size: 17.4px;
	line-height: 23.5px;
}
.dish__price { white-space: nowrap; }
/* Divider under every dish except the last row (rule approved for Stage 4). */
.dish::after {
	content: "";
	display: block;
	width: 200px;
	height: 1px;
	margin: 25px 0 26px;
	background: var(--divider);
}
.dish:last-child::after,
.dish:nth-last-child(2):nth-child(odd)::after { display: none; }
/* Odd number of dishes: the last one is alone in its row, centred. */
.dish:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dish:last-child:nth-child(odd) .dish__description { max-width: 760px; }

/* ---------- Gallery carousel ---------- */
.gallery { margin-top: 68px; }
.gallery__controls { display: flex; justify-content: center; gap: 34px; margin-bottom: 18px; }
.gallery__arrow {
	width: 26px;
	height: 40px;
	padding: 2px;
	border: 0;
	background: none;
	color: var(--blue);
	cursor: pointer;
}
.gallery__arrow:disabled { color: var(--brown); cursor: default; }
.gallery__frame {
	margin: 0 calc(var(--strip) * -.42);
	padding: 26px 17px; /* +30 % */
	background: var(--beige);
}
.gallery__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { flex: 0 0 auto; scroll-snap-align: start; }
.gallery__open { display: block; overflow: hidden; padding: 0; border: 0; background: none; cursor: pointer; }
.gallery__img { display: block; width: auto; height: 270px; max-width: none; object-fit: cover; } /* 208 → 270 px (+30 %), width follows the photo's own proportions */

/* ---------- Lightbox ---------- */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(92, 76, 68, .85);
	touch-action: pan-y;
}
.lightbox__inner { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.lightbox__figure { position: relative; margin: 0; max-width: min(72vw, 1100px); }
.lightbox__img { display: block; width: auto; height: auto; max-width: 100%; max-height: 80vh; object-fit: contain; transition: opacity .18s ease; }
.lightbox__img.is-loading { opacity: .35; }
.lightbox__close {
	position: absolute;
	top: -22px;
	right: -22px;
	width: 46px;
	height: 46px;
	padding: 10px;
	border: 0;
	border-radius: 50%;
	background: var(--cream);
	color: var(--brown);
	cursor: pointer;
}
.lightbox__arrow {
	position: absolute;
	top: 50%;
	width: 42px;
	height: 76px;
	margin-top: -38px;
	padding: 4px;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}
.lightbox__arrow--prev { left: max(16px, calc(14vw - 60px)); }
.lightbox__arrow--next { right: max(16px, calc(14vw - 60px)); }
.lightbox :focus-visible { outline-color: #fff; }

/* ---------- Footer ---------- */
.site-footer { position: relative; padding: 72px 0 50px; text-align: center; font-size: 20px; } /* 0.2.11: no logo; compact */
.site-footer > .delivery:first-child { margin-top: 0; }
.delivery { margin-top: 24px; line-height: 30px; }
.delivery--phone { display: flex; justify-content: center; align-items: center; gap: 8px; }
.delivery a { text-decoration: none; }
.delivery a:hover { text-decoration: underline; }
.delivery--note { margin-top: 30px; }
.delivery--note .delivery__line + .provider + .delivery__line,
.delivery--note .delivery__line + .delivery__line { display: block; }
.provider { display: inline-block; flex: none; vertical-align: -6px; }
.provider img { max-width: none; }
.provider:hover { opacity: .8; }
.provider--justeat img { width: 55px; }
.provider--glovo img { width: 95px; margin-left: 8px; }
.provider--below { display: none; }

/* Back to top. Without JS it sits in its Figma place in the footer.
   With JS (.to-top--float) it floats 24 px from the visible screen corner (safe areas included)
   once the visitor has scrolled, and docks back into the footer place when the footer arrives,
   so it never covers footer text, logos or links. */
.to-top {
	--dock-top: 278px;
	--dock-right: calc(var(--cta) / 2 + var(--cta-shift) - 44px); /* left edge in line with the reservation badge */
	--float-gap: calc(var(--strip) + var(--cta) / 2 + var(--cta-shift) - 44px);
	position: absolute;
	top: var(--dock-top);
	right: var(--dock-right);
	z-index: 50;
	width: 44px;
	height: 44px;
	padding: 12px 10px;
	border-radius: 50%;
	background: var(--beige); /* 0.2.5: former hover look is now the default … */
	color: var(--brown);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.to-top--float:not(.is-docked) {
	position: fixed;
	top: auto;
	right: max(var(--float-gap), calc(env(safe-area-inset-right) + 12px));
	bottom: max(var(--float-bottom), calc(env(safe-area-inset-bottom) + 12px));
}
.to-top--float:not(.is-docked):not(.is-visible) { visibility: hidden; opacity: 0; }
.to-top--float { transition: opacity .2s, visibility .2s, background-color .2s, color .2s; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 24px;
	margin-top: 110px;
	padding: 0 16px;
	font-size: 16.7px;
	text-align: left;
}
.site-footer__credit { margin-left: auto; white-space: nowrap; }
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: baseline; }
/* Legal links: own centred row, | between them, 50 px above and below (0.2.5). Not rendered when empty. */
.site-footer__legal-links { padding: 50px 16px; font-size: 16.5px; } /* +2 px (0.2.11) */
.site-footer__legal-links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 30px; }
/* The "|" sits in the gap and takes no room, so hiding it never moves the links. */
.site-footer__legal-links li { position: relative; white-space: nowrap; }
.site-footer__legal-links li + li::before { content: "|"; position: absolute; left: -15px; transform: translateX(-50%); }
.site-footer__legal-links li.is-row-start::before { content: none; } /* no "|" at the start of a wrapped row (JS) */
.site-footer__legal-links a { text-decoration: none; text-underline-offset: 3px; }
.site-footer__legal-links a:hover,
.site-footer__legal-links a:focus-visible { text-decoration: underline; }
.site-footer__bottom.has-legal { margin-top: 0; }
.site-footer__bottom a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Legal pages ---------- */
.page-content { max-width: calc(760px + 2 * max(24px, var(--cta-gutter))); margin: 30px auto 70px; padding: 0 max(24px, var(--cta-gutter)); }
.page-content__title {
	font-family: var(--serif);
	font-weight: 300;
	font-style: italic;
	font-size: 60px;
	line-height: 1.1;
	text-align: center;
	margin-bottom: 40px;
}
.page-content__title::after {
	content: "";
	display: block;
	width: 211.5px;
	height: 9px;
	margin: 14px auto 0;
	background: url("../img/wave-blue.png") center / contain no-repeat;
}
.page-content__body { font-size: 17px; line-height: 1.7; overflow-wrap: break-word; }
.page-content__body > * + * { margin-top: 1em; }
.page-content__body h2 { margin-top: 1.8em; font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.25; }
.page-content__body h3 { margin-top: 1.5em; font-family: var(--serif); font-weight: 700; font-size: 21px; line-height: 1.3; }
.page-content__body h4 { margin-top: 1.3em; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 19px; }
.page-content__body h2 + *,
.page-content__body h3 + *,
.page-content__body h4 + * { margin-top: .5em; }
.page-content__body ul { list-style: disc; padding-left: 1.4em; }
.page-content__body ol { list-style: decimal; padding-left: 1.6em; }
.page-content__body li + li { margin-top: .35em; }
.page-content__body li::marker { color: var(--blue); }
.page-content__body a { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 2px; }
.page-content__body a:hover { color: var(--brown); }
.page-content__body strong { font-weight: 700; }
.page-content__body blockquote { padding-left: 1em; border-left: 3px solid var(--blue); font-style: italic; }
.page-content__body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.page-content__body .wp-block-table { overflow-x: auto; }
.page-content__body th,
.page-content__body td { padding: 8px 10px; border-bottom: 1px solid rgba(92, 76, 68, .25); text-align: left; vertical-align: top; }
.page-content__body hr { border: 0; border-top: 1px solid rgba(92, 76, 68, .3); margin: 2em 0; }

/* ---------- Mobile menu (dialog) ---------- */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 900;
	overflow-y: auto;
	padding: 62px 20px 48px;
	background: var(--blue);
	color: var(--cream);
	text-align: center;
	overscroll-behavior: contain;
}
.mobile-menu::before {
	content: "";
	position: fixed;
	top: 65px;
	left: 50%;
	width: min(290px, 74vw);
	aspect-ratio: 399 / 473;
	transform: translateX(-46%);
	background: url("../img/italy-white.png") center / contain no-repeat;
	opacity: .22;
	pointer-events: none;
}
.mobile-menu .mobile-menu__close { display: block; }
.mobile-menu__nav { position: relative; }
.mobile-menu__nav a {
	display: inline-block;
	padding: 4px 0;
	font-family: var(--serif);
	font-weight: 300;
	font-style: italic;
	font-size: 21.3px;
	line-height: 1.25;
	text-decoration: none;
}
.mobile-menu__cat::after {
	content: "";
	display: block;
	width: 92px;
	height: 5px;
	margin: 9px auto 9px; /* 0.2.12: −3 px above and below the brown wave */
	background: url("../img/wave-brown.png") center / contain no-repeat;
}
.mobile-menu__extra { margin-top: 16px; }
.mobile-menu__cat + .mobile-menu__extra { margin-top: 16px; } /* 0.2.12: "Galería / Gallery" 10 px higher (gap to the last wave 26 → 16 px; margins collapse) */
.mobile-menu__address { position: relative; margin-top: 36px; font-size: 16.7px; font-style: normal; letter-spacing: .06em; line-height: 1.5; }
.lang-switch--menu { position: relative; margin-top: 16px; font-size: 17.3px; letter-spacing: .12em; }
.lang-switch--menu li + li::before { padding: 0 calc(.45em + 10px); } /* +20 px between ES and EN */
.lang-switch--menu ul { justify-content: center; }
.mobile-menu .social { position: relative; justify-content: center; gap: 12px; margin-top: 24px; }
.mobile-menu .social { gap: 14px; }
.mobile-menu .social a { padding: 2px; } /* 40 px icon + padding = 44 px touch target */
.mobile-menu .social img { width: 40px; height: 40px; }

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
	.site-header__map { padding-left: 20px; }
	.site-header__italy { width: 187px; }
	.site-header__claim { left: 14px; top: 70px; }
	.site-header__top .site-header__open { display: block; margin-right: 0; white-space: nowrap; } /* own line on narrow screens */
	.site-header__hours { font-size: 12.5px; letter-spacing: .15em; }
	.site-header__tagline { white-space: nowrap; letter-spacing: .16em; }
	.site-header__tagline { font-size: 11px; }
	.site-header__info { padding-right: 16px; }
	.site-header__top { flex-direction: column; align-items: flex-end; gap: 6px; }
	.site-logo { width: 200px; }
}

/* Tablet (no mockup): smaller map so the header columns never touch the logo; the badge starts
   below the header so it never covers the address. */
@media (min-width: 768px) and (max-width: 1099px) {
	.site-header__map { padding-left: 8px; }
	.site-header__italy { width: 150px; }
	.site-header__claim { left: 8px; top: 58px; }
	.site-header__tagline { font-size: 10px; letter-spacing: .1em; }
	.social { gap: 10px; }
	.social img { width: 30px; height: 30px; }
}

/* One column for dishes below 1200 px (two readable columns no longer fit beside the reservation badge). */
@media (max-width: 1199px) {
	.dishes { grid-template-columns: 1fr; max-width: min(560px, calc(100% - 2 * var(--cta-gutter))); }
	.dish::after { display: block; }
	.dish:nth-last-child(2):nth-child(odd)::after { display: block; }
	.dish:last-child::after { display: none; }
}

/* No mockup between 768 and 1099 px: too little side margin, so the decoration
   sits in its own row above the title (like on mobile) and never covers text. */
@media (min-width: 768px) and (max-width: 1099px) {
	.menu-category__deco {
		position: relative;
		top: 0;
		transform: none;
		display: block;
		width: min(calc(var(--w) * .45px), 32vw);
		margin-bottom: 6px;
	}
	.has-deco--right .menu-category__deco { margin-left: auto; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	:root { --strip: 50px; --cta: 64px; }
	.site-frame {
		padding: 0 0 0 var(--strip);
		background:
			url("../img/pattern-mobile.webp") left top / var(--strip) auto repeat-y,
			var(--cream);
	}
	body::before { background-image: url("../img/pattern-mobile.webp"); }
	body::after { display: none; }

	.site-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 0;
		padding: 27px 16px 0;
		text-align: center;
	}
	.site-header__brand { order: -1; }
	.site-header__brand { padding-top: 0; }
	.site-logo { width: 132px; }
	.site-header__info { display: none; }
	/* Reservation badge on mobile (not in the mobile mockup; requested): 68 px, bottom-left on the blue strip,
	   50 px above the screen edge like "back to top" on the right. Hidden while it would cover the gallery
	   or the footer (JS), and under the open menu / lightbox. */
	.reservation {
		--cta: 72px;
		top: auto;
		right: auto;
		left: calc(10px + env(safe-area-inset-left)); /* 0.2.6: 10 px from the left screen edge */
		bottom: max(50px, calc(env(safe-area-inset-bottom) + 12px));
		padding: 0 0 9px; /* icon and text higher (0.2.5) */
	}
	.reservation__icon { width: 20px; height: 20px; margin-bottom: 1px; }
	/* 0.2.7: very soft pulse — a faint ring of the same brown grows and fades every 3.6 s.
	   The button itself does not move or change colour; switched off with reduced motion. */
	.reservation::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		box-shadow: 0 0 0 0 rgba(92, 76, 68, .28);
		animation: rc-pulse 3.6s ease-out infinite;
		pointer-events: none;
	}
	.reservation__label { font-size: 9.5px; line-height: 11px; }
	.reservation__number { font-size: 9.5px; line-height: 11px; margin-top: 0; }
	/* 0.2.7: full 72 px badge (icon, label, number) at the top of the page; once the visitor scrolls down it
	   turns smoothly into a compact 48 px phone button (10–58 px from the left, the dish text starts at ~72 px)
	   and stays compact; back at the top it is full again. Both are tel: links, tappable and fully on screen. */
	.reservation {
		transition: width .3s ease, height .3s ease, padding .3s ease, opacity .25s, visibility .25s;
	}
	.reservation__label,
	.reservation__number { transition: opacity .2s ease; }
	.reservation.is-compact { --cta: 48px; padding: 0; }
	.reservation.is-compact .reservation__icon { width: 22px; height: 22px; margin: 0 auto; }
	.reservation.is-compact .reservation__label,
	.reservation.is-compact .reservation__number { position: absolute; opacity: 0; pointer-events: none; }
	.menu-toggle { display: block; }

	/* Figma: the three lines sit ON the map (open daily / hours / tagline), centred, inside its width.
	   The map is a little larger than in the mockup so the third line fits within it; a soft cream halo
	   keeps the text readable over the green, white and red. */
	.site-header__map { position: relative; width: 190px; margin: 14px auto 0; padding-left: 0; }
	.site-header__italy { width: 100%; margin: 0; }
	.site-header__claim {
		position: absolute;
		top: 26%;
		left: 0;
		width: 100%;
		transform: none;
		text-align: center;
		text-shadow: 0 0 2px var(--cream), 0 0 4px var(--cream), 0 0 7px var(--cream);
	}
	.site-header__open--mobile,
	.site-header__hours--mobile {
		display: block;
		margin-right: 0;
		font-size: 10.5px;
		letter-spacing: .14em;
		text-transform: uppercase;
		line-height: 1.55;
	}
	.site-header__tagline { margin-top: 2px; font-size: 8.6px; letter-spacing: .08em; white-space: nowrap; }

	.menu__title { margin-top: 8px; font-size: 54.7px; }
	.menu-nav { display: none; }

	.menu-category { margin-top: 29px; } /* 0.2.7: half of the former 58 px between categories */
	.menu-category:first-of-type { margin-top: 14px; }
	.menu-category__title { padding: 0 4px; font-size: 24.1px; } /* = the title widths of the 402 px mockup (Fraunces is wider than Larken) */
	.menu-category__title::after { width: 150px; background-image: url("../img/wave-blue-long.png"); }

	.menu-category__deco {
		position: relative;
		top: 0;
		transform: none;
		display: block;
		width: min(calc(var(--w) * .45px), 62vw); /* 0.2.7: 1.5 × larger; the empty transparent edges are trimmed by JS */
		margin-bottom: 6px;
	}
	/* On mobile every decoration is shown on the right (the left side is the blue strip),
	   also those set to "Left" for desktop — no change needed in WordPress. */
	.has-deco--left .menu-category__deco,
	.has-deco--right .menu-category__deco { left: auto; right: 0; margin-left: auto; margin-right: -4px; }

	.dishes { margin-top: 12px; padding: 0 12px 0 22px; } /* a little more room on the left, where the reservation badge passes */
	.dish { padding: 0; }
	.dish__name { font-size: 15.9px; }
	.dish__description { max-width: 300px; margin-top: 3px; font-size: 15.1px; line-height: 20px; }
	.dish::after { margin: 15px 0 23px; height: 1px; background: #5c4c44; } /* 0.2.7: 1 px, brand brown */

	.gallery { margin-top: 38px; }
	.gallery__frame { margin: 0 11px 0 calc(-1 * var(--strip) + 10px); padding: 8px; }
	.gallery__img { height: 145px; }

	.lightbox__figure { max-width: 92vw; }
	.lightbox__img { max-height: 70vh; }
	.lightbox__arrow { top: auto; bottom: 6vh; margin-top: 0; }
	.lightbox__arrow--prev { left: 26%; }
	.lightbox__arrow--next { right: 26%; }
	.lightbox__close { top: -18px; right: -12px; width: 38px; height: 38px; padding: 9px; } /* overlaps the photo corner, as on desktop */

	.site-footer { padding: 34px 6px calc(102px + env(safe-area-inset-bottom)); font-size: 13px; } /* 0.2.11: the last lines end above the floating "back to top" (50–94 px from the bottom) */
	.delivery { margin-top: 16px; line-height: 18px; }
	.delivery--phone { gap: 6px; }
	.provider--justeat img { width: 34px; }
	.provider--inline { display: none; }
	.provider--below { display: block; margin-top: 8px; }
	.provider--glovo img { width: 72px; margin-left: 0; }
	.delivery--note { margin-top: 10px; }
	/* Each sentence on its own line: two lines at the 402 px mockup width. */
	.delivery--note .delivery__line { display: block; }
	.to-top { --dock-top: 26px; --dock-right: 22px; --float-gap: 16px; --float-bottom: 50px; }
	.site-footer__bottom {
		flex-direction: column;
		align-items: center;
		gap: 10px;
		margin-top: 64px;
		padding: 0 56px; /* keeps the last lines clear of the floating "back to top" button */
		font-size: 14.3px;
	}
	/* "…reservados, 2026," on the first line, the restaurant name on the second (0.2.11). */
	.site-footer__rights-year,
	.site-footer__rights-name { display: block; white-space: nowrap; }
	.site-footer__bottom .site-footer__rights { margin: 0 -40px;
		text-align: center;
	}
	.site-footer__legal { justify-content: center; }
	.site-footer__credit { margin-left: 0; }
	.site-footer__legal-links { padding: 50px 8px; font-size: 15.3px; line-height: 1.5; } /* 0.2.11: +2 px, then −1 px on mobile; wraps naturally */
	.site-footer__legal-links ul { column-gap: 20px; }
	.site-footer__legal-links li + li::before { left: -10px; }

	.page-content { padding: 0 16px 0 12px; }
	.page-content__title { font-size: 38px; margin-bottom: 24px; }
	.page-content__body { font-size: 16px; }
	.page-content__body h2 { font-size: 23px; }
	.page-content__body h3 { font-size: 19px; }
	.page-content__body table { display: block; overflow-x: auto; }
}

@keyframes rc-pulse {
	0% { box-shadow: 0 0 0 0 rgba(92, 76, 68, .28); }
	70% { box-shadow: 0 0 0 9px rgba(92, 76, 68, 0); }
	100% { box-shadow: 0 0 0 9px rgba(92, 76, 68, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.reservation::before { animation: none; }
}

/* ---------- Interactive states (Stage 4 polish) ----------
   Figma components: chips beige → brown, gallery chip blue → dark blue, back to top brown → beige,
   lightbox X cream → beige. Elsewhere: discreet, consistent hover; clear :focus-visible; no layout shift. */
.chip,
.social a img,
.reservation,
.gallery__arrow,
.menu-toggle,
.mobile-menu__close,
.lightbox__close,
.lightbox__arrow,
.provider,
.site-footer a,
.lang-switch a,
.site-header__address a { transition: background-color .2s, color .2s, opacity .2s, text-decoration-color .2s; }

.lang-switch a:hover { text-decoration: underline; text-underline-offset: 3px; }
.social a:hover img { opacity: .8; }
.gallery__arrow:not(:disabled):hover { color: var(--blue-dark); }
.menu-toggle:hover { background: var(--blue-dark); }
.mobile-menu__close:hover { background: #4a3c35; }
.mobile-menu__nav a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mobile-menu .lang-switch a:hover { text-decoration: underline; }
.mobile-menu :focus-visible { outline-color: var(--cream); }
.lightbox__close:hover { background: var(--beige); }
.lightbox__arrow:hover { color: var(--beige); }
.to-top:hover,
.to-top:focus-visible,
.to-top:active { background: var(--brown); color: var(--cream); } /* … and the former default is the hover / touch look */
.site-footer__bottom a:hover { text-decoration-thickness: 2px; }
.site-footer__credit a,
.site-footer__rights { color: var(--blue); } /* 0.2.11: copyright in exactly the Calipers blue */
.site-footer__credit a:hover,
.site-footer__credit a:focus-visible { color: var(--blue-dark); }

/* Carousel photos: pointer, slight zoom inside their frame; keyboard focus too. */
.gallery__open:focus-visible { outline-offset: -3px; }
.gallery__img { transition: transform .22s ease; }
@media (hover: hover) {
	.gallery__open:hover .gallery__img { transform: scale(1.03); }
}
.gallery__open:focus-visible .gallery__img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	.gallery__img,
	.to-top--float { transition: none; }
	.gallery__open:hover .gallery__img,
	.gallery__open:focus-visible .gallery__img { transform: none; }
}