/* Variant A: a horizontal studio header and a booking screen that fits the viewport. */
html:not(.admin-view) {
  --color-bg: #f7f7f7;
  --color-surface: #fff;
  --color-text: #171817;
  --color-text-muted: #686b69;
  --color-copper: #333531;
  --color-action: #171817;
  --color-action-text: #fff;
  --color-border: #d8d9d7;
  --color-control-border: #b7bab7;
}

html:not(.admin-view) .autumn-atmosphere {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

html:not(.admin-view) .autumn-leaf {
  position: absolute;
  top: -30px;
  width: 28px;
  height: 28px;
  background: url("./assets/autumn-leaf.webp") center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  animation: variant-a-leaf-fall 12s linear infinite;
}

html:not(.admin-view) .autumn-leaf-one { left: 2.8%; --leaf-x: 33px; animation-delay: -2s; }
html:not(.admin-view) .autumn-leaf-two { left: 17%; width: 20px; height: 20px; --leaf-x: -23px; animation-delay: -7s; animation-duration: 15s; }
html:not(.admin-view) .autumn-leaf-three { right: 22%; width: 25px; height: 25px; --leaf-x: 28px; animation-delay: -10s; animation-duration: 17s; }
html:not(.admin-view) .autumn-leaf-four { right: 5%; width: 18px; height: 18px; --leaf-x: -16px; animation-delay: -4s; animation-duration: 14s; }

@keyframes variant-a-leaf-fall {
  0% { opacity: 0; transform: translate3d(0, -8px, 0) rotate(-25deg); }
  12% { opacity: .62; }
  72% { opacity: .55; }
  100% { opacity: 0; transform: translate3d(var(--leaf-x), 190px, 0) rotate(210deg); }
}

@media (min-width: 1024px) {
  html:not(.admin-view) .client-shell {
    position: relative;
    min-height: 100dvh;
    display: block;
  }
  html:not(.admin-view) .client-editorial {
    position: relative;
    top: auto;
    width: 100%;
    height: 154px;
    min-height: 0;
    padding: 12px clamp(32px, 4.3vw, 55px);
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    background: #fff;
  }
  html:not(.admin-view) .client-editorial .client-hero {
    position: relative;
    z-index: 2;
    height: 130px;
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
  }
  html:not(.admin-view) .client-editorial .master-avatar {
    order: -1;
    flex: 0 0 130px;
    width: 130px;
    height: 130px;
    aspect-ratio: auto;
    margin: 0;
    border: 0;
    border-radius: 2px;
    background-size: cover;
    background-position: center 24%;
    box-shadow: none;
  }
  html:not(.admin-view) .client-editorial .hero-copy {
    width: auto;
    padding: 16px 0 0;
    border: 0;
  }
  html:not(.admin-view) .client-editorial .hero-copy h1 {
    color: var(--color-text);
    font-size: 43px;
    line-height: 1.1;
  }
  html:not(.admin-view) .client-editorial .master-role {
    margin-top: 10px;
    color: var(--color-text-muted);
    font-size: 15px;
    font-weight: 400;
  }
  html:not(.admin-view) .client-editorial .hero-location:not([hidden]) {
    position: absolute;
    top: 36px;
    right: 0;
    width: max-content;
    max-width: 270px;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--color-text);
    text-align: right;
  }
  html:not(.admin-view) .client-editorial .location-pin { display: none; }
  html:not(.admin-view) .client-editorial .hero-location-address {
    font-size: 13px;
    font-weight: 400;
  }
  html:not(.admin-view) .client-editorial .hero-location-action {
    justify-content: flex-end;
    margin-top: 12px;
    color: var(--color-text);
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  html:not(.admin-view) .client-workspace {
    position: static;
    min-height: calc(100dvh - 154px);
    padding: 0 clamp(25px, 6.875vw, 110px) 0;
    background: var(--color-bg);
  }
  html:not(.admin-view) .client-nav,
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) .client-nav {
    position: absolute;
    z-index: 3;
    top: 0;
    left: clamp(375px, 31vw, 505px);
    width: max-content;
    height: 154px;
    display: flex;
    align-items: stretch;
    gap: 36px;
    margin: 0;
    border: 0;
  }
  html:not(.admin-view) .client-nav-button,
  html:not(.admin-view) .client-nav-button:first-child,
  html:not(.admin-view) .client-nav-button:last-child {
    height: 154px;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--color-text-muted);
    font-size: 16px;
  }
  html:not(.admin-view) .client-nav-button.active::after {
    bottom: 0;
    height: 2px;
    background: var(--color-text);
  }
  html:not(.admin-view) .booking-step-services .step-title { padding-top: 11px; }
  html:not(.admin-view) .booking-step-services .step-title h2 { font-size: 52px; }
  html:not(.admin-view) .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 34px;
    margin-top: 35px;
  }
  html:not(.admin-view) .service-card { min-height: 174px; padding: 17px 0; }
  html:not(.admin-view) .service-card-with-photo { grid-template-columns: 94px minmax(0, 1fr); gap: 20px; }
  html:not(.admin-view) .service-photo { width: 94px; height: 138px; }
  html:not(.admin-view) .service-body h3 { font-size: 17px; }
  html:not(.admin-view) .service-meta { margin-top: 12px; font-size: 14px; }
  html:not(.admin-view) .service-next { margin-top: 12px; font-size: 11px; }
  html:not(.admin-view) .service-skeleton-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 34px; }
  html:not(.admin-view) .service-skeleton-card { grid-template-columns: 94px minmax(0,1fr); gap: 20px; min-height: 174px; padding: 17px 0; }
  html:not(.admin-view) .service-skeleton-card .skeleton-photo { width: 94px; height: 138px; }

  html:not(.admin-view) .calendar-card.has-service {
    position: relative;
    min-height: 0;
  }
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) .selected-service-compact {
    min-height: 108px;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
    gap: 0 30px;
    margin: 0;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--color-border);
  }
  html:not(.admin-view) .selected-service-compact button {
    grid-column: 1;
    grid-row: 1;
    width: 140px;
    min-height: 44px;
    justify-self: start;
    padding: 0 12px;
    border: 1px solid var(--color-text);
    border-radius: 4px;
    color: var(--color-text);
    background: transparent;
    font-size: 14px;
    text-decoration: none;
  }
  html:not(.admin-view) .selected-service-compact div { grid-column: 2; grid-row: 1; }
  html:not(.admin-view) .selected-service-compact strong {
    font-family: var(--font-editorial);
    font-size: 42px;
    font-weight: 400;
    line-height: 1.16;
  }
  html:not(.admin-view) .selected-service-compact span { margin-top: 8px; color: var(--color-text-muted); font-size: 14px; }
  html:not(.admin-view) .calendar-card.has-service .datetime-section-date {
    width: calc(100% - 385px);
    padding: 109px 0 26px;
    border-bottom: 1px solid var(--color-border);
  }
  html:not(.admin-view) .datetime-section-title {
    color: var(--color-text);
    font-size: 15px;
    font-weight: 500;
  }
  html:not(.admin-view) .date-strip,
  html:not(.admin-view) .time-grid { max-width: 780px; margin-top: 21px; }
  html:not(.admin-view) .date-strip.has-pagination,
  html:not(.admin-view) .time-grid.has-pagination {
    display: flex;
    align-items: stretch;
    gap: 9px;
  }
  html:not(.admin-view) .date-page-prev:disabled,
  html:not(.admin-view) .time-page-button:disabled { display: none; }
  html:not(.admin-view) .date-page-list,
  html:not(.admin-view) .time-page-list {
    flex: 1 1 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }
  html:not(.admin-view) .calendar-card.has-service .date-page-list,
  html:not(.admin-view) .calendar-card.has-service .time-page-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  html:not(.admin-view) .date-page-button,
  html:not(.admin-view) .time-page-button { min-height: 58px; }
  html:not(.admin-view) .date-page-button,
  html:not(.admin-view) .time-page-button {
    width: 46px;
    flex: 0 0 46px;
  }
  html:not(.admin-view) .date-button,
  html:not(.admin-view) .time-page-list .time-button {
    min-height: 58px;
    border-radius: 3px;
    font-size: 16px;
  }
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) :is(.date-button, .time-button) {
    min-height: 58px;
  }
  html:not(.admin-view) .date-button strong { font-size: 16px; }
  html:not(.admin-view) .calendar-card.has-service .booking-step-times {
    width: calc(100% - 385px);
    padding: 36px 0 26px;
    border-bottom: 1px solid var(--color-border);
  }
  html:not(.admin-view) .calendar-card.has-service .service-result-inline:not([hidden]) {
    top: 147px;
    right: 25px;
    width: 250px;
  }
  html:not(.admin-view) .calendar-card.has-service .service-result-inline .result-work-comparison { width: 100%; }
  html:not(.admin-view) .calendar-card.has-service .service-result-copy {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
  }
  html:not(.admin-view) .calendar-card.has-service .service-result-copy strong { font-size: 12px; }
  html:not(.admin-view) .calendar-card.has-service .service-result-copy span { display: none; }
  html:not(.admin-view) .calendar-card.has-service .service-result-copy button { font-size: 11px; white-space: nowrap; }
  html:not(.admin-view) .booking-summary {
    position: relative;
    width: calc(100% - 385px);
    min-height: 56px;
    height: 56px;
    grid-template-columns: minmax(0, 1fr) 120px 220px;
    align-items: center;
    gap: 0;
    margin: 16px 0 0;
    padding: 1px 0 0;
    border-top: 1px solid var(--color-border);
    background: transparent;
  }
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) .booking-summary {
    padding: 0;
  }
  html:not(.admin-view) .booking-summary::before { display: none; }
  html:not(.admin-view) .summary-mobile-copy strong { font-size: 20px; }
  html:not(.admin-view) #summary-price { justify-content: flex-start; border: 0; font-size: 20px; }
  html:not(.admin-view) .summary-actions { padding: 0; border: 0; }
  html:not(.admin-view) #book-button { min-height: 54px; border-radius: 3px; font-size: 16px; }
}

@media (min-width: 1024px) and (max-width: 1399px) {
  html:not(.admin-view) .client-workspace { padding-right: 25px; padding-left: 25px; }
}

@media (min-width: 1024px) and (max-height: 760px) {
  html:not(.admin-view) .calendar-card.has-service .datetime-section-date { padding-top: 85px; }
  html:not(.admin-view) .calendar-card.has-service .booking-step-times { padding-top: 30px; }
  html:not(.admin-view) .calendar-card.has-service .service-result-inline:not([hidden]) {
    top: 115px;
    width: 220px;
  }
}

@media (max-width: 1023px) {
  html:not(.admin-view) .autumn-leaf { width: 14px; height: 14px; }
  html:not(.admin-view) .autumn-leaf-two { width: 11px; height: 11px; }
  html:not(.admin-view) .autumn-leaf-three { width: 12px; height: 12px; }
  html:not(.admin-view) .autumn-leaf-four { width: 9px; height: 9px; }
  html:not(.admin-view) .app-main,
  html:not(.admin-view) .app-main:is([data-client-stage="service"], [data-client-stage="works"], [data-client-stage="visits"]),
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) {
    width: 100%;
    max-width: none;
    padding: 0;
  }
  html:not(.admin-view) .client-shell { display: block; min-height: 100dvh; }
  html:not(.admin-view) .client-editorial {
    position: relative;
    height: 58px;
    display: block;
    padding: 8px 16px;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    background: #fff;
  }
  html:not(.admin-view) .client-editorial .client-hero {
    position: relative;
    z-index: 2;
    min-height: 0;
    height: 51px;
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
  }
  html:not(.admin-view) .client-editorial .master-avatar {
    order: -1;
    flex: 0 0 38px;
    width: 38px;
    height: 42px;
    margin: 0;
    border-radius: 2px;
    background-position: center 24%;
  }
  html:not(.admin-view) .client-editorial .hero-copy { padding: 0; }
  html:not(.admin-view) .client-editorial .hero-copy h1 { margin: 0; font-size: 28px; }
  html:not(.admin-view) .client-editorial .master-role { margin-top: 1px; color: var(--color-text-muted); font-size: 10px; }
  html:not(.admin-view) .client-editorial .hero-location:not([hidden]) {
    position: absolute;
    top: 18px;
    right: 0;
    width: auto;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
  }
  html:not(.admin-view) .client-editorial .location-pin,
  html:not(.admin-view) .client-editorial .hero-location-address,
  html:not(.admin-view) .client-editorial .hero-location-action svg { display: none; }
  html:not(.admin-view) .client-editorial .hero-location-action { display: block; color: var(--color-text); font-size: 0; }
  html:not(.admin-view) .client-editorial .hero-location-action::before {
    content: "Адрес ↗";
    font-size: 11px;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  html:not(.admin-view) .client-workspace {
    position: static;
    min-height: calc(100dvh - 58px);
    display: block;
    padding: 0 16px 68px;
    background: var(--color-bg);
  }
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) .client-workspace {
    padding-bottom: 0;
  }
  html:not(.admin-view) .client-nav,
  html:not(.admin-view) .app-main:is([data-client-stage="service"], [data-client-stage="works"], [data-client-stage="visits"]) .client-nav,
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) .client-nav {
    position: relative;
    height: 39px;
    display: flex;
    align-items: stretch;
    gap: 24px;
    margin: 0 -16px;
    padding: 0 16px;
    border-bottom: 1px solid var(--color-border);
    background: #fff;
  }
  html:not(.admin-view) .client-nav-button,
  html:not(.admin-view) .client-nav-button:first-child,
  html:not(.admin-view) .client-nav-button:last-child {
    min-height: 39px;
    height: 39px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 13px;
  }
  html:not(.admin-view) .client-nav-button.active { border-bottom-color: var(--color-text); }
  html:not(.admin-view) .client-nav-button.active::after { display: none; }
  html:not(.admin-view) .app-main[data-client-stage="works"] .client-hero { height: 51px; }
  html:not(.admin-view) .app-main[data-client-stage="works"] .master-avatar,
  html:not(.admin-view) .app-main[data-client-stage="works"] .master-role,
  html:not(.admin-view) .app-main[data-client-stage="works"] .hero-location { display: block !important; }
  html:not(.admin-view) .app-main[data-client-stage="works"] .client-nav { margin: 0 -16px; }
  html:not(.admin-view) .app-main[data-client-stage="works"] .hero-copy h1 { font-size: 28px; }
  html:not(.admin-view) .booking-step-services .step-title { padding-top: 10px; }
  html:not(.admin-view) .service-grid { margin-top: 8px; }
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) .selected-service-compact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin: 0;
    padding: 9px 0 7px;
    border-bottom: 1px solid var(--color-border);
  }
  html:not(.admin-view) .selected-service-compact button {
    order: -1;
    min-height: 20px;
    padding: 0;
    border: 0;
    color: var(--color-text);
    background: transparent;
    font-size: 13px;
  }
  html:not(.admin-view) .selected-service-compact strong {
    font-family: var(--font-editorial);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
  }
  html:not(.admin-view) .selected-service-compact span { color: var(--color-text-muted); font-size: 11px; }
  html:not(.admin-view) .service-result-inline:not([hidden]) { align-items: flex-start; gap: 14px; padding: 6px 0; }
  html:not(.admin-view) .service-result-inline .result-work-comparison { flex: 0 0 155px; width: 155px; }
  html:not(.admin-view) .service-result-copy { align-self: center; gap: 11px; }
  html:not(.admin-view) .service-result-copy strong { font-size: 13px; }
  html:not(.admin-view) .service-result-copy span { display: block; font-size: 11px; }
  html:not(.admin-view) .service-result-copy button { font-size: 11px; }
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) .datetime-section-date,
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) .booking-step-times {
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
  }
  html:not(.admin-view) .datetime-section-title { font-family: var(--font-ui); font-size: 13px; font-weight: 500; }
  html:not(.admin-view) .datetime-section-date .datetime-section-title,
  html:not(.admin-view) .booking-step-times .datetime-section-title { font-size: 0; }
  html:not(.admin-view) .datetime-section-date .datetime-section-title::after { content: "Дата"; font-size: 13px; }
  html:not(.admin-view) .booking-step-times .datetime-section-title::after { content: "Время"; font-size: 13px; }
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) .date-strip,
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) .time-grid { margin-top: 7px; }
  html:not(.admin-view) .date-button,
  html:not(.admin-view) .time-button,
  html:not(.admin-view) .date-page-button,
  html:not(.admin-view) .time-page-button { min-height: 38px; border-radius: 3px; }
  html:not(.admin-view) .date-button strong,
  html:not(.admin-view) .time-button { font-size: 12px; }
  html:not(.admin-view) .date-strip.has-pagination { grid-template-columns: minmax(0,1fr) 34px; }
  html:not(.admin-view) .date-page-prev:disabled,
  html:not(.admin-view) .time-page-button:disabled { display: none; }
  html:not(.admin-view) .date-page-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  html:not(.admin-view) .time-grid.has-pagination { grid-template-columns: minmax(0,1fr) 34px; }
  html:not(.admin-view) .time-page-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) .booking-summary {
    position: relative;
    right: 0;
    bottom: auto;
    left: 0;
    width: calc(100% + 32px);
    min-height: 63px;
    grid-template-columns: minmax(0,1fr) 128px;
    margin: 12px -16px 0;
    padding: 8px 16px max(8px,env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
  }
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) #book-button {
    min-height: 46px;
    padding: 8px;
    border-radius: 3px;
    font-size: 13px;
  }
}

@media (max-width: 359px) and (max-height: 640px) {
  html:not(.admin-view) .client-workspace { padding-bottom: 60px; }
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) .client-workspace { padding-bottom: 0; }
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) .booking-summary { margin-top: 0; }
  html:not(.admin-view) .service-result-inline .result-work-comparison { flex-basis: 126px; width: 126px; }
  html:not(.admin-view) .service-result-copy span { display: none; }
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) .datetime-section-date,
  html:not(.admin-view) .app-main:is([data-client-stage="datetime"], [data-client-stage="ready"]) .booking-step-times { padding: 5px 0; }
  html:not(.admin-view) .client-editorial .hero-copy h1 { font-size: 25px; }
}

@media (max-width: 1023px) and (min-height: 780px) {
  html:not(.admin-view) .service-result-inline .result-work-comparison {
    flex-basis: clamp(155px, 54vw, 210px);
    width: clamp(155px, 54vw, 210px);
  }
}

html:not(.admin-view) :is(.service-select, .selected-service-compact button, .date-button, .date-page-button, .time-button, .time-page-button, .primary-button, .client-nav-button, .hero-location, .service-result-copy button) {
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  html:not(.admin-view) :is(.service-select, .selected-service-compact button, .client-nav-button, .hero-location, .service-result-copy button):hover { transform: translateY(-2px); }
  html:not(.admin-view) :is(.date-button, .date-page-button, .time-button, .time-page-button):not(:disabled):hover {
    transform: translateY(-2px);
    border-color: #777a76;
    box-shadow: 0 6px 14px rgb(0 0 0 / 8%);
  }
  html:not(.admin-view) .primary-button:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 18px rgb(0 0 0 / 16%);
  }
}
html:not(.admin-view) :is(.service-select, .selected-service-compact button, .date-button, .date-page-button, .time-button, .time-page-button, .primary-button, .client-nav-button):not(:disabled):active {
  transform: translateY(0) scale(.985);
  transition-duration: 100ms;
}
html:not(.admin-view) :is(.service-select, .selected-service-compact button, .date-button, .date-page-button, .time-button, .time-page-button, .primary-button, .client-nav-button, .hero-location):focus-visible {
  outline: 2px solid #8b5933;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.admin-view) .autumn-atmosphere { display: none; }
  html:not(.admin-view) :is(.service-select, .selected-service-compact button, .date-button, .date-page-button, .time-button, .time-page-button, .primary-button, .client-nav-button, .hero-location, .service-result-copy button) { transition: none !important; }
}