/* Full company websites use the shared booking dialog, with their own roomy reading surface. */
body.company-site { --site-accent: #c1f58a; background: #fafbf7; }
body.company-site.site-beauty { --site-accent: #ffafc7; }
body.company-site.site-health { --site-accent: #9cddff; }
/* A club's amber, the drawn club's kettlebells and mats: #16382b words on it read at 9.0:1. */
body.company-site.site-sport { --site-accent: #ffd27a; }
.company-site .control-main.biz { max-width: 1240px; }
.company-site .biz-page { display: block; }
.company-site .biz-hero { position: relative; top: auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; margin-bottom: 48px; padding: 44px; border-radius: 24px; background: #16382b; color: #fff; overflow: hidden; }
.company-site .biz-hero:not(.with-cover) { position: relative; top: auto; }
.company-site .biz-hero h1 { font-size: clamp(28px, 4vw, 54px); color: #fff; margin-bottom: 24px; overflow-wrap: anywhere; }
.company-site .biz .biz-kicker { color: #d1e4d6; margin-bottom: 24px; }
.company-site .biz .biz-tagline { font-size: 19px; color: #f0f6ec; max-width: 29em; }
.company-site .biz-hero .biz-also, .company-site .biz-hero .biz-next, .company-site .biz-hero .biz-proof { color: #e0ecdf; }
/* The average in the proof line stands on the dark first screen too (it was ink on the forest, unreadable). */
.company-site .biz-hero .biz-proof b { color: #fff; }
/* The pale links are for the dark hero; the note over the picture stands on the accent and keeps its dark text. */
.company-site .biz-hero a:not(.btn, .site-slot), .company-site .biz-hero button.biz-next-link { color: #d0fba4; }
.company-site .biz-hero .biz-next b { color: #d0fba4; background: none; }
.company-site .biz-hero .biz-branch-here, .company-site .biz-hero .biz-branch-switch { color: #e0ecdf; }
.company-site .biz-hero .biz-branches small { color: #d2e7d7; }
.company-site .biz-hero .biz-branches small b { color: #d0fba4; }
.company-site .biz-hero .biz-branches li > a:hover { background: #254e3d; box-shadow: -12px 0 0 #254e3d, 12px 0 0 #254e3d; }
.company-site .biz-hero .biz-gift { color: #16382b; }
.company-site .biz-hero .biz-pause, .company-site .biz-hero .biz-pause-note { color: #fff; border-color: var(--site-accent); }
.company-site .site-hero-media { position: relative; min-height: 320px; border-radius: 14px; overflow: hidden; }
.company-site .site-hero-media img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.company-site .biz-body { width: 100%; }
.company-site .biz-section { margin-bottom: 48px; }
.company-site .site-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 24px; }
.company-site .site-section-heading h2 { margin: 0; }
.company-site .site-section-heading > p { margin: 0; font-size: 13px; color: #526353; }
.company-site .site-visit { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; margin-bottom: 48px; }
.company-site .site-visit .site-section { margin: 0; padding: 28px; border: 1px solid #d9e3d8; border-radius: 14px; background: #fff; }
.company-site #team .biz-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border: 0; }
.company-site #team .biz-people > li { min-width: 0; padding: 20px; border: 1px solid #d9e3d8; border-radius: 12px; background: #fff; }
.company-site #team .biz-people > li::after { display: none; }
/* A specialist's photo inside the card's padding, their name, role and «Работы (N)» beside it — not under it. */
.company-site #team .biz-people > li:has(> .svc.has-photo) { padding-left: 88px; }
.company-site #team .biz-people .svc .who-photo { top: 20px; left: 20px; }
/* The name leads to the specialist's own page (app/specialist_page.py): a link of a thumb's height of its own, above
   the card's button — the card's top padding gives it the room, nothing overlaps the role line under it. The role and
   the nearest time stay the button's, on one line while the role keeps 9em beside the time; a narrower card (three
   columns at 1024 px, a photo's 88 px) puts the time under the role, from its start — never a word cut mid-way. The
   button keeps the name for the chat's words. */
.company-site #team .biz-people > li:has(> .who-page) { padding-top: 10px; }
.company-site #team .biz-people .who-page { position: relative; z-index: 1; display: inline-block; padding: 10px 0; font-size: 17px; font-weight: 600; line-height: 24px; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--faint); }
.company-site #team .biz-people .who-page:hover { text-decoration-color: currentColor; }
.company-site .control-main #team .biz-people li:has(> .who-page) button.svc:not(.btn) { padding-top: 0; flex-wrap: wrap; row-gap: 2px; align-items: baseline; }
.company-site .control-main #team .biz-people li:has(> .who-page) .svc:not(.btn) > span:first-of-type { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.company-site .control-main #team .biz-people li:has(> .who-page) button.svc:not(.btn) small { order: 0; flex: 1 1 9em; min-width: 0; }
.company-site .control-main #team .biz-people li:has(> .who-page) button.svc:not(.btn) small .who-rating { white-space: normal; }
.company-site .control-main #team .biz-people li:has(> .who-page) button.svc:not(.btn) b.who-free { flex: none; margin-left: 0; }
/* A phone's card has no room for both on one line: the role takes its line whole, the time the next, from the left. */
@media (max-width: 699px) {
  .company-site .control-main #team .biz-people li:has(> .who-page) button.svc:not(.btn) small { flex: 1 1 100%; }
}
/* A clinic that books through МедФлекс: the row's booking is a link there (medical_web.book_links), the role its line. */
.company-site #team .biz-people li:has(> .who-page) > a.svc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; padding: 0 0 12px; color: var(--ink); font-size: 14px; text-decoration: none; }
.company-site #team .biz-people li:has(> .who-page) > a.svc small { flex: 1 1 auto; font-size: 14px; color: var(--muted); }
.company-site #faq .site-section-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: start; }
.company-site #faq details { padding: 0; border: 0; border-bottom: 1px solid #d9e3d8; border-radius: 0; background: transparent; }
.company-site #faq summary { cursor: pointer; min-height: 52px; padding: 16px 0; font-size: 15px; font-weight: 600; }
.company-site #about { max-width: 780px; font-size: 17px; }
.company-site .biz-promos { max-width: 860px; } /* «Акции»: a reading width, the benefit near its title */
.company-site .biz-section h2, .company-site .site-service-detail h2 { font-size: 30px; letter-spacing: -.8px; margin-bottom: 24px; }
.company-site #services h3 { display: inline-block; margin: 24px 0 16px; padding: 5px 12px; border-radius: 6px; background: var(--site-accent); font-size: 14px; color: #16382b; }
/* The catalogue's tabs (business_site.catalog; the owner, 08.10.2026: «плашки незаметны»): a bar of 44 px tabs in
   16 px words, each with its count in mono, quieter than the word; the chosen one filled with the forest, the others
   white with a border of 4.0:1 against the page. The bar stays hidden without the script, every category shown under
   its heading then. A phone scrolls the bar sideways, never cutting a word, an edge fading while tabs wait past it
   (the script's `.more-left`, `.more-right`). */
.company-site .site-catalog-bar { position: relative; margin: 0 0 24px; }
.company-site .site-catalog-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.company-site .control-main .site-catalog-tabs button[data-service-tab]:not(.btn) { position: relative; display: inline-flex; flex: none; align-items: baseline; gap: 8px; padding: 10px 16px; min-height: 44px; border: 1px solid #64846b; border-radius: 8px; background: #fff; color: var(--ink); font: 600 16px/1.4 var(--sans); white-space: nowrap; }
.company-site .control-main .site-catalog-tabs button[data-service-tab][aria-selected="true"]:not(.btn) { background: #16382b; border-color: #16382b; color: #fff; }
.company-site .site-tab-count { font: 500 14px/1 var(--mono); color: #526353; }
.company-site [aria-selected="true"] > .site-tab-count { color: #b8d4bf; }
.company-site .site-catalog-bar:not([hidden]) + #service-catalog:not(.show-all) [data-service-group] > h3 { display: none; }
/* Under a large catalogue's shown category (business_site.catalog_more): how many more services and where, each
   category's name a button of its tab that reads as a link in the sentence — underlined, its tap area a finger's
   height around the words without moving a line. */
.company-site .site-catalog-more:not([hidden]) { display: block; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid #d9e3d8; }
.company-site .site-catalog-more p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.company-site .control-main button.site-catalog-goto:not(.btn) { display: inline; margin: -10px -2px; padding: 10px 2px; border: 0; border-radius: 4px; background: none; color: #16382b; font: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.company-site .control-main button.site-catalog-goto:not(.btn):hover { background: none; text-decoration-thickness: 2px; }
.company-site .biz-who a.svc { text-decoration: none; }
.company-site .control-main details.biz-fold { margin: 0 0 24px; padding: 8px 24px 16px; border: 1px solid #d9e3d8; border-radius: 12px; background: #fff; }
.company-site .control-main details.biz-fold > summary { font-size: 24px; }
.company-site .biz-fold-body { padding: 16px 0 0; }
.company-site .site-service-detail { max-width: 760px; padding: 0 0 40px; font-size: 18px; }
.company-site .site-back { display: inline-block; margin-bottom: 24px; font-size: 14px; }
.company-site .site-review-widget { width: 100%; height: 560px; border: 1px solid #d9e3d8; border-radius: 12px; background: #fff; margin-bottom: 16px; }
.company-site .site-enquiry { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; padding: 40px; margin: 48px 0 24px; background: var(--forest); border-radius: 20px; color: #fff; }
.company-site .site-enquiry h2 { font-size: 34px; line-height: 1.15; letter-spacing: -.8px; margin: 16px 0 24px; }
.company-site .site-enquiry-intro h2 { color: #fff; }
.company-site .site-enquiry-intro > p { color: #d2e7d7; }
.company-site .site-enquiry-note { font-size: 14px; color: #d2e7d7; margin-top: 32px; }
.company-site .control-main details.site-human { margin: 24px 0 0; padding: 0; border: 1px solid #668575; border-radius: 12px; background: #fff; color: #16382b; }
.company-site .control-main details.site-human > summary { padding: 16px 20px; font-size: 14px; font-weight: 600; min-height: 52px; cursor: pointer; }
.company-site .site-human > p, .company-site .site-human > form { margin: 0 20px 20px; }
.company-site .site-human > p { font-size: 13px; color: #526353; }
.company-site .site-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.company-site .site-form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; margin: 0; min-width: 0; }
.company-site .site-form-grid label span { font-weight: 400; color: #526353; }
.company-site .site-form-grid input, .company-site .site-form-grid textarea, .company-site .site-form-grid select { box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 12px; border: 1px solid #91a78d; border-radius: 8px; background: #fff; color: #16382b; font: 400 16px/1.4 var(--sans); }
.company-site .site-field-wide { grid-column: 1/-1; }
.company-site .site-consent { display: flex; gap: 12px; margin: 20px 0; font-size: 12px; line-height: 1.6; align-items: start; }
.company-site .site-consent input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: #16382b; }
.company-site #enquiry-status { font-size: 14px; margin-bottom: 0; }
.company-site [id] { scroll-margin-top: 80px; }
.company-site .control-main button.biz-fab:not(.btn) { display: none; }
/* «Расписание» (app/site_classes.py): plain ruled rows — the time in mono, the class, the trainer and the hall. A computer
   shows the days side by side, a phone one day under its tab (the script's), today first. */
.company-site .site-days { display: flex; gap: 4px; margin: 0 0 16px; }
.company-site .site-days[hidden] { display: none; }
.company-site .control-main .site-days button[role="tab"]:not(.btn) { flex: 1 1 0; min-width: 0; max-width: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: 6px 2px; border: 1px solid #b2c3b0; border-radius: 8px; background: #fff; color: #16382b; font: 500 13px/1.25 var(--sans); }
.company-site .control-main .site-days button[role="tab"]:not(.btn) b { font: 600 17px/1.25 var(--mono); }
.company-site .control-main .site-days button[role="tab"][aria-selected="true"]:not(.btn) { background: #16382b; border-color: #16382b; color: #fff; }
.company-site .site-week { display: grid; grid-template-columns: repeat(var(--days, 7), minmax(0, 1fr)); gap: 0 20px; }
.company-site .site-day h3 { display: flex; flex-direction: column; margin: 0; padding: 0 0 10px; border-bottom: 2px solid #16382b; font-size: 16px; line-height: 1.3; }
.company-site .site-day h3 small { font-size: 13px; font-weight: 500; color: #526353; }
.company-site .site-classes { list-style: none; margin: 0; padding: 0; }
.company-site .site-classes li { border-bottom: 1px solid #d9e3d8; }
.company-site .site-class { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 10px 0; color: #16382b; text-decoration: none; }
.company-site a.site-class:hover .site-class-name, .company-site a.site-class:hover .site-class-day { text-decoration: underline; text-underline-offset: 3px; }
.company-site .site-class-time { font: 600 15px/1.35 var(--mono); font-variant-numeric: tabular-nums; }
.company-site .site-class-name { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.company-site .site-class-what small { display: block; font-size: 13px; line-height: 1.4; color: #526353; }
.company-site .site-class-what .site-class-state { color: #8a4b3a; font-weight: 600; }
.company-site .site-class-off .site-class { color: #526353; }
.company-site .site-class-off .site-class-what .site-class-state { color: #526353; font-weight: 500; }
.company-site .site-week-note { margin: 16px 0 0; font-size: 14px; color: #526353; }
/* «Абонементы»: a ruled row a kind — what it gives and covers on the left, the price and a visit's price on the right. */
.company-site .site-memberships { list-style: none; margin: 0; padding: 0; border-top: 1px solid #d9e3d8; }
.company-site .site-memberships li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 32px; padding: 20px 0; border-bottom: 1px solid #d9e3d8; }
.company-site .site-memberships h3 { grid-column: 1; margin: 0; font-size: 19px; line-height: 1.3; }
.company-site .site-mship-price { grid-column: 2; grid-row: 1; justify-self: end; font: 600 20px/1.3 var(--mono); white-space: nowrap; }
.company-site .site-memberships p { grid-column: 1; margin: 0; font-size: 15px; }
.company-site .site-memberships .site-mship-covers { font-size: 14px; color: #526353; }
.company-site .site-memberships .site-mship-visit { grid-column: 2; grid-row: 2 / span 2; justify-self: end; align-self: start; max-width: 24em; text-align: right; font-size: 14px; color: #16382b; }
.company-site .site-sum { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.company-site .site-mship-terms { max-width: 46em; margin: 16px 0 0; font-size: 14px; color: #526353; }
/* A kind's row is its button: the title's button stretched over the row, the row tinted under the pointer, «Оформить →»
   at its right, the keyboard's ring round the whole row. */
.company-site .site-memberships li { position: relative; transition: background-color .15s; }
.company-site .site-memberships li:hover { background: var(--row-hover, #f0f6f1); }
.company-site .control-main .site-memberships button.site-mship-pick:not(.btn):not(.logout):not(.delete-row) { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.company-site .control-main .site-memberships button.site-mship-pick:not(.btn):not(.logout):not(.delete-row):hover { background: none; color: inherit; }
.company-site .site-mship-pick::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.company-site .site-memberships li:hover .site-mship-pick { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.company-site .site-mship-pick:focus-visible { outline: none; }
.company-site .site-memberships li:has(.site-mship-pick:focus-visible) { outline: 3px solid var(--lime-deep, #3d711f); outline-offset: 2px; }
.company-site .site-memberships .site-mship-visit { grid-row: 2; }
.company-site .site-mship-go { grid-column: 2; grid-row: 3; justify-self: end; align-self: end; font-size: 14px; font-weight: 600; color: #16382b; white-space: nowrap; }
.company-site .site-mship-action { margin: 20px 0 0; }
/* A class's page: when it runs, who leads it, the hall, the membership — headings over plain rows. */
.company-site .site-facts { margin: 32px 0 24px; }
.company-site .site-fact { margin: 0 0 28px; }
.company-site .site-fact h3 { margin: 0 0 8px; font-size: 19px; }
.company-site .site-fact > p { margin: 0; font-size: 16px; }
.company-site .site-facts .site-class { flex-direction: row; align-items: center; gap: 16px; }
.company-site .site-facts .site-class-day { min-width: 9.5em; font-size: 16px; font-weight: 600; }
.company-site .site-facts .site-class-what { display: flex; flex-wrap: wrap; gap: 0 12px; }
.company-site .site-leads, .company-site .site-kinds-list { list-style: none; margin: 0; padding: 0; }
.company-site .site-leads li { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 8px 0; border-bottom: 1px solid #d9e3d8; }
.company-site .site-leads img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.company-site .site-leads span, .company-site .site-kinds-list li { display: flex; flex-direction: column; gap: 2px; }
.company-site .site-leads small, .company-site .site-kinds-list small { font-size: 14px; color: #526353; }
.company-site .site-kinds-list li { padding: 10px 0; border-bottom: 1px solid #d9e3d8; font-size: 16px; }
/* Seven columns need 1180 px (a class's name holds its word); a laptop's narrower window and a tablet take the tabs. */
@media (max-width: 1179px) {
  .company-site .site-week { display: block; }
  .company-site .site-day + .site-day { margin-top: 24px; }
  .company-site .site-class { flex-direction: row; align-items: baseline; gap: 16px; }
  .company-site .site-class-time { flex: none; width: 3.2em; }
}
@media (max-width: 699px) {
  .company-site .site-memberships li { column-gap: 16px; }
  .company-site .site-memberships .site-mship-visit { grid-column: 1 / -1; grid-row: auto; justify-self: start; max-width: none; text-align: left; }
  .company-site .site-mship-go { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 4px; }
  .company-site .site-facts .site-class { flex-wrap: wrap; gap: 4px 16px; }
}
@media (max-width: 1023px) {
  .company-site .biz-hero { padding: 28px; gap: 24px; }
  .company-site #team .biz-people, .company-site #reviews .site-section-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-site .site-enquiry { gap: 24px; padding: 28px; }
}
@media (max-width: 699px) {
  .company-site [id] { scroll-margin-top: 64px; }
  .company-site .biz-hero { grid-template-columns: 1fr; padding: 24px; border-radius: 16px; margin-bottom: 32px; }
  .company-site .biz-hero h1 { font-size: clamp(26px, 7vw, 40px); }
  .company-site .biz .biz-tagline { font-size: 16px; }
  /* The bar in one row from edge to edge of the screen, scrolled sideways; room above and below for the focus ring. */
  .company-site .site-catalog-bar { margin: 0 -16px 20px; }
  .company-site .site-catalog-tabs { flex-wrap: nowrap; overflow-x: auto; padding: 4px 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .company-site .site-catalog-tabs::-webkit-scrollbar { display: none; }
  .company-site .site-catalog-bar::before, .company-site .site-catalog-bar::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 56px; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
  .company-site .site-catalog-bar::before { left: 0; width: 32px; background: linear-gradient(to left, rgb(250 251 247 / 0), #fafbf7 80%); }
  .company-site .site-catalog-bar::after { right: 0; background: linear-gradient(to right, rgb(250 251 247 / 0), #fafbf7 80%); }
  .company-site .site-catalog-bar.more-left::before, .company-site .site-catalog-bar.more-right::after { opacity: 1; }
  .company-site #team .biz-people, .company-site #reviews .site-section-body, .company-site #faq .site-section-body, .company-site .site-visit { grid-template-columns: 1fr; }
  .company-site .site-visit .site-section { padding: 24px; }
  .company-site .site-enquiry { grid-template-columns: 1fr; padding: 24px; border-radius: 16px; }
  .company-site .site-enquiry h2 { font-size: 28px; }
  .company-site .site-enquiry-note { margin-top: 16px; }
  .company-site .site-form-grid { grid-template-columns: 1fr; }
  .company-site .control-main details.biz-fold { padding: 4px 16px 12px; }
  .company-site .control-main details.biz-fold > summary { font-size: 20px; }
}
/* BentoML's diagonal lift and turning arrow, applied to the background so typing targets stay still. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .company-site .control-main .site-catalog-tabs button[data-service-tab] { transition: transform .2s ease, box-shadow .2s ease; }
  .company-site .control-main .site-catalog-tabs button[data-service-tab]:is(:hover, :focus-visible) { transform: translate(3px, -3px); box-shadow: -3px 3px 0 #16382b; }
}

/* --- the first screen, the bar, the menu and the ways in (the owner's audit, 08.10.2026: app/business_page.py hero,
   app/business_site.py navigation, hero_media, hero_times, enquiry_form) ------------------------------------------- */
/* A barbershop keeps the forest and the lime, never the salons' pink (business_site.body_classes). */
body.company-site.site-beauty.site-barber { --site-accent: #c1f58a; }

/* The line over the name: open now, or when it opens, with its dot; a link to «Часы работы» underlined under the
   pointer alone. */
.company-site .site-hours-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.company-site .site-hours-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.company-site .biz-hero .biz-status { background: #9fb8a8; }
.company-site .biz-hero .biz-status.open { background: #c1f58a; }
.company-site .biz-hero .biz-status.soon { background: #ffd27a; }

/* Under the one action: the assistant as one quiet link, then what the visitor can do afterwards by themselves. */
.company-site .biz .site-hero-ask { margin: 8px 0 0; font-size: 15px; line-height: 1.4; }
.company-site .biz-hero .site-hero-ask a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.company-site .biz-hero .biz-move { margin: 4px 0 0; font-size: 14px; color: #d2e7d7; }

/* One column when there is nothing beside the words (a seasonal pause, nothing free). */
.company-site .biz-hero.site-hero-solo { grid-template-columns: minmax(0, 1fr); }

/* «Свободное время» on the first screen: the grid of every page (app/site_times.py, «.site-free» below with the
   service's page) drawn on the forest — the day over its times, four of them a row, outlined, in mono; the hero's lime
   stays its one action —; «Другой день» a link. */
.company-site .site-hero-times { align-self: center; min-width: 0; }
.company-site .biz .site-times-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: #d1e4d6; }
.company-site .biz-hero .site-free { border-top-color: #3b6150; }
.company-site .biz-hero .site-free > li { display: block; padding: 14px 0; border-bottom-color: #3b6150; }
.company-site .biz-hero .site-free-day { display: block; margin: 0 0 10px; font-size: 16px; color: #fff; }
.company-site .biz-hero .site-free-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; }
.company-site .biz-hero a.site-slot { min-width: 0; padding: 0; border-color: #6f9683; background: transparent; color: #fff; font-size: 16px; }
.company-site .biz-hero a.site-slot:is(:hover, :focus-visible) { border-color: #c1f58a; background: #254e3d; }
.company-site .biz-hero a.site-slot:focus-visible { outline: 3px solid #c1f58a; outline-offset: 2px; }
.company-site .biz-hero .site-times-more { margin: 8px 0 0; }
.company-site .control-main button.site-times-other:not(.btn):not(.logout):not(.delete-row) { min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: #d0fba4; font: 600 15px/1.4 var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.company-site .control-main button.site-times-other:not(.btn):not(.logout):not(.delete-row):hover { background: none; border: 0; color: #fff; }

/* The menu right under the bar (no blank band between them): one line whose links scroll sideways when they do not
   fit; a computer's holds the page's one action at its right end, there once the first screen's button has gone. */
.company-site .biz-bar:has(+ .site-nav) { margin-bottom: 0; } /* «Условия покупки»' bar keeps its own margin */
.company-site .site-nav { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 0 24px; min-height: 56px; margin: 0 0 24px; padding: 0; background: #fafbf7; border-bottom: 1px solid #d9e3d8; }
.company-site .site-nav-links { display: flex; flex: 1 1 auto; min-width: 0; gap: 0 28px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.company-site .site-nav-links::-webkit-scrollbar { display: none; }
.company-site .site-nav-links a { display: inline-flex; flex: none; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.company-site .site-nav-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.company-site .site-nav-links a.site-nav-my, .company-site .site-nav-book { display: none; }
@media (min-width: 1024px) {
  .company-site .biz-sticky { display: none; } /* no full-width band at the foot: the menu's own button */
  .company-site .site-nav-book { display: block; flex: none; transition: opacity .2s, visibility .2s; }
  .company-site .site-nav-book.away { visibility: hidden; opacity: 0; pointer-events: none; }
  .company-site .control-main .site-nav-book button.btn.primary { min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--radius); background: var(--lime); color: var(--ink); font: 600 15px/1.2 var(--sans); cursor: pointer; }
  .company-site .control-main .site-nav-book button.btn.primary:hover { background: var(--lime-hover); }
}
@media (prefers-reduced-motion: reduce) { .company-site .site-nav-book { transition: none; } }

/* A phone: a bar of 48 px — the logo, or the name, and the phone's icon —, the menu one line of 44 px from edge to
   edge, its right edge fading over the links still to come, «Мои записи» its last link. */
@media (max-width: 699px) {
  .company-site .biz-bar { min-height: 48px; gap: 12px; }
  .company-site .biz-brand { display: inline-flex; flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 15px; }
  .company-site .biz-brand:not(.with-logo) { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 44px; }
  .company-site .biz-bar-links { flex: none; }
  .company-site .biz-bar-links > a:not(.biz-call) { display: none; }
  .company-site .biz-bar-links a.biz-call { justify-content: center; width: 44px; min-width: 44px; height: 44px; margin: 0; border: 1px solid var(--faint); border-radius: var(--radius); text-decoration: none; }
  .company-site .biz-call .icon { display: block; }
  .company-site .biz-call span { display: none; }
  .company-site .site-nav { min-height: 44px; margin: 0 -16px 16px; }
  .company-site .site-nav-links { gap: 0 20px; padding: 0 40px 0 16px; }
  .company-site .site-nav-links a.site-nav-my { display: inline-flex; }
  .company-site .site-nav::after { content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 40px; background: linear-gradient(to right, rgb(250 251 247 / 0), #fafbf7 85%); pointer-events: none; }
  /* The owner's photo first, 16:10, then the name and the one action. */
  .company-site .site-hero-media { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
  /* «Свободное время» right under the one action; the quiet link and the line after it. */
  .company-site .biz-hero.site-hero-timed { display: flex; flex-direction: column; gap: 0; }
  .company-site .biz-hero.site-hero-timed > .biz-hero-text { display: contents; }
  .company-site .biz-hero.site-hero-timed > .site-hero-times { order: 1; align-self: stretch; margin: 16px 0 4px; }
  .company-site .biz-hero.site-hero-timed .site-hero-ask, .company-site .biz-hero.site-hero-timed .biz-move { order: 2; }
  .company-site .biz-hero .site-free > li { padding: 12px 0; }
}

/* «Есть вопрос?» at the page's end: one field on white and «Спросить помощника», the page's lime; «Написать
   администратору» folded under it. */
.company-site .site-question label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #fff; }
.company-site .site-question textarea { display: block; box-sizing: border-box; width: 100%; min-height: 104px; margin: 0 0 16px; padding: 14px; resize: vertical; border: 1px solid #91a78d; border-radius: 8px; background: #fff; color: #16382b; font: 400 16px/1.5 var(--sans); }
.company-site .site-question textarea::placeholder { color: #526353; opacity: 1; }
.company-site .site-question textarea:focus-visible { outline: 3px solid #c1f58a; outline-offset: 2px; }
.company-site .control-main .site-question button.btn.primary.site-ask { min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--radius); background: var(--lime); color: var(--ink); font: 600 16px/1.2 var(--sans); cursor: pointer; }
.company-site .control-main .site-question button.btn.primary.site-ask:hover { background: var(--lime-hover); }
@media (max-width: 699px) {
  .company-site .control-main .site-question button.btn.primary.site-ask { width: 100%; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .company-site .control-main .site-question button.site-ask { transition: transform .2s ease, box-shadow .2s ease; }
  .company-site .control-main .site-question button.site-ask:is(:hover, :focus-visible) { transform: translate(3px, -3px); box-shadow: -3px 3px 0 #0c291e; }
}

/* «Контакты» on a computer: the map's place kept at 16:10 inside the card — a quiet drawn street and its pin until
   «Показать карту» (no request to Yandex before the tap: app/page_media.py MAP_SCRIPT), the map in that very place
   after —; under it «Маршрут» and «Показать карту»; then «Позвонить +7 900 000-12-34», a finger's height. */
@media (min-width: 700px) {
  .company-site #contacts .biz-map:has([data-map-toggle]:not([hidden])) .biz-map-frame[hidden] { display: block; }
  .company-site #contacts .biz-map-frame { position: relative; aspect-ratio: 16 / 10; margin: 0 0 16px; border: 1px solid #d9e3d8;
    background: linear-gradient(90deg, transparent 0 44%, #fff 44% 47%, transparent 47%),
                linear-gradient(0deg, transparent 0 58%, #fff 58% 62%, transparent 62%),
                linear-gradient(152deg, transparent 0 66%, #fff 66% 68%, transparent 68%), #e9f0ea; }
  .company-site #contacts .biz-map-frame[hidden]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -22px 0 0 -11px; border-radius: 50% 50% 50% 0; background: #16382b; transform: rotate(-45deg); }
}
.company-site .biz .site-call { margin: 16px 0 0; }
.company-site .site-section-body > p a.site-call-button { font-family: var(--sans); }
.company-site .site-call-button { display: inline-block; max-width: 100%; box-sizing: border-box; min-height: 44px; padding: 9px 16px; line-height: 24px; border: 1px solid #16382b; border-radius: var(--radius); color: #16382b; font-size: 15px; font-weight: 600; text-decoration: none; }
.company-site .site-call-button:hover { background: #eef4ea; }
.company-site .site-section-body .site-call-number { font: 600 15px/24px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* One person: a line in the team's place, their name leading to their own page. */
.company-site .site-team-one { margin: 0 0 48px; }
.company-site .biz .site-team-one p { margin: 0; font-size: 19px; line-height: 1.4; }
.company-site .site-team-one a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ==== The catalogue as a shop's (app/site_catalog.py; the expert audit of 08.10.2026) ===========================
   A service is a product card: its photo, its name — a link to its page — and its price on one line (the price in
   mono at the right), «45 мин», its description (two lines on a computer, one on a phone), one outline button named
   by the time it books; the page's one lime stays the booking of the first screen. A category of four or fewer is a
   ruled price list: the name, how long, the price, the button in one row, the columns level through a subgrid. The
   cards' grid never leaves a hole in its last row: a card takes two columns by the count (3 columns: 5, 8 → the
   first; 7, 10 → the first and the last; 2 columns: an odd count → the first). A phone lays both out as one list:
   a 72 px picture at the left, the words beside it. The cards' parts stay level across a row through a subgrid
   (v0.112.1). */
.company-site .biz-services:is(.site-cards, .site-price-list) { border: 0; }
.company-site .biz-services:is(.site-cards, .site-price-list) > li { padding-right: 0; }
.company-site .biz-services:is(.site-cards, .site-price-list) > li::after { display: none; }
.company-site .biz-services:is(.site-cards, .site-price-list) > li:hover { background: none; box-shadow: none; }
.company-site .site-card-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.company-site .site-card-head .site-card-price { margin-left: auto; }
.company-site .site-card-name { grid-area: name; flex: 1 1 0; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.company-site a.site-card-name { padding: 11px 0; margin: -11px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: #9fb3a5; }
.company-site a.site-card-name:is(:hover, :focus-visible) { text-decoration-color: currentColor; }
.company-site .site-card-price { grid-area: price; justify-self: end; font: 500 16px/1.35 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); text-align: right; }
.company-site .site-card-price.words { font-family: var(--sans); font-size: 15px; }
.company-site .biz .site-card-meta { grid-area: meta; margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--muted); white-space: nowrap; }
.company-site .site-card-photo { grid-area: photo; display: block; }
.company-site .service-photo { display: block; object-fit: cover; background: #eef2ec; }
.company-site .site-cards .service-photo { width: 100%; height: 150px; border-radius: 8px; }
.company-site .biz .site-cards .site-service-description,
.company-site .biz .site-price-list .site-service-description { grid-area: desc; margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #526353;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.company-site .biz .site-price-list .site-service-description { margin-top: 2px; }
.company-site .biz-services:is(.site-cards, .site-price-list) .site-book { grid-area: book; }
.company-site .site-cards .site-book { justify-self: start; align-self: end; margin-top: 16px; }
/* The card's one button and the times' «Выбрать другой день»: an ink outline, the time it books in its words. */
.company-site .control-main :is(a, button).site-book:not(.btn) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid #16382b; border-radius: 8px; background: #fff; color: #16382b; font: 600 15px/1.3 var(--sans); text-align: center; text-decoration: none; cursor: pointer; }
.company-site .control-main :is(a, button).site-book:not(.btn):is(:hover, :focus-visible) { background: #eef4ea; border-color: #16382b; }
@media (min-width: 700px) {
  .company-site .site-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .company-site .biz-services.site-cards > .site-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "head" "meta" "desc" "book"; align-content: start; padding: 20px; border: 1px solid #d9e3d8; border-radius: 12px; background: #fff; }
  .company-site .site-cards > .site-card:last-child { border-bottom: 1px solid #d9e3d8; }
  .company-site .site-cards > .site-card:hover { border-color: #38624a; }
  .company-site .site-cards .site-card-photo { margin-bottom: 16px; }
  .company-site .site-cards > li:first-child:nth-last-child(2n+1) { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .company-site .site-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .company-site .site-cards > li:first-child:nth-last-child(2n+1) { grid-column: auto; }
  .company-site .site-cards > li:is(:first-child:nth-last-child(3n+2), :first-child:nth-last-child(3n+1), :last-child:nth-child(3n+1)) { grid-column: span 2; }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .company-site .site-cards { row-gap: 0; }
    .company-site .biz-services.site-cards > .site-card { grid-row: span 5; grid-template-rows: subgrid; margin-bottom: 16px; }
  }
}
/* The price list (a category of four or fewer, a service page's «Ещё в разделе …»): ruled rows, the columns level. */
@media (min-width: 700px) {
  .company-site .biz-services.site-price-list { border-top: 1px solid #d9e3d8; }
  .company-site .site-price-list > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "photo name meta price book" "photo desc meta price book"; align-items: center; padding: 14px 0; border-bottom: 1px solid #d9e3d8; }
  .company-site .site-price-list > li:last-child { border-bottom: 1px solid #d9e3d8; }
  .company-site .site-price-list .site-card-head { display: contents; }
  /* A row's picture at 104 × 78 (4:3, the drawn scenes keep their charm), at the row's top; the row grows with it.
     A tap on it opens the service's page, as the name does (one link for a screen reader: the name). */
  .company-site .site-price-list .site-card-photo { align-self: start; margin-right: 20px; }
  .company-site .site-price-list .service-photo { width: 104px; height: 78px; border-radius: 8px; }
  .company-site .site-price-list .site-card-name { align-self: end; }
  .company-site .site-price-list > li:not(:has(.site-service-description)) .site-card-name { grid-row: 1 / span 2; align-self: center; }
  .company-site .biz .site-price-list .site-card-meta { margin: 0 0 0 24px; }
  .company-site .site-price-list .site-card-price { margin-left: 24px; }
  .company-site .site-price-list .site-book { margin-left: 24px; }
}
/* A browser without subgrid makes each row a grid of its own: from 1 024 px its columns keep a width enough for
   «2 ч 30 мин», «от 4 500 ₽» and «Записаться на завтра, 16:30», so the rows stand nearly level. */
@media (min-width: 1024px) {
  .company-site .site-price-list > li { grid-template-columns: auto minmax(0, 1fr) minmax(96px, auto) minmax(128px, auto) minmax(276px, auto); }
}
@supports (grid-template-columns: subgrid) {
  @media (min-width: 700px) {
    .company-site .site-price-list { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
    .company-site .site-price-list > li { grid-column: 1 / -1; grid-template-columns: subgrid; }
  }
  /* «Все услуги» from 1 024 px: every category's price list one grid — the catalogue's five columns (the photo, the
     name, how long, the price, the button), each category's group, its list and its rows subgrids of them —, so a
     column is as wide as its longest cell in any category: the prices and the buttons one line down the catalogue
     whatever time a button names («на завтра», «на понедельник», «на 17 октября»). A category's heading, a grid of
     its cards and the line under it span the five. */
  @media (min-width: 1024px) {
    .company-site #service-catalog { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
    .company-site #service-catalog > [data-service-group]:not([hidden]) { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
    .company-site #service-catalog > [data-service-group] > * { grid-column: 1 / -1; }
    .company-site #service-catalog > [data-service-group] > h3 { justify-self: start; }
    .company-site #service-catalog .site-price-list { grid-template-columns: subgrid; }
  }
}
/* A tablet's width: the button under the price, the name keeps the row (the independent check of 08.10.2026:
   «Окрашивани|е волос» beside «Записаться на завтра, 16:30» at 768 px). */
@media (min-width: 700px) and (max-width: 1023px) {
  .company-site .site-price-list > li { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "photo name meta price" "photo desc desc book"; }
  .company-site .site-price-list .site-book { justify-self: start; margin-top: 8px; } /* the buttons level at their left */
}
@supports (grid-template-columns: subgrid) {
  @media (min-width: 700px) and (max-width: 1023px) {
    .company-site .site-price-list { grid-template-columns: auto minmax(0, 1fr) auto auto; }
    .company-site .site-price-list > li { grid-template-columns: subgrid; } /* the rows' columns level again */
  }
}
@media (max-width: 699px) {
  .company-site .biz-services:is(.site-cards, .site-price-list) { border-top: 1px solid #d9e3d8; }
  .company-site .biz-services:is(.site-cards, .site-price-list) > li { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "meta" "desc" "book"; column-gap: 12px; padding: 16px 0; border-bottom: 1px solid #d9e3d8; }
  .company-site .biz-services:is(.site-cards, .site-price-list) > li.has-photo { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "photo head" "photo meta" "photo desc" "photo book"; }
  .company-site .biz-services:is(.site-cards, .site-price-list) .site-card-photo { align-self: start; margin-right: 4px; }
  .company-site .biz-services:is(.site-cards, .site-price-list) .service-photo { width: 72px; height: 54px; border-radius: 8px; }
  .company-site .biz .biz-services:is(.site-cards, .site-price-list) .site-service-description { margin-top: 4px; -webkit-line-clamp: 1; line-clamp: 1; }
  .company-site .biz-services:is(.site-cards, .site-price-list) .site-book { justify-self: start; margin-top: 12px; }
}
/* A narrow phone (under 390 px): the price on a line of its own under the name, at the right — the name keeps the
   row's width and reads in two lines at most («Замена тормозных колодок (ось)» stood in four beside «от 1 800 ₽» at
   320 px once «Все услуги» shows every service at once), every row alike. */
@media (max-width: 389px) {
  .company-site .biz-services:is(.site-cards, .site-price-list) .site-card-head .site-card-name { flex-basis: 100%; }
}

/* A service's page (app/site_catalog.py): under the heading the company and its street, the price in mono; then
   «Свободное время» — a day a row of its times —, the fact of every booking, «Ещё в разделе …». */
.company-site .biz .site-service-company { margin: -8px 0 16px; font-size: 16px; color: #d1e4d6; }
.company-site .site-service-company a { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgb(255 255 255 / .45); }
.company-site .biz .site-service-price { margin: 0 0 24px; font-size: 18px; color: #d1e4d6; }
.company-site .site-service-price .site-card-price { font: 600 26px/1.2 var(--mono); color: #fff; }
.company-site .site-service-price .site-card-price.words { font: 600 22px/1.2 var(--sans); }
.company-site .site-times { margin: 0 0 40px; }
.company-site .site-free { list-style: none; margin: 0; padding: 0; border-top: 1px solid #d9e3d8; }
.company-site .site-free > li { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 8px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid #d9e3d8; }
.company-site .site-free-day { font-size: 15px; font-weight: 600; color: var(--ink); }
.company-site .site-free-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.company-site a.site-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; min-height: 44px; padding: 8px 12px; border: 1px solid #64846b; border-radius: 8px; background: #fff; color: var(--ink); font: 500 15px/1 var(--mono); font-variant-numeric: tabular-nums; text-decoration: none; }
.company-site a.site-slot:is(:hover, :focus-visible) { border-color: #16382b; background: #eef4ea; }
.company-site .biz .site-times-more { margin: 16px 0 0; }
.company-site .biz .site-times-fact { margin: 12px 0 0; font-size: 15px; color: var(--muted); }
.company-site .site-related { margin: 0 0 48px; max-width: 960px; }
.company-site .site-related h2 { font-size: 30px; letter-spacing: -.8px; margin-bottom: 24px; }
@media (max-width: 699px) {
  .company-site .site-free > li { grid-template-columns: 1fr; }
  .company-site .site-service-price .site-card-price { font-size: 24px; }
  .company-site .site-related h2 { font-size: 26px; }
}

/* «Отзывы клиентов» (business_page.review_quotes): a ruled list at a reading width, not three identical cards. */
.company-site #reviews .site-section-body { display: block; max-width: 820px; }
.company-site #reviews .biz-reviews { border-top: 1px solid #d9e3d8; }
.company-site #reviews .biz-review { padding: 20px 0; border-top: 0; border-bottom: 1px solid #d9e3d8; }
.company-site #reviews .biz-review:first-child { padding-top: 20px; }