/* ВАБ / ВАЭ: дополнения к карточкам и типографике шаблонов hair-page и mammo-page. */
.vab-page .vab-hero-card {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.vab-page .vab-hero-text,
.vab-page .vab-aftertext,
.vab-page .vab-list,
.vab-page .vab-doctor-content p,
.vab-page .vab-booking-content p {
    font-size: 16px;
    line-height: 1.7;
    color: #E9E9E9;
}

.vab-page .vab-hero-text { margin-bottom: 24px; }
.vab-page .vab-hero-note {
    margin-top: 16px;
    max-width: 640px;
    font-size: 14px;
    line-height: 1.6;
    color: #B0B0B0;
}

.vab-page .vab-hero-doctor {
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #25272D;
}
.vab-page .vab-hero-doctor img,
.vab-page .vab-doctor-card img {
    display: block;
    width: 100%;
    height: auto;
}
.vab-page .vab-hero-doctor figcaption { padding: 20px; }
.vab-page .vab-hero-doctor figcaption a {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
}
.vab-page .vab-hero-doctor figcaption span {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #E9E9E9;
}

.vab-page .vab-diagnostic-steps,
.vab-page .vab-procedure-steps {
    display: grid;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;
}
.vab-page .vab-diagnostic-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vab-page .vab-diagnostic-step { position: relative; }
.vab-page .vab-step-number {
    display: block;
    margin-bottom: 18px;
    font-size: 18px;
    font-weight: 600;
    color: #C8A254;
}
.vab-page .vab-card-label {
    color: #C8A254;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 14px;
}
.vab-page .vab-routes p + p { margin-top: 14px; }
.vab-page .vab-note,
.vab-page .vab-aftertext { margin-top: 20px; }
.vab-page .vab-subtitle { margin: 28px 0 20px; }
.vab-page .vab-subtitle h3,
.vab-page .vab-doctor-content h3,
.vab-page .vab-booking-content h3,
.vab-page .vab-form-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
}

.vab-page .vab-table-scroll {
    overflow-x: auto;
    border-radius: 8px;
    background: #101114;
}
.vab-page .vab-comparison {
    width: 100%;
    min-width: 580px;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 1.6;
    color: #E9E9E9;
}
.vab-page .vab-comparison caption {
    padding: 20px 24px;
    text-align: left;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
}
.vab-page .vab-comparison th,
.vab-page .vab-comparison td { padding: 16px 24px; text-align: left; }
.vab-page .vab-comparison thead { background: #25272D; }
.vab-page .vab-comparison th { font-weight: 500; }
.vab-page .vab-comparison thead th:last-child { color: #C8A254; }
.vab-page .vab-comparison tbody tr + tr { border-top: 1px solid #373A42; }
.vab-page .vab-comparison td:last-child { background: rgba(200, 162, 84, .06); }

.vab-page .vab-procedure-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vab-page .vab-procedure-steps .hair-step { min-height: 0; }
.vab-page .vab-procedure-steps .hair-step:last-child { grid-column: 1 / -1; }
.vab-page .vab-list { padding-left: 20px; margin: 0; }
.vab-page .vab-list li + li { margin-top: 8px; }
.vab-page .vab-faq details { display: block; }
.vab-page .vab-faq summary { list-style: none; }
.vab-page .vab-faq summary::-webkit-details-marker { display: none; }
.vab-page .vab-faq .content { display: block; }
.vab-page .vab-faq details[open] .title svg { transform: rotate(0deg); }
.vab-page .vab-doctor-card { overflow: hidden; border-radius: 8px; background: #101114; }
.vab-page .vab-doctor-content { padding: 24px; }
.vab-page .vab-doctor-content p { margin: 14px 0 20px; }

.vab-page .vab-booking { scroll-margin-top: calc(var(--header-height) + 20px); }
.vab-page .vab-booking .form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 30px;
}
.vab-page .vab-booking-content h2 {
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.35;
    color: #fff;
}
.vab-page .vab-booking-content h3 { margin: 20px 0 14px; }
.vab-page .vab-booking-phone { margin-top: 20px; }
.vab-page .vab-booking-phone a { color: #fff; font-size: 22px; font-weight: 500; }
.vab-page .vab-form-title { margin-bottom: 20px; }
.vab-page .vab-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #E9E9E9;
    font-size: 14px;
}
.vab-page .vab-field input { width: 100%; min-width: 0; box-sizing: border-box; }
.vab-page .vab-booking button { height: auto; min-height: 52px; line-height: 1.4; }
.vab-page a:focus-visible,
.vab-page button:focus-visible,
.vab-page .vab-faq summary:focus-visible,
.vab-page .vab-table-scroll:focus-visible { outline: 2px solid #C8A254; outline-offset: 4px; }
.vab-page .form-group-checkbox:has(input:focus-visible) label { outline: 2px solid #C8A254; outline-offset: 4px; }

@media (max-width: 1400px) {
    .vab-page .vab-hero-card { grid-template-columns: minmax(0, 1fr) 280px; }
    .vab-page .vab-diagnostic-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vab-page .vab-procedure-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
    .vab-page .vab-hero-card,
    .vab-page .vab-booking .form-layout { grid-template-columns: 1fr; }
    .vab-page .vab-hero-doctor { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; }
    .vab-page .vab-hero-doctor img { height: 180px; object-fit: cover; object-position: center top; }
    .vab-page .vab-booking .form-layout form { max-width: none; }
    .vab-page .vab-doctor-card { max-width: 380px; }
}
@media (max-width: 600px) {
    .vab-page .vab-diagnostic-steps,
    .vab-page .vab-procedure-steps { grid-template-columns: 1fr; }
    .vab-page .vab-hero-doctor { grid-template-columns: 110px minmax(0, 1fr); }
    .vab-page .vab-hero-doctor img { height: 145px; }
    .vab-page .vab-hero-doctor figcaption { padding: 16px; }
    .vab-page .vab-hero-doctor figcaption a { font-size: 16px; }
    .vab-page .vab-hero-doctor figcaption span { font-size: 12px; }
    .vab-page .vab-booking-content h2 { font-size: 24px; }
    .vab-page .vab-booking .form-layout { padding: 20px; }
    .vab-page .vab-comparison caption { font-size: 16px; }
    .vab-page .vab-comparison th,
    .vab-page .vab-comparison td { padding: 14px 16px; }
    .vab-page .hair-section-bottom .btn { width: 100%; height: auto; min-height: 52px; line-height: 1.4; }
}