/* ==========================================================
   «Суши-Муши» — вариант в стиле самого кафе.
   Сверху вниз как вход в заведение: чёрный фасад с вывеской,
   деревянная балка с лампочками, белая стена с надписью,
   меню на «стене» и коричневый пол в подвале страницы.
   ========================================================== */

:root {
	--black: #121212;
	--ink: #161514;
	--muted: #7b7168;
	--wall: #f4f1ec;
	--card: #ffffff;
	--paper: #fbf6ec;
	--wood: #a86f3e;
	--wood-dark: #7c4f2a;
	--floor: #5a3d2a;
	--glow: #ffcf7a;
	--red: #a8252f;
	--green: #1e8a4c;

	--f-head: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
	--f-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
	--f-serif: "PT Serif", Georgia, serif;

	--page: 16px;
}

/* сайт только для телефона: на компьютере — узкая колонка по центру, как экран смартфона */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: #1b1b1b; }
body {
	max-width: 480px;
	min-height: 100vh;
	margin: 0 auto;
	background: var(--wall);
	color: var(--ink);
	font: 400 15px/1.45 var(--f-body);
	box-shadow: 0 0 60px rgba(0, 0, 0, .45);
}
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--glow); outline-offset: 2px; }

/* ---------- фасад ---------- */
.facade {
	position: relative;
	color: #fff;
	padding: max(40px, calc(env(safe-area-inset-top) + 24px)) 16px 0;
	background:
		radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .07), transparent 60%),
		repeating-linear-gradient(90deg, #141414 0 12px, #202020 12px 14px, #0d0d0d 14px 26px, #191919 26px 28px);
}
.signboard {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 3vw, 24px);
	padding-bottom: 40px;
}
.logo {
	flex: none;
	display: block;
	width: clamp(62px, 19vw, 86px);
	height: auto;
	filter: drop-shadow(0 0 16px rgba(255, 255, 255, .3));
}
.logo-ring { font: 700 24px/1 var(--f-serif); fill: #151515; }
.logo-jp { font: 700 35px/1 var(--f-jp); fill: #151515; }
.logo-en { font: 700 16.5px/1 var(--f-body); fill: var(--red); letter-spacing: .4px; }
/* объёмные белые буквы, как на вывеске */
.sign {
	margin: 0;
	font: 700 clamp(34px, 11.6vw, 52px)/1 var(--f-head);
	letter-spacing: .01em;
	white-space: nowrap;
	text-shadow:
		0 1px 0 #d9d9d9, 0 2px 0 #c6c6c6, 0 3px 0 #b3b3b3,
		0 5px 8px rgba(0, 0, 0, .55), 0 0 26px rgba(255, 255, 255, .22);
}

/* деревянная балка, как перила у входа */
.beam {
	height: 16px;
	margin: 0 -16px;
	background:
		repeating-linear-gradient(90deg, rgba(60, 30, 10, .08) 0 2px, transparent 2px 11px),
		linear-gradient(180deg, #c89058 0%, #a86f3e 48%, #7a4c28 100%);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
}

/* ---------- белая стена с надписью ---------- */
.wall {
	position: relative;
	padding: 48px var(--page) 46px;
	background: var(--wall);
}
.slogan {
	margin: 0;
	font: 700 clamp(32px, 10.4vw, 50px)/.94 var(--f-head);
	text-transform: uppercase;
	color: #151515;
	text-shadow: 1px 1px 0 #d9d1c6, 2px 2px 0 #d2c8bc, 3px 3px 0 #cabfb1, 7px 9px 16px rgba(40, 30, 20, .22);
}
.slogan span { display: block; white-space: nowrap; }
.wall-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 24px 0 14px;
	font: 600 15px/1.4 var(--f-body);
	color: #3b342e;
}
.dot { display: none; }

.phones { display: flex; flex-wrap: wrap; gap: 8px; }
.phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 15px;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	color: #151515;
	font: 600 15px/1 var(--f-body);
	text-decoration: none;
	white-space: nowrap;
}
.phone svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.to-menu {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding: 15px 24px;
	border-radius: 999px;
	background: #151515;
	color: #fff;
	font: 700 16px/1 var(--f-body);
	text-decoration: none;
	box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .6);
}
.to-menu::after { content: "↓"; font-size: 18px; }

/* ---------- панель разделов ---------- */
.menubar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 10px 0 var(--page);
	background: rgba(18, 18, 18, .97);
	border-bottom: 3px solid var(--wood);
}
.nav { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
	flex: none;
	padding: 16px 11px 13px;
	border-bottom: 2px solid transparent;
	color: rgba(255, 255, 255, .62);
	font: 500 15px/1 var(--f-head);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}
.nav a[aria-current] { color: #fff; border-bottom-color: var(--glow); }
/* глазик скрытия цен и переключатель темы — только значки */
.prices-btn, .theme-btn {
	flex: none;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
}
.prices-btn svg, .theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ---------- меню ---------- */
.menu { padding: 6px var(--page) 40px; }
.section { padding-top: 32px; scroll-margin-top: 56px; }
.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin: 0 2px 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid #151515;
}
.section-title { margin: 0; font: 600 clamp(26px, 7.4vw, 32px)/1 var(--f-head); letter-spacing: .02em; text-transform: uppercase; }
.section-mark { font: 700 clamp(18px, 5.6vw, 24px)/1 var(--f-jp); color: var(--wood); opacity: .6; white-space: nowrap; }
.items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.dish {
	display: grid;
	grid-template-columns: 118px minmax(0, 1fr);
	column-gap: 12px;
	align-items: start;
	padding: 12px 12px 12px 8px;
	border-radius: 16px;
	background: var(--card);
	box-shadow: 0 1px 0 rgba(60, 40, 20, .06), 0 12px 26px -20px rgba(60, 40, 20, .6);
}
.dish--plain { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
.dish-media { display: grid; place-items: center; height: 100px; cursor: pointer; }
.dish-photo { max-height: 100px; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(40, 25, 10, .18)); }
.dish-collage { position: relative; width: 118px; height: 100px; }
.dish-collage img { position: absolute; width: 80px; inset-inline-start: 0; filter: drop-shadow(0 6px 6px rgba(40, 25, 10, .2)); }
.dish-collage img:nth-child(1) { inset-inline-start: 0; top: 40px; z-index: 3; }
.dish-collage img:nth-child(2) { inset-inline-start: 36px; top: 4px; z-index: 1; }
.dish-collage img:nth-child(3) { inset-inline-start: 38px; top: 50px; z-index: 2; }

.dish-main { display: flex; flex-direction: column; min-width: 0; min-height: 100px; }
.dish--plain .dish-main { min-height: 0; }
.dish-title {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-align: start;
	font: 700 16px/1.25 var(--f-body);
	cursor: pointer;
}
h3.dish-title { cursor: default; }
.dish-title svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--wood); stroke-width: 2.2; transition: transform .3s ease; }
.dish.open .dish-title svg { transform: rotate(180deg); }
.badge {
	display: inline-block;
	margin-left: 6px;
	padding: 3px 6px 2px;
	border-radius: 4px;
	background: var(--red);
	color: #fff;
	font: 700 9.5px/1.2 var(--f-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: 2px;
}
.dish-facts { margin: 4px 0 0; font: 500 13px/1.3 var(--f-body); color: var(--muted); }

.buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.price { font: 600 19px/1 var(--f-head); letter-spacing: .01em; white-space: nowrap; transition: filter .2s ease; }
.add {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: #151515;
	color: #fff;
	box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .55);
	cursor: pointer;
}
.add svg, .stepper svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.stepper { display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; background: #151515; color: #fff; }
.stepper button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.stepper output { min-width: 22px; text-align: center; font: 600 16px/1 var(--f-head); }
.ask { font: 500 13px/1.3 var(--f-body); color: var(--muted); }

.variants { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.variants li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px dashed #e7ddd0; }
.variants li:first-child { padding-top: 0; border-top: 0; }
.variant-name { font: 600 14px/1.2 var(--f-body); }
.variants .buy { margin: 0; padding: 0; gap: 14px; }

/* «листочек», который разворачивается под карточкой */
.leaf { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.dish.open .leaf { grid-template-rows: 1fr; }
.leaf-inner { min-height: 0; overflow: hidden; }
.leaf-paper {
	margin: 12px 0 0 4px;
	padding: 14px 14px 12px;
	border: 1px solid #efe3d1;
	border-radius: 4px 14px 14px 14px;
	background:
		linear-gradient(180deg, rgba(120, 90, 50, .09), transparent 18px),
		repeating-linear-gradient(0deg, rgba(90, 60, 30, .02) 0 1px, transparent 1px 4px),
		var(--paper);
	opacity: 0;
	transform: translateY(-10px) rotate(-.5deg);
	transform-origin: top left;
	transition: transform .35s ease, opacity .25s ease;
}
.dish.open .leaf-paper { opacity: 1; transform: none; }
.leaf-label { margin: 0 0 8px; font: 700 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--wood-dark); }
.leaf-desc { margin: 0; font: 500 14px/1.5 var(--f-body); color: #3a322b; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.facts li { padding: 6px 10px; border-radius: 999px; background: #f0e5d4; color: #5c4430; font: 600 12px/1 var(--f-body); }

.set-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.set-row {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 5px 0;
	border-bottom: 1px dashed #e6d8c4;
}
.set-row:last-child { border-bottom: 0; }
.set-thumb { width: 58px; height: 44px; object-fit: contain; }
.set-thumb--empty { display: grid; place-items: center; border: 1.5px dashed #d8c6ae; border-radius: 10px; color: #b39c80; font: 600 17px/1 var(--f-head); }
.set-name { font: 600 14px/1.25 var(--f-body); }
.set-name small { display: block; margin-top: 1px; font: 500 12px/1.3 var(--f-body); color: var(--muted); }
.set-row--unknown .set-name { color: #6f655c; }
.set-price .price { font-size: 15px; }
.deal {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	margin-top: 12px;
	padding: 11px 8px;
	border: 1px solid #eadcc8;
	border-radius: 12px;
	background: #fff;
	text-align: center;
}
.deal span { display: block; margin-bottom: 5px; font: 700 9.5px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.deal .price { font-size: 17px; }
.deal s.price { color: #8b8178; text-decoration-thickness: 1.5px; }
.deal-save .price { color: var(--red); }

/* ---------- пол ---------- */
.floor {
	padding: 36px 20px calc(116px + env(safe-area-inset-bottom));
	background:
		repeating-linear-gradient(180deg, transparent 0 46px, rgba(0, 0, 0, .12) 46px 48px),
		linear-gradient(180deg, #634430, var(--floor));
	color: #f2e6d6;
	text-align: center;
}
.floor p { margin: 4px 0; font: 500 14px/1.5 var(--f-body); }
.floor .floor-brand { margin: 0 0 10px; font: 700 28px/1 var(--f-head); letter-spacing: .04em; }
.floor-brand span { margin-left: 6px; font: 700 18px/1 var(--f-jp); color: #e9c89f; }
.floor .phones { justify-content: center; margin: 16px 0; }
.floor .phone { color: #f2e6d6; border-color: rgba(242, 230, 214, .55); }
.floor .floor-note { font-size: 12px; color: rgba(242, 230, 214, .7); }

/* ---------- «Мой заказ» ---------- */
.orderbar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 30;
	display: flex;
	justify-content: center;
	padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
	pointer-events: none;
}
.orderbar-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 12px 12px 18px;
	border: 0;
	border-radius: 999px;
	background: #151515;
	color: #fff;
	font: 700 16px/1 var(--f-body);
	box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6);
	pointer-events: auto;
	cursor: pointer;
}
.orderbar-icon svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.orderbar-count { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--glow); color: #151515; font: 700 16px/1 var(--f-head); }

.toast {
	position: fixed;
	top: calc(12px + env(safe-area-inset-top));
	left: 50%;
	z-index: 50;
	max-width: calc(100vw - 32px);
	padding: 10px 16px;
	border-radius: 12px;
	background: rgba(21, 21, 21, .95);
	color: #fff;
	font: 600 14px/1.3 var(--f-body);
	transform: translateX(-50%);
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
}

dialog.sheet {
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	margin: auto auto 0;
	padding: 0;
	border: 0;
	border-radius: 20px 20px 0 0;
	background: #fbf7f0;
	color: var(--ink);
}
dialog.sheet::backdrop { background: rgba(10, 8, 6, .55); }
.sheet-inner { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { margin: 0; font: 600 26px/1 var(--f-head); letter-spacing: .02em; text-transform: uppercase; }
.icon-btn { width: 40px; height: 40px; border: 1px solid #ddd2c3; border-radius: 50%; background: #fff; color: var(--ink); font-size: 15px; cursor: pointer; }
.line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 78px;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px dashed #e3d6c4;
}
.line-name { display: block; font: 700 15px/1.25 var(--f-body); }
.line-unit, .line-unit .price { font: 500 13px/1.3 var(--f-body); color: var(--muted); }
.line .stepper button { width: 32px; height: 32px; }
.line-sum { text-align: right; font-size: 17px; }
.empty { padding: 20px 0; text-align: center; color: var(--muted); font: 500 15px/1.4 var(--f-body); }
.total-row { display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; border-top: 2px solid #151515; font: 600 20px/1 var(--f-head); text-transform: uppercase; }
.total-row .price { font-size: 28px; }
.ready-note { margin: 0; font: 500 13px/1.4 var(--f-body); color: var(--muted); }
.whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px;
	border: 0;
	border-radius: 14px;
	background: var(--green);
	color: #fff;
	font: 700 16px/1 var(--f-body);
	cursor: pointer;
}
.whatsapp svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.call { display: flex; flex-direction: column; align-items: center; gap: 8px; font: 500 13px/1 var(--f-body); color: var(--muted); }
.call .phones { justify-content: center; }
.secondary { align-self: center; padding: 8px; border: 0; background: none; color: #8a3a30; font: 600 14px/1 var(--f-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- кнопка «Скрыть цены» ---------- */
[data-prices="hidden"] .price { filter: blur(7px); user-select: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.leaf, .leaf-paper, .dish-title svg { transition: none; }
}

/* ==========================================================
   Тёмные темы. Палитр три, различаются только цветами:
     night — «Вечер в зале», выбрана заказчиком.
   Всё остальное ниже общее и включается признаком data-dark.
   Сайт открывается светлым, тёмную гость включает кнопкой в шапке.
   ========================================================== */
:root[data-theme="night"] {
	--black: #141110; --ink: #f2ece2; --muted: #a4988c; --wall: #191512; --card: #221d18; --paper: #241f19;
	--wood: #c08a52; --wood-dark: #e0b183; --floor: #120f0d; --glow: #ffcf7a; --red: #c4454c;
}

[data-dark] body { box-shadow: 0 0 60px rgba(0, 0, 0, .75); }
[data-dark] .beam { background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 11px), linear-gradient(180deg, var(--wood), rgba(0, 0, 0, .45)); }
[data-dark] .slogan { color: var(--ink); text-shadow: 2px 2px 0 rgba(0, 0, 0, .5), 5px 7px 14px rgba(0, 0, 0, .55); }
[data-dark] .wall-info { color: var(--muted); }
[data-dark] .phone { color: var(--ink); }
[data-dark] .to-menu,
[data-dark] .add,
[data-dark] .stepper,
[data-dark] .orderbar-btn { background: var(--ink); color: var(--black); }
[data-dark] .orderbar-count { background: var(--red); color: #fff; }
[data-dark] .section-head { border-bottom-color: rgba(255, 255, 255, .22); }
[data-dark] .dish { border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 12px 26px -20px #000; }
[data-dark] .variants li { border-top-color: rgba(255, 255, 255, .1); }
[data-dark] .leaf-paper {
	border-color: rgba(255, 255, 255, .09);
	background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 18px), var(--paper);
}
[data-dark] .facts li { background: rgba(255, 255, 255, .08); color: var(--ink); }
[data-dark] .set-row { border-bottom-color: rgba(255, 255, 255, .1); }
[data-dark] .set-thumb--empty { border-color: rgba(255, 255, 255, .18); color: var(--muted); }
[data-dark] .deal { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .1); }
[data-dark] .deal s.price { color: var(--muted); }
[data-dark] .floor { background: repeating-linear-gradient(180deg, transparent 0 46px, rgba(0, 0, 0, .18) 46px 48px), linear-gradient(180deg, var(--floor), #0a0908); }
[data-dark] .toast { border: 1px solid rgba(255, 255, 255, .12); }
[data-dark] dialog.sheet { background: var(--card); }
[data-dark] .icon-btn { border-color: rgba(255, 255, 255, .18); background: transparent; color: var(--ink); }
[data-dark] .line { border-bottom-color: rgba(255, 255, 255, .1); }
[data-dark] .total-row { border-top-color: var(--ink); }
[data-dark] .secondary { color: #e08a80; }

/* ---------- стиль кнопок: чёрные (по умолчанию), деревянные, контурные ---------- */
[data-buttons="wood"] .add,
[data-buttons="wood"] .stepper,
[data-buttons="wood"] .orderbar-btn,
[data-buttons="wood"] .to-menu { background: var(--wood); color: #fff; }
[data-buttons="wood"] .orderbar-count { background: #fff; color: var(--wood-dark); }

[data-buttons="outline"] .add,
[data-buttons="outline"] .stepper { border: 1.8px solid currentColor; background: transparent; color: var(--ink); }
[data-buttons="outline"] .stepper button { color: var(--ink); }
[data-buttons="outline"] .to-menu { border: 1.8px solid currentColor; background: transparent; color: var(--ink); box-shadow: none; }

/* ---------- переход из состава сета к карточке ролла ---------- */
.dish { scroll-margin-top: 66px; outline: 2px solid transparent; outline-offset: 3px; }
button.set-name { padding: 0; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; }
.set-jump-name { border-bottom: 1px dashed var(--wood); }
.set-jump-hint { margin-left: 5px; font-size: 11px; color: var(--wood); }
@keyframes dish-flash {
	0%, 60% { outline-color: var(--wood); }
	100% { outline-color: transparent; }
}
.dish.flash { animation: dish-flash 1.6s ease-out 1; }

.back-to-set {
	position: fixed;
	left: 50%;
	bottom: calc(76px + env(safe-area-inset-bottom));
	z-index: 35;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100% - 32px);
	padding: 11px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--wood-dark);
	color: #fff;
	font: 600 14px/1 var(--f-body);
	box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .5);
	transform: translateX(-50%);
	cursor: pointer;
}
.back-to-set svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.back-to-set span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-dark] .back-to-set { background: var(--wood); color: var(--black); }
[data-demo="on"] .back-to-set { bottom: 192px; }

@media (prefers-reduced-motion: reduce) { .dish.flash { animation: none; outline-color: var(--wood); } }

/* ---------- выбор языка на первом экране: каждый язык написан на себе ---------- */
.lang-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lang-row button {
	padding: 9px 14px;
	border: 1.5px solid #151515;
	border-radius: 999px;
	background: transparent;
	color: #151515;
	font: 600 14px/1 var(--f-body);
	cursor: pointer;
}
.lang-row button[aria-pressed="true"] { background: #151515; color: #fff; }
[data-dark] .lang-row button { border-color: var(--ink); color: var(--ink); }
[data-dark] .lang-row button[aria-pressed="true"] { background: var(--ink); color: var(--black); }

/* подпись автора — тихая строка в самом низу */
.credit { margin: 16px 0 0; font: 500 11px/1.4 var(--f-body); color: rgba(242, 230, 214, .38); }
.credit a { color: rgba(242, 230, 214, .62); text-decoration: none; border-bottom: 1px solid rgba(242, 230, 214, .28); }

/* ---------- арабский: свои шрифты и разворот страницы справа налево ---------- */
:root[lang="ar"] {
	--f-head: "Cairo", "IBM Plex Sans Arabic", system-ui, sans-serif;
	--f-body: "IBM Plex Sans Arabic", system-ui, sans-serif;
}
:root[lang="ar"] .sign, :root[lang="ar"] .floor-brand { font-family: var(--f-head); letter-spacing: 0; }
:root[lang="ar"] .slogan { letter-spacing: 0; line-height: 1.15; }
:root[lang="ar"] .nav a, :root[lang="ar"] .section-title { letter-spacing: 0; }
[dir="rtl"] .leaf-paper { border-radius: 14px 4px 14px 14px; }
[dir="rtl"] .dish-collage img:nth-child(1) { inset-inline-start: 0; }
[dir="rtl"] .dish-collage img:nth-child(2) { inset-inline-start: 36px; }
[dir="rtl"] .dish-collage img:nth-child(3) { inset-inline-start: 38px; }
[dir="rtl"] .to-menu::after { content: "↓"; }
[dir="rtl"] .back-to-set svg { transform: scaleX(-1); }

/* ---------- приборы и соусы в окне заказа ---------- */
.extras {
	margin-top: 6px;
	padding: 12px;
	border: 1px dashed #e0d3bf;
	border-radius: 12px;
	background: rgba(255, 255, 255, .55);
}
[data-dark] .extras { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
.extras-title { margin: 0; font: 700 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.extras-note { margin: 5px 0 10px; font: 500 12px/1.35 var(--f-body); color: var(--muted); }
.extras-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.extra { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.extra-name { font: 600 14px/1.2 var(--f-body); }
.stepper--small { padding: 2px; }
.stepper--small button { width: 30px; height: 30px; }
.stepper--small output { min-width: 18px; font-size: 14px; }
.stepper button[disabled] { opacity: .3; cursor: default; }

/* ---------- переключатель оформления в подвале ---------- */
.looks { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(242, 230, 214, .25); }
.looks-title { margin: 0 0 10px; font: 700 11px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(242, 230, 214, .6); }
.looks-row { display: grid; gap: 6px; margin-bottom: 12px; }
.looks-label { font: 600 12px/1 var(--f-body); color: rgba(242, 230, 214, .55); }
.looks-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.looks-chips button {
	padding: 8px 12px;
	border: 1px solid rgba(242, 230, 214, .35);
	border-radius: 999px;
	background: transparent;
	color: #f2e6d6;
	font: 600 13px/1 var(--f-body);
	cursor: pointer;
}
.looks-chips button[aria-pressed="true"] { border-color: #f2e6d6; background: #f2e6d6; color: #2a1d14; }

/* подсветка приборов при первом открытии заказа, чтобы блок не пропустили */
@keyframes extras-pulse {
	0%, 55% { border-color: var(--wood); box-shadow: 0 0 0 3px rgba(168, 111, 62, .18); }
	100% { border-color: #e0d3bf; box-shadow: none; }
}
.extras.pulse { animation: extras-pulse 1.8s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .extras.pulse { animation: none; } }

/* ---------- убранное блюдо: остаётся строкой, пока открыто окно заказа ---------- */
.line--removed { opacity: .55; }
.line--removed .line-name { text-decoration: line-through; }
.line-sum--removed { text-align: right; font: 600 12px/1.2 var(--f-body); color: var(--muted); }

/* ---------- три вида блока «Приборы и соусы» ---------- */
.extra-dots { display: none; }

[data-extras-style="chips"] .extras-list { grid-template-columns: 1fr 1fr; gap: 8px; }
[data-extras-style="chips"] .extra {
	flex-direction: column;
	gap: 8px;
	padding: 10px 8px;
	border: 1px solid #ece0cd;
	border-radius: 12px;
	background: #fff;
}
[data-extras-style="chips"] .extra-name { font-size: 13px; text-align: center; }
[data-dark][data-extras-style="chips"] .extra { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); }

[data-extras-style="leaf"] .extras { border-style: solid; border-color: #e6d8c4; background: var(--paper); }
[data-extras-style="leaf"] .extras-list { gap: 10px; }
[data-extras-style="leaf"] .extra { gap: 0; }
[data-extras-style="leaf"] .extra-name { font: 500 15px/1.2 var(--f-body); letter-spacing: .01em; }
[data-extras-style="leaf"] .extra-dots { display: block; flex: 1; margin: 0 10px; border-bottom: 1px dotted #c9b79d; transform: translateY(-4px); }
[data-extras-style="leaf"] .stepper--small { border: 1px solid #d8c6ae; background: transparent; color: var(--ink); }
[data-dark][data-extras-style="leaf"] .extras { border-color: rgba(255, 255, 255, .12); }
[data-dark][data-extras-style="leaf"] .extra-dots { border-bottom-color: rgba(255, 255, 255, .25); }
[data-dark][data-extras-style="leaf"] .stepper--small { border-color: rgba(255, 255, 255, .2); color: var(--ink); }