/*
 Theme Name: Astra Child
 Template: astra
*/

/* Не растягивать изображения в Media & Text */
.wp-block-media-text .wp-block-media-text__media img,
.wp-block-media-text__media > img,
.wp-block-media-text__media figure > img {
  max-width: 100%;
  height: auto !important;      /* ключевое: не тянуть по высоте */
  width: auto;                  /* пусть ширина определяется содержимым */
  object-fit: contain;          /* вписывать в ячейку без искажений */
  display: block;
}

/* Ограничить "слишком высокие" картинки внутри Media & Text на странице */
.wp-block-media-text .wp-block-media-text__media img {
  max-height: clamp(220px, 40vh, 480px);  /* подстрой при желании */
}

/* Если где-то включён опциональный "Crop media to fill frame" (is-image-fill),
   то WP делает фон с cover. Меняем на contain, чтобы не раздувало и не обрезало. */
.wp-block-media-text.is-image-fill .wp-block-media-text__media {
  background-size: contain !important;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: clamp(220px, 40vh, 480px);  /* высота ячейки под картинку */
}

@media (max-width: 782px) {
  .wp-block-media-text .wp-block-media-text__media,
  .wp-block-media-text .wp-block-media-text__media figure {
    display: flex;
    justify-content: center;    /* по центру по горизонтали */
    align-items: center;        /* и по вертикали, если есть высота */
    margin: 0 auto;
    width: 100%;
    text-align: center;
  }

  /* Само изображение: не растягивать, центрировать */
  .wp-block-media-text .wp-block-media-text__media img {
    max-width: 100%;
    height: auto;
    width: auto;                /* чтобы не тянулось */
    margin: 0 auto;             /* центрирование */
    object-fit: contain;
  }

  /* Если включен режим "Crop media to fill frame" (is-image-fill) — центрируем фон */
  .wp-block-media-text.is-image-fill .wp-block-media-text__media {
    background-position: center center !important;
    background-size: contain !important;
  }

  /* Убираем возможные внешние отступы у figure */
  .wp-block-media-text__media > figure { margin: 0; }
}





#prices h2 {
  font-size: 24px;
  font-weight: 600px;
}


#prices h3 {
  font-size: 15px;
  font-weight: 600px;
}




.svc-page, .svc-page *, body {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

/* Ссылки-заголовки в списке услуг */
.svc-list-item h3 a,
.svc-list-item h3 a:visited{
  color:#0f172a;                 /* тёмный нейтральный */
  text-decoration:none;
}
.svc-list-item h3 a:hover,
.svc-list-item h3 a:focus{
  color:#3b82f6;                 /* синий как в интерфейсе */
  text-decoration:underline;
  text-underline-offset:3px;
}


/* Вид и размер изображений в карточках списка */
.svc-list-item .wp-block-image{         /* контейнер figure */
  max-width:520px;                      /* ≈ ширина текстовой колонки */
  margin:0;                             /* без лишних отступов */
}
.svc-list-item .wp-block-image img{
  width:100%; height:auto; display:block;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* Баланс колонок на десктопе: 45% картинка / 55% текст */
@media (min-width: 920px){
  .svc-list-item .wp-block-columns{ align-items:center; }
  .svc-list-item .wp-block-column:first-child{ flex-basis:45% !important; }
  .svc-list-item .wp-block-column:last-child{  flex-basis:55% !important; }
}

/* Чуть крупнее фото на очень широких экранах */
@media (min-width: 1200px){
  .svc-list-item .wp-block-image{ max-width:560px; }
}

/* На мобилке — на всю ширину, с небольшим отступом снизу */
@media (max-width: 781.98px){
  .svc-list-item .wp-block-image{ max-width:100%; margin-bottom:12px; }
}


body.home .wp-block-cover .wp-block-buttons{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:10px;
}
body.home .wp-block-cover .wp-block-button{
  min-width:0;
}
body.home .wp-block-cover .wp-block-button__link{
  width:100%;
  white-space:nowrap; /* не переносим текст */
  text-align:center;
  border-radius:999px;
  font-weight:800;
}

.svc-hero-price strong {
	font-weight: 800
}

.wp-block-buttons > .wp-block-button {
	display: inline !important;
}

/* Мобильная сетка цен: 3 в ряд, все по центру, цены видны */
@media (max-width: 600px){
  .prices-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    text-align:center;
  }

  /* каждая карточка = вертикальная колонка по центру */
  .prices-grid > *{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    margin:0 !important;
    padding:0 !important;
    width:auto !important;
    flex:0 0 auto !important;
  }
  .prices-grid .wp-block-image{ margin:0 auto 4px !important; }

  /* заголовок: по центру и одинаковая высота, чтобы короткие не "плясали" */
  .prices-grid h3{
    margin:4px 0 0 !important;
    font-size:12.5px !important;
    line-height:1.2 !important;
    min-height:2.6em;              /* резерв под 2 строки */
    text-align:center !important;
  }

/* Не разбивать текст в списке Как мы работаем на несколько строк */
body.home #about .wp-block-list li{
  white-space:nowrap;
}

  /* цена: показываем, компактно и по центру */
  .prices-grid p{
    display:block !important;      /* включили обратно */
    margin:2px 0 0 !important;
    font-size:12px !important;
    line-height:1.2 !important;
    color:#4b5563;
    text-align:center !important;
  }
}

/* На очень узких — 2 в ряд, чтобы не тесно */
@media (max-width: 420px){
  .prices-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
}

/* ===== DESKTOP (>=922px): Social = "таблица", номера идут столбиком ===== */
@media (min-width: 922px){
  /* Контейнер Social: таблица минимальной ширины, прижимаем вправо */
  .ast-primary-header-bar .ast-header-social-wrap{
    display: table !important;
    margin-left: auto;                /* толкаем Social к правому краю */
  }

  /* Строки "таблицы": каждый телефон на своей строке */
  .ast-primary-header-bar .ast-header-social-wrap a,
  .ast-primary-header-bar .ast-header-social-wrap .ast-builder-social-element a{
    display: table-row !important;
    white-space: nowrap;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.15;
    color: var(--ast-global-color-2) !important;
  }

  /* Если у ссылок есть иконки — небольшой отступ, чтобы номер не лип */
  .ast-primary-header-bar .ast-header-social-wrap a svg{
    display:inline-block; vertical-align:middle; margin-right:6px;
  }

  /* Чуть ужмём отступы у пунктов меню (если всё ещё тесно) */
  .main-header-menu .menu-link{ padding-left:12px; padding-right:12px; }
}

/* Базовое состояние: оверлей скрыт */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;     /* чтобы не блокировать клики, если нужно блокировать — поставь auto */
  z-index: 9998;
  transition: opacity .25s ease;
}


/* --------------------- ГЛОБАЛЬНО / КОНТЕЙНЕР --------------------- */
.entry-content .alignwide{max-width:1200px;margin-left:auto;margin-right:auto;padding:0 16px}

/* Чуть плотнее отступы заголовков в секциях услуги */
.entry-content .svc-chips h2,
.entry-content .svc-specs h2,
.entry-content .svc-prices h2,
.entry-content .svc-how h2,
.entry-content .svc-gallery h2,
.entry-content .svc-faq h2{margin:.2em 0 .6em}





/* Герой-кнопки в одну линию на мобилке */
.entry-content .svc-hero-cta{
  display: flex !important;
  flex-wrap: nowrap !important;      /* не переносить */
  gap: 8px;
  align-items: stretch;
}
.entry-content .svc-hero-cta .wp-block-button{
/*  flex: 1 1 0;*/                        /* обе занимают по половине */
  min-width: 0;                       /* можно ужаться, а не переноситься */
}
.entry-content .svc-hero-cta .wp-block-button__link{
  width: 100%;
  white-space: nowrap;                /* текст не переносим */
  text-align: center;
  padding: .6rem 1rem;
  border-radius: 999px;
  font-weight: 800;
}

/* На ОЧЕНЬ узких экранах разрешим перенос (иначе будет вылазить за экран) */
@media (max-width: 360px){
  .entry-content .svc-hero-cta{ flex-wrap: wrap !important; }
}


/* --------------------- HERO --------------------- */
.entry-content .svc-hero .wp-block-media-text__content p{margin:.25rem 0 .75rem}
.entry-content .svc-hero-price{margin:.25rem 0 1rem}
.entry-content .svc-hero-cta .wp-block-button__link{
	font-weight:700;
	border-radius:999px;
	padding:.6rem 1rem
}

.entry-content .svc-hero-cta .svc-wa .wp-block-button__link{
	border-color:#fff!important;
	color:#fff!important
}

/* бейджи */
.entry-content .svc-badges{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:10px 0 0;
	padding:0;list-style:none
}


.entry-content .svc-badges li{
  font-size:13px;font-weight:600;padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff
}
/* картинка справа в hero — красиво */
.entry-content .svc-hero .wp-block-media-text__media img{
/*  border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.25) */
}

/* --------------------- ЧИПЫ «Для чего подходит» --------------------- */
.entry-content .svc-chips{
	margin:24px auto 0;
}

.entry-content .svc-chips .chips-list{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin: 8px !important;
}

.entry-content .svc-chips .chips-list span{
	background:#eff6ff;
	color:#1e3a8a;
	border:1px solid #dbeafe;
	padding:6px 10px;
	border-radius:999px;
	font-weight:600;
	font-size:13px
}

/* --------------------- ХАРАКТЕРИСТИКИ / ОСНАСТКА --------------------- */
.entry-content .svc-specs{margin:30px auto 0}
.entry-content .svc-specs h2{margin-bottom:8px}
.entry-content .svc-specs ul{margin:0;padding-left:18px;color:#334155}

/* --------------------- ЦЕНЫ --------------------- */
.entry-content .svc-prices{margin:30px auto 0}
.entry-content .svc-prices h2{margin-bottom:12px}
.entry-content .svc-price-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px
}
.entry-content .svc-card{
  background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;
  padding:16px;box-shadow:0 6px 24px rgba(0,0,0,.06)
}
.entry-content .svc-card h3{margin:0 0 .25rem}
.entry-content .svc-card .num{
	font-size:20px;
	font-weight:900;
	margin:.25rem 0 .35rem;
	color: black;
}
.entry-content .svc-card .sub{
	color:#475569;
	margin:0 0 .75rem;
	font-size: 85%;
}
.entry-content .svc-btn{
	display:inline-block;
	padding:10px 14px;
	border-radius:999px;
	background:oklch(58.8% 0.158 241.966);
	color:#fff;
	text-decoration:none;
	font-weight:700
}
.entry-content .svc-btn:hover{filter:brightness(.95)}
.entry-content .svc-note{text-align:center;color:#475569;margin-top:10px}

/* --------------------- КАК МЫ РАБОТАЕМ --------------------- */
.entry-content .svc-how{margin:30px auto 0}
.entry-content .svc-steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;padding-left:18px;margin:0
}
.entry-content .svc-steps li{
  background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;
  padding:12px;color:#334155;list-style:decimal inside
}

/* --------------------- ГАЛЕРЕЯ --------------------- */
.entry-content .svc-gallery{margin:30px auto 0}
.entry-content .gallery-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px
}
.entry-content .gallery-grid .ph{
  aspect-ratio:4/3;border-radius:12px;background:#e5e7eb;border:1px solid #e2e8f0;
  display:flex;align-items:center;justify-content:center;color:#64748b;font-weight:700
}

/* --------------------- FAQ --------------------- */
.entry-content .svc-faq{margin:30px auto 70px}
.entry-content .faq-list details{
  border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:10px 12px;
  margin-top:10px;background:#fff
}
.entry-content .faq-list summary{cursor:pointer;font-weight:700;list-style:none}
.entry-content .faq-list summary::-webkit-details-marker{display:none}

/* На очень узких экранах — одна колонка карт/цен */
@media (max-width: 420px){
  .entry-content .svc-price-grid{grid-template-columns:1fr}
}

/* Когда открыто мобильное меню — показываем оверлей */
body.ast-mobile-popup-drawer-active::before,
body.ast-off-canvas-active::before{
  opacity: 1;
  pointer-events: auto;     /* если хочешь блокировать клики по бэкграунду */
}

/* На всякий — меню должно быть выше оверлея */
.ast-mobile-popup-drawer{ z-index: 9999; }


/* Прозрачная шапка на главной — делаем номера белыми */
.ast-transparent-header .ast-header-social-wrap a{ color:#fff !important; }


.site-header-primary-section-left {
	display: none;
}
/* ==== МОБИЛЬНЫЙ ХЕДЕР: слева 2 номера, справа "три точки" ==== */
/* ==== Моб. шапка: 2 номера слева, тот же цвет что на десктопе ==== */
/* ==== Моб. шапка: 2 номера слева, "три точки" справа, цвет как у десктопа ==== */
@media (max-width: 921px){
  .ast-mobile-header-wrap .ast-container{ position:relative; padding-left:120px; }

  /* левый верх: телефоны из сниппета */
	.mobile-phones-inline{
		position:absolute; 
		left:12px; 
		top:10px; 
		z-index:5;
    		display:flex; 
		flex-direction:column; 
		gap:2px; 
		align-items:flex-start; 
		white-space:nowrap;
    		font-weight:700;
    		/* берём ТЕ ЖЕ переменные, что использует десктопное меню Astra */
    		color: var(--ast-header-nav-link-color, var(--ast-global-color-2, var(--ast-global-color-1))) !important;
  }

	.mobile-phones-inline a{
		display:flex; align-items:center; gap:6px;
		color:inherit !important; text-decoration:none;
		font-size:14px; line-height:1.15;
	}

	.mobile-phones-inline a:visited{ 
		color:inherit !important;
	}

	/* правый верх: кнопка меню */
	.ast-mobile-header-wrap .ast-mobile-menu-trigger,
	.ast-header-break-point .menu-toggle{
		position:absolute !important;
		right:12px;
		top:6px;
		margin:0 !important;
		transform:none !important;
		z-index:6;
	}

  /* логотип по центру */
  .ast-header-break-point .site-branding{ text-align:center; width:100%; }
}

/* На прозрачной шапке — белым (как и на десктопе) */
.ast-transparent-header .mobile-phones-inline,
.ast-transparent-header .mobile-phones-inline a,
.ast-transparent-header .mobile-phones-inline svg{
	color:#fff !important;
	fill:#fff !important;
}

div.ast-mobile-header-content div[data-section="section-hb-social-icons-1"] span.social-item-label {
	color: var(--ast-global-color-2) !important;;
}

div.ast-mobile-header-content div[data-section="section-hb-social-icons-1"] svg{
	fill: var(--ast-global-color-2) !important;;
}

/* === 1) ШРИФТ как в макете (Inter). Если не нужен — этот блок можно убрать. === 
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
 ВАРИАНТ А: ты обернул контент страницы в Group с классом "svc-page"  
.svc-page, .svc-page *{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

*/
.svc-page h1,.svc-page h2,.svc-page h3{font-weight:800;letter-spacing:-0.01em}

.svc-page h1{
	line-height:1.1
}

.svc-page h2{
	line-height:1.15
}
/* ВАРИАНТ Б (если НЕ оборачивал в svc-page): раскомментируй 2 строки ниже */
/* .entry-content{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;}
.entry-content h1,.entry-content h2,.entry-content h3{font-weight:800;letter-spacing:-0.01em} */

/* === 2) HERO — скруглённая картинка и бейджи === */
.svc-hero .wp-block-media-text__media img{
/*  border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); */
}


.svc-badges{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.svc-badges li{
	font-size:13px;
	font-weight:600;
	padding:6px 10px;
	border-radius:999px;
	background:rgba(255,255,255,.16);
	border:1px solid rgba(255,255,255,.28);
	color:#fff;
}
.svc-hero-cta .wp-block-button__link{font-weight:700;border-radius:999px;padding:.6rem 1rem}
.svc-hero-cta .svc-wa .wp-block-button__link{border-color:#fff!important;color:#fff!important}

/* === 3) «Характеристики» и «Оснастка» — КАРТОЧКИ === */
.svc-specs{margin:30px auto 0}
.svc-specs .wp-block-column{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px;
  padding:16px; box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.svc-specs .wp-block-column h2{margin:0 0 8px}
.svc-specs .wp-block-column ul{margin:0; padding-left:18px; color:#334155}

/* === 4) ЦЕНЫ (карточки) === */
.svc-prices{margin:30px auto 0}
.svc-prices h2{margin-bottom:12px}
.svc-price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.svc-card{
  background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;
  padding:16px;box-shadow:0 6px 24px rgba(0,0,0,.06)
}
.svc-card .num{font-size:20px;font-weight:800}
.svc-card .sub{color:#475569;margin:.15rem 0 .75rem}
.svc-btn{
	display:inline-block;
	padding:10px 14px;
	border-radius:999px;
	background:#2563eb;
	color:#fff;
	text-decoration:none !important;
	font-weight:700
}

/* === 5) КАК МЫ РАБОТАЕМ (сеткой, карточками) === */
.svc-how{margin:30px auto 0}
.svc-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding-left:18px;margin:0}
.svc-steps li{
  background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;
  padding:12px;color:#334155;list-style:decimal inside
}

/* === 6) ГАЛЕРЕЯ (плейсхолдеры) === */
.svc-gallery{margin:30px auto 0}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gallery-grid .ph{
  aspect-ratio:4/3;border-radius:12px;background:#e5e7eb;border:1px solid #e2e8f0;
  display:flex;align-items:center;justify-content:center;color:#64748b;font-weight:700
}

/* === 7) FAQ — аккордеоны как карточки === */
.svc-faq{
	margin:30px auto 70px;
	color: black !important;
}

.faq-list details{
	background:#fff;
	border:1px solid rgba(0,0,0,.08);
	border-radius:12px;
	padding:10px 12px;
	box-shadow:0 4px 16px rgba(0,0,0,.06);
	font-size: 15px;
}


/* FAQ — убираем старые маркеры/галочки */
.faq-list summary::-webkit-details-marker{ display:none !important; }
.faq-list summary::after{ display:none !important; }

/* FAQ — делаем СОЛИДНЫЕ треугольники слева */
.faq-list details{ position:relative; }
.faq-list summary{
  position:relative;
  display:block;
  padding-left:32px;              /* место под треугольник */
  list-style:none;                 /* без стандартного маркера */
}

/* закрыто: ► (треугольник вправо) */
.faq-list summary::before{
  content:"";
  position:absolute; left:10px; top:50%;
  width:0; height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:12px solid currentColor;   /* СОЛИДНЫЙ, берёт цвет текста */
  transform:translateY(-50%) rotate(0deg);
  transform-origin:50% 50%;
  opacity:.95;
  transition:transform .2s ease, opacity .2s ease;
}

/* открыто: ▼ (поворачиваем на 90°) */
.faq-list details[open] summary::before{
  transform:translateY(-50%) rotate(90deg);
  opacity:1;
}


/* === 8) Адаптив + липкий нижний бар на мобиле === */
@media (max-width: 921px){
  .svc-price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-sticky-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    padding:10px 12px;background:#0b1220
  }
  .svc-sticky-cta a{
    display:block;text-align:center;padding:10px;border-radius:10px;
    font-weight:800;text-decoration:none;color:#fff;background:#2563eb
  }
  .svc-sticky-cta a:last-child{background:#10b981}
  body:not(.logged-in){padding-bottom:64px}
}
@media (max-width: 420px){
  .svc-price-grid{grid-template-columns:1fr}
}