:root {
  --z-fon: #FFFFFF;
  --z-tekst: #111111;
  --z-tih: #5c5c5c;
  --z-akcent: #E2B66B;
  --z-akcent-tekst: #111111;
  --z-ramka: #E3E3E1;
  --z-shrift: Jost, Arial, sans-serif;
  --z-shrift-zaglavie: Jost, Arial, sans-serif;
  --z-radius: 2px;
}

* { box-sizing: border-box; }
html { background: var(--z-fon); color: var(--z-tekst); font-family: var(--z-shrift); }
body { margin: 0; min-width: 320px; line-height: 1.5; }
a { color: var(--z-tekst); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--z-shrift-zaglavie); font-weight: 500; }
h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); line-height: 1.03; margin-bottom: 12px; }
h2 { font-size: 1.6rem; line-height: 1.15; margin-bottom: 16px; }
h3 { font-size: 1rem; margin-bottom: 8px; }

.z-site-head { max-width: 1180px; margin: 0 auto; padding: 24px 24px 0; }
.z-site-link, .z-back-link { text-decoration: none; font-size: .9rem; }
.z-ramka { max-width: 1180px; margin: 0 auto; padding: 42px 24px 60px; }
.z-intro { padding: 0 0 30px; }
.z-kicker { border-left: 2px solid var(--z-akcent); margin-bottom: 8px; padding-left: 8px; color: var(--z-tekst); font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.z-muted { color: var(--z-tih); font-size: .92rem; }
.z-steps { display: flex; gap: 10px; list-style: none; margin: 0 0 34px; padding: 0; color: var(--z-tih); font-size: .86rem; }
.z-steps li { align-items: center; display: flex; gap: 8px; }
.z-steps li + li::before { color: #5c5c5c; content: "/"; margin-right: 2px; }
.z-steps span { align-items: center; border: 1px solid var(--z-ramka); border-radius: 50%; display: inline-flex; height: 26px; justify-content: center; width: 26px; }
.z-steps .is-current { color: var(--z-tekst); font-weight: 700; }
.z-steps .is-current span { background: var(--z-tekst); border-color: var(--z-tekst); color: var(--z-fon); }
.z-steps .is-done span { background: var(--z-ramka); color: var(--z-tekst); }
.z-error { align-items: flex-start; background: var(--z-fon); border: 1px solid var(--z-ramka); border-left: 4px solid var(--z-akcent); border-radius: var(--z-radius); display: flex; flex-direction: column; gap: 5px; margin: 0 0 24px; padding: 16px 18px; }
.z-field-error { color: #9b1c1c; display: block; font-size: .84rem; margin-top: 6px; }
.z-error a { margin-top: 4px; }
.z-layout { align-items: start; display: grid; gap: 42px; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); }
.z-main { min-width: 0; }
.z-summary { background: var(--z-fon); border: 1px solid var(--z-ramka); border-radius: var(--z-radius); padding: 24px; position: sticky; top: 20px; }
.z-summary h2 { margin-bottom: 20px; }
.z-section-head { margin-bottom: 24px; }
.z-section-head p { color: var(--z-tih); margin-bottom: 0; }
.z-search { color: var(--z-tih); display: block; font-size: .86rem; margin-bottom: 18px; }
.z-search input, .z-field input, .z-field textarea, .z-date input { background: var(--z-fon); border: 1px solid var(--z-ramka); border-radius: var(--z-radius); color: var(--z-tekst); display: block; margin-top: 7px; padding: 12px 14px; width: 100%; }
.z-search input:focus, .z-field input:focus, .z-field textarea:focus, .z-date input:focus { border-color: #111; outline: 2px solid #111; outline-offset: 1px; }
.z-categories { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.z-categories a { border: 1px solid var(--z-ramka); border-radius: 99px; padding: 7px 12px; text-decoration: none; }
.z-categories a:hover, .z-categories a:focus { background: var(--z-tekst); color: var(--z-fon); }
.z-category { border-top: 1px solid var(--z-ramka); padding: 25px 0 10px; }
.z-category > h2 { font-size: 1.25rem; }
.z-service-group { border: 1px solid var(--z-ramka); border-radius: var(--z-radius); margin: 12px 0; overflow: hidden; }
.z-group-head { padding: 16px 18px 10px; }
.z-group-head h3 { margin-bottom: 3px; }
.z-group-head .z-muted { font-size: .82rem; }
.z-variant + .z-variant { border-top: 1px solid var(--z-ramka); }
.z-service { align-items: center; display: grid; gap: 14px; grid-template-columns: auto 1fr; padding: 15px 18px; }
.z-service:hover { background: var(--z-fon); }
.z-service input { accent-color: var(--z-akcent); height: 19px; width: 19px; }
.z-service-info { display: flex; flex-direction: column; gap: 2px; }
.z-service-info span { color: var(--z-tih); font-size: .88rem; }
.z-parameters { border-top: 1px solid var(--z-ramka); margin: 0; padding: 12px 18px 15px; }
.z-parameters legend { color: var(--z-tih); font-size: .84rem; padding: 0 4px; }
.z-parameters label { align-items: center; display: inline-flex; gap: 6px; margin: 4px 10px 4px 0; }
.z-parameters input { accent-color: var(--z-akcent); }
.z-summary details { border-bottom: 1px solid var(--z-ramka); margin-bottom: 20px; padding-bottom: 15px; }
.z-summary summary { cursor: pointer; display: flex; justify-content: space-between; list-style: none; }
.z-summary summary::-webkit-details-marker { display: none; }
.z-summary details p { align-items: baseline; border-top: 1px solid var(--z-ramka); display: flex; font-size: .9rem; justify-content: space-between; margin: 14px 0 0; padding-top: 10px; }
.z-summary-row { border-bottom: 1px solid var(--z-ramka); display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 11px 0; }
.z-summary-row span { color: var(--z-tih); font-size: .86rem; }
.mahni { background: none; border: 0; color: var(--z-tekst); font-size: .8rem; margin-left: 8px; padding: 0; text-decoration: underline; }
.z-total { display: flex; justify-content: space-between; margin: 20px 0 8px; }
.z-primary, .z-secondary, .z-danger { border: 1px solid var(--z-akcent); border-radius: var(--z-radius); padding: 12px 16px; }
.z-primary { background: var(--z-tekst); border-color: var(--z-tekst); color: var(--z-fon); width: 100%; }
.z-primary:disabled { cursor: not-allowed; opacity: .5; }
.z-secondary { background: var(--z-fon); color: var(--z-tekst); }
.z-help { border-top: 1px solid var(--z-ramka); display: flex; flex-direction: column; gap: 3px; margin-top: 25px; padding-top: 16px; }
.z-back { background: none; border: 0; color: var(--z-tekst); margin-bottom: 16px; padding: 0; }
.z-staff, .z-days { border: 0; margin: 0 0 28px; padding: 0; }
.z-staff legend, .z-days legend { font-weight: 700; margin-bottom: 10px; }
.z-staff { display: flex; flex-wrap: wrap; gap: 10px; }
.z-staff label { align-items: center; border: 1px solid var(--z-ramka); border-radius: var(--z-radius); display: inline-flex; gap: 9px; padding: 10px 13px; }
.z-staff label:has(input:checked) { border-color: var(--z-akcent); box-shadow: 0 0 0 1px var(--z-akcent); }
.z-staff input { accent-color: var(--z-akcent); }
.z-avatar { align-items: center; background: var(--z-ramka); border-radius: 50%; display: inline-flex; height: 28px; justify-content: center; width: 28px; }
.z-days { border-top: 1px solid var(--z-ramka); padding-top: 24px; }
.z-day-list { display: grid; gap: 8px; grid-template-columns: repeat(7, 1fr); margin-bottom: 16px; }
.z-day { background: var(--z-fon); border: 1px solid var(--z-ramka); border-radius: var(--z-radius); color: var(--z-tekst); display: flex; flex-direction: column; gap: 3px; padding: 9px 5px; }
.z-day span { color: var(--z-tih); font-size: .75rem; }
.z-day.is-selected { background: var(--z-tekst); border-color: var(--z-tekst); color: var(--z-fon); }
.z-day.is-selected span { color: var(--z-fon); }
.z-date { color: var(--z-tih); display: block; font-size: .85rem; margin-bottom: 12px; max-width: 240px; }
.z-date input { border-radius: var(--z-radius); }
.z-times { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.z-time { background: var(--z-fon); border: 1px solid var(--z-ramka); border-radius: var(--z-radius); color: var(--z-tekst); padding: 13px 8px; }
.z-time:hover, .z-time:focus { background: var(--z-tekst); color: var(--z-fon); }
.z-empty { border: 1px dashed var(--z-ramka); border-radius: var(--z-radius); padding: 20px; }
.z-empty p { color: var(--z-tih); margin-bottom: 0; }
.z-selected-time { background: var(--z-fon); border-left: 3px solid var(--z-akcent); display: flex; flex-direction: column; gap: 3px; margin-bottom: 24px; padding: 13px 15px; }
.z-selected-time span { color: var(--z-tih); font-size: .88rem; }
.z-field { display: block; margin: 0 0 16px; }
.z-field .z-muted { font-weight: 400; }
.z-field textarea { min-height: 90px; resize: vertical; }
.z-vat-note { margin-top: 8px; }
.z-honeypot { height: 0; left: -9999px; overflow: hidden; position: absolute; width: 0; }
.z-footer { color: var(--z-tih); font-size: .85rem; margin-top: 40px; }
.js-only { display: none; }
.js .js-only { display: block; }
.js .z-search { display: block; }
.js .js-only-hide { display: none; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; }

:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.z-appointment { margin: 0 auto; max-width: 700px; padding: 48px 24px 70px; }
.z-appointment h1 { margin-top: 28px; }
.z-card { background: var(--z-fon); border: 1px solid var(--z-ramka); border-radius: var(--z-radius); margin-top: 28px; padding: 26px; }
.z-card h2 { font-size: 1.25rem; }
.z-appointment-services { list-style: none; margin: 0 0 24px; padding: 0; }
.z-appointment-services li { border-bottom: 1px solid var(--z-ramka); display: flex; flex-direction: column; gap: 3px; padding: 12px 0; }
.z-appointment-services span { color: var(--z-tih); font-size: .9rem; }
.z-appointment-time { font-size: 1.2rem; margin: 22px 0 0; }
.z-notice { border-left: 3px solid var(--z-akcent); margin: 24px 0; padding-left: 14px; }
.z-cancel-form { margin-top: 25px; }
.z-danger { background: var(--z-fon); color: var(--z-tekst); }
.z-danger:hover { background: var(--z-tekst); color: var(--z-fon); }

@media (max-width: 760px) {
  .z-site-head { padding-left: 18px; padding-right: 18px; }
  .z-ramka { padding: 28px 18px 42px; }
  .z-layout { display: block; }
  .z-summary { margin-top: 30px; position: static; }
  .z-steps { font-size: .78rem; gap: 6px; }
  .z-steps li + li::before { margin-right: 0; }
  .z-steps span { height: 23px; width: 23px; }
  .z-day-list { gap: 4px; }
  .z-day { border-radius: 10px; padding: 8px 2px; }
  .z-day span { font-size: .68rem; }
  .z-day strong { font-size: .84rem; }
  .z-appointment { padding: 30px 18px 50px; }
}

@media (max-width: 430px) {
  .z-service { gap: 9px; padding: 13px; }
  .z-category { padding-top: 20px; }
  .z-summary { padding: 20px; }
}