/* Общие стили */
html {overflow-y: scroll; overflow-x: hidden; scroll-behavior: smooth;}
body {margin: 0; padding: 0; background-color: #fff; color: #333; font-family: 'Inter';}
a, img {-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; outline: none; overflow-x: hidden;}

.container {width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
.grid{display: grid;}
.grid-ai{grid-template-columns: auto 1fr;}
.grid-ia{grid-template-columns: 1fr auto;}
.ai-s {align-items: start;}
.ai-c {align-items: center;}
.ai-e {align-items: end;}
.ji-e {justify-items: end;}
.cntr{place-items: center;}


img{width: 100%; padding: 0; margin: 0; display: block;}
h1,h2,h3{color: #0B0C15;}
h1{font-size: 18px; padding: 0; margin: 0;}

.block{box-sizing: border-box; border-radius: 10px; box-shadow: 0 4px 80px rgba(0,0,0,0.1); background: #fff;}

.full{width: 100%;}
.body{color: #939393; font-size: 12px;}
.body a{color: #235AFF; text-decoration: none;}
.body a:hover{text-decoration: underline;}



/* Шапка */
header {background: #fff; box-shadow: 0 4px 80px rgba(0,0,0,0.1);}
header a.logo {grid-template-columns: auto 1fr; gap: 10px; font-size: 20px; font-weight: bold; color: #235AFF;}
header>div{grid-template-columns: 1fr max(29vw, 380px) 1fr; width: 100%; height: 80px;}
header .search{background: #F5F5F5; grid-template-columns: auto 1fr; padding: 10px 12px; gap:5px; border-radius: 10px;}
header input:-webkit-autofill,
header input:-webkit-autofill:hover, 
header input:-webkit-autofill:focus,
header input:-webkit-autofill:active {-webkit-background-clip: text; -webkit-text-fill-color: #000 !important; -webkit-box-shadow: 0 0 0px 1000px #F5F5F5 inset !important; box-shadow: 0 0 0px 1000px #F5F5F5 inset !important; background-color: #F5F5F5 !important; background-image: none !important; transition: background-color 5000s ease-in-out 0s; border: none; outline: none;}
header .search svg{width: 20px; height: 20px;}
header .search input{background: #F5F5F5;border: none; background: transparent; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; width: 100%;}
header a{text-decoration: none; }
header .cabinet{justify-content: end;}


/*поисковый выпадающий результат*/
.search-dropdown {margin-top: 8px;}
.search-category {padding: 8px 16px; font-size: 12px; color: #666; background: #f5f5f5; font-weight: 500;}
.search-result-item {display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: #333; border-bottom: 1px solid #eee; transition: background 0.2s;}
.search-result-item:hover {background: #f5f5f5;}
.search-result-icon {width: 40px; height: 40px; border-radius: 8px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.search-result-icon img {width: 100%; height: 100%; object-fit: cover;}
.search-result-icon svg {width: 24px; height: 24px; color: #999;}
.search-result-info {flex: 1;}
.search-result-name {font-weight: 500; margin-bottom: 4px;}
.search-result-desc {font-size: 12px; color: #999;}
.search-empty {padding: 20px; text-align: center; color: #999;}

/* -------------------------------------ГЛАВНАЯ--------------------------------------*/
/* модальное окно */
#modal-map{width: 100%; height: 400px;}
#modal-map [class*="ymaps-"][class*="-copyrights-promo"] {display: none !important;}
#modal-map [class*="ymaps-"][class*="-balloon"] {border-radius: 8px;}
#location-modal{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;}
#location-modal>div{background: white; width: 80%; max-width: 800px; margin: 50px auto; padding: 20px; border-radius: 10px;}
#location-modal .panel{margin-top: 20px; text-align: right;}
@media (max-width: 768px) {
    #modal-map{width: 100%; height: calc(100vh - 270px);}
}
/* контент */
#home-1 {grid-template-columns: 268px 1fr; margin-top: 40px; grid-column-gap: 40px;}
#home-1 .box-1{width: 100%; height: 40px; grid-template-columns: auto auto 1fr; grid-column-gap: 10px;}
#home-1 .box-1 span{color: #939393; font-size: 14px;}
#home-1 .box-1 p{margin: 0; padding: 0; color: #0B0C15; font-size: 16px;}
#home-1 .box-2 a{text-decoration: none; font-size: 13px;}
#home-1 .box-2 a.active svg{filter: brightness(0) invert(1) !important;}
#home-1 .box-2 a svg{filter: brightness(0) invert(63%);}
#home-1 .box-2 a:hover svg{filter: brightness(0) invert(33%);}
#city-name{cursor: pointer;}

@media (max-width: 1440px) {
    #home-1 .box-2 a{font-size: 0.86vw;}
}
@media (max-width: 1300px) {
    #home-1{grid-template-columns: 1fr; grid-column-gap: 40px;}
    #home-1 .box-2{padding-top: 30px;}
    #home-1 .box-2 a{font-size: 1.2vw;}    
}
@media (min-width: 1001px) {
    #home-1 .box-2 nav>div{display: grid; width: 100%; height: 40px; justify-content: space-between; grid-auto-flow: column; gap: clamp(5px, 1.3vw, 30px);}
}
@media (max-width: 1000px) {
    #home-1 .box-2{width: 100%; transition: all 0.5s; position: relative;}    
    #home-1 .box-2 a{font-size: 11px;}
    #home-1 .box-2 nav{--grid-gap:1rem;--grid-margin:1rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox; display:flex;overflow-x:auto;padding-left:var(--grid-margin);line-height:1; padding: 0 !important;}
    #home-1 .box-2 nav::-webkit-scrollbar{display:none;}
    #home-1 .box-2 nav>div {display: block; display:-webkit-inline-box; gap: 10px; display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin:0;padding:0;padding-right:var(--grid-margin);white-space:nowrap;text-transform: uppercase;}
}
#home-2{grid-template-columns: 268px 1fr; margin-top: 40px; grid-column-gap: 40px; transition: margin-left 0.3s ease;}
#home-2{padding-bottom: 100px;}
#home-2 .box-1{align-content: start; grid-auto-flow: row; gap: 20px;}
#home-2 .title{margin-bottom: 40px;}
#home-2 .title a{text-decoration: none; color: #235AFF; font-size: 14px; grid-template-columns: auto 1fr; gap: 5px;}
#home-2 .box{grid-template-columns: repeat(3, 1fr); width: 100%; gap: 30px;}
#home-2 .box .block{text-decoration: none; padding: 12px;}
#home-2 .box .img{width: 100%; border-radius: 10px; aspect-ratio: 71/45; background: #f5f5f5; overflow: hidden; display: flex; align-items: center; justify-content: center;}
#home-2 .box img{width: 100%; height: 100%; object-fit: cover; display: block;}
#home-2 .box .img svg{stroke: #ddd; stroke-width: 2;}
#home-2 .box .name{margin-top: 24px;}
#home-2 .box .name h2{padding: 0; margin: 0; font-size: 18px; font-weight: 600;}
#home-2 .box .name span{color: #939393; font-size: 14px;}
#home-2 .box .addr{margin-top: 10px; gap: 5px; color: #939393; font-size: 14px;}
#home-2 .box .reyting{margin-top: 15px; gap: 5px;}
#home-2 .box .reyting>div{color: #939393; font-size: 14px;}
#home-2 .box .reyting span{font-weight: 600; color: #0B0C15;}
@media (max-width: 1200px) {
    #home-2 .box{grid-template-columns: repeat(3, 1fr); width: 100%;}
    #home-2{grid-template-columns: 268px calc(100vw - 45px); margin-left: -305px;}
    #home-2 .filtr{display: block !important; cursor: pointer;}
    #home-2 .filtr>div{gap: 3px;}
    #home-2 .title{grid-template-columns: 1fr auto auto; gap: 20px;}
    #home-2.filtr-active {margin-left: 0 !important;}
    main.container {overflow: hidden;} 
}
@media (max-width: 980px) {
    #home-2 .box{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 768px) {
    #home-2 .box{grid-template-columns: 1fr; gap: 4vw;}
    #home-2 .box .block{text-decoration: none; padding: 3vw; display: grid; grid-template-columns: 25vw 1fr; gap: 3vw; align-items: start;}
    #home-2 .box .img{aspect-ratio: 1/1;}
    #home-2 .box .name{margin: 0;}
    #home-2 .box .name h2{font-size: clamp(14px, 3.5vw, 20px);}
    #home-2 .box .addr{font-size: clamp(11px, 3vw, 14px);}
    header{display: none;}
    #home-1 form{display: block !important; margin-top: 30px;}
    #home-1 .search{background: #F5F5F5; grid-template-columns: auto 1fr; padding: 10px 12px; gap:5px; border-radius: 10px;}
    #home-1 input:-webkit-autofill,
    #home-1 input:-webkit-autofill:hover, 
    #home-1 input:-webkit-autofill:focus,
    #home-1 input:-webkit-autofill:active {-webkit-background-clip: text; -webkit-text-fill-color: #000 !important; -webkit-box-shadow: 0 0 0px 1000px #F5F5F5 inset !important; box-shadow: 0 0 0px 1000px #F5F5F5 inset !important; background-color: #F5F5F5 !important; background-image: none !important; transition: background-color 5000s ease-in-out 0s; border: none; outline: none;}
    #home-1 .search svg{width: 20px; height: 20px;}
    #home-1 .search input{background: #F5F5F5;border: none; background: transparent; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; width: 100%;}
    #home-2 .title{grid-template-columns: 1fr auto; gap: 20px;}
    #home-2 .filtr>div{grid-template-columns:auto 1fr;} 
}
/*Диапазон цен*/
#diap{box-sizing: border-box; width: 100%; height: 130px; background: #fff; padding: 16px;}
#diap h2{font-size: 16px; padding: 0; margin: 0;}
#diap .slider {height: 5px; position: relative; background: #ddd; border-radius: 5px; margin: 20px 10px 30px 10px;}
#diap .slider .progress {height: 100%; position: absolute; border-radius: 5px; background: #235AFF;}
#diap .range-input {position: relative; height: 20px; margin: 0 5px;}
#diap .range-input input {position: absolute; width: calc(100% + 5px); height: 5px; top: -25px; left: -5px; background: none; pointer-events: none; -webkit-appearance: none; appearance: none;}
#diap .range-input input::-webkit-slider-thumb {height: 20px; width: 20px; border-radius: 50%;  background: #F5F5F5; box-shadow: 0 4px 4px rgba(0,0,0,0.1); pointer-events: auto; -webkit-appearance: none; cursor: pointer; margin-top: -20px;}
#diap .range-input input::-moz-range-thumb {height: 20px; width: 20px; border-radius: 50%; border: 2px solid #4CAF50; background: #fff; pointer-events: auto; cursor: pointer; border: none;}
#diap .range-input input::-webkit-slider-runnable-track {height: 5px; background: none;}
#diap .range-min {z-index: 1;}
#diap .range-max {z-index: 2;}
#diap .price-inputs {display: flex; justify-content: space-between; gap: 15px;  margin-top: 20px;}
#diap .field {display: flex; align-items: center; gap: 45px; padding: 0 10px; border: 1px solid #ddd; border-radius: 5px; background: #fff; flex: 1;}
#diap .field input {width: 100%; border: none; outline: none; font-size: 14px; padding: 5px 0;}
#diap .field input::-webkit-outer-spin-button,
#diap .field input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
#diap .field input[type=number] {-moz-appearance: textfield;}
/*остальные блоки и радио-группа*/
.box-btn-home{padding: 16px 16px 5px;}
.box-btn-home h2{font-size: 16px; padding: 0; margin: 0 0 20px;}
.grup-radio-btn input[type="radio"] {display: none;}
.grup-radio-btn .option {display: flex; align-items: center; margin: 10px 0; cursor: pointer;}
.grup-radio-btn .custom-box {display: inline-flex; justify-content: center; align-items: center; width: 16px; height: 16px; border: 2px solid #000; border-radius: 6px; margin-right: 10px; font-size: 20px; color: white; transition: 0.2s;}
.grup-radio-btn input[type="radio"]:checked + label .custom-box {background: #235AFF; border-color: #235AFF;}
.grup-radio-btn input[type="radio"]:checked + label .custom-box::after {content: "✓";}
.grup-radio-btn .option-text {font-weight: 400; font-size: 16px;}






/* -------------------------------------САЛОН--------------------------------------*/
.salon-v4 {padding: 28px 0 100px; --v4-bg: #F6F8FC; --v4-card: #FFFFFF; --v4-line: #E8EDF5; --v4-line-soft: #EFF3F8; --v4-text: #0B0C15; --v4-muted: #8B93A2; --v4-blue: #235AFF; --v4-blue-dark: #1948D6; --v4-green: #16A34A; --v4-shadow: 0 24px 70px rgba(15, 23, 42, 0.08); --v4-shadow-soft: 0 12px 35px rgba(15, 23, 42, 0.05); --v4-radius-xxl: 30px; --v4-radius-xl: 24px; --v4-radius-lg: 20px; --v4-radius-md: 16px;}
.v4-btn {height: 50px; border-radius: 14px; text-decoration: none; display: grid; place-items: center; font-size: 14px; font-weight: 600; transition: all 0.22s ease; }
.v4-btn.primary {background: linear-gradient(135deg, var(--v4-blue) 0%, #4D7DFF 100%); color: #fff; box-shadow: 0 14px 28px rgba(35, 90, 255, 0.24);}
.v4-btn.primary:hover {transform: translateY(-2px); box-shadow: 0 18px 34px rgba(35, 90, 255, 0.30);}
.v4-btn.secondary {background: #F5F8FF; border: 1px solid #E1E9FF; color: var(--v4-blue);}
.v4-btn.secondary:hover {background: var(--v4-blue); border-color: var(--v4-blue); color: #fff;}
.v4-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) 360px; gap: 28px; margin-bottom: 26px; }
.v4-hero-main {overflow: hidden; position: relative; border-radius: var(--v4-radius-xxl); background: #EFF3F9; box-shadow: var(--v4-shadow); }
.v4-hero-glow { position: absolute; top: -70px; right: -70px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,0.14); filter: blur(10px); z-index: 1; }
.v4-hero-placeholder {min-height: 400px; background: radial-gradient(circle at 20% 20%, #E8F0FF 0%, #F8FAFD 35%, #EEF2F7 100%); width: 100%; height: 100%; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; }
.v4-hero-main::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,12,21,0.05) 0%, rgba(11,12,21,0.12) 35%, rgba(11,12,21,0.78) 100%); z-index: 0; }
.v4-hero-content {box-sizing: border-box; padding: 60px 34px 30px; z-index: 1; color: #fff; height: 100%; grid-auto-flow: row; align-content: end;}
.v4-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: 13px; line-height: 1; }
.v4-hero h1 { margin: 0; font-size: 44px; line-height: 1.03; letter-spacing: -0.03em; color: #fff; max-width: 780px; z-index: 1;}
.v4-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.v4-hero-badge { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.20); color: #fff; backdrop-filter: blur(10px); }
.v4-card {background: var(--v4-card); border: 1px solid var(--v4-line-soft); border-radius: var(--v4-radius-xl); box-shadow: var(--v4-shadow-soft); }
.v4-card.pad {padding: 24px;}
.v4-hero-meta { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 18px; z-index: 1;}
.v4-hero-meta-item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.95); font-size: 14px; }
.v4-hero-actions {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; z-index: 1;}
.v4-hero-action { min-width: 190px; height: 46px; padding: 0 18px; border-radius: 14px; text-decoration: none; display: inline-grid; place-items: center; font-size: 14px; font-weight: 600; transition: all 0.22s ease; }
.v4-hero-action.primary { background: #fff; color: var(--v4-blue); }
.v4-hero-action.primary:hover { transform: translateY(-2px); }
.v4-hero-action.secondary { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(10px); }
.v4-hero-action.secondary:hover { background: rgba(255,255,255,0.18); }
.v4-hero-stats {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.v4-hero-stat { min-width: 128px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(10px); }
.v4-hero-stat strong { display: block; color: #fff; font-size: 22px; line-height: 1; margin-bottom: 5px; }
.v4-hero-stat span { color: rgba(255,255,255,0.82); font-size: 12px; }
.v4-booking-col { display: grid; gap: 18px; }
.v4-booking-card { background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);}
.v4-booking-card .box-btn{gap:10px;}
.v4-booking-title { margin: 0 0 16px; font-size: 18px; color: var(--v4-text);}
.v4-rating-head { display: flex; justify-content: space-between; gap: 14px; align-items: start; margin-bottom: 18px;}
.v4-rating-head .sub{font-size:13px; color:#8B93A2; margin-bottom:6px;}
.v4-rating-main { display: flex; align-items: end; gap: 10px; }
.v4-rating-main strong { font-size: 38px; line-height: 1; color: var(--v4-text);}
.v4-rating-note { text-align: right; color: var(--v4-muted); font-size: 13px;}
.v4-hours-grid { display: grid; gap: 8px; }
.v4-hours-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #FAFBFD; border: 1px solid #EEF2F7; font-size: 13px; }
.v4-hours-row span:first-child { color: #667085; }
.v4-hours-time { color: var(--v4-blue); font-weight: 600; }
.v4-hours-off { color: #D32F2F; font-weight: 500; }
.v4-hours-24 { padding: 13px 14px; border-radius: 14px; background: #F0F6FF; border: 1px solid #DDE8FF; color: var(--v4-blue); font-weight: 600; font-size: 14px; }
.v4-hours-row.today-highlight {background: linear-gradient(135deg, #E8F0FF 0%, #F0F6FF 100%); border-color: #235AFF;}
.v4-gallery{grid-template-columns: repeat(2, 1fr); gap: 8px;}
.v4-gallery .item{aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #F5F7FA; cursor: pointer;}
.v4-gallery img{width: 100%; height: 100%; object-fit: cover;}
.v4-gallery .null-item{aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #F0F4FF 0%, #E8F0FE 100%); cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; gap: 8px;}
@media (max-width: 1240px) { 
    .v4-hero {grid-template-columns: 1fr;}
    .v4-booking-card .box-btn{gap:10px; grid-template-columns: 1fr 1fr;}
    .v4-gallery{grid-template-columns: repeat(4, 1fr);}
}
@media (max-width: 768px) {
    .salon-v4 {--v4-radius-xxl: 22px;}
    .v4-hero-placeholder{min-height: calc(100vh - 120px);}
    .v4-hero-content {padding: 100px 20px 30px;}
    .v4-hero h1 {font-size: 30px;}    
    .v4-hero-stats{display: grid; grid-template-columns: repeat(3, 1fr);}
    .v4-hero-stat {min-width: 0; padding: 14px 4px; place-items: center; display: grid; text-align: center;}
    .v4-booking-card{display: none;}
    .v4-gallery{grid-template-columns: repeat(2, 1fr);}
}
.v4-advantages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.v4-adv { background: #fff; border: 1px solid #EEF2F7; border-radius: 18px; box-shadow: var(--v4-shadow-soft); padding: 18px; }
.v4-adv-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: #F3F7FF; margin-bottom: 12px; }
.v4-adv-title { color: var(--v4-text); font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.v4-adv-text { color: var(--v4-muted); font-size: 13px; line-height: 1.55; }
@media (max-width: 1240px) {
    .v4-advantages { grid-template-columns: repeat(2, 1fr); } 
}
@media (max-width: 768px) { 
    .v4-advantages { grid-template-columns: 1fr; } 
}
.v4-section { margin-bottom: 38px; }
.v4-section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; }
.v4-section-head h2 { margin: 0; color: var(--v4-text); font-size: 30px; line-height: 1.05; letter-spacing: -0.02em; }
.v4-section-sub { margin-top: 7px; color: var(--v4-muted); font-size: 14px; }
.v4-empty { padding: 24px; background: #FAFAFA; border: 1px dashed #DCE3ED; border-radius: 18px; color: var(--v4-muted); }
.v4-tab {position: relative; text-decoration: none; white-space: nowrap; color: var(--v4-muted); font-size: 15px; padding: 18px 0 16px; transition: all 0.2s ease; flex-shrink: 0; line-height: 1; display: inline-block; vertical-align: middle; margin: 0; border: none; outline: none;}
.v4-tab::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--v4-blue); transform: scaleX(0); transform-origin: center; transition: transform 0.22s ease; pointer-events: none;}
.v4-tab:hover {color: var(--v4-blue);}
.v4-tab.active {color: var(--v4-blue);}
.v4-tab.active::after {transform: scaleX(1);}
.v4-tabs {display: flex; gap: 28px; overflow-x: auto; overflow-y: visible; scrollbar-width: none; -ms-overflow-style: none; min-height: 56px;}
.v4-tabs-wrap {position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); border-top: 1px solid #EEF2F6; border-bottom: 1px solid #EEF2F6; margin-bottom: 28px; overflow: visible;}
.v4-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.v4-main { min-width: 0; }
.v4-sidebar { position: sticky; top: 88px; display: grid; gap: 18px; }
.v4-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; padding: 12px; margin: -12px; }
.v4-service-link {border-radius: 22px; padding: 22px; transition: all 0.24s ease; text-decoration: none; display: block; border: 1px solid #EEF2F7; box-shadow: var(--v4-shadow-soft);}
.v4-service h3 { margin: 0 0 12px; color: var(--v4-text); font-size: 17px; line-height: 1.35; }
.v4-service-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-shrink: 0;}
.v4-service-price { color: var(--v4-blue); font-size: 22px; font-weight: 700;}
.v4-service-duration { color: var(--v4-muted); font-size: 13px;}
.v4-service p { margin: 14px 0 0; color: #667085; font-size: 13px; line-height: 1.65; flex-grow: 1;}
.v4-service { background: #fff; height: auto; min-height: auto; display: flex; flex-direction: column; position: relative; }
.v4-service-link::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--v4-blue) 0%, #7FA0FF 100%); opacity: 0; transition: opacity 0.22s ease; border-radius: 22px 0 0 22px; }
.v4-service-link:hover { transform: translateY(-4px); border-color: #DCE5F2; box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12); position: relative; }
.v4-service-link:hover::before { opacity: 1;}
.v4-masters { display: grid; gap: 20px; }
.v4-master { background: #fff; border: 1px solid #EEF2F7; border-radius: 24px; overflow: hidden; box-shadow: var(--v4-shadow-soft); }
.v4-master-top { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 24px; background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%); border-bottom: 1px solid #EEF2F7; }
.v4-master-photo { width: 88px; height: 88px; border-radius: 26px; overflow: hidden; background: #F3F4F6; display: flex; align-items: center; justify-content: center; }
.v4-master-photo img { width: 100%; height: 100%; object-fit: cover; }
.v4-master-photo svg { width: 46px; height: 46px; }
.v4-master-info a { text-decoration: none; }
.v4-master-info h3 { margin: 0 0 6px; color: var(--v4-text); font-size: 23px; }
.v4-master-info p { margin: 0; color: var(--v4-muted); font-size: 14px; }
.v4-master-link { text-decoration: none; color: var(--v4-blue); font-size: 14px; font-weight: 500; white-space: nowrap; }
.v4-master-calendar { padding: 24px; }
.v4-master-rating{display: flex; align-items: center; gap: 8px; margin-top: 8px;}
.v4-master-rating .rat-01{font-size: 13px; color: #8B93A2;}
.v4-master-rating .rat-02{font-weight: 600; color: #235AFF;}
.v4-master-rating .rat-03{font-size: 12px; color: #8B93A2;}
.v4-calendar-title { margin-bottom: 14px; color: var(--v4-text); font-size: 14px; font-weight: 600; }
.calendar-days {display: flex; gap: 10px; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; flex-wrap: nowrap; padding: 18px 10px; margin-bottom: 8px;}
.calendar-days::-webkit-scrollbar {display: none;}
.calendar-day {flex: 0 0 auto; width: 98px; text-align: center; padding: 13px 10px; background: #FBFBFC; border-radius: 16px; cursor: pointer; border: 1px solid #E8EDF4; transition: all 0.2s ease;}
.calendar-day:hover {border-color: var(--v4-blue); background: #F8FAFF; transform: translateY(-2px);}
.calendar-day.active {background: linear-gradient(135deg, var(--v4-blue) 0%, #4E7CFF 100%); border-color: var(--v4-blue); box-shadow: 0 6px 12px rgba(35,90,255,0.22);}
.calendar-day .day-name {font-size: 12px; color: var(--v4-muted); margin-bottom: 6px;}
.calendar-day .day-date {font-size: 20px; line-height: 1; font-weight: 700; color: var(--v4-text);}
.calendar-day .day-month {margin-top: 6px; font-size: 11px; color: var(--v4-muted);}
.calendar-day.active .day-name, .calendar-day.active .day-date, .calendar-day.active .day-month {color: #fff;}
.intervals-list { display: flex; flex-wrap: wrap; gap: 10px; }
.time-slot { padding: 11px 16px; border-radius: 13px; background: #F4F7FF; border: 1px solid #DEE7FF; color: var(--v4-blue); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }
.time-slot:hover { background: var(--v4-blue); border-color: var(--v4-blue); color: #fff; transform: translateY(-2px); }
.no-intervals { padding: 24px; border-radius: 16px; background: #FAFAFA; border: 1px dashed #DCE2EB; color: var(--v4-muted); text-align: center; }
.v4-about { background: #fff; border: 1px solid #EEF2F7; border-radius: 26px; box-shadow: var(--v4-shadow-soft); overflow: hidden; }
.v4-about-head { padding: 26px 26px 18px; border-bottom: 1px solid #F0F3F8; }
.v4-about-content { padding: 0 26px 26px; color: #46505E; line-height: 1.8; font-size: 15px; }
.v4-about-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; padding: 0 26px 26px; }
.v4-about-panel { background: #FAFBFD; border: 1px solid #EEF2F7; border-radius: 20px; padding: 18px; }
.v4-about-panel h3 { margin: 0 0 14px; font-size: 16px; }
.v4-about-panel p { margin: 0 0 10px; color: #55606F; font-size: 14px; line-height: 1.6; }
.v4-about-panel a { color: var(--v4-blue); text-decoration: none; }
.v4-about-panel a:hover { text-decoration: underline; }
.v4-map { width: 100%; height: 360px; border-radius: 20px; overflow: hidden; background: #F5F5F5; border: 1px solid #EEF2F7; }
.v4-rating-summary { display: grid; grid-template-columns: 260px 1fr; gap: 20px; margin-bottom: 18px; }
.v4-rating-score { background: #fff; border: 1px solid #EEF2F7; border-radius: 22px; box-shadow: var(--v4-shadow-soft); padding: 24px; text-align: center; }
.v4-rating-score strong { display: block; font-size: 42px; line-height: 1; color: var(--v4-text); margin-bottom: 8px; }
.v4-rating-score small { display: block; margin-top: 8px; color: var(--v4-muted); font-size: 13px; }
.v4-rating-breakdown { background: #fff; border: 1px solid #EEF2F7; border-radius: 22px; box-shadow: var(--v4-shadow-soft); padding: 22px; }
.v4-rate-row {display: grid; grid-template-columns: 26px 1fr 36px; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 13px; color: #667085; }
.v4-rate-row:last-child { margin-bottom: 0; }
.v4-rate-bar { height: 8px; border-radius: 999px; background: #EEF2F7; overflow: hidden; }
.v4-rate-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--v4-blue) 0%, #7CA0FF 100%); }
.v4-reviews { display: grid; gap: 16px; }
.v4-review { background: #fff; border: 1px solid #EEF2F7; border-radius: 22px; padding: 22px; box-shadow: var(--v4-shadow-soft); }
.v4-review-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; }
.v4-review-user { display: flex; align-items: center; gap: 12px; }
.v4-review-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #EAF0FF 0%, #F5F8FF 100%); color: var(--v4-blue); font-weight: 700; font-size: 14px; border: 1px solid #E3EAFF; }
.v4-review-name { color: var(--v4-text); font-size: 15px; font-weight: 600; }
.v4-review-rating { color: #FFD33C; }
.v4-review-text { color: #55606F; font-size: 14px; line-height: 1.75; }
.v4-review-date { margin-top: 12px; color: #9AA2AF; font-size: 12px; }
.v4-side-card { background: #fff; border: 1px solid #EEF2F7; border-radius: 22px; box-shadow: var(--v4-shadow-soft); padding: 20px; }
.v4-side-card h3 { margin: 0 0 14px; color: var(--v4-text); font-size: 17px; }
.v4-side-list { display: grid; gap: 10px; }
.v4-side-row { display: flex; justify-content: space-between; gap: 12px; color: #667085; font-size: 14px; }
.v4-side-row strong { color: var(--v4-text); text-align: right; }
.v4-side-services { display: grid; gap: 10px; }
.v4-side-service { padding: 12px; border-radius: 14px; background: #FAFBFD; border: 1px solid #EEF2F7; }
.v4-side-service-name { margin-bottom: 6px; color: var(--v4-text); font-size: 14px; line-height: 1.4; }
.v4-side-service-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.v4-side-service-meta span:first-child { color: var(--v4-blue); font-weight: 600; }
.v4-side-service-meta span:last-child { color: var(--v4-muted); }
.v4-map-static {position: relative; width: 100%; height: 360px; border-radius: 20px; overflow: hidden; cursor: pointer; border: 1px solid #EEF2F7; background: #F5F7FA;}
.v4-map-static:hover .v4-map-overlay {padding-bottom: 20px;}

/* Модальное окно с картой */
.map-modal {box-sizing: border-box; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.2s ease;}
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
.map-modal-content {background: white; border-radius: 24px; width: 100%; max-width: 800px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: slideUp 0.3s ease;}
@keyframes slideUp {
    from {transform: translateY(20px); opacity: 0;}
    to {transform: translateY(0); opacity: 1;}
}
.map-modal-header {padding: 20px 24px; border-bottom: 1px solid #EEF2F7; display: flex; justify-content: space-between; align-items: center;}
.map-modal-header h3 {margin: 0; font-size: 18px; color: var(--v4-text);}
.map-modal-close {background: none; border: none; font-size: 28px; cursor: pointer; color: var(--v4-muted); padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: all 0.2s;}
.map-modal-close:hover {background: #F5F5F5; color: var(--v4-text);}
.map-modal-footer {padding: 16px 24px; border-top: 1px solid #EEF2F7; display: flex; justify-content: space-between; align-items: center; color: var(--v4-muted); font-size: 14px;}
.map-modal-link {color: var(--v4-blue); text-decoration: none; font-weight: 500; transition: opacity 0.2s;}
.map-modal-link:hover {opacity: 0.8; text-decoration: underline;}

@media (max-width: 1240px) {
    .v4-layout { grid-template-columns: 1fr; } 
    .v4-sidebar { position: static; } }
@media (max-width: 900px) { 
    .v4-about-layout, .v4-rating-summary { grid-template-columns: 1fr;} 
}
@media (max-width: 768px) { 
    .v4-hero-main { min-height: 400px; border-radius: 22px; } 
    .v4-services { grid-template-columns: 1fr; } 
    .v4-master-top { grid-template-columns: auto 1fr; } 
    .v4-master-link { grid-column: 1 / -1; } 
    .v4-review-top { flex-direction: column; align-items: start; } 
    .v4-card.pad, .v4-side-card, .v4-master-calendar, .v4-about-head, .v4-about-content, .v4-about-layout, .v4-review, .v4-rating-score, .v4-rating-breakdown { padding-left: 18px; padding-right: 18px; }
    .v4-section-head h2 { font-size: 24px;}
    .v4-section-head .secondary{display: none;}    
    .v4-master-rating, .rat-03{display: block;}
    .intervals-list {display: grid;}
    .time-slot{text-align: center;}
    .map-modal-footer, .map-modal-footer span {display: block;}
}
#galleryLightbox{display: none; backdrop-filter: blur(3px); position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; align-items: center; justify-content: center; flex-direction: column;}
#galleryLightbox button{position: absolute; top: 20px; right: 20px; background: none; border: none; color: white; font-size: 30px; cursor: pointer;}
#galleryLightbox img{max-width: 90%; max-height: 80%; object-fit: contain;}
#galleryLightbox #lightboxCaption{color: white; margin-top: 20px; text-align: center;}




/* -------------------------------------МАСТЕР--------------------------------------*/
.master-v4 { padding: 28px 0 100px; --v4-bg: #F6F8FC; --v4-card: #FFFFFF; --v4-line: #E8EDF5; --v4-line-soft: #EFF3F8; --v4-text: #0B0C15; 
--v4-muted: #8B93A2; --v4-blue: #235AFF; --v4-blue-dark: #1948D6; --v4-green: #16A34A; --v4-shadow: 0 24px 70px rgba(15, 23, 42, 0.08); 
--v4-shadow-soft: 0 12px 35px rgba(15, 23, 42, 0.05); --v4-radius-xxl: 30px; --v4-radius-xl: 24px; --v4-radius-lg: 20px; --v4-radius-md: 16px; }

.v7-card { background: var(--v4-card); border: 1px solid var(--v4-line-soft); border-radius: var(--v4-radius-xl); box-shadow: var(--v4-shadow-soft); }
.v7-card.pad { padding: 24px; }
.v7-section { margin-bottom: 38px; }
.v7-section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; }
.v7-section-head h2 { margin: 0; color: var(--v4-text); font-size: 30px; line-height: 1.05; letter-spacing: -0.02em; }
.v7-section-sub { margin-top: 7px; color: var(--v4-muted); font-size: 14px; }
.v7-empty { padding: 24px; background: #FAFAFA; border: 1px dashed #DCE3ED; border-radius: 18px; color: var(--v4-muted); }
.v7-btn { height: 50px; border-radius: 14px; text-decoration: none; display: grid; place-items: center; font-size: 14px; font-weight: 600; transition: all 0.22s ease; }
.v7-btn.primary { background: linear-gradient(135deg, var(--v4-blue) 0%, #4D7DFF 100%); color: #fff; box-shadow: 0 14px 28px rgba(35, 90, 255, 0.24); }
.v7-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(35, 90, 255, 0.30); }
.v7-btn.secondary { background: #F5F8FF; border: 1px solid #E1E9FF; color: var(--v4-blue); }
.v7-btn.secondary:hover { background: var(--v4-blue); border-color: var(--v4-blue); color: #fff; }
.v7-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: 13px; line-height: 1; }
.v7-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; margin-bottom: 26px; }
.v7-hero-main { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; padding: 26px; border-radius: var(--v4-radius-xxl); overflow: hidden; background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 100%); border: 1px solid #EEF2F7; box-shadow: var(--v4-shadow); }
.v7-master-photo-large { width: 240px; height: 300px; border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 30% 20%, #E8F0FF 0%, #F8FAFD 45%, #EEF2F7 100%); box-shadow: var(--v4-shadow); display: flex; align-items: center; justify-content: center; }
.v7-master-photo-large img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v7-master-photo-large svg { width: 72px; height: 72px; }
.v7-hero-copy { min-width: 0; }
.v7-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.v7-hero-badge { background: #F3F7FF; border: 1px solid #E1E9FF; color: var(--v4-blue); backdrop-filter: blur(10px); }
.v7-hero h1 { margin: 0; font-size: 42px; line-height: 1.03; letter-spacing: -0.03em; color: var(--v4-text); max-width: 760px; }
.v7-hero-sub { margin-top: 16px; color: #46505E; line-height: 1.8; font-size: 15px; }
.v7-hero-meta { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 18px; }
.v7-hero-meta-item { display: flex; align-items: center; gap: 8px; color: #4B5563; font-size: 14px; }
.v7-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.v7-hero-action { min-width: 190px; height: 46px; padding: 0 18px; border-radius: 14px; text-decoration: none; display: inline-grid; place-items: center; font-size: 14px; font-weight: 600; transition: all 0.22s ease; }
.v7-hero-action.primary { background: var(--v4-blue); color: #fff; box-shadow: 0 14px 28px rgba(35, 90, 255, 0.24); }
.v7-hero-action.primary:hover { transform: translateY(-2px); background: var(--v4-blue-dark); }
.v7-hero-action.secondary { background: #F5F8FF; color: var(--v4-blue); border: 1px solid #E1E9FF; }
.v7-hero-action.secondary:hover { background: var(--v4-blue); color: #fff; }
.v7-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.v7-stat { padding: 16px; border-radius: 18px; background: #fff; border: 1px solid #EEF2F7; }
.v7-stat strong { display: block; font-size: 24px; line-height: 1; color: var(--v4-text); margin-bottom: 6px; }
.v7-stat span { color: var(--v4-muted); font-size: 12px; }
.v7-hero-side { display: grid; gap: 18px; align-self: start; }
.v7-side-card { background: #fff; border: 1px solid #EEF2F7; border-radius: 22px; box-shadow: var(--v4-shadow-soft); padding: 20px; }
.v7-side-card h3 { margin: 0 0 14px; color: var(--v4-text); font-size: 17px; }
.v7-side-list { display: grid; gap: 10px; }
.v7-side-row { display: flex; justify-content: space-between; gap: 12px; color: #667085; font-size: 14px; }
.v7-side-row strong { color: var(--v4-text); text-align: right; }
.v7-side-salons { display: grid; gap: 10px; }
.v7-side-salon { padding: 12px; border-radius: 14px; background: #FAFBFD; border: 1px solid #EEF2F7; }
.v7-side-salon a { color: var(--v4-text); text-decoration: none; font-weight: 600; font-size: 14px; }
.v7-side-salon a:hover { color: var(--v4-blue); }
.v7-side-salon small { display: block; margin-top: 4px; color: var(--v4-muted); font-size: 12px; line-height: 1.4; }

.v7-sidebar { position: sticky; top: 88px; display: grid; gap: 18px; }
.v7-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; padding: 12px; margin: -12px; }
.v7-service { border-radius: 22px; padding: 22px; transition: all 0.24s ease; border: 1px solid #EEF2F7; box-shadow: var(--v4-shadow-soft); background: #fff; height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.v7-service::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--v4-blue) 0%, #7FA0FF 100%); opacity: 0; transition: opacity 0.22s ease; border-radius: 22px 0 0 22px; }
.v7-service:hover { transform: translateY(-4px); border-color: #DCE5F2; box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12); }
.v7-service:hover::before { opacity: 1; }
.v7-service h3 { margin: 0 0 12px; color: var(--v4-text); font-size: 17px; line-height: 1.35; }
.v7-service-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.v7-service-price { color: var(--v4-blue); font-size: 22px; font-weight: 700; }
.v7-service-duration { color: var(--v4-muted); font-size: 13px; }
.v7-service p { margin: 14px 0 0; color: #667085; font-size: 13px; line-height: 1.65; flex-grow: 1; }
.v7-master-salons { display: grid; gap: 20px; }
.v7-salon-card { background: #fff; border: 1px solid #EEF2F7; border-radius: 24px; overflow: hidden; box-shadow: var(--v4-shadow-soft); }
.v7-salon-head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 24px; background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%); border-bottom: 1px solid #EEF2F7; }
.v7-salon-logo { width: 72px; height: 72px; border-radius: 18px; overflow: hidden; background: #F3F4F6; display: flex; align-items: center; justify-content: center; }
.v7-salon-logo img { width: 100%; height: 100%; object-fit: cover; }
.v7-salon-logo svg { width: 34px; height: 34px; }
.v7-salon-info a { text-decoration: none; color: var(--v4-text); }
.v7-salon-info h3 { margin: 0 0 6px; color: var(--v4-text); font-size: 23px; }
.v7-salon-info p { margin: 0; color: var(--v4-muted); font-size: 14px; }
.v7-salon-link { text-decoration: none; color: var(--v4-blue); font-size: 14px; font-weight: 500; white-space: nowrap; }
.v7-calendar { padding: 24px; }
.v7-calendar-title { margin-bottom: 14px; color: var(--v4-text); font-size: 14px; font-weight: 600; }
.no-intervals { padding: 24px; border-radius: 16px; background: #FAFAFA; border: 1px dashed #DCE2EB; color: var(--v4-muted); text-align: center; }
.v7-about { background: #fff; border: 1px solid #EEF2F7; border-radius: 26px; box-shadow: var(--v4-shadow-soft); overflow: hidden; }
.v7-about-head { padding: 26px 26px 18px; border-bottom: 1px solid #F0F3F8; }
.v7-about-content { padding: 0 26px 26px; color: #46505E; line-height: 1.8; font-size: 15px; }
.v7-about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; padding: 0 26px 26px; }
.v7-about-panel { background: #FAFBFD; border: 1px solid #EEF2F7; border-radius: 20px; padding: 18px; }
.v7-about-panel h3 { margin: 0 0 14px; font-size: 16px; }
.v7-about-panel p { margin: 0 0 10px; color: #55606F; font-size: 14px; line-height: 1.6; }
.v7-about-panel a { color: var(--v4-blue); text-decoration: none; }
.v7-about-panel a:hover { text-decoration: underline; }
.v7-rating-summary { display: grid; grid-template-columns: 260px 1fr; gap: 20px; margin-bottom: 18px; }
.v7-rating-score { background: #fff; border: 1px solid #EEF2F7; border-radius: 22px; box-shadow: var(--v4-shadow-soft); padding: 24px; text-align: center; }
.v7-rating-score strong { display: block; font-size: 42px; line-height: 1; color: var(--v4-text); margin-bottom: 8px; }
.v7-rating-score small { display: block; margin-top: 8px; color: var(--v4-muted); font-size: 13px; }
.v7-review-rating { color: #FFD33C; }
.v7-reviews { display: grid; gap: 16px; }
.v7-review { background: #fff; border: 1px solid #EEF2F7; border-radius: 22px; padding: 22px; box-shadow: var(--v4-shadow-soft); }
.v7-review-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; }
.v7-review-user { display: flex; align-items: center; gap: 12px; }
.v7-review-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #EAF0FF 0%, #F5F8FF 100%); color: var(--v4-blue); font-weight: 700; font-size: 14px; border: 1px solid #E3EAFF; }
.v7-review-name { color: var(--v4-text); font-size: 15px; font-weight: 600; }
.v7-review-text { color: #55606F; font-size: 14px; line-height: 1.75; }
.v7-review-date { margin-top: 12px; color: #9AA2AF; font-size: 12px; }
.v7-side-service { padding: 12px; border-radius: 14px; background: #FAFBFD; border: 1px solid #EEF2F7; }
.v7-side-service-name { margin-bottom: 6px; color: var(--v4-text); font-size: 14px; line-height: 1.4; }
.v7-side-service-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.v7-side-service-meta span:first-child { color: var(--v4-blue); font-weight: 600; }
.v7-side-service-meta span:last-child { color: var(--v4-muted); }

@media (max-width: 1240px) {
    .v7-hero { grid-template-columns: 1fr; }
    .v7-layout { grid-template-columns: 1fr; }
    .v7-sidebar { position: static; }
    .v7-hero-side { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .v7-about-grid, .v7-rating-summary {grid-template-columns: 1fr;}
    .v7-hero-main {grid-template-columns: 1fr;}
    .v7-master-photo-large { width: 100%; height: 360px; }
    .v7-hero-stats {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 768px) {
    .v7-hero-main, .v7-about-head,
    .v7-about-content,
    .v7-about-grid,
    .v7-review,
    .v7-rating-score,
    .v7-rating-breakdown,
    .v7-salon-head, .v7-calendar,
    .v7-side-card {padding-left: 18px; padding-right: 18px; }
    .v7-hero h1 { font-size: 30px; }
    .v7-services { grid-template-columns: 1fr; }
    .v7-salon-head { grid-template-columns: auto 1fr; }
    .v7-salon-link { grid-column: 1 / -1; }
    .v7-review-top { flex-direction: column; align-items: start; }
    .v7-section-head h2 { font-size: 24px; }
    .v7-hero-stats { grid-template-columns: 1fr 1fr; }
    .v7-hero-action { width: 100%; }
}



/* -------------------------------------УСЛУГА--------------------------------------*/
.service-v4 {padding: 28px 0 100px; --v8-bg: #F6F8FC; --v8-card: #FFFFFF; --v8-line: #E8EDF5; --v8-line-soft: #EFF3F8; --v8-text: #0B0C15; --v8-muted: #8B93A2; --v8-blue: #235AFF; --v8-blue-dark: #1948D6; --v8-green: #16A34A; --v8-shadow: 0 24px 70px rgba(15, 23, 42, 0.08); --v8-shadow-soft: 0 12px 35px rgba(15, 23, 42, 0.05); --v8-radius-xxl: 30px; --v8-radius-xl: 24px; --v8-radius-lg: 20px; --v8-radius-md: 16px;}
.v8-card {background: var(--v8-card); border: 1px solid var(--v8-line-soft); border-radius: var(--v8-radius-xl); box-shadow: var(--v8-shadow-soft);}
.v8-card.pad { padding: 24px; }
.v8-section { margin-bottom: 38px; }
.v8-section-head {display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px;}
.v8-section-head h2 {margin: 0; color: var(--v8-text); font-size: 30px; line-height: 1.05; letter-spacing: -0.02em;}
.v8-section-sub { margin-top: 7px; color: var(--v8-muted); font-size: 14px; }
.v8-empty {padding: 24px; background: #FAFAFA; border: 1px dashed #DCE3ED; border-radius: 18px; color: var(--v8-muted);}
.v8-btn {height: 50px; border-radius: 14px; text-decoration: none; display: grid; place-items: center; font-size: 14px; font-weight: 600; transition: all 0.22s ease;}
.v8-btn.primary {background: linear-gradient(135deg, var(--v8-blue) 0%, #4D7DFF 100%); color: #fff; box-shadow: 0 14px 28px rgba(35, 90, 255, 0.24);}
.v8-btn.primary:hover {transform: translateY(-2px); box-shadow: 0 18px 34px rgba(35, 90, 255, 0.30);}
.v8-btn.secondary {background: #F5F8FF; border: 1px solid #E1E9FF; color: var(--v8-blue);}
.v8-btn.secondary:hover {background: var(--v8-blue); border-color: var(--v8-blue); color: #fff;}
.v8-chip {display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: 13px; line-height: 1;}
.v8-hero {display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; margin-bottom: 26px;}
.v8-hero-main {position: relative; overflow: hidden; padding: 28px; border-radius: var(--v8-radius-xxl); background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 100%); border: 1px solid #EEF2F7; box-shadow: var(--v8-shadow);}
.v8-hero-icon {width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; background: #F3F7FF; border: 1px solid #E1E9FF; margin-bottom: 18px; position: relative; z-index: 1;}
.v8-hero-icon svg {width: 40px; height: 40px;}
.v8-hero-badges {display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; position: relative; z-index: 1;}
.v8-hero-badge {background: #F3F7FF; border: 1px solid #E1E9FF; color: var(--v8-blue);}
.v8-hero h1 {margin: 0; font-size: 42px; line-height: 1.03; letter-spacing: -0.03em; color: var(--v8-text); max-width: 760px; position: relative; z-index: 1;}
.v8-hero-sub {margin-top: 16px; color: #46505E; line-height: 1.8; font-size: 15px; position: relative; z-index: 1;}
.v8-hero-kpis {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; position: relative; z-index: 1;}
.v8-kpi {padding: 16px 16px 15px; border-radius: 18px; background: #fff; border: 1px solid #EEF2F7;}
.v8-kpi strong {display: block; font-size: 24px; line-height: 1; color: var(--v8-text); margin-bottom: 6px;}
.v8-kpi span {color: var(--v8-muted); font-size: 12px;}
.v8-hero-actions {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; position: relative; z-index: 1;}
.v8-hero-action {min-width: 190px; height: 46px; padding: 0 18px; border-radius: 14px; text-decoration: none; display: inline-grid; place-items: center; font-size: 14px; font-weight: 600; transition: all 0.22s ease;}
.v8-hero-action.primary {background: var(--v8-blue); color: #fff; box-shadow: 0 14px 28px rgba(35, 90, 255, 0.24);}
.v8-hero-action.primary:hover {transform: translateY(-2px); background: var(--v8-blue-dark);}
.v8-hero-action.secondary {background: #F5F8FF; color: var(--v8-blue); border: 1px solid #E1E9FF;}
.v8-hero-action.secondary:hover {background: var(--v8-blue); color: #fff;}
.v8-hero-side {display: grid; gap: 18px; align-self: start;}
.v8-side-card {background: #fff; border: 1px solid #EEF2F7; border-radius: 22px; box-shadow: var(--v8-shadow-soft); padding: 20px;}
.v8-side-card h3 {margin: 0 0 14px; color: var(--v8-text); font-size: 17px;}
.v8-side-list {display: grid; gap: 10px;}
.v8-side-row {display: flex; justify-content: space-between; gap: 12px; color: #667085; font-size: 14px;}
.v8-side-row strong {color: var(--v8-text); text-align: right;}
.v8-side-master-list {display: grid; gap: 10px;}
.v8-side-master {padding: 12px; border-radius: 14px; background: #FAFBFD; border: 1px solid #EEF2F7;}
.v8-side-master a {color: var(--v8-text); text-decoration: none; font-weight: 600; font-size: 14px;}
.v8-side-master a:hover { color: var(--v8-blue); }
.v8-side-master small {display: block; margin-top: 4px; color: var(--v8-muted); font-size: 12px; line-height: 1.4;}
.v8-advantages {display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px;}
.v8-adv {background: #fff; border: 1px solid #EEF2F7; border-radius: 18px; box-shadow: var(--v8-shadow-soft); padding: 18px;}
.v8-adv-icon {width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: #F3F7FF; margin-bottom: 12px;}
.v8-adv-title {color: var(--v8-text); font-size: 15px; font-weight: 600; margin-bottom: 6px;}
.v8-adv-text {color: var(--v8-muted); font-size: 13px; line-height: 1.55;}
.v8-tab {position: relative; text-decoration: none; white-space: nowrap; color: var(--v8-muted); font-size: 15px; padding: 18px 0 16px; transition: all 0.2s ease; flex-shrink: 0; line-height: 1; display: inline-block; vertical-align: middle; margin: 0; border: none; outline: none;}
.v8-tab::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--v8-blue); transform: scaleX(0); transform-origin: center; transition: transform 0.22s ease; pointer-events: none;}
.v8-tab:hover { color: var(--v8-blue); }
.v8-tab.active { color: var(--v8-blue); }
.v8-tab.active::after { transform: scaleX(1); }
.v8-tabs {display: flex; gap: 28px; overflow-x: auto; overflow-y: visible; scrollbar-width: none; -ms-overflow-style: none; min-height: 56px;}
.v8-tabs-wrap {position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); border-top: 1px solid #EEF2F6; border-bottom: 1px solid #EEF2F6; margin-bottom: 28px; overflow: visible;}
.v8-layout {display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start;}
.v8-main { min-width: 0; }
.v8-sidebar {position: sticky; top: 88px; display: grid; gap: 18px;}
.v8-services {display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; padding: 12px; margin: -12px;}
.v8-service {border-radius: 22px; padding: 22px; transition: all 0.24s ease; border: 1px solid #EEF2F7; box-shadow: var(--v8-shadow-soft); background: #fff; height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden;}
.v8-service::before {content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--v8-blue) 0%, #7FA0FF 100%); opacity: 0; transition: opacity 0.22s ease; border-radius: 22px 0 0 22px;}
.v8-service:hover {transform: translateY(-4px); border-color: #DCE5F2; box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);}
.v8-service:hover::before { opacity: 1; }
.v8-service h3 {margin: 0 0 12px; color: var(--v8-text); font-size: 17px; line-height: 1.35;}
.v8-service-meta {display: flex; justify-content: space-between; align-items: center; gap: 12px;}
.v8-service-price {color: var(--v8-blue); font-size: 22px; font-weight: 700;}
.v8-service-duration {color: var(--v8-muted); font-size: 13px;}
.v8-service p {margin: 14px 0 0; color: #667085; font-size: 13px; line-height: 1.65; flex-grow: 1;}
.v8-master-cards {display: grid; gap: 20px;}
.v8-master {background: #fff; border: 1px solid #EEF2F7; border-radius: 24px; overflow: hidden; box-shadow: var(--v8-shadow-soft);}
.v8-master-top {display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 24px; background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%); border-bottom: 1px solid #EEF2F7;}
.v8-master-photo {width: 88px; height: 88px; border-radius: 26px; overflow: hidden; background: #F3F4F6; display: flex; align-items: center; justify-content: center;}
.v8-master-photo img {width: 100%; height: 100%; object-fit: cover;}
.v8-master-photo svg { width: 46px; height: 46px; }
.v8-master-info a { text-decoration: none; }
.v8-master-info h3 {margin: 0 0 6px; color: var(--v8-text); font-size: 23px;}
.v8-master-info p {margin: 0; color: var(--v8-muted); font-size: 14px;}
.v8-master-link {text-decoration: none; color: var(--v8-blue); font-size: 14px; font-weight: 500; white-space: nowrap;}
.v8-master-rating {display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap;}
.v8-master-rating .rat-01 { font-size: 13px; color: #8B93A2; }
.v8-master-rating .rat-02 { font-weight: 600; color: #235AFF; }
.v8-master-rating .rat-03 { font-size: 12px; color: #8B93A2; }
.v8-master-calendar { padding: 24px; }
.v8-calendar-title { margin-bottom: 14px; color: var(--v8-text); font-size: 14px; font-weight: 600; }
.v8-about {background: #fff; border: 1px solid #EEF2F7; border-radius: 26px; box-shadow: var(--v8-shadow-soft); overflow: hidden;}
.v8-about-head {padding: 26px 26px 18px; border-bottom: 1px solid #F0F3F8;}
.v8-about-content {padding: 0 26px 26px; color: #46505E; line-height: 1.8; font-size: 15px;}
.v8-about-grid {display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; padding: 0 26px 26px;}
.v8-about-panel {background: #FAFBFD; border: 1px solid #EEF2F7; border-radius: 20px; padding: 18px;}
.v8-about-panel h3 {margin: 0 0 14px; font-size: 16px;}
.v8-about-panel p {margin: 0 0 10px; color: #55606F; font-size: 14px; line-height: 1.6;}
.v8-about-panel a {color: var(--v8-blue); text-decoration: none;}
.v8-about-panel a:hover { text-decoration: underline; }
.v8-rating-summary {display: grid; grid-template-columns: 260px 1fr; gap: 20px; margin-bottom: 18px;}
.v8-rating-score {background: #fff; border: 1px solid #EEF2F7; border-radius: 22px; box-shadow: var(--v8-shadow-soft); padding: 24px; text-align: center;}
.v8-rating-score strong {display: block; font-size: 42px; line-height: 1; color: var(--v8-text); margin-bottom: 8px;}
.v8-rating-score small {display: block; margin-top: 8px; color: var(--v8-muted); font-size: 13px;}
.v8-reviews {display: grid; gap: 16px;}
.v8-review {background: #fff; border: 1px solid #EEF2F7; border-radius: 22px; padding: 22px; box-shadow: var(--v8-shadow-soft);}
.v8-review-top {display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px;}
.v8-review-user {display: flex; align-items: center; gap: 12px;}
.v8-review-avatar {width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #EAF0FF 0%, #F5F8FF 100%); color: var(--v8-blue); font-weight: 700; font-size: 14px; border: 1px solid #E3EAFF;}
.v8-review-name {color: var(--v8-text); font-size: 15px; font-weight: 600;}
.v8-review-rating { color: #FFD33C; }
.v8-review-text {color: #55606F; font-size: 14px; line-height: 1.75;}
.v8-review-date {margin-top: 12px; color: #9AA2AF; font-size: 12px;}
.v8-side-service {padding: 12px; border-radius: 14px; background: #FAFBFD; border: 1px solid #EEF2F7;}
.v8-side-service-name {margin-bottom: 6px; color: var(--v8-text); font-size: 14px; line-height: 1.4;}
.v8-side-service-meta {display: flex; justify-content: space-between; gap: 10px; font-size: 13px;}
.v8-side-service-meta span:first-child {color: var(--v8-blue); font-weight: 600;}
.v8-side-service-meta span:last-child {color: var(--v8-muted);}

@media (max-width: 1240px) {
    .v8-hero {grid-template-columns: 1fr;}
    .v8-layout {grid-template-columns: 1fr;}
    .v8-sidebar {position: static;}
    .v8-advantages {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 900px) {
    .v8-about-grid, .v8-rating-summary {grid-template-columns: 1fr;}
    .v8-hero-kpis {grid-template-columns: 1fr 1fr;}
}
@media (max-width: 768px) {
    .v8-hero-main, .v8-about-head, .v8-about-content, .v8-about-grid, .v8-review, .v8-rating-score, .v8-salon-card, .v8-master-calendar, .v8-side-card {padding-left: 18px; padding-right: 18px;}
    .v8-hero h1 { font-size: 30px; }
    .v8-advantages { grid-template-columns: 1fr; }
    .v8-services { grid-template-columns: 1fr; }
    .v8-master-top { grid-template-columns: auto 1fr; }
    .v8-master-link { grid-column: 1 / -1; }
    .v8-review-top { flex-direction: column; align-items: start; }
    .v8-section-head h2 { font-size: 24px; }
    .v8-hero-kpis { grid-template-columns: 1fr 1fr; }
    .v8-hero-action { min-width: 100%; }
}









/*моб нижняя панель*/
.bottom-panel{grid-template-columns: repeat(4, auto); grid-column-gap: auto; justify-content: space-evenly; 
background: #fff; border-radius: 10px 10px 0 0; height: 60px; width: 100%; position: fixed; bottom: 0; left: 0;
padding: 10px 0 0;}
@media (max-width: 768px) {
    .bottom-panel{display: grid !important;}
    .bottom-panel a{text-decoration: none; font-size: 12px; text-align: center;}
    .bottom-panel p{padding: 0; margin: 0; color: #939393;}
    .bottom-panel svg{stroke: #9d9ea6;}
    .bottom-panel a.active p{color: #235AFF;}
    .bottom-panel a.active svg{stroke: #235AFF;}
}


/*кнопка*/
.btn{border-radius: 8px;}
.btn.blunul, .btn.blunul:link {text-decoration: none; background: #f6f9ff; color: #235AFF; font-size: 12px; padding: 8px 20px; font-weight: 400; transition: all 0.3s ease; display: inline-block;}
.btn.blunul:hover, .btn.blunul:active {background: #235AFF; color: #fff; cursor: pointer;}

.btn.btn-blu {height: 40px; border: none; align-items: center; gap: 8px; background: #F5F5F5; cursor: pointer; color: #A0A0A0; padding: 0 12px; display: grid; justify-content: start; grid-auto-flow: column; transition: background 0.2s ease, color 0.2s ease;}
.btn.btn-blu svg {width: 18px; height: 18px;}

.btn.btn-blu:hover {color: #555; background: #E2E8F0;}
.btn.btn-blu:hover svg image {filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0) contrast(1);}
.btn.btn-blu.active {color: #ffffff; background: #235AFF;}
.btn.btn-blu.active svg image {filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1) contrast(1);}

.btn-bluz{height: 40px; border: none; align-items: center; gap: 10px; background: #235AFF; cursor: pointer; color: #fff; display: grid; justify-content: center; grid-auto-flow: column; transition: background 0.2s ease, color 0.2s ease;}
.btn-bluz:hover{background: #1B4ACC;}
.btn-null{border: 1px solid #235AFF; color: #235AFF;}
.btn-null:hover{background: #f6f9ff;}

.btn-link{border: none; outline: none; color: #235AFF; cursor: pointer; font-size: 14px; background: none;}
.btn-link svg{stroke: #235AFF;}

/*форма*/
form .formin{background: #F5F5F5; grid-template-columns: auto 1fr; padding: 10px 12px; gap:5px; border-radius: 10px; border: 1px solid #F5F5F5;}
form .formin input{background: #F5F5F5; border: none; background: transparent; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; width: 100%;}
form .formin input:-webkit-autofill,
form .formin input:-webkit-autofill:hover, 
form .formin input:-webkit-autofill:focus,
form .formin input:-webkit-autofill:active {-webkit-background-clip: text; -webkit-text-fill-color: #000 !important; -webkit-box-shadow: 0 0 0px 1000px #F5F5F5 inset !important; box-shadow: 0 0 0px 1000px #F5F5F5 inset !important; background-color: #F5F5F5 !important; background-image: none !important; transition: background-color 5000s ease-in-out 0s; border: none; outline: none;}
form .formin.input-error {background-color: #fee4e4 !important; border: 1px solid #FF3B30;}





/*вход и регистрация*/
#lk-in{width: 100%; min-height: 80vh; place-items: center; padding: 20px; box-sizing: border-box;}
#lk-in .block{width: 100%; max-width: 400px; box-sizing: border-box; padding: 20px;}
#lk-in ul{font-size: 14px; color: #FF3B30; list-style-type: none; padding: 0 10px; margin: 0; text-align: center;}
#lk-in li{padding: 0; margin: 0;}
#reg-pan{padding-top: 20px;}
#reg-pan a{height: 40px; place-items: center; margin-top: 10px; font-size: 14px; text-decoration: none;}

























/*  Шрифты*/
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}