/* The company's page (app/business_page.py) shares the neutral surfaces, deep green and soft lime of the home page
   through brand.css. Clear sans headings, quiet service rows and mono times keep booking easy to scan. Its name is the
   headline, our brand stays in the footer. One lime action — the booking; the free start of a demo's strip is a marked
   link until the visitor has booked. On a computer two columns: the company and its action stay on the left while the
   services and the rest scroll on the right; below 1024 px one column. The booking chat is a panel over the page (the
   whole page in embed mode).
   Everything here is under body.business: the other pages that load this sheet (the certificate, «Ваша запись», the
   counter's sign, a B2B support's cabinet) keep the portal's look (control.css). Families only through --serif, --sans
   and --mono (brand.css): a change of a family there reaches this page by itself. */
/* ==== What the company's public pages took from the console's sheet (control.css), theirs since 08.10.2026 ==========
   The website, a service's, a specialist's, an article's and «Условия покупки» pages (body.biz-public) no longer load
   control.css — 45 KB the visitor's phone fetched for these few rules alone: the main column's frame, headings, the
   form's fields and buttons, the hours' table, the folds and the chat's frame. Each is the console's own rule, in its
   order, scoped by :where(.biz-public) — no weight added, so this sheet's rules after it win as they did. The other
   pages that load this sheet keep control.css and are untouched by these. */
:where(.biz-public) .control-main { width: 100%; max-width: 1330px; margin: 0px auto; padding: 36px 48px 80px; min-width: 0px; }
:where(.biz-public) .control-main :is(h1, h2, h3) { font-family: var(--serif); font-weight: 600; letter-spacing: -0.005em; color: var(--s-ink); text-wrap: balance; }
:where(.biz-public) .control-main h1 { font-size: 36px; line-height: 1.15; margin-bottom: 12px; }
:where(.biz-public) .control-main h2 { font-size: 22px; line-height: 1.25; margin: 0px 0px 16px; }
:where(.biz-public) .control-main h3 { font-size: 18px; line-height: 1.3; }
:where(.biz-public) .control-main p { font-size: 15px; line-height: 1.6; }
:where(.biz-public) .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
:where(.biz-public) .row { justify-content: space-between; }
:where(.biz-public) .control-main label { margin-top: 7px; font-size: 13px; font-weight: 500; }
:where(.biz-public) .control-main input, :where(.biz-public) .control-main select { font-size: 15px; }
:where(.biz-public) .control-main button:not(.btn):not(.logout):not(.delete-row) { border: 1px solid var(--s-pick); border-radius: var(--control-radius); padding: 11px 18px; background: var(--s-pick); color: var(--s-pick-ink); font-weight: 600; line-height: 1.3; cursor: pointer; }
:where(.biz-public) .control-main button:not(.btn):not(.logout):not(.delete-row):hover { background: var(--s-pick-deep); border-color: var(--s-pick-deep); }
:where(.biz-public) .control-main button.ghost:not(.btn):not(.logout):not(.delete-row) { background: var(--s-surface); color: var(--s-ink); border: 1px solid var(--s-edge); }
:where(.biz-public) .control-main button.ghost:not(.btn):not(.logout):not(.delete-row):hover { background: var(--s-sunken); border-color: var(--s-pick); }
:where(.biz-public) table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
:where(.biz-public) td { border-bottom: 1px solid var(--hair); padding: 14px; vertical-align: middle; }
:where(.biz-public) tbody tr:last-child td { border-bottom: 0px; }
:where(.biz-public) tbody tr:hover { background: var(--s-bg); }
:where(.biz-public) .control-main details { border: 1px solid var(--s-line); border-radius: var(--card-radius); background: var(--s-surface); padding: 16px 20px; margin-bottom: 16px; }
:where(.biz-public) .control-main summary { cursor: pointer; font-size: 15px; font-weight: 600; }
:where(.biz-public) .control-main details[open] > summary { margin-bottom: 18px; }
:where(.biz-public) .control-main details p { font-size: 14px; }
.portal:where(.biz-public) { background: var(--s-bg); }
.portal:where(.biz-public) .control-main { max-width: 920px; padding-top: 32px; }
.portal:where(.biz-public) .control-main h1 { font-size: 36px; }
:where(.biz-public) .err:empty { display: none; }
@media (max-width: 1100px) {
  :where(.biz-public) .control-main { padding: 32px 27px 65px; }
}
@media (max-width: 760px) {
  :where(.biz-public) .control-main details:not(.form-section):not(.item) > summary { padding: 11px 0px; min-height: 44px; box-sizing: border-box; }
  :where(.biz-public) .control-main { padding: 24px 16px 56px; }
  :where(.biz-public) .control-main h1 { font-size: 30px; }
  .portal:where(.biz-public) .control-main h1 { font-size: 30px; }
  .portal:where(.biz-public) .control-main { padding: 24px 16px; }
  :where(.biz-public) .control-main .btn { font-size: 14px; }
}
@media print {
  :where(.biz-public) button { display: none !important; }
  :where(.biz-public) .control-main { padding: 0px; }
  body:where(.biz-public) { background: white; }
}
:where(.biz-public) .chat-top { padding: 16px 24px; border-bottom: 1px solid var(--hair); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
:where(.biz-public) #chat { max-height: 450px; min-height: 160px; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  :where(.biz-public) #chat { scroll-behavior: auto; }
}
:where(.biz-public) .chat-buttons { padding: 0px 22px 20px; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) {
  :where(.biz-public) #chat { padding: 17px; max-height: 430px; }
  :where(.biz-public) .chat-buttons { padding: 0px 17px 18px; }
  :where(.biz-public) .chat-top { padding: 16px 17px; }
}
:where(.biz-public) .control-main input::placeholder, :where(.biz-public) .control-main textarea::placeholder { color: rgb(116, 122, 115); font-size: 14px; }
/* ==== The company's palette: --s-* (the owner's four looks by sphere, 09.10.2026) ====================================
   The contract of the company's pages with the booking sheet and the sections below the first screen: the page's ground,
   a card, a quiet fill, the words, the second words, a hairline; the scene — a sphere's own band — with its words; the
   accent — the screen's one button — with its words; the pick — what is chosen (a day, a tab, a time) — with its words;
   the display face of the headings, its weight and case, and a card's corner. Their defaults are the platform's look
   (the forest, the lime, Manrope): a simple page, the chat of a business's own site and every page that loads this sheet
   keep it; a website's sphere sets its own (company-site.css). The platform's own elements here — the demo's strip, the
   certificate's page, the counter's sign — keep the brand's tokens. The private ones after the contract: a heading's
   colour, a control's outline (3:1), the highlighter, a link's words, the open dot, a hover's fill, the warning's red. */
body.business {
  --s-bg: var(--paper); --s-surface: var(--sheet); --s-sunken: var(--shade); --s-ink: var(--ink); --s-muted: var(--muted);
  --s-line: var(--rule);
  --s-scene: var(--forest); --s-scene-ink: #ffffff; --s-scene-muted: #d1e4d6;
  --s-accent: var(--lime); --s-accent-ink: var(--ink); --s-pick: var(--forest); --s-pick-ink: var(--on-forest);
  --s-display: var(--sans); --s-display-weight: 600; --s-display-case: none; --s-radius: var(--card-radius);
  --s-heading: var(--s-ink); --s-edge: var(--faint); --s-hi: var(--hi); --s-link: var(--s-pick); --s-open: var(--lime-deep);
  --s-scene-accent: #d0fba4; --s-scene-line: #3b6150; --s-accent-hover: var(--lime-hover); --s-pick-deep: var(--forest-deep);
  --s-alert: #a83232;
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;
  background: var(--s-bg);
  color: var(--s-ink);
  font: 400 16px/1.55 var(--sans);
}
body.business ::selection { background: var(--s-hi); color: var(--s-ink); }
.business :is(a, button, input, summary):focus-visible { outline: 2px solid var(--s-pick); outline-offset: 3px; }
.business .control-main.biz { max-width: 1200px; margin: 0 auto; padding: 0 var(--s5) var(--s6); }
.business .biz :is(h1, h2, h3) { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; color: var(--s-ink); text-wrap: balance; }
.business .biz p { font-size: 16px; line-height: 1.55; }
.business .biz .btn { border-radius: var(--radius); transform: none; }
.business .biz .btn:hover { transform: none; }

/* --- the demo's strip: one calm line over the page, the company's page under it ----------------------------------- */
/* Its ground and rule run the full width (border-image, as the home page's header: nothing scrolls sideways); the
   ground is its own background too, which a contrast check reads (a club's page is black under it). */
.business .biz-demo {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s3);
  min-height: 48px; margin: 0; padding: 2px 0; font-size: 14px; line-height: 1.4; color: var(--muted);
  background-color: var(--shade);
  border-image: linear-gradient(0deg, var(--rule) 1px, var(--shade) 1px) fill 0 / 0 / 0 100vmax;
}
.business .biz .biz-demo-text { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
.business .biz .biz-demo-links { display: flex; flex-wrap: wrap; column-gap: var(--s3); margin: 0; font-size: 14px; line-height: 1.4; }
.business .biz-demo-links a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--faint);
}
.business .biz-demo-links a:hover { text-decoration-color: currentColor; }
/* The demo's next step in the strip (site/assets/demo-next.js: «Журнал администратора» once booked): the mark hugs the
   words, not the 44 px tap target — a few pixels of room each side, the same padding always, so nothing moves. */
.business .biz-demo-links a { padding-inline: 8px; margin-inline: -8px; }
.business .biz-demo-links a.dv-next { outline-offset: -6px !important; }
/* Our free start in a demo, always marked (the owner, 03.10.2026: a demo's visitor is our prospect): ink words over the
   highlighter, the lime underline — the home page's .join-link; it stays this quiet link once the visitor has booked
   too (the owner, 14.10.2026). A real company's page has no such mark (its footer's .biz-ad is quiet). */
.business .biz-demo-join,
.business .biz-join {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--lime-deep); text-decoration-thickness: 2px; text-underline-offset: 4px;
  background: linear-gradient(transparent 55%, var(--hi) 55%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.business .biz-demo-join:hover,
.business .biz-join:hover { background-image: linear-gradient(transparent 25%, var(--lime) 25%); }
/* The strip's: a finger's target, the mark on its line of words alone. */
.business .biz-demo-join {
  display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; white-space: nowrap;
  background: linear-gradient(transparent 50%, var(--hi) 50%) 0 50% / 100% 1.3em no-repeat;
}
.business .biz-demo-join:hover { background: linear-gradient(transparent 15%, var(--lime) 15%) 0 50% / 100% 1.3em no-repeat; }
/* Where the line does not hold all of it (a tablet, a small laptop): two rows — what the demo is and the free start,
   then the ways to its other side. */
@media (min-width: 600px) and (max-width: 1149px) {
  .business .biz .biz-demo-links { order: 1; flex: 1 1 100%; }
}
/* A phone: «Демо · Показать обе стороны», then the free start — two even lines; the journal and the examples wait in the
   page's footer. The free start stays a quiet link once booked too (the owner, 14.10.2026). */
@media (max-width: 599px) {
  .business .biz-demo { column-gap: 0; padding: 4px 0; }
  .business .biz-demo-what,
  .business .biz-demo-links .biz-demo-more { display: none; }
  .business .biz .biz-demo-text::after { content: "·"; margin: 0 var(--s1); color: var(--faint); }
  .business .biz .biz-demo-links { margin-right: var(--s3); }
  .business .biz-demo-join { margin-left: 0; }
}

/* --- the bar: the company's name small and plain (the headline under it is the name), its phone, «Мои записи» --- */
.business .biz-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 64px; margin: 0 0 var(--s5); padding: 0; font-size: 15px;
  border-image: linear-gradient(0deg, var(--s-line) 1px, transparent 1px) fill 0 / 0 / 0 100vmax;
}
.business .biz-brand { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px/1.3 var(--sans); color: var(--s-ink); text-decoration: none; }
.business .biz-bar-links { display: flex; align-items: center; justify-content: flex-end; column-gap: var(--s3); }
/* «Мои записи (2)» and the phone's number underlined, as text links are: a phone has no hover to show them (the owner,
   04.10.2026: «не понятно, что на это можно нажать»). The phone's icon on a phone is a framed button. */
.business .biz-bar-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; color: var(--s-ink); white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--s-edge);
}
.business .biz-bar-links a:hover { text-decoration-color: currentColor; }
.business .biz-call { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.business .biz-call .icon { display: none; }
/* A phone: the name is the headline right under the bar — the bar keeps the phone, as an icon, and «Мои записи». */
@media (max-width: 599px) {
  .business .biz-bar { min-height: 56px; margin-bottom: var(--s4); }
  .business .biz-brand { display: none; }
  .business .biz-bar-links { flex: 1 1 auto; justify-content: space-between; }
  .business .biz-bar-links a.biz-call { justify-content: center; min-width: 44px; margin-left: 0; border: 1px solid var(--s-edge); border-radius: var(--radius); text-decoration: none; }
  .business .biz-call .icon { display: block; }
  .business .biz-call span { display: none; }
}
/* The company's logo (Tenant.site_logo, square on white) left of its name; on a phone it stands for the name, which is
   the headline right under the bar — the name stays the link's words for a screen reader. */
.business .biz-logo { flex: none; width: 36px; height: 36px; margin-right: 12px; border: 1px solid var(--s-line); border-radius: 8px; background: #fff; object-fit: contain; }
@media (max-width: 599px) {
  .business .biz-brand.with-logo { display: inline-flex; flex: none; justify-content: center; min-width: 44px; }
  .business .biz-brand.with-logo .biz-logo { margin-right: 0; }
  .business .biz-brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* --- the page: the company on the left, what it offers on the right ------------------------------------------------ */
@media (min-width: 1024px) {
  .business .biz-page { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s6); align-items: start; }
}
/* On a screen tall enough for the whole of it, the company and its one action stay while the list scrolls: the booking
   is never a scroll away (the floating ask then stays aside — the hero's own button is on the screen). A cover makes
   the column too tall to hold. */
@media (min-width: 1024px) and (min-height: 760px) {
  .business .biz-hero:not(.with-cover) { position: sticky; top: var(--s5); }
}

/* --- the hero: no card — the name in the serif, one lime button ---------------------------------------------------- */
.business .biz-hero { position: relative; margin: 0 0 var(--s5); padding: 0; border-radius: 0; background: none; color: var(--s-ink); overflow: visible; container-type: inline-size; }
.business .biz-hero.with-cover { display: block; min-height: 0; }
.business .biz-hero.with-cover::before {
  content: ""; display: block; aspect-ratio: 16 / 9; margin: 0 0 var(--s3); border-radius: var(--radius);
  background: var(--cover) center / cover no-repeat, var(--s-sunken);
}
.business .biz-hero-text { position: static; }
.business .biz .biz-kicker { margin: 0 0 var(--s2); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--s-muted); text-wrap: balance; }
/* A phone keeps today's part alone («Онлайн-запись · » steps aside): it starts the line with a capital. */
.business .biz .biz-kicker::first-letter { text-transform: uppercase; }
/* The name sized by its column (cqi): the first word of its quotation is held to the next one (business_page.py
   held_name), so «Янтарная улыбка» must fit the column whole — 9.5 em in the serif — from a 320 px phone to the
   computer's left column, never broken inside a word. */
.business .biz-hero h1 { margin: 0 0 var(--s2) -2px; font-size: clamp(28px, 7vw + 4px, 56px); font-size: clamp(28px, 10cqi, 56px); line-height: 1.06; color: var(--s-ink); hyphens: manual; }
.business .biz .biz-tagline { max-width: 34em; margin: 0 0 var(--s3); font-size: 18px; line-height: 1.5; color: var(--s-muted); }
/* The owner's own heading (Tenant.site_headline, app/site_looks.py): the name a quiet line over it, the marked word in
   the pick's colour, upright — a medium italic is a salon's and a clinic's alone (company-site.css). */
.business .biz .site-name { margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--s-muted); }
.business .site-headline em { font-style: normal; color: var(--s-pick); }
/* A friend's gift: what the visitor came for, above the company's name — the hero's one marked line. */
.business .biz .biz-gift { display: inline-block; margin: 0 0 var(--s2); padding: 2px 6px; border: 0; border-radius: 2px; background: var(--s-hi); color: var(--s-ink); font-size: 16px; font-weight: 600; line-height: 1.4; }
/* The seasonal pause (app/seasonal_pause.py): the hero's one line instead of the booking, and a pause set for later. */
.business .biz .biz-pause { max-width: 34em; margin: 0 0 var(--s3); padding: var(--s1) 0 var(--s1) var(--s2); border: 0; border-left: 3px solid var(--s-pick); border-radius: 0; background: none; color: var(--s-ink); font-size: 18px; font-weight: 600; line-height: 1.45; }
.business .biz .biz-pause-note { max-width: 34em; margin: calc(-1 * var(--s1)) 0 var(--s3); font-size: 15px; color: var(--s-muted); }

.business .biz-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s2); }
.business .control-main .biz-actions button.btn.primary,
.business .control-main .biz-sticky button.btn.primary {
  min-height: 52px; padding: 0 var(--s4); border: 0; border-radius: var(--radius); background: var(--s-accent); color: var(--s-accent-ink);
  font: 600 17px/1.2 var(--sans); cursor: pointer;
}
.business .control-main .biz-actions button.btn.primary:hover,
.business .control-main .biz-sticky button.btn.primary:hover { background: var(--s-accent-hover); filter: none; }
/* The messengers: one quiet line under the booking, «или в Telegram · MAX». */
/* The proof: one quiet line over the booking — the stars in ink on the highlighter, the average bold, the count muted. */
.business .biz .biz-proof { margin: 0 0 var(--s3); font-size: 15px; color: var(--s-muted); }
.business .biz-proof .stars { margin-right: 6px; }
/* Stars wherever they stand (the hero's proof, each review): ★ in ink on the home page's highlighter — its hero's
   «вечером, в выходные», a band from 60 % to 92 % of the line (the owner, 04.10.2026: lime stars were lost on the paper).
   Five places always: a four's missing star stays faint ink on the same band. */
.business .biz .stars {
  display: inline-block; padding: 0 2px; letter-spacing: 2px; white-space: nowrap; color: var(--s-ink);
  background: linear-gradient(transparent 60%, var(--s-hi) 60%, var(--s-hi) 92%, transparent 92%);
}
.business .biz-proof b { font-family: var(--mono); font-weight: 600; color: var(--s-ink); }
.business .biz .biz-also { margin: 0 0 var(--s2); font-size: 15px; color: var(--s-muted); }
.business .biz-also a {
  display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--s-ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--s-edge);
}
.business .biz-also a:hover { text-decoration-color: currentColor; }
/* The nearest free time: a real time, one tap — in mono over the home page's highlighter, underlined as a link is. */
.business .biz .biz-next { margin: var(--s3) 0 var(--s2); font-size: 15px; line-height: 1.6; color: var(--s-muted); }
.business .biz-next b {
  padding: 0 3px; font-family: var(--mono); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--s-ink);
  background: linear-gradient(transparent 52%, var(--s-hi) 52%); -webkit-box-decoration-break: clone; box-decoration-break: clone;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--s-pick);
}
.business .biz-next a,
.business .control-main .biz-next button.biz-next-link:not(.btn):not(.logout) {
  display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; padding: 0; border: 0; border-radius: 0;
  background: none; color: var(--s-ink); font: inherit; text-decoration: none; cursor: pointer;
}
.business .biz-next a:hover b,
.business .control-main .biz-next button.biz-next-link:not(.btn):not(.logout):hover b { background-image: linear-gradient(transparent 25%, var(--s-hi) 25%); }
/* Three reasons, a ruled list under the action; a wrapped line starts under the words, not under the tick. */
.business .biz .biz-reasons { display: grid; gap: var(--s1); margin: var(--s3) 0 0; padding: var(--s2) 0 0; border-top: 1px solid var(--s-line); font-size: 15px; color: var(--s-muted); }
.business .biz-reasons span { padding-left: 1.2em; text-indent: -1.2em; }

/* --- a network's locations (app/branches.py): under the company's name the address of this one and «Сменить филиал»,
   one line that keeps the booking on a phone's first screen; opened, the locations as a ruled list — the address, today's
   hours, the nearest free time in mono — each row a link to its page with «›» at its edge, this one marked «вы здесь». */
.business .control-main details.biz-branch { margin: calc(-1 * var(--s1)) 0 var(--s2); padding: 0; border: 0; border-radius: 0; background: none; }
.business .control-main details.biz-branch > summary {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s2); min-height: 44px; margin: 0; padding: 0;
  list-style: none; cursor: pointer; font: 400 16px/1.4 var(--sans); color: var(--s-ink);
}
.business .control-main details.biz-branch > summary::-webkit-details-marker { display: none; }
.business .biz-branch-here { font-weight: 600; }
.business .biz-branch-switch {
  white-space: nowrap; color: var(--s-ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--s-edge);
}
.business details.biz-branch > summary:hover .biz-branch-switch { text-decoration-color: currentColor; }
.business .biz-branches { list-style: none; margin: var(--s1) 0 0; padding: 0; border-top: 1px solid var(--s-ink); }
.business .biz-branches li { position: relative; border-bottom: 1px solid var(--s-line); }
.business .biz-branches li:last-child { border-bottom: 0; }
.business .biz-branches li.here,
.business .biz-branches li > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s2); padding: 12px 28px 12px 0; }
.business .biz-branches li.here { padding-right: 0; }
.business .biz-branches li > a { color: var(--s-ink); text-decoration: none; }
.business .biz-branches li > a::after {
  content: "›" / ""; position: absolute; top: 50%; right: 2px; transform: translateY(-50%); pointer-events: none;
  font: 600 24px/1 var(--serif); color: var(--s-ink);
}
@media (hover: hover) {
  .business .biz-branches li > a:hover { background: var(--row-hover); box-shadow: -12px 0 0 var(--row-hover), 12px 0 0 var(--row-hover); }
  .business .biz-branches li > a:hover .biz-branch-place { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}
.business .biz-branch-place { grid-column: 1; font-size: 16px; font-weight: 600; line-height: 1.4; }
.business .biz-branches small { grid-column: 1 / -1; font-size: 14px; line-height: 20px; color: var(--s-muted); }
.business .biz-branches small b { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--s-ink); }
.business .biz-branch-tag {
  grid-column: 2; grid-row: 1; align-self: start; padding: 0 6px; border-radius: 2px; background: var(--s-hi);
  font-size: 13px; line-height: 22px; color: var(--s-ink); white-space: nowrap;
}

/* --- services and prices: a ruled list — the name and the price in mono at the rule's right end, how long and the
   nearest free time under the name ------------------------------------------------------------------------------- */
.business .biz-section { margin: 0 0 var(--s5); }
.business .biz-section h2 { margin: 0 0 var(--s3); font-size: 26px; line-height: 1.15; }
.business .biz-section h3 { margin: var(--s4) 0 var(--s1); font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; text-transform: none; color: var(--s-ink); }
.business .biz-section h2 + h3 { margin-top: 0; }
.business .biz-services { list-style: none; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--s-ink); border-radius: 0; background: none; overflow: visible; }
.business .biz-services li { position: relative; border-bottom: 1px solid var(--s-line); }
.business .biz-services li + li { border-top: 0; }
/* The last row ends its list: the next group's rule, the next section's or the footer's follows — never a second one. */
.business .biz-services li:last-child { border-bottom: 0; }
/* The row is the service's button, stretched over the whole row by its ::after; the nearest time, a link of its own,
   stays on top of it. «›» at the row's right edge, in the middle of its height, says the row opens the booking — on a
   phone too, where nothing hovers (the owner, 04.10.2026: «не понятно, что на это можно нажать»); Lora draws it, as
   a single guillemet. Under the pointer the row takes a faint ground (its shadow carries it past the words' edges)
   and the name its underline. */
.business .biz-services li { padding-right: 28px; }
.business .biz-services li::after {
  content: "›" / ""; position: absolute; top: 50%; right: 2px; transform: translateY(-50%); pointer-events: none;
  font: 600 24px/1 var(--serif); color: var(--s-ink);
}
@media (hover: hover) {
  .business .biz-services li:hover { background: var(--row-hover); box-shadow: -12px 0 0 var(--row-hover), 12px 0 0 var(--row-hover); }
}
/* The name at the left, the price at the right; a name's longest word and the price that do not fit one line on a
   narrow phone («Профессиональная гигиена · от 4 500 ₽» at 320 px) put the price under the name, at the right, rather
   than cut the word (the owner, 04.10.2026). */
.business .control-main .biz-services button.svc:not(.btn) {
  display: flex; flex-wrap: wrap; column-gap: var(--s2); align-items: baseline;
  width: 100%; min-height: 44px; margin: 0; padding: var(--s2) 0 2px; border: 0; border-radius: 0; background: none;
  color: var(--s-ink); font: inherit; text-align: left; cursor: pointer;
}
.business .control-main .biz-services button.svc:not(.btn)::after { content: ""; position: absolute; inset: 0; }
.business .control-main .biz-services button.svc:not(.btn):hover,
.business .control-main .biz-services button.svc:not(.btn):focus-visible { background: none; outline: none; }
.business .control-main .biz-services button.svc:not(.btn):focus-visible::after { outline: 2px solid var(--s-pick); outline-offset: -2px; }
.business .control-main .biz-services button.svc:not(.btn) span { flex: 1 1 0; font-size: 17px; font-weight: 500; line-height: 1.35; }
.business .control-main .biz-services li:hover button.svc:not(.btn) span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.business .control-main .biz-services button.svc:not(.btn) b {
  margin-left: auto; font-family: var(--mono); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap; color: var(--s-ink);
}
.business .control-main .biz-services button.svc:not(.btn) b.words { font-family: var(--sans); font-size: 15px; font-weight: 500; }
/* How long, then the nearest free time: «45 мин · завтра 10:00», the time a mono link with a thumb's target. */
.business .biz .svc-meta { margin: 0; padding: 0 0 var(--s2); font-size: 14px; line-height: 20px; color: var(--s-muted); }
.business .svc-meta small { font-size: 14px; color: var(--s-muted); }
.business .biz-services a.svc-next {
  position: relative; z-index: 1; display: inline-block; margin: -12px -4px; padding: 12px 4px;
  font-family: var(--mono); font-size: 14px; font-weight: 500; line-height: 20px; font-variant-numeric: tabular-nums; color: var(--s-ink); white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--s-edge);
}
.business .biz-services a.svc-next:hover,
.business .biz-services a.svc-next:focus-visible { text-decoration-color: currentColor; }
/* A phone: two lines of a name and its meta in about 90 px. */
@media (max-width: 599px) {
  .business .control-main .biz-services button.svc:not(.btn) { padding-top: 12px; }
  .business .control-main .biz-services button.svc:not(.btn) span { font-size: 16px; }
  .business .biz .svc-meta { padding-bottom: 12px; }
}
/* One catalogue picture beside a service: at the row's left, the row's words beside it. */
.business .biz-services li:has(> .svc.has-photo) { min-height: 96px; padding-left: 88px; }
.business .biz-services .svc .service-photo { position: absolute; left: 0; top: var(--s2); width: 72px; height: 64px; object-fit: cover; border-radius: 6px; }
@media (max-width: 460px) {
  .business .biz-services li:has(> .svc.has-photo) { min-height: 80px; padding-left: 68px; }
  .business .biz-services .svc .service-photo { top: 12px; width: 56px; height: 56px; }
}

/* «Освободилось время»: a journal's rows right under the hero — the time an outlined slot (the page's one lime is the
   booking), then the day, the service and who; the whole row takes the time, and says so with «›» at its edge as a
   service's row does. */
.business .biz-windows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--s-ink); }
.business .biz-windows li { position: relative; display: flex; align-items: center; gap: var(--s2); padding: 10px 28px 10px 0; border-bottom: 1px solid var(--s-line); }
.business .biz-windows li::after {
  content: "›" / ""; position: absolute; top: 50%; right: 2px; transform: translateY(-50%); pointer-events: none;
  font: 600 24px/1 var(--serif); color: var(--s-ink);
}
@media (hover: hover) {
  .business .biz-windows li:hover { background: var(--row-hover); box-shadow: -12px 0 0 var(--row-hover), 12px 0 0 var(--row-hover); }
  .business .biz-windows li:hover .biz-window-what { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}
.business .biz-windows li:last-child { border-bottom: 0; }
.business .biz-windows a.biz-slot {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--s-edge); border-radius: 6px; background: var(--s-surface); color: var(--s-ink);
  font: 500 16px/1 var(--mono); font-variant-numeric: tabular-nums; text-decoration: none;
}
.business .biz-windows a.biz-slot::after { content: ""; position: absolute; inset: 0; }
.business .biz-windows li:hover a.biz-slot,
.business .biz-windows a.biz-slot:focus-visible { border-color: var(--s-ink); background: var(--s-sunken); }
.business .biz .biz-window-what { font-size: 15px; line-height: 1.4; color: var(--s-ink); }
.business .biz .biz-windows-more { margin: var(--s2) 0 0; font-size: 15px; }
.business .biz-windows-more a {
  display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--s-ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--s-edge);
}

/* «Акции» (app/promos.py): right under the first screen, a ruled list as the services' — the title in the serif with the
   benefit in mono at the rule's right end, the terms, «до 15 ноября · услуга» and «Записаться по акции», a framed button
   (the page's one lime is its booking); a clinic's warning under the terms. A row has no ground under the pointer: only
   its button takes the tap, so only the button answers. */
.business .biz-promos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--s-ink); }
.business .biz-promos li { padding: var(--s2) 0 20px; border-bottom: 1px solid var(--s-line); }
.business .biz-promos li:last-child { border-bottom: 0; }
/* The benefit keeps the title's line at any width: the title wraps beside it, a long benefit wraps in its own column.
   A number in mono, words («мойка в подарок») in the page's letters — as a price is. */
.business .biz-promo-head { display: flex; align-items: baseline; column-gap: var(--s2); }
.business .biz-section .biz-promo-head h3 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 19px; line-height: 1.3; }
.business .biz-promo-benefit {
  flex: 0 1 auto; max-width: 45%; margin-left: auto; text-align: right; font-family: var(--mono); font-size: 16px;
  font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--s-ink);
}
.business .biz-promo-benefit.words { font-family: var(--sans); }
.business .biz .biz-promo-terms { max-width: 40em; margin: var(--s1) 0 0; font-size: 15px; line-height: 1.5; color: var(--s-ink); }
.business .biz .biz-promo-warning { max-width: 40em; margin: var(--s1) 0 0; font-size: 14px; line-height: 1.45; color: var(--s-ink); }
.business .biz .biz-promo-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s2); margin: 12px 0 0;
}
.business .biz-promo-when { font-size: 14px; line-height: 1.4; color: var(--s-muted); }
.business .control-main button.biz-promo-book:not(.btn):not(.logout):not(.delete-row),
.business .control-main a.biz-promo-book {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 0 var(--s2);
  border: 1px solid var(--s-ink); border-radius: 6px; background: var(--s-surface); color: var(--s-ink);
  font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer;
}
.business .control-main button.biz-promo-book:not(.btn):not(.logout):not(.delete-row):hover,
.business .control-main a.biz-promo-book:hover { background: var(--s-sunken); }

/* --- the folds: ruled rows, the title in the serif and its key fact beside it -------------------------------------- */
.business .control-main details.biz-fold { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--s-line); border-radius: 0; background: none; }
.business .control-main details.biz-fold > summary {
  list-style: none; display: flex; align-items: center; gap: var(--s2); min-height: 64px; margin: 0; padding: var(--s2) 0;
  cursor: pointer; font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--s-ink);
}
.business .control-main details.biz-fold > summary::-webkit-details-marker { display: none; }
.business .control-main details.biz-fold > summary small { margin-right: var(--s1); font-family: var(--sans); font-size: 15px; font-weight: 400; color: var(--s-muted); }
.business .control-main details.biz-fold > summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-size: 20px; font-weight: 500; line-height: 1; color: var(--s-muted); }
.business .control-main details.biz-fold[open] > summary::after { content: "–"; }
.business .control-main details.biz-fold[open] > summary { margin-bottom: 0; }
.business .biz-fold-body { padding: 0 0 var(--s3); }
/* The team inside its fold: rows like the services (a tap books with that specialist), their nearest time in mono. */
.business .biz-fold-body .biz-services.biz-people { margin: 0; border-top: 0; }
.business .biz-fold-body .biz-services.biz-people li:last-child { border-bottom: 0; }
.business .control-main .biz-services.biz-people button.svc:not(.btn) { padding: 12px 0; row-gap: 2px; }
.business .control-main .biz-services.biz-people button.svc:not(.btn) small { order: 1; flex-basis: 100%; font-size: 14px; color: var(--s-muted); }
.business .control-main .biz-services button.svc:not(.btn) b.who-free { padding: 0; border-radius: 0; background: none; color: var(--s-ink); font-size: 14px; }
/* A doctor's «Образование и квалификация»: a muted line under the role, the row's tap still books with them. */
.business .biz .biz-people .who-education { margin: -6px 0 0; padding: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--s-muted); }
/* Questions: a ruled list of their own folds. */
.business .control-main .biz-fold-body details { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--s-line); border-radius: 0; background: none; }
.business .control-main .biz-fold-body details:first-of-type { border-top: 0; }
.business .control-main .biz-fold-body summary { display: flex; align-items: center; gap: var(--s2); min-height: 44px; margin: 0; padding: var(--s1) 0; cursor: pointer; font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--s-ink); list-style: none; }
.business .control-main .biz-fold-body summary::-webkit-details-marker { display: none; }
/* A question opens as the folds do: «+» at its edge, «–» once open. */
.business .control-main .biz-fold-body summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-size: 18px; font-weight: 500; line-height: 1; color: var(--s-muted); }
.business .control-main .biz-fold-body details[open] > summary::after { content: "–"; }
.business .biz .biz-fold-body details p { margin: 0 0 var(--s2); font-size: 15px; line-height: 1.6; color: var(--s-muted); }
.business .biz .biz-fold-body > p { margin: 0 0 var(--s1); font-size: 16px; line-height: 1.6; color: var(--s-ink); }
/* A link in a fold's words is ink and underlined; a button there keeps its own words' colour (the memberships' one
   was ink on ink on production, v0.109.0). */
.business .biz-fold-body > p a:not(.btn) { color: var(--s-ink); text-underline-offset: 4px; }
.business .biz-fold-body > p a[href^="tel:"] { font-family: var(--mono); font-size: 15px; }
.business .biz .biz-fold-body .muted { margin: var(--s2) 0 0; font-size: 14px; color: var(--s-muted); }
/* Hours: a ruled table, the times in mono on the right, today's row in bold. */
.business .biz-hours { width: 100%; border-collapse: collapse; font-size: 15px; }
.business .biz-hours td { padding: var(--s1) 0; border: 0; border-top: 1px solid var(--s-line); color: var(--s-ink); }
.business .biz-hours tr:first-child td { border-top: 0; }
.business .biz-hours td + td { text-align: right; white-space: nowrap; font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.business .biz-hours tr.today td { font-weight: 600; }
/* «Расписание занятий»: a class a line; one with a place books it in a tap, a full one opens its waiting list. */
.business .biz-timetable { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.business .biz-timetable li { position: relative; padding: 0; border-top: 1px solid var(--s-line); }
.business .biz-timetable li:has(> a) { padding-right: 28px; }
.business .biz-timetable li:has(> a)::after {
  content: "›" / ""; position: absolute; top: 50%; right: 2px; transform: translateY(-50%); pointer-events: none;
  font: 600 24px/1 var(--serif); color: var(--s-ink);
}
.business .biz-timetable li:first-child { border-top: 0; }
.business .biz-timetable li > :is(a, span) { display: flex; align-items: center; flex-wrap: wrap; min-height: 44px; padding: 4px 0; color: var(--s-ink); }
.business .biz-timetable a.biz-class { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--s-edge); }
.business .biz-timetable a.biz-class:hover { text-decoration-color: currentColor; }
.business .biz-timetable small { margin-left: var(--s1); color: #8a4b3a; font-weight: 600; }
/* What customers said, with their consent: their words upright in «ёлочки», as the home page quotes a client (no italic:
   the owner, 04.10.2026); the stars in ink on the home page's highlighter, the missing ones faint on the same band. */
/* A ruled list (business_page.review_quotes, the audit of 08.10.2026): over the words the mark, the first name and the
   visit's service and month («Маникюр · сентябрь 2026»); a phone shows three, then «Показать ещё 3 отзыва». */
.business .biz-reviews { list-style: none; margin: 0; padding: 0; }
.business .biz-review { margin: 0; padding: var(--s2) 0; border: 0; border-top: 1px solid var(--s-line); border-radius: 0; background: none; }
.business .biz-review:first-child { padding-top: 0; border-top: 0; }
.business .biz-review:focus { outline: none; }
.business .biz .biz-review-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; font-size: 15px; line-height: 1.5; }
.business .biz-review .stars { font-size: 15px; }
.business .biz-review .stars .off { color: color-mix(in srgb, var(--s-ink) 26%, transparent); }
.business .biz-review b { font-size: 15px; font-weight: 600; color: var(--s-ink); }
.business .biz-review-when { font-size: 14px; color: var(--s-muted); }
.business .biz-review blockquote { margin: var(--s1) 0 0; padding: 0; border: 0; }
.business .biz .biz-review blockquote p { margin: 0; font-family: var(--sans); font-size: 17px; font-weight: 400; line-height: 1.5; color: var(--s-ink); }
.business .biz .biz-review-reply { margin: var(--s1) 0 0; padding-left: 12px; border-left: 2px solid var(--s-line); font-size: 15px; line-height: 1.5; color: var(--s-muted); }
.business .biz .biz-review-reply b { font-size: 15px; font-weight: 600; color: var(--s-ink); }
.business .biz .biz-reviews-more { margin: var(--s2) 0 0; }
.business .biz .biz-reviews-note { margin: var(--s2) 0 0; font-size: 14px; color: var(--s-muted); }
.business .control-main button.site-book:not(.btn) { min-height: 44px; padding: 10px 16px; border: 1px solid var(--s-pick); border-radius: 8px; background: var(--s-surface); color: var(--s-link); font: 600 15px/1.3 var(--sans); }
@media (max-width: 699px) {
  .business .biz-reviews:not(.all) > .later { display: none; }
}
@media (min-width: 700px) {
  .business .biz .biz-reviews-more { display: none; }
}
/* A gift certificate: the sums as frames in mono, the chosen one forest. */
.business .biz .biz-cert p { margin: 0 0 var(--s2); font-size: 15px; color: var(--s-muted); }
.business .biz-sums { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0 0 var(--s2); }
.business .biz-sum { position: relative; }
.business .biz-sum input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.business .biz-sum span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s2); border: 1px solid var(--s-line); border-radius: 6px; background: var(--s-surface); font-family: var(--mono); font-size: 15px; font-weight: 500; cursor: pointer; }
.business .biz-sum input:checked + span { border-color: var(--s-pick); background: var(--s-pick); color: var(--s-pick-ink); }
.business .biz-sum input:focus-visible + span { outline: 2px solid var(--s-pick); outline-offset: 2px; }
.business .control-main .biz-cert label { display: block; margin: 0 0 var(--s2); font-size: 14px; font-weight: 600; color: var(--s-ink); }
.business .control-main .biz-cert input:not([type="radio"]):not(.sr-only) { display: block; width: 100%; min-height: 44px; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--s-line); border-radius: 6px; background: var(--s-surface); font: inherit; font-size: 16px; }
/* Memberships on sale: a ruled list. */
.business .biz-memberships { list-style: none; margin: 0 0 var(--s2); padding: 0; }
.business .biz-memberships li { padding: var(--s1) 0; border-top: 1px solid var(--s-line); }
.business .biz-memberships li:first-child { border-top: 0; }

/* --- the footer: our brand, quiet --------------------------------------------------------------------------------- */
.business .biz-footer { margin: var(--s6) 0 0; padding: var(--s3) 0 0; border-top: 1px solid var(--s-line); text-align: left; font-size: 14px; color: var(--s-muted); }
/* A real company's page is the company's: our advert is quiet words, the page's one lime is its booking. Our name is a
   link with the robot before it (brand.css .brandmark), grey like the words — darker under the pointer or the keyboard,
   never lime; the two hold together on one line. */
.business .biz-footer :is(a.biz-ad, a.biz-platform) { color: var(--s-muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--s-line); }
.business .biz-footer :is(a.biz-ad, a.biz-platform):hover { color: var(--s-ink); text-decoration-color: currentColor; }
.business .biz-footer a.biz-platform { white-space: nowrap; }
.business .biz-footer .biz-platform .brandmark { display: inline-block; width: 1.3em; height: 1.3em; margin-right: .3em; vertical-align: -.33em; filter: grayscale(1); opacity: .6; }
.business .biz-footer .biz-platform:is(:hover, :focus-visible) .brandmark { opacity: 1; }
/* The seller's requisites and a clinic's licence (app/business_site.py): small, before our line. */
.business .biz .biz-legal { margin: 0 0 var(--s2); font-size: 14px; line-height: 1.5; color: var(--s-muted); }
.business .biz-legal-number { white-space: nowrap; }
/* A demo's journal and examples: here on a phone, where the strip keeps its other side and the free start alone. */
.business .biz-footer-more { display: none; }
@media (max-width: 599px) {
  .business .biz-footer-more { display: block; margin-top: var(--s1); }
  .business .biz-footer-more a { display: inline-block; padding: 12px 0; color: var(--s-ink); }
}

/* --- the way in when the panel is closed: a floating button on a computer, a sticky bar below 1024 px ------------- */
/* On a computer it stands at the left column's foot, where nothing is left under it once the hero has scrolled away
   (on a screen tall enough the hero never does, and the button stays aside). */
.business .control-main button.biz-fab:not(.btn):not(.logout) {
  position: fixed; left: max(var(--s5), calc((100vw - 1200px) / 2 + var(--s5))); bottom: var(--s3); z-index: 40;
  min-height: 52px; padding: 0 var(--s3); border: 0; border-radius: var(--radius); background: var(--s-accent); color: var(--s-accent-ink);
  font: 600 16px/1.2 var(--sans); box-shadow: 0 8px 24px rgba(23, 32, 26, .18); cursor: pointer;
}
.business .control-main button.biz-fab:not(.btn):not(.logout):hover { background: var(--s-accent-hover); }
/* «Задать вопрос» in a seasonal pause: the hero's «Сообщить, когда откроется» is the screen's lime ask. */
.business .control-main button.biz-fab.quiet:not(.btn):not(.logout) { border: 1px solid var(--s-ink); background: var(--s-surface); }
.business .control-main button.biz-fab.quiet:not(.btn):not(.logout):hover { background: var(--s-sunken); }
.biz-sticky { display: none; }
body.chat-open .biz-fab, body.chat-open .biz-sticky { display: none; }
/* Both step aside while the hero's own button is on the screen (business_page.py SCRIPT): one ask at a time. */
.biz-sticky, .control-main button.biz-fab { transition: transform .2s, opacity .2s, visibility .2s; }
.biz-sticky.away { transform: translateY(110%); visibility: hidden; pointer-events: none; }
.business .control-main button.biz-fab.away { transform: translateY(150%); opacity: 0; pointer-events: none; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .biz-sticky, .control-main button.biz-fab { transition: none; } }

@media (max-width: 1023px) {
  .business .control-main.biz { max-width: 768px; padding: 0 var(--s3) var(--s7); }
  .business .biz-section h2 { font-size: 28px; }
  .business .control-main button.biz-fab:not(.btn):not(.logout) { display: none; }
  .business .biz-sticky {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px var(--s2) calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--s-line); background: var(--s-surface);
  }
  .business .control-main .biz-sticky button.btn.primary { display: block; width: 100%; max-width: 720px; margin: 0 auto; }
}
/* A phone: the hero's ask spans the width, the kicker keeps only today's part; a fold's key fact goes under its title. */
@media (max-width: 599px) {
  .business .control-main.biz { padding-inline: var(--s2); }
  .business .control-main details.biz-fold > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s2); row-gap: 2px; }
  .business .control-main details.biz-fold > summary small { grid-column: 1; margin: 0; }
  .business .control-main details.biz-fold > summary::after { grid-column: 2; grid-row: 1 / span 2; }
  .business .biz .biz-tagline { font-size: 17px; }
}
@media (max-width: 480px) {
  .business .biz-actions .btn.primary { flex: 1 1 100%; justify-content: center; }
}

/* --- the chat panel: the booking as a conversation, on the page's paper -------------------------------------------- */
/* Scoped to the panel: it is outside <main> on the page and the whole page in embed. Bubbles on the sheet, the
   visitor's own in forest; the keyboard's buttons framed, the times and the prices in mono. */
.chat-panel {
  position: fixed; top: 0; right: 0; z-index: 60; display: flex; flex-direction: column; width: min(440px, 100vw); height: 100dvh;
  border-left: 1px solid var(--s-line); background: var(--s-bg); box-shadow: -16px 0 48px rgba(23, 32, 26, .14);
  animation: chat-in .22s ease-out; font-size: 15px;
}
.chat-panel[hidden] { display: none; }
@keyframes chat-in { from { transform: translateX(28px); opacity: 0; } }
@keyframes chat-pop { from { transform: translateY(6px); opacity: 0; } }
@keyframes chat-dots { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-4px); opacity: 1; } }
.chat-panel .chat-top { --s-ink: var(--s-scene-ink); --s-muted: var(--s-scene-muted); --s-line: var(--s-scene-line); flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px var(--s2); border-bottom: 1px solid var(--s-line); background: var(--s-scene); color: var(--s-ink); }
.chat-avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--s-accent); color: var(--s-accent-ink); font-family: var(--serif); font-size: 19px; font-weight: 600; }
.chat-avatar.with-logo { overflow: hidden; background: #fff; }  /* the company's logo instead of its first letter */
.chat-avatar.with-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.chat-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-panel .chat-top .chat-title {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1.25;
}
.chat-state { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--s-muted); }
/* The dot «на связи 24» of the brand: lime in a forest ring. */
.chat-state .dot { width: 8px; height: 8px; margin: 0; background: var(--lime); box-shadow: 0 0 0 1.5px var(--s-scene); }
.chat-panel button.chat-close { flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--s-line); border-radius: var(--radius); background: transparent; color: var(--s-ink); font-size: 15px; cursor: pointer; }
.chat-panel button.chat-close:hover { border-color: var(--s-ink); }
.chat-panel .chat-top :focus-visible { outline-color: var(--s-scene-accent); }
@media (max-width: 760px) { .chat-panel button.chat-close { width: 44px; height: 44px; } }
/* A demo's way to the stand (app/demo_stand.py): under the header, a quiet button and the words of what it shows. */
.chat-panel .chat-stand { display: flex; align-items: center; gap: 12px; padding: var(--s1) var(--s2); border-bottom: 1px solid var(--s-line); background: var(--s-surface); font-size: 13px; color: var(--s-muted); }
.chat-panel .chat-stand a.btn.small { flex: none; min-height: 32px; padding: 0 12px; white-space: nowrap; border: 1px solid var(--s-ink); border-radius: 6px; background: transparent; color: var(--s-ink); font-size: 13px; font-weight: 600; transform: none; }
.chat-panel .chat-stand a.btn.small:hover { background: var(--s-sunken); transform: none; }
@media (pointer: coarse), (max-width: 760px) { .chat-panel .chat-stand a.btn.small { min-height: 44px; } }
@media (max-width: 599px) { .chat-panel .chat-stand span { display: none; } }
.chat-panel #chat { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--s1); min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: var(--s2) var(--s2) 12px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .chat-panel #chat { scroll-behavior: auto; } }
.chat-panel .chat-message {
  align-self: flex-start; max-width: 86%; margin: 0; padding: 11px 14px; border: 1px solid var(--s-line); border-radius: 12px 12px 12px 4px;
  background: var(--s-surface); color: var(--s-ink); box-shadow: none; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
  animation: chat-pop .18s ease-out;
}
.chat-panel .chat-message + .chat-message:not(.mine) { border-top-left-radius: 6px; }
.chat-panel .chat-message .chat-title { display: block; margin: 0 0 4px; font-weight: 600; line-height: 1.35; }
.chat-panel .chat-message a { color: var(--s-link); font-weight: 600; }
.chat-panel .chat-message.mine { align-self: flex-end; border-color: var(--s-hi); border-radius: 12px 12px 4px 12px; background: var(--s-hi); color: var(--s-ink); }
.chat-panel .chat-message.mine a { color: var(--s-ink); }
.chat-panel .chat-message.system { max-width: 100%; border: 1px dashed var(--s-edge); background: transparent; color: var(--s-ink); font-size: 14px; }
.chat-panel .chat-message.system .chat-title { display: none; }
.chat-panel .chat-message.system::before { content: "Вид администратора"; display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--s-muted); }
/* «✓ Вы записаны»: the moment of booking — a forest edge and a tick drawn once. */
.chat-panel .chat-message.done { border-left: 3px solid var(--s-pick); }
.chat-panel .chat-message.done .chat-title { display: flex; align-items: center; gap: 8px; color: var(--s-link); }
.chat-panel .chat-message.done .tick { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 6px; background: var(--s-pick); }
.chat-panel .chat-message.done .tick path { fill: none; stroke: var(--s-pick-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; animation: chat-tick .4s ease-out .1s forwards; }
@keyframes chat-tick { to { stroke-dashoffset: 0; } }
/* A card's quiet last line (app/channels/web.py with_footnote): where the booking came through and the way to «Мои
   записи», under a hairline — smaller muted words after the card's own, no lime, no button. */
.chat-panel .chat-message .chat-foot { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--s-line); color: var(--s-muted); font-size: 13px; line-height: 1.45; }
.chat-panel .chat-message .chat-foot a { color: inherit; font-weight: 400; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--s-edge); }
.chat-panel .chat-message .chat-foot a:hover { color: var(--s-ink); text-decoration-color: currentColor; }
/* A demo's closing card (the peak): the lime of the free start its button leads to. */
.chat-panel .chat-message.closing { border-left: 3px solid var(--lime-deep); }
.chat-panel .chat-message.closing .chat-title { color: var(--s-link); }
.chat-panel .chat-message.typing { min-height: 0; padding: 12px var(--s2); }
.chat-panel .typing .dots { display: inline-flex; gap: 4px; }
.chat-panel .typing .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--s-muted); animation: chat-dots 1.2s infinite ease-in-out; }
.chat-panel .typing .dots i:nth-child(2) { animation-delay: .15s; }
.chat-panel .typing .dots i:nth-child(3) { animation-delay: .3s; }
/* The keyboard under the last card: a row's buttons share its width, as in Telegram. */
.chat-panel #buttons { display: flex; flex-wrap: wrap; gap: var(--s1); max-width: 92%; padding: 0; }
.chat-panel #buttons:empty { display: none; }
.chat-panel .chat-row { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: var(--s1); width: 100%; }
.chat-panel .chat-row .chip { width: 100%; justify-content: center; text-align: center; }
.chat-panel .chat-row .chip.success { flex: none; }
/* A chip is outlined at 3:1 to the paper, so it reads as a button at a glance; the pointer fills it. */
.chat-panel .chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border: 1px solid var(--s-edge); border-radius: var(--radius);
  background: var(--s-surface); color: var(--s-ink); box-shadow: none; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.25;
  text-align: left; text-decoration: none; cursor: pointer; transition: background .12s, border-color .12s, transform .12s;
}
.chat-panel .chip:hover { border-color: var(--s-ink); background: var(--s-sunken); }
.chat-panel .chip:active { transform: translateY(1px); }
.chat-panel .chip:disabled { opacity: .55; cursor: progress; }
.chat-panel .chip.success { flex: 1 1 100%; justify-content: center; padding: 13px var(--s2); border-color: var(--s-accent); background: var(--s-accent); color: var(--s-accent-ink); font-size: 15px; font-weight: 600; }
.chat-panel .chip.success:hover { border-color: var(--s-accent-hover); background: var(--s-accent-hover); }
/* The chat inside the demos' stand (app/demo_stand.py): once the show's first booking has reached the company, the
   stand's header holds the free start in lime (site/assets/stand.js marks this page: .stand-asked) — the chat's own lime
   buttons, the demo's closing ones among them, turn forest: one lime ask on the screen. */
body.stand.stand-asked .chat-panel .chip.success { border-color: var(--s-pick); background-color: var(--s-pick); color: var(--s-pick-ink); }
body.stand.stand-asked .chat-panel .chip.success:hover { border-color: var(--s-pick-deep); background-color: var(--s-pick-deep); }
/* … and once a guided show of the landing is over, its bar at the stand's foot offers the free start and the set-up
   (.stand-finale): the closing card's own two ways step aside — one button, one name on the screen. */
body.stand.stand-finale .chat-panel a.chip:is([href*="/join?"], [href$="#lead"]) { display: none; }
.chat-panel .chip.primary { border-color: var(--s-pick); background: var(--s-pick); color: var(--s-pick-ink); }
.chat-panel .chip.primary:hover { border-color: var(--s-pick-deep); background: var(--s-pick-deep); }
.chat-panel .chip.danger { border-color: color-mix(in srgb, var(--s-alert) 30%, var(--s-surface)); color: var(--s-alert); }
.chat-panel .chip.danger:hover { border-color: var(--s-alert); background: color-mix(in srgb, var(--s-alert) 6%, var(--s-surface)); }
/* An option with its price: the name on the left, the price on the right with a gap kept — never under the name alone. */
.chat-panel .chip.row,
.chat-panel .chat-row .chip.row { display: grid; flex: 1 1 100%; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s2); align-items: baseline; justify-content: stretch; text-align: left; }
.chat-panel .chip.row b { font-family: var(--mono); font-size: 14px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--s-ink); }
.chat-panel .chip.time { flex: 0 0 calc(25% - 6px); justify-content: center; padding: 10px 6px; font-variant-numeric: tabular-nums; }
.chat-panel .chip.day { padding-inline: 6px; }  /* «Сегодня, 24 сентября»: one line in a two-column row */
/* «Завтра 09:00» on one line in a three-column row at 390 px, as «Завтра 10:00» beside it */
@media (max-width: 420px) { .chat-panel .chip.day, .chat-panel .chip.time { font-size: 13px; } }
/* A small phone: the keyboard takes the whole width, an option with its price keeps both readable; at 360 px and less
   the header's initial steps aside so the name and «отвечаем сразу» keep their lines. */
@media (max-width: 360px) { .chat-avatar { display: none; } .chat-state { font-size: 12px; } }
@media (max-width: 420px) {
  .chat-panel #buttons { max-width: 100%; }
  .chat-panel .chip.row { padding-inline: 12px; font-size: 14px; }
  .chat-panel .chip.row b { font-size: 13px; }
}
.chat-panel .chip.wide { flex: 1 1 100%; }
@media (max-width: 760px) { .chat-panel #buttons .chip { min-height: 44px; } }  /* a finger's tap target on a phone */
.chat-panel .chat-nav { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 2px 6px; margin-top: 2px; }
/* The ways back («‹ Главное меню», «Назад», «Отмена»): quiet words, underlined as text links are — a phone sees they
   are taps without a frame. */
.chat-panel .chip.nav {
  padding: 7px 8px; border-color: transparent; background: transparent; box-shadow: none; color: var(--s-muted);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--s-edge);
}
.chat-panel .chip.nav:hover { border-color: transparent; background: var(--s-sunken); }
/* In the demo the visitor is also the administrator: their buttons sit under the administrator's notice. */
.chat-panel .chat-buttons.own { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; margin: -2px 0 2px 6px; }
.chat-panel .chat-buttons.own .chip { padding: 8px 12px; font-size: 14px; }
/* The composer. */
.chat-panel #status { flex: 0 0 auto; margin: 0; padding: 6px var(--s2) 0; background: var(--s-surface); color: var(--s-alert); font-size: 13px; }
.chat-panel #status:empty { display: none; }
.chat-panel #form { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s1); padding: 10px 12px; border-top: 1px solid var(--s-line); background: var(--s-surface); }
.chat-panel #form input {
  flex: 1; box-sizing: border-box; min-width: 0; min-height: 44px; padding: 9px 14px; border: 1px solid var(--s-line); border-radius: var(--radius);
  background: var(--s-bg); color: var(--s-ink); font: inherit; font-size: 16px; line-height: 1.5;
}
.chat-panel #form input::placeholder { color: var(--s-muted); }
.chat-panel #form input:focus,
.chat-panel #form input:focus-visible { outline: none; border-color: var(--s-pick); background: var(--s-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-pick) 18%, transparent); }
.chat-panel #form button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius); background: var(--s-pick); color: var(--s-pick-ink); cursor: pointer; transition: background .12s, transform .12s; }
.chat-panel #form button:hover { background: var(--s-pick-deep); }
.chat-panel #form button:active { transform: scale(.96); }
.chat-panel #form button:disabled { opacity: .45; cursor: progress; }
.chat-panel .chat-note { flex: 0 0 auto; margin: 0; padding: 0 var(--s2) calc(8px + env(safe-area-inset-bottom)); background: var(--s-surface); color: var(--s-muted); font-size: 12px; line-height: 1.4; }
.chat-panel .chat-note a { color: inherit; }
.chat-panel .chat-note a:first-child:not(:last-child) { color: var(--s-link); font-weight: 600; }
.chat-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(23, 32, 26, .35); backdrop-filter: blur(2px); }
.chat-backdrop[hidden] { display: none; }
body.chat-open { overflow: hidden; }
/* The frame's page is a column of its full height: whatever a host puts above the panel (the test contour's red line,
   a widget's own bar) shrinks the chat, never pushes its composer below the frame's edge. */
body.embed { display: flex; flex-direction: column; height: 100dvh; margin: 0; overflow: hidden; background: var(--s-bg); }
body.embed .chat-panel { position: static; flex: 1 1 auto; width: 100%; height: auto; min-height: 0; border-left: 0; box-shadow: none; animation: none; }
body.embed .chat-backdrop { display: none; }
@media (max-width: 1023px) { .chat-panel { width: min(440px, 100vw); } }
@media (max-width: 899px) { .chat-panel { width: 100vw; border-left: 0; } }
@media (prefers-reduced-motion: reduce) {
  .chat-panel, .chat-panel .chat-message, .chat-panel .typing .dots i, .chat-panel .chat-message.done .tick path { animation: none; }
  .chat-panel .chat-message.done .tick path { stroke-dashoffset: 0; }
}

/* A gift certificate's page: the sum and the company, the term, the code in its frame with «Скопировать» */
.cert h1 { font-size: clamp(26px, 5vw, 36px); line-height: 1.15; }
.cert-terms { font-size: 16px; margin: 0 0 12px; }
.cert-frame { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 18px; }
.control-main .cert-frame .cert-code { margin: 0; font-size: 24px; font-weight: 700; color: var(--ink, #14201a); }

/* The sign for the counter (/s/<slug>/qr): A5, printed as it is on the screen, without the buttons */
body.qr-page { background: #eef2e8; margin: 0; padding: 24px 16px 40px; }
.qr-sheet { box-sizing: border-box; width: min(100%, 148mm); min-height: min(210mm, 100vh); margin: 0 auto; padding: 40px 32px; background: #fff; border-radius: 18px; box-shadow: 0 12px 40px rgba(24, 35, 29, .12); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.qr-company { margin: 0 0 18px; font-size: 20px; font-weight: 800; color: var(--forest, #172e25); }
.qr-sheet h1 { margin: 0 0 8px; font-size: 38px; line-height: 1.1; }
.qr-lead { margin: 0 0 24px; font-size: 18px; color: #3b4a3f; }
.qr-code { width: min(100%, 90mm); padding: 6px; border: 3px solid var(--ink, #14201a); border-radius: 16px; background: #fff; }
.qr-code svg { display: block; width: 100%; height: auto; }
.qr-sheet .qr-address { margin: 18px 0 6px; font-size: 22px; font-weight: 800; letter-spacing: .01em; color: var(--ink, #14201a); overflow-wrap: anywhere; }
.qr-remind { margin: 6px 0 0; font-size: 17px; color: #3b4a3f; }
.qr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px auto 0; }
.qr-example { width: min(100%, 148mm); margin: 0 auto 14px; font-size: 14px; line-height: 1.5; color: #3b4a3f; text-align: center; }
.qr-example a { display: inline-block; padding: 12px 4px; margin: -12px 0; color: var(--ink, #14201a); font-weight: 650; white-space: nowrap; }
@media (max-width: 480px) {
  .qr-sheet { padding: 28px 18px; }
  .qr-sheet h1 { font-size: 30px; }
  .qr-sheet .qr-address { font-size: 19px; }
}
@media print {
  body.qr-page { background: #fff; padding: 0; }
  .qr-sheet { width: 100%; min-height: 0; box-shadow: none; border-radius: 0; padding: 6mm 0 0; }
  .qr-actions, .qr-example { display: none; }
}
/* The client's cabinet of a B2B support (app/helpdesk/client_portal.py): on a phone the list of cases is cards, not a
   five-column table wider than the screen — the number and the subject on one line, then the state, the deadline and
   the last message. */
@media (max-width: 640px) {
  .support-cases table.table, .support-cases table.table tbody, .support-cases table.table tr { display: block; width: 100%; }
  .support-cases table.table thead { display: none; }
  .support-cases table.table tr { padding: 12px 0; border-bottom: 1px solid var(--line, #e3e8dc); }
  .support-cases table.table tr:last-child { border-bottom: 0; }
  .support-cases table.table td { display: block; padding: 2px 0; border: 0; }
  .support-cases table.table td:first-child, .support-cases table.table td:nth-child(2) { display: inline; padding-right: 6px; }
  .support-cases table.table td:nth-child(2) { font-weight: 600; }
}

/* === The page's pictures, its specialists' photos and marks, the map (app/page_media.py, app/staff_rating.py; the owner,
   05.10.2026) ======================================================================================================= */
/* «Фото»: a grid of four 4:3 tiles; on a phone a strip — two and a half tiles, the rest a swipe away, to the screen's
   edge. Each tile's size is set before it loads (width/height and the aspect ratio): nothing moves. */
.business .biz-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.business .biz-gallery li { min-width: 0; margin: 0; padding: 0; }
.business .biz-gallery a.biz-photo { display: block; overflow: hidden; border-radius: 6px; background: var(--s-sunken); }
.business .biz-gallery a.biz-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s; }
@media (hover: hover) { .business .biz-gallery a.biz-photo:hover img { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .business .biz-gallery a.biz-photo img { transition: none; } }
@media (max-width: 599px) {
  .business .biz-gallery {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-right: calc(-1 * var(--s2)); padding-right: var(--s2); scroll-padding-left: 0;
  }
  .business .biz-gallery::-webkit-scrollbar { display: none; }
  .business .biz-gallery li { flex: 0 0 42%; scroll-snap-align: start; }
}

/* The viewer: the picture whole on a dark ground, «‹» «›» at its sides, «✕» in the corner (48 px each), «3 из 8». */
body.viewer-open { overflow: hidden; }
.business .biz-viewer {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 64px 8px 52px; background: rgba(12, 16, 13, .95); touch-action: pan-y pinch-zoom;
}
.business .biz-viewer[hidden] { display: none; }
.business .biz-viewer-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.business .biz .biz-viewer-count,
.business .biz-viewer-count { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; color: #ffffff; font: 500 15px/1.4 var(--mono); }
.business .biz-viewer-btn {
  position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; padding: 0;
  border: 1px solid rgba(244, 241, 232, .45); border-radius: 50%; background: rgba(12, 16, 13, .62); color: #ffffff;
  font: 400 30px/1 var(--serif); cursor: pointer;
}
.business .biz-viewer-btn:hover { background: rgba(12, 16, 13, .85); }
.business .biz-viewer-btn:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 2px; }
.business .biz-viewer-close { top: 8px; right: 8px; font: 400 22px/1 var(--sans); }
.business .biz-viewer-prev { top: 50%; left: 8px; transform: translateY(-50%); }
.business .biz-viewer-next { top: 50%; right: 8px; transform: translateY(-50%); }
.business .biz-viewer.single :is(.biz-viewer-prev, .biz-viewer-next) { display: none; }
@media (min-width: 768px) {
  .business .biz-viewer { padding: 64px 88px 56px; }
  .business .biz-viewer-close { top: 16px; right: 16px; }
  .business .biz-viewer-prev { left: 20px; }
  .business .biz-viewer-next { right: 20px; }
}

/* A specialist's photo at the row's left, round; their mark after the role: «· ★ 4,9 · 37 оценок», the star in ink on the
   highlighter, as the reviews' stars are. */
.business .biz-services.biz-people li:has(> .svc.has-photo) { min-height: 80px; padding-left: 68px; }
.business .biz-people .svc .who-photo { position: absolute; top: 12px; left: 0; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--s-sunken); }
.business .control-main .biz-services.biz-people button.svc:not(.btn) small span { flex: none; font-size: inherit; font-weight: inherit; line-height: inherit; }
.business .biz-people .who-rating { white-space: nowrap; }
.business .biz .biz-people .who-rating .stars { padding: 0 1px; letter-spacing: 0; }

/* «Портфолио» (the owner, 06.10.2026; app/page_media.py): a service's photos under «Об услуге» — the gallery's tiles,
   each with its words under it, a «до» and its «после» side by side as one item (two tiles wide on a computer, most of
   a phone's screen in the strip); «Работы (N)» under a specialist's row, a link of its own over the row's button. The
   viewer says a photo's words over «2 из 5». */
/* No row has a hole on a computer: a pair that would start in a row's last column comes in an order that fits
   (app/page_media.py packed), the same on a phone and in the viewer. */
.business .biz-strip { gap: var(--s2); margin-top: var(--s3); margin-bottom: var(--s3); } /* the phone's strip keeps its bleed */
/* The pair reads as one: its two tiles 2 px apart, the strip's items 16 px. */
.business .biz-strip li.biz-pair { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.business .biz-shot { min-width: 0; margin: 0; }
.business .biz-shot figcaption { margin: 6px 0 0; font-size: 14px; line-height: 1.35; color: var(--s-muted); overflow-wrap: anywhere; }
.business .biz-pair .biz-shot figcaption { color: var(--s-ink); }
@media (max-width: 599px) {
  .business .biz-strip li.biz-pair { flex-basis: calc(84% + 2px); }
}
.business .biz .who-works { position: relative; z-index: 1; margin: -4px 0 0; padding: 0 0 12px; font-size: 14px; line-height: 20px; }
.business .who-works a {
  display: inline-block; margin: -12px -4px; padding: 12px 4px; color: var(--s-ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--s-edge);
}
.business .who-works a:hover, .business .who-works a:focus-visible { text-decoration-color: currentColor; }
.business .biz .biz-viewer-words,
.business .biz-viewer-words {
  position: absolute; left: 16px; right: 16px; bottom: 44px; margin: 0; text-align: center; color: #ffffff;
  font: 400 15px/1.4 var(--sans); overflow-wrap: anywhere;
}
.business .biz-viewer.captioned { padding-bottom: 92px; }

/* «Контакты»: the address, the map under it once «Контакты» is opened (the frame is made then), «Маршрут» and the map's
   switch side by side, one height, and the quiet line that the map loads on the visitor's tap. */
.business .biz-map { margin: 0 0 var(--s2); }
.business .biz .biz-map .biz-address { margin: 0 0 var(--s2); font-size: 16px; line-height: 1.5; color: var(--s-ink); }
.business .biz-map-frame { margin: 0 0 var(--s2); overflow: hidden; border-radius: var(--radius); background: var(--s-sunken); aspect-ratio: 4 / 3; }
.business .biz-map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 600px) { .business .biz-map-frame { aspect-ratio: 16 / 10; } }
.business .biz .biz-map-actions { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0; }
.business .biz-map-actions a.btn,
.business .control-main .biz-map-actions button.biz-map-toggle:not(.btn):not(.logout):not(.delete-row) {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; margin: 0;
  padding: 0 var(--s2); border: 1px solid var(--s-ink); border-radius: var(--radius); background: transparent; color: var(--s-ink);
  font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; transform: none;
}
.business .biz-map-actions a.btn:hover,
.business .control-main .biz-map-actions button.biz-map-toggle:not(.btn):not(.logout):not(.delete-row):hover { background: var(--s-sunken); }
.business .biz .biz-map-note { margin: var(--s1) 0 0; font-size: 13px; line-height: 1.45; color: var(--s-muted); }

/* --- «Контакты» and the footer: how to come, the company elsewhere (app/site_contacts.py) --------------------------- */
/* «Как добраться» under the address: the second words of the address, quiet. */
.business .biz .biz-directions { margin: calc(-1 * var(--s1)) 0 var(--s2); font-size: 15px; line-height: 1.5; color: var(--s-muted); }
.business .biz-fold-body > p a[href^="mailto:"] { overflow-wrap: anywhere; }
.business .site-section-body > p a[href^="tel:"] { font-family: var(--mono); font-size: 15px; }
/* Named links with a small drawn mark: a finger's row each in «Контакты», a quiet wrapped line in the footer. */
.business .biz-net { display: flex; flex-wrap: wrap; gap: 0 var(--s3); margin: var(--s1) 0 0; padding: 0; list-style: none; }
.business .biz-net li { margin: 0; padding: 0; }
.business .biz-net a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--s-ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--s-edge);
}
.business .biz-net a:hover { text-decoration-color: currentColor; }
.business .biz-net-mark { flex: none; width: 18px; height: 18px; color: var(--s-pick); font-family: var(--sans); }
.business .biz-net-footer { margin: 0 0 var(--s1); gap: 0 var(--s2); font-size: 14px; }
.business .biz-net-footer a { color: var(--s-muted); text-decoration-color: var(--s-line); }
.business .biz-net-footer a:hover { color: var(--s-ink); }
.business .biz-net-footer .biz-net-mark { color: currentColor; }
/* «Условия покупки · Политика обработки данных»: the footer's documents, beside the requisites. */
.business .biz .biz-docs { margin: 0 0 var(--s2); font-size: 14px; line-height: 1.5; color: var(--s-muted); }
.business .biz-docs a { display: inline-block; padding: 10px 0; color: var(--s-muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--s-line); }
.business .biz-docs a:hover { color: var(--s-ink); text-decoration-color: currentColor; }

/* --- «Условия покупки» (app/site_terms.py): a document of the company's site, a reading width ---------------------- */
.business .biz-terms-bar { margin-bottom: var(--s4); }
@media (max-width: 599px) {
  /* The page's heading is «Условия покупки»: the bar keeps the company's name, its way back to its page. */
  .business .biz-terms-bar .biz-brand { display: inline-flex; min-width: 0; }
  .business .biz-terms-bar .biz-brand-name { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .business .biz-terms-bar .biz-brand.with-logo .biz-logo { margin-right: 12px; }
  .business .biz-terms-bar .biz-bar-links { flex: 0 0 auto; }
}
.business .biz-terms { max-width: 760px; }
.business .biz .biz-terms h1 { margin: 0 0 var(--s2); font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.business .biz .biz-terms .biz-terms-lead { margin: 0 0 var(--s4); font-size: 17px; color: var(--s-muted); }
.business .biz-terms-part { padding: var(--s3) 0; border-top: 1px solid var(--s-line); }
.business .biz .biz-terms h2 { margin: 0 0 var(--s2); font-size: 24px; line-height: 1.25; }
.business .biz .biz-terms h3 { margin: var(--s3) 0 var(--s1); font-size: 18px; line-height: 1.3; }
.business .biz .biz-terms h2 + h3 { margin-top: 0; }
.business .biz-terms ul { margin: 0; padding-left: 1.15em; }
.business .biz-terms li { margin: 0 0 var(--s1); line-height: 1.55; }
.business .biz-terms li::marker { color: var(--s-edge); }
.business .biz-terms ul.biz-terms-kinds { margin-bottom: var(--s2); padding: 0; list-style: none; }
.business .biz-terms .biz-terms-kinds li { padding: 12px 0; border-bottom: 1px solid var(--hair); }
/* Sums and shares in running text keep the words' letters (a mono figure's own spacing read as «50 %цены»); the
   seller's ИНН, ОГРН and phones, read digit by digit, are mono. */
.business .biz-terms .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.business .biz-terms .code { font-family: var(--mono); font-size: .94em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.business .biz .biz-terms .biz-terms-missing { margin: 0 0 var(--s2); padding: 10px 14px; border-left: 3px solid #b8862a; background: var(--warn-tint); color: var(--warn); font-size: 15px; }
.business .biz-terms a { color: var(--s-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.business .biz-terms-seller { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px var(--s3); margin: 0; }
.business .biz-terms-seller dt { color: var(--s-muted); }
.business .biz-terms-seller dd { margin: 0; overflow-wrap: anywhere; }
.business.biz-terms-page .biz-footer { max-width: 760px; }
@media (max-width: 599px) {
  .business .biz .biz-terms h1 { font-size: 30px; }
  .business .biz .biz-terms h2 { font-size: 21px; }
  .business .biz-terms-seller { grid-template-columns: 1fr; gap: 0; }
  .business .biz-terms-seller dd { margin-bottom: 10px; }
}

/* --- the first screen's line and its one line after the action (the owner's audit, 08.10.2026; business_page.py
   open_now): «Открыто до 20:00» with a dot — lime-deep open, amber soon, grey closed —, then «Перенести или отменить
   можно самим…» instead of the three ticks. A website's hero draws them on the forest (company-site.css). ---------- */
.business .biz-status { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--s-edge); vertical-align: 1px; }
.business .biz-status.open { background: var(--s-open); }
.business .biz-status.soon { background: #b7791f; }
.business .biz .biz-move { max-width: 34em; margin: var(--s2) 0 0; font-size: 15px; line-height: 1.5; color: var(--s-muted); }

/* A clinic's oversight bodies at the page's foot (ПП РФ № 736; app/business_site.py requisites_footer), folded: the
   body, then its address and phone as the clinic typed them. */
.business .biz-oversight { margin: 0 0 var(--s2); font-size: 14px; line-height: 1.5; color: var(--s-muted); }
.business .biz-oversight summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--s-line); }
.business .biz-oversight dl { margin: 0; }
.business .biz-oversight dt { margin: 8px 0 0; font-weight: 600; color: var(--s-ink); }
.business .biz-oversight dd { margin: 0; }
.business #services h3 {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.business #voice-controls { display: flex; flex: none; gap: 4px; }
.business #voice-controls[hidden], .business .voice-preview[hidden] { display: none; }
.business #voice-controls .chat-mic[hidden] { display: none; }
.business .voice-preview { padding: 12px 16px; border-top: 1px solid var(--s-line); background: var(--s-bg, #fff); }
.business .voice-preview label { display: grid; gap: 6px; font-size: 14px; }
.business .voice-preview textarea { width: 100%; max-width: 100%; box-sizing: border-box; resize: vertical; }
.business .voice-preview button { margin: 8px 8px 0 0; min-height: 44px; padding: 8px 12px; }

/* The real B2B client portal is identified by its native support navigation, never by generic booking classes alone. */
body.portal:has(.booking-header a[href$="/support"]) {
  --paper: #f5f7fb;
  --sheet: #fff;
  --ink: #293c55;
  --muted: #596b82;
  --rule: #dce4ef;
  --hair: #dce4ef;
  --card-edge: #dce4ef;
  --shade: #edf2fa;
  --forest: #23654f;
  background: var(--paper);
  font-size: 15px;
}
.portal:has(.booking-header a[href$="/support"]) .control-main {
  max-width: 1120px;
  padding: 32px 40px 64px;
}
.portal:has(.booking-header a[href$="/support"]):has(.support-cases) .control-main { max-width: 1480px; }
.portal:has(.booking-header a[href$="/support"]):has(form[action$="/support/new"]) .control-main { max-width: 960px; }
.portal:has(.booking-header a[href$="/support"]) .page-context { margin: 20px 0 14px; font-size: 13px; }
.portal:has(.booking-header a[href$="/support"]) .booking-header {
  margin: 0 0 24px;
  padding: 24px;
  border: 1px solid #d1ddef;
  border-radius: 16px;
  background: #eaf0f9;
}
.portal:has(.booking-header a[href$="/support"]) .booking-header h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 2.5vw, 34px);
  line-height: 1.2;
}
.portal:has(.booking-header a[href$="/support"]) .booking-header p { margin: 0; color: var(--muted); }
.portal:has(.booking-header a[href$="/support"]) .booking-header a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 6px 4px 0 0;
  padding: 0 10px;
  border: 1px solid #acbdd4;
  border-radius: 8px;
  background: var(--sheet);
  color: #304c74;
  text-decoration: none;
}
.portal:has(.booking-header a[href$="/support"]) .booking-header a:hover { background: #f3f7fd; }
.portal:has(.booking-header a[href$="/support"]) .control-main > .card {
  margin: 20px 0;
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--sheet);
  box-shadow: none;
}
.portal:has(.booking-header a[href$="/support"]) .card h2 { font-size: 20px; line-height: 1.35; }
.portal:has(.booking-header a[href$="/support"]) .card .item {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--rule);
  border-left: 3px solid #a9bdd9;
  border-radius: 10px;
  background: #f7f9fd;
  overflow-wrap: anywhere;
}
.portal:has(.booking-header a[href$="/support"]) .card .item > b { color: #304c74; }
.portal:has(.booking-header a[href$="/support"]) .card .item p { max-width: 76ch; margin: 10px 0 0; }
.portal:has(.booking-header a[href$="/support"]) :is(input, select, textarea) { max-width: 100%; min-width: 0; }
.portal:has(.booking-header a[href$="/support"]) .stack :is(input, textarea) { font-size: 15px; }
.portal:has(.booking-header a[href$="/support"]) .stack textarea { line-height: 1.6; }
.portal:has(.booking-header a[href$="/support"]) :is(button, .btn) { min-height: 44px; }
.portal:has(.booking-header a[href$="/support"]) .support-cases :is(th, td) { padding: 14px 12px; white-space: normal; overflow-wrap: normal; vertical-align: top; }
.portal:has(.booking-header a[href$="/support"]) .support-cases th { background: #edf2fa; white-space: nowrap; }
.portal:has(.booking-header a[href$="/support"]) .support-cases td:nth-child(2) { font-family: var(--sans); font-size: 15px; }
.portal:has(.booking-header a[href$="/support"]) .support-cases a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: 600; }
@media (max-width: 700px) {
  .portal:has(.booking-header a[href$="/support"]) .control-main { padding: 24px 16px 40px; }
  .portal:has(.booking-header a[href$="/support"]) .booking-header,
  .portal:has(.booking-header a[href$="/support"]) .control-main > .card { padding: 18px; }
  .portal:has(.booking-header a[href$="/support"]) .card .item { padding: 14px; }
  .portal:has(.booking-header a[href$="/support"]) .stack :is(input, textarea) { font-size: 16px; }
  .portal:has(.booking-header a[href$="/support"]) .support-cases :is(th, td) { padding: 3px 0; }
}

/* «Цена и время» of a service priced by size (app/site_sizes.py): a quiet table — the size, the price in mono, the
   time; «не делаем» in the muted ink; the add-ons under it as a price list. Narrow phones keep three columns: the
   size's hint goes under its name. */
.business .site-sizes { margin: 0 0 32px; }
.business .site-sizes-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.business .site-sizes-table th,
.business .site-sizes-table td { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--s-line); text-align: left; vertical-align: top; }
.business .site-sizes-table thead th { font-size: 13px; font-weight: 600; color: var(--s-muted); padding-top: 0; }
.business .site-sizes-table tbody th { font-weight: 600; }
.business .site-sizes-table tbody th small { display: block; font-weight: 400; font-size: 13px; color: var(--s-muted); }
.business .site-sizes-table td:nth-child(2) { font-family: var(--mono); white-space: nowrap; }
.business .site-sizes-table td:last-child { white-space: nowrap; padding-right: 0; }
.business .site-sizes-table tr.site-sizes-off td { color: var(--s-muted); font-family: inherit; }
.business .site-sizes-table tbody tr:hover { background: none; }
.business .site-sizes-note { margin: 12px 0 0; font-size: 14px; color: var(--s-muted); }
.business .site-sizes h3 { font-size: 18px; margin: 24px 0 8px; }
.business .site-sizes-extra { list-style: none; margin: 0; padding: 0; }
.business .site-sizes-extra li { font-size: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--s-line); }
.business .site-sizes-extra li span { flex: 1 1 auto; }
.business .site-sizes-extra li b { font-family: var(--mono); font-weight: 400; white-space: nowrap; }
.business .site-sizes-extra li small { flex-basis: 100%; font-size: 13px; color: var(--s-muted); }
@media (max-width: 460px) {
  .business .site-sizes-table { font-size: 15px; }
  .business .site-sizes-table td:nth-child(2) { white-space: normal; }
}
/* «Куда приехать?» (site/assets/visit-address.js): the address form under its card, the chat's own fields — the
   street with typing-ahead (address-suggest.css), the entrance, the floor and the code folded, one button. */
.chat-panel form.visit-address { align-self: stretch; display: grid; gap: 10px; max-width: 92%; margin: 0; padding: 12px 14px; border: 1px solid var(--s-line); border-radius: 12px; background: var(--s-surface); color: var(--s-ink); font-size: 15px; }
.chat-panel form.visit-address label { display: block; margin: 0 0 4px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.chat-panel form.visit-address label span, .chat-panel form.visit-address summary span { color: var(--s-muted); font-weight: 400; }
.chat-panel form.visit-address input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--s-edge); border-radius: var(--radius); background: var(--s-surface); color: var(--s-ink); font: inherit; }
.chat-panel form.visit-address input:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 1px; }
.chat-panel form.visit-address details { border-top: 1px solid var(--s-line); padding-top: 8px; }
.chat-panel form.visit-address details > div { margin-top: 10px; }
.chat-panel form.visit-address summary { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
.chat-panel form.visit-address .visit-address-note { margin: 0; color: var(--s-danger, #a3261b); font-size: 14px; }
.chat-panel form.visit-address .visit-address-note:empty { display: none; }
.chat-panel form.visit-address .visit-address-go { justify-content: center; border-color: var(--s-accent); background: var(--s-accent); color: var(--s-accent-ink); font-weight: 600; }