/ (см. product.tpl,
itemprop=description из БД). Ритм макета имитируем увеличением
line-height/отступа вокруг переносов строк, не трогая шаблон. */
.pro_page_top .preview_text br{ content:""; display:block; margin-top:8px; }
/* 4. "Свернуть/Развернуть" — в макете прижато к правому краю колонки
текста и со стрелкой-шевроном. Ширина колонки = ширина .preview_text. */
.pro_page_top .description_link{
max-width:640px;
text-align:right;
}
.pro_page_top .description_link a{
display:inline-flex;
align-items:center;
gap:6px;
}
.pro_page_top.is-teaser .description_link a::after{ content:"\25BE"; } /* ▾ свёрнуто */
.pro_page_top:not(.is-teaser) .description_link a::after{ content:"\25B4"; } /* ▴ развёрнуто */
/* 5. Контактный ряд в два ряда:
ряд 1 = .pro_contacts_row (иконка WhatsApp + телефон + «Скопировать» в одну строку);
ряд 2 = кнопка WhatsApp + цветные соцсети + «Поделиться» справа.
.address_wrap оборачивает всё четыре блока подряд (row/cta/icons/share) —
принудительный перенос через width:100% у первого блока разводит их
на две строки без правки шаблона. */
.pro_page_top .bottom_flex .address_wrap{
display:flex;
flex-wrap:wrap;
align-items:center;
column-gap:22px;
row-gap:14px;
}
.pro_page_top .pro_contacts_row{
width:100%;
margin:0;
padding:0 0 4px;
}
/* Телефон и «Скопировать» в один ряд — раньше это были два блочных
друг под другом (родитель не был flex-контейнером). */
.pro_page_top .address_wrap-contacts .offer_contacts_item{
display:flex;
align-items:center;
flex-wrap:nowrap;
gap:16px;
}
.pro_page_top .pro_whatsapp_cta{ order:2; margin:0; }
.pro_page_top .pro_social_icons{ order:3; margin:0; }
.pro_page_top .pro_share_link{ order:4; margin-left:0; } /* Figma: after socials, not far-right */
/* 6. Провал между контактным рядом и полосой вкладок: .pro_extra_row —
пустой контейнер (все дети скрыты волной w11/w12), но сохранял
padding/border и добавлял ~30px пустой высоты и полосу того же
фона .pro_page_top; плюс margin-bottom секции и padding-top вкладок
суммарно давали ~70-90px и смену фона. Всё внутри уже скрыто по
правилу владельца («нет в макете — display:none»); прячем и сам
пустой контейнер, а не только детей. */
.pro_page_top .pro_extra_row{ display:none; }
.pro_page_top{ margin-bottom:0; padding-bottom:14px; }
.pro_tabs_wrap{ padding-top:10px; }
/* 7. Первый заголовок вкладки «Обо мне»: в макете (bar_pro_about/01)
скромный левый синий "Здравствуйте!", а не гигантский центрированный
заголовок. Текст не переименовываю (не SEO-строка, а вопрос стиля). */
/* Figma about titles: 18/500 #5B6D9C (not blue 20/600). */
#about .all_title, #tab-about .all_title{
text-align:left;
font-size:18px;
font-weight:500;
color:#5B6D9C;
margin:0 0 8px;
}
}
/* ================= ВКЛАДКИ 2-5: общие для всех ширин ================= */
/* Услуги: заголовок модуля выровнен по левому краю в макете (bar_pro_services/01),
на сайте общий .module-title из темы центрирован по умолчанию. */
#services .module-title,#tab-services .module-title,
#gallery .module-title,#tab-gallery .module-title,
#contacts .module-title,#tab-contacts .module-title{
text-align:left;
}
/* ================= ПЛАНШЕТ 481-1024px (bar_protab) ================= */
@media (min-width:481px) and (max-width:1024px){
.pro_page_top .name_before{ font-size:13px; font-weight:400; color:#8993ab; }
.pro_page_top .preview_text{ font-size:14px; line-height:1.7; }
.pro_page_top .description_link{ text-align:right; }
.pro_page_top .description_link a{ display:inline-flex; align-items:center; gap:6px; }
.pro_page_top.is-teaser .description_link a::after{ content:"\25BE"; }
.pro_page_top:not(.is-teaser) .description_link a::after{ content:"\25B4"; }
.pro_page_top .bottom_flex .address_wrap{
display:flex;
flex-wrap:wrap;
align-items:center;
column-gap:18px;
row-gap:12px;
}
.pro_page_top .pro_contacts_row{ width:100%; margin:0; }
.pro_page_top .address_wrap-contacts .offer_contacts_item{
display:flex; align-items:center; flex-wrap:nowrap; gap:14px;
}
.pro_page_top .pro_whatsapp_cta{ order:2; }
.pro_page_top .pro_social_icons{ order:3; }
.pro_page_top .pro_share_link{ order:4; margin-left:0; }
.pro_page_top{ margin-bottom:0; padding-bottom:12px; }
.pro_tabs_wrap{ padding-top:8px; }
#about .all_title, #tab-about .all_title{ text-align:left; font-size:19px; font-weight:600; color:#0066b2; margin:0 0 10px; }
}
/* ================= МОБИЛЬНАЯ <=480px (bar_promob / 1039:65686) ================= */
@media (max-width:480px){
/* Reinforce side-by-side hero (gw7 grid) — this file wins cascade. */
.pro_page_top .container{
display:grid !important;
grid-template-columns:1fr 120px;
column-gap:12px;
align-items:start;
}
.pro_page_top .breadcrumb{ grid-column:1 / -1; }
.pro_page_top .bottom_flex{ display:contents; }
.pro_page_top .img_wrap,
.pro_page_top .bottom_flex .img_wrap{
grid-area:unset;
grid-column:2;
grid-row:2 / span 4;
width:120px;
margin:0;
}
.pro_page_top .name_before,
.pro_page_top h1,
.pro_page_top .preview_text,
.pro_page_top .description_link{
grid-column:1;
text-align:left !important;
}
.pro_page_top .address_wrap,
.pro_page_top .bottom_flex .address_wrap{
/* Reset additional_102024 grid-area:grid-b so contacts sit under
the split hero, not beside the avatar in row 2.
Longhands + !important — shorthand grid-area:unset would wipe
grid-column back to auto and leave contacts in the 208px left col. */
grid-row-start:auto !important;
grid-column-start:1 !important;
grid-row-end:auto !important;
grid-column-end:-1 !important;
width:100%;
max-width:none;
margin-left:0;
}
.pro_page .img_wrap .img,
.pro_page_top .img_wrap .img{
width:120px;
height:120px;
}
.pro_page_top .description_link{ text-align:left; }
.pro_page_top .description_link a{ display:inline-flex; align-items:center; gap:6px; }
.pro_page_top.is-teaser .description_link a::after,
.pro_page_top:not(.is-teaser) .description_link a::after{ content:"\25BE"; }
/* Contacts: phone full width, then WA + social + share one row. */
.pro_page_top .pro_contacts_row{
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:center;
gap:10px 12px;
width:100%;
margin:0;
}
.pro_page_top .address_wrap-contacts{ flex:0 0 100%; max-width:100%; }
.pro_page_top .pro_whatsapp_cta{
order:2;
margin:0;
background:#0066b2;
width:auto;
min-width:0;
padding:10px 12px;
border-radius:8px;
flex:0 1 auto;
}
.pro_page_top .pro_social_icons{
order:3;
margin:0;
padding:0;
justify-content:flex-start;
gap:8px;
}
.pro_page_top .pro_social_icon{
width:28px;
height:28px;
background:transparent;
}
.pro_page_top .pro_social_icon svg{ width:22px; height:22px; }
.pro_page_top .pro_share_link{
order:4;
margin:0; /* Figma: after socials */
}
/* .pro_extra_row уже display:none волной w7; закрываем тот же провал/фон здесь. */
.pro_page_top{ margin-bottom:0; padding-bottom:12px; }
.pro_tabs_wrap{ padding-top:8px; }
#about .all_title, #tab-about .all_title{ text-align:left; font-size:17px; font-weight:600; color:#0066b2; margin:0 0 8px; }
/* Горизонтальное переполнение: подстраховка на длинных email/адресах
в карточках контактов на узких экранах — перенос по слову. */
.pro_page_contacts .offer_contacts_item span{ word-break:break-word; }
/* Услуги 3-col (override figma-redesign 2-col @767). */
#services .pro_page_gallery .items, #tab-services .pro_page_gallery .items,
.pro_page_gallery .items,
.pro_tabpanel .items{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px 8px;
}
#services .pro_page_gallery .items .item, #tab-services .pro_page_gallery .items .item,
.pro_tabpanel .item{
width:auto;
max-width:none;
}
.pro_tabpanel .item > a.magnificPopup img{
width:100%;
aspect-ratio:1;
object-fit:contain;
object-position:center;
border-radius:12px;
}
/* Видео 2-col (override figma-redesign 1-col @767). */
#gallery .pro_video_gallery__grid, #tab-gallery .pro_video_gallery__grid,
.fg-pro-gallery__videos-grid.pro_video_gallery__grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px;
}
/* Footer ≤480: do NOT keep the dense 2-col (Специалисты|Платформа).
That layout crushed categories (~12px) and dropped .ftr__big
(Услуги/Блог/Афиша) over the platform column — see intake shot
kf-region-mszs9ccl-slrm. Restore gw2-mob2 stacked Figma phone
footer: brand, then Специалисты row, then big links. Lists stay
in the DOM for tablet/desktop. */
body .fg .ftr__in{
display:flex;
flex-direction:column;
gap:0;
padding-top:34px;
text-align:center;
}
body .fg .ftr__brand{
order:1;
display:block;
text-align:center;
margin-bottom:8px;
}
body .fg .ftr__logo{ margin:0 auto 16px; }
body .fg .ftr__slogan,
body .fg .ftr__desc{ text-align:center; }
body .fg .ftr__phone{
justify-content:center;
margin:0 auto 16px;
grid-column:auto;
grid-row:auto;
}
body .fg .ftr__soc{
justify-content:center;
margin:0 auto 24px;
grid-column:auto;
}
body .fg .ftr__col--spec{
order:2;
text-align:center;
border-top:1px solid rgba(255,255,255,.18);
}
body .fg .ftr__col--spec .ftr__title{
justify-content:center;
pointer-events:auto;
font-size:18px;
font-weight:400;
padding:15px 0;
margin:0;
cursor:pointer;
}
body .fg .ftr__col--spec .ftr__title::after{ display:none; }
body .fg .ftr__col--spec .ftr__two{ display:none !important; }
body .fg .ftr__col:not(.ftr__col--spec){
order:3;
display:flex;
flex-direction:column;
text-align:center;
border-top:1px solid rgba(255,255,255,.18);
}
body .fg .ftr__col:not(.ftr__col--spec) .ftr__title{ display:none !important; }
body .fg .ftr__col:not(.ftr__col--spec) .ftr__list{ display:none !important; }
body .fg .ftr__col:not(.ftr__col--spec) .ftr__big{
display:block;
margin:0;
padding:15px 0 4px;
}
body .fg .ftr__col:not(.ftr__col--spec) .ftr__big li{ margin-bottom:14px; }
body .fg .ftr__col:not(.ftr__col--spec) .ftr__big a{
font-size:18px;
font-weight:400;
}
/* Header search icon must stay in the bar, not float over footer text. */
body .fg .hdr__right .hdr__icon.search-overlay-toggle{ display:none !important; }
}
/* Дефект: соцссылки на вкладке Контакты (facebook/instagram/tiktok — полный URL
в данных, короткого хэндла нет) вылезали за карточку на всех ширинах, не
только <480px — additional_102024.css .offer_contacts_item span{white-space:nowrap}
(0,2,0) не перебивался старым правилом внутри @media(max-width:480px).
Снимаем nowrap глобально через равный по силе, но более специфичный
селектор (0,3,0), без @media. */
.pro_page_contacts .offer_contacts_item span{ white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
/* ================= Добивка лидом (волна 20) =================
Билдер по этому куску упал посреди работы; ниже то, что осталось между его
последним деплоем и макетом `out/bar_pro_about/01`. Все значения — из замеров
на живой странице, не на глаз. */
/* Провал между полосой вкладок и содержимым. Источник — `margin-top: 160px`
у `.pro_page_description` в теме; в макете там около 40px. */
.pro_page_description { margin-top: 36px; }
/* Красная плашка «Скидка N% для клиентов сайта sarafanPRO» (#db0000, чистый
красный) не встречается в палитре макета (#000F38/#0066B2/#0264AD/#5B6D9C/
#96A1BD/#DDDDDD/#FFFFFF/#6C737D). Figma MCP в этой сессии недоступен (нужен
запущенный Figma desktop с открытым файлом — см. operator_gap), поэтому
элемент приведён к токенам палитры (основной синий CTA), а не оставлен
красным. .offers_list .item .discount (карточки каталога) НЕ трогаем —
вне области этой правки. */
.pro_page_contacts .offer_contacts_discount{ background-color:#0066B2; color:#fff; }
/* Хлебные крошки приходили с `text-transform: capitalize` — «Каталог
Специалистов», «Услуги Красоты». В макете обычный регистр. */
.pro_page_top .breadcrumb,
.pro_page_top .breadcrumb * { text-transform: none; }
@media (min-width: 1025px) {
/* ── Figma 745:55499 (Сайт мастера / Обо мне) — desktop re-measure ──
API nodes + design PNG 1920×3755 vs live feliks-shteyn @1920.
Previous 32px/760px and 240px avatar were wrong-node assumptions. */
/* 1. Avatar ring: Figma 745:55503/04 = 480×480, stroke 1 #0066B2,
pad 8 → image 468×468. Was 240×240 (−50% diameter). */
.pro_page_top .bottom_flex .img_wrap{
width:480px;
top:62px; /* breadcrumbs 26 + gap ≈ level of category/h1 */
}
.pro_page .img_wrap .img{
width:480px;
height:480px;
border:1px solid #0066B2;
padding:8px;
background:#fff;
box-sizing:border-box;
border-radius:50%;
overflow:hidden;
}
.pro_page .img_wrap .img img{
display:block;
border:0;
width:100%;
height:100%;
max-width:none;
max-height:none; /* legacy max-height:900px stretched portrait */
object-fit:contain;
object-position:center center;
transform:none;
border-radius:50%;
box-sizing:border-box;
}
/* 2. Category kicker: Figma 745:55508 = 28/400 #2E437B (was 14px #8993AB). */
.pro_page_top .name_before{
font-size:28px;
line-height:1.18;
font-weight:400;
color:#2E437B;
margin:0 0 12px;
max-width:677px;
}
/* 3. H1 name: Figma 745:55507 = 38/400 #0066B2, col 677 (was 32/760). */
.pro_page_top h1 {
font-size: 38px;
line-height: 1.18; /* ~45px lh in Figma */
font-weight: 400;
max-width: 677px;
padding-right: 0;
color: #0066B2;
margin-bottom: 16px;
}
/* Preview bio: Figma 745:55509 = 16/400 #5B6D9C, width 677. */
.pro_page_top .preview_text{
max-width:677px;
font-size:16px;
line-height:1.35; /* ~21.6px */
color:#5B6D9C;
}
.pro_page_top .description_link{
max-width:677px;
}
/* 4. Tabs: Figma body tab Web 1180×64, tab ~227×60, label 20/400.
Active = white pill + 1.5px #0066B2 border (design), sits INSET in navy
capsule — was missing border / double-edge on left («потерлась граница»). */
.pro_tabs{
max-width:1180px;
margin-left:auto;
margin-right:auto;
height:64px;
padding:2px;
box-sizing:border-box;
gap:0;
/* Figma tab bar = medium navy (design #2), not near-black #000F37 */
background:#0B2F7A !important;
background-image:none !important;
border:0 !important;
border-radius:999px !important;
align-items:stretch;
overflow:visible;
}
.pro_tabs .pro_tab{
flex:1 1 0;
font-size:20px;
line-height:1.185;
padding:12px 16px;
min-height:0;
height:auto;
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
/* transparent border reserves space so active border doesn't reflow */
border:2px solid transparent !important;
border-radius:999px !important;
color:#fff;
background:transparent;
font-weight:400;
text-decoration:none;
}
.pro_tabs .pro_tab:hover{
background:rgba(255,255,255,.10);
color:#fff;
}
.pro_tabs .pro_tab.is-active{
background:#fff !important;
color:#0066B2 !important;
border-color:#0066B2 !important; /* Figma: blue outline on white pill */
font-weight:400 !important;
box-shadow:none !important;
}
/* About body: Figma 745:55527 section titles 18/500 #5B6D9C,
body 18/400 #5B6D9C lh≈25.2 — not blue 20/600. */
#about .all_title, #tab-about .all_title{
font-size:18px;
font-weight:500;
color:#5B6D9C;
margin:0 0 8px;
}
#about .description_text, #tab-about .description_text,
#about .description_text p, #tab-about .description_text p{
font-size:18px;
line-height:1.4;
font-weight:400;
color:#5B6D9C;
}
#about .description_text h2, #tab-about .description_text h2{
font-size:26px;
font-weight:600;
line-height:1.25;
color:#0066B2;
margin:28px 0 12px;
}
#about .description_text h3, #tab-about .description_text h3{
font-size:20px;
font-weight:600;
line-height:1.3;
margin:20px 0 10px;
}
#about .description_text h4, #tab-about .description_text h4{
font-size:16px;
font-weight:600;
line-height:1.35;
margin:16px 0 8px;
}
/* Phone row: Figma 745:55572 = 20/400 #0066B2. */
.pro_page_top .address_wrap-contacts .offer_contacts_item a{
color:#0066B2;
font-size:20px;
line-height:1.2;
}
/* WhatsApp CTA: larger hit target (was ~40px). */
.pro_page_top .pro_whatsapp_cta{
border-radius:8px;
padding:12px 28px;
min-height:48px;
font-size:16px;
line-height:1.2;
box-sizing:border-box;
}
/* Контакты: Figma row = [WA] [soft social circles] [Поделиться] as ONE group.
Share sits RIGHT AFTER socials (gap ~16), NOT ml:auto to far edge. */
.pro_contacts_row {
align-items: center;
row-gap: 16px;
column-gap: 16px;
}
.pro_contacts_row .address_wrap-contacts {
flex: 0 0 100%;
max-width: 100%;
}
.pro_contacts_row .pro_whatsapp_cta { order: 1; flex: 0 0 auto; }
.pro_contacts_row .pro_social_icons { order: 2; flex: 0 0 auto; }
.pro_contacts_row .pro_share_link {
order: 3;
flex: 0 0 auto;
margin-left: 0 !important; /* stick to socials, not far right */
}
/* Social: larger circles + glyphs */
html body[class*="product-product"] .pro_page_top .pro_social_icons,
.pro_page_top .pro_social_icons{
display:flex !important;
align-items:center !important;
gap:12px !important;
margin:0 !important;
}
html body[class*="product-product"] .pro_page_top .pro_social_icon,
.pro_page_top .pro_social_icon{
width:44px !important;
height:44px !important;
border-radius:50% !important;
background:#F1F3F5 !important;
border:0 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
}
html body[class*="product-product"] .pro_page_top .pro_social_icon svg,
.pro_page_top .pro_social_icon svg{
width:24px !important;
height:24px !important;
}
/* Share: Figma text+icon immediately after socials (design #2).
14/400 #5B6D9C, NO fill/border, gap 16 from previous item via row column-gap. */
html body[class*="product-product"] .pro_page_top .pro_share_link,
.pro_page_top .pro_share_link,
.pro_share_link,
.pro_contacts_row .pro_share_link{
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
margin:0 !important;
margin-left:0 !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
color:#5B6D9C !important;
font-size:14px !important;
line-height:20px !important;
font-weight:400 !important;
text-decoration:none !important;
white-space:nowrap;
cursor:pointer;
flex:0 0 auto !important;
}
html body[class*="product-product"] .pro_page_top .pro_share_link:hover,
.pro_page_top .pro_share_link:hover,
.pro_share_link:hover{
color:#0066B2 !important;
background:transparent !important;
}
html body[class*="product-product"] .pro_page_top .pro_share_link svg,
.pro_page_top .pro_share_link svg,
.pro_share_link svg{
width:20px !important;
height:20px !important;
flex:0 0 20px;
stroke:currentColor !important;
}
html body[class*="product-product"] .pro_page_top .pro_share_link span,
.pro_page_top .pro_share_link span{
color:inherit !important;
}
/* Breadcrumbs: Figma 14/400 #0066B2 (was 13px #5B6D9C). */
.pro_page_top .breadcrumb,
.pro_page_top .breadcrumb li,
.pro_page_top .breadcrumb li a{
font-size:14px !important;
line-height:1.3;
font-weight:400;
color:#0066B2 !important;
}
.pro_page_top .breadcrumb li + li:before,
.pro_page_top .breadcrumb .separator{
color:#0066B2 !important;
}
/* About content width: Figma text frame ~1080 inside 1180 container. */
.pro_page .container,
.pro_page .pro_tabs,
.pro_page #about,#tab-about,
.pro_page .tab-content,
.pro_page .left_column{
max-width:1180px;
margin-left:auto;
margin-right:auto;
box-sizing:border-box;
}
#about .description_text, #tab-about .description_text,
#about .all_title, #tab-about .all_title,
.pro_page #about .content, .pro_page #tab-about .content{
max-width:1080px;
width:100%;
box-sizing:border-box;
}
}
@media (max-width: 640px) {
/* Figma mob 390 (1039:65686): kicker + H1 left next to avatar, NOT
centered under a stacked 180px photo. gw7-promob grid owns ≤480;
keep left here so this file (later cascade) does not re-center. */
.pro_page_top .name_before,
.pro_page_top h1 {
text-align: left !important;
max-width: none;
}
.pro_page_top .name_before {
font-size: 14px;
color: #5B6D9C;
margin: 0 0 8px;
text-align: left;
}
.pro_page_top h1 { font-size: 20px; line-height: 1.25; font-weight: 600; }
/* Single compact crumb line; long path scrolls (matches Figma). */
.pro_page_top .breadcrumb {
flex-wrap: nowrap;
overflow-x: auto;
white-space: nowrap;
padding-right: 24px;
font-size: 12px;
-webkit-overflow-scrolling: touch;
}
}
/* ── Вкладка «Услуги» ─────────────────────────────────────────────────────
Сверка с `out/bar_pro_services`: в макете вкладка начинается сразу сеткой
круглых превью, без заголовка над ней, без нумерации в подписях, кольцо у
превью тонкое и светлое, зелёной кнопки в макете нет вообще. */
/* Заголовка «Галерея работ и услуг» в макете нет. Правило намеренно сужено до
сетки работ: сначала оно стояло на всех панелях и обнулило вкладку «Галерея»
у специалистов без видео — там кроме заголовка ничего нет, вкладка стала
пустой полосой в 40px. */
.pro_page_gallery .module-title { display: none; }
/* Квадратные превью услуг: полный кадр, без кругового кропа. */
.pro_tabpanel .item > a.magnificPopup {
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
border-radius: 16px;
background: #eef3f9;
border: 1px solid #d5e4f4;
box-sizing: border-box;
overflow: hidden;
}
.pro_tabpanel .item > a.magnificPopup img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
border: 0;
border-radius: 12px;
box-sizing: border-box;
background: #eef3f9;
}
/* Подпись: в макете синяя по центру, обычного начертания. */
.pro_tabpanel .item .description {
margin-top: 12px;
font-size: 14px;
line-height: 1.35;
color: #0066B2;
text-align: center;
}
/* Кнопка «Напишите мне в WhatsApp» внутри подписи — в макете её у превью нет. */
.pro_tabpanel .item .description > a.btn { display: none; }
/* Кнопка «Посмотреть все» приходила ярко-зелёной — такого цвета в макете нет.
Сам показ остальных работ оставляем: в макете сетка выведена целиком, но
резать функцию ради этого неправильно, вопрос вынесен в GAPS. */
.pro_tabpanel .js-show-gallery {
background: #0B4A8F;
color: #fff;
border: 0;
}
.pro_tabpanel .js-show-gallery:hover { background: #0066B2; }
/* Серые полосы по бокам сетки — это `.items::before/::after`, 40px шириной,
цвет rgb(219,229,243). В макете их нет. */
.pro_page_gallery .items::before,
.pro_page_gallery .items::after { display: none; }
/* Кольцо превью: у темы padding 7px и насыщенный градиент, у картинки белая
рамка 5px — вместе выходит толстый сиреневый обод. В макете обод тонкий и
светлый. Класс продублирован, чтобы перебить правило темы. */
.pro_tabpanel .item > a.magnificPopup.magnificPopup {
padding: 6px !important;
border-radius: 16px !important;
background: #eef3f9 !important;
border: 1px solid #d5e4f4 !important;
}
.pro_tabpanel .item > a.magnificPopup.magnificPopup img {
border: 0 !important;
border-radius: 12px !important;
object-fit: contain !important;
}
/* Под кнопкой висел зелёный кружок `::after` 28px (rgb(76,206,173)) — остаток
прежнего оформления, в макете его нет. */
.pro_tabpanel .js-show-gallery::after { display: none; }
/* Кнопка «Посмотреть все» приходила с `margin: -10px 570px 0` — отрицательный
отступ сверху затягивал её на сетку, а снизу отступа не было вовсе, из-за
чего кнопка упиралась прямо в подвал (замер: низ кнопки 573px, верх подвала
573px). Центрирование было прибито числом 570px, что ломается на другой
ширине, — заменено на auto. */
.pro_tabpanel .js-show-gallery {
display: flex;
width: fit-content;
margin: 28px auto 56px !important;
}
/* Заголовок видео-раздела: в макете это мелкая синяя подпись по левому краю
(«Галерея Видео»), а не крупный центрированный заголовок темы. */
#video_gallery .module-title {
font-size: 18px;
line-height: 1.3;
font-weight: 400;
color: #0066B2;
text-align: left;
margin: 0 0 16px;
text-decoration: none;
}
/* ── Вкладка «Отзывы» ─────────────────────────────────────────────────────
Эталон `out/bar_pro_reviews`. Заголовок и строка статистики уже были в
разметке, дальше — оформление. */
.pro_tabpanel .module-title.text-center {
font-size: 21px;
line-height: 1.3;
font-weight: 400;
color: #0066B2;
text-align: center;
margin: 0 0 14px;
text-decoration: none;
}
/* Строка статистики: в макете три части, разделённые вертикальными чертами. */
.pro_tabpanel .reviews_statbar {
justify-content: center;
align-items: center;
gap: 0;
margin: 0 0 26px;
}
.pro_tabpanel .reviews_statbar > * {
padding: 0 34px;
font-size: 14px;
color: #5B6D9C;
text-decoration: none;
}
.pro_tabpanel .reviews_statbar > * + * { border-left: 1px solid #DCE3EC; }
/* Форма отзыва: в макете светло-серая карточка со скруглением. */
.pro_tabpanel form.form-horizontal {
max-width: 760px;
margin: 0 auto;
padding: 26px 30px 30px;
background: #F1F3F5;
border-radius: 12px;
box-sizing: border-box;
}
.pro_tabpanel form.form-horizontal .gw-form-title {
font-size: 20px;
line-height: 1.3;
color: #0066B2;
text-align: center;
margin: 0 0 16px;
}
.pro_tabpanel form.form-horizontal input[type="text"],
.pro_tabpanel form.form-horizontal input[type="tel"],
.pro_tabpanel form.form-horizontal textarea {
width: 100%;
padding: 11px 14px;
font-size: 14px;
color: #5B6D9C;
background: #fff;
border: 1px solid #DCE3EC;
border-radius: 6px;
box-sizing: border-box;
}
/* Кнопка отправки: в макете небольшая тёмно-синяя, а не широкая пилюля. */
.pro_tabpanel form.form-horizontal button.button_circle {
display: block;
width: fit-content;
min-width: 0;
height: 38px;
margin: 18px auto 0;
padding: 0 22px;
font-size: 14px;
color: #fff;
background: #0B4A8F;
border: 0;
border-radius: 6px;
}
/* Отдельная кнопка «Написать отзыв» стояла прямо над формой, которая и так
раскрыта. В макете (745:55714) её нет. Селектор был неверным
(.pro_tabpanel > .container), реально: #review_wrap > .container > a */
#reviews #review_wrap > .container > a.button_circle,#tab-reviews #review_wrap > .container > a.button_circle,
#reviews a.button_circle.js-go[href="#form-review"],#tab-reviews a.button_circle.js-go[href="#form-review"],
.pro_tabpanel #review_wrap > .container > a.button_circle.js-go {
display: none !important;
}
/* Постраничная навигация приходила с бежевой активной клеткой — такого цвета
в палитре макета нет. */
.pro_tabpanel .pagination_wrap { display: flex; justify-content: center; gap: 8px; margin: 18px 0 0; }
.pro_tabpanel .pagination_wrap a,
.pro_tabpanel .pagination_wrap span,
.pro_tabpanel .pagination_wrap b {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 8px;
font-size: 14px;
color: #5B6D9C;
background: #fff;
border: 1px solid #DCE3EC;
border-radius: 6px;
text-decoration: none;
box-sizing: border-box;
}
.pro_tabpanel .pagination_wrap b,
.pro_tabpanel .pagination_wrap .active {
color: #fff;
background: #0B4A8F;
border-color: #0B4A8F;
}
/* Блок оценок в форме отзыва. Замер: контейнер `.review_items` — flex высотой
108px, из-за чего последняя подпись «Чистота» налезала на «Ваше имя».
Звёзды приходили по 30px, в макете около 18px. */
.pro_tabpanel .review_items {
flex-wrap: wrap;
gap: 10px 40px;
height: auto;
margin: 0 0 22px;
}
.pro_tabpanel .review_items .form-group {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
}
.pro_tabpanel .review_items .star-cb-group-label {
width: auto;
min-width: 120px;
font-size: 14px;
color: #5B6D9C;
}
.pro_tabpanel .review_items .star-cb-group label {
font-size: 19px;
line-height: 1;
}
/* Кнопка отправки: у темы скругление 999px и свой синий — в макете небольшой
прямоугольник со скруглением 6px. */
.pro_tabpanel form.form-horizontal button.button_circle.button_circle {
border-radius: 6px !important;
background: #0B4A8F !important;
}
/* Цвет кнопки отправки перебивался правилом темы с id в селекторе — поэтому
здесь тоже с id, иначе оставался светлее макетного. */
#content .pro_tabpanel form.form-horizontal button.button_circle { background: #0B4A8F !important; }
/* ── Вкладка «Контакты» ───────────────────────────────────────────────────
Замер: панель 1068px при содержимом около 660px. Причины две — пустой
заголовок `h2.module-title` растягивался колонкой на 1038px, а колонка
контактов тянулась по высоте соседа из-за stretch. Плюс слева шла синяя
вертикальная черта 2px, которой в макете нет. */
.pro_page_contacts .module-title:empty { display: none; }
.pro_page_contacts .container { align-items: flex-start; }
.pro_page_contacts .right_column_contacts {
border-left: 0;
padding-left: 0;
}
/* Аватар во вкладке «Контакты» наезжал на полосу вкладок.
Причина: `.pro_page_description .img_wrap .img{margin-top:-80px}` в
`additional_102024.css` — подтяжка, задуманная для блока «Обо мне», где над
аватаром идёт описание. Во вкладке «Контакты» над ним оказывается сама полоса
вкладок, и круг 240px садится поверх пункта «Услуги», перекрывая текст.
В макете (`745:55808`) такого наложения нет: там герой-изображение 480×480,
ниже хлебные крошки, ниже полоса вкладок 1180×64 — аватар ни на что не наезжает.
Гасим подтяжку только внутри вкладки: (1,3,0) перебивает (0,3,0) без !important. */
#contacts .pro_page_description .img_wrap .img ,#tab-contacts .pro_page_description .img_wrap .img {
margin-top: 0;
}
/* ============================================================
2026-08-12 desktop Figma 745:55498 (master-site @1440)
Biggest gap: long bio expanded → WA CTA below 900 fold.
gw18-card.css loads AFTER this file and reorders hero (CTA before bio,
avatar 280). Override with higher specificity (html body[class*=…]) so
Figma order wins: crumb → kicker → h1 → teaser → Развернуть → CTA,
avatar 480 right. Mobile ≤480 owned by gw7-promob (untouched).
============================================================ */
@media (min-width:1025px){
/* Shell: 2-col grid, Figma text | 480 avatar, gap ≥32px */
html body[class*="product-product"] .pro_page_top{
padding-bottom:8px !important;
margin-bottom:0 !important;
min-height:0;
}
html body[class*="product-product"] .pro_page_top .container{
display:grid !important;
/* Figma 745:55499: text 677 + gap 22 + avatar 480 inside 1180 */
grid-template-columns:677px 480px !important;
column-gap:22px !important;
justify-content:space-between !important;
align-items:start !important;
position:relative;
max-width:1180px !important;
}
html body[class*="product-product"] .pro_page_top .breadcrumb{
grid-column:1 / -1 !important;
grid-row:1 !important;
}
html body[class*="product-product"] .pro_page_top .bottom_flex{
display:contents !important;
}
/* Kicker + H1 — Figma 28/400 + 38/400 */
html body[class*="product-product"] .pro_page_top .name_before{
grid-column:1 !important;
grid-row:2 !important;
display:block !important;
font-family:'Rubik','Open Sans',system-ui,sans-serif !important;
font-size:28px !important;
line-height:1.185 !important; /* Figma 33.18px */
font-weight:400 !important;
font-synthesis:none !important;
letter-spacing:0 !important;
color:#2E437B !important;
margin:0 0 12px !important;
max-width:677px !important;
}
html body[class*="product-product"] .pro_page_top h1{
grid-column:1 !important;
grid-row:3 !important;
font-family:'Rubik','Open Sans',system-ui,sans-serif !important;
font-size:38px !important;
font-weight:400 !important;
font-synthesis:none !important;
letter-spacing:0 !important;
line-height:1.185 !important; /* Figma 45.03px */
margin:0 0 16px !important;
max-width:677px !important;
padding-right:0 !important;
padding-left:0 !important;
color:#0066B2 !important;
}
html body[class*="product-product"] .pro_page_top h1:before{
display:none !important;
}
/* About body: Figma 18/400 + 18/500 headings — even when CMS puts copy in DIV/H2 */
html body[class*="product-product"] #about .description_text, html body[class*="product-product"] #tab-about .description_text,
html body[class*="product-product"] #about .description_text p, html body[class*="product-product"] #tab-about .description_text p,
html body[class*="product-product"] #about .description_text div, html body[class*="product-product"] #tab-about .description_text div{
font-family:'Rubik','Open Sans',system-ui,sans-serif !important;
font-size:18px !important;
line-height:1.4 !important;
font-weight:400 !important;
color:#5B6D9C !important;
}
html body[class*="product-product"] #about .description_text h2, html body[class*="product-product"] #tab-about .description_text h2{
font-family:'Rubik','Open Sans',system-ui,sans-serif !important;
font-size:26px !important;
font-weight:600 !important;
line-height:1.25 !important;
color:#0066B2 !important;
margin:28px 0 12px !important;
}
html body[class*="product-product"] #about .description_text h3, html body[class*="product-product"] #tab-about .description_text h3{
font-family:'Rubik','Open Sans',system-ui,sans-serif !important;
font-size:20px !important;
font-weight:600 !important;
line-height:1.3 !important;
margin:20px 0 10px !important;
}
html body[class*="product-product"] #about .description_text h4, html body[class*="product-product"] #tab-about .description_text h4{
font-family:'Rubik','Open Sans',system-ui,sans-serif !important;
font-size:16px !important;
font-weight:600 !important;
line-height:1.35 !important;
margin:16px 0 8px !important;
}
/* Bio teaser ALWAYS clamped (JS clears .is-teaser on About) */
html body[class*="product-product"] .pro_page_top .preview_text,
html body[class*="product-product"] .pro_page_top:not(.is-teaser) .preview_text,
html body[class*="product-product"] .pro_page_top.is-teaser .preview_text{
grid-column:1 !important;
grid-row:4 !important;
max-width:677px !important;
max-height:210px !important;
overflow:hidden !important;
font-family:'Rubik','Open Sans',system-ui,sans-serif !important;
font-size:16px !important;
font-weight:400 !important;
line-height:1.35 !important; /* Figma 21.6 */
color:#5B6D9C !important;
-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%) !important;
mask-image:linear-gradient(180deg,#000 72%,transparent 100%) !important;
}
html body[class*="product-product"] .pro_page_top.is-expanded .preview_text{
max-height:none !important;
-webkit-mask-image:none !important;
mask-image:none !important;
}
/* «Развернуть» under teaser (hide JS «Свернуть» while clamped) */
html body[class*="product-product"] .pro_page_top .description_link{
grid-column:1 !important;
grid-row:5 !important;
text-align:right !important;
max-width:677px !important;
margin:4px 0 10px !important;
padding-left:0 !important;
}
html body[class*="product-product"] .pro_page_top .description_link a{
display:inline-flex !important;
align-items:center;
gap:6px;
font-size:0 !important;
color:#0066B2 !important;
text-decoration:none;
}
html body[class*="product-product"] .pro_page_top .description_link a::before{
content:"Развернуть";
font-size:14px;
line-height:1.3;
}
html body[class*="product-product"] .pro_page_top .description_link a::after{
content:"\25BE" !important;
font-size:12px;
line-height:1;
}
html body[class*="product-product"] .pro_page_top.is-expanded .description_link a::before{
content:"Свернуть";
}
html body[class*="product-product"] .pro_page_top.is-expanded .description_link a::after{
content:"\25B4" !important;
}
/* Contacts + WA CTA AFTER teaser (Figma order; beats gw18 row-4-before-bio) */
html body[class*="product-product"] .pro_page_top .address_wrap,
html body[class*="product-product"] .pro_page_top .bottom_flex .address_wrap{
grid-column:1 !important;
grid-row:6 !important;
width:100% !important;
max-width:677px !important;
margin:0 !important;
padding-top:8px !important;
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
column-gap:18px !important;
row-gap:12px !important;
}
html body[class*="product-product"] .pro_page_top .pro_contacts_row{
width:100% !important;
margin:0 !important;
padding:0 0 4px !important;
}
html body[class*="product-product"] .pro_page_top .address_wrap-contacts .offer_contacts_item a{
font-size:20px !important;
line-height:1.2 !important;
color:#0066B2 !important;
}
html body[class*="product-product"] .pro_page_top .pro_copy_btn{
font-size:14px !important;
font-weight:400 !important;
}
html body[class*="product-product"] .pro_page_top .pro_whatsapp_cta{
order:2;
margin:0 !important;
border-radius:8px !important;
padding:12px 28px !important;
min-height:48px !important;
font-size:16px !important;
}
html body[class*="product-product"] .pro_page_top .pro_social_icons{
gap:12px !important;
}
html body[class*="product-product"] .pro_page_top .pro_social_icons a:empty,
html body[class*="product-product"] .pro_page_top .pro_social_icons a[href=""],
html body[class*="product-product"] .pro_page_top .pro_social_icons a[href="#"],
html body[class*="product-product"] .pro_page_top .pro_social_icon:empty{
display:none !important;
}
/* Desktop tabs + share — beat figma-redesign gradient / missing active border */
html body[class*="product-product"] .pro_tabs{
background:#0B2F7A !important;
background-image:none !important;
height:64px !important;
padding:2px !important;
gap:0 !important;
border-radius:999px !important;
border:0 !important;
max-width:1180px !important;
}
html body[class*="product-product"] .pro_tabs .pro_tab{
border:2px solid transparent !important;
border-radius:999px !important;
font-size:20px !important;
font-weight:400 !important;
color:#fff !important;
background:transparent !important;
}
html body[class*="product-product"] .pro_tabs .pro_tab.is-active{
background:#fff !important;
color:#0066B2 !important;
border-color:#0066B2 !important;
font-weight:400 !important;
}
/* Share glued to socials (Figma), never far-right auto */
html body[class*="product-product"] .pro_page_top .pro_share_link,
html body[class*="product-product"] .pro_page_top .pro_contacts_row .pro_share_link,
html body[class*="product-product"] .pro_page_top .address_wrap .pro_share_link{
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
color:#5B6D9C !important;
font-size:14px !important;
font-weight:400 !important;
background:transparent !important;
border:0 !important;
margin:0 !important;
margin-left:0 !important;
}
/* Avatar 480 Figma ring (beat gw18 280) */
html body[class*="product-product"] .pro_page_top .img_wrap,
html body[class*="product-product"] .pro_page_top .bottom_flex .img_wrap{
grid-column:2 !important;
grid-row:2 / span 5 !important;
position:static !important;
top:auto !important;
right:auto !important;
width:480px !important;
margin:0 !important;
}
html body[class*="product-product"] .pro_page .img_wrap .img,
html body[class*="product-product"] .pro_page_top .img_wrap .img{
width:480px !important;
height:480px !important;
padding:8px !important;
border:1px solid #0066B2 !important;
background:#fff !important;
box-sizing:border-box !important;
border-radius:50% !important;
overflow:hidden !important;
}
html body[class*="product-product"] .pro_page .img_wrap .img img,
html body[class*="product-product"] .pro_page_top .img_wrap .img img{
display:block !important;
width:100% !important;
height:100% !important;
max-width:none !important;
max-height:none !important;
object-fit:contain !important;
object-position:center center !important;
transform:none;
border-radius:50% !important;
border:0 !important;
box-sizing:border-box !important;
}
/* ── Contacts tab: identity header + list | map (Figma contacts) ── */
html body[class*="product-product"] #contacts .pro_page_contacts .container, html body[class*="product-product"] #tab-contacts .pro_page_contacts .container{
display:block;
max-width:1180px;
}
html body[class*="product-product"] #contacts .pro_page_contacts .module-title, html body[class*="product-product"] #tab-contacts .pro_page_contacts .module-title{
display:none !important;
}
html body[class*="product-product"] #contacts .fg-contacts-identity, html body[class*="product-product"] #tab-contacts .fg-contacts-identity{
display:flex;
align-items:center;
gap:16px;
margin:0 0 18px;
}
html body[class*="product-product"] #contacts .fg-contacts-idtext, html body[class*="product-product"] #tab-contacts .fg-contacts-idtext{
min-width:0;
}
html body[class*="product-product"] #contacts .fg-contacts-name, html body[class*="product-product"] #tab-contacts .fg-contacts-name{
font-family:'Rubik','Open Sans',system-ui,sans-serif;
font-size:22px;
font-weight:500;
line-height:1.2;
color:#0B2F7A;
margin:0 0 4px;
}
html body[class*="product-product"] #contacts .fg-contacts-spec, html body[class*="product-product"] #tab-contacts .fg-contacts-spec{
font-size:14px;
font-weight:400;
line-height:1.3;
color:#5B6D9C;
}
html body[class*="product-product"] #contacts .fg-contacts-list .offer_contacts_item, html body[class*="product-product"] #tab-contacts .fg-contacts-list .offer_contacts_item{
margin-bottom:10px;
}
/* Figma: every contact is a text row, not a filled pill (beats gw6 site button). */
html body[class*="product-product"] #contacts .fg-contacts-list .offer_contacts_item a, html body[class*="product-product"] #tab-contacts .fg-contacts-list .offer_contacts_item a,
html body[class*="product-product"] #contacts .fg-contacts-list .offer_contacts_item a[href*="type=site"], html body[class*="product-product"] #tab-contacts .fg-contacts-list .offer_contacts_item a[href*="type=site"]{
display:inline-flex !important;
align-items:flex-start !important;
gap:10px !important;
height:auto !important;
min-height:0 !important;
padding:0 !important;
background:none !important;
background-image:none !important;
border-radius:0 !important;
max-width:100%;
}
html body[class*="product-product"] #contacts .fg-contacts-list .offer_contacts_item a, html body[class*="product-product"] #tab-contacts .fg-contacts-list .offer_contacts_item a,
html body[class*="product-product"] #contacts .fg-contacts-list .offer_contacts_item span, html body[class*="product-product"] #tab-contacts .fg-contacts-list .offer_contacts_item span{
font-size:14px !important;
line-height:1.35 !important;
color:#0066B2 !important;
text-decoration:none !important;
white-space:normal !important;
overflow:visible;
text-overflow:clip;
word-break:break-word !important;
overflow-wrap:anywhere !important;
}
html body[class*="product-product"] #contacts .fg-contacts-list .offer_contacts_item svg, html body[class*="product-product"] #tab-contacts .fg-contacts-list .offer_contacts_item svg{
width:16px !important;
height:16px !important;
margin-right:10px !important;
flex:0 0 16px;
fill:#5B6D9C !important;
stroke:none !important;
margin-top:2px;
}
html body[class*="product-product"] #contacts .job_listing-directions, html body[class*="product-product"] #tab-contacts .job_listing-directions,
html body[class*="product-product"] #contacts .offer_contacts_discount, html body[class*="product-product"] #tab-contacts .offer_contacts_discount,
html body[class*="product-product"] #contacts .additional_filters, html body[class*="product-product"] #tab-contacts .additional_filters{
display:none !important;
}
html body[class*="product-product"] #contacts #listing-contact-map .gm-style-cc, html body[class*="product-product"] #tab-contacts #listing-contact-map .gm-style-cc,
html body[class*="product-product"] #contacts #listing-contact-map .gmnoprint, html body[class*="product-product"] #tab-contacts #listing-contact-map .gmnoprint,
html body[class*="product-product"] #contacts #listing-contact-map .gm-fullscreen-control, html body[class*="product-product"] #tab-contacts #listing-contact-map .gm-fullscreen-control,
html body[class*="product-product"] #contacts #listing-contact-map .gm-svpc, html body[class*="product-product"] #tab-contacts #listing-contact-map .gm-svpc{
display:none !important;
}
html body[class*="product-product"] #contacts .pro_page_contacts .right_column, html body[class*="product-product"] #tab-contacts .pro_page_contacts .right_column{
display:block;
width:100% !important;
max-width:none !important;
float:none !important;
position:static !important;
padding:0;
}
html body[class*="product-product"] #contacts .pro_page_description .img_wrap, html body[class*="product-product"] #tab-contacts .pro_page_description .img_wrap,
html body[class*="product-product"] #contacts .img_wrap, html body[class*="product-product"] #tab-contacts .img_wrap,
html body[class*="product-product"] #contacts .fg-contacts-identity .img_wrap, html body[class*="product-product"] #tab-contacts .fg-contacts-identity .img_wrap{
width:72px !important;
height:72px !important;
max-width:72px !important;
position:static !important;
top:auto !important;
right:auto !important;
margin:0 !important;
float:none !important;
grid-column:auto !important;
grid-row:auto !important;
flex:0 0 72px;
}
html body[class*="product-product"] #contacts .pro_page_description .img_wrap .img, html body[class*="product-product"] #tab-contacts .pro_page_description .img_wrap .img,
html body[class*="product-product"] #contacts .img_wrap .img, html body[class*="product-product"] #tab-contacts .img_wrap .img,
html body[class*="product-product"] #contacts .pro_page .img_wrap .img, html body[class*="product-product"] #tab-contacts .pro_page .img_wrap .img{
width:72px !important;
height:72px !important;
margin:0 !important;
margin-top:0 !important;
padding:3px !important;
border:1px solid #0066B2 !important;
border-radius:50% !important;
position:static !important;
top:auto !important;
box-sizing:border-box;
background:#fff;
}
html body[class*="product-product"] #contacts .img_wrap .img img, html body[class*="product-product"] #tab-contacts .img_wrap .img img,
html body[class*="product-product"] #contacts .pro_page_description .img_wrap .img img, html body[class*="product-product"] #tab-contacts .pro_page_description .img_wrap .img img{
width:100% !important;
height:100% !important;
max-width:100% !important;
max-height:100% !important;
object-fit:cover;
border-radius:50%;
border:0 !important;
}
html body[class*="product-product"] #contacts .right_column_contacts, html body[class*="product-product"] #tab-contacts .right_column_contacts{
display:grid !important;
grid-template-columns:minmax(280px,1fr) minmax(320px,1fr);
gap:16px 48px;
align-items:start;
align-content:start;
border-left:0;
padding-left:0;
padding-bottom:0;
margin-bottom:0 !important;
position:static !important;
width:100% !important;
max-width:none !important;
}
html body[class*="product-product"] #contacts .right_column_contacts > *, html body[class*="product-product"] #tab-contacts .right_column_contacts > *{
min-width:0;
}
html body[class*="product-product"] #contacts .fg-contacts-list, html body[class*="product-product"] #tab-contacts .fg-contacts-list{
grid-column:1;
grid-row:1;
}
html body[class*="product-product"] #contacts #listing-contact-map, html body[class*="product-product"] #tab-contacts #listing-contact-map{
grid-column:2 !important;
grid-row:1 !important;
width:100% !important;
height:420px !important;
max-height:420px !important;
min-height:0;
margin-bottom:0 !important;
border-radius:14px;
overflow:hidden;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
}
html body[class*="product-product"] #contacts.pro_tabpanel,
html body[class*="product-product"] #tab-contacts.pro_tabpanel,
html body[class*="product-product"] #contacts .pro_page_description.pro_page_contacts,
html body[class*="product-product"] #tab-contacts .pro_page_description.pro_page_contacts{
padding-bottom:48px !important;
margin-bottom:0 !important;
}
/* ── Services captions: dense 1–2 lines (Figma 745:55584) ── */
#services .pro_page_gallery .items, #tab-services .pro_page_gallery .items,
#services .items, #tab-services .items{
gap:28px 24px;
}
#services .items .item .service-title, #tab-services .items .item .service-title,
#services .pro_page_gallery .items .item .service-title, #tab-services .pro_page_gallery .items .item .service-title{
font-size:14px;
line-height:1.3;
max-height:2.6em;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
text-align:center;
color:#0066B2;
font-weight:400;
margin:12px 0 0;
}
#services .items .item .description, #tab-services .items .item .description,
#services .pro_page_gallery .items .item .description, #tab-services .pro_page_gallery .items .item .description{
display:none;
}
/* ── Reviews chrome + form ── */
#reviews .module-title, #tab-reviews .module-title,
#reviews #review > h2, #tab-reviews #review > h2,
#reviews .pro_tabpanel .module-title.text-center, #tab-reviews .pro_tabpanel .module-title.text-center{
text-align:left;
text-transform:none;
font-size:22px;
font-weight:500;
color:#2E437B;
}
#reviews #form-review, #tab-reviews #form-review,
#reviews form.form-horizontal, #tab-reviews form.form-horizontal{
max-width:640px;
margin-left:auto;
margin-right:auto;
}
#reviews #form-review .review_items .form-group:not(:first-child), #tab-reviews #form-review .review_items .form-group:not(:first-child),
#reviews form.form-horizontal .review_items .form-group:not(:first-child), #tab-reviews form.form-horizontal .review_items .form-group:not(:first-child){
display:none !important;
}
#reviews #form-review .review_items, #tab-reviews #form-review .review_items,
#reviews form.form-horizontal .review_items, #tab-reviews form.form-horizontal .review_items{
display:flex;
justify-content:center;
height:auto;
margin:0 0 18px;
}
#reviews #form-review .review_items .form-group:first-child, #tab-reviews #form-review .review_items .form-group:first-child{
flex-direction:column;
align-items:center;
gap:8px;
}
#reviews #form-review .review_items .form-group:first-child .star-cb-group-label, #tab-reviews #form-review .review_items .form-group:first-child .star-cb-group-label{
display:none;
}
#reviews #form-review input[type="text"], #tab-reviews #form-review input[type="text"],
#reviews #form-review input[type="tel"], #tab-reviews #form-review input[type="tel"],
#reviews #form-review textarea, #tab-reviews #form-review textarea,
#reviews #form-review .form-control, #tab-reviews #form-review .form-control{
width:100%;
max-width:100%;
box-sizing:border-box;
}
#reviews #form-review .pro_review_submit, #tab-reviews #form-review .pro_review_submit,
#reviews #form-review button.button_circle, #tab-reviews #form-review button.button_circle,
#reviews #form-review #button-review, #tab-reviews #form-review #button-review{
display:block;
margin:18px auto 0;
background:#0B4A8F !important;
color:#fff !important;
border:0;
border-radius:6px !important;
padding:10px 28px;
min-height:40px;
font-size:14px;
}
/* Footer CTA shell (markup may be absent — CSS-ready) */
.pro_page .pro_tab_footer_cta,
.pro_page .pro_tabpanels + .pro_tab_footer_cta{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:16px;
padding:28px 0 40px;
max-width:1180px;
margin:0 auto;
box-sizing:border-box;
}
.pro_page .pro_tab_footer_cta .pro_whatsapp_cta{
display:inline-flex;
align-items:center;
justify-content:center;
background:#0066B2;
color:#fff !important;
font-weight:500;
border-radius:6px;
padding:8px 22px;
min-height:40px;
text-decoration:none;
white-space:nowrap;
}
.pro_page .pro_tab_footer_cta .pro_social_icons{
display:flex;
align-items:center;
gap:10px;
}
/* Similar masters 3-col when markup present */
.pro_page .similar .row,
.pro_page .product-related .row,
.pro_page .related-products .row{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
max-width:1180px;
margin:40px auto;
}
.pro_page .similar .row > [class*="col-"],
.pro_page .product-related .row > [class*="col-"]{
width:auto;
float:none;
max-width:none;
padding:0;
}
}
/* Contacts single-col under tablet; do not break mobile ≤480 */
@media (max-width:1024px){
#contacts .module-title, #tab-contacts .module-title{ display:none !important; }
#contacts .fg-contacts-identity, #tab-contacts .fg-contacts-identity{
display:flex;
align-items:center;
gap:12px;
margin:0 0 14px;
}
#contacts .fg-contacts-name, #tab-contacts .fg-contacts-name{
font-size:18px;
font-weight:500;
color:#0B2F7A;
}
#contacts .fg-contacts-spec, #tab-contacts .fg-contacts-spec{
font-size:13px;
color:#5B6D9C;
}
#contacts .job_listing-directions, #tab-contacts .job_listing-directions,
#contacts .offer_contacts_discount, #tab-contacts .offer_contacts_discount,
#contacts .additional_filters, #tab-contacts .additional_filters{ display:none !important; }
#contacts .right_column_contacts, #tab-contacts .right_column_contacts{
display:flex;
flex-direction:column;
}
#contacts #listing-contact-map, #tab-contacts #listing-contact-map{
order:-1;
width:100% !important;
height:260px !important;
margin-bottom:14px;
}
#contacts .img_wrap .img, #tab-contacts .img_wrap .img,
#contacts .pro_page_description .img_wrap .img, #tab-contacts .pro_page_description .img_wrap .img{
width:72px !important;
height:72px !important;
margin-top:0 !important;
}
}
/* QR из поля «Ваш QR код»: в макете первого экрана его нет (.pro_extra_row .qr
остаётся скрытым). Во вкладке Контакты — сразу под списком, без подписи. */
html body[class*="product-product"] #contacts .fg-contacts-qr,
html body[class*="product-product"] #tab-contacts .fg-contacts-qr{
margin:12px 0 0;
padding:0;
width:200px;
max-width:100%;
line-height:0;
}
html body[class*="product-product"] #contacts .fg-contacts-qr a,
html body[class*="product-product"] #tab-contacts .fg-contacts-qr a{
display:block;
line-height:0;
border:0;
padding:0;
margin:0;
overflow:hidden;
}
html body[class*="product-product"] #contacts .fg-contacts-qr img,
html body[class*="product-product"] #tab-contacts .fg-contacts-qr img{
display:block;
width:200px !important;
height:auto !important;
max-width:200px !important;
max-height:none !important;
object-fit:contain !important;
object-position:center center;
background:#fff;
border:0 !important;
border-radius:0;
padding:0 !important;
margin:0;
box-shadow:none;
/* Uploaded PNGs carry a 1px gray fringe on the module edge.
Quiet zone is ~19px; a slight zoom hides the fringe only. */
transform:scale(1.04);
transform-origin:center center;
}
/* Lightbox of the QR («деталка»): page overlay is near-black; keep it white. */
html body[class*="product-product"] .mfp-bg{
background:#fff !important;
opacity:1 !important;
}
html body[class*="product-product"] .mfp-figure:after{
box-shadow:none !important;
background:#fff !important;
}
/* Services/gallery thumbs: squares, full frame (no circle + cover crop). */
html body[class*="product-product"] #services .pro_page_gallery .items .item > a.magnificPopup,
html body[class*="product-product"] #tab-services .pro_page_gallery .items .item > a.magnificPopup,
html body[class*="product-product"] #photo_gallery .items .item > a.magnificPopup{
display:flex !important;
align-items:center;
justify-content:center;
border-radius:16px !important;
background:#eef3f9 !important;
border:1px solid #d5e4f4 !important;
padding:6px !important;
overflow:hidden !important;
box-sizing:border-box;
}
html body[class*="product-product"] #services .pro_page_gallery .items .item > a.magnificPopup img,
html body[class*="product-product"] #tab-services .pro_page_gallery .items .item > a.magnificPopup img,
html body[class*="product-product"] #photo_gallery .items .item > a.magnificPopup img{
object-fit:contain !important;
object-position:center !important;
border-radius:12px !important;
border:0 !important;
transform:none !important;
background:#eef3f9;
}
/*
* Cascade note: gw18-card.css is linked AFTER gw13-pro2.css. Product-page
* hero overrides above use `html body[class*="product-product"]` + !important
* so they win over gw18's compact 280/CTA-before-bio layout without editing
* gw18 (out of ownership for this task).
*/