/* ==========================================================================
   SALON DESIGN SYSTEM (v5.6.5 Porcelain Edition Final)
   Global Styles + PIM Modules + Tooltips + Mobile Adapters + Landing Pages
   + Gallery
   Architecture: Atomic UI (Cobalt & Gold Concept)
   WPAUTOP OFF style + back-to-top
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS (Переменные и База)
   ========================================================================== */
:root {
    /* Основная палитра (Императорский фарфор) */
    --c-gold:             #C5A059;
    --c-gold-hover:       #b08d4b;
    --c-gold-light:       rgba(197, 160, 89, 0.2);
    --c-gold-light-more:  rgba(197, 160, 89, 0.08);
    
    --c-cobalt:           #1D3557; 
    --c-cream:            #FBF9F6; 
    --c-white:            #ffffff;
    
    --c-text:             #2B2D42; 
    --c-text-muted:       #8D99AE; 
    
    --c-red:              #E63946; 
    --c-border:           rgba(29, 53, 87, 0.1); 
    --c-bg-light:         #fafafa;

    /* Сетка и отступы */
    --container-w:        1200px;
    --radius-md:          16px;
    --radius-xl:          24px;
    --radius-pill:        99px;
    
    /* Сложные объемные тени */
    --shadow-card:        0 12px 40px rgba(29, 53, 87, 0.06), 0 2px 10px rgba(29, 53, 87, 0.04);
    --shadow-badge:       0 6px 16px rgba(29, 53, 87, 0.15);
	
	 /* Токены картинных рам (Паспарту) */
    --frame-padding: 2px;
    --frame-radius-outer: 12px;
    /* CSS сам посчитает внутренний радиус:  */
    --frame-radius-inner: calc(var(--frame-radius-outer) - var(--frame-padding));
	
	/* Минимальная ширина капсулы расписания (в шапке) */
	--ss-bubble-min-w: 160px;
	
	/* Шапка */
    --header-py-desktop: 10px;
    --header-py-mobile: 5px;
	 /* Точная настройка высоты информера (Отрицательные значения тянут вверх) */
    --informer-offset-y: -20px;
	
	/* Дебаг меню - толщина красной обводки */
	--debug-line: 0px;
	
	/* Недолет при скролле прайса */
	--scroll-offset: 80px;
	
	/*  множитель толщины линии логотипа*/
	--logo-lw-m: 20;
	
	/* Наш глобальный фирменный маркер */
    --brand-symbol: '●'; 
}

/* Глобальная страховка от вылета элементов за пределы экрана */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
	scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    -webkit-font-smoothing: antialiased;
    color: var(--c-text);
}

/* ==========================================================================
   2. LANDING PAGE UTILITIES & GRID (Утилиты и сетка)
   ========================================================================== */
.align-center { text-align: center !important; }
.text-gold { color: var(--c-gold) !important; }
.text-cobalt { color: var(--c-cobalt) !important; }
.text-muted { color: var(--c-text-muted) !important; }
.bg-cream { background-color: var(--c-cream) !important; }
.margin-bottom-15 { margin-bottom: 15px !important; }
.margin-bottom-20 { margin-bottom: 20px !important; }
.margin-bottom-25 { margin-bottom: 25px !important; }
.margin-bottom-30 { margin-bottom: 30px !important; }
.justify-center { justify-content: center !important; }

/* Контейнеры секций */
.lp-container { width: 100%; max-width: var(--container-w); margin: 0 auto; padding: 20px 20px; box-sizing: border-box; }
.lp-section { padding: 20px 20px; box-sizing: border-box; }
.lp-section.narrow { padding: 20px 20px; max-width: 900px; margin: 0 auto; }

/* Сетка Gutenberg */
.wp-block-columns { display: flex; gap: 40px; align-items: stretch; margin: 0; }
.wp-block-column { flex: 1; min-width: 0; }
.fp-col-50 { flex-basis: 50% !important; }

/* Заголовки и тексты */
.lp-title-xl { font-size: 3.2rem; font-weight: 800; line-height: 1.15; color: var(--c-cobalt); letter-spacing: -1px; }
.lp-title-lg { font-size: 2.4rem; font-weight: 800; color: var(--c-cobalt); margin-bottom: 40px; letter-spacing: -0.5px; }
.lp-title-md { font-size: 1.8rem; font-weight: 800; color: var(--c-cobalt); line-height: 1.3; }
.lp-text-lead { font-size: 1.25rem; line-height: 1.6; color: var(--c-text); max-width: 800px; margin: 0 auto 30px auto; }
.lp-text { font-size: 1.05rem; line-height: 1.7; color: var(--c-text); margin-bottom: 15px; }

/* Золотые списки с галочками */
.list-gold-check { list-style: none !important; padding: 0 !important; margin: 0 !important; text-align: left; }
.list-gold-check li { position: relative; padding-left: 35px; margin-bottom: 12px; font-size: 1.05rem; line-height: 1.6; }




/* ==========================================================================
   ОРНАМЕНТ-РАЗДЕЛИТЕЛЬ (Porcelain Divider)
   ========================================================================== */
hr.porcelain-divider {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(to right, transparent, var(--c-gold), transparent) !important;
    margin: 40px auto !important;
    position: relative !important;
    overflow: visible !important;
    width: 60% !important; /* Не на всю ширину, так элегантнее */
    max-width: 400px !important;
}

hr.porcelain-divider::after {
    content: var(--brand-symbol); /* Классический типографический ромб ◆ заменен на точку ●  перенесено в переменную в Root */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--c-gold);
    font-size: 14px;
    background: var(--c-white); /* Цвет фона страницы */
    padding: 0 15px; /* Зазор между линией и ромбом */
}

/* Вариант разделителя для кремовых блоков (Дом Быта, Карточки) */
.bg-cream hr.porcelain-divider::after {
    background: var(--c-cream);
}

/* 1. Левосторонний разделитель под заголовком */
hr.porcelain-divider.align-left {
   /* margin: 25px 0 25px 0 !important; /* Прибиваем к левому краю */
  /*  width: 100% !important;
    /*max-width: 250px !important; /* Делаем линию аккуратной, не на всю ширину экрана */
}

/* ==========================================================================
   3. HEADER & BRAND LOGO (Шапка и Идеальный бренд-блок)
   ========================================================================== */
	/* ==========================================================================
   ФИКС: УБИВАЕМ ПАРАЗИТНЫЕ ЛИНИИ ОТ WP (Twenty Twenty-Five)
   ========================================================================== */
/* 1. Глушим любые рамки на самой шапке и её внутренних группах */
.site-header,
.site-header .wp-block-group,
.header-container,
.header-nav,
.header-nav .wp-block-navigation__container {
    border-top: none !important;
    border-bottom: none !important;
    outline: none !important;
}

/* 2. Запрещаем внутренним контейнерам шапки иметь свой фон (иначе тени наслаиваются) */
.site-header .wp-block-group {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 3. Вычищаем верхнюю границу у первого блока контента (на случай, если тема вешает линию на main) */
main.site-main,
.wp-site-blocks > .wp-block-group:first-of-type,
.lp-container {
    border-top: none !important;
}
	
	.site-header {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
    border: none !important; /* Жестко убиваем все бордеры WP */
    
    /* МАГИЯ ТЕНЕЙ: 
       1-я: Жесткая золотая линия (0 размытия, смещение вниз на 1px)
       2-я: Мягкая парящая тень от кобальта */
    box-shadow: 0 1px 0 0 var(--c-gold-light), 
                0 8px 25px rgba(29, 53, 87, 0.05) !important; 
    
    padding: var(--header-py-desktop) 0 !important; 
    /* position: relative !important; */
	position: sticky !important; 
	top: 0 !important;
    z-index: 100 !important;
}

/* Страховка: убиваем рамку у верхнего блока контента на странице */
main.site-main {
    border-top: none !important;
}

.header-container { max-width: var(--container-w); padding: 0 20px; }

/* Умная капсула в шапке (Разрешаем перенос, но держим форму пилюли) */
.header-actions .badge-bubble {
    white-space: normal !important;  /* Снова разрешаем тексту переноситься */
    min-width: var(--ss-bubble-min-w) !important;     /* ЖЕЛЕЗОБЕТОННАЯ ЗАЩИТА от сплющивания в шар */
    text-align: center !important;   /* Центрируем перенесенный текст */
    justify-content: center !important;
    flex-shrink: 1 !important;       /* Позволяем ей слегка сжиматься, если меню давит */
    padding: 6px 16px !important;    /* Чуть убавляем боковые отступы для экономии места */
	transform: translateY(var(--informer-offset-y)) !important;
}

/* ИДЕАЛЬНЫЙ БРЕНД-БЛОК (Логотип + Слоган) */
.header-brand {
    display: flex !important; flex-direction: column !important; justify-content: center !important;
    gap: 4px !important; position: relative !important; z-index: 10 !important;
}

/* ==========================================================================
   HEADER: Идеальный бренд-блок (Логотип + Текст)
   ========================================================================== */

/* 1. Главный контейнер ссылки */
.porcelain-logo {
    display: inline-flex !important; 
    align-items: center !important; 
    gap: 12px !important; 
    text-decoration: none !important; 
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
	
	 /* FIX: Запрещаем родителю растягивать коробку, прижимаем влево */
    align-self: flex-start !important; 
	
	/* УБИВАЕМ ВНЕШНЮЮ ДИКТАТУРУ ШИРИНЫ */
    width: max-content !important; 
    max-width: max-content !important; 
    flex: 0 0 auto !important; /* Запрещаем расти (grow), сжиматься (shrink) и игнорируем базовую ширину */
}
.porcelain-logo:hover { 
    transform: translateY(-2px) !important; 
}

/* 2. Контейнер иконки (Именно здесь мы задаем размер!) */
.porcelain-logo__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
   /* height: 44px !important; /* Базовая высота на десктопе */
	height: 60px !important;
    width: auto !important;
    flex-shrink: 0 !important;
}

/* 3. Сама картинка или SVG (Тянется под размер контейнера) */
.porcelain-logo__icon svg, 
.porcelain-logo__img {
    display: block !important;
    height: 100% !important; 
    width: auto !important; 
    max-width: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 6px rgba(29, 53, 87, 0.08)) !important;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.porcelain-logo:hover .porcelain-logo__icon svg,
.porcelain-logo:hover .porcelain-logo__img { 
    transform: scale(1.05) !important; 
}

/* 4. Текстовая часть логотипа */
.porcelain-logo__text {
    font-size: 1.7rem !important; 
    font-weight: 800 !important; 
    color: var(--c-cobalt) !important; 
    letter-spacing: -0.5px !important; 
    line-height: 1 !important; 
    margin: 0 !important;
    transition: all 0.4s ease !important;
   	width: fit-content !important; 
    white-space: nowrap !important; /* Гарантирует плотную коробку на десктопе */
}
.porcelain-logo:hover .porcelain-logo__text {
    color: var(--c-gold) !important; 
    text-shadow: 0 2px 10px rgba(197, 160, 89, 0.2) !important; 
}

/* Слоган под логотипом */
.header-slogan {
    margin: 0 !important; padding-left: 56px !important; font-size: 0.65rem !important; 
    text-transform: uppercase !important; letter-spacing: 2px !important; 
    color: var(--c-gold) !important; font-weight: 700 !important; opacity: 0.9 !important;
}

/* ==========================================================================
   МЕНЮ ШАПКИ: Чистая типографика + Ромб слева + Градиентная линия
   ромб - замена на --brand-symbol
   ========================================================================== */

/* 1. Контейнер меню (Гарантия одной строки) */
.header-nav .wp-block-navigation__container,
.header-nav ul {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important; /* Чуть увеличил воздух между пунктами */
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Сама ссылка (Пункт меню) */
.header-nav .wp-block-navigation-item__content {
    color: var(--c-cobalt) !important; 
    font-weight: 500 !important; 
    font-size: 0.95rem !important;
    padding: 8px 0 !important; /* Убрал боковые паддинги, так как у нас есть gap в контейнере */
    
    display: inline-flex !important; 
    align-items: center !important; 
    gap: 8px !important; /* Отступ между ромбом и текстом */
    
    position: relative !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

/* 3. Маркер (точка) слева */
.header-nav .wp-block-navigation-item__content::before {
    content: var(--brand-symbol) !important; /* Меняем ромб на аккуратный круг (Black Circle) */
    display: inline-block !important; 
    color: var(--c-gold) !important; 
    
    /* Делаем его чуть меньше, чтобы он не выглядел тяжело */
    font-size: 0.6rem !important; 
    
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* 4. Подчеркивание-градиент (на ::after) */
.header-nav .wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    bottom: 2px; /* Приподняли, чтобы линия элегантно касалась букв */
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--c-gold), transparent);
    transform: scaleX(0);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* 5. Эффекты при наведении (Hovers) */
.header-nav .wp-block-navigation-item__content:hover { 
    color: var(--c-cobalt) !important; 
}

.header-nav .wp-block-navigation-item__content:hover::before {
    color: var(--c-cobalt) !important; 
    transform: scale(1.25) !important; /* ~~Ромбик~~ Символ из переменной --brand-symbol эффектно пульсирует */
}

.header-nav .wp-block-navigation-item__content:hover::after {
    transform: scaleX(1);
    opacity: 1;
}
/* ==========================================================================
   4. PORCELAIN CTA & BACK-TO-TOP
   ========================================================================== */
.salon-cta-wrapper { display: inline-flex; flex-direction: column; align-items: center; margin: 20px 0; width: 100%; }

a.service-book-btn, .service-book-btn a.wp-block-button__link {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 18px 36px; background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-hover) 100%); 
    color: var(--c-white) !important; border-radius: var(--radius-pill);
    font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    text-decoration: none !important; border: none;
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.3), inset 0 1px 1px rgba(255,255,255,0.3); 
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); cursor: pointer;
}
a.service-book-btn:hover, .service-book-btn a.wp-block-button__link:hover { 
    transform: translateY(-3px); box-shadow: 0 8px 25px rgba(197, 160, 89, 0.4), inset 0 1px 1px rgba(255,255,255,0.4); filter: brightness(1.05); 
}

.salon-cta-text { margin-top: 12px; font-size: 0.85rem; font-weight: 500; color: var(--c-text-muted); display: flex; align-items: center; gap: 6px; }
.salon-cta-text svg, .svg-icon svg { color: var(--c-gold); stroke-width: 2.2; width: 16px; height: 16px; fill: none; stroke: currentColor; }

/* Тултипы */
.service-book-btn.has-tooltip { position: relative; overflow: visible !important; }
.service-book-btn.has-tooltip::after {
    content: attr(data-tooltip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%) translateY(10px);
    background-color: var(--c-cobalt); color: var(--c-white); padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 500;
    white-space: nowrap; text-transform: none; letter-spacing: 0; opacity: 0; visibility: hidden; pointer-events: none; z-index: 100;
    box-shadow: 0 8px 20px rgba(29, 53, 87, 0.2); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.service-book-btn.has-tooltip::before {
    content: ''; position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%) translateY(10px);
    border: 6px solid transparent; border-top-color: var(--c-cobalt); 
    opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 100;
}
.service-book-btn.has-tooltip:hover::after, .service-book-btn.has-tooltip:hover::before { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Компактные кнопки */
a.compact-cta-btn, .compact-cta-btn a.wp-block-button__link {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; padding: 0 !important;      
    border-radius: 50% !important; box-shadow: 0 4px 12px rgba(29, 53, 87, 0.1), inset 0 2px 2px rgba(255,255,255,0.3) !important;
    color: var(--c-white) !important; text-decoration: none !important; transition: all 0.3s ease !important; cursor: pointer !important;
}
a.compact-cta-btn:hover, .compact-cta-btn a.wp-block-button__link:hover { 
    transform: translateY(-3px) !important; box-shadow: 0 6px 16px rgba(29, 53, 87, 0.15), inset 0 2px 2px rgba(255,255,255,0.4) !important; filter: brightness(1.05) !important; 
}
.compact-cta-btn a.wp-block-button__link .dashicons, a.compact-cta-btn .dashicons { 
    font-size: 24px !important; width: 24px !important; height: 24px !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important;
}
.compact-cta-btn.phone a.wp-block-button__link, a.compact-cta-btn.phone { background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-hover) 100%) !important; }
.compact-cta-btn.telegram a.wp-block-button__link, a.compact-cta-btn.telegram { background: linear-gradient(135deg, #38BDF8 0%, #2AABEE 100%) !important; }
.compact-cta-btn.whatsapp a.wp-block-button__link, a.compact-cta-btn.whatsapp { background: linear-gradient(135deg, #4ADE80 0%, #25D366 100%) !important; }

/* Focus */
a.service-book-btn:focus-visible, .service-book-btn a.wp-block-button__link:focus-visible,
a.compact-cta-btn:focus-visible, .compact-cta-btn a.wp-block-button__link:focus-visible { outline: none !important; box-shadow: 0 0 0 4px var(--c-cream), 0 0 0 6px var(--c-gold) !important; }

/* ==========================================================================
   STICKY CTA (Липкая кнопка внизу экрана) - Тоже глазурь!
   ========================================================================== */
.sticky-cta-btn {
    position: fixed; /* Оставляем только fixed! */
    width: 60px; height: 60px; 
    color: var(--c-white) !important; border-radius: 50%;
    
    background: 
        linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 100%),
        linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-hover) 100%) !important;
        
    box-shadow: 
        0 8px 25px rgba(197, 160, 89, 0.4), 
        inset 0 2px 3px rgba(255,255,255,0.7), 
        inset 0 -2px 4px rgba(0,0,0,0.15) !important;
        
    z-index: 999; display: flex; align-items: center; justify-content: center; text-decoration: none !important; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    overflow: hidden; /* Скроет края пробегающего блика ::after */
}

/* Модификаторы позиции и скрытия */
/* .sticky-cta-btn.position-right { bottom: 25px; right: 25px; }
.sticky-cta-btn.position-left { bottom: 25px; left: 25px; } */
.sticky-cta-btn.is-hidden { opacity: 0; pointer-events: none; transform: scale(0.8); }

/* Эффект парения */
.sticky-cta-btn:hover { 
    transform: translateY(-4px) scale(1.05); 
    box-shadow: 
        0 12px 30px rgba(197, 160, 89, 0.5),
        inset 0 2px 3px rgba(255,255,255,0.8), 
        inset 0 -2px 4px rgba(0,0,0,0.15) !important;
}

/* Иконка внутри липкой кнопки (Поднимаем над бликом) */
.sticky-cta-btn .svg-icon,
.sticky-cta-btn .dashicons {
    position: relative; 
    z-index: 2; /* Обязательно, чтобы иконка была ВЫШЕ блика */
    display: flex; align-items: center; justify-content: center;
}

.sticky-cta-btn .svg-icon svg { 
    width: 28px; height: 28px; stroke-width: 2.2; color: #fff !important; 
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15));
}

/* ==========================================================================
   АНИМАЦИЯ: Пробегающий блик для всех кнопок (Компактные + Липкая)
   ========================================================================== */
a.compact-cta-btn::after, 
.compact-cta-btn a.wp-block-button__link::after,
.sticky-cta-btn::after {
    content: ''; 
    position: absolute; 
    top: 0; 
    left: -100%; 
    width: 50%; 
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); 
    z-index: 1;
    
    /* КРИТИЧЕСКИ ВАЖНО: чтобы блик не перебивал hover */
    pointer-events: none; 
    
    /* При убирании мышки блик возвращается без анимации */
    transition: left 0s; 
}

a.compact-cta-btn:hover::after, 
.compact-cta-btn a.wp-block-button__link:hover::after,
.sticky-cta-btn:hover::after {
    left: 200%; 
    transition: left 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Back to Top */
.porcelain-back-to-top {
    position: fixed !important; bottom: 25px !important; left: 25px !important; width: 48px !important; height: 48px !important;
    background: var(--c-white) !important; color: var(--c-cobalt) !important; border: 1px solid var(--c-border) !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(29, 53, 87, 0.08) !important; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; z-index: 998 !important;
}
.porcelain-back-to-top:hover { transform: translateY(-4px) !important; color: var(--c-gold) !important; border-color: var(--c-gold-light) !important; box-shadow: 0 6px 20px rgba(197, 160, 89, 0.15) !important; }
.porcelain-back-to-top svg { width: 24px !important; height: 24px !important; }

/* ==========================================================================
   GLOSSY BUTTON (Эффект фарфоровой глазури для главной кнопки)
   ========================================================================== */
a.service-book-btn, .service-book-btn a.wp-block-button__link {
    /* Добавляем глянцевый блик через множественный фон */
    background: 
        linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 100%),
        linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-hover) 100%) !important;
    
    /* Делаем тень более сложной и дорогой */
    box-shadow: 
        0 8px 25px rgba(197, 160, 89, 0.35), 
        inset 0 2px 3px rgba(255,255,255,0.6), /* Верхний жесткий блик */
        inset 0 -2px 3px rgba(0,0,0,0.1) !important; /* Нижнее затемнение объема */
        
    border-radius: var(--radius-pill);
    position: relative;
    overflow: hidden; /* Чтобы блик-анимация не вылезала за края */
}

/* Анимация "пробегающего блика" при наведении */
a.service-book-btn::after, .service-book-btn a.wp-block-button__link::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: none;
    z-index: 1;
}

a.service-book-btn:hover::after, .service-book-btn a.wp-block-button__link:hover::after {
    left: 200%;
    transition: left 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Чтобы текст кнопки оставался поверх блика */
a.service-book-btn span, .service-book-btn a.wp-block-button__link span {
    position: relative;
    z-index: 2;
}

/* ФОНЫ (Слой глазури + Фирменный цвет) 
   Используем background-image, чтобы не конфликтовать с inline background-color */

/* ТЕЛЕФОН (Поддержка шорткода .phone и FSE-блока .brand-phone) */
.compact-cta-btn.phone a.wp-block-button__link, a.compact-cta-btn.phone,
.compact-cta-btn.brand-phone a.wp-block-button__link, a.compact-cta-btn.brand-phone { 
    background-image: 
        linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 40%),
        linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-hover) 100%) !important; 
}

/* ТЕЛЕГРАМ */
.compact-cta-btn.telegram a.wp-block-button__link, a.compact-cta-btn.telegram,
.compact-cta-btn.brand-telegram a.wp-block-button__link, a.compact-cta-btn.brand-telegram { 
    background-image: 
        linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 40%),
        linear-gradient(135deg, #38BDF8 0%, #2AABEE 100%) !important; 
}

/* WHATSAPP */
.compact-cta-btn.whatsapp a.wp-block-button__link, a.compact-cta-btn.whatsapp,
.compact-cta-btn.brand-whatsapp a.wp-block-button__link, a.compact-cta-btn.brand-whatsapp { 
    background-image: 
        linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 40%),
        linear-gradient(135deg, #4ADE80 0%, #25D366 100%) !important; 
}

/* ==========================================================================
   5. PIM MODULE: FEATURED SERVICES (Сетка карточек)
   ========================================================================== */
.pim-featured-container { margin: 40px 0; border-radius: var(--radius-xl); padding: 10px 10px; box-shadow: 0 0 0 1px rgba(197,160,89,0.1), inset 0 10px 40px rgba(255,255,255,0.5); }
.pim-featured-container .lp-grid-3 { display: flex; flex-wrap: wrap; gap: 40px; }
@media (min-width: 901px) {
    .pim-featured-container .lp-grid-3 { justify-content: center; }
    .pim-featured-container .lp-col { flex: 0 1 330px !important; min-width: 320px; }
}

.pim-featured-card { 
    background: var(--c-white); border-radius: var(--radius-md); overflow: hidden; 
    box-shadow: var(--shadow-card); display: flex; flex-direction: column; margin-bottom: 20px; 
    transition: all 0.4s ease; border: 1px solid rgba(29,53,87,0.03); 
}
.pim-featured-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(29,53,87,0.1); }

.pim-card-link-wrap { display: block; text-decoration: none; overflow: hidden; }
.pim-card-img-wrap { width: 100% !important; aspect-ratio: 4 / 3 !important; overflow: hidden !important; background: var(--c-bg-light) !important; position: relative !important; }
.pim-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.pim-featured-card:hover .pim-card-img-wrap img { transform: scale(1.05); }

/* Бейдж на картинке */
.pim-badge-overlay { 
    position: absolute; bottom: 16px; left: 16px; 
    background: linear-gradient(135deg, #ffffff 0%, #F5F3EC 100%); 
    border: 1px solid rgba(29,53,87,0.25); color: var(--c-cobalt); 
    padding: 6px 14px; border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 800; 
    text-transform: uppercase; letter-spacing: 1px; 
    box-shadow: 0 4px 10px rgba(29,53,87,0.1), inset 0 1.5px 2px rgba(255,255,255,1); z-index: 5; cursor: help; 
}

/* Тело карточки */
.pim-featured-card-body { 
    padding: 20px 20px 24px 20px !important; 
    flex-grow: 1 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; 
}


.pim-featured-card-title { font-size: 1.1rem !important; margin: 0 0 8px 0 !important; font-weight: 700 !important; line-height: 1.35 !important; }
.pim-title-link { text-decoration: none; color: var(--c-cobalt); transition: 0.2s; }
.pim-title-link:hover { color: var(--c-gold); }
.pim-featured-card-price { color: var(--c-text-muted) !important; font-size: 1.25rem !important; font-weight: 500 !important; margin: 0 !important; margin-top: auto !important; }

/* ==========================================================================
   6. PIM MODULE: MENU & PRICE LIST
   ========================================================================== */
.salon-price-container { width: 100%; max-width: 1000px; margin: 0 auto; }
.salon-price-nav { margin-bottom: 50px; position: relative; }
.salon-price-nav ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; justify-content: center; }
.salon-price-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 24px; background: var(--c-white); color: var(--c-cobalt); border: 1px solid var(--c-border); border-radius: var(--radius-pill); font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(29, 53, 87, 0.03); }
.salon-price-nav a:not(.special-link):hover { background: var(--c-cream); border-color: var(--c-gold-light); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(29, 53, 87, 0.06); }

/* Добавляем точку в меню прайса через CSS */
.salon-price-nav a:not(.special-link)::before {
    content: var(--brand-symbol);
    color: var(--c-gold);
    margin-right: 8px;
    font-size: 0.65rem; /* Делаем точку изящной */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-symbol { margin-right: 8px; font-size: 14px; color: var(--c-gold); transition: color 0.3s; }
a.special-link { background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-hover) 100%); border-color: transparent; color: var(--c-white); font-weight: 700; box-shadow: 0 6px 20px rgba(197, 160, 89, 0.3); }
a.special-link .nav-symbol { color: var(--c-white); }
a.special-link:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(197, 160, 89, 0.4); filter: brightness(1.05); }

.price-section-title { margin-top: 60px; margin-bottom: 30px; border-bottom: 2px solid var(--c-cream); padding-bottom: 15px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 15px; }
.title-text { font-size: 2rem; font-weight: 800; color: var(--c-cobalt); letter-spacing: -0.5px; }
.price-section-desc { font-size: 0.95rem; font-weight: 400; color: var(--c-text-muted); font-style: italic; }
/* 6.1. Строка услуги (Добавляем воздух и благородный ховер) */
.price-row { 
    display: flex; 
    align-items: baseline; 
    margin-bottom: 8px; 
    padding: 8px 12px 8px 32px !important; 
    margin-left: -12px; 
	margin-right: -12px; /* Компенсируем паддинг, чтобы текст не съехал */
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); 
}
.price-row:hover { 
    transform: translateX(4px); 
    background-color: var(--c-bg-light); /* Очень деликатная подсветка строки */
}

/* 6.2. Левая часть и название */
.price-left { 
    padding-right: 15px; 
    font-weight: 500; 
    display: flex; 
    align-items: flex-start; /* Выравниваем ромб по первой строке текста */
    flex-wrap: nowrap !important; /* ЖЕСТКО запрещаем ромбу отрываться от текста */
    color: var(--c-cobalt); 
    font-size: 1.1rem; 
	position: relative; 
}
.price-link-item { 
    text-decoration: none; 
    border-bottom: 1px dashed var(--c-gold-light); 
    color: var(--c-cobalt); 
    transition: all .2s ease; 
}
.price-link-item:hover { 
    color: var(--c-gold); 
    border-bottom-style: solid; 
    border-bottom-color: var(--c-gold); 
}
.price-dots { flex-grow: 1; border-bottom: 1px dotted rgba(29, 53, 87, 0.2); margin: 0 12px; position: relative; top: -5px; 
	opacity: 0.8; /* Делаем линию легкой, чтобы не рябило в глазах */}
.price-right { padding-left: 0px; text-align: right; white-space: nowrap;  display: flex; align-items: baseline; }

.price-actual { font-weight: 800; font-size: 1.25rem; color: var(--c-cobalt); letter-spacing: -0.5px;}
.currency { font-size: 0.85em; font-weight: 700; color: var(--c-gold); margin-left: 3px;}
.price-old { text-decoration: line-through; color: var(--c-text-muted); font-size: 0.95rem; margin-right: 12px; font-weight: 400; opacity: 0.8 }
.price-meta { font-size: 0.85rem; color: var(--c-text-muted); margin-left: 10px; font-weight: 400;
	font-style: italic; /* Отделяем время от цены стилистически */
    /* opacity: 0.8; */
}

.price-item-text { cursor: default; }
.price-link-item { text-decoration: none; border-bottom: 1px dashed var(--c-gold-light); color: var(--c-cobalt); transition: all .2s ease; }
.price-link-item:hover { color: var(--c-gold); border-bottom-style: solid; border-bottom-color: var(--c-gold); }
/* 6.3. МАГИЯ ИКОНКИ: Меняем звезду ★ на фирменный Ромб ◆  затем на точку ●*/
.badge-icon { 
    font-size: 0 !important; /* Скрываем дефолтную звездочку, выводимую плагином */
    margin-right: 0px; 
    display: inline-block;
	/* Выносим иконку влево, в подготовленный желоб */
    position: absolute;
    left: -24px; 
    top: 2px; /* Корректировка по высоте (чтобы стояла ровно по центру первой строки) */
}
/* Новый премиальный символ (Четырехконечная искра) */
.badge-icon::before {
    content: '♥'; /* Заменили ромб на искру */
    font-size: 1.25rem;
    color: var(--c-gold);
    text-shadow: 0 0 12px rgba(197, 160, 89, 0.4); 
    line-height: 1;
	 display: inline-block; 
}

.badge-bubble {
    background: linear-gradient(135deg, #ffffff 0%, #F5F3EC 100%) !important; border: 1px solid var(--c-gold) !important; color: var(--c-gold) !important;
    box-shadow: 0 4px 10px rgba(197, 160, 89, 0.1), inset 0 1px 1px rgba(255, 255, 255, 1) !important;
    border-radius: var(--radius-pill); padding: 4px 10px; font-size: 0.65rem; font-weight: 800;
    margin-left: 10px; display: inline-block; cursor: help; text-transform: uppercase; letter-spacing: 0.5px;
    transform: translateY(-2px); transition: all 0.2s ease;
}
.badge-bubble:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(197, 160, 89, 0.2), inset 0 1px 1px rgba(255, 255, 255, 1) !important; }

/* ==========================================================================
   МИКРОИНТЕРАКЦИЯ: Сердцебиение
   ========================================================================== */

/* Прописываем кардиограмму (двойной удар) */
@keyframes heartbeat {
    0%   { transform: scale(1); }
    15%  { transform: scale(1.35); } /* Первый сильный удар */
    30%  { transform: scale(1); }
    45%  { transform: scale(1.15); } /* Второй легкий удар */
    60%  { transform: scale(1); }
    100% { transform: scale(1); }
}

/* При наведении на всю строку прайса — запускаем мотор! */
.price-row:hover .badge-icon::before {
    /* Запускаем анимацию: длится 1.2 секунды, повторяется бесконечно, пока держим мышку */
    animation: heartbeat 1.2s infinite;
    
    /* Чуть усиливаем "золотое свечение" в момент ховера */
    text-shadow: 0 0 15px rgba(197, 160, 89, 0.8);
    color: var(--c-gold-hover); 
}

/* ==========================================================================
   7. PIM MODULE: SINGLE SERVICE LANDING & FEATURED PROMO
   ========================================================================== */
/* Навигация и кнопка "Назад" */
/* ==========================================================================
   REFACTOR: Навигация Лендинга (Капсула / Segmented Control)
   ========================================================================== */

/* Очищаем старую строку */
.service-nav-row {
    display: flex; 
    justify-content: center; /* Центрируем капсулу */
    align-items: center; 
    margin-bottom: 35px; 
    border-bottom: none !important; /* Убиваем длинную серую линию */
    padding-bottom: 0 !important; 
    gap: 15px; /* Зазор для админской кнопки редактирования */
}

/* Сама капсула */
.service-nav-pill {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #F5F3EC 100%);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 12px rgba(29, 53, 87, 0.04), inset 0 1px 1px rgba(255, 255, 255, 1);
    padding: 4px 6px; /* Внутренний отступ от краев таблетки */
}

/* Общие стили кнопок внутри капсулы */
.service-nav-pill a, 
.service-nav-pill span.disabled {
    text-decoration: none !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    transition: all 0.3s ease;
    border: none !important; /* Сбрасываем старые пунктиры */
}

/* Боковые стрелки */
.service-nav-pill .nav-arrow {
    color: var(--c-text-muted) !important;
    margin: 0 !important; /* Сброс старых марджинов */
}
.service-nav-pill .nav-arrow:not(.disabled):hover {
    color: var(--c-cobalt) !important;
    background: rgba(29, 53, 87, 0.05); /* Легкое затемнение кнопки */
}
.service-nav-pill .nav-arrow.disabled {
    opacity: 0.3;
    cursor: default;
}

/* Центральная кнопка Прайса */
.service-nav-pill .salon-back-btn {
    color: var(--c-gold) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
.service-nav-pill .salon-back-btn:hover {
    background: rgba(197, 160, 89, 0.08); /* Легкое золотое свечение фона */
    transform: none !important; /* Запрещаем ей прыгать */
}

/* Разделители (палочки) внутри капсулы */
.service-nav-pill .nav-sep {
    width: 1px;
    height: 16px;
    background: var(--c-border);
    margin: 0 2px;
    padding: 0;
    color: transparent; /* Скрываем текстовый символ "|" если он остался в HTML */
}

/* Шахматный промо-блок и Лендинг */
.lp-grid-2 { display: flex; gap: 50px; align-items: flex-start; margin-bottom: 60px; }
.lp-col { flex: 1; min-width: 0; } /* <--- ВОТ ЭТА СТРОКА ВЕРНЕТ КАРТИНКУ В 50% */
.lp-col.full-width { flex: 0 0 100%; max-width: 100%; }

.pim-single-block { align-items: center !important; margin: 60px 0 !important; }
.pim-single-block--reverse { flex-direction: row-reverse !important; }
.pim-single-info { display: flex !important; flex-direction: column !important; justify-content: center !important; }

.pim-single-img-wrap { display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; border-radius: var(--radius-xl) !important; overflow: hidden !important; box-shadow: var(--shadow-card) !important; position: relative !important; }
.pim-single-img-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1) !important; }
.pim-single-block:hover .pim-single-img-wrap img { transform: scale(1.05) !important; }

.pim-single-img-wrap:hover img { 
    transform: scale(1.05) !important; 
}

.pim-single-excerpt { font-size: 1.15rem !important; line-height: 1.6 !important; color: var(--c-cobalt) !important; font-style: italic !important; border-left: 3px solid var(--c-gold-light) !important; padding-left: 18px !important; margin-bottom: 25px !important; }
.pim-single-price-tag { font-size: 1.8rem !important; font-weight: 800 !important; color: var(--c-cobalt) !important; margin-bottom: 20px !important; display: flex !important; align-items: baseline !important; gap: 8px !important; }
.pim-single-duration { color: var(--c-text-muted) !important; font-size: 1rem !important; font-weight: 500 !important; }
.pim-single-content-snippet { font-size: 1.05rem !important; line-height: 1.7 !important; color: var(--c-text) !important; margin-bottom: 30px !important; }
.pim-single-actions { display: flex !important; align-items: center !important; gap: 20px !important; flex-wrap: wrap !important; }

.pim-single-cta { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 1.05rem !important; font-weight: 700 !important; color: var(--c-cobalt) !important; text-decoration: none !important; border-bottom: 2px solid var(--c-gold-light) !important; padding-bottom: 4px !important; transition: all 0.3s ease !important; }
.pim-single-cta:hover { color: var(--c-gold) !important; border-bottom-color: var(--c-gold) !important; gap: 12px !important; }
.pim-edit-link { color: var(--c-text-muted) !important; text-decoration: none !important; opacity: 0.4 !important; transition: 0.3s !important; }
.pim-edit-link:hover { opacity: 1 !important; color: var(--c-gold) !important; }

/* Фарфоровая карточка цены (для Лендинга) */
.service-price-block { 
    background: linear-gradient(135deg, #ffffff 0%, #F5F3EC 100%);
    border: 1px solid rgba(29, 53, 87, 0.05); border-radius: var(--radius-xl); padding: 40px 30px; text-align: center; margin-bottom: 30px; 
    box-shadow: 0 10px 30px rgba(29, 53, 87, 0.05), inset 0 2px 5px rgba(255,255,255,1);
}
.service-old-price { text-decoration: line-through; color: var(--c-text-muted); font-size: 1.2rem; margin-bottom: 5px; font-weight: 400; }
.service-current-price { font-size: 3rem; font-weight: 800; color: var(--c-cobalt); line-height: 1; letter-spacing: -1px; }
.service-current-price small { font-size: 1.5rem; color: var(--c-gold); font-weight: 700; }
.lp-text-sm { font-size: 1rem; font-weight: 500; color: var(--c-text-muted); margin-top: 15px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.lp-text-sm svg { color: var(--c-gold); }

/* Журнальный лонгрид */
.service-content-body { border-top: none; padding-top: 20px; max-width: 800px; margin: 0 auto; font-size: 1.1rem; line-height: 1.8; color: var(--c-text); }
.service-content-body h2, .service-content-body h3 { color: var(--c-cobalt); font-weight: 800; margin-top: 30px; margin-bottom: 15px; }

/* Глобальная обертка страницы отдельной услуги (Отступы от Шапки и Подвала) */
.salon-service-card {
    margin-top: 40px !important;
    margin-bottom: 80px !important;
}

/* Сброс лишних элементов темы на странице услуги */
body.single-price_item .page-header, body.single-price_item .page-header-bg,
body.single-price_item .post-media, body.single-price_item .post-thumbnail,
body.single-price_item .entry-meta, body.single-price_item .post-navigation { display: none !important; }
body.single-price_item { background: #fff !important; }

/* ==========================================================================
   ЛЕНДИНГ УСЛУГИ: Журнальный глянец (Editorial Upgrade) - рефактор!
   ========================================================================== */

/* 1. ЗОЛОТЫЕ ГАЛОЧКИ ДЛЯ ВСЕХ СПИСКОВ В ЛОНГРИДЕ */
.service-content-body ul { 
    list-style: none !important; 
    padding: 0 !important; 
    margin: 25px 0 !important; 
}
.service-content-body ul li { 
    position: relative !important; 
    padding-left: 35px !important; 
    margin-bottom: 15px !important; 
    font-size: 1.05rem !important; 
    line-height: 1.6 !important; 
    color: var(--c-text) !important;
}
.service-content-body ul li::before {
    content: "✓" !important; 
    position: absolute !important; 
    left: 0 !important; 
    top: 2px !important; 
    width: 24px !important; 
    height: 24px !important; 
    background: var(--c-gold) !important; 
    color: var(--c-white) !important; 
    border-radius: 50% !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    font-size: 12px !important; 
    font-weight: bold !important;
    box-shadow: 0 2px 6px rgba(197, 160, 89, 0.3) !important; /* Тень галочке */
}


/* ==========================================================================
   ЗОЛОТЫЕ ГАЛОЧКИ СПИСКОВ (3D & Glossy Effect)
   ========================================================================== */
.list-gold-check li::before,
.service-content-body ul li::before {
    content: "✓" !important; 
    position: absolute !important; 
    left: 0 !important; 
    top: 2px !important; 
    width: 24px !important; 
    height: 24px !important; 
    border-radius: 50% !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    font-size: 12px !important; 
    font-weight: 800 !important;
    color: var(--c-white) !important;
    
    /* === 3D ГЛАЗУРЬ === */
    background: 
        linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 100%),
        linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-hover) 100%) !important;
        
    /* Парящая тень вниз + Жесткий блик сверху + Мягкое затемнение снизу */
    box-shadow: 
        0 4px 10px rgba(197, 160, 89, 0.35),
        inset 0 2px 2px rgba(255, 255, 255, 0.8),
        inset 0 -2px 3px rgba(0, 0, 0, 0.15) !important;
        
    /* Чуть выдавливаем саму галочку, чтобы она не сливалась с бликом */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* 2. АННОТАЦИЯ (Журнальная врезка) */
/* 
.pim-single-excerpt { 
    font-size: 1.15rem !important; 
    line-height: 1.6 !important; 
    color: var(--c-cobalt) !important; 
    font-style: italic !important; 
    
    border-left: 3px solid var(--c-gold) !important; 
 /*   background: linear-gradient(to right, rgba(197, 160, 89, 0.05) 0%, transparent 100%) !important;
    padding: 15px 0 15px 20px !important; 
    margin-bottom: 30px !important; 
    border-radius: 0 8px 8px 0 !important;
} */
/* 2. АННОТАЦИЯ (Чистый Лид-абзац) */
/* .pim-single-excerpt { 
    font-size: 1.15rem !important; 
    line-height: 1.6 !important; 
    color: var(--c-text) !important; 
    font-style: normal !important; 
    margin-bottom: 30px !important; 
} */

/* 2. АННОТАЦИЯ (Чистый Лид-абзац) */
.pim-single-excerpt { 
    font-size: 1.15rem !important; 
    line-height: 1.6 !important; 
    color: var(--c-text) !important; 
    font-style: normal !important; 
    margin-bottom: 30px !important; 
}

/* 3. КАРТОЧКА ЦЕНЫ (Делаем её "осязаемой") */
.service-price-block { 
    background: linear-gradient(135deg, #ffffff 0%, #F5F3EC 100%) !important;
    /* Усиливаем рамку и добавляем внутренний блик */
    border: 1px solid var(--c-gold-light) !important; 
    border-radius: var(--radius-xl) !important; 
    padding: 40px 30px !important; 
    text-align: center !important; 
    margin-bottom: 30px !important; 
    box-shadow: 0 15px 35px rgba(29, 53, 87, 0.05), inset 0 0 0 1px rgba(255,255,255,1) !important;
    position: relative !important;
}

/* 4. БУКВИЦА ДЛЯ ЛОНГРИДА (Vogue Style) */
.service-content-body > p:first-of-type::first-letter {
    font-size: 3.8rem !important;
    font-weight: 800 !important;
    color: var(--c-cobalt) !important;
    float: left !important;
    line-height: 0.8 !important;
    padding-right: 12px !important;
    padding-top: 4px !important;
    text-shadow: 2px 2px 0px rgba(197, 160, 89, 0.15) !important; /* Едва уловимая золотая тень */
}

/* ==========================================================================
   8. SMART SCHEDULE (Умное расписание)
   ========================================================================== */
.schedule-wrapper { background-color: var(--c-cream); padding: 40px; border-radius: var(--radius-xl); margin: 20px 0; box-shadow: 0 10px 30px rgba(29, 53, 87, 0.05); border: 1px solid rgba(29, 53, 87, 0.03); }
.schedule-wrapper .price-row { display: flex; align-items: baseline; margin-bottom: 16px; position: relative; transition: transform 0.2s; }
.schedule-wrapper .price-row:hover { transform: translateX(4px); }
.schedule-wrapper .price-left { padding-right: 10px; position: relative; background: inherit; z-index: 2; font-weight: 500; color: var(--c-cobalt); }
.day-name { font-weight: 800; margin-right: 8px; font-size: 1.05rem; }
.date-label { color: var(--c-text-muted); font-size: 0.85em; font-weight: 400; }
.schedule-wrapper .price-dots { flex-grow: 1; border-bottom: 1px dotted rgba(29,53,87,0.2); margin: 0 5px; position: relative; top: -5px; }
.schedule-wrapper .price-right { padding-left: 10px; text-align: right; white-space: nowrap; background: inherit; z-index: 2; }
.status-closed { color: var(--c-red); font-weight: 700; background: rgba(230,57,70,0.1); padding: 4px 10px; border-radius: 6px; font-size: 0.9rem; }
.status-short { color: var(--c-gold); font-weight: 800; border-bottom: 1px dashed var(--c-gold-light); cursor: help; }
.schedule-time { font-weight: 700; color: var(--c-cobalt); }

/* Информер (Кнопка-бабл расписания) */
a.badge-bubble[href="#schedule-week"] {
    background: linear-gradient(135deg, #ffffff 0%, #F5F3EC 100%) !important;
    border: 1px solid rgba(29, 53, 87, 0.15) !important; 
    color: var(--c-cobalt) !important;
    border-radius: var(--radius-pill) !important;
    padding: 8px 24px !important; 
    line-height: 1.4 !important; font-size: 0.9rem !important; font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(29, 53, 87, 0.05), inset 0 1px 1px rgba(255, 255, 255, 1), inset 0 -1px 2px rgba(197, 160, 89, 0.05) !important;
    text-transform: none; display: inline-flex; align-items: center; gap: 8px;
}
a.badge-bubble[href="#schedule-week"]:hover {
    background: #ffffff !important; border-color: rgba(29, 53, 87, 0.3) !important;
    transform: translateY(calc(var(--informer-offset-y) - 2px)) !important; box-shadow: 0 6px 16px rgba(29, 53, 87, 0.1), inset 0 1px 1px rgba(255, 255, 255, 1) !important;
}
.status-open-text { color: var(--c-gold) !important; font-weight: 800; display: flex; align-items: center; gap: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.status-closed-text { color: var(--c-red) !important; font-weight: 800; display: flex; align-items: center; gap: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ==========================================================================
   9. FRONT PAGE EXTRAS (Герой, Отзывы, Extra Grid)
   ========================================================================== */

	
/* Фотография Hero: Обертка-паспарту */
.fp-hero-glow .wp-block-image {
    background: var(--c-white) !important;
    padding: var(--frame-padding) !important;
    border-radius: var(--frame-radius-outer) !important;
    border: 1px solid rgba(29, 53, 87, 0.2) !important; 
    
    box-shadow: 0 12px 40px rgba(29, 53, 87, 0.08), 0 4px 15px rgba(29, 53, 87, 0.04) !important; 
    box-sizing: border-box !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    
    /* Ограничители ширины (на случай если картинка меньше контейнера) */
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Сама картинка внутри */
.fp-hero-glow .wp-block-image img {
    border-radius: var(--frame-radius-inner) !important; /* Внутренний радиус */
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important; /* Убиваем инлайн-тень, если она была в HTML */
}

/* Оживляем раму при наведении */
.fp-hero-glow .wp-block-image:hover {
    transform: translateY(-4px) !important;
    border-color: var(--c-cobalt) !important; 
    box-shadow: 0 15px 50px rgba(29, 53, 87, 0.12), 0 6px 20px rgba(29, 53, 87, 0.06) !important;
}

.fp-hero-glow .fp-tagline { 
    margin-top: 20px !important; 
}

.fp-tagline { 
    font-size: 0.8rem; 
    font-weight: 800; 
    letter-spacing: 2.5px; 
    text-transform: uppercase; 
    color: var(--c-gold); 
}

/* Блок отзывов на Главной */
.fp-columns-footer { 
    border-top: none !important; /* Убили серую линию */
    padding-top: 60px !important; 
    padding-bottom: 80px !important; 
}
/* ==========================================================================
   ДОМ БЫТА (Бронебойная сетка)
   ========================================================================== */
.fp-extra-grid { 
    display: flex !important; 
    flex-wrap: wrap !important; 
    justify-content: center !important; 
    align-items: stretch !important; /* Заставляет все плитки в ряду быть одной высоты! */
    gap: 20px !important; 
    width: 100% !important; /* Фикс мобильного прилипания */
    max-width: 960px !important; 
    margin: 35px auto 0 auto !important; 
}

/* Жестко убиваем системные отступы WP (Sibling margins) */
.fp-extra-grid > .wp-block-group,
.fp-extra-item {
    margin-top: 0 !important; 
    margin-bottom: 0 !important;
    display: inline-flex !important; 
    align-items: center !important; 
    justify-content: flex-start !important; 
    gap: 15px !important; 
    background: var(--c-white) !important; 
    padding: 18px 24px !important; 
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(29,53,87,0.05) !important; 
    box-shadow: 0 4px 15px rgba(29,53,87,0.03) !important; 
    flex: 1 1 280px !important; 
    max-width: 300px !important; 
    box-sizing: border-box !important; 
    transition: all 0.3s ease !important;
}

.fp-extra-item:hover { 
    transform: translateY(-4px) !important; 
    background: linear-gradient(135deg, #ffffff 0%, #F5F3EC 100%) !important; 
    border-color: var(--c-gold-light) !important; 
    box-shadow: 0 8px 20px rgba(29,53,87,0.08) !important; 
}

.fp-extra-icon { 
    font-size: 1.4rem !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; 
    width: 44px !important; height: 44px !important; background: var(--c-bg-light) !important; border-radius: 50% !important; flex-shrink: 0 !important; color: var(--c-cobalt) !important; transition: 0.3s !important; 
    margin: 0 !important; /* Убиваем wpautop */
}
.fp-extra-item:hover .fp-extra-icon { background: var(--c-white) !important; color: var(--c-gold) !important; box-shadow: 0 2px 8px rgba(197,160,89,0.2) !important; }
.fp-extra-text { font-weight: 700 !important; color: var(--c-cobalt) !important; font-size: 1rem !important; margin: 0 !important; }

/* КАПСУЛА ЛОКАЦИИ (Hero Address Pill) */
.fp-address-wrapper { display: flex; justify-content: center; }
.fp-address-pill {
    display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px; border-radius: var(--radius-pill);
    background: var(--c-white); border: 1px solid var(--c-border); box-shadow: 0 6px 16px rgba(29, 53, 87, 0.04);
    text-decoration: none !important; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.fp-address-pill:hover { border-color: var(--c-gold); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(197, 160, 89, 0.15); }
.fp-address-icon { display: flex; color: var(--c-gold); }
.fp-address-icon svg { width: 20px; height: 20px; }

.fp-address-text { display: block !important; line-height: 1.4 !important; }
.fp-address-text > strong, .fp-address-main { color: var(--c-cobalt) !important; font-weight: 700 !important; font-size: 1rem !important; }
.fp-address-sep { color: var(--c-text-muted) !important; opacity: 0.5 !important; margin: 0 6px !important; }
.fp-address-note { display: inline !important; color: var(--c-cobalt) !important; opacity: 0.8 !important; font-size: 0.95rem !important; font-weight: 500 !important; white-space: normal !important; }
.fp-address-note strong { color: inherit; }
.fp-address-note a { text-decoration: underline; color: inherit; }

/* БЛОК ОТЗЫВОВ (Интеграция "ПУТЬ А" из PV) */
.yandex-reviews-container {
    width: 100%; max-width: 560px; height: 500px; position: relative; overflow: hidden; background: var(--c-white) !important; 
    border: 1px solid var(--c-border) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-card) !important;
    margin: 0 auto; -webkit-mask-image: -webkit-radial-gradient(white, black); 
}
.yandex-iframe { width: 100% !important; height: 100% !important; border: none !important; }
.yandex-seo-link {
    box-sizing: border-box; position: absolute; bottom: 8px; left: 0; width: 100%; padding: 0 16px; font-family: inherit; font-size: 0.7rem !important; 
    text-align: center; text-decoration: none !important; color: var(--c-text-muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
    display: block; max-height: 14px; transition: color 0.3s ease !important; z-index: 10;
}
.yandex-seo-link:hover { color: var(--c-cobalt) !important; }

/* QR-КОД */
.lp-col-accent-box {
    display: flex; flex-direction: column; justify-content: center; background: linear-gradient(135deg, #ffffff 0%, #F5F3EC 100%);
    padding: 50px 40px; border-radius: var(--radius-xl); border: 1px solid rgba(197, 160, 89, 0.2); text-align: center; box-shadow: 0 10px 30px rgba(29, 53, 87, 0.05);
}
.fp-rating-stars { font-size: 1.8rem; margin: 0 0 15px 0; letter-spacing: 2px; }
.qr-code-binding-wrapper {
    width: 150px !important; height: 150px !important; background: var(--c-white) !important; margin: 0 auto 20px auto !important; 
    border: 1px solid var(--c-gold-light) !important; display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: var(--radius-md) !important; box-shadow: 0 4px 12px rgba(29, 53, 87, 0.04) !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.qr-code-binding-wrapper:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 25px rgba(29, 53, 87, 0.08) !important; }
.qr-code-binding-wrapper img { width: 130px !important; height: auto !important; display: block !important; }
.fp-qr-caption { font-size: 0.9rem; color: var(--c-text-muted); line-height: 1.5; margin-top: 15px; margin-bottom: 0; }

/* ==========================================================================
   10. GLOBAL FOOTER (Стили подвала)
   ========================================================================== */
/* Глобальный подвал: Убираем жесткую линию, добавляем мягкую восходящую тень */
.footer-schedule { 
    border-top: none !important; 
    box-shadow: 0 -4px 30px rgba(29, 53, 87, 0.04) !important; /* Отрицательный Y = тень падает вверх */
    position: relative !important; 
    z-index: 10 !important; /* Чтобы тень красиво ложилась на блоки выше */
}
.footer-schedule h3, .footer-schedule h4, .footer-schedule strong { color: var(--c-cobalt) !important; }
/* Копирайт и реквизиты (Делаем мелкой, аккуратной сноской) */
.footer-copyright { 
    border-top: none !important; /* Убиваем последнюю серую линию в футере */
    padding-top: 15px !important; 
    font-size: 0.7rem !important; /* Делаем кегль значительно меньше (было 0.85rem) */
    opacity: 0.6 !important; /* Приглушаем блок, чтобы он не спорил с расписанием */
    letter-spacing: 0.5px !important;
}


/* Возвращаем премиальную типографику футеру */
.footer-schedule h3 { font-size: 1.6rem !important; font-weight: 800 !important; margin-bottom: 15px !important; letter-spacing: -0.5px !important; }
.footer-schedule h4 { font-size: 1.2rem !important; font-weight: 700 !important; margin-bottom: 15px !important; }
.footer-schedule p { line-height: 1.6 !important; }

/* Очистка стилей таблицы расписания специально для подвала */
.footer-schedule .schedule-wrapper { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; }

/* ==========================================================================
   11. СТРАНИЦА КОНТАКТОВ
   ========================================================================== */
.contact-map-wrapper {
    box-shadow: var(--shadow-card) !important;
    height: 100% !important;
    min-height: 500px !important;
    overflow: hidden !important;
}

.contact-map-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 500px !important; /* Гарантия высоты на мобильных */
    display: block !important;
}

/* ==========================================================================
   ЕДИНАЯ КАРТОЧКА МАРШРУТА (Чистый каскад как образец борьбы с !important)                            
   ========================================================================== */

/* 1. Карточка (Правая колонка) */
main.site-main .wp-block-columns .wp-block-column.contact-map-card {
    background: linear-gradient(135deg, #ffffff 0%, #F5F3EC 100%);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    padding: 0; /* Сбрасываем возможные системные паддинги колонки */
	 min-height: 450px !important;
}

/* 2. Карта внутри карточки */
main.site-main .contact-map-card .contact-map-wrapper {
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    height: 450px;
    width: 100%;
	line-height: 0;
    display: flex;
}

/* 3. Зона с кнопкой */
main.site-main .contact-map-card .wp-block-buttons {
    padding: 30px 20px;
    margin: 0;
    justify-content: center;
}

/* 4. Кнопка маршрута */
main.site-main .route-btn a.wp-block-button__link {
    margin-top: 0;
}

/* ==========================================================================
   КНОПКИ ГЕОЛОКАЦИИ И АГРЕГАТОРОВ (GIS Buttons)
   ========================================================================== */
main.site-main .route-btn a.wp-block-button__link,
main.site-main .aggregator-btn a.wp-block-button__link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important; /* Оптимально для ряда из нескольких кнопок */
    margin: 0 !important;
    background: var(--c-cobalt) !important;
    color: var(--c-white) !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    border: 2px solid var(--c-cobalt) !important;
    box-shadow: 0 4px 15px rgba(29, 53, 87, 0.15) !important;
    transition: all 0.3s ease !important;
}

/* Эффект наведения (Инверсия в белую карточку) */
main.site-main .route-btn a.wp-block-button__link:hover,
main.site-main .aggregator-btn a.wp-block-button__link:hover {
    background: var(--c-white) !important;
    color: var(--c-cobalt) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(29, 53, 87, 0.1) !important;
}

/* ==========================================================================
   12 ГАЛЕРЕЯ И ФОТОГРАФИИ (Перехват нативного блока wp:gallery)
   ========================================================================== */

/* ==========================================================================
   ГАЛЕРЕЯ И ФОТОГРАФИИ (Возврат к стилистике PIM / Карты) - Информер расписания
   ========================================================================== */

/* Контейнер галереи (Переводим на умный Flexbox для центровки последней строки) */
.wp-block-gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Магия центровки "сирот" в последнем ряду! */
    gap: 30px !important;
    margin-bottom: 60px !important;
}

/* ================ Эффекты галереи =============== */

/* Отдельная картинка (Строгий кобальтовый профиль + Белое Паспарту) */
/* Отдельная картинка (Делаем эффект картины в раме) */
.wp-block-gallery .wp-block-image {
    /* Математика 3-х колонок: 100% / 3 минус отступы gap */
    flex: 0 0 calc(33.333% - 20px) !important;
    max-width: calc(33.333% - 20px) !important; 
    
    margin: 0 !important;   
    position: relative !important;
    overflow: hidden !important;
    
    /* Геометрия рамки */
    border-radius: var(--frame-radius-outer) !important; 
    background: var(--c-white) !important; /* То самое белое паспарту */
    padding: var(--frame-padding) !important;               /* Толщина паспарту из параметра в :root */
    
    /* Спокойное состояние: полупрозрачный кобальт */
    border: 1px solid rgba(29, 53, 87, 0.2) !important;
    
    box-shadow: var(--shadow-card) !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Эффект при наведении (Решительный Кобальт) */
.wp-block-gallery .wp-block-image:hover {
    transform: translateY(-4px) !important;
    border-color: var(--c-cobalt) !important; /* Яркий, 100% кобальт! */
    box-shadow: 0 15px 40px rgba(29, 53, 87, 0.12) !important;
}

/* Сама картинка внутри паспарту */
.wp-block-gallery .wp-block-image img {
    border-radius: var(--frame-radius-inner) !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.8s ease !important;
}
.wp-block-gallery .wp-block-image:hover img {
    transform: scale(1.03) !important; /* Зум стал чуть мягче, чтобы не биться в рамку */
}

/* Подписи к фото (Caption) - Прижимаем вплотную к краям */
.wp-block-gallery .wp-block-image figcaption {
    background: linear-gradient(to top, rgba(29, 53, 87, 0.9) 0%, rgba(29, 53, 87, 0) 100%) !important;
    color: var(--c-white) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    padding: 40px 15px 15px !important; /* Больше градиента сверху для плавности */
    letter-spacing: 0.5px !important;
    
    /* Прилипает к нижним границам карточки */
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin: 0 !important;
}

/* ==========================================================================
   20+. RESPONSIVE QUERIES (Адаптивность)
   ========================================================================== */

/* --- 900px: Планшеты и Смартфоны (Двухэтажная Grid-шапка) --- */
@media (max-width: 900px) {
    
    /* 1. ГЛАВНЫЙ КОНТЕЙНЕР: Жесткая сетка 2х2 */
    .site-header { 
        padding: var(--header-py-mobile) 0 0 0 !important; 
    }
    
    .header-container { 
        display: grid !important;
        grid-template-columns: 1fr auto !important; 
        row-gap: 10px !important;
        column-gap: 10px !important;
        padding: 0 15px !important;
        align-items: center !important;
    }
    
    /* 2. ЛОГОТИП: Экслибрис (Штамп) */
    .header-brand { 
        grid-column: 1 !important; 
        grid-row: 1 !important; 
        justify-self: start !important;
        gap: 0 !important;
    }
    .header-slogan { display: none !important; } 
    
     .porcelain-logo {
        background: linear-gradient(135deg, #ffffff 0%, #F5F3EC 100%) !important;
        border: 1px solid var(--c-gold-light) !important;
        padding: 8px 12px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 10px rgba(29, 53, 87, 0.05) !important;
        gap: 8px !important;
    }
    
    /* Уменьшаем высоту контейнера картинки */
    .porcelain-logo__icon { 
        height: 42px !important; 
    } 

    .porcelain-logo__text { 
        font-size: 1.15rem !important; 
        white-space: normal !important; /* Разрешаем перенос */
        width: min-content !important; 
        max-width: 140px !important;    
        line-height: 1.1 !important; 
    }

    /* Отключаем ховеры для тачскринов (чтобы не залипало) */
    .porcelain-logo:hover { 
        transform: none !important; 
        box-shadow: 0 4px 10px rgba(29, 53, 87, 0.05) !important; 
    }
    .porcelain-logo:hover .porcelain-logo__text { 
        color: var(--c-cobalt) !important; 
        text-shadow: none !important; 
    }

   /* 3. ИНФОРМЕР РАСПИСАНИЯ: Прибиваем вправо и наверх */
    .header-actions { 
        grid-column: 2 !important; 
        grid-row: 1 !important; 
        justify-self: end !important; 
        
        /* Меняем center на start, чтобы вырвать из центра ячейки */
        align-self: start !important; 
        
        /* Задаем аккуратный отступ от верхнего края шапки (крутите по вкусу) */
        margin-top: 6px !important; 
        
        /* На мобильных обнуляем десктопный сдвиг, чтобы кнопка не улетела в космос */
        transform: none !important; 
    }
    
    /* Жестко гарантируем, что первая часть (часы работы) ВИДНА на планшете */
    .header-actions .badge-bubble > span:first-child { 
        display: inline-block !important; 
    }
	
	
    /* .header-actions .badge-bubble > span:first-child { display: none !important; } */
    
    /* 4. СВАЙП-МЕНЮ (Занимает весь второй этаж) */
    .header-nav {
        grid-column: 1 / -1 !important; 
        grid-row: 2 !important;
        position: relative !important; 
        width: 100% !important; 
        min-width: 0 !important; 
        margin: 0 !important; 
        padding: 5px 0 15px 0 !important;
        border-top: none !important;
        border: var(--debug-line) dashed red !important;
    }

    /* Умный скролл */
    .header-nav .wp-block-navigation__container,
    .header-nav ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important; 
        scrollbar-width: none !important; 
        width: 100% !important; 
        padding: 5px 15px 15px 15px !important; 
        gap: 20px !important;
    }
    
    .header-nav .wp-block-navigation__container::-webkit-scrollbar,
    .header-nav ul::-webkit-scrollbar { display: none !important; }

    .header-nav .wp-block-navigation-item { flex-shrink: 0 !important; overflow: visible !important; clip-path: none !important;}
    .header-nav .wp-block-navigation-item__content { white-space: nowrap !important; overflow: visible !important; clip-path: none !important;}

    /* Распорка для скролла */
    .header-nav ul::after,
    .header-nav .wp-block-navigation__container::after {
        content: '';
        flex: 0 0 20px !important; 
        display: block !important;
    }

    /* Отключаем ховеры для тачскринов */
   /*  a.porcelain-brand-logo-link:hover { transform: none !important; box-shadow: 0 4px 10px rgba(29, 53, 87, 0.05) !important; }
    a.porcelain-brand-logo-link:hover .porcelain-logo-text { color: var(--c-cobalt) !important; text-shadow: none !important; } */
    .header-nav .wp-block-navigation-item__content:hover { transform: none !important; color: var(--c-text) !important; text-shadow: none !important; }
    .header-nav .wp-block-navigation-item__content:hover::after { display: none !important; }
    .header-nav .wp-block-navigation-item__content:hover::before { transform: none !important; color: var(--c-cobalt) !important; }

    /* ========================================================= */
    /* ОСТАЛЬНАЯ АДАПТИВНОСТЬ 900PX                              */
    /* ========================================================= */
    
    .lp-grid-2, .wp-block-columns { flex-direction: column; gap: 30px; }
    .lp-col, .wp-block-column { flex: none; width: 100%; }
    
    .pim-single-block { margin: 40px 0 !important; gap: 30px !important; }
    .pim-single-img-wrap { aspect-ratio: 4 / 3 !important; } 
    
    .pim-featured-container .lp-grid-3 { 
        display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; 
        justify-content: center !important; gap: 20px !important; 
    }
    .pim-featured-container .lp-grid-3 .lp-col { 
        flex: 0 0 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; width: auto !important; 
    }

    .lp-title-xl { font-size: 2.4rem; }
    .lp-title-lg { font-size: 2.2rem; text-align: center; }
/* 
    .service-nav-row { flex-direction: column; gap: 15px; align-items: flex-start; }*/
	.service-nav-row { 
        flex-direction: row; /* Отменяем старое превращение в колонку */
        justify-content: center !important; /* Жестко центрируем */
        align-items: center !important; 
        margin-bottom: 25px !important;
    }

    .nav-right { width: 100%; display: flex; justify-content: space-between; }
    
    .fp-extra-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; }
    .fp-extra-grid .fp-extra-item:last-child { grid-column: span 2 !important; justify-self: center !important; }
    
    .wp-block-gallery { gap: 20px !important; }
    .wp-block-gallery .wp-block-image { flex: 0 0 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
    
    .footer-copyright p { margin-bottom: 8px !important; }
}

@media (max-width: 768px) {
   
    /* Hero-фото: кадрирование */
    .fp-hero-glow .wp-block-image img { height: 350px !important; object-fit: cover !important; object-position: center !important; }
	
    /* Адаптив капсулы адреса */
    .fp-address-pill { padding: 12px 20px !important; }
    .fp-address-sep { display: none !important; } 
    .fp-address-note { display: block !important; margin-top: 4px !important; }

    /* Свайп-меню прайса */
    .salon-price-nav { position: relative; }
    .salon-price-nav::after {
        content: ''; position: absolute; top: 0; right: 0; bottom: 10px; width: 60px;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); pointer-events: none; z-index: 10;
    }
    .salon-price-nav ul {
        flex-wrap: nowrap !important; justify-content: flex-start; overflow-x: auto; 
        -webkit-overflow-scrolling: touch; padding-bottom: 10px; padding-right: 40px; scrollbar-width: none; 
    }
    .salon-price-nav ul::-webkit-scrollbar { display: none; }
    .salon-price-nav a { white-space: nowrap; flex-shrink: 0; }

    /* Перелом прайса */
    .price-section-title { margin-top: 40px; font-size: 1.6rem; flex-direction: column; gap: 5px; }
    .title-text { font-size: 1.8rem; }
     .price-row {
        flex-direction: column !important; 
        margin-bottom: 0 !important; 
        border-bottom: 1px solid var(--c-cream) !important; 
        
        /* Верх 12px | Право 10px | Низ 15px | Лево 32px (желоб для сердечка) */
        padding: 12px 10px 15px 32px !important; 
        
        border-radius: 4px !important;
    }
    .price-row:hover { transform: none; }
    .price-dots { display: none; }
    .price-left { padding-right: 0; margin-bottom: 8px; line-height: 1.4; }
    .price-right { width: 100%; display: flex; align-items: center; justify-content: flex-end; padding-left: 0; margin-top: 4px; }
    .price-right .badge-bubble { margin-top: 4px; margin-left: 0; margin-right: 10px; display: inline-flex; }
}

/* --- 600px: Крупные смартфоны --- */
@media (max-width: 600px) {
    .pim-featured-container .lp-grid-3 .lp-col { 
        flex: 0 0 100% !important; 
        max-width: 100% !important; 
    }
/* Адаптируем информер масшабируя */	
	
    .header-actions .badge-bubble {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }
    
    /* Скрываем "работаем с 10:00 до 21:00", оставляем только "Мы открыты" */
    .header-actions .badge-bubble > span:first-child { 
        display: none !important; 
    }
	
	/* ==========================================================================
   REFACTOR: Мобильная Галерея (Свайп-карусель)
   ========================================================================== */


    /* 1. Превращаем контейнер галереи в горизонтальную ленту */
    .wp-block-gallery {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Плавный скролл на iOS */
        scrollbar-width: none !important; /* Прячем скроллбар в Firefox */
        justify-content: flex-start !important;
        gap: 15px !important; /* Отступ между фото */
        
        /* Магнитная прокрутка (Snap) и отступы от краев экрана */
        scroll-snap-type: x mandatory !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-bottom: 20px !important; /* Место под красивые тени рамки */
    }

    /* Прячем скроллбар в Chrome/Safari */
    .wp-block-gallery::-webkit-scrollbar {
        display: none !important;
    }

    /* 2. Настраиваем ширину самого фото */
    .wp-block-gallery .wp-block-image {
        /* Делаем ширину 85%, чтобы краешек следующего фото торчал справа и подсказывал про свайп */
        flex: 0 0 85% !important; 
        max-width: 85% !important; 
        margin: 0 !important; /* Сбрасываем лишние марджины */
        scroll-snap-align: center !important; /* Картинка прилипает ровно по центру экрана */
    }

	
}

/* --- 480px: Смартфоны --- */
@media (max-width: 480px) {
    .lp-section { padding-top: 10px; padding-bottom: 10px; }
	
	.price-row { 
        padding: 12px 12px 15px 32px !important; 
    }
	
	.service-nav-pill a, 
    .service-nav-pill span.disabled {
        padding: 8px 10px !important; /* Сужаем внутренние отступы кнопок */
        font-size: 0.75rem !important; /* Чуть уменьшаем шрифт, чтобы капсула влезла */
        letter-spacing: 0px !important;
    }
	
	/* Уменьшаем бейдж витрины */
	
	
    .pim-badge-overlay {
        font-size: 0.55rem !important;      /* Уменьшаем кегль (было 0.7rem) */
        padding: 4px 10px !important;       /* Делаем капсулу тоньше (было 6px 14px) */
        bottom: 8px !important;             /* Прижимаем ближе к низу (было 16px) */
        left: 8px !important;               /* Прижимаем ближе к левому краю (было 16px) */
        letter-spacing: 0.5px !important;   /* Чуть уплотняем текст */
    }
	
	 /* Расписание в футере (Шахматное) */
    .schedule-wrapper { 
        padding: 25px 20px; 
    }
	
     .schedule-wrapper .price-row { 
        flex-direction: column !important; 
        margin-bottom: 15px !important; 
        border-bottom: 1px solid rgba(29,53,87,0.05) !important; 
		  /* УБИРАЕМ левый отступ 32px, так как тут нет сердечек! */
        padding: 12px 0 5px 0 !important; 
    }
    
    .schedule-wrapper .price-row:hover { transform: none; }
    .schedule-wrapper .price-dots { display: none !important; }
    .schedule-wrapper .price-right { 
        width: 100% !important; 
        display: flex !important; 
        justify-content: flex-end !important; 
        margin-top: 2px !important; 
        padding-left: 0; 
    }

    
    .fp-tagline { 
    font-size: 0.7rem;
     white-space: nowrap !important; /* Жесткий запрет на перенос */
        /* На всякий случай, если экран уж совсем крошечный, 
           чтобы слоган не порвал сетку, а аккуратно сжался: */
        letter-spacing: 0.5px !important; 
    }
    
    /* ДОМ БЫТА НА СМАРТФОНАХ */
    .fp-extra-grid { 
        display: flex !important; 
        flex-direction: column !important; 
        align-items: center !important; 
    }
    .fp-extra-grid .wp-block-group.fp-extra-item,
    .fp-extra-grid .fp-extra-item,
    .fp-extra-grid .fp-extra-item:last-child { 
        width: 100% !important; 
        max-width: 320px !important; 
        padding: 12px 20px !important;
        
        /* ВОТ ФИКС ВЫСОТЫ: Убиваем flex-basis, возвращаем авто-высоту */
        flex: 0 0 auto !important; 
        height: auto !important;
        min-height: 0 !important;
    }
    /* Чуть уменьшаем иконку, чтобы она не раздувала строку */
    .fp-extra-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.2rem !important;
    }
    
    .sticky-cta-btn { bottom: 20px !important; right: 20px !important; width: 55px; height: 55px; }
    .sticky-cta-btn .svg-icon svg { width: 24px; height: 24px; }

	.porcelain-back-to-top { bottom: 20px !important; left: 20px !important; width: 44px !important; height: 44px !important; }
	
	/* ГАЛЕРЕЯ */
	 /* Галерея: 1 колонка */
    .wp-block-gallery .wp-block-image {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
	/* На мобильных телефонах делаем отступы лендинга позиции компактнее */
	 .salon-service-card {
        margin-top: 20px !important;
        margin-bottom: 40px !important;
    }
	
	/* ========================================================= */
    /* ЭКСТРЕМАЛЬНОЕ СЖАТИЕ ШАПКИ (Для экранов < 480px)          */
    /* ========================================================= */
    
    /* 1. Экономим отступы в сетке */
    .header-container {
        column-gap: 5px !important; /* Сближаем логотип и информер */
        padding: 0 12px !important; /* Приближаем к краям экрана */
    }
	
	/* 2. логотип */
    .porcelain-logo {
        padding: 6px 8px !important;
        gap: 6px !important;
    }
    .porcelain-logo__icon {
        height: 32px !important; /* Еще меньше значок */
    }
    .porcelain-logo__text {
        font-size: 1rem !important; 
        max-width: 110px !important;
    }

    /* 3. Компактный информер со страховкой на перенос */
    .header-actions .badge-bubble {
        padding: 6px 8px !important; 
        font-size: 0.65rem !important; /* Чуть меньше шрифт */
        white-space: normal !important; /* Разрешаем перенос на 2 строки */
        text-align: center !important;
        line-height: 1.2 !important;
    }
}

/* ==========================================================================
   REFACTOR: Основной Прайс-лист (Разделители и Скролл)
   ========================================================================== */

/* 1. Настройка секции (Решение проблемы с перекрытием при клике в меню) */
.price-section {
    scroll-margin-top: var(--scroll-offset); /* При клике на якорь, браузер оставит 100px сверху, заголовок не спрячется под шапку! */
}

/* 2. Чистим заголовок категории */
.price-section-title { 
    margin-top: 10px !important; /* Уменьшаем отступ сверху, так как над ним теперь есть divider */
    margin-bottom: 25px !important; /* Чуть увеличиваем отступ до первой услуги */
    border-bottom: none !important; /* УБИВАЕМ старую 2px сплошную линию */
    padding-bottom: 0 !important; 
    
    display: flex; 
    flex-wrap: wrap; 
    align-items: baseline; 
    gap: 15px; 
}

/* На всякий случай: гасим отступ у разделителя, если он оказался внутри прайса, чтобы не было гигантских дыр */
.salon-price-container hr.porcelain-divider {
    margin: 40px auto 20px auto !important; 
}

/* ==========================================================================
   REFACTOR: Витрина услуг (Featured Services)
   ========================================================================== */

/* Подвал витрины с ссылкой */
.pim-featured-footer {
    margin-top: 40px !important;
    padding-bottom: 10px !important;
}

/* Сама ссылка "Посмотреть все услуги ➔" */
.pim-featured-cta {
    display: inline-block !important; /* Обязательно, чтобы работал transform */
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--c-cobalt) !important;
    text-decoration: none !important;
    border-bottom: 2px solid var(--c-gold-light) !important;
    padding-bottom: 4px !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Микроинтеракция: Ссылка наливается золотом и плавно скользит вправо */
.pim-featured-cta:hover {
    color: var(--c-gold) !important;
    border-bottom-color: var(--c-gold) !important;
    transform: translateX(8px) !important; 
}



/* --- Адаптивность Витрины (Свайп-карусель) --- */
@media (max-width: 900px) {
    /* Запрещаем сетке ломаться на строки и включаем скролл */
    .pim-featured-container .lp-grid-3 { 
        flex-wrap: nowrap !important; 
        overflow-x: auto !important; 
        -webkit-overflow-scrolling: touch !important; 
        scrollbar-width: none !important; /* Прячем скроллбар в Firefox */
        justify-content: flex-start !important; 
        gap: 20px !important;
        padding-bottom: 20px !important; /* Место под тень карточек */
        
        /* Делаем прилипание (Snap) карточек по центру экрана */
        scroll-snap-type: x mandatory !important;
        padding-left: 15px !important; /* Отступ от левого края экрана */
        padding-right: 15px !important;
    }
    
    /* Прячем скроллбар в Chrome/Safari */
    .pim-featured-container .lp-grid-3::-webkit-scrollbar { 
        display: none !important; 
    }

    /* Настраиваем ширину самой карточки */
    .pim-featured-container .lp-grid-3 .lp-col { 
        flex: 0 0 85% !important; /* 85% экрана - чтобы было видно краешек следующей карточки */
        max-width: 320px !important; 
        scroll-snap-align: center !important; /* Карточка магнитится по центру при скролле */
    }
}

/* ==========================================================================
   REFACTOR: Страница Контактов (Иерархия кнопок и Карта)
   ========================================================================== */

/* 1. Второстепенные кнопки агрегаторов (Outline стиль) */
main.site-main .aggregator-btn a.wp-block-button__link {
    background: transparent !important;
    color: var(--c-cobalt) !important;
    border: 2px solid var(--c-border) !important;
    box-shadow: none !important;
}
/* Ховер для агрегаторов (наливаются кобальтом) */
main.site-main .aggregator-btn a.wp-block-button__link:hover {
    background: var(--c-cobalt) !important;
    color: var(--c-white) !important;
    border-color: var(--c-cobalt) !important;
    box-shadow: 0 6px 15px rgba(29, 53, 87, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* 2. Защита от "ловушки для пальца" на мобильных экранах */
@media (max-width: 768px) {
    .contact-map-wrapper,
    main.site-main .contact-map-card,
    main.site-main .contact-map-card .contact-map-wrapper {
        min-height: 350px !important;
        height: auto !important; /* Позволяем карточке сжаться */
    }
    .contact-map-wrapper iframe {
        min-height: 350px !important;
        height: 350px !important;
    }
    
    /* Делаем отступы в карточке маршрута чуть компактнее на смартфонах */
    main.site-main .contact-map-card .wp-block-buttons {
        padding: 20px 15px !important;
    }
}

/* ==========================================================================
   REFACTOR: FIX: Укрощение блика (Блокируем выход ::after за пределы кнопок)
   ========================================================================== */
main.site-main .route-btn a.wp-block-button__link,
main.site-main .aggregator-btn a.wp-block-button__link,
a.service-book-btn, .service-book-btn a.wp-block-button__link,
a.compact-cta-btn, .compact-cta-btn a.wp-block-button__link,
.sticky-cta-btn {
    position: relative !important;
    overflow: hidden !important; /* Обрезает блик строго по форме кнопки */
    z-index: 1; /* Защита от перекрытия других элементов */
}

/* ==========================================================================
   FIX 2.1: Капсула категории (Строчные буквы + Защита от длины + Hover)
   ========================================================================== */
.cat-bubble { 
    display: inline-flex !important; 
    align-items: center !important;
    justify-content: center !important; 
    text-align: center !important; 
    
    font-size: 0.75rem !important; /* Увеличили кегль (было 0.65), т.к. убрали капс */
    line-height: 1.2 !important; 
    letter-spacing: 0.5px !important; /* Уменьшили разрядку */
    
    /* Убрали text-transform: uppercase! */
    
    white-space: normal !important; 
    word-break: break-word !important;
    max-width: 100% !important; 
    
    color: var(--c-gold) !important; 
    background: var(--c-cream) !important; 
    font-weight: 700 !important; 
    
    padding: 6px 14px !important; 
    border-radius: 24px !important; /* Большой радиус, чтобы всегда оставалась "пилюлей" */
    border: 1px solid var(--c-gold-light) !important; 
    margin-bottom: 15px !important; 
    text-decoration: none !important; 
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; 
}

/* Восстанавливаем Hover-эффект */
.cat-bubble:hover { 
    background: var(--c-gold) !important; 
    color: var(--c-white) !important; 
    border-color: var(--c-gold) !important; 
    box-shadow: 0 4px 12px var(--c-gold-light) !important; 
    transform: translateY(-2px) !important; /* Легкое всплытие при наведении */
}

/* 1. Убиваем любых паразитов (иконки, пробелы, маркеры), которые тема могла повесить на ссылку */
.cat-bubble::before,
.cat-bubble::after {
    content: none !important;
    display: none !important;
}

/* 2. Жесткий сброс и центровка */
.cat-bubble { 
    display: inline-flex !important; 
    align-items: center !important;
    justify-content: center !important; 
    text-align: center !important; 
    
    /* Сбрасываем паразитные отступы, которые могут ломать ось */
    margin-top: 0 !important;
    vertical-align: baseline !important;
    
    font-size: 0.75rem !important; 
    line-height: 1.2 !important; 
    letter-spacing: 0.5px !important; 
    
    white-space: normal !important; 
    word-break: break-word !important;
    max-width: 100% !important; 
    
    color: var(--c-gold) !important; 
    background: var(--c-cream) !important; 
    font-weight: 700 !important; 
    
    /* ОПТИЧЕСКАЯ КОМПЕНСАЦИЯ: 
       Если текст падает ВНИЗ, мы делаем нижний отступ больше верхнего, 
       чтобы визуально выдавить текст наверх к центру.
       Верх: 4px | По бокам: 14px | Низ: 8px */
    padding: 0px 14px 12px 14px !important; 
    
    border-radius: 24px !important; 
    border: 1px solid var(--c-gold-light) !important; 
    margin-bottom: 15px !important; 
    text-decoration: none !important; 
	text-transform: uppercase !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; 
}

.cat-bubble:hover { 
    background: var(--c-gold) !important; 
    color: var(--c-white) !important; 
    border-color: var(--c-gold) !important; 
    box-shadow: 0 4px 12px var(--c-gold-light) !important; 
    transform: translateY(-2px) !important; 
}

/* ==========================================================================
   REFACTOR: Подвал (Footer)
   ========================================================================== */

/* 1. Глобальная обертка подвала (Парящий эффект) */
.footer-schedule { 
    border-top: none !important; 
    box-shadow: 0 -10px 40px rgba(29, 53, 87, 0.03) !important; /* Мягкая восходящая тень */
    position: relative !important; 
    z-index: 10 !important;
    padding-top: 60px !important; /* Даем больше воздуха сверху */
    padding-bottom: 40px !important;
}

/* 2. Типографика левой колонки (Контакты) */
.footer-schedule h3 { 
    font-size: 1.6rem !important; 
    font-weight: 800 !important; 
    margin-bottom: 15px !important; 
    letter-spacing: -0.5px !important; 
    color: var(--c-cobalt) !important; 
}
.footer-schedule p { 
    line-height: 1.6 !important; 
}

/* 3. Очистка таблицы расписания специально для подвала (чтобы не было "коробки в коробке") */
.footer-schedule .schedule-wrapper { 
    background: transparent !important; 
    box-shadow: none !important; 
    border: none !important; 
    padding: 0 !important; 
}

/* 4. Нижний блок с мета-информацией (Копирайт, ИНН) */
.footer-copyright { 
    border-top: 1px solid var(--c-border) !important; /* Тонкая деликатная линия */
    padding-top: 20px !important; 
    font-size: 0.75rem !important; 
    opacity: 0.5 !important; /* Сильно приглушаем, чтобы не отвлекало */
    transition: opacity 0.3s ease !important;
}
.footer-copyright:hover {
    opacity: 0.8 !important; /* Проявляется при наведении */
}
.footer-copyright p {
    margin-bottom: 0 !important;
}
.footer-copyright a {
    color: inherit !important;
}

/* --- Адаптивность Подвала на мобильных --- */
@media (max-width: 768px) {
    /* Выстраиваем колонки друг под другом */
    .footer-schedule .wp-block-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important; /* Большой отступ между контактами и расписанием */
    }
    
    /* Центрируем технический текст внизу */
    .footer-copyright {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
    }
}


/* ==========================================================================
   REFACTOR: Porcelain CTA sticky-cta
   ========================================================================== */
/* ==========================================================================
   КООРДИНАТЫ ЛИПКОЙ КНОПКИ (Жесткое переопределение)
   ========================================================================== */
.sticky-cta-btn.bottom-right { 
    bottom: 25px !important;
    right: 25px !important; 
    left: auto !important; 
}

.sticky-cta-btn.bottom-left { 
    bottom: 25px !important;
    left: 25px !important; 
    right: auto !important; 
}

/* Оптимизация расположения для мобильных устройств */
@media (max-width: 480px) {
    .sticky-cta-btn.bottom-right {
        bottom: 20px !important;
        right: 20px !important;
        left: auto !important;
    }
    .sticky-cta-btn.bottom-left {
        bottom: 20px !important;
        left: 20px !important;
        right: auto !important;
    }
}

/* Базовые стили кнопки (по умолчанию встает в правый нижний угол) */
.sticky-cta-btn {
    position: fixed !important;
    bottom: 25px !important;
    right: 25px !important;
    left: auto !important;
    width: 60px; 
    height: 60px; 
    color: var(--c-white) !important; 
    border-radius: 50%;
    background: 
        linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 100%),
        linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-hover) 100%) !important;
    box-shadow: 
        0 8px 25px rgba(197, 160, 89, 0.4), 
        inset 0 2px 3px rgba(255,255,255,0.7), 
        inset 0 -2px 4px rgba(0,0,0,0.15) !important;
    z-index: 999; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-decoration: none !important; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}

/* Модификаторы позиции для поддержки обоих вариантов классов */
.sticky-cta-btn.position-left,
.sticky-cta-btn.bottom-left { 
    right: auto !important; 
    left: 25px !important; 
}

.sticky-cta-btn.position-right,
.sticky-cta-btn.bottom-right { 
    right: 25px !important; 
    left: auto !important; 
}

.sticky-cta-btn.is-hidden { 
    opacity: 0; 
    pointer-events: none; 
    transform: scale(0.8); 
}

/* Мобильная адаптация */
@media (max-width: 480px) {
    .sticky-cta-btn {
        bottom: 20px !important;
        right: 20px !important;
        width: 55px;
        height: 55px;
    }
    .sticky-cta-btn.position-left,
    .sticky-cta-btn.bottom-left {
        bottom: 20px !important;
        left: 20px !important;
        right: auto !important;
    }
}

/* ==========================================================================
   30+. WPAUTOP KILLER (Очистка паразитных параграфов WP)
   ========================================================================== */
/* ЯДЕРНЫЙ СБРОС (WPAUTOP KILLER)
   Убиваем бесклассовые абзацы-паразиты, сгенерированные ядром WP, 
   которые влезают между <div> и ломают Flexbox/Grid сетки. */
.salon-price-container > p:not([class]), .price-section > p:not([class]), .price-row > p:not([class]),
.lp-grid-2 > p:not([class]), .lp-grid-3 > p:not([class]), .service-nav-row > p:not([class]),
.pim-featured-card > p:not([class]), .pim-featured-card-body > p:not([class]),
.pim-single-block > p:not([class]), .pim-single-info > p:not([class]), .pim-single-actions > p:not([class]),
.salon-price-nav > p:not([class]),
.salon-cta-wrapper > p:not([class]), .salon-cta-text > p:not([class]), .sticky-cta-btn > p:not([class]), .compact-cta-btn > p:not([class]),
.pim-image-container > p:not([class]), .pim-audit-row > p:not([class]), .review-layout-top > p:not([class]), .review-info > p:not([class]) {
    display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important;
}

    

/* ==========================================================================
   УМНОЕ СОКРЫТИЕ ДУБЛЕЙ (Smart Hide)
   ========================================================================== */
/* Если мы находимся на странице Контактов, полностью прячем колонку расписания в футере */
body:has(.is-contacts-page) .footer-schedule-column {
    display: none !important;
}


/* ==========================================================================
   ИНТЕГРАЦИЯ SVG ЛОГОТИПА (Ирис + Бабочка 512x512)
   ========================================================================== */

/* 1. Базовые настройки контуров */
.porcelain-logo__icon .salon-logo path {
    fill: none !important; 
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 2. Ирис (Центр) — Делаем фирменным Кобальтом */
.porcelain-logo__icon .salon-logo .iris {
    stroke: var(--c-cobalt) !important;
    stroke-width: calc(var(--logo-lw-m)*4) !important; /* Адекватная плотная линия для центра */
}

/* 3. Бабочка (Крылья) — Делаем Золотой */
.porcelain-logo__icon .salon-logo .butterfly {
    stroke: var(--c-gold) !important;
    stroke-width: calc(var(--logo-lw-m)*2.5) !important; /* Чуть тоньше ириса для визуального объема */
    opacity: 0.95 !important;
}

/* ==========================================================================
   HOVER-ЭФФЕКТЫ ЛОГОТИПА
   ========================================================================== */
.porcelain-logo:hover .salon-logo .iris {
    stroke: var(--c-gold) !important;
    
}
.porcelain-logo:hover .salon-logo .butterfly {
    stroke: var(--c-gold-hover) !important;
    filter: drop-shadow(0 0 4px rgba(197, 160, 89, 0.4)) !important; /* Легкое золотое свечение */
}

/* ==========================================================================
   ТЕСТ: Монолитный SVG Логотип (Иконка + Текст внутри одного файла)
   ========================================================================== */
.porcelain-logo-mono {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: transform 0.3s ease !important;
}

.porcelain-logo-mono:hover {
    transform: translateY(-2px) !important;
}

/* Настраиваем высоту всего блока целиком */
.porcelain-logo-mono svg {
    display: block !important;
    height: 48px !important; /* Базовая высота для десктопа (подберите на глаз) */
    width: auto !important;
    max-width: 100% !important;
}

/* Адаптив для мобилок */
@media (max-width: 900px) {
    .porcelain-logo-mono svg {
        height: 36px !important; /* Планшеты */
    }
}

@media (max-width: 480px) {
    .porcelain-logo-mono svg {
        height: 28px !important; /* Смартфоны */
    }
}


/* --- УЛЬТРА-СЖАТИЕ (< 480px): Отказ от плашки в пользу максимума размера и "жирнения" --- */
@media (max-width: 480px) {
    .porcelain-logo-mono {
        /* Жестко убиваем экслибрис, чтобы освободить место */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .porcelain-logo-mono svg {
        /* Вытягиваем логотип на максимум (теперь ему ничто не мешает) */
        height: 36px !important; /* Можно 42px, если влезает рядом с информером */
        
        /* Тот самый трюк с тенью.
           Мы даем две микро-тени цвета кобальта (с разной прозрачностью).
           Первая дает "жирность" (расширяет контур на 1px), вторая дает легкий отрыв от фона.
           Так как прозрачность 30%, она не "испачкает" золотые элементы логотипа. */
        filter: drop-shadow(0px 0px 0.5px rgba(29, 53, 87, 0.4)) 
                drop-shadow(0px 1px 1px rgba(29, 53, 87, 0.2)) !important;
    }
}

/* ==========================================================================
   АДАПТИВНЫЙ ЛОГОТИП (Иконка + Текст из разных шорткодов)
   ========================================================================== */

/* 1. Общий контейнер (Блок в редакторе) */
.porcelain-logo-responsive {
    display: inline-flex !important;
    flex-direction: row !important; /* <--- ЖЕСТКО ЗАДАЕМ СТРОКУ ДЛЯ ДЕСКТОПА */
    align-items: flex-start !important; /* Выравниваем по верху! */
    gap: 12px !important;
    flex-wrap: nowrap !important;
    transition: transform 0.3s ease;
}

/* При наведении на весь блок он слегка приподнимается */
.porcelain-logo-responsive:hover {
    transform: translateY(-2px);
}

/* 2. Настройка размеров SVG внутри ссылок */
.logo-mark svg, .logo-type svg {
    display: block !important;
    height: 100% !important;
    width: auto !important;
}

/* Десктопные размеры */
.logo-mark { 
    height: 60px !important; 
    flex-shrink: 0 !important; 
    text-decoration: none !important; 
}

.logo-type { 
    height: 40px !important; 
    flex-shrink: 0 !important; 
    text-decoration: none !important; 
    
}

/* ==========================================================================
   УПЛОТНЕНИЕ ЛОГОТИПА (Faux-bold тень)
   ========================================================================== */
/* Работает на всех экранах, придавая плотность вектору */
.porcelain-logo-responsive svg {
    filter: drop-shadow(0px 0px 0.5px rgba(29, 53, 87, 0.4)) 
            drop-shadow(0px 1px 1px rgba(29, 53, 87, 0.15)) !important;
}

/* 3. Планшеты (< 900px) */
@media (max-width: 900px) {
    .logo-mark { height: 48px !important; }
    .logo-type { height: 32px !important; }
}


/* 4. Ультра-узкие смартфоны (< 480px) — КОМПАКТНАЯ СТРОКА */
@media (max-width: 480px) {
    .porcelain-logo-responsive {
        flex-direction: row !important; /* ВЕРНУЛИ В СТРОКУ! Больше никакой башни */
        align-items: center !important; /* Центрируем цветок и текст относительно друг друга */
        gap: 2px !important; /* Чуть уменьшаем зазор для экономии места */
        margin-top: -20px !important; 
    }
    
    .logo-mark { 
        height: 38px !important; /* Делаем цветок аккуратным */
        width: auto !important;
    }
    
    .logo-type { 
        height: 28px !important; /* Уменьшаем текстовый блок, чтобы не вытеснял информер */
        width: auto !important;  /* Убиваем старые 100%, пусть сам считает ширину */
        margin-top: 0 !important; /* Обнуляем оптическую компенсацию */
    }
}

/* ==========================================================================
   ЛОГОТИП: Цвета, Толщина и Ховер
   ========================================================================== */

/* 1. Базовые настройки контуров (иконка) */
.logo-mark svg path {
    fill: none !important; 
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 2. Бабочка (Внешний контур) */
.logo-mark svg .butterfly {
    stroke: var(--c-gold) !important; 
    stroke-width: calc(var(--logo-lw-m) * 1px) !important; 
    opacity: 0.95 !important;
}

/* 3. Ирис (Центр) */
.logo-mark svg .iris {
    stroke: var(--c-cobalt) !important; 
    stroke-width: calc(var(--logo-lw-m) * 0.5px) !important; 
}

/* ==========================================================================
   HOVER-ЭФФЕКТЫ (Оживляем трансформер)
   ========================================================================== */

/* При наведении: Ирис становится Золотым и НЕ светится */
.porcelain-logo-responsive:hover .logo-mark svg .iris {
    stroke: var(--c-gold) !important; 
    /*filter: drop-shadow(0 0 6px rgba(197, 160, 89, 0.6)) !important;*/
}

/* При наведении: Бабочка становится Кобальтовой (ошибка была здесь!) */
.porcelain-logo-responsive:hover .logo-mark svg .butterfly {
    stroke: var(--c-cobalt) !important; 
    filter: none !important; 
}

/* ==========================================================================
   WORDMARK: Точка и прозрачность текста
   ========================================================================== */

/* Базовое состояние точки */
.logo-type svg path.logo-dot {
    fill: var(--c-gold) !important;
    transition: fill 0.4s ease !important; 
}

/* При наведении на ВЕСЬ логотип точка меняется на Кобальт */
.porcelain-logo-responsive:hover .logo-type svg path.logo-dot {
    fill: var(--c-cobalt) !important; 
}

/* Текст слегка светлеет при наведении */
.porcelain-logo-responsive:hover .logo-type {
    opacity: 0.85 !important;
}

/* ==========================================================================
   ГЛАВНЫЙ ЭКРАН: Объем и перспектива заголовка (Hero)
   ========================================================================== */

.hero-space {
    /* 1. Воздух: Чуть увеличиваем расстояние между буквами, чтобы создать ощущение "пространства" */
    letter-spacing: 1px !important; 
    
    /* 2. Объем и Золотая тень: 
       Первая тень (кобальт) дает четкий отрыв от фона на 2px вниз.
       Вторая тень (золото) создает то самое парящее свечение вокруг слова. */
    text-shadow: 
        0px 2px 4px rgba(29, 53, 87, 0.15), 
        0px 8px 30px rgba(197, 160, 89, 0.35) !important;
        
    /* Плавность, если захотите добавить анимацию появления */
    transition: text-shadow 0.4s ease;
}

/* (По желанию) Микро-эффект при наведении мышкой - пространство "оживает" */
.lp-title-xl:hover .hero-space {
    text-shadow: 
        0px 4px 8px rgba(29, 53, 87, 0.1), 
        0px 12px 40px rgba(197, 160, 89, 0.5) !important;
}

/* --- Журнальная "Ступенька" для мобильных (< 480px) --- */
@media (max-width: 480px) {
    .lp-title-xl {
        display: flex !important;
        flex-direction: column !important; 
        
        /* ВАЖНО: Заставляем H1 занять 100% ширины экрана, чтобы "красоты" уехало к самой кромке! */
        width: 100% !important; 
        
        text-align: left !important; 
        line-height: 1.2 !important; /* Делаем интервал плотнее, без лишних дыр */
        gap: 0 !important; 
    }
    
    .lp-title-xl .hero-space {
        align-self: flex-start !important; 
        
        /* ПОДЖИМАЕМ БУКВЫ: Делаем длинное слово компактнее */
        letter-spacing: -1.5px !important; 
        font-size: 0.95em !important; /* Чуть уменьшаем размер самого слова */
    }
    
    .lp-title-xl em {
        align-self: flex-end !important; /* Теперь оно точно улетит вправо! */
        
        /* Отступ сверху, чтобы "красоты" не билось о "Пространство" */
        margin-top: 5px !important; 
        
        /* Легкий отступ от правого края, чтобы не прилипало к рамке телефона */
        padding-right: 15px !important; 
    }
}