/* ============================================================================
   Product card — layout ported from the source catalog template.

   Structure and metrics come from the imported catalog's own product-page
   stylesheet (the `template_*.css` bundle of the site the catalog came from).
   Only the rules that belong to the product card were taken; the rest of that
   bundle (Bootstrap 5 reset, `body`, `.container`, `.row`, `.btn-one`, the
   header/footer/menu rules) is deliberately NOT copied -- it would fight this
   site's own `style.css` and restyle the header, footer, menu and catalog grid.

   Colours are NOT the source site's. They are remapped onto the ЦМЗД palette
   through the custom properties below, so the card keeps the corporate colour
   scheme (dark blue + brand yellow + brand red) while the layout matches the
   source. Change a colour here and the whole card follows.

   Everything is scoped under `.product-detail` so nothing leaks into other
   pages. The component this styles is `src/components/ProductDetail.astro`,
   which is shared by the main domain and all regional pages.
   ========================================================================= */

:root {
  /* The source card used its own dark/amber/red/green set. Every one of those literals is
     remapped here onto the ЦМЗД palette (source values live in DEKA-DESIGN-PORT.md, not in
     this file, so the "no foreign colours" check can stay a plain string scan).

     Переменные объявлены на `:root`, а не на `.product-detail`: карточка товара
     (`ProductCard.astro`) используется и в сетке каталога, и в «Смотрите также», а они
     лежат ВНЕ `<section class="product-detail">`. Вне области видимости переменной
     объявление с `var(--pd-…)` молча отбрасывается: фон карточки оставался прозрачным,
     а кнопка «Рассчитать» — без фона. */
  --pd-dark: #2d3e50;
  --pd-accent: #fbd239;
  --pd-red: #d73240;
  --pd-green: #66bb6a;
  --pd-text: #6d6d6d;
  --pd-muted: #6b7075;
  --pd-line: #f3f3f3;
  --pd-soft: #f6f6f6;
}

/* ---------------------------------------------------------------- top section */
.product-detail-top-section {
  padding-bottom: 60px;
}

.product-detail .pd-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-detail .pd-img-wrap img {
  max-width: 100%;
}

/* Подписи «Внешняя сторона» / «Внутренняя сторона» под фото.
   Раньше здесь стояло утверждение, что такого класса в источнике нет и что это класс
   ЦМЗД (11px, uppercase). Это неверно: в источнике правило есть —
   `.ddp-txt` с центрированием, серым цветом и кеглем 14px, и перенос обязан
   повторять его метрики. Цвет — корпоративный серый ЦМЗД (#9b9fa3, custom.css). */
.product-detail .ddp-txt {
  text-align: center;
  font-size: 14px;
  text-transform: none;
}

/* ------------------------------------------------------------ promo banner */
.product-detail .ban-zam {
  width: 100%;
  background: var(--pd-dark);
  color: #fff;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  padding: 30px 30px;
  margin-top: 20px;
  box-sizing: border-box;
}

.product-detail .ban-zam::before {
  content: '';
  background: url(/bitrix/templates/doors/assets/img/ban-door-black.jpg) no-repeat;
  background-size: contain;
  width: 251px;
  height: 533px;
  position: absolute;
  right: -30px;
  bottom: calc(-50% - 20px);
  z-index: 1;
}

.product-detail .ban-zam::after {
  content: '';
  /* Персонаж ЦМЗД (голубоглазая блондинка, марка ЦМЗД на одежде). Файл
     сгенерирован из референса исходного шаблона — см. PIM/deka-character/. */
  background: url(/bitrix/templates/doors/assets/img/ban-woman-sm.webp) no-repeat;
  background-size: contain;
  width: 181px;
  height: 414px;
  position: absolute;
  right: -15px;
  top: 5px;
  z-index: 2;
}

.product-detail .ban-zam-content {
  position: relative;
  z-index: 3;
}

.product-detail .ban-zam-text {
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 0 30px rgb(0 0 0 / 80%);
}

.product-detail .ban-zam-text span {
  font-weight: 700;
}

.product-detail .ban-zam-dm-pls {
  font-size: 17px;
  font-weight: 600;
  color: var(--pd-red);
  margin-top: 5px;
}

.product-detail .ban-zam-btn {
  margin-top: 25px;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 10px;
  background-color: var(--pd-accent);
  color: #000;
  text-transform: uppercase;
  text-decoration: none;
  align-items: center;
  transition: all 0.2s ease-in-out;
  display: inline-block;
}

.product-detail .ban-zam-btn:hover {
  background-color: #fff;
  color: var(--pd-dark);
}

/* ============================================================================
   Персонаж ЦМЗД в попапе «Вызов мастера на замер»
   ----------------------------------------------------------------------------
   Исходный шаблон показывал того же персонажа, что и в баннере карточки,
   фоном ::after у формы (.form-contact) — попап «Оформить заказ» и «Заказать
   звонок». В cmzd попап один (#popup-form), поэтому правило одно.

   Позиция и размеры повторяют исходные (181x414, right:-15px, top:5px), но
   картинка своя. Персонаж уходит за правый край попапа — так задумано в
   исходной вёрстке, поэтому overflow: hidden обязателен.
   ========================================================================== */
#popup-form .popup-form-wrap {
  position: relative;
  overflow: hidden;
  padding-right: 150px;
}

#popup-form .popup-form-wrap::after {
  content: '';
  background: url(/bitrix/templates/doors/assets/img/ban-woman-sm.webp) no-repeat;
  background-size: contain;
  width: 181px;
  height: 414px;
  position: absolute;
  right: -60px;
  top: 5px;
  z-index: 1;
  pointer-events: none;
}

#popup-form .contact_from_box {
  position: relative;
  z-index: 2;
}

@media only screen and (max-width: 767px) {
  /* На узком экране персонаж перекрыл бы поля формы — убираем. */
  #popup-form .popup-form-wrap {
    padding-right: 0;
  }

  #popup-form .popup-form-wrap::after {
    display: none;
  }


}

/* ------------------------------------------------------------- price block */
.product-detail .detail-product-price-wrap {
  background: #fff;
  background-size: cover;
  color: #000;
  border-radius: 15px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 30px 30px;
  position: relative;
  z-index: 2;
  box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
  margin-bottom: 25px;
  box-sizing: border-box;
  /* The card is a 3-column flex row. Its children hold desktop intrinsic widths (the
     "в цену входит" list and the grey order panel); without these guards they refuse to
     shrink below their content and push the whole page wide -- measured as a 205px
     horizontal overflow at a 390px viewport by `check:card-visual`. */
  min-width: 0;
}

.product-detail .detail-product-price-pt,
.product-detail .detail-product-price-pt-wrap-nnm,
.product-detail .detail-product-price-pt-wrap,
.product-detail .detail-product-price-pds-txt,
.product-detail .detail-product-price-order-wrap {
  min-width: 0;
}

.product-detail .detail-product-price-pt {
  flex: 1 1 auto;
  min-width: 0;
}

.product-detail .detail-product-price-order-wrap {
  flex: 0 0 auto;
}

.product-detail .detail-product-price-pt-wrap-nnm {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.product-detail .detail-product-price-pt-wrap {
  display: flex;
  gap: 8px;
  flex-direction: column;
  border-bottom: 1px solid rgb(0 0 0 / 3%);
  padding-bottom: 2px;
}

.product-detail .detail-product-price {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.product-detail .detail-product-price .num {
  font-size: 28px;
}

.product-detail .price-title {
  font-size: 15px;
  color: var(--pd-text);
}

.product-detail .detail-old-price-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
}

.product-detail .detail-old-price {
  font-size: 15px;
  text-decoration: line-through;
  font-weight: 400;
  line-height: 1.2;
  color: var(--pd-muted);
}

.product-detail .detail-price-sale {
  background: var(--pd-green);
  color: #fff;
  line-height: 1.2;
  border-radius: 5px;
  padding: 3px 9px 4px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-detail .dd-dsh-block {
  font-size: 13px;
  white-space: nowrap;
  color: var(--pd-muted);
}

.product-detail .dd-dsh-block a {
  color: var(--pd-red);
  display: inline-block;
  border-bottom: 1px dashed;
  line-height: 1.4;
  margin-left: 3px;
}

.product-detail .dd-dsh-block a:hover {
  border-color: transparent;
}

.product-detail .dd-dsh-block .buy-btn-txt {
  font-weight: 600;
}

/* Здесь был осиротевший фрагмент (`background-color: #fff;` без селектора): браузер
   склеивал его со следующим правилом, селектор становился невалидным, и правило
   `.detail-product-price-pds-txt` отбрасывалось целиком — «В цену входит: …» оставалось
   без своих 13px/серого/отступов. Подсчёт скобок такого не видит (было 145/145),
   а `npm run check:css-live` показывает это как мёртвое правило с объявлением вместо
   селектора. */

.product-detail .detail-product-price-pds-txt {
  font-size: 13px;
  color: var(--pd-muted);
  font-weight: 400;
  padding: 10px 0;
  line-height: 1.6;
}

.product-detail .pds-title {
  font-size: 13px;
  margin-bottom: 3px;
}

.product-detail .pds-txt {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  color: #000;
}

.product-detail .pds-txt span {
  color: var(--pd-red);
  margin-right: 5px;
  font-size: 11px;
}

.product-detail .detail-product-price-order-wrap {
  padding: 20px 25px;
  border-radius: 20px;
  background: var(--pd-soft);
}

.product-detail .dp-order-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.product-detail .dp-order-text {
  font-size: 15px;
  line-height: 1.5;
}

.product-detail .dp-order-text .num {
  font-weight: 700;
}

.product-detail .dp-order-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------------------------------------------------- short spec list (price) */
.product-detail .pd-sm-table .row-txt {
  font-size: 15px;
  font-weight: 500;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 5px;
  line-height: 1.9;
}

.product-detail .pd-sm-table .row-txt::before {
  content: '';
  min-width: 18px;
  height: 2px;
  margin-right: 12px;
  background: var(--pd-red);
}

.product-detail .pd-sm-table .row-txt strong {
  font-weight: 500;
  color: #000;
  position: relative;
  display: inline-block;
  z-index: 2;
  padding-right: 2px;
}

.product-detail .pd-sm-table .row-txt span {
  color: var(--pd-text);
  font-weight: 400;
  position: relative;
  display: inline-block;
  z-index: 2;
  padding-left: 2px;
  white-space: nowrap;
}

.product-detail .wd-f.pd-sm-table .row-txt {
  justify-content: space-between;
}

.product-detail .wd-f.pd-sm-table .row-txt strong {
  white-space: nowrap;
}

.product-detail .wd-f.pd-sm-table .row-txt span {
  margin-left: auto;
}

.product-detail .wd-f.pd-sm-table .row-txt i {
  display: block;
  width: 100%;
  align-items: center;
  border-bottom: 1px dotted #d5d5d5;
  margin: 0 3px;
  padding-top: 11px;
}

/* ---------------------------------------------------------- finish swatches */
/* Metric gap found in audit: these rules were NOT ported in the first pass, and the
   markup now uses the source template's `.pd-otdelka-link`, which this site's CSS never
   sized. The swatch files are up to 1244x1004 (4932 of them are 450x450), so without an
   explicit size every swatch rendered at natural size -- a blown-out row, not a swatch
   strip. The source sized them in `.pd-otdelka-sl img`; scoped here under `.product-detail`,
   which also out-specifies this site's unrelated `.pd-otdelka-img-link img` rule. */
.product-detail .row-otdelka {
  margin-top: 40px;
}

.product-detail .pd-otdelka-sl img {
  /* The slider is Slick and it writes the slide width INLINE (`style="width: 33px"`), which no
     stylesheet rule can override. So a fixed 75x75 image inside a 56px slide is impossible to
     keep square -- it renders as a squeezed 56x75 box (aspect ratio 0.75, measured in a real
     browser by `check:card-visual`). Follow the slide width instead and derive the height
     from it, so every swatch stays square at any breakpoint and any slide count. */
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  box-sizing: border-box;
}

.product-detail .pd-otdelka-link {
  display: block;
  flex: 0 0 auto;
  height: auto;
  line-height: 0;
}

.product-detail .pd-otdelka-sl {
  margin: 0 -3px;
}

.product-detail .pd-otdelka-sl .slick-list {
  margin: 0 -3px;
}

.product-detail .pd-otdelka-sl .slick-slide {
  margin: 0 3px;
}

.product-detail .pd-otdelka-sl .slick-dots {
  padding-top: 20px;
}

.product-detail .pd-otdelka-name {
  margin-bottom: 8px;
}

.product-detail .pd-otdelka-col + .pd-otdelka-col {
  margin-top: 30px;
}

.product-detail .pd-sm-title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-detail .pd-sm-title {
  font-size: 18px;
  color: #000;
  font-weight: 600;
  line-height: 1.3;
}

.product-detail .btn-br {
  text-decoration: none;
  white-space: nowrap;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--pd-line);
  color: var(--pd-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s linear;
}

.product-detail .btn-br:hover {
  background: var(--pd-accent);
  color: #000;
}

/* --------------------------------------------------------------- locks */
.product-detail .pd-zamki-wrap {
  display: flex;
  align-items: center;
}

/* This site's own `custom.css` draws `.pd-zamki-img` as a white card with a brand-yellow
   bottom border and a 65px cap on the photo. The source template draws it as a plain
   120px photo in a light grey frame. The port is meant to follow the source look, so the
   block is restated here (later in the cascade) instead of silently inheriting the old one. */
.product-detail .pd-zamki-img {
  margin-right: 20px;
  text-align: center;
  min-width: 70px;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 0;
  height: auto;
  display: block;
}

.product-detail .pd-zamki-img a {
  display: inline-block;
  position: relative;
}

.product-detail .pd-zamki-img img {
  height: 120px;
  /* `responsive.css` (loaded AFTER this file) caps this photo via
     `.pd-zamki-img img { max-height: 60px }` under 1300px. Resetting `max-height` in the
     base rule -- not inside one media query -- is what actually neutralises it at every
     width; an earlier attempt put the reset in `max-width:1200px` and the 1200-1300px band
     still collapsed the photo to 60px (caught by `check:card-visual`). */
  max-height: none;
  width: auto;
  max-width: 100%;
  border-radius: 10px;
  border: 2px solid var(--pd-line);
  padding: 15px 15px;
  background: #fff;
}

/* The source put the zoom badge on a bare `span` inside the link. */
.product-detail .pd-zamki-img span,
.product-detail .pd-zamki-img .icon {
  color: var(--pd-red);
  position: absolute;
  bottom: 6px;
  right: 6px;
  line-height: 1;
  font-size: 15px;
}

.product-detail .pd-zamki-content .pd-sm-title {
  font-size: 15px;
}

.product-detail .pd-zamki-txt {
  width: 100%;
}

.product-detail .pd-zamki-txt-desc .list-desc {
  width: 100%;
  padding: 0;
  list-style: none;
  font-size: 15px;
  padding-top: 10px;
}

.product-detail .pd-zamki-txt-desc .list-desc li {
  position: relative;
  display: flex;
  justify-content: space-between;
  line-height: 1.4;
  align-items: flex-end;
  margin: 7px 0;
}

.product-detail .pd-zamki-txt-desc .list-desc li span {
  display: inline-block;
  white-space: nowrap;
}

/* --------------------------------------------------- spec block headings */
.product-detail .title-dd-sm {
  font-size: 20px;
  color: #000;
  font-weight: 600;
  margin-bottom: 15px;
}

.product-detail .title-dd-dub {
  margin: 0 0 10px;
}

.product-detail .pd-info-txt-block .title-dd-dub {
  margin: 0 0 10px;
}

.product-detail .pd-info-txt-teh-har {
  margin-bottom: 30px;
}


/* ---------------------------------------------------------------- tabs */
/* This site's `custom.css` also styles `.nav-tabs-cust` (`.nav-item a` padding, a
   `.nav-item:not(:first-child)::after` divider, and a brand-yellow 3px `.active a:before`
   underline). Those rules were written for the OLD two-tab markup and now collide with the
   ported three-tab bar: the yellow underline would sit on top of the dark active fill, and
   the stale divider would double up with the ported one. Neutralise them first. */
.dd-section-tabs .nav-tabs-cust .nav-item a::before {
  display: none;
}

.dd-section-tabs .nav-tabs-cust li.nav-item:not(:first-child)::after {
  display: none;
}

.dd-section-tabs {
  padding: 20px 0 0;
  overflow: hidden;
}

.dd-section-tabs .nav-tabs-cust {
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid #f3f3f3;
  position: relative;
  z-index: 2;
  margin-bottom: -40px;
  padding-left: 0;
  list-style: none;
}

.dd-section-tabs .nav-tabs-cust li {
  width: calc(100% / 3);
  text-align: center;
  line-height: 1;
  position: relative;
}

.dd-section-tabs .nav-tabs-cust li.nav-item:not(.active)::after {
  content: '';
  height: 60%;
  width: 1px;
  background: #f3f3f3;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.dd-section-tabs .nav-tabs-cust .nav-item:last-child ::after {
  display: none;
}

.dd-section-tabs .nav-tabs-cust li .nav-link {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  color: #2d3e50;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  padding: 18px 0;
  cursor: pointer;
  text-decoration: none;
}

.dd-section-tabs .nav-tabs-cust li.active .nav-link {
  background: #2d3e50;
  color: #fff;
}

.dd-section-tabs .nav-tabs-cust li .nav-link span {
  color: var(--pd-muted);
  font-weight: 400;
  font-size: 14px;
}

.dd-section-tabs .nav-tabs-cust li.active .nav-link span {
  color: #fff;
  opacity: 0.6;
}

.dd-section-tabs .tab-content {
  padding-top: 70px;
  padding-bottom: 80px;
  position: relative;
}

.dd-section-tabs .tab-content::before {
  content: '';
  position: absolute;
  width: 100vw;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  z-index: -1;
}

.dd-section-tabs .tab-content .services-table-block__section {
  background: transparent;
}

.dd-section-tabs .tab-pane {
  position: relative;
  z-index: 1;
  background: #fff;
}

.dd-section-tabs .tab-pane h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}

/* --------------------------------------------------------- spec tables */
.product-detail .table.table-cs td {
  font-size: 15px;
  vertical-align: middle;
}

.product-detail .services-table-block__table {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 3px 16px 0 rgb(0 0 0 / 3%);
  width: 100%;
  overflow-x: auto;
}

/* --------------------------------------------------------- карточка товара
   Разметка — `src/components/ProductCard.astro`. Одна и та же карточка в сетке каталога
   (/catalog/, /sale/, главная, регионы) и в блоке «Смотрите также» — как в источнике.
   Правила сознательно НЕ привязаны к секции: классы `.product-item*` встречаются только
   в этой карточке. */
.product-item {
  padding: 25px 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 16px 0 rgb(0 0 0 / 3%);
  margin-bottom: 40px;
}

.product-item__img {
  display: flex;
  justify-content: center;
  gap: 10px;
  /* Место под фотографию резервируется заранее: картинки грузятся `loading="lazy"`,
     и без резерва карточка сначала короткая, а после загрузки фото страница
     «прыгает» — замеренный CLS сетки каталога был 0.531 (у источника 0, но он грузит
     фото сразу). Высота 266px = `max-height` фото из источника, столько же даёт и одна
     фотография, и пара: при ширине карточки 306px картинка в любом случае упирается в
     этот максимум. */
  min-height: 266px;
}

.product-item__img img {
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 266px;
}

.one-item-door .product-item__img img {
  max-width: 100%;
}

.product-item__content {
  padding-top: 15px;
}

.product-item__title {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  line-height: 1.3;
  display: inline-block;
  text-decoration: none;
}

.product-item__title:hover {
  /* В источнике цвет ссылки при наведении — var(--thm-base), т.е. брендовый красный;
     по карте цветов это --pd-red. */
  color: var(--pd-red);
}

.product-item__block {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-item__price-val {
  font-size: 20px;
  color: #000;
  font-weight: 700;
}

.product-item__price del {
  font-size: 13px;
  margin-top: -10px;
  display: block;
  line-height: 1;
}

.product-item__price del + .product-item__price-val {
  font-size: 18px;
  color: var(--pd-red);
}

.product-item__btn {
  display: inline-block;
  width: max-content;
  border-radius: 6px;
  line-height: 1;
  white-space: nowrap;
  padding: 7px 15px;
  /* В источнике кнопка — var(--thm-base) (брендовый красный) с белым текстом. */
  background: var(--pd-red);
  color: #fff;
  font-size: 14px;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

.product-item__btn:hover {
  /* Источник на наведении оставляет те же цвета (правило нужно было там, чтобы
     перебить глобальный hover; эффекта наведения у кнопки нет). */
  background: var(--pd-red);
  color: #fff;
}

.product-item__description {
  padding: 3px 0 10px;
}

.product-item__description-item {
  font-size: 14px;
  color: #6d6d6d;
  line-height: 1.4;
  margin: 3px 0;
}

/* ------------------------------------------------------------ section titles */
.similar-doors-section .sec-title {
  position: relative;
  display: block;
  margin-top: -5px;
  padding-bottom: 49px;
  z-index: 2;
}

.similar-doors-section .sec-title .sub-title {
  position: relative;
  display: block;
  padding-bottom: 14px;
}

/* Раньше здесь висел незакрытый селектор-обрубок
   (`.similar-doors-section .sec-title .sub-title .title,` без тела): браузер приклеивал к нему
   следующий `@media (max-width: 1200px)`, селектор становился невалидным, и **весь блок
   медиазапроса отбрасывался** — на всех экранах ≤1200px не работали ни скрытие списка
   «В цену входит», ни мобильная раскладка вкладок. Подсчёт скобок этого не видит
   (был 145/145), а `npm run check:css-live` видит. */


/* ---------------------------------------------------------- media queries */

/* В источнике внутренние панели карточки цены раскладываются на 530px, а не на 1200px. */
@media screen and (max-width: 530px) {
  /* Прижатые к десктопной ширине панели не сжимаются сами — это и давало
     горизонтальную прокрутку на телефоне. */
  .product-detail .detail-product-price-order-wrap {
    width: 100%;
    box-sizing: border-box;
  }

  .product-detail .dp-order-content {
    flex-wrap: wrap;
  }
}
/* Брейкпоинты ниже — ИЗ ИСТОЧНИКА, а не «на глазок». Ранее весь мобильный набор был
   свален в один `@media (max-width: 1200px)`, тогда как в источнике это `≤767px`
   (и `≤530px` для внутренних панелей). Из-за этого карточка переходила в мобильную
   раскладку уже с 1200px: на ноутбуках и планшетах вкладки вставали в столбик, а цена —
   в колонку, чего в источнике нет. Проверка: `node scripts/visual-cta-vs-source.mjs`
   (карточка) и сравнение метрик на 768/900/1100/1200px. */
@media (max-width: 1200px) {
  .product-detail .detail-product-price-pds-txt {
    display: none;
  }
}

@media (max-width: 991px) {
  .product-detail .detail-product-price-wrap {
    margin-top: 20px;
  }
}

@media (max-width: 575px) {
  .product-detail .dp-order-content {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* Matches the source template's small-screen treatment of the "Все цвета" button. */
  .product-detail .pd-otdelka-name a.btn-br {
    letter-spacing: 0;
    padding: 5px 9px;
    font-size: 10px;
  }

  .product-detail .ban-zam {
    padding: 20px 20px;
  }

  .product-detail .ban-zam::before,
  .product-detail .ban-zam::after {
    opacity: 0.35;
  }

  .similar-doors-section .sec-title h2 {
    font-size: 26px;
    line-height: 34px;
  }
}

.similar-doors-section .sec-title .sub-title h6 {
  color: var(--pd-red);
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.similar-doors-section .sec-title h2 {
  color: #2d3e50;
  font-size: 40px;
  line-height: 50px;
  font-weight: 700;
  /* Наследование от глобального правила сайта `h2 { text-transform: uppercase;
     letter-spacing: 4px }` (style.css). В источнике заголовок обычным регистром,
     без трекинга; сайт сам так же сбрасывает капс у контентных заголовков. */
  text-transform: none;
  letter-spacing: normal;
}

.product-detail .pd-sm-table-wrap .link-bb {
  font-size: 15px;
  color: var(--pd-red);
  text-decoration: none;
  border-bottom: 1px dashed;
  transition: all 0.1s linear;
  margin-top: 10px;
  display: inline-block;
}

.product-detail .pd-sm-table-wrap .link-bb:hover {
  border-color: transparent;
}

.product-detail .pd-info-txt-block .title-dd-dub {
  margin: 0 0 10px;
}

/* A door with one face only is centred instead of being pinned to one side.
   `.one-item-door` is the same marker the catalog grid uses (ProductGrid.astro). */
.product-detail.one-item-door .pd-img {
  padding-right: 0;
  padding-left: 0;
}

.product-detail.one-item-door .pd-img-wrap img {
  max-width: 100%;
}

.product-detail-top-info-line {
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------------------
   Мобильная раскладка карточки. Брейкпоинт — как в источнике (≤767px).
   Блок стоит в КОНЦЕ файла намеренно: медиа-правила должны идти после базовых,
   иначе базовое `.dd-section-tabs .nav-tabs-cust li { width: 33.3333% }` перебивает
   `width: 100%` из медиа (одинаковая специфичность, решает порядок), и вкладки
   встают в столбик, оставаясь шириной в треть.
   --------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .product-detail .detail-product-price-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .product-detail .pd-info-txt-teh-har {
    margin-bottom: 30px;
  }

  .dd-section-tabs .nav-tabs-cust {
    flex-direction: column;
    margin-bottom: -70px;
  }

  .dd-section-tabs .nav-tabs-cust li {
    width: 100%;
    border-bottom: 1px solid #eee;
  }

  .dd-section-tabs .nav-tabs-cust li .nav-link {
    font-size: 14px;
    padding: 12px 0;
  }

  .dd-section-tabs .nav-tabs-cust li .nav-link span {
    display: none;
  }

  .dd-section-tabs .tab-content {
    padding-top: 85px;
  }

  .product-detail-top-section {
    padding-bottom: 30px;
  }

  .similar-doors-section {
    padding: 50px 0 0;
  }
}

/* Источник уменьшает подписи карточки в диапазоне 991–1200px (в источнике это правило
   в отдельном медиазапросе). */
@media only screen and (min-width: 991px) and (max-width: 1200px) {
  .product-item__description-item {
    font-size: 13px;
  }
}

/* Таблица характеристик на карточке товара: на телефоне её содержимое («Профильная
   труба 50х25 мм.» и прочие длинные значения) растягивало страницу до 573px при
   экране 390px — горизонтальная прокрутка всей страницы. Прокручиваем только таблицу. */
@media (max-width: 767px) {
  .pd-sm-table-wrap {
    overflow-x: auto;
  }

}

/* ------------------------- «Нашли дешевле? / Купить сейчас» ----------------- */
/* В карточке товара эти три элемента шли подряд без зазора и слипались в одну
   строку: «Нашли дешевле? Снизим цену Купить сейчас». Разводим их по-человечески
   и делаем «Купить сейчас» кнопкой — это призыв к действию, а не подпись. */
.dd-dsh-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 12px;
}

.dd-dsh-block > span {
  color: var(--pd-text);
  font-size: 15px;
}

.dd-dsh-block .dd-zakaz-dsh {
  color: var(--bl-dark) !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
}

.dd-dsh-block .dd-zakaz-dsh:hover {
  color: var(--bl-red);
}

.dd-dsh-block .buy-btn-txt {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border: 2px solid var(--bl-dark);
  border-radius: 10px;
  background: var(--bl-accent);
  color: #000 !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.dd-dsh-block .buy-btn-txt:hover {
  background: transparent !important;
  color: var(--bl-dark) !important;
}

@media (max-width: 575px) {
  .dd-dsh-block {
    gap: 8px 12px;
  }

  .dd-dsh-block .buy-btn-txt {
    padding: 9px 18px;
    font-size: 14px;
  }
}

/* ------------------- характеристики двери: значения не переносились --------- */
/* У значений стоял `white-space: nowrap`, ограничения ширины не было — длинные
   подписи («нет (доп. опция — плита минваты или пенопласт)») вылезали вправо на
   145–158px и накладывались на колонку с замками. Разрешаем перенос и даём
   значению сжиматься внутри строки. */
.pd-sm-table-wrap .row-txt {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pd-sm-table-wrap .row-txt span {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: right;
  line-height: 1.45;
}

.pd-sm-table-wrap .row-txt i {
  flex: 1 1 auto;
  min-width: 12px;
}

/* На узких экранах подпись и значение ставим в столбик — так читается лучше,
   чем сжатые в строку. */
@media (max-width: 991px) {
  .pd-sm-table-wrap .row-txt {
    flex-wrap: wrap;
  }

  .pd-sm-table-wrap .row-txt i {
    display: none;
  }

  .pd-sm-table-wrap .row-txt span {
    flex-basis: 100%;
    text-align: left;
  }
}

/* ------------------- блоки отделки: одинаковая высота ---------------------- */
/* Две колонки («Цвета внешней отделки» и «Цвета внутренней») содержат разное число
   образцов, поэтому блоки выходили разной высоты — в полной вёрстке смотрелось
   неровно. Растягиваем обёртки на всю высоту ряда, слайдер прижимаем к низу. */
.row-otdelka {
  display: flex;
  align-items: stretch;
}

.row-otdelka .pd-otdelka-col {
  display: flex;
}

.row-otdelka .pd-otdelka-wrap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  padding-bottom: 8px;
  border-bottom: 1px solid #ececec;
}

.row-otdelka .pd-otdelka-sl {
  margin-top: auto;
}

.row-otdelka .pd-otdelka-sl .slick-list {
  height: auto;
}

@media (max-width: 575px) {
  .row-otdelka {
    flex-direction: column;
  }
}