/* Board round S1, part b (docs/relaunch/sections-board): open-now week strip (12), hub rows (13), price search (14), archive status (15), price strip (16),
 * contacts first (17), route from the border (18), one-quote reviews (19), 404 (21). Every class starts with s1-. Tokens are the site's --b-*.
 * Page complete at rest; motion only after the first scroll (html.reveal-on) and never under reduce; print shows everything. */

[hidden].s1-ps__empty, .s1-ws [hidden], .p-price[hidden], .pc-block[hidden], .p-price tr[hidden], .s1-qs [hidden] { display: none !important; }

/* ---------- 15: archive status ---------- */
.s1-arch { font-size: var(--b-small); line-height: 1.4; color: var(--b-ink-3); }
.s1-arch--top { margin: 0 0 clamp(1.25rem, 1rem + 1vw, 2rem); padding: 0.75rem 1rem; border-left: 3px solid var(--b-accent); background: var(--b-surface); font-size: 0.9375rem; color: var(--b-ink-2); max-width: 46rem; }
.s1-arch--idx { margin: 0 0 0.75rem; padding-left: 0.75rem; border-left: 2px solid var(--b-accent); font-weight: 500; color: var(--b-ink-2); }
.p-chips .s1-arch--idx { display: none; }
@media (min-width: 64rem) { .p-chips .s1-arch--idx { display: block; } }
.b-step__price .s1-arch { display: block; margin-top: 0.25rem; font-size: var(--b-small); font-weight: 400; color: inherit; }

/* ---------- 12: week strip ---------- */
.s1-ws { container: s1ws / inline-size; display: grid; gap: 1rem; min-width: 0; }
.s1-ws__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.s1-ws__bar:not(:has(.b-btn)) { gap: 0; }
.s1-ws .s1-ws__status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; max-width: none; margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.3; color: var(--b-ink); }
.s1-ws__status::before { content: ""; align-self: center; flex: none; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--b-rule-strong); }
.s1-ws__status.is-open::before { background: var(--b-accent); }
.s1-ws__status small { font-size: var(--b-small); font-weight: 400; color: var(--b-ink-3); }
.s1-ws__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--b-ink); }
.s1-ws__week > li { display: grid; gap: 0.4rem; align-content: start; min-height: 6.5rem; padding: 1rem 0.35rem 1.1rem; border-bottom: 1px solid var(--b-rule); border-left: 1px solid var(--b-rule); text-align: center; }
.s1-ws__week > li:first-child { border-left: 0; }
.s1-ws__d { font-size: 1.5rem; font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.s1-ws__d abbr { text-decoration: none; }
.s1-ws__t { font-size: 0.8125rem; line-height: 1.3; color: var(--b-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.s1-ws__week > li:not([data-from]) :is(.s1-ws__d, .s1-ws__t) { color: var(--b-ink-3); }
.s1-ws__week > li.is-today { background: var(--b-ink); border-color: var(--b-ink); color: var(--b-bg); box-shadow: inset 0 3px 0 var(--b-accent); }
.s1-ws__week > li.is-today :is(.s1-ws__d, .s1-ws__t) { color: var(--b-bg); }
/* narrow places (toothache card column, phone): one row per day, the day at the left, the hours at the right */
@container s1ws (max-width: 40rem) {
  .s1-ws__week { grid-template-columns: minmax(0, 1fr); }
  .s1-ws__week > li { display: flex; justify-content: space-between; align-items: center; min-height: 2.875rem; padding: 0.5rem 0.75rem; border-left: 0; text-align: left; }
  .s1-ws__d { font-size: 1.0625rem; letter-spacing: -0.01em; }
  .s1-ws__t { font-size: 0.9375rem; }
  .s1-ws__week > li.is-today { box-shadow: inset 3px 0 0 var(--b-accent); }
}
.p-urgent.p-urgent--s1 { grid-template-columns: minmax(0, 1fr); }
.p-urgent--s1 .s1-ws__bar .b-btn { flex: none; }
.s1-first__hours .s1-ws { margin-top: 0.25rem; }
.b-visit:has(.s1-ws) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .b-visit:has(.s1-ws) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .b-visit:has(.s1-ws) > .b-btn { grid-column: 1; justify-self: start; } }

/* ---------- 13: hub rows ---------- */
.s1-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--b-ink); }
.s1-rows > li { position: relative; border-bottom: 1px solid var(--b-rule); }
.s1-row { position: relative; display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; grid-template-areas: "media date go" "media title go" "media min go"; gap: 0.2rem 1rem; align-items: center; min-height: 3.5rem; padding: 1rem 0; color: inherit; text-decoration: none; }
.s1-row:focus-visible { outline: 2px solid var(--b-ink); outline-offset: 2px; }
.s1-row__media { grid-area: media; display: block; width: 5rem; aspect-ratio: 1; overflow: hidden; background: var(--b-surface); outline: 1px solid var(--b-img-outline); outline-offset: -1px; }
.s1-row__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s1-row__media--icon { display: grid; place-items: center; }
.s1-row__media--icon .p-card__icon { width: 56%; height: auto; }
.s1-row__date { grid-area: date; font-size: 0.8125rem; line-height: 1.4; color: var(--b-ink-3); font-variant-numeric: tabular-nums; }
.s1-row__t { grid-area: title; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; }
.s1-row__min { grid-area: min; font-size: var(--b-small); color: var(--b-ink-3); }
.s1-row__go { grid-area: go; display: inline-flex; }
.s1-row__go .ico { width: 1.25rem; height: 1.25rem; transition: transform 220ms var(--b-ease); }
.s1-row:hover .s1-row__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
@media (min-width: 56rem) {
  .s1-row { grid-template-columns: 9rem minmax(0, 1fr) 10rem 2.5rem; grid-template-areas: "date title min go"; gap: 0 2rem; padding: 1.75rem 0; }
  .s1-row__t { font-size: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); letter-spacing: -0.035em; line-height: 1.1; }
  .s1-row__min { text-align: right; }
}
/* a fine pointer: no thumbnail, the picture floats beside the cursor (position set by site-s1b.js), tilted like the source recipe.
   It stays in the right part of the row (from 58% to the right edge), so it never covers the title. */
@media (min-width: 56rem) and (hover: hover) and (pointer: fine) {
  .s1-rows > li:hover, .s1-rows > li:focus-within { z-index: 4; }
  .s1-row__media { grid-area: auto; position: absolute; left: min(max(var(--s1-x, 60%), 58%), calc(100% - 18rem)); top: var(--s1-y, 50%); z-index: 4; width: 16rem; height: 11rem; aspect-ratio: auto; pointer-events: none; opacity: 0;
    transform: translate(1.5rem, -50%) scale(0.42) rotate(-10deg); transition: opacity 140ms linear, transform 360ms var(--b-ease); }
  .s1-row:hover .s1-row__media, .s1-row:focus-visible .s1-row__media { opacity: 1; transform: translate(1.5rem, -50%) scale(1) rotate(var(--s1-rot, 5deg)); }
  .s1-row__t, .s1-row__date { transition: transform 300ms var(--b-ease); }
  .s1-row:hover .s1-row__t { transform: translateX(0.75rem); }
  .s1-row:hover .s1-row__go .ico { transform: translateX(3px); }
}

/* ---------- 14: price search ---------- */
.s1-ps { display: grid; gap: 0.4rem; margin: 0 0 1rem; }
.p-chips .s1-ps { padding-right: 0.25rem; }
.s1-ps__label { font-size: var(--b-small); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--b-ink-3); }
.s1-ps__input { width: 100%; min-height: 2.75rem; padding: 0 0.9rem; border: 1px solid var(--b-ink); border-radius: 0; background: var(--b-surface); font: 400 1rem/1.2 var(--font-b); color: var(--b-ink); -webkit-appearance: none; appearance: none; }
.s1-ps__input::placeholder { color: var(--b-ink-3); }
.s1-ps__input:focus-visible { outline: 2px solid var(--b-ink); outline-offset: 2px; }
.s1-ps__count { min-height: 1.3em; font-size: var(--b-small); line-height: 1.3; color: var(--b-ink-2); }
.s1-ps__empty { display: grid; justify-items: start; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--b-ink); }
.s1-ps__empty p { font-size: 1.125rem; color: var(--b-ink-2); overflow-wrap: anywhere; }
.p-chips a.is-dim { opacity: 0.45; pointer-events: none; }
.p-prices__main > .s1-ps { margin-top: 0.5rem; }

/* ---------- 16: price strip ---------- */
.s1-prs .p-brief__box { padding-top: 1rem; }
.s1-prs .s1-prs__grid { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0.5rem 0 0; border-top: 0; }
.s1-prs .s1-prs__cell { display: grid; align-content: start; gap: 0.6rem; margin: 0; padding: 1.25rem 0; border-top: 1px solid var(--b-rule); border-left: 0; }
.s1-prs .s1-prs__cell dt { margin: 0; font-size: var(--b-small); font-weight: 500; letter-spacing: 0.04em; line-height: 1.3; text-transform: uppercase; color: var(--b-ink-3); }
.s1-prs .s1-prs__v { margin: 0; font-size: clamp(2.5rem, 1.5rem + 2.6vw, 4rem); font-weight: 500; letter-spacing: -0.05em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--b-ink); }
.s1-prs .s1-prs__from { font-size: 0.3em; font-weight: 500; letter-spacing: 0; vertical-align: 0.9em; color: var(--b-ink-3); }
.s1-prs .s1-prs__u { font-size: 0.4em; font-weight: 500; letter-spacing: 0; color: var(--b-ink-3); }
.s1-prs .s1-prs__h { margin: 0; max-width: 20rem; font-size: var(--b-small); line-height: 1.45; color: var(--b-ink-2); }
@media (min-width: 40rem) {
  .s1-prs .s1-prs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s1-prs .s1-prs__cell { padding: 1.5rem 1.5rem 1.75rem 0; }
  .s1-prs .s1-prs__cell:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid var(--b-rule); }
}
@media (min-width: 64rem) {
  .s1-prs .s1-prs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s1-prs .s1-prs__cell { padding: 1.5rem 1.25rem 1.75rem 0; }
  .s1-prs .s1-prs__cell + .s1-prs__cell { padding-left: 1.5rem; border-left: 1px solid var(--b-rule); }
}

/* ---------- 17: contacts, address and hours first ---------- */
.s1-first { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-top: 0.5rem; }
.s1-first__info { display: grid; justify-items: start; align-content: start; gap: 0.35rem; }
.s1-first__info .b-kicker { margin-top: 1.25rem; }
.s1-first__info .b-kicker:first-child { margin-top: 0; }
.s1-first__addr { display: grid; font-style: normal; font-size: clamp(2rem, 1rem + 2.6vw, 3.5rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.03; }
.s1-first__addr span + span { margin-top: 0.4rem; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.2; color: var(--b-ink-2); }
.s1-first__tel { display: inline-block; font-size: clamp(1.75rem, 0.9rem + 2.3vw, 3rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; text-decoration: none; font-variant-numeric: tabular-nums; }
.s1-first__tel:hover, .s1-first__mail:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.s1-first__mail { display: inline-block; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; text-decoration: none; overflow-wrap: anywhere; }
.s1-first__info > .b-btn { margin-top: 1.5rem; }
.s1-first__hours { min-width: 0; }
.s1-first__hours > .b-kicker { margin-bottom: 0.75rem; }
@media (min-width: 64rem) { .s1-first { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } }
.s1-mh { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin-top: clamp(3rem, 2rem + 4vw, 5rem); }
.s1-mh .p-how { margin-top: 0; }
@media (min-width: 64rem) { .s1-mh { grid-template-columns: minmax(0, 1fr); align-items: start; } .s1-mh .p-how__row { grid-template-columns: minmax(0, 1fr); } .s1-mh .p-how__row .b-btn { justify-self: start; } }
.s1-contacts > .b-ways { margin-top: clamp(3rem, 2rem + 4vw, 5rem); }

/* ---------- 18: route from the border ---------- */
.s1-route { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b" "line line" "lab lab"; gap: 0.75rem 1.5rem; margin: 1.5rem 0 0.5rem; padding-block: 1rem; overflow: clip; view-timeline: --s1-route block; }
.s1-route p { font-size: 1.0625rem; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; }
.s1-route__a { grid-area: a; }
.s1-route__b { grid-area: b; justify-self: end; text-align: right; }
.s1-route__k { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; border-radius: 50%; background: var(--b-ink); color: var(--b-bg); font-size: 0.75rem; font-weight: 600; vertical-align: 0.1em; }
.s1-route__b .s1-route__k { margin: 0 0 0 0.6rem; background: var(--b-accent); color: var(--b-on-accent); }
.s1-route__b { display: inline-flex; align-items: baseline; flex-direction: row-reverse; gap: 0; }
.s1-route__line { grid-area: line; }
.s1-route__svg { display: block; overflow: visible; }
.s1-route__svg--h { width: 100%; height: auto; }
.s1-route__svg--v { display: none; width: 1.5rem; height: 12.5rem; }
.s1-route__path { fill: none; stroke: var(--b-ink); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.s1-route__dot { fill: var(--b-ink); }
.s1-route__dot--b { fill: var(--b-accent); }
.s1-route__lab { grid-area: lab; justify-self: center; text-align: center; }
.s1-route__lab span { display: block; font-size: var(--b-small); font-weight: 400; color: var(--b-ink-3); }
@keyframes s1-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.reveal-on .s1-route__path { animation: s1-draw linear both; animation-timeline: --s1-route; animation-range: entry 10% cover 50%; }
  }
}
@media (max-width: 47.99rem) {
  .s1-route { grid-template-columns: 1.5rem minmax(0, 1fr); grid-template-areas: "line a" "line lab" "line b"; grid-template-rows: auto 1fr auto; gap: 0 1rem; height: 12.5rem; padding-block: 0; }
  .s1-route__line { grid-row: 1 / -1; }
  .s1-route__svg--h { display: none; }
  .s1-route__svg--v { display: block; }
  .s1-route__b { justify-self: start; text-align: left; flex-direction: row; }
  .s1-route__b .s1-route__k { margin: 0 0.5rem 0 0; order: 0; }
  .s1-route__lab { justify-self: start; align-self: center; text-align: left; }
}

/* ---------- 19: one big quote ---------- */
.s1-qs { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--b-ink); }
.s1-qs__label { display: none; }
.s1-qs__item + .s1-qs__item { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--b-rule); }
.s1-qs__text { font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.12; text-wrap: balance; }
.s1-qs__item figcaption { margin-top: 1.25rem; font-size: var(--b-small); color: var(--b-ink-3); }
.s1-qs__item figcaption b { color: var(--b-ink); font-weight: 600; }
.s1-qs.is-js { grid-template-columns: 5rem minmax(0, 1fr); grid-template-areas: "label stage" "label nav"; column-gap: clamp(1.5rem, 4vw, 4rem); }
.s1-qs.is-js .s1-qs__label { grid-area: label; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-bottom: 0.5rem; }
.s1-qs.is-js .s1-qs__label span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--b-small); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--b-ink-3); }
.s1-qs__line { position: relative; flex: 1; width: 1px; min-height: 6rem; background: var(--b-rule); }
.s1-qs__line::after { content: ""; position: absolute; inset: 0 0 auto 0; width: 100%; height: calc(var(--qs-p, 1) * 100%); background: var(--b-accent); transition: height 0.6s var(--b-ease); }
.s1-qs.is-js .s1-qs__stage { grid-area: stage; display: grid; min-height: 14rem; align-content: center; }
.s1-qs.is-js .s1-qs__item { grid-area: 1 / 1; margin: 0; padding: 0; border: 0; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s 0.35s; }
.s1-qs.is-js .s1-qs__item.is-on { opacity: 1; visibility: visible; transition: opacity 0.35s; }
.s1-qs__item.is-long .s1-qs__text { font-size: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem); }
.s1-qs__nav { grid-area: nav; display: flex; gap: 0.75rem; margin-top: 2rem; }
.s1-qs__nav button { display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; padding: 0; border: 1px solid var(--b-ink); border-radius: 50%; background: transparent; color: var(--b-ink); cursor: pointer; transition: background-color 220ms var(--b-ease), color 220ms var(--b-ease), transform 120ms var(--b-ease); }
.s1-qs__nav button:hover { background: var(--b-ink); color: var(--b-bg); }
.s1-qs__nav button:active { transform: scale(0.94); }
.s1-qs__nav button:focus-visible { outline: 2px solid var(--b-ink); outline-offset: 3px; }
.s1-qs__nav [data-qs-prev] .ico { transform: scaleX(-1); }
.s1-qs__nav .ico { width: 1.25rem; height: 1.25rem; }
@keyframes s1-word { from { opacity: 0; filter: blur(10px); transform: translateY(0.3em); } to { opacity: 1; filter: blur(0); transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .s1-qs__item.is-in .s1-qs__w { animation: s1-word 0.8s var(--b-ease) both; animation-delay: calc(var(--i, 0) * 32ms); }
  .s1-qs__item.is-in figcaption { animation: s1-word 0.8s var(--b-ease) 0.35s both; }
}
@media (max-width: 47.99rem) {
  .s1-qs.is-js { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "nav"; }
  .s1-qs.is-js .s1-qs__label { display: none; }
}

/* ---------- 21: 404 ---------- */
.s1-404__n { overflow: clip; padding-top: clamp(1rem, 3vw, 2.5rem); }
.s1-404__n .b-wrap { container-type: inline-size; }
.s1-404__n span { display: block; text-align: center; white-space: nowrap; font-size: 56cqw; font-weight: 600; line-height: 0.82; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 2px var(--b-ink); user-select: none; font-variant-numeric: tabular-nums; }
.s1-404 { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.vb .s1-404 .c-svc__row { grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; }
.vb .s1-404 .c-svc__icon { grid-row: auto; margin-block: 0; }
.vb .s1-404 .c-svc__name { grid-column: 2; grid-row: auto; }
.vb .s1-404 .c-svc__row .b-service__go { grid-column: 3; grid-row: auto; }
@media (min-width: 48rem) {
  .vb .s1-404 .c-svc__row { grid-template-columns: 4.5rem minmax(0, 1fr) auto; column-gap: 1.5rem; }
  .vb .s1-404 .c-svc__icon { grid-row: auto; margin-block: -0.5rem; }
}

/* ---------- reduced motion, print ---------- */
@media (prefers-reduced-motion: reduce) {
  .s1-row__media, .s1-row__t, .s1-row__date, .s1-row__go .ico, .s1-qs__item, .s1-qs__line::after, .s1-qs__nav button { transition: none !important; }
  .s1-row:hover .s1-row__t { transform: none; }
  .s1-row:hover .s1-row__media, .s1-row:focus-visible .s1-row__media { transform: translate(1.5rem, -50%); }
}
@media print {
  .s1-qs, .s1-qs.is-js { display: block; }
  .s1-qs.is-js .s1-qs__stage { display: block; }
  .s1-qs.is-js .s1-qs__item { opacity: 1; visibility: visible; margin-top: 1rem; }
  .s1-qs__nav, .s1-qs__label, .s1-ps { display: none !important; }
  .s1-row__media { position: static !important; opacity: 1 !important; transform: none !important; width: 5rem !important; height: auto !important; aspect-ratio: 1 !important; }
  .s1-route__path { stroke-dashoffset: 0 !important; animation: none !important; }
  .s1-ws__week { display: block; }
  .s1-404__n span { -webkit-text-stroke-width: 1px; }
}

/* Price list of October 2026 (edit 36): category buttons above the list, one block per category, the includes under the name of a row.
   Markup (generator, page_prices): .p-prices.pc > nav.pc-cats (a.pc-cat[data-cat]) + .p-prices__main > section.pc-block (head, lead, section.p-price > h3.pc-group + table). */
.p-prices.pc { display: block; }
.pc-cats { margin: 0 0 1.5rem; }
.pc-cats__h { margin: 0; font-size: var(--b-small); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--b-ink-3); }
.pc-cats__hint { margin: 0.25rem 0 0.9rem; font-size: 0.9375rem; line-height: 1.4; color: var(--b-ink-2); }
.pc-cats__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 40rem) { .pc-cats__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .pc-cats__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pc-cat { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 3.25rem; padding: 0.55rem 0.8rem; border: 1px solid var(--b-rule-strong); border-radius: 0.5rem; background: var(--b-surface); font-size: 0.9375rem; font-weight: 500; line-height: 1.25; text-decoration: none; color: var(--b-ink); cursor: pointer; }
.pc-cat:hover, .pc-cat:focus-visible { border-color: var(--b-ink); }
.pc-cat.is-on { background: var(--b-ink); border-color: var(--b-ink); color: var(--b-bg); }
.pc-cat.is-dim { opacity: 0.45; cursor: default; }
.pc-cat__n { flex: none; min-width: 1.6rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--b-rule); font-size: 0.75rem; font-weight: 500; text-align: center; color: var(--b-ink-2); }
.pc-cat.is-on .pc-cat__n { background: rgba(255, 255, 255, 0.2); color: inherit; }
.pc .p-prices__main { max-width: 60rem; }
.pc-note { margin: 0 0 0.5rem; }
.pc-block { margin-top: 3rem; scroll-margin-top: 8rem; }
@media (max-width: 63.99rem) { .pc-block { scroll-margin-top: 5rem; } }
.pc-block:first-of-type { margin-top: 1.5rem; }
.pc-block > .p-price__head h2 { margin: 0; padding: 0; border: 0; font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; }
.pc-block .p-price { margin-top: 1.25rem; }
.pc-lead { margin: 0.9rem 0 0; max-width: 46rem; font-size: 1rem; line-height: 1.5; color: var(--b-ink-2); }
.pc-group { margin: 0; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.pc-block .p-price table { margin-top: 0.5rem; }
.p-incl { display: block; margin-top: 0.2rem; font-size: 0.875rem; line-height: 1.4; color: var(--b-ink-3); }
.p-per { display: block; font-size: 0.8125rem; font-weight: 400; line-height: 1.3; color: var(--b-ink-3); }

/* ---------- price page on a phone: the search and the sections come higher (review of 17.10.2026: they started at about 1340 px) ----------
   The two buttons under the heading repeat the ones of the header, the strip "Коротко" becomes two columns of smaller numbers */
@media (max-width: 59.99rem) { .page-prices .p-head .b-hero__cta { display: none; } }
@media (max-width: 39.99rem) {
  .s1-prs .s1-prs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .s1-prs .s1-prs__cell { padding: 0.9rem 0; gap: 0.35rem; }
  .s1-prs .s1-prs__v { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .s1-prs .s1-prs__h { font-size: 0.8125rem; }
}
/* A long term ("Профессиональная гигиена") may not push out of its cell; on the narrowest phones the letters sit a little closer */
.s1-prs .s1-prs__cell dt, .p-svc-prices .s1-prs__cell dt { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 23rem) { .s1-prs .s1-prs__cell dt { letter-spacing: 0.02em; } }

/* ---------- three trust facts of the home page: under 60rem the term stands above its text ----------
   The 8rem column of the old two-column row was narrower than "Лабораторія" and "Микроскоп" at 1.75rem, the term ran into the text beside it */
@media (max-width: 59.99rem) { .b-facts div { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; } }

/* ---------- one rhythm between blocks on a phone (review of 17.10.2026: "gaps are gigantic and different") ----------
   Below 48rem the visible gap between two blocks is --b-gap (4.5rem). The home sections carry padding on both sides (2 x --b-section), the inner pages
   only below the block (.p-body, .p-more, the reviews), so --b-section is half of --b-gap and the inner blocks take --b-gap whole.
   Before: 160 px between home sections (up to 230 with the heading offset), 80 to 104 px on the inner pages. */
@media (max-width: 47.99rem) {
  :root { --b-section: 2.25rem; --b-gap: 4.5rem; }
  .p-body, .p-more, .p-more--tight { padding-bottom: var(--b-gap); }
  .b-doc-page__cols { margin-top: var(--b-gap); }
  .b-doc-page__reviews, .b-doc-page__grid--solo + .b-doc-page__reviews { margin-top: var(--b-gap); padding-bottom: var(--b-gap); }
}

/* ---------- treatment steps on a phone: a plain run of photo, text, photo, text (review of 17.10.2026) ----------
   Under 60rem the sticky photo that changed with the scroll left a screen of blank space under every step. The photos and the steps are
   separate lists in the markup, so the frame, the media box and the list dissolve (display: contents) and the grid puts photo n before step n.
   The grey filter sits on ".b-mono img" and still reaches the photos. Home page and the implant page share this block. */
@media (max-width: 59.99rem) {
  .b-steps { gap: 1.25rem 0; }
  .b-steps__media, .b-steps__frame, .b-steps__list { display: contents; }
  .b-steps__track { display: none; }
  .b-steps__frame img { position: static; grid-column: 1; width: 100%; height: auto; aspect-ratio: 16 / 10; opacity: 1; }
  .b-steps__list .b-step { min-height: 0; margin-bottom: 1.25rem; padding-block: 0; border-top: 0; }
  .b-steps__frame img:nth-child(1) { order: 1; } .b-steps__list .b-step:nth-child(1) { order: 2; }
  .b-steps__frame img:nth-child(2) { order: 3; } .b-steps__list .b-step:nth-child(2) { order: 4; }
  .b-steps__frame img:nth-child(3) { order: 5; } .b-steps__list .b-step:nth-child(3) { order: 6; }
  .b-steps__frame img:nth-child(4) { order: 7; } .b-steps__list .b-step:nth-child(4) { order: 8; }
  .b-steps__frame img:nth-child(5) { order: 9; } .b-steps__list .b-step:nth-child(5) { order: 10; }
  .b-steps__frame img:nth-child(6) { order: 11; } .b-steps__list .b-step:nth-child(6) { order: 12; }
  /* every step reads at full strength: the dimming of the inactive ones belongs to the scroll version */
  .reveal-on .vb .b-steps .b-steps__list .b-step h3, .reveal-on .vb .b-steps .b-steps__list .b-step .b-step__price { color: var(--b-ink); }
  .reveal-on .vb .b-steps .b-steps__list .b-step p { color: var(--b-ink-2); }
  .reveal-on .vb .b-steps .b-steps__list .b-step .b-step__n { color: var(--b-ink-3); }
}

/* ---------- Binotel "call me back" window in the look of the site (review of 17.10.2026: the stock purple and teal one is ugly) ----------
   The widget sits in our page (no iframe) and brings its own sheet at the first click (getcall/css/theme_1.css), written in fixed pixels with !important
   and long id selectors. Every rule here repeats the id twice and carries !important, which is what beats it; the sheet is added later than ours, so
   order alone would lose. If Binotel renames its classes the window falls back to its own look and nothing breaks. Texts and behaviour stay Binotel's. */
html #bingc-passive#bingc-passive:not(.bingc-passive-closed) { display: grid !important; place-items: center !important; inset: 0 !important; height: 100% !important; padding: 1rem !important; overflow: auto !important; pointer-events: none; }
html #bingc-passive#bingc-passive div.bingc-passive-background { background: rgba(18, 19, 17, 0.62) !important; }
html #bingc-passive#bingc-passive div.bingc-passive-overlay { z-index: 20001 !important; top: 0 !important; width: min(34rem, 100%) !important; height: auto !important; overflow: visible !important; padding: 2.5rem 2rem 3rem !important; background: #f1f2ef !important; border-top: 3px solid #e31825 !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3) !important; pointer-events: auto; font-family: var(--font-b), "Inter Tight", Arial, sans-serif !important; }
html #bingc-passive#bingc-passive div.bingc-passive-overlay a.bingc-passive-close-button { top: 0.875rem !important; right: 0.875rem !important; opacity: 1 !important; }
html #bingc-passive#bingc-passive div.bingc-passive-overlay a.bingc-passive-close-button svg polygon { fill: #121311 !important; }
html #bingc-passive#bingc-passive div.bingc-passive-overlay div.bingc-passive-content { max-width: none !important; margin: 0 !important; padding: 0 !important; }
html #bingc-passive#bingc-passive div.bingc-passive-content :is(div.bingc-we-will-call-you, div.bingc-we-already-call-you, div.bingc-we-will-call-you-later, div.bingc-passive-countdown-timer, div.bingc-something-went-wrong) { max-width: none !important; padding: 0 0 1.25rem !important; font: 600 1.5rem/1.2 var(--font-b), "Inter Tight", Arial, sans-serif !important; letter-spacing: -0.02em !important; color: #121311 !important; text-align: left !important; }
html #bingc-passive#bingc-passive div.bingc-passive-content :is(span.small-text, span.sm) { display: block !important; padding: 0 0 0.4rem !important; font: 400 1rem/1.45 var(--font-b), "Inter Tight", Arial, sans-serif !important; letter-spacing: 0 !important; color: #3f423e !important; text-align: left !important; }
html #bingc-passive#bingc-passive div.bingc-passive-content div.bingc-we-will-call-you br { display: none !important; }
html #bingc-passive#bingc-passive div.bingc-passive-content div.bingc-passive-get-phone-form { padding: 0 !important; }
html #bingc-passive#bingc-passive form#bingc-passive-get-phone-form { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; margin: 0 !important; padding: 0 !important; }
html #bingc-passive#bingc-passive div.bingc-passive-get-phone-form-date-selection { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.5rem !important; height: auto !important; padding: 0 0 0.25rem !important; }
html #bingc-passive#bingc-passive :is(#bingc-passive-date-selection-select-hour, #bingc-passive-date-selection-select-minutes, #bingc-passive-date-selection-select-day) { position: relative !important; float: none !important; width: auto !important; min-width: 4.5rem !important; height: 3rem !important; margin: 0 !important; padding: 0 2rem 0 1rem !important; border: 1px solid #d5d7d2 !important; background: #fff !important; text-align: left !important; cursor: pointer; }
html #bingc-passive#bingc-passive :is(#bingc-passive-date-selection-select-hour, #bingc-passive-date-selection-select-minutes, #bingc-passive-date-selection-select-day):hover { background: #fff !important; border-color: #121311 !important; }
html #bingc-passive#bingc-passive :is(#bingc-passive-date-selection-selected-hour, #bingc-passive-date-selection-selected-minutes, #bingc-passive-date-selection-selected-day) { display: block !important; font: 600 1.0625rem/3rem var(--font-b), "Inter Tight", Arial, sans-serif !important; color: #121311 !important; }
html #bingc-passive#bingc-passive :is(#bingc-passive-date-selection-select-hour, #bingc-passive-date-selection-select-minutes, #bingc-passive-date-selection-select-day) > svg { position: absolute !important; top: 50% !important; right: 0.75rem !important; margin: -7px 0 0 !important; fill: #121311 !important; fill-opacity: 0.6 !important; }
html #bingc-passive#bingc-passive :is(#bingc-passive-date-selection-select-hour, #bingc-passive-date-selection-select-minutes, #bingc-passive-date-selection-select-day) > svg path { fill: #121311 !important; }
html #bingc-passive#bingc-passive [class*="-list-of-"][class*="container"] { top: 100% !important; margin-top: 2px !important; border: 1px solid #d5d7d2 !important; background: #fff !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16) !important; }
html #bingc-passive#bingc-passive [class*="-list-of-"][class*="container"] { width: max-content !important; max-width: none !important; }
html #bingc-passive#bingc-passive [class*="-list-of-"][class*="container"] ul { float: left !important; width: auto !important; min-width: 4.5rem !important; height: auto !important; background: #fff !important; }
html #bingc-passive#bingc-passive [class*="-list-of-"][class*="container"] li { padding: 0 1rem !important; white-space: nowrap !important; font: 400 0.9375rem/2.25rem var(--font-b), "Inter Tight", Arial, sans-serif !important; color: #121311 !important; background: transparent !important; text-align: left !important; }
html #bingc-passive#bingc-passive [class*="-list-of-"][class*="container"] li:hover { background: #f1f2ef !important; color: #e31825 !important; }
html #bingc-passive#bingc-passive div.bingc-passive-get-phone-form-input-border { display: none !important; }
html #bingc-passive#bingc-passive input#bingc-passive-get-phone-form-input { width: 100% !important; height: 3.25rem !important; margin: 0 !important; padding: 0 1rem !important; border: 1px solid #121311 !important; background: #fff !important; font: 400 1.0625rem/1.5 var(--font-b), "Inter Tight", Arial, sans-serif !important; color: #121311 !important; }
html #bingc-passive#bingc-passive input#bingc-passive-get-phone-form-input::placeholder { color: #565952 !important; opacity: 1 !important; font: 400 1.0625rem/1.5 var(--font-b), "Inter Tight", Arial, sans-serif !important; }
html #bingc-passive#bingc-passive input#bingc-passive-get-phone-form-input:focus-visible { outline: 2px solid #e31825 !important; outline-offset: 2px !important; }
html #bingc-passive#bingc-passive input#bingc-passive-get-phone-form-input.warning { border-color: #e31825 !important; box-shadow: 0 0 0 1px #e31825 !important; }
html #bingc-passive#bingc-passive a#bingc-passive-phone-form-button { display: block !important; width: 100% !important; height: 3.25rem !important; margin: 0 !important; padding: 0 !important; border-radius: 999px !important; background: #e31825 !important; font: 600 1rem/3.25rem var(--font-b), "Inter Tight", Arial, sans-serif !important; color: #fff !important; text-align: center !important; }
html #bingc-passive#bingc-passive a#bingc-passive-phone-form-button:hover { background: #c8111d !important; }
html #bingc-passive#bingc-passive a#bingc-passive-phone-form-button:focus-visible { outline: 2px solid #121311 !important; outline-offset: 2px !important; }
html #bingc-passive#bingc-passive div.bingc-passive-content div.bingc-phone-sample { padding: 0.5rem 0 0 !important; opacity: 1 !important; font: 400 0.8125rem/1.4 var(--font-b), "Inter Tight", Arial, sans-serif !important; color: #565952 !important; }
html #bingc-passive#bingc-passive div.bingc-passive-content div.bingc-phone-sample span { font: 400 0.8125rem/1.4 var(--font-b), "Inter Tight", Arial, sans-serif !important; color: #565952 !important; }
html #bingc-passive#bingc-passive div.bingc-passive-overlay a.bingc-powered-by { bottom: 0.625rem !important; right: 1rem !important; filter: invert(1) !important; opacity: 0.6; }
@media (max-width: 29.99rem) { html #bingc-passive#bingc-passive div.bingc-passive-overlay { padding: 2.25rem 1.25rem 3rem !important; } }

/* the two extra ways under the Binotel form (site-callback.js adds them): write a message through the chat, dial yourself */
html #bingc-passive#bingc-passive .b-cb-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid #d5d7d2; font: 500 0.9375rem/1.3 var(--font-b), "Inter Tight", Arial, sans-serif; }
html #bingc-passive#bingc-passive .b-cb-alt__write { margin: 0; padding: 0.7rem 1.25rem; border: 1px solid #121311; border-radius: 999px; background: transparent; font: inherit; color: #121311; cursor: pointer; }
html #bingc-passive#bingc-passive .b-cb-alt__write:hover { background: #121311; color: #fff; }
html #bingc-passive#bingc-passive .b-cb-alt__write:focus-visible, html #bingc-passive#bingc-passive .b-cb-alt__call:focus-visible { outline: 2px solid #e31825; outline-offset: 2px; }
html #bingc-passive#bingc-passive .b-cb-alt__call { height: auto !important; color: #121311 !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* the Binotel chat window: the widget gives it 340px and a 30px gap to the right edge, so on a 320px phone its left side went off the screen
   (found in the live check of 17.10.2026). Under 26rem the window takes the width of the screen less a 10px gap on both sides; its height
   never passes the free height above the dock (the widget scrolls the messages inside). */
@media (max-width: 25.99rem) {
  html bwchat#bwc-wrap #bwc-chat { left: 0.625rem !important; right: 0.625rem !important; width: auto !important; max-width: none !important; }
}
html bwchat#bwc-wrap #bwc-chat { max-height: calc(100vh - 8rem) !important; max-height: calc(100dvh - 8rem) !important; }

/* a short phone screen (320x568 and the like): the callback window is tighter, so the direct-dial line is on the first view, not below the edge */
@media (max-height: 40rem) {
  html #bingc-passive#bingc-passive div.bingc-passive-overlay { padding-top: 1.75rem !important; padding-bottom: 3rem !important; }
  html #bingc-passive#bingc-passive div.bingc-passive-content :is(div.bingc-we-will-call-you, div.bingc-we-already-call-you, div.bingc-we-will-call-you-later, div.bingc-passive-countdown-timer, div.bingc-something-went-wrong) { padding-bottom: 0.875rem !important; }
  html #bingc-passive#bingc-passive form#bingc-passive-get-phone-form { gap: 0.5rem !important; }
  html #bingc-passive#bingc-passive .b-cb-alt { margin-top: 0.875rem; padding-top: 0.875rem; gap: 0.5rem 1rem; }
}