/* Лагори — прототип v4: две колонки, стиль iOS. */
:root {
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --ink: #000000;
  --muted: #6C6C70;
  --line: #E5E5EA;
  --ctl: #EFEFF4;
  --chev: #C7C7CC;
  --accent: #0062CC;
  --accent-ink: #FFFFFF;
  --accent-soft: #E5F0FB;
  --danger: #C4321F;
  --green: #34C759;
  --r-lg: 16px;
  --r: 12px;
  --r-sm: 10px;
  --r-xs: 8px;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body:has(dialog[open]) { overflow: hidden; } /* открыто окно записи — страница под ним не листается */
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; height: auto; } /* height:auto — иначе атрибут height у сжатых фото растягивает их */
h1, h2, h3 { margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid rgba(0, 98, 204, 0.45); outline-offset: 2px; }

/* ---------- Каркас ---------- */
/* Колонка меню и страница — одним блоком по центру окна: на широком мониторе меню не уезжает к левому краю.
   Листается вся страница (полоса прокрутки — у окна), колонка меню стоит на месте (sticky). */
.shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); max-width: 1540px; min-height: 100vh; margin: 0 auto; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 22px 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
/* не сжимать меню: на невысоком экране длинное «Сегодня» сплющивало его в полоску (у .group overflow: hidden) */
.side > * { flex-shrink: 0; }
.main-inner { max-width: 1240px; margin: 0 auto; padding: 22px 36px 56px; display: flex; flex-direction: column; gap: 40px; }

.topbar { display: flex; flex-direction: column; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { width: 44px; height: 44px; border-radius: 50%; }
.brand strong { display: block; font-size: 20px; letter-spacing: -0.01em; line-height: 1.15; }
.brand span span { font-size: 12px; color: var(--muted); }
.menu-btn { display: none; }

/* ---------- Кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border: none; border-radius: var(--r); font-size: 15px; font-weight: 600; cursor: pointer; text-align: center; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #0057B8; }
.btn-primary[disabled] { opacity: 0.5; cursor: default; }
.btn-secondary { background: var(--accent-soft); color: var(--accent); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: var(--r-sm); }

/* ---------- Сгруппированные списки ---------- */
.group { background: var(--card); border-radius: var(--r); overflow: hidden; }
.row { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; color: var(--ink); min-height: 44px; }
.row + .row::before { content: ''; position: absolute; left: 14px; right: 0; top: 0; border-top: 1px solid var(--line); }
.group.with-icons .row + .row::before { left: 53px; }
a.row:hover { text-decoration: none; background: #F7F7FA; }
.row .grow { flex: 1; min-width: 0; }
.row .sub { display: block; font-size: 13px; color: var(--muted); }
.row .val { font-weight: 600; white-space: nowrap; }
.row .val.wrap { white-space: normal; text-align: right; } /* длинные значения («Amaran 600 — для съёмки на телефон…») переносятся */
.row .grow:has(+ .val.wrap) { min-width: min-content; } /* а подпись слева («Когда») не сжимается под ними на телефоне */
.row .chev { color: var(--chev); font-size: 20px; line-height: 1; }
.row[aria-current='page'], a.row[aria-current='page']:hover { background: var(--accent); color: #FFFFFF; }
.row[aria-current='page'] .ico { background: rgba(255, 255, 255, 0.22) !important; }
.ico { flex: none; width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.ico svg { width: 17px; height: 17px; }
/* Левое меню: услуги — строками, разделы — плитками в один ряд, подарочный сертификат — выделенной кнопкой */
.side-nav { display: flex; flex-direction: column; gap: 10px; }
.nav-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.nav-tiles a { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 0 8px; border-radius: var(--r); background: var(--card); color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; text-align: center; }
.nav-tiles a:hover { text-decoration: none; background: #F7F7FA; }
.nav-tiles a[aria-current='page'] { background: var(--accent); color: #FFFFFF; }
.nav-tiles a[aria-current='page'] .ico { background: rgba(255, 255, 255, 0.22) !important; }
.nav-tiles a[aria-current='page'] .ico svg { stroke: #FFFFFF; }
.nav-gift { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r); background: #F3E8FB; color: #5E1F86; font-weight: 600; }
.nav-gift:hover { text-decoration: none; background: #ECDDF8; }
.nav-gift small { display: block; font-size: 12px; font-weight: 400; color: #7A2AA8; }
.nav-gift .chev { color: #B98AD6; font-size: 20px; line-height: 1; }
.nav-gift[aria-current='page'] { box-shadow: inset 0 0 0 2px #AF52DE; }
/* Соцсети студии — в ряд под меню */
.social { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.social a { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 6px; border-radius: var(--r); background: var(--card); color: var(--ink); font-size: 12px; font-weight: 500; white-space: nowrap; }
.social a:hover { text-decoration: none; background: #F7F7FA; }
.social .ico { width: 22px; height: 22px; border-radius: 6px; }
.social .ico svg { width: 13px; height: 13px; }
.social .ico b { color: #FFFFFF; font-size: 9px; font-weight: 800; letter-spacing: -0.02em; }
.caption { margin: 0 0 7px 14px; font-size: 13px; font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.note { font-size: 13px; color: var(--muted); padding: 7px 14px 0; }

/* ---------- Карточка «Сейчас в студии» ---------- */
.live { background: var(--card); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.35; }
.live-head { display: flex; justify-content: space-between; align-items: center; }
.live-head strong { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); } }
.live-timer { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.live-timer b { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.live-timer span { font-size: 12px; color: var(--muted); text-align: right; }
.bar { height: 6px; border-radius: 999px; background: var(--ctl); overflow: hidden; }
/* съёмки нет — в студии никого: пульс не мигает, полоски нет, вместо таймера — ближайшее свободное время */
.live.idle .pulse { animation: none; background: var(--chev); }
.live.idle .bar { display: none; }
.live-next { border: 0; background: transparent; padding: 0; width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.live-next u { text-decoration: none; color: var(--accent); font-weight: 600; }
.live-next:hover b { color: var(--accent); }
.live-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.today[hidden] { display: none; }
.bar div { height: 100%; background: var(--accent); border-radius: 999px; }
/* «Расписание на сегодня» — свёрнуто, открывается по щелчку */
.today { border-top: 1px solid var(--line); padding-top: 8px; }
.today summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
.today summary::-webkit-details-marker { display: none; }
.today summary::after { content: '›'; font-size: 17px; line-height: 1; transform: rotate(90deg); transition: transform 0.15s; }
.today[open] summary::after { transform: rotate(-90deg); }
.today summary > span:first-child { flex: 1; }
#today-sum { font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; }
#today { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.slot-row { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: var(--r-xs); border: none; background: transparent; width: 100%; text-align: left; font-size: 13px; }
.slot-row time { width: 40px; font-weight: 600; font-variant-numeric: tabular-nums; }
.slot-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chev); flex: none; }
.slot-row .lbl { flex: 1; }
.slot-row .nt { font-size: 12px; color: var(--muted); }
.slot-row.now { background: var(--bg); }
.slot-row.now .dot { background: var(--green); }
.slot-row.free { cursor: pointer; color: var(--accent); }
.slot-row.free .dot { background: var(--accent); }
.slot-row.free .nt { color: var(--accent); font-weight: 600; }
.slot-row.free:hover { background: var(--accent-soft); }

.contacts { background: var(--card); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.4; }
.contacts .muted { font-size: 12px; color: var(--muted); }
.contacts .phone { font-weight: 600; font-size: 15px; }

/* ---------- Центр: шапка страницы ---------- */
.crumbs { font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.page-head { display: flex; flex-direction: column; gap: 8px; }
.page-head h1 { font-size: 36px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.lead { font-size: 17px; max-width: 760px; color: #1C1C1E; }
.rating-line { align-self: flex-start; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 15px; }
.rating-line .stars { font-size: 16px; }
.rating-line:hover { text-decoration: none; background: #F7F7FA; }
.rating-line .stars { color: #FFB400; letter-spacing: 1px; }
.rating-line .stars i { font-style: normal; color: var(--ctl); }
.rating-line b { font-weight: 700; }
.rating-line span:last-child { color: #3A3A3C; }

.hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 16px; align-items: stretch; }
.mosaic { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 420px; }
.mosaic figure { margin: 0; position: relative; min-height: 0; border-radius: var(--r-lg); overflow: hidden; }
.mosaic figure:first-child { grid-row: span 2; }
/* фото не задают высоту мозаики (вертикальные растягивали её до ~850 px и цена с кнопками уходили за экран, 08.11.2026) */
.mosaic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mosaic figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); font-size: 12px; font-weight: 600; }
.facts { display: flex; flex-direction: column; gap: 12px; }
.facts .group { flex: 1; }
.facts .row { align-items: flex-start; }
.facts .row .k { width: 112px; flex: none; color: var(--muted); font-size: 14px; }
.facts .row .v { flex: 1; font-size: 14px; }
.facts .row .v b { font-size: 17px; }
.facts .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- Оглавление ---------- */
.toc { position: sticky; top: 0; z-index: 5; margin: -18px -36px; padding: 10px 36px; background: rgba(242, 242, 247, 0.86); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.toc a { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 500; }
.toc a:hover { text-decoration: none; background: var(--accent-soft); color: var(--accent); }

/* ---------- Секции ---------- */
.sec { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 64px; }
.sec > h2 { font-size: 24px; font-weight: 700; }
.sec-lead { max-width: 820px; color: #1C1C1E; }
.text { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.cols-1 { display: grid; grid-template-columns: minmax(0, 820px); gap: 16px; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.price-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.price-card { background: var(--card); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: inset 0 0 0 2px var(--accent-soft); }
.price-card .pc-title { font-size: 15px; font-weight: 600; }
.price-card .pc-price { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--accent); }
.price-card .pc-sub { font-size: 13px; color: var(--muted); flex: 1; }
.price-card .btn { margin-top: 10px; }
.price-wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }

.tile { background: var(--card); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.tile h3 { font-size: 16px; font-weight: 600; }
a.tile, a.tile:hover { color: inherit; text-decoration: none; }
a.tile:hover { background: #F7F7FA; }
.tile p { font-size: 14px; color: #3A3A3C; }
.tile .ico { margin-bottom: 2px; }
.card { background: var(--card); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.card .img { aspect-ratio: 4 / 3; background: var(--ctl); overflow: hidden; }
.card .img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.card .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 4 / 3; background: var(--ctl); }
.card .pair figure { margin: 0; position: relative; overflow: hidden; }
.card .pair img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.card .pair figcaption, .tag { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); font-size: 11px; font-weight: 600; }
.card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.card h3 { font-size: 16px; font-weight: 600; }
.card p { font-size: 14px; color: #3A3A3C; }

.steps .row { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
.num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #FFFFFF; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.steps .row strong { display: block; font-weight: 600; }
.steps .row .grow > span { font-size: 14px; color: #3A3A3C; }
.steps .row + .row::before { left: 52px; }

.video { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; border-radius: var(--r-lg); overflow: hidden; color: #FFFFFF; background: #1C1C1E; }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
.video .play { position: absolute; left: 50%; top: 45%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); display: flex; align-items: center; justify-content: center; }
.video .over { position: relative; padding: 16px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), transparent); }
.video .over strong { display: block; font-size: 16px; }
.video .over span { font-size: 13px; opacity: 0.85; }
.video:hover { text-decoration: none; }

.honest { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0; background: var(--card); border-radius: var(--r-lg); overflow: hidden; }
.honest .body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.honest .label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--danger); }
.honest h3 { font-size: 18px; }
.honest p { font-size: 14px; color: #3A3A3C; }
.honest .img { min-height: 220px; background: var(--ctl); }
.honest .img { max-height: 360px; }
.honest .img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.honest .btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.gallery { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 8px; }
.gallery img { width: 100%; aspect-ratio: var(--ratio, 4 / 5); object-fit: cover; border-radius: var(--r-sm); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sec-head h2 { font-size: 24px; font-weight: 700; }

.cert { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.cert-img { border-radius: var(--r-lg); overflow: hidden; background: var(--ctl); aspect-ratio: 1357 / 1920; }
.cert-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Вопросы ---------- */
.faq { columns: 2; column-gap: 16px; }
.faq details { break-inside: avoid; background: var(--card); border-radius: var(--r); margin-bottom: 10px; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 13px 14px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '›'; margin-left: auto; color: var(--chev); font-size: 22px; line-height: 1; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(90deg); }
.faq .ans { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #3A3A3C; }
.faq .ans .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.faq .ans figure { margin: 0; position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--ctl); }
.faq .ans figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.foot { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 2px; }
.foot a { color: var(--muted); }

/* ---------- Окно записи ---------- */
dialog.sheet { width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: none; border-radius: 18px; background: var(--bg); color: var(--ink); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3); overflow: hidden; }
dialog.sheet[open] { display: flex; flex-direction: column; animation: sheetIn 0.22s ease-out; }
dialog.sheet::backdrop { background: rgba(0, 0, 0, 0.36); backdrop-filter: blur(3px); }
@keyframes sheetIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; background: var(--card); border-bottom: 1px solid var(--line); }
.sheet-head .back { border: none; background: none; color: var(--accent); font-size: 15px; cursor: pointer; padding: 4px 0; visibility: hidden; }
.sheet-head .back.on { visibility: visible; }
.sheet-head h2 { flex: 1; text-align: center; font-size: 17px; font-weight: 600; }
.sheet-head .x { width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--ctl); color: var(--muted); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sheet-body { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.sheet-body > * { flex-shrink: 0; }
.sheet-foot { padding: 12px 16px 16px; background: var(--card); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.sheet-foot .sum { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sheet-foot .sum span { font-size: 13px; color: var(--muted); }
.sheet-foot .sum b { font-size: 22px; }
.sheet-foot .hint { font-size: 12px; color: var(--muted); text-align: center; }

.f-label { font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 6px 2px; display: block; }
.f-block { display: flex; flex-direction: column; }
.f-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: var(--ctl); }
.seg button { flex: 1 1 0; min-height: 34px; padding: 0 4px; border: none; border-radius: var(--r-xs); background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; }
.seg button[aria-pressed='true'] { background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
.seg.big button { min-height: 40px; font-size: 14px; }
.seg.wrap { flex-wrap: wrap; } /* много вариантов (форматы съёмки) — по 3 в ряд, чтобы подписи не сжимались */
.seg.wrap button { flex: 1 1 calc(33.333% - 2px); }
.seg button small { font-weight: 400; opacity: 0.75; }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } /* неделя; следующие — стрелками в .days-nav */
.days-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.days-head .f-label { margin-bottom: 0; }
.days-nav { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.days-nav b { min-width: 150px; text-align: center; font-weight: 600; }
.days-nav button { width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 22px; line-height: 1; padding: 0 0 3px; cursor: pointer; }
.days-nav button:hover { background: var(--accent); color: #FFFFFF; }
.days-nav button[disabled] { background: var(--ctl); color: var(--chev); cursor: default; }
.days-more { padding: 6px 2px 0; font-size: 12px; }
.days button { min-height: 52px; padding: 0; border: none; border-radius: var(--r-sm); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; }
.days button span { font-size: 11px; opacity: 0.85; }
.days button b { font-size: 17px; }
.days button[aria-pressed='true'] { background: var(--accent); color: #FFFFFF; }
.days button.off b { text-decoration: line-through; opacity: 0.55; } /* выходной */
.days button.full:not([aria-pressed='true']) { opacity: 0.45; } /* свободных часов нет */
.times { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.times button { min-height: 38px; border: none; border-radius: var(--r-sm); background: var(--card); font-size: 14px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.times button[aria-pressed='true'] { background: var(--accent); color: #FFFFFF; }
.times button:disabled { background: transparent; color: var(--chev); text-decoration: line-through; cursor: default; }
.stepper { display: flex; align-items: center; justify-content: space-between; padding: 3px; border-radius: var(--r-sm); background: var(--ctl); }
.stepper button { width: 40px; height: 34px; border: none; border-radius: var(--r-xs); background: transparent; font-size: 20px; cursor: pointer; }
.stepper button:disabled { color: var(--chev); cursor: default; }
.stepper b { font-size: 16px; }
.bgs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bgs button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 54px; padding: 5px 0; border: none; border-radius: var(--r-sm); background: transparent; font-size: 11px; font-weight: 600; cursor: pointer; }
.bgs button i { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.25); }
.bgs button[aria-pressed='true'] { background: var(--card); }
.bgs button[aria-pressed='true'] i { box-shadow: 0 0 0 3px var(--accent); }
.warn { font-size: 12px; line-height: 1.45; color: var(--danger); margin-top: 6px; }
.warn a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Городские страницы: места, которые пишет ИИ-писатель (в прототипе — жёлтым), ссылки на соседние города */
.ph { background: #FFF4E5; color: #7A4100; border-radius: 4px; padding: 0 4px; font-weight: inherit; }
.draft-note { background: #FFF4E5; color: #7A4100; border-radius: var(--r); padding: 10px 14px; font-size: 13px; }
.draft-note .ph { background: #FFE2B8; }
.city-links { display: flex; flex-wrap: wrap; gap: 8px; }
.city-links a { padding: 8px 14px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.city-links a:hover { background: #E9E9EE; }

/* Сцена «вид из камеры» (docs/03): вертикальный кадр 4 : 5 — фото пустого зала на выбранном фоне, поверх люди и питомец
   (картинки с тенью; места — в site.js). Фон без своего фото — общее фото, подкрашенное умножением: тени фото сохраняются.
   Сцена — рядом с настройками людей и питомца, на телефоне тоже (уменьшенная): так окно записи короче. */
.sc-row { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 16px; align-items: start; }
.sc-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.scene { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-sm); overflow: hidden; background: #E9E8E5; isolation: isolate; }
.scene .sc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene .sc-tint { position: absolute; inset: 0; background: linear-gradient(180deg, var(--top) 0%, var(--top) 68%, var(--floor) 78%, var(--floor) 100%); mix-blend-mode: multiply; }
.scene .sc-light { position: absolute; inset: 0; z-index: 15; background: radial-gradient(ellipse 60% 55% at 50% 58%, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, 0.18) 50%, rgba(10, 10, 12, 0.7) 100%); }
.scene .fig { position: absolute; width: auto; max-width: none; pointer-events: none; user-select: none; }
.scene .fig.appear { animation: figIn 0.45s ease-out; }
@keyframes figIn { from { opacity: 0; } }
.scene .tag { position: absolute; z-index: 20; left: auto; right: 8px; top: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #1E1E1E; font-size: 11px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .scene .fig.appear { animation: none; } }

.link-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 9px 14px; border: none; border-radius: var(--r); background: var(--card); color: var(--ink); font-size: 15px; text-align: left; cursor: pointer; }
.link-row:hover { background: #F7F7FA; }
.link-row .grow { flex: 1; }
.link-row .chev { color: var(--chev); font-size: 20px; line-height: 1; }
.lines { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--muted); }
.lines b { color: var(--ink); font-weight: 600; }

.input { width: 100%; min-height: 44px; padding: 0 14px; border: none; border-radius: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); }
.input:focus { outline: none; }
.group .field { display: flex; align-items: center; gap: 10px; padding-left: 14px; position: relative; }
.group .field + .field::before { content: ''; position: absolute; left: 14px; right: 0; top: 0; border-top: 1px solid var(--line); }
.group .field label { width: 92px; flex: none; font-size: 15px; }
.group .field .input { padding-left: 0; }
select.input { appearance: none; cursor: pointer; }
#f-cert { text-transform: uppercase; letter-spacing: 0.04em; }
#f-cert::placeholder { text-transform: none; letter-spacing: 0; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; position: relative; cursor: pointer; font-size: 14px; line-height: 1.4; }
.check + .check::before { content: ''; position: absolute; left: 50px; right: 0; top: 0; border-top: 1px solid var(--line); }
.check input { appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 50%; border: 2px solid var(--chev); cursor: pointer; display: grid; place-items: center; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: ''; width: 6px; height: 11px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.check em { font-style: normal; color: var(--muted); font-size: 12px; }
.summary .row .k { color: var(--muted); width: 96px; flex: none; }
.hold { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r); background: var(--accent-soft); color: #00408A; font-size: 13px; }
.hold b { font-variant-numeric: tabular-nums; }
.done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px; }
.done .big { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; }
.done h3 { font-size: 20px; }
.done p { font-size: 14px; color: #3A3A3C; max-width: 420px; }
/* Оплата сертификата по СБП в окне (15.11.2026): QR на компьютере, кнопка «в банк» на телефоне, «ждём оплату» */
.sbp { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 8px; }
.sbp h3 { font-size: 20px; }
.sbp .btn { max-width: 360px; }
.sbp .hint { font-size: 13px; color: var(--muted); max-width: 420px; overflow-wrap: anywhere; }
.sbp-qr { width: 220px; height: 220px; background: #fff; border-radius: 12px; padding: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.sbp-more summary { cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 600; }
.sbp-more .sbp-qr { margin-top: 10px; }
.sbp-wait { font-size: 14px; font-weight: 600; color: var(--ink, #1C1C1E); }
.sbp-wait::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; animation: sbp-pulse 1.2s ease-in-out infinite; }
@keyframes sbp-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sbp-wait::before { animation: none; } }
/* «Получать напоминания в Telegram / MAX» — в окне записи и на страницах записи и сертификата */
.bot-links { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; margin-top: 4px; }
.bot-links .hint { font-size: 12px; color: var(--muted); text-align: center; }
.page-bots { display: flex; flex-wrap: wrap; gap: 8px; }
/* страница записи: подключить мессенджер — главный шаг после оплаты */
.bots-main { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px #B9D5F2; }
.bots-main p { color: #00408A; }
.bots-main .note { color: #2F5F93; margin: 8px 0 14px; }
.bots-main .btn-secondary { background: #FFFFFF; }
/* Страница записи: «Перенести» и «Отменить»; перенос — свободное время по дням */
.tile .btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.move-days { display: flex; flex-direction: column; gap: 18px; max-width: 620px; }
.move-day h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.move-day .times button { color: var(--ink); }
.move-day .times button:hover { background: var(--accent); color: #FFFFFF; }
.draft-note.err { background: #FFECEB; color: #A1150C; }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 100; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 999px; background: rgba(28, 28, 30, 0.92); color: #FFFFFF; font-size: 13px; transition: opacity 0.2s, transform 0.2s; text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Карточки услуг (главная, «С фотографом») ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc { background: var(--card); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.svc .img { aspect-ratio: 4 / 3; background: var(--ctl); overflow: hidden; }
.svc .img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.svc .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.svc h3 { font-size: 18px; font-weight: 700; }
.svc p { font-size: 14px; color: #3A3A3C; flex: 1; }
.svc .price { font-size: 20px; font-weight: 700; }
.svc .price small { font-size: 14px; font-weight: 500; color: var(--muted); }
.svc .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* Пакеты с ценой (снепы, тесты, WB) */
.pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pkg { background: var(--card); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.pkg h3 { font-size: 16px; font-weight: 600; }
.pkg .price { font-size: 24px; font-weight: 700; }
.pkg ul { margin: 0; padding-left: 18px; font-size: 14px; color: #3A3A3C; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pkg .tag-line { font-size: 12px; color: var(--muted); }

/* Чипы-фильтры */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { border: none; padding: 7px 13px; border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 500; cursor: pointer; }
.chips button[aria-pressed='true'] { background: var(--ink); color: #FFFFFF; }

/* Портфолио */
.pf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pf { display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.pf:hover { text-decoration: none; }
.pf[hidden] { display: none; }
.pf .img { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--ctl); }
.pf .img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.pf:hover .img img { transform: scale(1.03); }
.pf b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.pf span { font-size: 12px; color: var(--muted); }
.post-gallery { columns: 3; column-gap: 10px; }

/* Блог: записи списком — обложка слева, дата, заголовок и начало текста */
.news { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 18px; align-items: center; max-width: 980px; padding: 12px; border-radius: var(--r-lg); background: var(--card); color: var(--ink); }
.news:hover { text-decoration: none; }
.news.no-img { grid-template-columns: 1fr; padding: 16px; }
.news .img { aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; background: var(--ctl); }
.news .img img { width: 100%; height: 100%; object-fit: cover; }
.news .txt { display: flex; flex-direction: column; gap: 6px; }
.news .date { font-size: 12px; color: var(--muted); }
.news b { font-size: 19px; font-weight: 700; line-height: 1.25; }
.news .lead-sm { font-size: 14px; color: #3A3A3C; }
.post-nav { display: flex; justify-content: space-between; gap: 16px; max-width: 820px; font-size: 14px; }
.post-gallery img { width: 100%; margin-bottom: 10px; border-radius: var(--r-sm); break-inside: avoid; }
.verdict { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.verdict .tile ul { margin: 0; padding-left: 18px; font-size: 14px; color: #3A3A3C; display: flex; flex-direction: column; gap: 6px; }
.score { display: flex; align-items: center; gap: 16px; background: var(--card); border-radius: var(--r-lg); padding: 16px; }
.score b { font-size: 34px; letter-spacing: -0.02em; }
.score p { font-size: 14px; color: #3A3A3C; }

/* Сертификат (так же выглядит PDF) */
.cert-card { position: relative; aspect-ratio: 1.414 / 1; border-radius: var(--r-lg); padding: 22px 24px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; gap: 6px; overflow: hidden; overflow: clip; border: 1px solid var(--line); } /* clip, а не hidden: длинная надпись не обрезается — карточка подрастает (09.11.2026) */
.cert-card::after { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, #F2F2F7 0%, transparent 70%); }
.cert-card .cc-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.cert-card .cc-top img { width: 26px; height: 26px; border-radius: 50%; }
.cert-card .cc-title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; }
.cert-card .cc-what { font-size: 16px; line-height: 1.35; }
.cert-card .cc-for { font-size: 15px; color: var(--muted); }
.cert-card .cc-sign { font-size: 13px; line-height: 1.3; color: var(--muted); margin-top: -2px; } /* подпись под «для …» (09.11.2026) */
.cert-card .cc-bottom { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; }
.cert-card .cc-num { font-size: 18px; font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.cert-card .cc-qr { width: 64px; height: 64px; border-radius: 6px; background:
  linear-gradient(90deg, #000 0 20%, transparent 20% 40%, #000 40% 50%, transparent 50% 70%, #000 70% 100%) 0 0 / 100% 20%,
  linear-gradient(90deg, transparent 0 30%, #000 30% 60%, transparent 60% 80%, #000 80%) 0 20% / 100% 20%,
  linear-gradient(90deg, #000 0 10%, transparent 10% 50%, #000 50% 90%, transparent 90%) 0 40% / 100% 20%,
  linear-gradient(90deg, transparent 0 20%, #000 20% 30%, transparent 30% 60%, #000 60% 100%) 0 60% / 100% 20%,
  linear-gradient(90deg, #000 0 40%, transparent 40% 70%, #000 70% 80%, transparent 80%) 0 80% / 100% 20%;
  background-repeat: no-repeat; border: 4px solid #FFFFFF; outline: 1px solid var(--line); }
.cert-card .cc-note { font-size: 11px; color: var(--muted); }
/* Дизайны для печати — превью на странице сертификата; сами PDF — resources/views/certificate-pdf/*.blade.php */
.cert-card .cc-photo { display: none; }
.cert-card.d-classic { align-items: center; text-align: center; border: 4px double #1C1C1E; font-family: 'DejaVu Serif', Georgia, 'Times New Roman', serif; }
.cert-card.d-classic::after { display: none; }
.cert-card.d-classic .cc-top { flex-direction: column; gap: 4px; font-family: var(--font); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; }
.cert-card.d-classic .cc-title { font-weight: 400; letter-spacing: 0; margin-top: 2px; }
.cert-card.d-classic .cc-for, .cert-card.d-classic .cc-sign { font-style: italic; }
.cert-card.d-classic .cc-bottom, .cert-card.d-classic .cc-note { align-self: stretch; text-align: left; font-family: var(--font); }
.cert-card.d-black { background: #0B0B0C; border-color: #0B0B0C; color: #FFFFFF; }
.cert-card.d-black::after { content: 'Λ'; right: 18px; top: -24px; width: auto; height: auto; border-radius: 0; background: none; font-size: 200px; font-weight: 700; line-height: 1; color: #19191B; }
.cert-card.d-black > * { position: relative; z-index: 1; }
.cert-card.d-black .cc-top img { filter: invert(1); }
.cert-card.d-black .cc-top, .cert-card.d-black .cc-for, .cert-card.d-black .cc-sign, .cert-card.d-black .cc-note { color: #8E8E93; }
.cert-card.d-black .cc-what { color: #D1D1D6; }
.cert-card.d-black .cc-bottom img { background: #FFFFFF; padding: 3px; border-radius: 6px; }
.cert-card.d-black .cc-qr { background-color: #FFFFFF; outline: none; } /* условный QR образца — чёрный рисунок, без белой подложки его не видно */
.cert-card.d-photo { padding: 18px 20px 16px calc(38% + 18px); gap: 4px; }
.cert-card.d-photo .cc-title { font-size: 22px; } /* узкая колонка: при 26px низ с адресом обрезался (08.11.2026) */
.cert-card.d-photo::after { display: none; }
.cert-card.d-photo .cc-photo { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 38%; }
.cert-card.d-photo .cc-photo img { width: 100%; height: 100%; object-fit: cover; }
.cert-card.d-photo .cc-title { font-family: 'DejaVu Serif', Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 22px; letter-spacing: 0; }
.cert-card.d-photo .cc-what { font-size: 14px; }
.cert-card.d-photo .cc-num { font-size: 15px; white-space: nowrap; }
/* Блок «Дизайны сертификата»: образцы всех вариантов */
.cert-designs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; max-width: 920px; }
.cert-group { display: flex; flex-direction: column; gap: 10px; }
.cert-group + .cert-group { margin-top: 18px; }
.cert-group > h3 { font-size: 18px; font-weight: 700; }
.cert-group > p { max-width: 820px; color: #1C1C1E; }
/* выбор дизайна на странице сертификата: плитки с миниатюрой (вместо переключателя — дизайнов больше десяти) */
.cert-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.cert-pick button { display: flex; flex-direction: column; gap: 4px; padding: 4px 4px 6px; border: 0; border-radius: var(--r-sm); background: var(--card); font: inherit; font-size: 12px; text-align: center; cursor: pointer; color: var(--ink); }
.cert-pick button[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--accent); color: var(--accent); font-weight: 600; }
.cert-pick .cp-thumb { aspect-ratio: 1.414 / 1; border-radius: 6px; background: #FFFFFF center / cover; border: 1px solid var(--line); }
.cert-pick .cp-thumb.t-classic { box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 4px #1C1C1E; }
.cert-pick .cp-thumb.t-black { background-color: #0B0B0C; }
.cert-designs figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cert-designs figcaption { font-size: 13px; color: var(--muted); padding: 0 2px; }
.cert-designs figcaption b { color: var(--ink); }
.cert-card.sm { padding: 16px 18px; }
.cert-card.sm .cc-title { font-size: 20px; }
.cert-card.sm .cc-what { font-size: 14px; }
.cert-card.sm .cc-num { font-size: 15px; }
.cert-card.sm .cc-qr { width: 48px; height: 48px; }
/* Дизайны на фоне-картинке (CertificatePdf::ART, 08.11.2026): фон и колонка текста — из переменных cssVars, размеры текста —
   доли ширины карточки (cqw), как в PDF; шрифты — Cormorant Garamond и Montserrat (public/fonts, OFL) */
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/CormorantGaramond-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Cormorant'; font-style: italic; font-weight: 500; font-display: swap; src: url('/fonts/CormorantGaramond-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Montserrat-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/Montserrat-SemiBold.ttf') format('truetype'); }
.cert-card .cc-body { display: contents; } /* у обычных дизайнов обёртки как будто нет */
.cert-card.d-art, .cert-card.d-art.sm { container-type: inline-size; background: var(--bg) center / cover; border: 0; color: var(--ink); font-family: 'Montserrat', var(--font); gap: 0; padding: var(--ct) 0 0; }
.cert-card.d-art::after { display: none; }
/* колонка текста: высота — по тексту, номер и QR сразу под «для …» (08.11.2026) */
.cert-card.d-art .cc-body { display: flex; flex-direction: column; box-sizing: border-box; margin-left: var(--cl); width: var(--cw); padding: var(--cp); background: var(--panel); border-radius: 2.4cqw; }
.cert-card.d-art .cc-top { justify-content: var(--jc, flex-start); color: var(--ink); font-size: max(7px, 1.15cqw); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap; gap: 1cqw; }
.cert-card.d-art .cc-top img { width: 4.3cqw; height: 4.3cqw; }
.cert-card.d-art .cc-title { font-family: 'Cormorant', Georgia, serif; font-weight: 500; font-size: 4.7cqw; line-height: 0.98; letter-spacing: 0; margin: 3.7cqw 0 2cqw; }
.cert-card.d-art .cc-what { font-size: max(9px, 1.5cqw); line-height: 1.4; }
.cert-card.d-art .cc-for { font-family: 'Cormorant', Georgia, serif; font-style: italic; font-size: 3cqw; color: var(--ink); margin-top: 1.6cqw; }
.cert-card.d-art .cc-sign { font-family: 'Cormorant', Georgia, serif; font-style: italic; font-size: 2cqw; line-height: 1.15; color: var(--ink); margin-top: 0.6cqw; }
.cert-card.d-art .cc-bottom { margin-top: 3.4cqw; gap: 2cqw; justify-content: var(--jc, flex-start); align-items: center; }
.cert-card.d-art .cc-num { white-space: nowrap; font-size: max(9px, 1.7cqw); border: 1px solid var(--ink); border-radius: 2cqw; padding: 0.7cqw 1.6cqw; }
.cert-card.d-art .cc-qr { width: 8.5cqw; height: 8.5cqw; border-width: 0.5cqw; outline: none; }
.cert-card.d-art .cc-note { color: var(--sub); font-size: max(8px, 1cqw); margin-top: 1cqw; }
.cert-card.d-anyutki .cc-top img { filter: invert(1); }

/* Шаги-плитки */
.steps-h { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; counter-reset: st; }
.steps-h .tile { position: relative; padding-top: 44px; }
.steps-h .tile::before { counter-increment: st; content: counter(st); position: absolute; left: 16px; top: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #FFFFFF; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Цитаты отзывов */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.quote { background: var(--card); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.quote img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.quote blockquote { margin: 0; padding: 14px 16px 6px; font-size: 15px; }
.quote span { padding: 0 16px 14px; font-size: 12px; color: var(--muted); }

/* Окошко отзывов Яндекс Карт (блок reviews): слева окошко, справа ссылки «оставить отзыв» */
.ya-reviews { display: grid; grid-template-columns: minmax(0, 640px) minmax(200px, 280px); gap: 16px; align-items: start; }
.ya-reviews iframe { width: 100%; height: 480px; border: 0; border-radius: var(--r-lg); background: var(--card); display: block; }
.ya-reviews.large iframe { height: 800px; }
.ya-reviews-side { display: flex; flex-direction: column; gap: 12px; }

/* Документы: правила, оферта, политика */
.doc { max-width: 820px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.doc h2 { font-size: 20px; margin-top: 14px; }
.doc ol, .doc ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.doc .draft { background: #FFF4E5; color: #7A4100; border-radius: var(--r); padding: 10px 14px; font-size: 13px; }
.doc .fill { background: #FFF4E5; border-radius: 4px; padding: 0 4px; }

/* Страница записи (ссылка из сообщения) */
.ticket { background: var(--card); border-radius: var(--r-lg); overflow: hidden; max-width: 640px; }
.ticket .t-head { padding: 18px; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--line); }
.ticket .t-head .status { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #E3F7E8; color: #1E7B34; font-size: 12px; font-weight: 600; }
.ticket .t-head b { font-size: 22px; letter-spacing: -0.01em; }
.ticket .t-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px; border-top: 1px solid var(--line); }
.btn-danger { background: #FDECEA; color: var(--danger); }

/* ---------- Ноутбуки ---------- */
@media (max-width: 1380px) {
  .mosaic { min-height: 380px; }
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(var(--cols-sm, 3), minmax(0, 1fr)); }
  .pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Узкий ноутбук: фото над фактами, высота — по экрану */
@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr; }
  .mosaic { min-height: 0; height: clamp(260px, 52vh, 460px); }
}

/* Невысокий экран (ноутбук, 08.11.2026): левая колонка плотнее, первый экран страницы — с ценой и кнопками */
@media (min-width: 901px) and (max-height: 860px) {
  .side { padding: 14px 16px; gap: 12px; }
  .topbar { gap: 12px; }
  .brand img { width: 38px; height: 38px; }
  .brand strong { font-size: 18px; }
  .topbar .btn-primary { min-height: 40px; }
  .side-nav { gap: 8px; }
  .side-nav .row { min-height: 38px; padding-top: 7px; padding-bottom: 7px; }
  .nav-tiles a { padding: 7px 0 6px; gap: 4px; }
  .nav-gift { padding: 7px 14px; }
  .live { padding: 12px; gap: 8px; }
  .live-timer b { font-size: 26px; }
  .contacts { padding: 10px 14px; }
  .main-inner { padding-top: 16px; gap: 32px; }
  .page-head h1 { font-size: 32px; }
  .mosaic { min-height: 340px; }
}

/* ---------- Телефон и планшет ---------- */
@media (max-width: 900px) {
  .shell { display: flex; flex-direction: column; height: auto; }
  .side { display: contents; }
  .main { overflow: visible; order: 2; }
  .main-inner { padding: 16px 16px 32px; gap: 32px; }
  .topbar { order: 0; position: sticky; top: 0; z-index: 20; flex-direction: row; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(242, 242, 247, 0.9); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--line); }
  .brand { flex: 1; min-width: 0; }
  .brand img { width: 36px; height: 36px; }
  .brand strong { font-size: 17px; }
  .topbar .btn-primary { width: auto; min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: var(--r-sm); }
  .hide-sm { display: none; }
  .menu-btn { display: flex; width: 38px; height: 38px; border: none; border-radius: var(--r-sm); background: var(--card); align-items: center; justify-content: center; cursor: pointer; }
  .side-nav { order: 1; display: none; margin: 0 16px; }
  .side-nav.open { display: flex; }
  .live { order: 3; margin: 0 16px; }
  .contacts { order: 4; margin: 16px 16px 24px; }
  .page-head h1 { font-size: 28px; }
  .lead { font-size: 16px; }
  .mosaic { min-height: 0; height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: 240px 160px; }
  .mosaic figure:first-child { grid-row: auto; grid-column: span 2; }
  .mosaic figure:nth-child(4) { display: none; }
  .facts .row .k { width: 96px; }
  .toc { margin: -12px -16px; padding: 8px 16px; top: 59px; }
  .sec { scroll-margin-top: 120px; }
  .cols-2, .cols-3, .price-wrap, .honest, .cert { grid-template-columns: 1fr; }
  .cert-img { max-width: 240px; }
  .faq { columns: 1; }
  .gallery { grid-template-columns: repeat(var(--cols-sm, 3), minmax(0, 1fr)); }
  dialog.sheet { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; border-radius: 0; }
  .times { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .seg.big button small { display: block; }
  .svc-grid, .verdict, .quotes, .ya-reviews { grid-template-columns: 1fr; }
  .ya-reviews.large iframe { height: 640px; }
  .ya-reviews-side { flex-direction: row; }
  .ya-reviews-side .tile { flex: 1; min-width: 0; }
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-gallery { columns: 2; }
  .news { grid-template-columns: 1fr; gap: 10px; }
  .ticket .t-actions { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .gallery { grid-template-columns: repeat(var(--cols-xs, var(--cols-sm, 3)), minmax(0, 1fr)); }
  .cert-designs { grid-template-columns: 1fr; }
  /* сертификат на телефоне — как уменьшенный (.sm): крупный не помещается, номер обрезается */
  .cert-card { padding: 16px 18px; }
  .cert-card .cc-title { font-size: 20px; }
  .cert-card.d-photo .cc-title { font-size: 18px; }
  .cert-card .cc-what { font-size: 14px; }
  .cert-card .cc-for { font-size: 13px; }
  .cert-card .cc-sign { font-size: 12px; }
  .cert-card .cc-num { font-size: 15px; }
  .cert-card .cc-qr, .cert-card .cc-bottom img { width: 48px !important; height: 48px !important; }
  .cert-card.d-photo { padding-left: calc(38% + 14px); }
  .cert-card.d-photo .cc-note, .cert-card.d-classic .cc-note { display: none; }
}
/* Окно записи на телефоне — плотнее, чтобы помещалось примерно в экран: сцена — половиной ширины рядом с длительностью,
   людьми, питомцем и обувью; время — в 2 ряда по 6. После правила для 900 px — иначе время снова встанет по 4. */
@media (max-width: 480px) {
  .sheet-body { gap: 12px; padding: 12px 16px; }
  .sheet-body .link-row { min-height: 40px; padding: 6px 12px; font-size: 14px; }
  .days button { min-height: 46px; }
  .times { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .times button { min-height: 34px; font-size: 13px; }
  .sc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .sc-side { gap: 8px; }
  .sc-side .f-label { font-size: 11px; margin-bottom: 4px; }
  .sc-side .seg button { min-height: 30px; padding: 0 2px; font-size: 12px; }
  .sc-side .stepper button { width: 34px; height: 30px; }
  .scene .tag { right: 6px; top: 6px; padding: 2px 7px; font-size: 10px; }
  .bgs button { min-height: 48px; }
  .sheet-body .summary .row { min-height: 36px; padding-top: 7px; padding-bottom: 7px; }
  .sheet-body .check { padding: 9px 14px; font-size: 13px; }
  .sheet-body .hold { padding: 8px 12px; font-size: 12px; }
  .sheet-foot { padding: 10px 16px 12px; gap: 6px; }
}
@media (max-width: 420px) {
  .topbar .btn-primary { padding: 0 10px; }
  .bgs button { font-size: 10px; } /* «Циклорама» в пятую часть узкого экрана */
  .brand span span { display: none; }
  .facts .btns { grid-template-columns: 1fr; }
}

/* Надпись на сертификате — «для кого» и подпись (страница сертификата, 09.11.2026) */
.cert-texts { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.cert-texts .f-label { margin-bottom: 0; }
.cert-texts .btn { align-self: flex-start; }
.cert-texts .err, .cert-texts .note { margin: 0; padding: 0; }
.cert-texts .err { font-size: 13px; color: #C0261A; }
.cert-texts .note.ok { color: #1E7B34; }