/* ibonus — общие стили демонстрационных примеров. Палитра каждой страницы — класс на <body>. */

/* Шрифт со своего сервера (scripts/build_fonts.py, лицензия OFL — assets/fonts/OFL-Onest.txt) */
@font-face {
  font-family: "Onest";
  src: url("../fonts/onest.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ex-bg: #F5F5F5;
  --ex-surface: #FFFFFF;
  --ex-text: #1A1A1A;
  --ex-muted: #555555;
  --ex-border: #E2E2E2;
  --ex-accent: #1D4ED8;
  --ex-accent-bg: #E8EEFC;
  --ex-on-accent: #FFFFFF;
  --ex-control: #8C8C8C;
  --ex-radius: 14px;
  --ex-font: "Onest", "Segoe UI", "Helvetica Neue", sans-serif;
  --gutter: 16px;
  color-scheme: light;
}
@media (min-width: 768px) { :root { --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--ex-bg);
  color: var(--ex-text);
  font: 400 1.0625rem/1.55 var(--ex-font);
  overflow-x: hidden;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 1.3rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.375rem, 1.15rem + 1.1vw, 2rem); }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1em; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--ex-accent); text-underline-offset: .18em; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--ex-accent); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(1120px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.block { padding-block: clamp(40px, 6vw, 80px); }
.muted { color: var(--ex-muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* плашка «Демонстрационный пример» */
.demo-bar {
  padding: 8px var(--gutter);
  background: #12201B;
  color: #E8F0ED;
  font-size: .875rem;
  text-align: center;
}
.demo-bar a { color: #8FE3C7; font-weight: 600; }

/* кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: 12px;
  font: 600 1rem/1.2 var(--ex-font);
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--ex-accent); color: var(--ex-on-accent); }
.btn-primary:hover { filter: brightness(.92); }
.btn-ghost { background: var(--ex-surface); color: var(--ex-text); border-color: var(--ex-control); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* шапка примера */
.ex-header { background: var(--ex-surface); border-bottom: 1px solid var(--ex-border); }
.ex-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 64px; padding-block: 8px; }
.ex-brand { font-weight: 700; font-size: 1.25rem; color: var(--ex-text); text-decoration: none; }
.ex-contacts { display: flex; flex-wrap: wrap; gap: 4px 20px; color: var(--ex-muted); font-size: .9375rem; }
.ex-contacts span { display: inline-flex; align-items: center; gap: 6px; }
.ex-contacts .icon { width: 18px; height: 18px; }
.ex-contacts a { display: inline-flex; align-items: center; min-height: 44px; }

/* поверхности */
.panel { background: var(--ex-surface); border: 1px solid var(--ex-border); border-radius: var(--ex-radius); }
.media img { width: 100%; border-radius: var(--ex-radius); }

/* чипы-фильтры */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; list-style: none; }
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--ex-control);
  border-radius: 999px;
  background: var(--ex-surface);
  color: var(--ex-text);
  font: 500 .9375rem/1.2 var(--ex-font);
  text-decoration: none;
  cursor: pointer;
}
.chip[aria-pressed="true"], .chip.is-active { background: var(--ex-accent); border-color: var(--ex-accent); color: var(--ex-on-accent); }

/* поля */
label { display: block; font-weight: 600; margin-bottom: 6px; }
input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--ex-control);
  border-radius: 10px;
  background: var(--ex-surface);
  color: var(--ex-text);
  font: inherit;
}
.field { margin-bottom: 16px; }

.ex-footer { padding-block: 32px; border-top: 1px solid var(--ex-border); color: var(--ex-muted); font-size: .875rem; }
.ex-footer p { margin: 0 0 .4em; }

.price-tag { font-weight: 700; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ================= палитры примеров ================= */

.ex-menu { --ex-bg: #FBF7F2; --ex-surface: #FFFFFF; --ex-text: #2B1D14; --ex-muted: #6B5547; --ex-border: #EADFD3; --ex-accent: #2F6B3F; --ex-accent-bg: #E6F0E8; --ex-control: #A8927F; }
.ex-landing { --ex-bg: #F4F5F7; --ex-surface: #FFFFFF; --ex-text: #1B2430; --ex-muted: #556070; --ex-border: #DEE2E8; --ex-accent: #B4430B; --ex-accent-bg: #FBEEE6; --ex-control: #8C96A3; }
.ex-price { --ex-bg: #F2F4F6; --ex-surface: #FFFFFF; --ex-text: #111827; --ex-muted: #4B5563; --ex-border: #DDE1E6; --ex-accent: #1D4ED8; --ex-control: #8B95A1; }
.ex-catalog { --ex-bg: #FBF6F8; --ex-surface: #FFFFFF; --ex-text: #2A1B24; --ex-muted: #6E5462; --ex-border: #EEDFE6; --ex-accent: #9B3468; --ex-control: #A98E9B; --ex-radius: 20px; }

/* ================= menu ================= */

.menu-hero { padding-bottom: 24px; display: grid; gap: 28px; align-items: center; }
.hero-kicker { margin: 0 0 8px; color: var(--ex-accent); font-weight: 700; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-lead { font-size: 1.125rem; }
.hero-promo {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
  min-height: 44px; padding: 8px 16px 8px 12px; border-radius: 999px;
  background: var(--ex-surface); border: 1px solid var(--ex-border); color: var(--ex-text);
  text-decoration: none; font-size: .9375rem; font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 18px rgb(43 29 20 / .08);
}
.hero-promo .icon { color: var(--ex-accent); }
.hero-promo.is-on { border-color: var(--ex-accent); background: var(--ex-accent-bg); }
.hero-promo.is-on .icon { animation: tour-ping 2s ease-out infinite; border-radius: 50%; }

/* коллаж блюд: карточки на разной «глубине» сдвигаются за курсором */
.hero-collage { position: relative; aspect-ratio: 5 / 4; max-width: 560px; width: 100%; margin-inline: auto; }
.hc {
  position: absolute; display: block; width: var(--w); left: var(--l, auto); right: var(--r-, auto); top: var(--t, auto); bottom: var(--b, auto); z-index: var(--z);
  border: 6px solid #FFFFFF; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 40px -12px rgb(43 29 20 / .45);
  transform: translate(calc(var(--px, 0) * var(--d) * 1px), calc(var(--py, 0) * var(--d) * 1px)) rotate(var(--rot0));
  transition: transform .3s ease-out;
  animation: hc-in .8s cubic-bezier(.3, 1.3, .5, 1) backwards;
  animation-delay: var(--delay);
}
.hc img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.hc-1 { --w: 60%; --l: 20%; --t: 20%; --z: 3; --d: 22; --rot0: -3deg; --delay: 0s; animation: none; } /* главное фото — сразу на месте */
.hc-2 { --w: 36%; --r-: 0%; --t: 2%; --z: 2; --d: 12; --rot0: 7deg; --delay: .2s; }
.hc-3 { --w: 40%; --l: 0%; --b: 4%; --z: 4; --d: 34; --rot0: -8deg; --delay: .35s; }
.hc-4 { --w: 36%; --r-: 3%; --b: 0%; --z: 5; --d: 44; --rot0: 6deg; --delay: .5s; }
.hc-5 { --w: 32%; --l: 4%; --t: 0%; --z: 1; --d: 8; --rot0: 4deg; --delay: .65s; }
@keyframes hc-in { from { scale: .6; } } /* без прозрачности — иначе позже засчитывается LCP */

/* акции */
.promos-wrap { padding-block: 8px 24px; }
.promos {
  list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin;
}
.promo {
  position: relative; overflow: hidden; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 330px; border-radius: 20px; color: #FFFFFF;
  box-shadow: 0 14px 30px -14px rgb(43 29 20 / .45);
}
.promo picture { position: absolute; inset: 0; }
.promo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.promo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(18 12 7 / .92) 0%, rgb(18 12 7 / .6) 50%, rgb(18 12 7 / .08) 100%); }
.promo-body { position: relative; z-index: 2; padding: 20px; }
.promo-body h3 { font-size: 1.375rem; margin-bottom: 6px; }
.promo-body p { margin: 0 0 8px; color: #F4ECE2; }
.promo-when { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / .18); font-size: .8125rem; font-weight: 600; }
.promo .promo-price { font-size: 2rem; font-weight: 800; line-height: 1.1; color: #FFFFFF; }
.promo-timer { display: inline-block; padding: 6px 12px; border-radius: 10px; background: rgb(255 255 255 / .16); font-weight: 600; font-variant-numeric: tabular-nums; }
.promo-timer.is-on { background: #3E8E55; }
.promo-link { display: inline-flex; align-items: center; min-height: 44px; color: #C9EBD2; font-weight: 700; }
.promos-note { margin: 8px 0 0; font-size: .8125rem; }

/* метки на блюдах */
.dish { position: relative; }
.dish-badge {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  padding: 4px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 4px 10px rgb(0 0 0 / .18);
}
.dish-badge.is-hit { background: #B5532B; color: #FFFFFF; }
.dish-badge.is-new { background: var(--ex-accent); color: #FFFFFF; }
.dish-badge.is-sale { background: #F4C95D; color: #2B1D14; }
@media (hover: hover) {
  .promo:hover img { transform: scale(1.06); }
  .dish { transition: box-shadow .25s ease, border-color .25s ease; }
  .dish:hover { border-color: #D9C8B6; box-shadow: 0 12px 28px -14px rgb(43 29 20 / .35); }
}
@media (min-width: 640px) { .promos { grid-auto-columns: 46%; } }
@media (min-width: 960px) {
  .menu-hero { grid-template-columns: 1fr 1fr; gap: 48px; }
  .promos { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
}
@media (max-width: 639px) {
  .hc-5 { display: none; }
  .dish-badge { top: 6px; left: 6px; padding: 3px 7px; font-size: .6875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hc { animation: none; transition: none; }
  .promo img, .dish, .dish img { transition: none; }
  .hero-promo.is-on .icon { animation: none; }
}
.menu-nav { position: sticky; top: 0; z-index: 5; background: var(--ex-bg); border-bottom: 1px solid var(--ex-border); padding-block: 10px; }
.menu-cat { padding-top: 40px; }
.dish-grid { list-style: none; display: grid; gap: 16px; }
.dish { overflow: hidden; display: flex; flex-direction: column; }
.dish img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dish-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.dish-body h3 { margin-bottom: 4px; }
.dish-body p { margin-bottom: 10px; font-size: .9375rem; }
.dish-meta { display: flex; justify-content: space-between; align-items: baseline; margin: auto 0 0 !important; font-size: 1.0625rem !important; }
.qr-block { display: grid; gap: 24px; padding: 24px; align-items: center; }
.qr-block p { display: flex; gap: 8px; align-items: flex-start; }
.qr { width: 180px; height: 180px; background: #FFFFFF; border-radius: 8px; }
@media (min-width: 640px) {
  .dish-grid { grid-template-columns: repeat(2, 1fr); }
  .qr-block { grid-template-columns: 1fr auto; padding: 32px; }
}
@media (min-width: 1024px) { .dish-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- карточка блюда открывает окно: кнопка в заголовке растянута на всю карточку ---- */
.dish-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dish-open::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dish-open:focus-visible { outline: none; }
.dish:has(.dish-open:focus-visible) { outline: 3px solid var(--ex-accent); outline-offset: 2px; }
.dish-badge { z-index: 2; pointer-events: none; }

/* окно блюда */
.dish-dlg { max-width: 100%; }
.dd { position: relative; }
.dd.is-swap .dd-media, .dd.is-swap .dd-body { animation: tour-in .45s ease; }
.dd-x { position: absolute; top: 12px; right: 12px; z-index: 3; background: rgb(255 255 255 / .92); box-shadow: 0 4px 12px rgb(0 0 0 / .2); }
.dd-media { overflow: hidden; }
.dd-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dd-body { padding: 18px 20px 24px; }
.dd-body h2 { margin-bottom: 6px; }
.dd-body h3 { margin: 18px 0 6px; font-size: 1rem; }
.dd-body p { margin-bottom: 6px; }
.dd-cat { margin: 0 0 4px; color: var(--ex-accent); font-weight: 700; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }
.dd-meta { display: flex; gap: 16px; align-items: baseline; font-size: 1.125rem; }
.dd-meta .price-tag { font-size: 1.375rem; color: var(--ex-accent); }
.dd-kbju { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.dd-kbju div { padding: 10px 6px; border-radius: 12px; background: var(--ex-accent-bg); text-align: center; }
.dd-kbju dd { margin: 0; font-weight: 800; font-size: 1.125rem; }
.dd-kbju dt { font-size: .75rem; color: var(--ex-muted); }
.dd-allergens { margin-top: 12px; font-size: .9375rem; }
.dd-pairs { display: grid; gap: 8px; }
.dd-pair {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 12px 6px 6px;
  border: 1px solid var(--ex-border); border-radius: 12px; background: var(--ex-surface);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s;
}
.dd-pair:hover { border-color: var(--ex-accent); }
.dd-pair img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }
.dd-pair span { display: flex; flex-direction: column; }
.dd-pair small { color: var(--ex-muted); }
.dd-note { margin-top: 14px; font-size: .8125rem; }
@media (min-width: 760px) {
  .book.dish-dlg { max-width: 920px; }
  .dd { display: grid; grid-template-columns: 1fr 1.1fr; }
  .dd-media { position: relative; }
  .dd-media picture { position: absolute; inset: 0; }
  .dd-media img { height: 100%; aspect-ratio: auto; }
  .dd-body { padding: 28px; }
  .dd-pairs { grid-template-columns: 1fr 1fr; }
}

/* ---- карта гостя ---- */
.loyal { display: grid; gap: 32px; align-items: center; }
.loyal-list { list-style: none; display: grid; gap: 10px; margin: 18px 0 22px; }
.loyal-list li { display: flex; gap: 10px; align-items: flex-start; }
.loyal-list .icon { color: var(--ex-accent); margin-top: 2px; }
.pass-wrap { margin: 0; max-width: 440px; width: 100%; justify-self: center; }
/* привычная карта: пропорции банковской (85,6 × 54 мм) */
.pass {
  position: relative; overflow: hidden; aspect-ratio: 1.586;
  display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 20px 22px;
  border-radius: 18px; color: #FFFFFF;
  background:
    radial-gradient(circle at 105% -20%, rgb(255 255 255 / .16) 0 32%, transparent 33%),
    radial-gradient(circle at -10% 120%, rgb(181 83 43 / .3) 0 26%, transparent 27%),
    linear-gradient(150deg, #3A7A4C 0%, #2F6B3F 45%, #1F4A2B 100%);
  box-shadow: 0 24px 48px -18px rgb(31 74 43 / .6);
}
.pass-head { display: flex; justify-content: space-between; align-items: baseline; }
.pass-brand { font-weight: 800; font-size: 1.125rem; }
.pass-kind { font-size: .8125rem; opacity: .85; }
.pass-stamps { align-self: center; }
.pass-stamps p { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: .9375rem; }
.pass-stamps p span { font-size: .8125rem; opacity: .85; }
.pass-stamps ol { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 300px; }
.pass-stamps li { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgb(255 255 255 / .45); }
.pass-stamps li svg { width: 58%; height: 58%; fill: none; stroke: rgb(255 255 255 / .4); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pass-stamps li.is-on { border: 0; background: #F4D88A; }
.pass-stamps li.is-on svg { stroke: #1F4A2B; }
.pass-foot { display: flex; align-items: flex-end; gap: 22px; }
.pass-foot p { margin: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pass-foot small { font-size: .6875rem; opacity: .75; text-transform: uppercase; letter-spacing: .06em; }
.pass-foot strong { font-size: 1.0625rem; }
.pass-foot .pass-num { margin-left: auto; font-size: .8125rem; letter-spacing: .12em; opacity: .85; font-variant-numeric: tabular-nums; }
@media (max-width: 380px) {
  .pass { padding: 16px; gap: 6px; }
  .pass-stamps p span { display: none; }
  .pass-foot { gap: 14px; }
}
.pass-wrap figcaption { margin-top: 10px; text-align: center; font-size: .875rem; }
@media (min-width: 960px) { .loyal { grid-template-columns: 1fr 1fr; gap: 56px; } }
@media (prefers-reduced-motion: reduce) {
  .dd.is-swap .dd-media, .dd.is-swap .dd-body { animation: none; }
}

/* ---- обзор заведения: прогулка по фото ---- */
/* без JS — галерея */
.tour-shots { list-style: none; display: grid; gap: 16px; }
.tour-shot figure { margin: 0; }
.tour-shot img { width: 100%; height: auto; border-radius: var(--ex-radius); }
.tour-cap { display: block; margin-top: 8px; }
.tour-cap strong { display: block; font-size: 1.125rem; }
.tour-cap span { color: var(--ex-muted); }
.tour-ui, .tour-points { display: none; }
@media (min-width: 640px) { .tour-shots { grid-template-columns: 1fr 1fr; } }

/* с JS — просмотрщик; кадр всегда 4:3, как фото, чтобы метки стояли на своих местах */
.tour.is-live .tour-view {
  position: relative; overflow-x: clip; /* круги у меток на краю не должны раздвигать страницу */
  width: min(100%, calc(78vh * 4 / 3)); margin-inline: auto;
  border-radius: var(--ex-radius);
  outline-offset: 4px;
}
.tour.is-live .tour-shots { display: block; position: relative; aspect-ratio: 4 / 3; }
.tour.is-live .tour-shot { position: absolute; inset: 0; display: none; }
.tour.is-live .tour-shot.is-on { display: block; }
.tour.is-live .tour-shot figure { position: relative; height: 100%; }
.tour.is-live .tour-shot picture { display: block; height: 100%; overflow: hidden; border-radius: var(--ex-radius); background: #2A2017; }
.tour.is-live .tour-shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.tour.is-live .tour-shot.is-leave { z-index: 2; animation: tour-out .75s ease forwards; pointer-events: none; }
.tour.is-live .tour-shot.is-leave img { transform-origin: var(--ox, 50%) var(--oy, 50%); animation: tour-zoom .75s cubic-bezier(.5, 0, .75, 0) forwards; }
.tour.is-live .tour-shot.is-enter { z-index: 1; animation: tour-in .75s ease both; }
.tour.is-live .tour-cap {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 48px 210px 18px 22px;
  border-radius: 0 0 var(--ex-radius) var(--ex-radius);
  background: linear-gradient(to top, rgb(20 14 9 / .82), rgb(20 14 9 / 0));
  color: #FFFFFF;
}
.tour.is-live .tour-cap strong { font-size: 1.375rem; margin-bottom: 2px; }
.tour.is-live .tour-cap span { color: #F1E9DF; }
.tour-zone { display: inline-flex; align-items: center; min-height: 44px; margin-left: 8px; color: #BDE5C6; font-weight: 600; }
.tour.is-live .tour-ui { display: block; }
.tour.is-live .tour-points { display: flex; margin-top: 14px; }
.tour-points > :first-child { margin-left: auto; }
.tour-points > :last-child { margin-right: auto; }

/* метки на фото */
.tour-spot {
  position: absolute; left: var(--sx); top: var(--sy); z-index: 3;
  transform: translate(-22px, -50%);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 16px 6px 8px;
  border: 0; border-radius: 999px;
  background: rgb(255 255 255 / .92); color: #1F2A22;
  font: 600 .9375rem/1 var(--ex-font);
  box-shadow: 0 6px 18px rgb(0 0 0 / .25);
  cursor: pointer;
  transition: transform .2s ease, background-color .2s;
}
.tour-spot::before { content: ""; position: relative; z-index: 1; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ex-accent); }
.tour-spot > span { position: relative; z-index: 1; } /* точка и подпись — над ореолом */
/* пульс точки выглядит как у иконки «акции дня» (зелёный ореол до 12 px, 2 с), но сделан иначе:
   отдельный кружок меняет только transform/opacity — это рисует видеокарта, фото под точкой не
   перерисовывается каждый кадр. Анимация тени (как у иконки) над большим фото заставляла браузер
   перерисовывать куски фото — на Linux без GPU кадры пропускались, пульс дёргался. Кружок сразу
   полного размера (28 + 2×12 px) и уменьшен — края остаются чёткими */
.tour-spot::after {
  content: ""; position: absolute; z-index: 0; left: -4px; top: 50%;
  width: 52px; height: 52px; margin-top: -26px; border-radius: 50%;
  background: var(--ex-accent);
  animation: tour-halo 3.5s ease-out infinite; /* медленнее, чем у иконки акции (2 с), — решение владельца */
  will-change: transform, opacity; pointer-events: none;
}
.tour-spot:hover { transform: translate(-22px, -50%) scale(1.06); background: #FFFFFF; }
/* у правого края кадра — подпись слева, точка справа (точка остаётся на тех же координатах) */
.tour-spot.is-flip { flex-direction: row-reverse; padding: 6px 8px 6px 16px; transform: translate(calc(-100% + 22px), -50%); }
.tour-spot.is-flip:hover { transform: translate(calc(-100% + 22px), -50%) scale(1.06); }
.tour-spot.is-flip::after { left: auto; right: -4px; }

/* кнопки, мини-план */
.tour-btn {
  position: absolute; z-index: 4; display: grid; place-items: center;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .9); color: #1F2A22; cursor: pointer;
  box-shadow: 0 4px 14px rgb(0 0 0 / .25);
}
.tour-btn:hover { background: #FFFFFF; color: var(--ex-accent); }
.tour-prev, .tour-next { top: calc(50% - 24px); }
.tour-prev { left: 12px; }
.tour-next { right: 12px; }
.tour-full { top: 12px; right: 12px; }
.tour-map {
  position: absolute; z-index: 4; right: 14px; bottom: 14px;
  width: 180px; height: auto; padding: 6px;
  border-radius: 12px; background: rgb(255 253 249 / .9);
  box-shadow: 0 6px 18px rgb(0 0 0 / .25);
}
.tm-hall { fill: #EBDDC7; stroke: #CDB99B; stroke-width: 6; }
.tm-deck { fill: #C9A57E; }
.tm-bar { fill: #B5532B; }
.tm-sofa { fill: #7FA079; }
.tm-table { fill: #B88E62; }
.tm-win { stroke: #7FB5D3; stroke-width: 14; fill: none; }
[data-tour-cam] { transform: translate(var(--cx, 340px), var(--cy, 430px)) rotate(var(--cd, 0deg)); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.tm-cone { fill: rgb(47 107 63 / .28); }
.tm-me { fill: var(--ex-accent); stroke: #FFFFFF; stroke-width: 6; }

/* во весь экран */
.tour-view:fullscreen { display: grid; place-items: center; width: 100%; max-width: none; background: #120D09; border-radius: 0; }
.tour-view:fullscreen .tour-shots { width: min(100vw, 133.33vh); }

@keyframes tour-zoom { to { transform: scale(1.4); } }
@keyframes tour-out { 60% { opacity: 1; } to { opacity: 0; } }
@keyframes tour-in { from { opacity: 0; } }
@keyframes tour-halo { 0% { transform: scale(.538); opacity: .55; } 70%, 100% { transform: scale(1); opacity: 0; } }
@keyframes tour-ping { 0% { box-shadow: 0 0 0 0 rgb(47 107 63 / .55); } 70%, 100% { box-shadow: 0 0 0 12px rgb(47 107 63 / 0); } }

/* телефон: подпись под фото, метки — только кружки, план меньше */
@media (max-width: 639px) {
  .tour.is-live .tour-view { padding-bottom: 116px; }
  .tour.is-live .tour-cap { top: 100%; bottom: auto; padding: 12px 2px 0; background: none; color: var(--ex-text); border-radius: 0; }
  .tour.is-live .tour-cap strong { font-size: 1.125rem; }
  .tour.is-live .tour-cap span { color: var(--ex-muted); }
  .tour-zone { margin-left: 0; color: var(--ex-accent); }
  .tour-spot { padding: 8px; }
  .tour-spot::before { width: 24px; height: 24px; }
  .tour-spot::after { width: 48px; height: 48px; margin-top: -24px; transform-origin: center; animation-name: tour-halo-m; }
  @keyframes tour-halo-m { 0% { transform: scale(.5); opacity: .55; } 70%, 100% { transform: scale(1); opacity: 0; } }
  .tour-spot span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tour-spot, .tour-spot:hover, .tour-spot.is-flip, .tour-spot.is-flip:hover { transform: translate(-50%, -50%); }
  .tour-spot.is-flip { padding: 8px; }
  .tour-map { width: 108px; left: 8px; right: auto; top: 8px; bottom: auto; }
  .tour-prev, .tour-next { display: none; } /* мешают меткам; на телефоне — свайп и кнопки точек */
  .tour-btn { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-spot::after { animation: none; display: none; }
  [data-tour-cam] { transition: none; }
}

/* ---- бронь стола: 3D-план зала ---- */
@property --tilt { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --rot { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.hall-head { max-width: 720px; margin-bottom: 20px; }
.has-js .hall-nojs { display: none; }
html:not(.has-js) .hall { display: none; }
.hall { display: grid; gap: 16px; }
.hall-controls { display: grid; grid-template-columns: 1fr auto; gap: 16px 12px; padding: 16px; }
.hall-controls > :first-child { grid-column: 1 / -1; } /* на телефоне дата — во всю ширину, время и гости — в ряд */
.hall .hall-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.hall-set legend, .hall-set label { padding: 0; margin-bottom: 6px; font-weight: 600; }
.hall-label { display: block; margin-bottom: 6px; font-weight: 600; }
.hall-pick-wrap { position: relative; }
.hall-field {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 48px; padding: 10px 12px 10px 14px;
  border: 1px solid var(--ex-control); border-radius: 12px;
  background: var(--ex-surface); color: var(--ex-text);
  font: 600 1rem/1.2 var(--ex-font); text-align: left; cursor: pointer;
}
.hall-field > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hall-field .icon { color: var(--ex-accent); }
.hall-field .hall-chev { color: var(--ex-muted); transition: transform .2s; }
.hall-field:hover { border-color: var(--ex-accent); }
.hall-field[aria-expanded="true"] { border-color: var(--ex-accent); box-shadow: 0 0 0 3px var(--ex-accent-bg); }
.hall-field[aria-expanded="true"] .hall-chev { transform: rotate(180deg); }
.hall-pop {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0;
  width: 320px; max-width: calc(100vw - 32px); padding: 14px;
  border: 1px solid var(--ex-border); border-radius: 16px;
  background: var(--ex-surface);
  box-shadow: 0 18px 40px -12px rgb(43 29 20 / .35);
}
/* календарь */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-title { margin: 0; font-weight: 700; }
.cal-nav { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--ex-text); cursor: pointer; }
.cal-nav:hover:not(:disabled) { background: var(--ex-accent-bg); color: var(--ex-accent); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-week, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-week { margin-bottom: 4px; font-size: .75rem; font-weight: 600; color: var(--ex-muted); }
.cal-week span:nth-child(n+6) { color: #B5532B; }
.cal-day {
  height: 40px; min-width: 0; padding: 0; border: 0; border-radius: 10px;
  background: none; color: var(--ex-text); font: 500 .9375rem/1 var(--ex-font); cursor: pointer;
}
.cal-day:hover:not(:disabled) { background: var(--ex-accent-bg); }
.cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--ex-accent); font-weight: 700; }
.cal-day[aria-pressed="true"] { background: var(--ex-accent); color: var(--ex-on-accent); font-weight: 700; }
.cal-day:disabled { color: #BDB3A8; cursor: default; }
/* время */
.hall-times { width: 340px; }
.tp-label { margin: 6px 0 6px; font-size: .8125rem; font-weight: 700; color: var(--ex-muted); text-transform: uppercase; letter-spacing: .06em; }
.tp-label:first-child { margin-top: 0; }
.tp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.tp-slot {
  min-height: 40px; padding: 0; border: 1px solid var(--ex-border); border-radius: 10px;
  background: var(--ex-surface); color: var(--ex-text); font: 600 .9375rem/1 var(--ex-font); cursor: pointer;
}
.tp-slot:hover:not(:disabled) { border-color: var(--ex-accent); color: var(--ex-accent); }
.tp-slot[aria-pressed="true"] { background: var(--ex-accent); border-color: var(--ex-accent); color: var(--ex-on-accent); }
.tp-slot:disabled { background: var(--ex-bg); color: #BDB3A8; text-decoration: line-through; cursor: default; }

.hall-view { position: relative; overflow: hidden; padding: 0; }
.hall-tools {
  position: absolute; z-index: 2; top: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; gap: 8px; pointer-events: none;
}
.hall-tools > * { pointer-events: auto; }
.hall-modes { display: flex; gap: 6px; }
.hall-modes .chip { min-width: 52px; justify-content: center; box-shadow: 0 2px 8px rgb(43 29 20 / .12); }
.hall-rotate { display: flex; gap: 6px; }
.hall-btn {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--ex-control); border-radius: 50%;
  background: var(--ex-surface); color: var(--ex-text); cursor: pointer;
  box-shadow: 0 2px 8px rgb(43 29 20 / .12);
}
.hall-btn:hover { border-color: var(--ex-accent); color: var(--ex-accent); }
.hall-stage {
  position: relative; height: 560px; overflow: hidden;
  perspective: 1600px; perspective-origin: 50% 35%;
  background: radial-gradient(ellipse at 50% 45%, #FFFDF9 0%, #F4EBDF 70%, #EADCC9 100%);
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.hall-stage:active { cursor: grabbing; }
.hall-world {
  position: absolute; left: 50%; top: 52%;
  width: 900px; height: 460px; margin: -230px 0 0 -450px;
  transform-style: preserve-3d;
  transform: scale(var(--s, 1)) rotateX(var(--tilt)) rotateZ(var(--rot));
  transition: --tilt .9s cubic-bezier(.2, .8, .2, 1), --rot .9s cubic-bezier(.2, .8, .2, 1);
}
.hall-world.is-dragging { transition: none; }
.hall-world.is-2d { --by: -50%; }

/* коробки: верх + четыре стороны */
.b3 {
  position: absolute;
  left: calc(var(--x) * 1px); top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px); height: calc(var(--d) * 1px);
  transform: translateZ(calc(var(--z) * 1px));
  transform-style: preserve-3d;
}
.f { position: absolute; display: block; background: var(--c); }
.f-top { inset: 0; transform: translateZ(calc(var(--h) * 1px)); background: var(--ct, var(--c)); }
.f-n, .f-s { left: 0; width: 100%; height: calc(var(--h) * 1px); transform-origin: 50% 0; transform: rotateX(90deg); }
.f-n { top: 0; background: color-mix(in srgb, var(--c) 78%, #000); }
.f-s { top: 100%; background: color-mix(in srgb, var(--c) 88%, #000); }
.f-w, .f-e { top: 0; height: 100%; width: calc(var(--h) * 1px); transform-origin: 0 50%; transform: rotateY(-90deg); background: color-mix(in srgb, var(--c) 70%, #000); }
.f-w { left: 0; }
.f-e { left: 100%; background: color-mix(in srgb, var(--c) 80%, #000); }
.round .f-top { border-radius: 50%; }
.round .f-n, .round .f-s, .round .f-w, .round .f-e { display: none; }

.hall-floor, .hall-deck {
  position: absolute;
  left: calc(var(--x) * 1px); top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px); height: calc(var(--d) * 1px);
  border-radius: 4px;
}
.hall-floor {
  background:
    repeating-linear-gradient(45deg, rgb(255 255 255 / .18) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(-45deg, #E9D5B4 0 14px, #E2CAA4 14px 28px);
  box-shadow: 0 40px 80px -20px rgb(80 50 20 / .35);
}
.hall-deck { background: repeating-linear-gradient(90deg, #B98F66 0 18px, #A47A53 18px 20px); box-shadow: 0 40px 80px -20px rgb(80 50 20 / .3); }
.hall-lights {
  position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: calc(var(--w) * 1px); height: 8px;
  transform: translateZ(calc(var(--z) * 1px));
  background:
    radial-gradient(circle, #FFE3A0 0 2.5px, rgb(255 210 120 / .5) 3.5px, transparent 6px) 0 50% / 20px 8px repeat-x,
    linear-gradient(#5A4A3A, #5A4A3A) 50% 50% / 100% 1px no-repeat;
}
.wall { --c: #EFE5D8; --ct: #F7F0E6; }
.glass { --c: rgb(160 205 228 / .45); --ct: rgb(200 230 245 / .6); }
.bar { --c: #B5532B; --ct: #CDA578; }
.steel { --c: #8A9096; --ct: #B4BAC0; }
.stool, .leg, .chair { --c: #7A5A40; --ct: #8E6B4E; }
.rail { --c: #8B6B4E; }
.sofa { --c: #6F8F6A; --ct: #7FA079; }
.tt { --c: #B88E62; --ct: #DDBB8E; }

/* столы и их состояния */
.tb {
  position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: 0; height: 0;
  transform-style: preserve-3d; cursor: pointer;
  transition: transform .25s ease;
}
.tb:hover { transform: translateZ(10px); }
.tb.is-busy, .tb.is-small { cursor: not-allowed; }
.tb.is-busy:hover, .tb.is-small:hover { transform: none; }
/* в 2D подъём «к зрителю» из-за перспективы выглядит как рывок в сторону — только подсветка */
.hall-world.is-2d .tb:hover { transform: none; }
.hall-world.is-2d .tb.is-free:hover .tt { --ct: #EAD3AE; }
.hall-world.is-2d .tb.is-free:hover .tb-badge { border-color: var(--ex-accent); background: #F1F8F2; }
.tb.is-picked .tt { --c: #1F4A2B; --ct: #3E7D4F; }
.tb.is-picked .f-top { box-shadow: 0 0 0 3px #DDEFE1, 0 0 28px 6px rgb(47 107 63 / .55); }
.tb.is-busy .tt { --c: #A39A91; --ct: #C4BCB3; }
.tb.is-busy .chair, .tb.is-busy .sofa { --c: #A39A91; --ct: #B8B0A7; }
.tb.is-small .tt { --ct: #E6DCCD; }
.hall-world:not(.is-in) .tb { visibility: hidden; }
/* «падение» на место — один раз при появлении: класс снимается по animationend, чтобы смена других
   классов (например, «покачивание» занятого стола) не перезапускала его */
.tb.is-dropping { animation: tb-drop .9s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--i) * 70ms + .1s); }
.tb.is-nope { animation: tb-nope .5s ease-in-out; }
.tb.is-hint .tb-badge { animation: tb-hint 1.4s ease-in-out 2; }
@keyframes tb-hint { 50% { background: #DDEFE1; border-color: var(--ex-accent); } }

/* «рекламные щиты» — всегда лицом к зрителю */
.bb {
  position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px);
  transform-origin: 0 0;
  transform: translateZ(calc(var(--bz, 0) * 1px)) rotateZ(calc(-1 * var(--rot))) rotateX(calc(-1 * var(--tilt))) scale(var(--inv, 1)) translate(-50%, var(--by, -100%));
}
.tag {
  padding: 2px 10px; border-radius: 999px;
  background: rgb(255 255 255 / .9); color: var(--ex-muted);
  font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  pointer-events: none;
}
.plant {
  width: 28px; height: 40px; pointer-events: none;
  background:
    radial-gradient(circle at 50% 30%, #7DAA6A 0 9px, #5B8A4C 10px 13px, transparent 14px),
    radial-gradient(circle at 30% 48%, #6E9B5E 0 7px, transparent 8px),
    radial-gradient(circle at 70% 48%, #6E9B5E 0 7px, transparent 8px),
    linear-gradient(#B5532B, #B5532B) 50% 100% / 14px 12px no-repeat;
}
.hall-world.is-2d .plant { --by: -50%; }
.tb-badge {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 2.5px solid var(--ex-accent); border-radius: 50%;
  background: #FFFFFF; color: #1F3B2A;
  font: 700 1.0625rem/1 var(--ex-font);
  box-shadow: 0 6px 14px rgb(43 29 20 / .22);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.tb-seats {
  position: absolute; right: -6px; bottom: -6px;
  display: grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px;
  background: #2B1D14; color: #FFFFFF; font-size: .6875rem;
}
.tb:hover .tb-badge { border-color: var(--ex-accent); }
.is-picked .tb-badge { background: var(--ex-accent); border-color: var(--ex-accent); color: #FFFFFF; }
.is-picked .tb-badge::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--ex-accent); animation: tb-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite; will-change: transform, opacity;
}
.is-busy .tb-badge { background: #EEE9E4; border-color: #B3AAA1; color: #6F655C; text-decoration: line-through; }
.is-small .tb-badge { border-style: dashed; border-color: #A49A90; color: #6F655C; }
.is-busy .tb-seats, .is-small .tb-seats { background: #8A8079; }

.hall-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 16px; border-top: 1px solid var(--ex-border); font-size: .875rem; color: var(--ex-muted); }
.hall-legend li { display: flex; align-items: center; gap: 6px; }
.hall-dot { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--ex-accent); background: #FFFFFF; }
.hall-dot.is-busy { border-color: #B3AAA1; background: #EEE9E4; }
.hall-dot.is-small { border-style: dashed; border-color: #A49A90; }
.hall-dot.is-picked { border-color: var(--ex-accent); background: var(--ex-accent); }

.hall-pick {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  box-shadow: 0 10px 30px rgb(43 29 20 / .14);
}
.hall-pick-text { margin: 0; flex: 1 1 240px; }
.hall-pick .btn:disabled { opacity: .45; cursor: not-allowed; }
.tb-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; background: var(--ex-accent-bg); }
.tb-summary p { margin: 0; font-weight: 600; }
.tb-change { flex: none; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--ex-accent); font: 600 .9375rem var(--ex-font); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.tb-reasons { display: flex; flex-wrap: wrap; gap: 8px; }

@keyframes tb-drop { from { transform: translateZ(160px); } }
@keyframes tb-nope { 20% { transform: translateX(-3px); } 45% { transform: translateX(3px); } 70% { transform: translateX(-1.5px); } }
@keyframes tb-pulse { from { transform: scale(1); opacity: .7; } 80%, to { transform: scale(1.4); opacity: 0; } }

@media (min-width: 960px) {
  .hall-controls { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: end; padding: 20px; }
  .hall-controls > :first-child { grid-column: auto; }
  .hall-stage { height: 580px; }
}
@media (prefers-reduced-motion: reduce) {
  .hall-world, .tb, .tb-badge { transition: none; }
  .tb.is-dropping, .tb.is-nope, .tb.is-hint .tb-badge, .is-picked .tb-badge::after { animation: none; }
}

/* ================= landing ================= */

.land-hero { display: grid; gap: 28px; align-items: center; }
.land-hero h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
.land-hero p { font-size: 1.125rem; }
.work-grid { list-style: none; display: grid; gap: 12px; }
.work { padding: 20px; }
.work h3 { margin-bottom: 4px; }
.work p { margin: 0 0 8px; }
.work .price-tag { color: var(--ex-accent); margin: 0; }
.calc { padding: 24px; max-width: 640px; }
.land-steps { list-style: none; counter-reset: s; display: grid; gap: 12px; }
.land-steps li {
  counter-increment: s;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  background: var(--ex-surface);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius);
  font-weight: 600;
}
.land-steps li::before {
  content: counter(s);
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ex-accent); color: var(--ex-on-accent);
}
.land-gallery { list-style: none; display: grid; gap: 16px; }
.land-gallery figure { margin: 0; }
.land-gallery figcaption { margin-top: 8px; font-size: .9375rem; }
.demo-form-note { margin: 12px 0 0; font-size: .9375rem; }
@media (min-width: 640px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .land-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .land-hero { grid-template-columns: 1fr 1fr; gap: 48px; }
  .work-grid { grid-template-columns: repeat(3, 1fr); }
  .land-steps { grid-template-columns: repeat(5, 1fr); }
  .land-steps li { flex-direction: column; align-items: flex-start; }
}

/* ---- калькулятор ремонта ---- */
.est-head { max-width: 720px; margin-bottom: 24px; }
.est { display: grid; gap: 16px; align-items: start; }
.est-steps { display: grid; gap: 16px; min-width: 0; }
.est-step { margin: 0; padding: 20px; min-width: 0; }
.est-step legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 0; font-weight: 700; font-size: 1.125rem; }
.est-step legend + * { clear: both; }
.est-num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ex-accent); color: var(--ex-on-accent); font-size: .9375rem; }

/* карточки-варианты (радио) */
/* прозрачный input на всю карточку — он и есть область нажатия */
.opt-input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.opt-input:disabled { cursor: default; }
.est-opts { display: grid; gap: 10px; }
.opt {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  min-height: 44px; margin: 0;
  padding: 12px 44px 12px 16px;
  border: 1.5px solid var(--ex-border);
  border-radius: 12px;
  background: var(--ex-surface);
  font-weight: 400;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, transform .2s;
}
.opt:hover { border-color: var(--ex-control); }
.opt::after {
  content: "";
  position: absolute; top: 14px; right: 14px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--ex-control);
  transition: background-color .2s, border-color .2s;
}
.opt:has(:checked) { border-color: var(--ex-accent); background: var(--ex-accent-bg); box-shadow: inset 0 0 0 1px var(--ex-accent); }
.opt:has(:checked)::after { border-color: var(--ex-accent); background: var(--ex-accent); }
.opt:has(:checked)::before {
  content: "";
  position: absolute; top: 19px; right: 21px; z-index: 1;
  width: 6px; height: 10px;
  border: solid var(--ex-on-accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.opt:has(:focus-visible), .extra:has(:focus-visible) { outline: 3px solid var(--ex-accent); outline-offset: 2px; }
.opt-title { font-weight: 700; }
.opt-price { font-weight: 600; color: var(--ex-accent); }
.opt-sub { font-size: .875rem; line-height: 1.35; }

/* что входит */
.est-incl { list-style: none; display: grid; gap: 6px 16px; margin-top: 16px; font-size: .9375rem; }
.est-incl li { position: relative; padding-left: 24px; animation: est-in .35s ease both; }
.est-incl li::before {
  content: ""; position: absolute; left: 4px; top: .3em;
  width: 6px; height: 11px;
  border: solid var(--ex-accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.est-incl li:nth-child(2) { animation-delay: .05s; }
.est-incl li:nth-child(3) { animation-delay: .1s; }
.est-incl li:nth-child(4) { animation-delay: .15s; }

/* площадь: ползунок + поле */
.est-area-row { display: flex; align-items: center; gap: 16px; }
.est-range {
  flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0;
  background: transparent; accent-color: var(--ex-accent); cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.est-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--ex-accent) var(--fill, 50%), var(--ex-border) var(--fill, 50%)); }
.est-range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--ex-border); }
.est-range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--ex-accent); }
.est-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -10px; border-radius: 50%;
  background: var(--ex-surface); border: 3px solid var(--ex-accent);
  box-shadow: 0 2px 6px rgb(27 36 48 / .25);
}
.est-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--ex-surface); border: 3px solid var(--ex-accent); box-shadow: 0 2px 6px rgb(27 36 48 / .25); }
.est-area-num { flex: none; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.est-area-num input { width: 92px; text-align: right; font-weight: 700; font-size: 1.125rem; }
.est-counters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.stepper { display: flex; align-items: center; width: max-content; border: 1px solid var(--ex-control); border-radius: 12px; overflow: hidden; }
.stepper-btn {
  width: 44px; height: 46px; border: 0; background: var(--ex-surface); color: var(--ex-text);
  font: 600 1.375rem/1 var(--ex-font); cursor: pointer;
}
.stepper-btn:hover { background: var(--ex-accent-bg); color: var(--ex-accent); }
.stepper input { width: 48px; min-height: 46px; padding: 0; border: 0; border-radius: 0; text-align: center; font-weight: 700; font-size: 1.125rem; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* дополнительные работы (чекбоксы-чипы) */
.est-extras { display: flex; flex-wrap: wrap; gap: 8px; }
.extra {
  display: inline-flex; align-items: center; gap: 10px;
  position: relative;
  min-height: 44px; margin: 0; padding: 8px 16px 8px 12px;
  border: 1px solid var(--ex-control); border-radius: 999px;
  background: var(--ex-surface); font-weight: 500; font-size: .9375rem; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.extra span::before {
  content: ""; display: inline-block; vertical-align: -3px; margin-right: 10px;
  width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--ex-control);
  transition: background-color .2s, border-color .2s;
}
.extra:has(:checked) { background: var(--ex-accent); border-color: var(--ex-accent); color: var(--ex-on-accent); }
.extra:has(:checked) span::before { border-color: var(--ex-on-accent); background: var(--ex-on-accent); box-shadow: inset 0 0 0 3px var(--ex-accent); }
.extra.is-included { cursor: default; opacity: .85; }
.extra.is-included span::after { content: " · входит"; font-weight: 400; }

/* смета */
.est-sum { padding: 24px; box-shadow: 0 12px 32px rgb(27 36 48 / .08); }
.est-sum-title { margin-bottom: 4px; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ex-muted); }
.est-total { margin: 0; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.5rem); font-weight: 700; line-height: 1.15; color: var(--ex-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.est-total span { display: inline-block; transform-origin: left center; }
.est-total .is-bump { animation: est-bump .45s ease; }
.est-range-text { margin: 4px 0 18px; font-size: .9375rem; }
.est-bar, .est-weeks { display: none; }
.has-js .est-bar { display: flex; gap: 2px; height: 14px; margin-bottom: 14px; border-radius: 999px; overflow: hidden; }
.est-seg { width: var(--w, 0%); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.est-lines { margin: 0 0 20px; font-size: .9375rem; }
.est-line { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--ex-border); }
.est-line dt { display: flex; align-items: center; gap: 8px; }
.est-line dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.est-dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.est-c-work, .est-p-fin { background: #B4430B; }
.est-c-bath { background: #E58A3B; }
.est-c-el, .est-p-rough { background: #2F4A68; }
.est-c-mat, .est-p-project { background: #7E97B3; }
.est-c-extra, .est-p-demo { background: #CDB596; }
.est-label { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; font-weight: 600; }
.est-label strong { font-size: 1.125rem; }
.est-time { margin-bottom: 20px; }
.has-js .est-weeks { display: grid; grid-template-columns: repeat(var(--n, 10), 1fr); gap: 3px; margin-bottom: 10px; }
.est-wk { height: 18px; border-radius: 4px; animation: est-pop .3s ease both; }
.est-phases { list-style: none; display: grid; gap: 2px; font-size: .875rem; color: var(--ex-muted); }
.est-phases li { display: flex; align-items: center; gap: 8px; }
.est-pay { margin-bottom: 20px; }
.est-pay-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; counter-reset: pay; }
.est-pay-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 10px; background: var(--ex-bg); font-size: .8125rem; line-height: 1.3; }
.est-pay-list strong { font-size: .9375rem; font-variant-numeric: tabular-nums; }
.est-cta { width: 100%; }
.est-note { margin: 12px 0 0; font-size: .8125rem; }

/* плашка с итогом на телефоне */
.est-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter);
  background: var(--ex-surface); border-top: 1px solid var(--ex-border);
  box-shadow: 0 -8px 24px rgb(27 36 48 / .1);
  animation: est-up .25s ease;
}
.est-dock[hidden] { display: none; }
.est-dock p { display: flex; flex-direction: column; margin: 0; font-size: .8125rem; line-height: 1.2; }
.est-dock strong { font-size: 1.25rem; color: var(--ex-accent); font-variant-numeric: tabular-nums; }

textarea { resize: vertical; }

@keyframes est-bump { 40% { transform: scale(1.05); } }
@keyframes est-pop { from { opacity: 0; transform: scaleY(.3); } }
@keyframes est-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes est-up { from { transform: translateY(100%); } }

@media (min-width: 560px) {
  .est-opts-3 { grid-template-columns: repeat(3, 1fr); }
  .opt { padding: 16px 16px 16px; }
  .opt-title { padding-right: 28px; }
  .est-incl { grid-template-columns: 1fr 1fr; }
  .est-step { padding: 24px; }
}
@media (min-width: 960px) {
  .est { grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; }
  .est-sum { position: sticky; top: 16px; padding: 28px; }
  .est-dock { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .est-seg, .opt, .extra { transition: none; }
  .est-incl li, .est-wk, .est-total .is-bump, .est-dock { animation: none; }
}

/* ================= price ================= */

.ex-price { padding-bottom: 80px; }
.price-hero { display: grid; gap: 24px; align-items: center; }
.price-search { position: sticky; top: 0; z-index: 5; padding: 16px; margin-bottom: 24px; }
.search-input { position: relative; }
.search-input .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ex-muted); }
.search-input input { padding-left: 44px; }
.price-empty { margin: 12px 0 0; }
.price-group { margin-bottom: 32px; }
.price-group h2 { font-size: 1.25rem; }
.price-table { width: 100%; border-collapse: collapse; background: var(--ex-surface); border: 1px solid var(--ex-border); border-radius: var(--ex-radius); overflow: hidden; }
.price-table th { text-align: left; font-size: .875rem; color: var(--ex-muted); font-weight: 600; padding: 10px 16px; background: var(--ex-bg); }
.price-table td { padding: 14px 16px; border-top: 1px solid var(--ex-border); vertical-align: top; }
.price-table td:last-child, .price-table th:last-child { text-align: right; }
.price-tire { margin: 8px 0 40px; max-width: 560px; }
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px var(--gutter);
  background: var(--ex-surface);
  border-top: 1px solid var(--ex-border);
}
/* кнопка записи в строке прайса */
.price-table td:last-child, .price-table th:last-child { width: 1%; padding-left: 0; text-align: right; }
.price-table td.price-tag, .price-table th:nth-child(2) { text-align: right; }
.price-table td { vertical-align: middle; }
.row-book {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--ex-border); border-radius: 10px;
  background: var(--ex-surface); color: var(--ex-accent);
  font: 600 .875rem/1 var(--ex-font); white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.row-book:hover { background: var(--ex-accent-bg); border-color: var(--ex-accent); }
.row-book .icon { width: 20px; height: 20px; }
.row-book span { display: none; }
@media (min-width: 640px) { .row-book { padding: 0 14px; } .row-book span { display: inline; } }
@media (max-width: 639px) {
  .price-table th, .price-table td { padding-inline: 10px; }
  .price-table td:last-child, .price-table th:last-child { padding: 8px 8px 8px 0; }
}

/* всплывающая форма записи */
html:has(.book[open]) { overflow: hidden; }
.book {
  width: 100%; max-width: 100%; max-height: 92dvh;
  margin: auto 0 0; padding: 0;
  border: 0; border-radius: 20px 20px 0 0;
  background: var(--ex-surface); color: var(--ex-text);
  box-shadow: 0 -12px 40px rgb(17 24 39 / .25);
  overscroll-behavior: contain;
}
.book[open] { animation: book-up .3s cubic-bezier(.2, .8, .2, 1); }
.book::backdrop { background: rgb(17 24 39 / .55); }
.book-in { padding: 8px 20px 24px; }
.book-head {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 -20px 8px; padding: 12px 12px 12px 20px;
  background: var(--ex-surface); border-bottom: 1px solid var(--ex-border);
}
.book-head h2 { margin: 0; font-size: 1.25rem; }
.book-x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ex-bg); color: var(--ex-text); cursor: pointer; }
.book-x:hover { background: var(--ex-border); }
.book-set { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.book-set legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.book-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin: -2px; scrollbar-width: thin; }
.book-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.book-chip {
  position: relative; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; min-height: 44px; margin: 0; padding: 6px 10px;
  border: 1px solid var(--ex-control); border-radius: 10px;
  background: var(--ex-surface); font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.book-chip-sub { font-size: .75rem; font-weight: 500; color: var(--ex-muted); }
.book-chip:hover { border-color: var(--ex-accent); }
.book-chip:has(:checked) { background: var(--ex-accent); border-color: var(--ex-accent); color: var(--ex-on-accent); }
.book-chip:has(:checked) .book-chip-sub { color: inherit; }
.book-chip:has(:disabled) { border-color: var(--ex-border); background: var(--ex-bg); color: #8A929C; text-decoration: line-through; cursor: not-allowed; }
.book-chip:has(:disabled) .book-chip-sub { color: inherit; }
.book-chip:has(:focus-visible) { outline: 3px solid var(--ex-accent); outline-offset: 2px; }
.book-hint { margin: 6px 0 0; font-size: .8125rem; }
.book-err { margin: 6px 0 0; color: #B91C1C; font-size: .875rem; font-weight: 500; }
.book-err:empty { display: none; }
[aria-invalid="true"] { border-color: #B91C1C; box-shadow: inset 0 0 0 1px #B91C1C; }
.book-row { display: grid; gap: 0 16px; }
.book-submit { width: 100%; margin-top: 4px; }
.book-demo { margin: 10px 0 0; font-size: .8125rem; text-align: center; }
.book-done { padding: 24px 0 8px; text-align: center; }
.book-done h2 { outline: none; }
.book-ok { width: 64px; height: 64px; margin: 0 auto 12px; fill: none; stroke: #15803D; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.book-ok path { stroke-dasharray: 14; stroke-dashoffset: 14; animation: book-check .5s .15s ease forwards; }
.book-summary { font-weight: 600; font-size: 1.0625rem; }
.book-done .btn { min-width: 160px; }
@keyframes book-up { from { transform: translateY(100%); } }
@keyframes book-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes book-check { to { stroke-dashoffset: 0; } }
@media (min-width: 640px) {
  .book { max-width: 560px; margin: auto; border-radius: 20px; box-shadow: 0 24px 60px rgb(17 24 39 / .3); }
  .book[open] { animation-name: book-in; }
  .book-in { padding: 8px 28px 28px; }
  .book-head { margin: 0 -28px 12px; padding: 16px 16px 16px 28px; }
  .book-row { grid-template-columns: 1fr 1fr; }
  .book-slots { grid-template-columns: repeat(6, 1fr); }
  .book-days { display: grid; grid-template-columns: repeat(7, 1fr); overflow: visible; }
  .book-days .book-chip { min-width: 0; padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc { transition: none; }
  .book[open], .book-ok path { animation: none; }
  .book-ok path { stroke-dashoffset: 0; }
}

@media (min-width: 960px) {
  .price-hero { grid-template-columns: 1fr 1fr; gap: 48px; }
  .sticky-cta { display: none; }
  .ex-price { padding-bottom: 0; }
}

/* ================= catalog ================= */

.cat-filter { margin-bottom: 20px; }
.svc-grid { list-style: none; display: grid; gap: 16px; padding-bottom: 16px; }
.svc { overflow: hidden; display: flex; flex-direction: column; }
.svc[hidden] { display: none; }
.svc img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.svc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.svc-body h3 { margin-bottom: 4px; }
.svc-body > p { font-size: .9375rem; margin-bottom: 10px; }
.svc-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto !important; margin-bottom: 14px !important; }
.svc-meta span { display: inline-flex; align-items: center; gap: 6px; }
.svc-meta .icon { width: 18px; height: 18px; color: var(--ex-muted); }
.master-grid { list-style: none; display: grid; gap: 12px; }
.master { display: flex; gap: 16px; align-items: center; padding: 18px; }
.master h3 { margin: 0 0 2px; }
.master p { margin: 0; }
.master-icon { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: #F6E6EE; color: var(--ex-accent); stroke-width: 1.75; }
.master { flex-wrap: wrap; align-content: space-between; }
.master > div { flex: 1; min-width: 0; }
.master-book { flex-basis: 100%; min-height: 44px; }

/* карточка услуги: при наведении — тень, рамка и заливка кнопки; без подъёма и зума (решение владельца) */
.svc { position: relative; transition: box-shadow .3s ease, border-color .3s ease; }
.svc h3 { transition: color .25s ease; }
.svc-book { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
@media (hover: hover) {
  .svc:hover, .svc:focus-within {
    border-color: #E3C3D3;
    box-shadow: 0 18px 36px -12px rgb(155 52 104 / .28), 0 4px 10px rgb(42 27 36 / .06);
  }
  .svc:hover h3 { color: var(--ex-accent); }
  .svc:hover .svc-book { background: var(--ex-accent); border-color: var(--ex-accent); color: var(--ex-on-accent); }
}

/* выбор мастера в форме записи */
.book-masters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.book-masters .book-chip { align-items: flex-start; min-height: 56px; padding: 8px 12px; text-align: left; }
.book-masters .book-chip-sub { order: 1; }
.book-masters .book-chip:has(:disabled) { text-decoration: none; }
.book-masters .book-chip:has(:disabled) .book-chip-main { text-decoration: line-through; }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } .master-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(4, 1fr); } }

/* меню на телефоне: фото слева, компактно */
@media (max-width: 639px) {
  .dish { flex-direction: row; }
  .dish picture { flex: none; width: 112px; }
  .dish img { height: 100%; aspect-ratio: 1; }
  .dish-body { padding: 12px 14px; }
  .dish-body h3 { font-size: 1rem; }
  .dish-body p { font-size: .875rem; margin-bottom: 6px; }
}