/*
 * Лендинг «Рыбные деликатесы из Японии».
 * Подключается только на своей странице (inc/landing.php).
 *
 * Это перенос согласованного макета. Значения — токены, отступы, кегли,
 * сетки — взяты из него один в один; переименованы только селекторы
 * (префикс .tsu-, чтобы не пересекаться ни с чем на сайте) и добавлены
 * блоки, которых в макете не было: своя шапка, полоса с ресторанами,
 * свёрнутые наборы, калькулятор, поля веса, строка итога и окно заявки.
 * Они написаны в том же языке: те же токены, те же радиусы и отступы.
 *
 * Шрифты: четыре начертания из папки темы объявлены под одним именем
 * «Open Sans» с весами 300/400/600/700. Благодаря этому правила макета
 * вида font-weight:600 работают буквально, без подстановки имён вроде
 * OpenSansSemiBold, и расхождений в начертаниях не возникает.
 *
 * Порядок в файле важен: сначала шрифты и сброс, потом компоненты.
 * При равной специфичности побеждает правило ниже, поэтому сброс,
 * оказавшись в конце, перебивал бы высоты картинок и цвета в карточках.
 *
 * Текст на золотом фоне только тёмный: белый на #cfb883 даёт контраст
 * 1.94:1 при норме 4.5:1, тёмно-коричневый #3a2e14 — 6.86:1.
 */

/* ---------- шрифты ---------- */

@font-face {
	font-family: "Open Sans";
	src: url("../fonts/OpenSansLight/OpenSansLight.woff") format("woff"),
		url("../fonts/OpenSansLight/OpenSansLight.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Open Sans";
	src: url("../fonts/OpenSansRegular/OpenSansRegular.woff") format("woff"),
		url("../fonts/OpenSansRegular/OpenSansRegular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Open Sans";
	src: url("../fonts/OpenSansSemiBold/OpenSansSemiBold.woff") format("woff"),
		url("../fonts/OpenSansSemiBold/OpenSansSemiBold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Open Sans";
	src: url("../fonts/OpenSansBold/OpenSansBold.woff") format("woff"),
		url("../fonts/OpenSansBold/OpenSansBold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- сброс ----------
 * style.css темы на этой странице не грузится. Правила держим на
 * минимальном весе, чтобы компоненты ниже их перебивали.
 */

* { box-sizing: border-box; }
img { max-width: 100%; height: auto; border: 0; }

body.tsu-page {
	margin: 0;
	background: #17181c;
	color: #f2efe9;
	font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}
/* Заголовки и абзацы — голыми селекторами: правила компонентов ниже
   должны их перебивать. С весом body.tsu-page h3 сброс оказывался
   сильнее, и подзаголовки шагов шли начертанием 300 вместо 600. */
h1, h2, h3, h4 { margin: 0; line-height: 1.18; font-weight: 300; }
p { margin: 0 0 14px; }
ul { margin: 0; padding: 0; }
/* Ссылки и кнопки — тоже голыми селекторами. С весом body.tsu-page a
   сброс перебивал классы: надпись на золотой кнопке совпадала с фоном,
   а пункты меню окрашивались в золото. */
a { color: #cfb883; text-decoration: none; }
button { font-family: inherit; }

/* ==========================================================================
   Перенос макета
   ========================================================================== */

.tsu-l {
	--bg: #17181c;
	--bg-2: #1e2025;
	--bg-3: #262930;
	--gold: #cfb883;
	--gold-ink: #3a2e14;
	--ink: #f2efe9;
	--muted: #9a9790;
	--line: #32353d;
	--ok: #7fc0a0;
	--warn: #d9a45b;

	display: block;
	background: var(--bg);
	color: var(--ink);
}

.tsu-in { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

.tsu-l h1 { font-size: clamp(30px, 5.6vw, 54px); }
.tsu-l h2 { font-size: clamp(24px, 3.8vw, 38px); }
.tsu-l h3 { font-size: 20px; font-weight: 600; }

.tsu-eyebrow {
	font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--gold); font-weight: 600; margin-bottom: 12px;
}

/* ---------- кнопки ---------- */

.tsu-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	min-height: 48px; padding: 12px 26px; border-radius: 2px;
	font-size: 16px; font-weight: 600; border: 1px solid transparent;
	cursor: pointer; font-family: inherit; text-align: center; line-height: 1.25;
	text-decoration: none;
}
.tsu-btn:hover, .tsu-btn:focus { text-decoration: none; }
.tsu-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tsu-btn[disabled] { opacity: .55; cursor: default; }
.tsu-btn-gold { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.tsu-btn-gold:hover, .tsu-btn-gold:focus { background: #dcc795; color: var(--gold-ink); }
.tsu-btn-ghost { background: transparent; color: var(--ink); border-color: #6b7080; }
.tsu-btn-ghost:hover, .tsu-btn-ghost:focus { border-color: var(--gold); color: var(--gold); }
.tsu-btn-wa { background: #1eb455; color: #052a12; border-color: #1eb455; font-weight: 700; }
.tsu-btn-wa:hover, .tsu-btn-wa:focus { background: #25d366; color: #052a12; }
.tsu-btn-tg { background: #00679b; color: #fff; border-color: #00679b; }
.tsu-btn-tg:hover, .tsu-btn-tg:focus { background: #0180bd; color: #fff; }
.tsu-btn-sm { min-height: 40px; padding: 9px 16px; font-size: 14px; }

/* ---------- шапка ---------- */

.tsu-top { border-bottom: 1px solid #32353d; padding: 16px 0; font-size: 14px; background: #17181c; }
.tsu-top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tsu-logo { line-height: 0; flex: none; }
.tsu-logo img { width: 142px; height: auto; }
.tsu-nav { flex: 1 1 auto; min-width: 0; }
.tsu-nav ul { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; margin: 0; padding: 0; }
.tsu-nav a { color: #f2efe9; font-size: 14px; }
.tsu-nav a:hover { color: #cfb883; }
.tsu-top-tel { font-weight: 600; font-size: 20px; white-space: nowrap; color: #f2efe9; }
.tsu-top-tel:hover { color: #cfb883; }
.tsu-top-cart {
	white-space: nowrap; color: #f2efe9; font-size: 14px; font-weight: 600;
	border: 1px solid #32353d; border-radius: 2px; padding: 9px 15px;
}
.tsu-top-cart:hover { border-color: #cfb883; color: #cfb883; }
.tsu-top-cart b {
	display: inline-block; background: #cfb883; color: #3a2e14;
	border-radius: 2px; padding: 0 6px; margin-left: 6px; font-weight: 600;
}

/* ---------- первый экран ---------- */

.tsu-hero { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
.tsu-hero-bg {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 74% center; max-width: none;
}
.tsu-hero:before {
	content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1;
	background: linear-gradient(90deg, #17181c 0%, rgba(23, 24, 28, .95) 32%, rgba(23, 24, 28, .74) 52%, rgba(23, 24, 28, .3) 80%, rgba(23, 24, 28, .2) 100%);
}
.tsu-hero-in { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; padding: 64px 20px 72px; }
.tsu-hero h1 { margin-bottom: 20px; }
.tsu-lede { font-size: clamp(16px, 2vw, 19px); color: var(--muted); max-width: 46ch; margin-bottom: 24px; }
.tsu-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.tsu-hero-bar { position: relative; z-index: 2; border-top: 1px solid var(--line); background: rgba(12, 13, 16, .55); }
.tsu-hero-bar-in {
	display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 34px;
	max-width: 1140px; margin: 0 auto; padding: 16px 20px; font-size: 14px; color: var(--muted);
}
.tsu-hero-bar .tsu-rests { margin-left: auto; }
.tsu-hero-bar span { display: block; }
.tsu-hero-bar b { display: block; color: var(--ink); font-weight: 600; }

/* ---------- рестораны ----------
 * Блок стоит четвёртым пунктом в плашке преимуществ первого экрана:
 * подпись в том же стиле, что у остальных трёх, логотипы под ней.
 */

.tsu-hero-bar .tsu-rests { display: block; }
.tsu-rests-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 7px; }
.tsu-rests-row img {
	max-height: 17px; width: auto; margin: 0;
	filter: grayscale(100%) brightness(0) invert(1); opacity: .62; transition: opacity .2s;
}
.tsu-rests-row img:hover { opacity: 1; }

/* ---------- секции ---------- */

.tsu-sec { padding: 64px 0; border-bottom: 1px solid var(--line); }
.tsu-sec-head { max-width: 62ch; margin-bottom: 32px; }
.tsu-sec-head p { color: var(--muted); margin: 12px 0 0; }
.tsu-empty { color: var(--muted); font-size: 14px; margin: 0; }
.tsu-hint { font-size: 14px; color: var(--muted); margin: 0 0 16px; }
.tsu-soft { background: var(--bg-2); }
.tsu-dark { background: var(--bg-2); }

/* ---------- свёрнутые наборы ---------- */

.tsu-fold-sec { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.tsu-fold-sec .tsu-in { padding-top: 20px; padding-bottom: 20px; }
.tsu-l details.tsu-fold { border-bottom: none; padding: 0; }

/* Это переключатель, а не просто заголовок: даём ему вид элемента
   управления — поверхность, рамку, золотую грань слева и кнопку справа. */
.tsu-l details.tsu-fold > summary {
	display: flex; align-items: center; gap: 20px;
	padding: 16px 18px; font-weight: 400;
	background: var(--bg-3); border: 1px solid var(--line);
	border-left: 3px solid var(--gold); border-radius: 2px;
	transition: background-color .18s, border-color .18s;
}
.tsu-l details.tsu-fold > summary:hover { background: #2d313a; border-color: #5d6170; border-left-color: var(--gold); }
.tsu-l details.tsu-fold > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tsu-fold-t { font-weight: 600; font-size: 16px; color: var(--ink); }
.tsu-fold-h { font-size: 14px; color: var(--muted); font-weight: 400; }
.tsu-l details.tsu-fold > summary:after {
	content: "+"; flex: none; margin-left: auto;
	width: 34px; height: 34px; line-height: 31px; text-align: center;
	border: 1px solid var(--gold); border-radius: 2px;
	color: var(--gold); font-size: 20px; font-weight: 300;
}
.tsu-l details.tsu-fold[open] > summary { border-color: var(--gold); }
.tsu-l details.tsu-fold[open] > summary:after { content: "\2212"; background: var(--gold); color: var(--gold-ink); }
.tsu-fold-body { padding: 16px 0 14px; }

/* ---------- наборы ---------- */

.tsu-sets { display: grid; grid-template-columns: 1fr; gap: 14px; }
.tsu-set { border: 1px solid var(--line); border-radius: 2px; background: var(--bg-2); display: flex; flex-direction: column; overflow: hidden; }
.tsu-set:hover { border-color: var(--gold); }
.tsu-set-img { display: block; border-bottom: 1px solid var(--line); background: #1a1c21; }
.tsu-set-img img { display: block; width: 100%; height: 150px; object-fit: cover; }
.tsu-set-body { padding: 16px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.tsu-set h3 { font-size: 20px; margin-bottom: 4px; }
.tsu-set-ppl { font-size: 12px; color: var(--gold); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
.tsu-set .tsu-set-lead { font-size: 14px; color: var(--ink); margin-bottom: 16px; line-height: 1.5; }
.tsu-set-items {
	margin: 0 0 16px; padding: 12px 0 0 17px; font-size: 14px; color: var(--muted);
	list-style: disc; border-top: 1px solid var(--line);
}
.tsu-set-items:before {
	content: "Состав"; display: block; margin: 0 0 8px -17px;
	font-size: 12px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: #6f7279;
}
.tsu-set-items li { margin-bottom: 5px; line-height: 1.45; }
.tsu-set-foot { margin-top: auto; }
.tsu-set-sum { display: block; font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.tsu-set-sum small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.tsu-set-foot .tsu-btn { width: 100%; }

/* ---------- шаги конструктора ---------- */

.tsu-step { border: 1px solid var(--line); border-radius: 2px; margin-bottom: 12px; background: var(--bg-2); }
.tsu-step-head { display: flex; gap: 14px; align-items: baseline; padding: 20px 24px 0; }
.tsu-step-n {
	font-size: 12px; font-weight: 700; color: var(--gold);
	border: 1px solid var(--line); background: var(--bg-3); border-radius: 2px;
	padding: 3px 9px; letter-spacing: .08em; flex: none;
}
.tsu-step.is-done .tsu-step-n { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }

/* Пятый шаг — главное действие страницы, поэтому выделен. */
.tsu-step-accent { border-color: var(--gold); background: linear-gradient(180deg, #241f14, #1c1d22); }
.tsu-step-accent .tsu-step-n { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.tsu-step-accent .tsu-step-head h3 { color: #fff; }
.tsu-step-head h3 { font-size: 20px; }
.tsu-opt { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: auto; white-space: nowrap; }
.tsu-step-body { padding: 16px 24px 24px; }

.tsu-chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 9px; }
.tsu-chip {
	border: 1px solid var(--line); background: var(--bg-3); color: var(--ink);
	border-radius: 2px; padding: 12px 17px; font-size: 14px; cursor: pointer;
	font-family: inherit; min-height: 44px; display: inline-flex; align-items: center;
	gap: 9px; line-height: 1.2;
}
.tsu-chip:hover { border-color: #5d6170; }
.tsu-chip[aria-pressed="true"] { border-color: var(--gold); background: #2d2718; color: var(--gold); }
.tsu-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* форматы блюд */
.tsu-formats { display: grid; grid-template-columns: 1fr; gap: 11px; }
.tsu-format {
	position: relative; border: 1px solid var(--line); background: var(--bg-3); color: var(--ink);
	border-radius: 2px; padding: 0; cursor: pointer; font-family: inherit; text-align: left;
	overflow: hidden; display: flex; flex-direction: column;
}
.tsu-format:hover { border-color: #5d6170; }
.tsu-format-img { display: block; border-bottom: 1px solid var(--line); background: #1a1c21; }
.tsu-format-img img { display: block; width: 100%; height: 120px; object-fit: cover; opacity: .78; transition: opacity .2s; }
.tsu-format:hover .tsu-format-img img { opacity: 1; }
.tsu-format-body { padding: 16px 16px 16px; }
.tsu-format b { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.tsu-format i { font-style: normal; display: block; font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.tsu-format[aria-pressed="true"] { border-color: var(--gold); }
.tsu-format[aria-pressed="true"] b { color: var(--gold); }
.tsu-format[aria-pressed="true"] i { color: #b9a978; }
.tsu-format[aria-pressed="true"] .tsu-format-img img { opacity: 1; }
.tsu-format:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tsu-tick {
	position: absolute; right: 11px; top: 11px; z-index: 2;
	width: 20px; height: 20px; border: 1px solid #5d6170; border-radius: 2px;
	background: rgba(12, 13, 16, .6);
}
.tsu-format[aria-pressed="true"] .tsu-tick { border-color: var(--gold); background: var(--gold); }
.tsu-format[aria-pressed="true"] .tsu-tick:after {
	content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
	border: solid var(--gold-ink); border-width: 0 2px 2px 0; transform: rotate(42deg);
}

/* развилка */
.tsu-fork { border: 1px solid var(--line); border-radius: 2px; padding: 16px 20px; margin-bottom: 12px; background: var(--bg-3); }
.tsu-fork h4 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.tsu-fork .tsu-chip { margin-right: 9px; margin-bottom: 9px; }
.tsu-fork-tip { font-size: 14px; color: var(--muted); margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }

/* ---------- товары ---------- */

.tsu-goods-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap; margin: 24px 0 14px;
}
.tsu-goods-title {
	font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--muted); margin: 0;
}
.tsu-goods { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 13px; }
.tsu-good { border: 1px solid var(--line); border-radius: 2px; background: var(--bg-3); padding: 0 0 15px; display: flex; flex-direction: column; overflow: hidden; }
.tsu-good:hover { border-color: #5d6170; }
.tsu-good.is-sel { border-color: var(--gold); }
.tsu-good-img { display: block; border-bottom: 1px solid var(--line); background: #1a1c21; }
.tsu-good-img img { display: block; width: 100%; height: 120px; object-fit: cover; }
.tsu-good-in { padding: 12px 15px 0; display: flex; flex-direction: column; flex: 1; }
.tsu-good h4 { margin: 0 0 5px; font-size: 14px; font-weight: 700; line-height: 1.35; }
.tsu-good h4 a { color: var(--ink); }
.tsu-good h4 a:hover { color: var(--gold); }
.tsu-good-pr { font-size: 20px; font-weight: 700; margin-top: auto; }
.tsu-good-pr small { font-size: 12px; color: var(--muted); font-weight: 400; }
.tsu-good-row { margin-top: 10px; padding: 0 15px; }
.tsu-good-row .tsu-btn { width: 100%; }

.tsu-badge {
	display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .09em;
	text-transform: uppercase; padding: 2px 7px; border-radius: 2px; border: 1px solid; margin-bottom: 8px;
}
.tsu-badge-stock { color: var(--ok); border-color: #3f6a56; }
.tsu-badge-order { color: var(--warn); border-color: #6b5531; }
.tsu-badge-ready { color: var(--gold); border-color: #6a5c37; }
.tsu-skill { font-size: 12px; color: var(--warn); margin: 8px 0 0; line-height: 1.45; }

.tsu-qty { margin-top: 10px; }
.tsu-qty label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.tsu-qty-row {
	display: flex; align-items: stretch; line-height: 1;
	background: var(--bg); border: 1px solid var(--line); border-radius: 2px; overflow: hidden;
	transition: border-color .18s;
}
.tsu-qty-row:focus-within { border-color: var(--gold); }
.tsu-qty input {
	flex: 1 1 auto; min-width: 0; height: 38px;
	background: transparent; border: none; color: var(--ink);
	padding: 0 4px; font-size: 16px; font-family: inherit; text-align: center; font-weight: 700;
	/* Гасим явно: сторонние таблицы стилей любят вешать на поля
	   нижний отступ, и строка веса раздувалась с 38 до 55 px. */
	margin: 0;
	vertical-align: top;
}
.tsu-qty input:focus { outline: none; }
.tsu-qty input::-webkit-outer-spin-button,
.tsu-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tsu-qty input[type=number] { -moz-appearance: textfield; }
.tsu-qty-b {
	flex: none; width: 40px; height: 38px; cursor: pointer; margin: 0; padding: 0;
	display: flex; align-items: center; justify-content: center;
	background: transparent; border: none; color: var(--muted);
	font-size: 20px; line-height: 1; font-family: inherit;
	transition: background-color .15s, color .15s;
}
.tsu-qty-b:first-child { border-right: 1px solid var(--line); }
.tsu-qty-b:last-child { border-left: 1px solid var(--line); }
.tsu-qty-b:hover { background: var(--bg-3); color: var(--gold); }
.tsu-qty-b:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* строка «поможем» */
.tsu-help {
	border-left: 2px solid var(--gold); padding: 12px 0 12px 16px;
	margin: 16px 0 0; font-size: 14px; color: var(--muted);
}

/* ---------- бакалея ---------- */

.tsu-must {
	border: 1px solid var(--gold); border-left-width: 3px; border-radius: 2px;
	background: linear-gradient(180deg, #241f14, #1c1d22);
	padding: 20px 22px 22px; margin-bottom: 32px;
}
.tsu-must-t {
	font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--gold); margin: 0 0 16px;
}
.tsu-pan-t {
	font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--muted); margin: 0 0 12px;
}
.tsu-pan-f { margin-bottom: 20px; }

/* ---------- запрос менеджеру ---------- */

.tsu-req {
	border: 1px solid var(--gold); border-radius: 2px;
	background: linear-gradient(180deg, #241f14, #1c1d22); padding: 32px 30px 32px;
}
.tsu-req .tsu-eyebrow { font-weight: 700; }
.tsu-req h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 12px; }
.tsu-req-lead { color: var(--muted); max-width: 58ch; }
.tsu-brief {
	border: 1px dashed #5c5231; border-radius: 2px; padding: 16px 17px;
	margin: 16px 0 20px; font-size: 16px; background: #1a1b20;
}
.tsu-brief b { color: var(--gold); font-weight: 600; }

.tsu-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 11px; align-items: end; }
.tsu-field { display: block; }
.tsu-field span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.tsu-field input {
	width: 100%; min-height: 48px; background: var(--bg); border: 1px solid var(--line);
	border-radius: 2px; color: var(--ink); padding: 12px 14px; font-size: 16px; font-family: inherit;
}
.tsu-field input::placeholder { color: #6c6f77; }
.tsu-field input:focus { outline: none; border-color: var(--gold); }

.tsu-consent {
	display: flex; gap: 10px; align-items: flex-start; font-size: 12px;
	color: var(--muted); margin-top: 16px; line-height: 1.5;
}
.tsu-consent input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--gold); }
.tsu-req-after { font-size: 14px; color: var(--muted); margin: 12px 0 0; }
.tsu-form-out { margin: 12px 0 0; font-size: 14px; min-height: 1px; }
.tsu-form-out.is-err { color: #e39284; }
.tsu-form-out.is-ok { color: var(--ok); }
.tsu-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- калькулятор ---------- */

.tsu-calc { border: 1px solid var(--line); border-radius: 2px; background: var(--bg-2); padding: 6px 24px 22px; }
.tsu-calc-row { border-bottom: 1px solid var(--line); padding: 16px 0; }
.tsu-calc-row:last-of-type { border-bottom: none; }
.tsu-calc-name { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.tsu-calc-math { font-size: 16px; color: var(--muted); line-height: 2; }
.tsu-calc-math b { color: var(--ink); font-weight: 700; font-size: 20px; }
.tsu-calc-inp {
	width: 78px; min-height: 42px; background: var(--bg-3); border: 1px solid var(--line);
	border-radius: 2px; color: var(--ink); padding: 8px 10px; font-size: 16px;
	text-align: center; margin: 0 5px; font-family: inherit; font-weight: 600;
}
.tsu-calc-inp:focus { outline: none; border-color: var(--gold); }
.tsu-calc-left { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
.tsu-calc-left b { color: var(--gold); font-weight: 700; }
.tsu-calc-left.is-done { color: var(--ok); }
.tsu-calc-note { font-size: 14px; color: var(--muted); margin: 16px 0 0; max-width: 78ch; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- итог ---------- */

.tsu-total { border: 1px solid var(--line); border-radius: 2px; background: var(--bg-2); padding: 24px 28px; }
/* Разметку старого списка сняли: таблица счёта ниже ведёт себя сама.
   Правило .tsu-total td вешало нижнюю линию на каждую ячейку, включая
   подвал счёта, и на мобильной сетке эта линия рвалась по колонкам. */
.tsu-ship {
	font-size: 14px; margin: 12px 0 0; padding: 12px 14px; border-radius: 2px;
	background: var(--bg-3); border: 1px solid var(--line); color: var(--muted);
}
.tsu-ship.is-free { color: var(--ok); border-color: #3f6a56; }
.tsu-prepay { font-size: 14px; color: var(--ok); margin: 16px 0 0; }
.tsu-total-cta { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 20px; }
.tsu-msg { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.tsu-msg-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.tsu-msg .tsu-btn { margin-right: 9px; margin-bottom: 8px; }

/* ---------- как работает ---------- */

.tsu-steps4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: 14px; counter-reset: tsu-s; }
.tsu-steps4 > div { counter-increment: tsu-s; border-top: 2px solid var(--gold); padding-top: 16px; }
.tsu-steps4 > div:before {
	content: "0" counter(tsu-s); font-size: 12px; font-weight: 700;
	color: var(--gold); letter-spacing: .1em; display: block; margin-bottom: 8px;
}
.tsu-steps4 h3 { font-size: 16px; margin-bottom: 6px; }
.tsu-steps4 p { font-size: 14px; color: var(--muted); margin: 0; }

/* ---------- доверие ---------- */

.tsu-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 26px; }
.tsu-trust h3 { font-size: 16px; margin-bottom: 7px; color: var(--gold); }
.tsu-trust p { font-size: 14px; color: var(--muted); margin: 0; }

/* ---------- вопросы ---------- */

.tsu-l details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.tsu-l details summary {
	cursor: pointer; font-size: 16px; font-weight: 600; list-style: none;
	display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
}
.tsu-l details summary::-webkit-details-marker { display: none; }
.tsu-l details summary:after { content: "+"; color: var(--gold); font-size: 20px; font-weight: 300; line-height: 1; flex: none; }
.tsu-l details[open] summary:after { content: "\2212"; }
.tsu-l details p { margin: 12px 0 0; color: var(--muted); font-size: 14px; max-width: 70ch; }

/* ---------- финал ---------- */

.tsu-final { border-bottom: none; text-align: center; }
.tsu-final p { color: var(--muted); max-width: 52ch; margin-left: auto; margin-right: auto; }
.tsu-final .tsu-hero-cta { margin-top: 20px; justify-content: center; }

/* ---------- подвал ---------- */

.tsu-foot { padding: 40px 0 48px; font-size: 14px; color: var(--muted); background: var(--bg); }
.tsu-foot .tsu-in { display: flex; gap: 12px 28px; justify-content: space-between; flex-wrap: wrap; }

/* ---------- прилипающая строка итога ---------- */

.tsu-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
	background: rgba(18, 19, 23, .97); border-top: 1px solid var(--gold);
	transform: translateY(102%); transition: transform .25s ease;
}
.tsu-bar.is-on { transform: translateY(0); }
.tsu-bar-in { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.tsu-bar-t { font-size: 14px; color: var(--muted); }
.tsu-bar-t b { color: var(--ink); font-weight: 600; }
.tsu-bar-sum { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tsu-bar-cta { display: flex; gap: 9px; margin-left: auto; flex-wrap: wrap; }

/* ---------- липкая панель на телефоне ---------- */

.tsu-sticky {
	position: fixed; left: 0; right: 0; bottom: 0; display: none; gap: 9px;
	padding: 10px 14px; background: rgba(18, 19, 23, .95); border-top: 1px solid var(--line); z-index: 40;
}
.tsu-sticky .tsu-btn { flex: 1; min-height: 46px; }

/* ---------- окно быстрой заявки ---------- */

body.tsu-locked { overflow: hidden; }
.tsu-modal { position: fixed; inset: 0; z-index: 2000; }
.tsu-modal[hidden] { display: none; }
.tsu-modal-back { position: absolute; inset: 0; background: rgba(8, 9, 11, .82); }
.tsu-modal-box {
	position: relative; max-width: 660px; margin: 0 auto; top: 50%;
	transform: translateY(-50%); max-height: 92vh; overflow-y: auto;
	background: #17181c; color: #f2efe9; border: 1px solid #cfb883;
	border-radius: 2px; padding: 32px 30px 32px; font-size: 16px; line-height: 1.6;
}
.tsu-modal-box h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 12px; }
.tsu-modal-lead { color: #9a9790; font-size: 14px; margin: 0 0 22px; }
.tsu-modal-x {
	position: absolute; right: 10px; top: 6px; width: 44px; height: 44px;
	background: none; border: none; color: #74767c; font-size: 26px; cursor: pointer; padding: 0;
}
.tsu-modal-x:hover { color: #cfb883; }
.tsu-modal-after { font-size: 12px; color: #74767c; margin: 12px 0 0; }
.tsu-q { margin-bottom: 16px; }
.tsu-q-l { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #74767c; margin-bottom: 8px; }
.tsu-chips-sm .tsu-chip { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.tsu-modal-box .tsu-fields { margin-top: 20px; padding-top: 20px; border-top: 1px solid #32353d; }

/* ---------- ширины ---------- */

@media (min-width: 620px) {
	.tsu-formats { grid-template-columns: repeat(2, 1fr); }
	.tsu-sets { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.tsu-formats { grid-template-columns: repeat(3, 1fr); }
	.tsu-sets { grid-template-columns: repeat(3, 1fr); }
}


@media (max-width: 900px) {
	.tsu-hero-in { padding: 40px 20px 50px; }
	.tsu-fields { grid-template-columns: 1fr; }
	.tsu-req { padding: 24px 20px 26px; }
	.tsu-modal-box { padding: 24px 20px 26px; }
	.tsu-bar-cta { margin-left: 0; width: 100%; }
	.tsu-bar-cta .tsu-btn { flex: 1; }
}

@media (max-width: 860px) {
	.tsu-nav ul { gap: 14px; }
	.tsu-nav a { font-size: 14px; }
	.tsu-top-tel { font-size: 16px; }
}

@media (max-width: 620px) {
	.tsu-in, .tsu-hero-in, .tsu-hero-bar-in { padding-left: 16px; padding-right: 16px; }
	/* Три строки подряд — заголовок, подпись и кнопка под ними —
	   занимали треть экрана. Складываем в две колонки: текст слева,
	   кнопка справа во всю высоту. */
	.tsu-l details.tsu-fold > summary {
		display: grid; grid-template-columns: 1fr 30px; align-items: center;
		column-gap: 12px; row-gap: 1px; padding: 12px 14px;
	}
	.tsu-fold-t { grid-column: 1; font-size: 16px; line-height: 1.3; }
	.tsu-fold-h { grid-column: 1; font-size: 12px; line-height: 1.35; }
	.tsu-l details.tsu-fold > summary:after {
		grid-column: 2; grid-row: 1 / span 2; margin-left: 0; align-self: center;
		width: 30px; height: 30px; line-height: 27px; font-size: 20px;
	}
	.tsu-top { padding: 12px 0; }
	.tsu-top-in { flex-wrap: nowrap; gap: 10px; }
	.tsu-nav { display: none; }
	.tsu-logo img { width: 112px; }
	.tsu-top-tel { font-size: 16px; margin-left: auto; }
	.tsu-top-cart { padding: 7px 11px; font-size: 14px; }
	.tsu-sec { padding: 48px 0; }
	.tsu-step-head { padding: 16px 17px 0; flex-wrap: wrap; }
	.tsu-opt { margin-left: 0; width: 100%; }
	.tsu-step-body { padding: 12px 17px 20px; }
	.tsu-total { padding: 20px 18px; }
	.tsu-calc { padding: 4px 18px 18px; }
	.tsu-hero-cta .tsu-btn { width: 100%; }
	.tsu-hero-bar .tsu-rests { margin-left: 0; }
	.tsu-rests-row { gap: 8px 14px; }
	.tsu-rests-row img { max-height: 15px; }
	.tsu-bar { display: none; }
	.tsu-sticky { display: flex; }
	.tsu-foot { padding-bottom: 96px; }
	.tsu-modal-box { top: 0; transform: none; max-height: 100%; height: 100%; border: none; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* ---------- расчёт веса внутри раздела ----------
 * Калькулятор стоит у каждого формата отдельно: норма на человека
 * у сашими и у стейков разная, и считать их вместе бессмысленно.
 */

.tsu-fmt { margin-bottom: 32px; }
.tsu-fmt-calc {
	border: 1px solid var(--line); border-left: 3px solid var(--gold);
	border-radius: 2px; background: var(--bg-2); padding: 16px 18px 14px; margin-bottom: 16px;
}
.tsu-fmt-calc .tsu-calc-math { font-size: 16px; line-height: 2.1; margin-bottom: 12px; }
.tsu-fmt-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; }
.tsu-ctl-l {
	font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--muted); flex: none;
}
.tsu-fmt-ctl .tsu-chips { display: inline-flex; flex-wrap: wrap; gap: 7px; }
.tsu-fmt-ctl .tsu-chip { min-height: 38px; padding: 8px 15px; font-size: 14px; }
.tsu-chip-n { min-width: 44px; justify-content: center; font-weight: 700; }
.tsu-fmt-state {
	margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
	font-size: 14px; color: var(--muted);
}
.tsu-fmt-state b { color: var(--gold); font-weight: 700; }
.tsu-fmt .tsu-fork-tip { margin: 10px 0 0; padding-top: 0; border-top: none; }

@media (max-width: 620px) {
	.tsu-fmt-calc { padding: 12px 14px 12px; }
	.tsu-fmt-calc .tsu-calc-math { font-size: 16px; line-height: 2.3; }
}

/* ---------- кнопки над и под списком ---------- */

.tsu-goods-bar { margin: 0 0 12px; }
.tsu-goods-foot { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.tsu-fmt > .tsu-goods-title { margin: 0 0 14px; }

/* счётчик в чипе фильтра */
.tsu-chip-c { font-style: normal; color: var(--muted); font-weight: 400; margin-left: 2px; }
.tsu-chip[aria-pressed="true"] .tsu-chip-c { color: var(--gold-ink); opacity: .7; }

/* ---------- товары на телефоне ----------
 * Две карточки в ряд: по одной список получается бесконечным,
 * до кнопок внизу человек просто не доскроллит. Внутренности
 * ужимаем, иначе в 166 px ширины карточка не укладывается.
 */

@media (max-width: 620px) {
	.tsu-goods { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.tsu-good { padding-bottom: 12px; }
	.tsu-good-img img { height: 104px; }
	.tsu-good-in { padding: 12px 11px 0; }
	.tsu-good h4 { font-size: 14px; line-height: 1.3; margin-bottom: 4px; }
	.tsu-good-pr { font-size: 16px; }
	.tsu-good-pr small { font-size: 12px; }
	.tsu-badge { font-size: 12px; padding: 2px 5px; margin-bottom: 6px; letter-spacing: .06em; }
	.tsu-good-row { padding: 0 11px; margin-top: 8px; }
	.tsu-good-row .tsu-btn { padding-left: 6px; padding-right: 6px; font-size: 14px; min-height: 40px; }
	.tsu-qty { margin-top: 8px; }
	.tsu-qty label { font-size: 12px; letter-spacing: .04em; }
	.tsu-qty input { height: 34px; font-size: 16px; }
	.tsu-qty-b { width: 30px; height: 34px; font-size: 20px; }
	.tsu-skill { font-size: 12px; }
}

/* На совсем узких экранах две колонки уже не влезают. */
@media (max-width: 359px) {
	.tsu-goods { grid-template-columns: 1fr; }
}

/* ---------- поля расчёта ----------
 * На телефоне голое поле ввода не поменять без клавиатуры, поэтому
 * у нормы и количества человек такие же кнопки, как у веса в карточке.
 */

.tsu-calc-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; margin-bottom: 12px; }
.tsu-calc-f { flex: 0 0 auto; }
.tsu-calc-l {
	display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.tsu-calc-f .tsu-qty-row { width: 164px; }
.tsu-calc-f .tsu-calc-inp {
	flex: 1 1 auto; width: auto; min-width: 0; height: 38px; margin: 0;
	background: transparent; border: none; border-radius: 0;
	text-align: center; font-size: 16px; font-weight: 700; color: var(--ink);
}
.tsu-calc-f .tsu-calc-inp:focus { outline: none; }
.tsu-calc-f .tsu-calc-inp::-webkit-outer-spin-button,
.tsu-calc-f .tsu-calc-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tsu-calc-f .tsu-calc-inp[type=number] { -moz-appearance: textfield; }
.tsu-calc-sum { align-self: flex-end; padding-bottom: 7px; }
.tsu-calc-sum b { font-size: 26px; font-weight: 700; color: #fff; }

@media (max-width: 620px) {
	.tsu-calc-grid { gap: 12px 14px; }
	.tsu-calc-f { flex: 1 1 100%; }
	.tsu-calc-f .tsu-qty-row { width: 100%; }
	.tsu-calc-sum { padding-bottom: 0; }
	.tsu-calc-sum b { font-size: 20px; }
}

/* сколько штук выходит при выбранном весе */
.tsu-qty-n { margin: 6px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

/* своё количество человек на третьем шаге */
.tsu-people-free { flex: 0 0 100%; margin-top: 16px; }
.tsu-people-free .tsu-qty-row { width: 164px; }

@media (max-width: 620px) {
	.tsu-people-free .tsu-qty-row { width: 100%; }
}

/* выбор формата внутри разделов подбора */
.tsu-pick-more { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.tsu-pick-more:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.tsu-pick-more .tsu-calc-l { margin-bottom: 10px; }

/* ---------- правки по аудиту ---------- */

/* A2. Цена входа под кнопками первого экрана: холодный посетитель
   из сетей первым делом ищет, сколько это стоит. */
.tsu-hero-from {
	margin: 16px 0 0; font-size: 16px; color: var(--muted);
	text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}
.tsu-hero-from b { color: var(--gold); font-weight: 600; }

/* A3. Сумма за выбранное количество — на карточке, а не в корзине. */
.tsu-good-sum {
	margin: 10px 0 0; font-size: 14px; color: var(--muted); line-height: 1.4;
}
.tsu-good-sum b { color: var(--ink); font-weight: 600; }
.tsu-good-sum:empty { margin: 0; }

/* B3. Фасовка рядом с ценой: «4 700 ₽ / уп» без неё читается как ошибка. */
.tsu-good-pack {
	margin: 5px 0 0; font-size: 12px; color: var(--muted);
	text-transform: lowercase; letter-spacing: .02em;
}

/* A4. Набранный вес — главный ответ, и он виден, когда его достаточно. */
.tsu-fmt-state.is-done { color: var(--ink); border-top-color: var(--gold); }
.tsu-fmt-state.is-done b { color: var(--gold); }

/* B1. Пока ничего не выбрано, отправлять в мессенджер нечего. */
.tsu-btn:disabled { opacity: .4; cursor: not-allowed; }
.tsu-msg.is-off { opacity: .45; }
.tsu-msg.is-off .tsu-btn { cursor: not-allowed; }

/* B4. Ход для юрлица: в декабре это заметные деньги. */
.tsu-final-b2b { margin: 20px 0 0; font-size: 14px; color: var(--muted); }
.tsu-final-b2b a { color: var(--gold); }

/* C1. Мессенджеры и строка про предоплату выбивались из тёмно-золотой
   гаммы фирменным зелёным и синим. Оставляем узнаваемость в рамке
   и подписи, но убираем заливку. */
.tsu-btn-wa, .tsu-btn-tg {
	background: transparent; font-weight: 600;
}
.tsu-btn-wa { color: #6fc08c; border-color: #3c6b4f; }
.tsu-btn-wa:hover, .tsu-btn-wa:focus { background: rgba(111, 192, 140, .12); color: #8ad2a4; }
.tsu-btn-tg { color: #7ab6d8; border-color: #3a5e73; }
.tsu-btn-tg:hover, .tsu-btn-tg:focus { background: rgba(122, 182, 216, .12); color: #97c9e6; }
.tsu-prepay { color: #9fb8a4; }
.tsu-badge-stock { background: rgba(111, 192, 140, .14); color: #8ab99a; border: 1px solid rgba(111, 192, 140, .3); }

/* C4. Баннер куки: на тёмной странице он просится тёмным, а на телефоне
   стоял поверх нижней панели. */
body.tsu-page .site-cookie-notice {
	font-family: inherit; border-radius: 2px;
	background: rgba(30, 32, 37, .97); border-color: var(--line);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
body.tsu-page .site-cookie-notice a { color: var(--gold); }
body.tsu-page .site-cookie-notice button {
	background: var(--gold); color: var(--gold-ink);
	border-radius: 2px; font-family: inherit; font-weight: 600;
}

@media (max-width: 620px) {
	/* C2. Кнопки итога одной ширины: разнобой выглядит неряшливо. */
	.tsu-total-cta .tsu-btn, .tsu-msg .tsu-btn { flex: 1 1 100%; width: 100%; margin-right: 0; }

	/* C3. Согласие на обработку данных уходило под нижнюю панель. */
	.tsu-step-accent { padding-bottom: 72px; }

	body.tsu-page .site-cookie-notice { bottom: 96px; font-size: 14px; padding: 12px 14px; }

	/* A5. Сторонний виджет садится в левый нижний угол и накрывает
	   панель. Нашли его — освобождаем гнездо отступом. */
	.tsu-widget .tsu-sticky { padding-left: 72px; }
	.tsu-widget .tsu-bar-in { padding-left: 64px; }
}


/* ---------- правки по разбору на телефоне, 5 ноября ---------- */

/* Затемнение первого экрана шло слева направо: на широком экране текст
   лежит на тёмной половине, а на телефоне занимает всю ширину и правым
   краем выезжает на светлую часть фотографии. Там свой градиент —
   сверху вниз, и плотнее. */
@media (max-width: 620px) {
	.tsu-hero:before {
		background: linear-gradient(180deg, rgba(23, 24, 28, .92) 0%, rgba(23, 24, 28, .86) 45%, rgba(23, 24, 28, .93) 100%);
	}
	.tsu-hero h1, .tsu-lede { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
	.tsu-lede { color: #cfcbc3; }
}

/* Кнопки с числом гостей были разной ширины: «2» уже, «12» шире,
   и ряд выглядел неровным. Делаем сетку с равными ячейками. */
/* Целимся именно в ряд кнопок внутри шага, а не в сам контейнер:
   у #tsu-people свой класс tsu-chips, и правило по .tsu-step-body
   раскладывало сеткой его самого — кнопки вставали столбиком,
   а поле «впишите своё число» уезжало вбок. */
#tsu-people > .tsu-chips,
#tsu-m-people > .tsu-chips {
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; flex: 1 1 100%;
}
#tsu-people > .tsu-chips .tsu-chip-n,
#tsu-m-people > .tsu-chips .tsu-chip-n { min-width: 0; width: 100%; padding-left: 0; padding-right: 0; }

@media (max-width: 420px) {
	#tsu-people > .tsu-chips,
	#tsu-m-people > .tsu-chips { grid-template-columns: repeat(3, 1fr); }
}

/* «Граммов на человека» и «человек за столом» на телефоне вставали
   друг под другом и растягивали калькулятор на три экрана. Это две
   цифры одного действия — им место в одной строке. */
@media (max-width: 620px) {
	.tsu-calc-grid { gap: 12px 10px; }
	.tsu-calc-f { flex: 1 1 calc(50% - 5px); min-width: 0; }
	.tsu-calc-f .tsu-calc-l { font-size: 12px; }
	.tsu-calc-sum { flex: 1 1 100%; }
}

/* Итог под полем: вес и сумма одной строкой по левому краю,
   а не вес по центру и сумма отдельным абзацем ниже. */
.tsu-good-sum { text-align: left; }
.tsu-good-sum b { white-space: nowrap; }

/* Позиция, уже взятая в другом разделе. */
.tsu-good-taken {
	margin: 8px 0 0; font-size: 12px; color: var(--gold); line-height: 1.45;
}
/* Пустой абзац места не занимает: он есть в разметке всегда,
   чтобы кнопки ± могли его наполнить. */
.tsu-good-taken:empty { margin: 0; }


/* ---------- прилипающая панель: прогресс, фильтры, два хода ---------- */

/* Панель прижата к низу, а место виджету чата отдаём отступом:
   если поднимать её целиком, под ней остаётся дыра и панель
   выглядит висящей в воздухе. */
.tsu-sticky { flex-direction: column; gap: 0; padding: 0 0 var(--tsu-widget-h, 0px); bottom: 0; }
.tsu-sticky-row { display: flex; gap: 9px; padding: 10px 14px; align-items: center; }
.tsu-sticky-row .tsu-btn { flex: 1; min-height: 46px; }

/* Прогресс раздела: крупная цифра набранного и тихое пояснение,
   что это чистый вес, а не вес покупки. */
.tsu-sticky-st { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--muted); line-height: 1.25; }
.tsu-sticky-st b { display: inline; color: var(--gold); font-weight: 700; font-size: 20px; }
.tsu-sticky-st i { display: block; font-style: normal; font-size: 12px; color: #7e8291; margin-top: 2px; }
.tsu-sticky-row .tsu-sticky-st + .tsu-btn { flex: 0 0 auto; min-width: 116px; }

/* Панель раскрывается вверх из той же полосы. */
.tsu-sticky-panel {
	max-height: min(62vh, 520px); overflow-y: auto;
	border-bottom: 1px solid var(--line); background: rgba(14, 15, 19, .98);
}
.tsu-sticky-panel[hidden] { display: none; }
.tsu-panel-in { padding: 12px 14px 10px; }
.tsu-panel-in .tsu-fmt-ctl:last-child { margin-bottom: 0; }

/* Мессенджеры и телефон одним столбцом. */
.tsu-ask { display: flex; flex-wrap: wrap; gap: 9px; }
.tsu-ask-l {
	flex: 1 1 100%; font-size: 12px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}
.tsu-ask-i {
	flex: 1 1 calc(50% - 5px); min-height: 46px; display: inline-flex;
	align-items: center; justify-content: center; text-align: center;
	border: 1px solid var(--line); border-radius: 2px; background: var(--bg-3);
	color: var(--ink); font-size: 14px; text-decoration: none;
}
.tsu-ask-i:hover, .tsu-ask-i:focus { border-color: var(--gold); color: var(--gold); text-decoration: none; }

/* Два хода между разделами подбора. */
.tsu-sec-cta {
	display: flex; gap: 10px; flex-wrap: wrap;
	margin: 20px 0 30px; padding-top: 20px; border-top: 1px solid var(--line);
}
.tsu-sec-cta .tsu-btn { flex: 1 1 200px; min-height: 46px; }
/* Список мессенджеров раскрывается под кнопкой своей строкой. */
.tsu-sec-cta .tsu-ask { flex: 1 1 100%; margin-top: 4px; }

/* Кнопки «отправить запрос в мессенджер» в пятом шаге. */
.tsu-msg-brief { margin: 12px 0 18px; }

@media (max-width: 620px) {
	.tsu-foot { padding-bottom: calc(96px + var(--tsu-widget-h, 0px)); }
	body.tsu-page .site-cookie-notice { bottom: calc(100px + var(--tsu-widget-h, 0px)); }
	.tsu-step-accent { padding-bottom: 20px; }
	/* Отступ слева больше не нужен: панель поднимается над виджетом. */
	.tsu-widget .tsu-sticky { padding-left: 0; }
	.tsu-widget .tsu-bar-in { padding-left: 20px; }
}


/* Телефон под формой пятого шага: это отдельный ход — поговорить
   сейчас, а не отправить запрос. Поэтому крупно и отдельной строкой. */
.tsu-req-call {
	margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
	display: flex; flex-direction: column; gap: 3px;
}
.tsu-req-call-l {
	font-size: 12px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--muted);
}
.tsu-req-call-n {
	font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--gold);
	text-decoration: none; letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
.tsu-req-call-n:hover, .tsu-req-call-n:focus { color: #e1d2b4; text-decoration: none; }
.tsu-req-call-h { font-size: 12px; color: var(--muted); }

@media (max-width: 620px) {
	.tsu-req-call-n { font-size: 26px; }
}


/* Итог калькулятора стоит сразу под полями и читается крупнее:
   это главная цифра раздела, а не подпись к фильтрам. */
.tsu-fmt-calc > .tsu-fmt-state {
	margin: 2px 0 14px; padding-top: 0; border-top: none;
	font-size: 16px; line-height: 1.4;
}
.tsu-fmt-calc > .tsu-fmt-state b { font-size: 20px; }

@media (max-width: 620px) {
	.tsu-fmt-calc > .tsu-fmt-state { font-size: 16px; }
	.tsu-fmt-calc > .tsu-fmt-state b { font-size: 20px; }
}


/* Поле «или впишите своё число» на третьем шаге. У него нет обёртки
   .tsu-calc-f, поэтому правила калькулятора его не касались: число
   не растягивалось между кнопками, строка уходила во всю ширину,
   и справа от «+» висела пустота. */
.tsu-people-free { margin-top: 12px; }
.tsu-people-free .tsu-calc-l { display: block; margin-bottom: 7px; }
.tsu-people-free .tsu-qty-row { width: 186px; max-width: 100%; }
.tsu-people-free .tsu-qty-b { flex: none; }
.tsu-people-free .tsu-calc-inp {
	flex: 1 1 auto; width: auto; min-width: 0; height: 38px; margin: 0;
	background: transparent; border: none; border-radius: 0;
	text-align: center; font-size: 16px; font-weight: 700; color: var(--ink);
	font-family: inherit;
}
.tsu-people-free .tsu-calc-inp:focus { outline: none; }
.tsu-people-free .tsu-calc-inp::-webkit-outer-spin-button,
.tsu-people-free .tsu-calc-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tsu-people-free .tsu-calc-inp[type=number] { -moz-appearance: textfield; }

@media (max-width: 620px) {
	/* Раньше строка здесь растягивалась на сто процентов. */
	.tsu-people-free .tsu-qty-row { width: 186px; }
}


/* Напоминание в окне заявки, что собранный список к ней приложен. */
.tsu-modal-cart {
	margin: 0 0 16px; padding: 12px 13px; font-size: 14px; line-height: 1.45;
	color: var(--ink); background: #241f14; border: 1px solid #6a5c37; border-radius: 2px;
}
.tsu-modal-cart[hidden] { display: none; }
.tsu-modal-cart b { color: var(--gold); font-weight: 700; }


/* Кнопки ± были ровно 34 px, поле рядом — 42, а ряд — 44, и под
   кнопками оставался просвет. Высоту задаём ряду, а кнопки и поле
   растягиваем по нему: тогда у всех троих общая верхняя и нижняя
   граница. Касается обоих калькуляторов — в разделе и на шаге 03. */
.tsu-calc-f .tsu-qty-row,
.tsu-people-free .tsu-qty-row { align-items: stretch; min-height: 40px; }

.tsu-calc-f .tsu-qty-row .tsu-qty-b,
.tsu-people-free .tsu-qty-row .tsu-qty-b {
	height: auto !important; min-height: 0; align-self: stretch;
	display: flex; align-items: center; justify-content: center; line-height: 1;
}
.tsu-calc-f .tsu-qty-row .tsu-calc-inp,
.tsu-people-free .tsu-qty-row .tsu-calc-inp {
	height: 40px !important; min-height: 40px;
	padding-top: 0 !important; padding-bottom: 0 !important;
	align-self: stretch;
}

/* Виджет «Заказать в мессенджере» убран с лендинга совсем: внизу
   стоит своя панель с WhatsApp, Telegram, MAX и телефоном, и две
   плавающие кнопки спорили друг с другом, а подсказка виджета
   накрывала наши. Файл подключается только на этой странице,
   на остальном сайте виджет работает как прежде. */
.chaty,
.chaty-widget { display: none !important; }


/* ---------- дисциплина цвета ----------
 *
 * Золотой делал шесть работ сразу и встречался 58 раз: заливка кнопки,
 * активное состояние, акцент на цифрах, ссылки, номера шагов, полоски.
 * Когда цвет значит всё, он не значит ничего — и главная кнопка
 * переставала выделяться. Оставляем золотому две работы:
 *
 *   1. заливка главного действия;
 *   2. цифра, ради которой человек сюда пришёл.
 *
 * Всё остальное, что было золотым, уходит в основной и приглушённый.
 * Обводка фокуса не в счёт: её видно только с клавиатуры.
 */

/* Надзаголовки разделов: это подписи, а не акценты. */
.tsu-eyebrow,
.tsu-calc-name,
.tsu-set-ppl,
.tsu-steps4 > div:before { color: var(--muted); }

/* Выбранный чип: светлее поверхность и обычный текст, золотая
   волосяная рамка остаётся признаком выбора. */
.tsu-chip[aria-pressed="true"] {
	background: #343842; color: var(--ink); border-color: var(--gold);
}
.tsu-chip[aria-pressed="true"] .tsu-chip-c { color: var(--muted); opacity: 1; }

/* Выбранный формат: отметка остаётся золотой, название — обычным. */
.tsu-format[aria-pressed="true"] b { color: var(--ink); }

/* Номер пройденного шага: приглушённая плашка. Золотой остаётся
   только у шага с заявкой — он и есть главное действие. */
.tsu-step.is-done .tsu-step-n {
	background: var(--bg-3); color: var(--ink); border-color: var(--line);
}

/* Заголовки и ссылки в тексте — цветом текста, а не золотом. */
.tsu-trust h3 { color: var(--ink); }
.tsu-good h4 a:hover { color: var(--ink); text-decoration: underline; }
.tsu-final-b2b a { color: var(--ink); text-decoration: underline; }
.tsu-ask-i:hover, .tsu-ask-i:focus { color: var(--ink); border-color: #6b7080; }
.tsu-qty-b:hover { color: var(--ink); }

/* Плюсы у свёрнутых блоков и метка готовой подачи — служебные знаки. */
.tsu-l details summary:after,
.tsu-l details.tsu-fold > summary:after { color: var(--muted); }
.tsu-l details.tsu-fold > summary:after { border-color: var(--line); }
.tsu-badge-ready { color: var(--muted); border-color: var(--line); }

/* Заметка «уже взято в другом разделе» — сообщение, а не акцент. */
.tsu-good-taken { color: var(--muted); }


/* Тонкие настройки раздела под кнопкой «Настроить». */
.tsu-fmt-more { margin-top: 4px; }
.tsu-fmt-more[hidden] { display: none; }
.tsu-chip-more { color: var(--muted); }
.tsu-chip-more[aria-pressed="true"] { color: var(--ink); }


/* Плашка преимуществ под первым экраном.
 *
 * Было: гибкая строка с переносом, а четвёртый блок («Поставляем
 * ресторанам») прижат margin-left:auto. Из-за этого между третьим
 * и четвёртым зияла дыра в четверть ширины, а на широком экране
 * четвёртый срывался на вторую строку и повисал справа один.
 * Стало: сетка из равных колонок — все четыре стоят по одной линии
 * и переносятся предсказуемо, по две и по одной. */
.tsu-hero-bar-in {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
	gap: 16px 32px;
}
.tsu-hero-bar .tsu-rests { margin-left: 0; }

@media (max-width: 900px) {
	.tsu-hero-bar-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.tsu-hero-bar-in { grid-template-columns: 1fr; gap: 12px; }
}


/* Подсказка раздела под текстовой кнопкой. */
.tsu-tip { margin-top: 12px; }
.tsu-tip-b {
	background: none; border: none; padding: 0; cursor: pointer;
	font-family: inherit; font-size: 14px; color: var(--muted);
	border-bottom: 1px dashed var(--line); line-height: 1.5;
}
.tsu-tip-b:hover, .tsu-tip-b:focus { color: var(--ink); border-bottom-color: var(--muted); }
.tsu-tip-b[aria-expanded="true"] { color: var(--ink); }
.tsu-tip-body { margin-top: 8px; }
.tsu-tip-body[hidden] { display: none; }
.tsu-tip-body .tsu-fork-tip:first-child { margin-top: 0; }
.tsu-tip-body b { color: var(--ink); font-weight: 600; }

/* Третье поле калькулятора: на телефоне три в ряд не помещаются,
   поэтому «виды» уходят под первые два во всю ширину. */
@media (max-width: 620px) {
	.tsu-calc-grid > .tsu-calc-f:nth-child(3) { flex: 1 1 100%; }
}


/* Шапка на узком экране. Ряд без переноса: логотип 112 + телефон 119 +
   корзина 114 и два зазора по 10 дают 365 при доступных 343, поэтому
   корзину выдавливало за правый край и страница получала шесть
   лишних пикселей горизонтальной прокрутки. Ужимаем логотип и зазор —
   этого хватает, и ничего прятать не приходится. */
@media (max-width: 400px) {
	.tsu-top-in { gap: 8px; }
	.tsu-logo img { width: 92px; }
	.tsu-top-cart { padding: 7px 9px; }
	.tsu-top-tel { white-space: nowrap; }
}


/* ---------- глубина вместо рамок ----------
 *
 * На странице было 333 элемента с рамкой в один пиксель и ровно одна
 * тень на весь файл. Всё разделено линиями, ничто не отделено светом —
 * отсюда ощущение коробок в коробках.
 *
 * Правило: рамка остаётся там, где несёт смысл — поле ввода должно
 * читаться как поле, кнопка-призрак как кнопка, разделители внутри
 * степпера отделяют минус и плюс от числа, золотая грань отмечает
 * выбор. Всё остальное отделяется поверхностью и тенью.
 */

/* Палитра объявлена на .tsu-l, но модалка, липкая панель и нижняя
   полоска лежат вне обёртки — там var(--line) не разрешался, и целая
   сокращённая запись border отваливалась: поля запроса оставались
   без рамки и без фона. Повторяем палитру на :root. */
:root {
	--bg: #17181c;
	--bg-2: #1e2025;
	--bg-3: #262930;
	--gold: #cfb883;
	--gold-ink: #3a2e14;
	--ink: #f2efe9;
	--muted: #9a9790;
	--line: #32353d;
	--ok: #7fc0a0;
	--warn: #d9a45b;
	--bg-4: #2b2f37;
	--sh-1: 0 1px 2px rgba(0, 0, 0, .45);
	--sh-2: 0 6px 18px rgba(0, 0, 0, .45);
	--sh-3: 0 16px 44px rgba(0, 0, 0, .55);
}

/* Секции разделяет воздух, а не линия. */
.tsu-sec, .tsu-fold-sec, .tsu-hero { border-bottom: none; }

/* Карточка товара отделяется от фона светом. Выбранная — золотой
   гранью, она теперь единственная рамка на карточке и потому видна. */
.tsu-good {
	border: none; background: var(--bg-3); box-shadow: var(--sh-2);
}
.tsu-good.is-sel {
	box-shadow: var(--sh-2), inset 0 0 0 1px var(--gold);
}
.tsu-good-img { border: none; }

/* Наборы — то же самое. */
.tsu-set { border: none; background: var(--bg-3); box-shadow: var(--sh-2); }
.tsu-set:hover { box-shadow: var(--sh-2), inset 0 0 0 1px #5d6170; }
.tsu-set-img { border: none; }
.tsu-set-items { border: none; border-top: 1px solid var(--line); }

/* Шаги конструктора: поверхность и мягкая тень, золотая грань
   остаётся только у шага с заявкой. */
.tsu-step { border: none; background: var(--bg-2); box-shadow: var(--sh-1); }
.tsu-step-accent { border: none; box-shadow: var(--sh-2), inset 3px 0 0 var(--gold); }

/* Калькулятор раздела: золотая грань слева как была, рамки нет. */
.tsu-fmt-calc {
	border: none; background: var(--bg-2);
	box-shadow: var(--sh-1), inset 3px 0 0 var(--gold);
}

/* Карточка формата. */
.tsu-format { border: none; background: var(--bg-3); box-shadow: var(--sh-1); }
.tsu-format:hover { box-shadow: var(--sh-2); }
.tsu-format[aria-pressed="true"] { box-shadow: var(--sh-2), inset 0 0 0 1px var(--gold); }
.tsu-format-img { border: none; }

/* Чипы: поверхность вместо рамки. Сорок две линии, которые ничего
   не значили, уходят; выбранный чип остаётся с золотой гранью
   и потому читается с первого взгляда. */
.tsu-chip { border: none; background: var(--bg-4); }
.tsu-chip:hover { background: #343842; }
.tsu-chip[aria-pressed="true"] {
	background: #343842; box-shadow: inset 0 0 0 1px var(--gold);
}

/* Метка на карточке — тоже поверхность. */
.tsu-badge { border: none; background: rgba(0, 0, 0, .35); }
.tsu-badge-ready { background: rgba(207, 184, 131, .14); color: var(--gold); }

/* Свёрнутые блоки. */
.tsu-l details.tsu-fold > summary {
	border: none; background: var(--bg-3);
	box-shadow: var(--sh-1), inset 3px 0 0 var(--gold);
}
.tsu-l details.tsu-fold > summary:hover { background: #2d313a; }
.tsu-l details.tsu-fold[open] > summary { box-shadow: var(--sh-2), inset 3px 0 0 var(--gold); }

/* Заявка, окно и нижняя панель — самый верхний слой. */
.tsu-brief { border: none; background: var(--bg-3); box-shadow: var(--sh-1); }
.tsu-modal-box { box-shadow: var(--sh-3); }
.tsu-sticky { box-shadow: var(--sh-3); }
.tsu-sticky-panel { border-bottom: none; box-shadow: var(--sh-1); }

/* Что рамку сохраняет: поля ввода, кнопки-призраки и разделители
   внутри степпера. Там линия — это форма элемента, а не украшение. */

/* ==========================================================================
   Фактура подложки и ботанические акценты (7.15.0)

   Плитка 600×600 нарезана из тёмного сланца баннера: крупные пятна сняты
   фильтром, стык сделан перекрёстным затуханием с заворотом — зеркал нет,
   поэтому в повторе не возникает ромбов. Яркость 18–29 при --bg = 24,
   так что под текстом ничего не меняется по контрасту.

   Листья и розмарин вырезаны по альфе из того же кадра. Расположены
   заново, не как в исходнике: по краям повествовательных секций,
   за содержимым, фрагментами, уходящими за обрез.
   ========================================================================== */

body.tsu-page {
	background: #17181c url("../img/tsu/tsu-fon.jpg") repeat 0 0;
	background-size: 600px 600px;
}

/* Обёртка и плоские секции — прозрачные, иначе камень под ними пропадёт. */
.tsu-l { background: transparent; }
/* Подвал и верхняя полоска были ровно цвета --bg, то есть средней
   яркости плитки. Значит их заливка не нужна вовсе. */
.tsu-foot, .tsu-top { background: transparent; }

/* Цветные секции. Если просто притушить прежний цвет, фактура под ними
   гаснет в шесть раз и по странице видно, где она включается. Поэтому
   берём светлее и прозрачнее: 0.35 x (43,47,54) поверх средней яркости
   плитки (23,24,28) даёт те же (30,32,37), что и прежний --bg-2,
   а зерно теряет лишь треть силы вместо шести седьмых. */
.tsu-soft, .tsu-dark, .tsu-fold-sec { background: rgba(43, 47, 54, .35); }

/* ---------- акценты ---------- */

#tsu-how, #tsu-trust, #tsu-faq, .tsu-final { position: relative; overflow: hidden; }
#tsu-how > *, #tsu-trust > *, #tsu-faq > *, .tsu-final > * { position: relative; z-index: 1; }

#tsu-how:after,
#tsu-trust:before,
#tsu-faq:after,
.tsu-final:before {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	background-repeat: no-repeat; background-size: contain;
	background-position: center;
}

/* «Четыре шага» — лист заходит с правого обреза внутрь полосы. */
#tsu-how:after {
	right: -58px; bottom: 24px; width: 236px; height: 300px;
	background-image: url("../img/tsu/el-list.png");
	transform: rotate(-17deg); opacity: .13;
}

/* «Что стоит за ценой» — розмарин слева, развёрнут остриём вверх. */
#tsu-trust:before {
	left: -46px; top: 36px; width: 216px; height: 260px;
	background-image: url("../img/tsu/el-rozmarin.png");
	transform: rotate(152deg); opacity: .12;
}

/* Вопросы — тот же лист зеркально и мельче, чтобы не повторяться. */
#tsu-faq:after {
	left: -62px; top: 46%; width: 196px; height: 250px;
	background-image: url("../img/tsu/el-list.png");
	transform: scaleX(-1) rotate(-9deg); opacity: .09;
}

/* Финальный экран — розмарин справа, под другим углом. */
.tsu-final:before {
	right: -40px; top: 18px; width: 186px; height: 224px;
	background-image: url("../img/tsu/el-rozmarin.png");
	transform: rotate(-28deg); opacity: .1;
}

/* Поля кончились — акценты полезли бы под текст. Снимаем. */
@media (max-width: 1080px) {
	#tsu-how:after, #tsu-trust:before, #tsu-faq:after, .tsu-final:before { display: none; }
}

/* Плитка на мобильном мельче: при 600px на 375-м экране виден один кусок
   и фактура читается как пятно, а не как камень. */
@media (max-width: 620px) {
	body.tsu-page { background-size: 360px 360px; }
}

/* ==========================================================================
   «Ваш стол» как счёт (7.16.0)

   На тридцать–пятьдесят тысяч список позиций доверия не вызывает: не видно,
   из чего сложилась сумма. Поэтому строка счёта несёт количество, цену за
   единицу и произведение — каждую можно пересчитать в уме. Цифры
   моноширинные и прижаты вправо, разряд встаёт под разряд. Итог отбит
   двойным воздухом и линией.
   ========================================================================== */

.tsu-bill-cap {
	margin: 0 0 16px; font-size: 12px; color: var(--muted);
	letter-spacing: .06em; text-transform: uppercase;
}

.tsu-bill { width: 100%; border-collapse: collapse; font-size: 14px; }
.tsu-bill td, .tsu-bill th { padding: 11px 0; vertical-align: baseline; }
.tsu-bill tbody td { border-bottom: 1px solid var(--line); }

.tsu-bill-name { padding-right: 16px; }

/* Все три числовые колонки — к правому краю и моноширинными цифрами:
   тысячи встают под тысячами, рубль под рублём. */
.tsu-bill-q, .tsu-bill-p, .tsu-bill-s {
	text-align: right; white-space: nowrap;
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
}
.tsu-bill-q { width: 88px; padding-left: 20px; color: var(--muted); }
.tsu-bill-p { width: 132px; padding-left: 14px; color: var(--muted); }
.tsu-bill-s { width: 112px; padding-left: 20px; font-weight: 600; }

/* Заголовок раздела: место, откуда позицию взяли. */
.tsu-bill-grp th {
	text-align: left; padding: 26px 0 7px;
	font-size: 12px; font-weight: 600; letter-spacing: .09em;
	text-transform: uppercase; color: var(--muted);
	border-bottom: 1px solid var(--line);
}
.tsu-bill tbody tr:first-child th { padding-top: 0; }

.tsu-bill-sub td { border-bottom: none; color: var(--muted); font-size: 13px; }
.tsu-bill-sub td:first-child { text-align: right; padding-right: 0; }

/* Отбивка итога. Последняя строка счёта отдаёт свою линию: иначе
   волосяная линия строки и линия итога слипались в одну толстую. */
.tsu-bill tbody tr:last-child td { border-bottom: none; padding-bottom: 26px; }
.tsu-bill-ship td { padding-top: 22px; color: var(--muted); border-top: 2px solid var(--line); }
.tsu-bill-ship.is-free .tsu-bill-s { color: var(--ok); font-weight: 400; }
.tsu-bill-ship .tsu-bill-s { font-weight: 400; }

.tsu-bill-tot th { text-align: left; font-size: 16px; font-weight: 600; }
.tsu-bill-tot th, .tsu-bill-tot td { padding: 6px 0 0; }
.tsu-bill-tot .tsu-bill-s { font-size: 26px; font-weight: 700; color: var(--gold); }

/* Узкий экран: четыре колонки не встают. Строка разворачивается в две —
   сверху название и сумма, снизу расчёт, по которому её можно проверить. */
@media (max-width: 620px) {
	.tsu-bill, .tsu-bill tbody, .tsu-bill tfoot, .tsu-bill tr,
	.tsu-bill td, .tsu-bill th { display: block; width: auto; }

	.tsu-bill tbody tr {
		display: grid; grid-template-columns: 1fr auto; column-gap: 14px;
		padding: 11px 0; border-bottom: 1px solid var(--line);
	}
	.tsu-bill tbody td { padding: 0; border-bottom: none; }
	.tsu-bill-name { grid-column: 1; grid-row: 1; padding-right: 0; }
	.tsu-bill-s { grid-column: 2; grid-row: 1; padding-left: 0; }
	.tsu-bill-q { grid-column: 1; grid-row: 2; text-align: left; padding-left: 0; font-size: 13px; }
	.tsu-bill-p { grid-column: 2; grid-row: 2; padding-left: 0; font-size: 13px; }

	.tsu-bill tbody tr.tsu-bill-grp { display: block; border-bottom: none; padding: 22px 0 0; }
	.tsu-bill-grp th { padding: 0 0 7px; }
	.tsu-bill tbody tr.tsu-bill-sub {
		grid-template-columns: 1fr auto; border-bottom: none; padding-top: 9px;
	}
	.tsu-bill-sub td:first-child { grid-row: 1; grid-column: 1; text-align: left; }
	.tsu-bill-sub .tsu-bill-s { grid-row: 1; grid-column: 2; }

	.tsu-bill tfoot tr {
		display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: baseline;
	}
	/* Линия итога — на самой строке. На ячейках её разрывал зазор сетки. */
	.tsu-bill tfoot tr.tsu-bill-ship {
		border-top: 2px solid var(--line); padding-top: 20px; margin-top: 4px;
	}
	.tsu-bill-ship td { padding: 0; border-top: none; }
	.tsu-bill-tot th, .tsu-bill-tot td { padding: 8px 0 0; }
}

/* Тень у заголовка первого экрана стояла только на узких экранах,
   а фото под ним светлое на любой ширине. Ставим везде. */
.tsu-hero h1, .tsu-lede { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }