.wp-block {
  max-width: 1200px;
}

/* Страховка от горизонтальной прокрутки на всём сайте.
   На страницах со слайдером «сёстры» (page-siblings) абсолютно
   спозиционированный overlay внутри слайда вырывается за пределы
   обрезающего родителя и тянет страницу вширь на мобильном.
   overflow-x: clip (а НЕ hidden) обрезает горизонтальный выход,
   но — в отличие от hidden — не создаёт scroll-container и поэтому
   НЕ ломает position: sticky внутри контента. */
html,
body,
.site-main {
  overflow-x: clip;
}

/* ============================================================
   Конструктор блога (single-advice): секции ACF Flexible Content.
   Базовый структурный CSS — финальную дизайн-полировку доводит верстальщик.
   ============================================================ */

.advice-single__sections {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.advice-single__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  color: #888;
  font-size: 15px;
  margin: 12px 0 20px;
}

/* Дата — выделена (как на макете: жирная тёмная). */
.advice-single__date {
  font-weight: 700;
  color: #584646;
}

/* Пункты меты: иконка + значение. */
.advice-single__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #888;
}

/* Иконки — бежевые. */
.advice-single__meta-icon {
  color: #EBBFA6;
  flex: 0 0 auto;
}

/* «Поделиться» — обёртка-якорь для выпадающей панели соцсетей. */
.advice-single__share {
  position: relative;
}

/* Кнопка-триггер — без рамки/фона, только иконка. */
.advice-single__share-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  color: inherit;
}

.advice-single__share-btn:hover .advice-single__meta-icon,
.advice-single__share.is-open .advice-single__meta-icon {
  color: #d9a888;
}

/* Выпадающая панель соцсетей. */
.advice-single__share-popup {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 6px);
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(88, 70, 70, 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 20;
}

/* Хвостик-стрелочка вверх. */
.advice-single__share-popup::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: #fff;
}

.advice-single__share.is-open .advice-single__share-popup {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Цветные иконки соцсетей в панели. */
.advice-single__share-net {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  line-height: 0;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  transition: transform 0.15s ease;
}

.advice-single__share-net svg {
  display: block;
  width: 36px;
  height: 36px;
}

.advice-single__share-net:hover {
  transform: scale(1.08);
}

/* Воздух под вводным абзацем — отделить от первой секции. */
.advice-single__intro {
  margin-bottom: 48px;
}

/* Воздух вокруг кнопки «Читать далее»/«Скрыть» в блоге. */
.js-readmore .page-block__readmore {
  margin-top: 24px;
  margin-bottom: 8px;
}

.advice-section {
  scroll-margin-top: 100px;
}

/* Заголовок секции — те же параметры, что у заголовков секций на боевых
   страницах page_block (.mainpage__tabs__title span): 40px / 500 / #584646. */
.advice-section__title {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  color: #584646;
  margin-bottom: 40px;
}

.advice-section__title--center {
  text-align: center;
}

@media (max-width: 768px) {
  .advice-section__title {
    font-size: 28px;
    margin-bottom: 24px;
  }
}

/* --- Галерея: слайдер ---
   Стрелки используют ГОТОВЫЕ классы сайта promo__slider__prev/next (стиль в style.css):
   круг 60×60, обводка #584646, шеврон от Swiper, hover-инверсия, позиционирование по краям.
   Здесь — только боковые поля под стрелки и выравнивание слайдов. */
.advice-gallery-slider-wrap {
  position: relative;
  padding: 0 70px;
}

.advice-gallery-slider__slide a {
  display: block;
  height: 100%;
}

.advice-gallery-slider__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
}

@media (max-width: 768px) {
  .advice-gallery-slider-wrap {
    padding: 0 44px;
  }
}

/* Иконка zoom при наведении на фото — переиспользуем .mainpage__portfolio__slide__zoom
   из style.css. Базовый (скрытый) стиль уже там; здесь — триггеры hover для наших галерей
   и размер svg (в style.css правила размера/hover привязаны к чужим классам слайдера).
   ВАЖНО: в эталоне (mainpage-portfolio.php) div.zoom лежит СНАРУЖИ <a>, ребёнком
   .swiper-slide (он position:relative). У нас div.zoom лежит ВНУТРИ <a>, поэтому
   точкой отсчёта для центрирующего absolute должен быть сам <a> — иначе круг
   центрируется по контейнеру слайда/ячейки, а не по фото (особенно в сетке, где
   <a> по умолчанию inline). Делаем <a> position:relative; display:block. */
.advice-gallery-slider__slide a,
.advice-gallery-grid__item a {
  position: relative;
  display: block;
}

/* Размер svg + горизонтальный сдвиг left:20px: круг 80px, иконка 40px,
   контейнер .zoom центрирует только по вертикали (align-content), поэтому
   иконку догоняем до центра вручную — (80-40)/2 = 20px. Как в эталоне (style.css:3266). */
.advice-gallery-slider__slide .mainpage__portfolio__slide__zoom img,
.advice-gallery-grid__item .mainpage__portfolio__slide__zoom img {
  width: 40px;
  height: 40px;
  position: relative;
  left: 20px;
}

.advice-gallery-slider__slide:hover .mainpage__portfolio__slide__zoom,
.advice-gallery-grid__item:hover .mainpage__portfolio__slide__zoom {
  transform: translate(-50%, -50%) scale(1);
  transition: .3s all;
  opacity: 1;
}

/* --- Галерея: сетка --- */
.advice-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.advice-gallery-grid__item--hidden {
  display: none;
}

.advice-gallery-grid__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

.advice-gallery-grid__more-wrap {
  text-align: center;
  margin-top: 24px;
}

@media (max-width: 768px) {
  .advice-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Таблицы из редактора (контент page-block__text: текстовые секции advice,
       FAQ-ответы, страницы page_block). Вид как на макете «Римские шторы»:
       на всю ширину, скруглённые углы, тёмная шапка, зебра строк.
       border-collapse: separate — обязательно, иначе border-radius не работает. --- */
.page-block__text table {
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 0 24px;
  border: 1px solid #e8e2dc;
  border-radius: 16px;
  overflow: hidden; /* обрезает углы ячеек по скруглению таблицы */
}

.page-block__text table th,
.page-block__text table td {
  padding: 16px 20px;
  border-bottom: 1px solid #e8e2dc;
  border-right: 1px solid #e8e2dc;
  text-align: left;
  vertical-align: top;
}

/* Убираем двойные внешние границы (рамка уже на самой таблице). */
.page-block__text table th:last-child,
.page-block__text table td:last-child {
  border-right: 0;
}

.page-block__text table tr:last-child th,
.page-block__text table tr:last-child td {
  border-bottom: 0;
}

.page-block__text table thead th,
.page-block__text table tr:first-child th {
  background: #6b5b4f;
  color: #fff;
  font-weight: 600;
  border-bottom-color: #6b5b4f;
}

.page-block__text table tbody tr:nth-child(even),
.page-block__text table tr:nth-child(even) {
  background: #faf7f4;
}

/* Мобильная адаптация: горизонтальный скролл, чтобы широкая таблица не ломала вёрстку.
   Оборачиваем саму таблицу в скролл-контейнер через display:block + overflow. */
@media (max-width: 768px) {
  .page-block__text table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .page-block__text table th,
  .page-block__text table td {
    padding: 12px 14px;
  }
}

/* --- Видео-галерея ---
   Самодостаточные стили (НЕ зависят от .portfolio-video-item — тот тащит Swiper-логику:
   scale .8 и приглушённую кнопку у неактивных слайдов). Используем только эталонную
   кнопку .video-play-btn / .play-icon из style.css. */
.advice-video-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px; /* макет: gap 40 */
}

.advice-video-gallery__item {
  margin: 0;
}

/* Чёрная рамка-«телевизор» как на макете: padding 16, border-radius 16. */
.advice-video-gallery__media {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  padding: 16px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}

/* Превью-кадр video_file: сам <video> заполняет кадр внутри рамки. */
.advice-video-gallery__media video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  border-radius: 6px;
}

/* Превью iframe (YouTube и т.п.): обложка как фон. */
.advice-video-gallery__iframe-preview {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000 center / cover no-repeat;
  border-radius: 6px;
}

/* Кнопка play по центру кадра (эталонная .video-play-btn самодостаточна). */
.advice-video-gallery__media .video-play-btn {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* клик ловит контейнер-карточка */
  opacity: 1;
}

.advice-video-gallery__media:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(255, 255, 255, 0.4);
}

/* Когда видео играет — показываем целиком, прячем кнопку play. */
.advice-video-gallery__media.is-playing video {
  object-fit: contain;
}

.advice-video-gallery__media.is-playing .video-play-btn {
  display: none;
}

/* Inline-iframe после клика. */
.advice-video-gallery__inline-iframe {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
}

.advice-video-gallery__inline-iframe iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Подпись наложена на нижнюю часть кадра (как на макете): белый текст на
   градиентной затемнённой подложке. Сдвиг на 16px — это толщина чёрной рамки,
   чтобы подпись легла на сам кадр, а не на рамку. */
.advice-video-gallery__caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  padding: 40px 20px 16px;
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  border-radius: 0 0 6px 6px;
  pointer-events: none;
}

/* Когда видео играет — подпись убираем, чтобы не мешала. */
.advice-video-gallery__media.is-playing .advice-video-gallery__caption {
  display: none;
}

@media (max-width: 576px) {
  .advice-video-gallery {
    grid-template-columns: 1fr;
  }
}

/* --- Файлы для скачивания --- */
.advice-files {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.advice-files__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}

.advice-files__item:hover {
  border-color: #c9a98f;
}

.advice-files__name {
  display: block;
  font-weight: 600;
}

.advice-files__meta {
  display: block;
  font-size: 13px;
  color: #999;
  text-transform: uppercase;
}

.advice-files__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.advice-files__icon svg {
  display: block;
  width: 40px;
  height: 40px;
}

@media (max-width: 576px) {
  .advice-files {
    grid-template-columns: 1fr;
  }
}

/* --- FAQ-аккордеон ---
   Bootstrap accordion как на главной (section.mainpage__faq). Оформление карточек
   (.accordion-item рамка #EBBFA6 radius 10 padding, иконки +/− в ::after) — глобальное
   из style.css. Здесь дублируем те правила главной, что в style.css привязаны к
   section.mainpage__faq (цвет/размер текста, ответ), под наш контейнер .advice-faq,
   плюс раскладка (gap 20px). Без штор/min-height главной. */

/* Подложка блока: светлый фон, скруглённые углы, внутренний отступ (как на макете). */
.advice-section--faq {
  background: #FFF9F5;
  border-radius: 24px;
  padding: 56px 64px;
}

@media (max-width: 768px) {
  .advice-section--faq {
    padding: 32px 20px;
    border-radius: 16px;
  }
}

.advice-faq {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.advice-faq .accordion-item .accordion-button {
  border: 0;
  font-size: 20px;
  font-weight: 500;
  color: #584646;
}

.advice-faq .accordion-item .accordion-button:not(.collapsed) {
  background-color: transparent;
  border-radius: 10px;
  border-color: #EBBFA6;
  border-bottom-width: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.advice-faq .accordion-item .accordion-collapse {
  border: 0;
}

.advice-faq .accordion-item .accordion-body {
  color: #6F6F6F;
  font-size: 20px;
  margin-top: 20px;
}

/* ==========================================================================
   Калькулятор расчёта штор — дизайн «вариант B» (витрина: контролы слева,
   превью + построчная цена + кнопка справа). Палитра сайта.
   Разметка: template-parts/sections/calculator-rim.php
   ========================================================================== */
.calculator {
  font-family: 'Montserrat', Arial, sans-serif;
  color: #584646;
  padding-bottom: 60px;
  background: transparent;
}
/* Когда два калькулятора идут подряд (классический + римский на одной странице) —
   убрать двойной отступ между ними, оставить компактный зазор. */
.calculator + .calculator {
  padding-top: 0;
}
/* Форма-обёртка нужна только чтобы изолировать radio-группы калькулятора
   (когда на странице несколько калькуляторов). На вёрстку не влияет. */
.calc-b__form { display: contents; }
.calc-b {
  /* Контейнер калькулятора (Figma): бежевый фон, рамка 2px беж-02, padding 16, radius 20.
     Левая колонка с шагами — на этом бежевом; белые карточки — только справа. */
  background: rgba(255, 249, 245, 1);
  
  border-radius: 20px;
  /* Плавный padding: 20px (мобильный) → 40px (десктоп). Ручной респонсив. */
  padding: clamp(20px, 3vw, 40px);
}
.calc-b__title {
  font-weight: 500;
  font-size: 40px;
  line-height: 1.2;
  color: #584646;
  text-align: center;
  margin: 0 0 30px;
}

/* Сетка по Figma: левая 659, правая 621, gap 60. align-items: start (высота по содержимому).
   На узких контейнерах колонки сжимаются пропорционально (minmax). */
.calc-b__grid {
  display: grid;
  grid-template-columns: minmax(0, 659fr) minmax(0, 621fr);
  gap: 60px;
  align-items: start;
}
.calc-b__controls { display: flex; flex-direction: column; }

/* Шаг с рельсом (линия, соединяющая кружки-номера). Figma: кружок 40px, gap 20px. */
.calc-b__step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 20px;

}
.calc-b__step--last { padding-bottom: 0; }
/* Римский калькулятор: последний шаг (размеры, поля в 2 колонки) имеет фикс-высоту,
   чтобы рельс и отступы совпадали с макетом. Класс этого не требует — у него
   последний шаг (коэффициент + аккордеон) переменной высоты, фикс-высота его обрезала. */
.calculator--rim .calc-b__step--last { height: 248px; }
.calc-b__rail { display: flex; flex-direction: column; align-items: center; }
.calc-b__num {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 40px; height: 40px;     /* Figma Frame 35: 40×40 */
  border-radius: 50%;
  background: #584646;
  color: #FFF9F5;
  font-size: 16px;               /* Figma: 16px / 700 */
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.calc-b__step:not(.calc-b__step--last) .calc-b__rail::after {
  content: '';
  width: 2px;
  flex: 1;
  margin-top: 8px;
  margin-bottom: 8px;
  background: rgba(235, 191, 166, 1);
}
.calc-b__body { min-width: 0; padding-bottom: 40px;}


.calc-b__step--last .calc-b__body{
  padding-bottom: 0;
}
/* Шрифты шагов — плавно между мобильным и десктопом (clamp). */
/* Заголовок шага выровнен по центру кружка-номера (Figma: ряд 40px, align center). */
.calc-b__step-title {
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 700;
  color: #484848;
  line-height: 140%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.calc-b__step-sub { font-size: clamp(15px, 1.6vw, 20px); color: rgba(88, 70, 70, 1); margin: -8px 0 14px; }

/* Шаг 1: segmented-control тарифа — на всю ширину колонки */
.calc-b__seg {
  display: flex;
  width: 100%;
  padding: 4px;
  gap: 4px;
  background: #FFF9F5;
  border: 1px solid rgba(225, 219, 219, 1);
  border-radius: 999px;
}
.calc-b__seg-btn { margin: 0; cursor: pointer; flex: 1 1 0; min-width: 0; }
.calc-b__seg-btn input { position: absolute; opacity: 0; pointer-events: none; }
.calc-b__seg-btn span {
  display: block;
  text-align: center;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 600;
  color: #8a7b76;
  transition: background .2s, color .2s, box-shadow .2s;
}
.calc-b__seg-btn:hover span { color: #584646; }
.calc-b__seg-btn.is-active span {
  background: rgba(235, 191, 166, 1);
  color: #463631;
  
}

/* Лента-превью тканей + примечание поверх. Figma: высота 280, radius 20, gap 20, padding 20. */
.calc-b__swatches {
  position: relative;
  margin-top: 20px;
  border-radius: 20px;
  overflow: hidden;
  
}
.calc-b__swatches-strip {
  /* Figma: Fixed 280px; фон-фото тарифа задаётся inline.
     Плавная высота: 200px (мобильный) → 280px (десктоп/планшет-верх). */
  height: clamp(200px, 30vw, 280px);
  background-color: #efe6dc;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
/* Примечание прижато к низу ленты, широкое. Белый блок БЕЗ рамки;
   пунктир — ВНУТРИ блока (декоративная обводка с отступом), как на макете. */
.calc-b__note {
  position: absolute;
  left: 12px; right: 12px;
  bottom: 12px;
  background: rgba(255, 249, 245, 1);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}
/* Пунктир с РЕДКИМ шагом (штрих 6px, промежуток 6px) — через фон, т.к.
   обычный border:dashed не даёт управлять частотой штрихов. */
.calc-b__note .ramka {
  

    gap: 10px;
    angle: 0 deg;
    opacity: 1;
    padding-top: 16px;
    padding-right: 12px;
    padding-bottom: 16px;
    padding-left: 12px;
    border-radius: 10px;
    background:
    repeating-linear-gradient(90deg,  #EBBFA6 0 6px, transparent 6px 12px) top/100% 1px no-repeat,
    repeating-linear-gradient(90deg,  #EBBFA6 0 6px, transparent 6px 12px) bottom/100% 1px no-repeat,
    repeating-linear-gradient(180deg, #EBBFA6 0 6px, transparent 6px 12px) left/1px 100% no-repeat,
    repeating-linear-gradient(180deg, #EBBFA6 0 6px, transparent 6px 12px) right/1px 100% no-repeat;




}
.calc-b__note b { display: block; color: #584646; font-weight: 600; font-size: 20px; margin-bottom: 3px; }
.calc-b__note span { display: block; color: #8a7b76; font-size: 16px; }

/* Шаги 2/3: карточки с миниатюрой слева */
.calc-b__choices { display: grid; gap: 14px; }
.calc-b__choices--1 { grid-template-columns: 1fr; }
.calc-b__choices--2 { grid-template-columns: 1fr 1fr; }
.calc-b__choice {
  /* Figma: padding 20, border 2px, radius 20, gap 20 */
  position: relative;
  margin: 0;
  display: flex;
  align-items: start;
  gap: 20px;
  padding: 20px;
  border: 2px solid rgba(225, 219, 219, 1);
  border-radius: 20px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  line-height: 140%;
}
.calc-b__choices--1 .calc-b__choice{

  height: 155px;
}



.calc-b__choice input { position: absolute; opacity: 0; pointer-events: none; }
.calc-b__choice:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(75,55,45,.07); }
.calc-b__choice.is-active {
  border-color: rgba(235, 191, 166, 1);

}
/* Недоступный вариант (напр. однорядный карниз при материале «Тюль + штора»). */
.calc-b__choice.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.calc-b__choice-thumb {
  flex: 0 0 auto;
  width: 160px; height: 115px;
  border-radius: 10px;
  overflow: hidden;
  /* фон-фото материала (background-image задаётся inline в разметке); */
  /* пока фото нет — виден свотч-цвет --swatch как подложка */
  background-color: var(--swatch, #efe6dc);
  background-size: cover;
  background-position: center;
}
.calc-b__choices--2 .calc-b__choice-thumb{

  width: 98px; height: 82px;
}
/* Материал в КЛАССИЧЕСКОМ калькуляторе (3 карточки): «Портьера + Тюль» — во всю
   ширину ряда, первые две (Портьера / Тюль) делят верхний ряд пополам.
   Скоуп .calculator--class обязателен: у римского материалов 2, и без скоупа
   последняя карточка («Тюль») растягивалась на всю ширину. */
.calculator--class .calc_box_m.calc-b__choices--2 { grid-template-columns: 1fr 1fr; }
.calculator--class .calc_box_m.calc-b__choices--2 .calc-b__choice:last-child { grid-column: 1 / -1; }
.calc-b__choice-body{
    height: 100%;
    display: flex;
    flex-direction: column;     /* имя над описанием (иначе короткие name+desc слипались в строку) */
    flex-wrap: wrap;
}
/* Имя и описание занимают всю ширину тела карточки (каждый со своей строки). */
.calc-b__choice-name,
.calc-b__choice-desc { width: 100%; }

/* Фото карниза задаётся инлайном в разметке (см. $img_carniz в calculator-rim.php).
   Здесь — только фолбэк-фон, если файла нет. */
.calc-b__choice-thumb--carniz {
  position: relative;
  background-color: #eef1f4;
}



.calc-b__choice-name { display: block; font-size: 20px; font-weight: 600; color: #584646;margin-bottom: 10px; }
.calc-b__choice-desc { display: block; font-size: 16px; color: #8a7b76; margin-top: 2px; font-weight: 400; line-height: 140%;}

/* Шаг 4: размеры со степперами */
/* Поля размеров: авто-раскладка — два в ряд, пока каждое ≥150px; когда столбец
   становится у́же (узкий экран) — браузер сам переносит их в один столбец. */
.calc-b__measures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; max-width: 460px; align-items: end; }
.calc-b__field-label { display: block; font-size: 20px; color: rgba(88, 70, 70, 1); margin-bottom: 6px;  font-weight: 600;}
.calc-b__field-row { display: flex; align-items: stretch; gap: 10px; }
.calc-b__input {
  /* Figma: Fill, height 54, radius 10, padding 13/16 */
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 13px 16px;
  border: 1px solid rgba(225, 219, 219, 1);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #584646;
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.calc-b__input:focus { border-color: #d99e7e; box-shadow: 0 0 0 3px rgba(235,191,166,.30); }
.calc-b__input::-webkit-outer-spin-button,
.calc-b__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-b__input[type=number] { -moz-appearance: textfield; appearance: textfield; }
/* Степпер: одна рамка 36px шириной во всю высоту поля, внутри две стрелки
   (разделены горизонтальной линией). Figma: radius 8, border 1px. */
.calc-b__spin {
  flex: 0 0 auto;
    display: flex;
    gap: 5px;
    flex-direction: column;
    width: 36px;
    /* height: 86px; */
    /* border: 1px solid #EBBFA6; */
    border-radius: 8px;
    overflow: hidden;
}
.calc-b__spin-btn {
  flex: 1;
  border: 0;
  background: #fff;
  color: #8a7b76;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.calc-b__spin-btn {
   
   border: 1px solid rgba(225, 219, 219, 1);
   width: 36px;
   height: 24px;
   border-radius: 8px;
  }
  .calc-b__spin-btn svg{

    transform: rotate(90deg);
  }
.calc-b__spin-btn:first-child svg{
  transform: rotate(-90deg);

}



.calc-b__spin-btn:hover { background: #FFF9F5; color: #584646; }
.calc-b__spin-btn:hover { background: #FFF9F5; color: #584646; border-color: #EBBFA6; }

.calc-b__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.calc-b__quick-label { font-size: 13.5px; color: rgba(88, 70, 70, 1); }
.calc-b__quick-btn {
  padding: 7px 14px;
  background: #fff;
  border: 1px solid #EBBFA6;
  border-radius: 999px;
  font-size: 13.5px;
  line-height: 12px;
  color: rgba(88, 70, 70, 1);
  cursor: pointer;
  transition: background .2s;
}
.calc-b__quick-btn:hover { background: linear-gradient(90deg, #FED6CB, #EBBFA6); }

/* ============================================================
   Классический калькулятор: параметры карниза, слайдеры, аккордеон.
   Значения сняты из макета (karta_clean.svg). Акцент слайдеров —
   розово-красный #FD7E91 (отдельный от персикового акцента сегментов).
   ============================================================ */

/* Шаг 3 «Параметры карниза» (точные размеры из Figma-экспорта):
   поле ширины (Frame 441, 399px Fill) + блок «Рядов» (Fixed 160px), gap 40px,
   выравнивание по верху (подписи на одной линии). */
.calc-b__params {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;  /* ширина — Fill; «Рядов» — Fixed 160px */
  gap: 40px;
  align-items: start;
}
.calc-b__params .calc-b__field-label { margin-bottom: 10px; }

/* Блок «Рядов» (Figma Frame 1948758151, 160px): подпись «Рядов» по ЦЕНТРУ,
   под ней слайдер во всю ширину 160px (точки 1/2, дорожка между ними). */
.calc_box_rows { width: 160px; }
.calc_box_rows .calc-b__field-label { text-align: center; margin-bottom: 14px; }
.calc_box_rows .calc-b__slider--rows {
  min-height: 0;
  width: 160px;
  max-width: 100%;
}

/* --- Слайдер на radio (рядность / коэффициент сборки) --- */
/* Точки разнесены space-between БЕЗ бокового padding — крайние точки прижаты
   к левому и правому краям блока (как на макете). Подпись над точкой, точка снизу. */
.calc-b__slider {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  padding: 0 0 4px;
  min-height: 48px;
}
.calc-b__slider--rows { max-width: 160px; }
.calc-b__slider--k    { max-width: 100%; }

.calc-b__slider-opt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}
/* Дорожка — одна линия позади точек, строго по их вертикальному центру.
   Без бокового padding центр крайней точки = радиус 12px от края блока, поэтому
   линия идёт от 12px до right:12px (от центра первой точки до центра последней).
   Точки имеют непрозрачный фон #FFF9F5 и лежат ВЫШЕ линии (z-index:1) — внутри
   колец линия закрыта, видна только в промежутках. */
.calc-b__slider::before {
  content: '';
  position: absolute;
  left: 12px; right: 12px;
  bottom: 15px;                   /* центр кружка: padding-bottom(4) + радиус(12) − 1px */
  height: 2px;
  background: #D9D9D9;
  z-index: 0;
}
.calc-b__slider-opt input { position: absolute; opacity: 0; pointer-events: none; }
.calc-b__slider-cap {
  font-size: 20px;               /* Figma: 20px / 600 */
  font-weight: 600;
  color: #584646;
  line-height: 1;
  transition: color .2s;
}
.calc-b__slider-opt.is-active .calc-b__slider-cap { color: #463631; }
/* Точка-кружок: 24px (Figma radio_button). Контурное кольцо; фон = бежевый фон
   страницы (#FFF9F5) — визуально кольцо «пустое», но непрозрачный фон прячет
   дорожку, проходящую за средними точками (у слайдера коэффициента их 5). */
.calc-b__slider-dot {
  position: relative;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #FFF9F5;
  border: 2px solid #E1DBDB;
  box-sizing: border-box;
  transition: border-color .2s;
}
/* Активная точка — двойной кружок: розовое кольцо #FD7E91 + зазор + розовое ядро. */
.calc-b__slider-opt.is-active .calc-b__slider-dot {
  background: #FFF9F5;
  border-color: #FD7E91;
}
.calc-b__slider-opt.is-active .calc-b__slider-dot::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #FD7E91;          /* розовое ядро внутри розового кольца */
}
.calc-b__slider-opt:hover .calc-b__slider-dot { border-color: #EBBFA6; }
.calc-b__slider-opt.is-active:hover .calc-b__slider-dot { border-color: #FD7E91; }
/* Заблокированная точка (1 ряд при материале «Портьера + Тюль»):
   приглушаем подпись и осветляем обводку (фон прозрачный, как у всех точек). */
.calc-b__slider-opt.is-disabled { pointer-events: none; }
.calc-b__slider-opt.is-disabled .calc-b__slider-cap { color: #c9bfb9; }
.calc-b__slider-opt.is-disabled .calc-b__slider-dot {
  border-color: #ece7e3;
}

/* --- Иконка «?» у заголовка «Коэффициент сборки» + всплывающий тултип ---
   Якорь (.calc-b__hint-wrap) позиционирует тултип; «?» — кружок (Figma 28px). */
.calc-b__hint-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 8px;
  outline: none;
  cursor: help;
}
.calc-b__hint {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #EBBFA6;
  color: #463631;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: background .2s, color .2s;
}
.calc-b__hint-wrap:hover .calc-b__hint,
.calc-b__hint-wrap:focus-visible .calc-b__hint { background: #FD7E91; color: #fff; }

/* Тултип с примерами сборки (1:1,5 / 1:2 / 1:3) — крупный, как в карточках тарифов. */
.calc-b__tooltip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 6px);
  width: 460px;
  max-width: 92vw;
  background: #fff;
  border: 1px solid #EBBFA6;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(88, 70, 70, .18);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 30;
  text-align: center;
  pointer-events: none;
}
.calc-b__hint-wrap:hover .calc-b__tooltip,
.calc-b__hint-wrap:focus-visible .calc-b__tooltip,
.calc-b__hint-wrap.is-open .calc-b__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
/* Хвостик-стрелка вниз (к знаку «?»). */
.calc-b__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 1px 0 #EBBFA6);
}
.calc-b__tooltip-text {
  display: block;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
  color: #584646;
  margin-bottom: 14px;
}
.calc-b__tooltip-row { display: flex; justify-content: center; gap: 12px; }
.calc-b__tooltip-img { flex: 1 1 0; min-width: 0; }
.calc-b__tooltip-img img {
  width: 100%;
  max-width: 130px;
  height: auto;
  display: block;
  margin: 0 auto 8px;
}
.calc-b__tooltip-img span {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: #584646;
}

/* --- Аккордеон «Что такое коэффициент сборки ткани?» (под слайдером) --- */
.calc-b__accordion { margin-top: 16px; }
.calc-b__accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 24px;
  background: #FFF9F5;
  border: 1px dashed #EBBFA6;     /* пунктир из макета: dasharray 10 10 ≈ dashed */
  border-radius: 20px;
  color: #584646;
  font-size: 20px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .2s;
}
.calc-b__accordion-head:hover { background: #fff3ea; }
.calc-b__accordion-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #EBBFA6;
  transition: transform .25s;
}
.calc-b__accordion.is-open .calc-b__accordion-chevron { transform: rotate(180deg); }
.calc-b__accordion-body {
  padding: 14px 24px 2px;
  font-size: 16px;
  line-height: 150%;
  color: #8a7b76;
  /* Плавное раскрытие: max-height анимируется из JS (calculator.js).
     overflow:hidden прячет контент при схлопывании в 0. */
  overflow: hidden;
  transition: max-height .35s ease;
}
.calc-b__accordion-body p { margin: 0; }
/* Блок-подсказка коэффициента сборки взят с главной (.mainpage__price__koff__*),
   там gap 40px между карточками. В узкой колонке калькулятора это слишком много —
   уменьшаем промежуток только внутри гармошки калькулятора. */
.calc-b__accordion-body .mainpage__price__koff__block { gap: 16px; }
/* Лента карточек коэффициента горизонтально скроллится. В шаблоне у неё
   justify-content:center (Bootstrap), из-за чего на узком экране первая и последняя
   карточки обрезаются с обоих краёв. Выравниваем к началу — первая карточка от края,
   листается вправо. justify-content начало + небольшой боковой padding под скролл. */
.calc-b__accordion-body .mainpage__price__koff__block {
  justify-content: flex-start !important;
  padding-left: 4px;
  padding-right: 4px;
}

/* --- Правая колонка --- */
.calc-b__side { display: flex; flex-direction: column; }
.calc-b__card--preview { margin-bottom: 20px; } /* gap между карточками = 20 (Figma) */
/* Превью — вертикальное (Figma: карточка 621×750, внутри превью ~573×560).
   Штора вписана без искажения (SVG preserveAspectRatio=meet). */
.calc-b__preview-frame {
  /* Плавная высота превью: 300px (мобильный) → 560px (десктоп ≥1120px).
     50vw держит 560px на десктопе и плавно сжимает к 300px на узких. */
  height: clamp(300px, 50vw, 560px);
  border-radius: 16px;
  background: #f6efe8;
  overflow: hidden;
}
.calc-b__preview-frame svg { display: block; width: 100%; height: 100%; }

/* Белые карточки правой колонки. Figma: padding 24, radius 20, gap 20. */
.calc-b__card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(120, 80, 50, .06);
  padding: 24px;
}
.calc-b__card.calc-b__card--price{
  padding-bottom: 0px;
}

.calc-b__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; margin-top: 16px; }
.calc-b__chip {
  /* Figma: беж-02 rgb(235,191,166), padding 6/16, radius 20px */
  font-size: 20px;
  font-weight: 600;
  color: #584646;
  background: rgb(235, 191, 166);
  border: 0;
  border-radius: 20px;
  padding: 6px 16px;
  line-height: 140%;
}

/* Построчная цена */
.calc-b__price { }
.calc-b__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #F2F2F2;     /* Figma: grey 01 */
}
.calc-b__row-name { font-size: 20px; font-weight: 600; color: #484848; }
.calc-b__row-sub { display: block; font-size: 16px; font-weight: 400; color: #6F6F6F; margin-top: 2px; }
.calc-b__row-val { font-size: 20px; font-weight: 500; color: #484848; white-space: nowrap; }
.calc-b__row--total { border-bottom: 0; }
/* Итого: подпись 20/600, сумма крупная 28/500 (Figma H3). */
.calc-b__row--total .calc-b__row-name { font-size: 20px; font-weight: 600; }
.calc-b__row--total .calc-b__row-val { font-size: 28px; font-weight: 500; }

.calc-b__order {
  width: 100%;
  margin-top: 18px;
  border: 0;
  cursor: pointer;
  padding: 24px 40px;                   /* Figma: padding 24/40 */
  border-radius: 10px;                  /* Figma: radius 10 */
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: #584646;
  transition: background .2s;
}
.calc-b__order:hover { background: #463631; }
.calc-b__disclaimer { margin-top: 14px; font-size: 16px; color: #584646; text-align: center; }

/* ============================================================================
   Адаптив калькулятора — три уровня по Bootstrap-границам темы:
     ДЕСКТОП   > 991.98px — базовые правила выше, две колонки.
     ПЛАНШЕТ  ≤ 991.98px — одна колонка, элементы КРУПНЫЕ как десктоп.
     МОБИЛЬНЫЙ ≤ 767.98px — компактный режим (один столбец, мельче).
   Плавность между уровнями — через clamp() в базовых правилах (preview-frame,
   swatches-strip, .calc-b padding, step-title/sub). Раскладка (число колонок)
   переключается дискретно на границах. «Ручной респонсив» = подкрутить clamp/медиа.
   ============================================================================ */

/* --- ПЛАНШЕТ: ≤991.98px — одна колонка, крупные элементы (эталон владельца) --- */
@media (max-width: 991.98px) {
  /* Колонки складываются в одну: сначала настройки (тариф/карниз/материал/
     размеры), затем превью шторы и цена. Материалы и поля остаются в 2 столбца,
     превью крупное — всё как на десктопе, только в один поток. */
  .calc-b__grid { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 60px); }

  /* На планшете и мобильном убираем степперы (± стрелки) у полей размеров —
     поле ввода растягивается на всю ширину столбца (правило каскадирует и на
     ≤767.98px). Убираем gap, чтобы не осталось пустого места справа от поля.
     Снимаем max-width:460px у .calc-b__measures — иначе поля не доходят до
     правого края столбца и справа остаётся пустота. */
  .calc-b__spin { display: none; }
  .calc-b__field-row { gap: 0; }
  .calc-b__measures { max-width: none; }
  /* Шаг 3 (параметры карниза): ширина и блок «Рядов» — в один столбец.
     Блок «Рядов» остаётся 160px (как на десктопе), подпись по центру. */
  .calc-b__params { grid-template-columns: 1fr; gap: 24px; max-width: none; }
  .calc-b__slider--k { max-width: none; }
}

/* --- МОБИЛЬНЫЙ: ≤767.98px — компактный режим --- */
@media (max-width: 767.98px) {
  .calculator { padding: 40px 0; }
  .calc-b__seg { display: flex; width: 100%; }
  .calc-b__seg-btn { flex: 1 1 0; min-width: 0; }
  /* Три таба тарифа (Комфорт/Престиж/Люкс) не влезали в строку и «Люкс»
     обрезался — уменьшаем текст и боковые отступы, чтобы делились поровну. */
  .calc-b__seg-btn span { text-align: center; padding: 9px 4px; font-size: 14px; }
  .calc-b__choices--2 { grid-template-columns: 1fr; }
  /* Классический калькулятор: десктопное правило .calculator--class .calc_box_m.calc-b__choices--2
     (1fr 1fr) имеет более высокую специфичность и перебивало бы строку выше даже в media —
     поэтому переопределяем с той же специфичностью в одну колонку, иначе карточки вылезают за экран. */
  .calculator--class .calc_box_m.calc-b__choices--2 { grid-template-columns: 1fr; }
  .calculator--class .calc_box_m.calc-b__choices--2 .calc-b__choice:last-child { grid-column: auto; }
  /* Карточки материала (шаг 3): картинка слева 98×82, текст справа — без изменений. */
  .calc-b__choices--2 .calc-b__choice-thumb { width: 98px; height: 82px; }
  .calc-b__choice-name { font-size: 16px; }
  .calc-b__choice-body .calc-b__choice-desc{
    font-size: 14px;
  }
  .calc-b__step-title{
    font-size: 16px;
  }

  /* Карточка КАРНИЗА (шаг 2): вертикальная — картинка СВЕРХУ во всю ширину,
     текст ПОД ней (как на мобильном эталоне). */
  .calc-b__choices--1 .calc-b__choice {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 12px;
  }
  .calc-b__choices--1 .calc-b__choice-thumb {
    width: 100%;
    height: 140px;
  }
  .calc-b__choices--1 .calc-b__choice-body { height: auto; width: 100%; }

  /* Размеры: auto-fit в базовом правиле сам решает число колонок (два в ряд
     или один столбец на узком). max-width снят выше в планшетном блоке (≤991.98px),
     каскадно действует и здесь. */
  /* Шаг размеров на десктопе имеет фикс-высоту 248px (поля в 2 колонки).
     На мобильном поля идут в один столбец и выше 248px — фикс-высота
     обрезала шаг, и следующий блок (превью) наезжал сверху. Снимаем.
     Специфичность как у десктопного .calculator--rim .calc-b__step--last (строка 615),
     иначе тот перебивает этот сброс даже внутри media и высота остаётся 248px. */
  .calc-b__step--last,
  .calculator--rim .calc-b__step--last { height: auto; }
  /* Плашка-примечание на ленте тарифа: крупный текст не помещался и вылезал
     за пределы ленты. Уменьшаем шрифт и отступы на мобильном. */
  .calc-b__note { padding: 12px; }
  .calc-b__note .ramka { padding: 12px 10px; }
  .calc-b__note b { font-size: 16px; }
  .calc-b__note span { font-size: 14px; }
  .calc-b__row--total .calc-b__row-name,
  .calc-b__row--total .calc-b__row-val { font-size: 16px; }
  .calc-b__row-val.calc_box_sum.js-val-total{font-size: 24px;}

  /* Слайдеры (рядность/коэффициент) компактнее на мобильном.
     Боковой padding не возвращаем — крайние точки прижаты к краям, как на десктопе. */
  .calc-b__slider--k { max-width: none; }
  .calc-b__slider-cap { font-size: 15px; }
  /* Тултип «?» на узком экране: отрываем от иконки и центрируем по экрану,
     ширина = вьюпорт минус отступы по краям — так он гарантированно не вылезает. */
  .calc-b__tooltip {
    position: fixed;
    top: 50%;
    left: 50%;
    bottom: auto;
    width: calc(100vw - 32px);
    max-width: 360px;
    padding: 16px;
    transform: translate(-50%, calc(-50% + 6px));
  }
  .calc-b__hint-wrap:hover .calc-b__tooltip,
  .calc-b__hint-wrap:focus-visible .calc-b__tooltip,
  .calc-b__hint-wrap.is-open .calc-b__tooltip {
    transform: translate(-50%, -50%);
  }
  /* Хвостик-стрелка указывал бы мимо иконки при fixed-позиции — убираем. */
  .calc-b__tooltip::after { display: none; }
  .calc-b__tooltip-text { font-size: 14px; }
  .calc-b__tooltip-img img { max-width: 90px; }
  /* Аккордеон коэффициента — компактнее на мобильном. */
  .calc-b__accordion-head { font-size: 15px; padding: 12px 14px; }
  .calc-b__accordion-chevron { width: 32px; height: 32px; }
  .calc-b__accordion-body { font-size: 14px; padding: 12px 14px 2px; }

  /* Компактные отступы (высоты превью/ленты и шрифты заголовков тянет clamp
     в базовых правилах — здесь только то, что clamp не покрывает). */
  .calc-b__step-title { margin-bottom: 10px; }
  .calc-b__step-sub { margin: -4px 0 12px; }
  .calc-b__body { padding-bottom: 24px; }
  .calc-b__card { padding: 16px; }
  .calc-b__choice { padding: 14px; gap: 14px; }

  /* Компактные шрифты прайса/чипов на мобильном (раньше эти правила стояли ВНЕ
     медиазапроса и перебивали десктопные размеры из макета — перенесены сюда). */
  .calc-b__field-label { font-size: 20px; }
  .calc-b__input, .calc-b__chip { font-size: 14px; }
  .calc-b__row-name, .calc-b__row-val { font-size: 16px; }
  .calc-b__row-sub { font-size: 14px; }
  .calc-b__row { align-items: center; }
  .calc-b__order { font-size: 16px; }
  .calc-b__disclaimer { font-size: 14px; }
}

/* ============================================================
   Прайс-таблицы «Стоимость пошива …» (template-parts/sections/price-tables.php).
   Перенос со старого сайта (.price_box), оформлено в стиль сайта:
   палитра #FFF9F5 / #EBBFA6 / #584646, Montserrat. Masonry-сетка карточек.
   ============================================================ */
.price-tables__grid {
  /* Карточки разной высоты аккуратно укладываются в 2 колонки (columns,
     а не grid — чтобы не было больших пустот под короткими таблицами). */
  column-count: 2;
  column-gap: 30px;
}
/* Вариант секции для CPT-прайсов (price_list): одна колонка во всю ширину,
   ограниченная по читабельности; картинка-строка компактная, слева под
   наименованием группы. Старые прайс-таблицы штор (без --single) не затрагивает. */
.price-tables--single .price-tables__grid {
  column-count: 1;
}
/* Колонка фото (первая) — крупная картинка. При rowspan (одно фото на
   несколько строк) прижата к верху, чтобы эскиз шёл сверху группы. */
.price-tables--single .price-tables__photo {
  width: 460px;
  vertical-align: top;
  text-align: center;
}
.price-tables--single .price-tables__photo img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  border-radius: 6px;
}
/* Заголовок прайса целиком тёмным (по умолчанию «Стоимость пошива» бледно-розовый). */
.price-tables--single .price-tables__title span {
  color: #584646;
}
/* Ширины колонок для 4-колоночной таблицы (фото | наименование | ед.изм | цена).
   Фото фиксировано (220px выше), остальное — проценты от остатка. */
/* Все ячейки строки — по верху (важно для строк под объединённым rowspan-фото). */
.price-tables--single .price-tables__table td {
  vertical-align: top;
}
.price-tables--single .price-tables__name {
  width: auto;
}
.price-tables--single .price-tables__unit {
  width: 130px;
}
.price-tables--single .price-tables__val {
  width: 150px;
}
.price-tables__item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 30px;
}
/* Заголовок блока — в стиль секционного «Цены на пошив штор» (.mainpage__tabs__title): 40px. */
.price-tables__title {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  color: #584646;
  margin: 0 0 24px;
}
.price-tables__title span {
  color: #584646;
}
.price-tables__card {
  background: #FFF9F5;
  border: 1px solid #e8e2dc;
  border-radius: 16px;
  overflow: hidden;
}
.price-tables__hero img,
.price-tables__rowimg img {
  display: block;
  width: 100%;
  height: auto;
}
/* Вид как у контентных таблиц (.page-block__text table): тёмная шапка, вертикальные
   разделители колонок, зебра строк, padding 16/20, граница #e8e2dc. */
.price-tables__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.price-tables__table th,
.price-tables__table td {
  padding: 16px 20px;
  font-size: 20px;
  color: #584646;
  vertical-align: top;
  border-bottom: 1px solid #e8e2dc;
  border-right: 1px solid #e8e2dc;
}
/* Внешние края — без двойных границ (рамка уже на .price-tables__card). */
.price-tables__table th:last-child,
.price-tables__table td:last-child {
  border-right: 0;
}
.price-tables__table tr:last-child th,
.price-tables__table tr:last-child td {
  border-bottom: 0;
}
/* Шапка колонок: Наименование | Ед. изм. | Цена. */
.price-tables__cols th {
  color: #fff;
  font-weight: 600;
  text-align: left;
  background: #6b5b4f;
  border-bottom-color: #6b5b4f;
  border-right-color: #7a6a5d;
}
.price-tables__cols th:last-child {
  border-right: 0;
}
.price-tables__cols .price-tables__unit,
.price-tables__cols .price-tables__val {
  text-align: center;
}
/* Зебра — только обычные строки цен (не рубрики/примечания/картинки). */
.price-tables__table tbody tr:not(.price-tables__head):not(.price-tables__noterow):nth-of-type(even) td {
  background: #faf7f4;
}
/* Рубрика-заголовок внутри таблицы — акцентная плашка во всю ширину. */
.price-tables__head td {
  background: #6b5b4f;
  color: #fff;
  font-weight: 600;
  border-right: 0;
}
/* Колонки: наименование | ед. изм. | цена. */
.price-tables__name {
  width: 60%;
}
.price-tables__unit {
  width: 18%;
  text-align: center;
  white-space: nowrap;
  color: #8a7b76;
}
.price-tables__val {
  width: 22%;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}
/* Картинка-строка во всю ширину — без боковых паддингов. */
.price-tables__rowimg {
  padding: 0 !important;
}
/* Примечание (коэф. 1,5 и т.п.) — выделенная плашка под таблицей,
   каждое примечание отдельной строкой с разделителем. */
.price-tables__noterow td {
  padding: 11px 20px;
  font-size: 16px;
  line-height: 1.5;
  font-style: italic;
  color: #7a6a64;
  background: #f6ece3;
  border-right: 0;
  border-bottom: 0;
  border-top: 1px solid #ecdccf;
}
.price-tables__link {
  padding: 14px 18px;
  font-size: 15px;
  color: #8a7b76;
  border-top: 1px solid #f0e3d9;
}
.price-tables__link a {
  color: #584646;
  font-weight: 600;
  text-decoration: underline;
}
.price-tables__link a:hover {
  color: #EBBFA6;
}

@media (max-width: 991px) {
  .price-tables__title {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  /* На мобильном — одна колонка. */
  .price-tables__grid {
    column-count: 1;
  }
  .price-tables__title {
    font-size: 24px;
    margin-bottom: 14px;
  }
  .price-tables__table th,
  .price-tables__table td {
    padding: 12px 14px;
  }
}