/* =================
   БАЗОВЫЕ ПЕРЕМЕННЫЕ
   ================= */
:root {
  --brand:#E63946;
  --line:#E5E7EB;
  --bg-white:#fff;
  --text-dark:#111;
  --soft:#F9FAFB;        /* светлый фон для зебры строк */
  --muted:#6b7280;       /* приглушённый серый текст */
  --container-max:1174px;
  --t:.18s;              /* время анимаций (кнопки заказа и т.п.) */
}

/* =================
   БАЗОВАЯ ТИПОГРАФИКА
   ================= */
.product-page {
  background:#fff;
  color:var(--text-dark);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  margin:0;
  padding:0;
}

/* единый контейнер страницы */
.pv-container{
  max-width:var(--container-max);
  margin:0 auto;
  /* меньше внутренний паддинг, чтобы всё сдвинулось левее,
     как на эталоне */
  padding:0 24px;
  box-sizing:border-box;
}

/* =================
   HERO
   ================= */

.p-hero{
  /* красный фон + диагональная штриховка */
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.09) 0,
      rgba(255,255,255,.09) 1px,
      transparent 1px,
      transparent 18px
    ),
    var(--brand);

  color:#fff;
  /* уменьшаем высоту блока: меньше паддинги сверху/снизу */
  padding:16px 24px 24px;
  margin:0 0 24px;
  box-sizing:border-box;
  border:0;
}

/* сетка hero — фото слева, текст справа */
.p-hero__grid{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  column-gap:24px;
  row-gap:0;
  box-sizing:border-box;
}

/* левая карточка с фото кабеля */
.p-photo{
  background:#fff;
  border:1px solid rgba(255,255,255,.25);
  padding:4px;
  box-sizing:border-box;

  /* фиксированная ширина блока с фото,
     как на эталоне: он выглядит примерно ~220px */
  width:220px;
  flex:none;

  display:flex;
  align-items:flex-start;
  justify-content:center;
}

#p-photo{
  display:block;
  max-width:100%;
  height:auto;
  margin:0;
}

/* правая колонка hero */
.p-hero__text{
  flex:1 1 auto;
  min-width:0;
  box-sizing:border-box;
  color:#fff;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  line-height:1.5;
}

/* бейдж ГОСТ / МЭК */
.p-gost-badge{
  display:inline-block;
  background:#fff;
  color:var(--brand);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  padding:8px 12px;
  margin:0 0 16px 0;
  text-decoration:none;
  border:0;
  border-radius:0;
}
.p-gost-badge,
.p-gost-badge:link,
.p-gost-badge:visited,
.p-gost-badge:hover,
.p-gost-badge:active{
  text-decoration:none !important;
  color:var(--brand) !important;
}

/* НОМЕНКЛАТУРА (большой заголовок — должен выглядеть как в эталоне)
   ВАЖНО: здесь НЕ system-ui.
   Возвращаем тот шрифт и вес из образца: Poppins ~42px, белый */
.p-title{
  margin:0 0 16px 0;
  font-family:"Poppins",sans-serif;
  font-size:42px;
  line-height:1.2;
  font-weight:600;
  color:#fff;
  /* поднимаем этот блок ближе к бейджу/верху,
     за счёт маленьких паддингов hero это уже будет достаточно
     (отдельный отрицательный margin не нужен) */
}

/* описание под номенклатурой */
.p-desc{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  font-weight:400;
  color:#fff;
  white-space:normal;
}


/* всё текстовое внутри hero — белое,
   кроме плашки ГОСТ */
.p-hero,
.p-hero *{
  color:#fff;
}
.p-hero .p-gost-badge,
.p-hero .p-gost-badge *{
  color:var(--brand) !important;
}

/* =================
   КАРТОЧКИ (Область применения / Конструкция / ...)
   ================= */

.p-specs{
  /* как на эталоне: три карточки в ряд (3 колонки),
     потом следующие три и т.д. */
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px 16px;
  margin:0 0 16px;
  box-sizing:border-box;
}

/* каждая карточка */
.p-card{
  background:#fff;
  border:1px solid var(--line);
  box-sizing:border-box;
  padding:16px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  color:var(--text-dark);
  line-height:1.5;
}

/* заголовок карточки */
.p-card h2{
  margin:0 0 16px 0;
  font-size:22px;
  line-height:1.3;
  font-weight:600;
  color:var(--text-dark);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}

/* обычный текст в карточке */
.p-card__body{
  margin:0;
  padding:0;
  font-size:16px;
  line-height:1.5;
  font-weight:400;
  color:var(--text-dark);
  white-space:normal;
}

/* список характеристик внутри карточек */
.p-card__list{
  margin:0;
  padding-left:20px; /* нормальная точка маркеров */
  list-style:disc;
  font-size:16px;
  line-height:1.5;
  font-weight:400;
  color:var(--text-dark);
  display:block;
  box-sizing:border-box;
}
.p-card__list li{
  margin:0 0 8px 0;
  padding:0;
}
.p-card__list b{
  font-weight:700;
  color:var(--text-dark);
}


/* =================
   ТАБЛИЦА НОМЕНКЛАТУР
   ================= */

.p-table{
  margin:0 0 48px;
}

.p-table .table-wrap{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 6px 20px rgba(16,24,40,.06);
  overflow-x:hidden;   /* убираем полосу прокрутки */
  box-sizing:border-box;
}


/* сама таблица */
.p-table table.grid{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;

  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  font-weight:400;
  color:var(--text-dark);
}

/* зебра на нечётных строках */
.p-table table.grid tbody tr:nth-child(odd) td,
.p-table table.grid tbody tr:nth-child(odd) th{
  background:var(--soft);
}


/* числовые колонки */
.p-table table.grid .num{
  font-variant-numeric:tabular-nums;
  text-align:left;
}

/* колонка "Заказ" */
.p-table table.grid td.order{
  white-space:nowrap;
}

/* группа ввода количества + кнопка */
.p-table table.grid .group{
  display:inline-flex;
  gap:8px;
  align-items:center;
}
.p-table table.grid .group input{
  height:30px;
  width:96px;
  border:1px solid var(--line);
  padding:0 10px;
  font:600 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  background:#fff;
}
.p-table table.grid .group input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(230,57,70,.12);
}
.p-table table.grid .group .btn{
  height:30px;
  padding:0 14px;
  border:0;
  background:var(--brand);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  transition:filter var(--t),transform var(--t),opacity var(--t);
}
.p-table table.grid .group .btn:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}
.p-table table.grid .group .btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* мобильная карточная раскладка */
@media (max-width:680px){
  .p-table table.grid.cards thead{display:none;}
  .p-table table.grid.cards tr{
    display:block;
    margin:12px 12px 16px;
    border:1px solid var(--line);
    box-shadow:0 3px 12px rgba(16,24,40,.06);
    background:#fff;
  }
  .p-table table.grid.cards td,
  .p-table table.grid.cards th{
    display:flex !important;
    gap:16px;
    align-items:flex-start;
    border-bottom:1px dashed var(--line);
    padding:12px 14px;
  }
  .p-table table.grid.cards tr>*:last-child{border-bottom:0;}
  .p-table table.grid.cards td::before,
  .p-table table.grid.cards th::before{
    content:attr(data-label);
    color:var(--muted);
    font-size:13px;
    min-width:46%;
  }
  .p-table table.grid.cards th[scope="row"]{
    font-weight:700;
    background:#FFF5F5;
  }
}

/* =================
   УБИРАЕМ ВЕРХНИЕ ОТСТУПЫ ТЕМЫ, ЧТОБЫ HERO ЛИП К ШАПКЕ
   ================= */

.entry-header,
.entry-title,
.page-header,
.ast-archive-description,
.ast-single-post-order,
.ast-page-builder-template .site-content > .ast-container > .entry-header{
  display:none !important;
}

.site-content,
.entry-content,
#primary,
.content-area,
.site-main,
.ast-container,
.ast-container > .entry-content{
  margin-top:0 !important;
  padding-top:0 !important;
  border-top:0 !important;
}


/* не даём теме насильно переопределить цвета хедера в hero */
.p-hero .p-title,
.p-hero .p-desc{
  color:#fff !important;
}

/* подстраховка: у плашки ГОСТ не должно быть подчёркивания никогда */
.p-gost-badge,
.p-gost-badge *{
  text-decoration:none !important;
}
/* ===== ШИРЕ КОНТЕЙНЕР НА СТРАНИЦЕ ТОВАРА ===== */
.product-page{
  /* новая целевая ширина */
  --container-max:1328px;   /* наш локальный контейнер */
  --container:1328px;       /* на случай, если разметка использует .container */
}

/* растягиваем контейнеры внутри product-page */
.product-page .pv-container,
.product-page .container{
  max-width:var(--container-max) !important;
  margin:0 auto;
  padding:0 16px;
  box-sizing:border-box;
}

/* чуть шире на очень больших экранах */
@media (min-width:1536px){
  .product-page{ --container-max:1408px; --container:1408px; }
}
/* ====== ОФОРМЛЕНИЕ ТАБЛИЦЫ КАК В product-view.css ====== */

/* Заголовок блока над таблицей ("Номенклатуры и параметры") */
/* Заголовок таблицы ("Номенклатуры и параметры") */
.p-table .table-cap{
  display:flex;
  align-items:center;              /* вертикально по центру */
  padding:10px 18px;               /* ниже, чем было 14px */
  border-bottom:1px solid var(--line);

  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  font-size:16px;
  line-height:1.4;
  font-weight:600;
  color:var(--text-dark);
}


/* Обёртка таблицы (карточка с рамкой и тенью) — оставляем,
   только убедимся что скролл скрыт */
.p-table .table-wrap{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 6px 20px rgba(16,24,40,.06);
  overflow-x:hidden;
  box-sizing:border-box;
}

/* Сама таблица */
.p-table table.grid{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  color:var(--text-dark);
}

/* Базовые ячейки (и th, и td) */
.p-table table.grid th,
.p-table table.grid td{
  text-align:left;
  vertical-align:middle;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:#fff;
  font-weight:400;
  line-height:1.45;
  white-space:normal;
  word-break:break-word;
}

/* Зебра строк для tbody */
.p-table table.grid tbody tr:nth-child(odd) td,
.p-table table.grid tbody tr:nth-child(odd) th{
  background:var(--soft);
}

/* Шапка колонок */
.p-table table.grid thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#fff;
  font-weight:600;            /* как в product-view.css */
  line-height:1.2;
  color:var(--text-dark);
  white-space:normal;         /* разрешаем вторую строку */
  word-break:break-word;
  /* никаких max-height / overflow:hidden тут НЕ ДОЛЖНО быть */
}
/* Первая колонка в строках tbody — делаем полужирной, как в образце */
.p-table table.grid tbody td:first-child{
  font-weight:600;
  color:var(--text-dark);
}
/***** ФИНАЛЬНЫЕ ДОПРАВКИ ПОД ОБРАЗЕЦ *****/

/* 1. Отступ между карточками и таблицей делаем меньше */
.p-specs{
  margin:0 0 16px; /* было 24px */
}

/* 2. Шапка таблицы "Номенклатуры и параметры":
      ниже по высоте и текст по центру по вертикали */
.p-table .table-cap{
  display:flex;
  align-items:center;
  padding:10px 18px; /* было толще */
  border-bottom:1px solid var(--line);

  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  font-size:16px;
  line-height:1.4;
  font-weight:600;
  color:var(--text-dark);
}

/* 3. Таблица в целом делаем плотнее
      (меньше шрифт и паддинги в ячейках => влезает по ширине, ближе к образцу) */
.p-table table.grid{
  font-size:14px;      /* было 15px */
  line-height:1.4;     /* было 1.5 */
  table-layout:fixed;  /* оставляем фиксированную раскладку */
  width:100%;
}

/* базовые ячейки (и th, и td) */
.p-table table.grid th,
.p-table table.grid td{
  padding:10px 10px; /* было 12px 14px */
  line-height:1.4;
}

/* шапка колонок (thead) остаётся липкой */
.p-table table.grid thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#fff;
  font-weight:600;
  color:var(--text-dark);
  white-space:normal;
  word-break:break-word;
}

/* первая колонка (номенклатура) в tbody должна быть жирнее */
.p-table table.grid tbody td:first-child{
  font-weight:600;
  color:var(--text-dark);
}

/* 4. Колонка "Заказ": ужимаем поле и кнопку,
      чтобы последний столбец не распирал всю таблицу */
.p-table table.grid .group{
  display:inline-flex;
  align-items:center;
  gap:6px; /* было 8px */
}

.p-table table.grid .group input{
  height:30px;
  width:70px; /* было шире */
  border:1px solid var(--line);
  padding:0 8px;
  font:600 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  background:#fff;
}

.p-table table.grid .group .btn{
  height:30px;
  padding:0 12px; /* было 14px */
  border:0;
  background:var(--brand);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  transition:filter var(--t),transform var(--t),opacity var(--t);
}

/* 5. Обёртка таблицы — не даём горизонтальную прокрутку,
      и не даём таблице "прорезать" рамку справа */
.p-table .table-wrap{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 6px 20px rgba(16,24,40,.06);
  overflow-x:hidden; /* было auto — из-за этого казалось, что она шире */
  box-sizing:border-box;
}

/* 6. САМЫЙ ВАЖНЫЙ МОМЕНТ:
      Переопределяем ширины колонок поверх inline <col style="width:...">
      через !important, чтобы таблица ужалась и влезла в контейнер.
      Итог: суммарно строго 100%, последняя колонка шире, и ничего не вылезает. */
.p-table table.grid col:nth-child(1){width:32% !important;} /* Номенклатура */
.p-table table.grid col:nth-child(2){width:16% !important;} /* Наружный диаметр */
.p-table table.grid col:nth-child(3){width:16% !important;} /* Масса, кг/км */
.p-table table.grid col:nth-child(4){width:14% !important;} /* Горючие вещества */
.p-table table.grid col:nth-child(5){width:22% !important;} /* Заказ (инпут+кнопка) */

/* Всё вместе: 34 + 14 + 14 + 16 + 22 = 100%,
   так что таблица физически не шире контейнера. */
/* делаем поле количества шире */
.p-table table.grid .group input{
  width:100px;            /* было 70px */
}
/* делаем строку "Номенклатуры и параметры" ниже по высоте */
.p-table .table-cap{
  display:flex;
  align-items:center;
  padding:6px 18px;        /* было 10px 18px */
  line-height:1.2;         /* было 1.4 */
  min-height:0;            /* на всякий случай, чтобы flex не раздувал */

  border-bottom:1px solid var(--line);

  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  font-size:16px;
  font-weight:600;
  color:var(--text-dark);
}
/* === ФИНАЛЬНАЯ НАСТРОЙКА ШРИФТОВ И ВЫСОТ === */

/* Заголовок блока таблицы ("Номенклатуры и параметры") */
.p-table .table-cap{
  display:flex;
  align-items:center;
  padding:6px 18px;              /* низкая плашка */
  line-height:1.2;
  min-height:0;
  border-bottom:1px solid var(--line);

  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  font-size:18px;                /* как ты сказал */
  font-weight:600;
  color:var(--text-dark);
}

/* Вся таблица: базовый размер шрифта */
.p-table table.grid{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  font-size:15px;                /* как ты сказал */
  line-height:1.4;
  width:100%;
  table-layout:fixed;
}

/* Ячейки заголовков колонок и ячейки данных */
.p-table table.grid th,
.p-table table.grid td{
  font-size:15px;                /* те же 15px и в thead, и в tbody */
  line-height:1.4;
  padding:10px 10px;
  text-align:left;
  vertical-align:middle;
  border-bottom:1px solid var(--line);
  background:#fff;
  word-break:break-word;
  white-space:normal;
  font-weight:400;               /* по умолчанию обычный вес */
  color:var(--text-dark);
}

/* Липкая шапка колонок */
.p-table table.grid thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#fff;
  font-weight:600;               /* заголовки колонок жирнее */
  color:var(--text-dark);
}

/* Первая колонка (номенклатура) в строках tbody — полужирная */
.p-table table.grid tbody td:first-child{
  font-weight:600;
  color:var(--text-dark);
}

/* Поле ввода количества шире (оставляем фикс ширины 100px) */
.p-table table.grid .group input{
  width:100px;
  height:30px;
  padding:0 8px;
  border:1px solid var(--line);
  font:600 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  background:#fff;
}

/* Кнопка "В корзину" остаётся плотной */
.p-table table.grid .group .btn{
  height:30px;
  padding:0 12px;
  border:0;
  background:var(--brand);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  transition:filter var(--t),transform var(--t),opacity var(--t);
}
/* визуал неактивной кнопки "В корзину" */
.p-table table.grid .group .btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:none;
  transform:none;
}
/* на всякий случай гасим любые верхние маргины у hero */
.p-hero{
  margin-top:0 !important;
}
/* прижимаем hero к верхней границе контента */
.pv-container{
  padding-top:0 !important;
}
/* убираем стандартную "шапку" темы над контентом на товарной странице */
#primary.content-area.primary{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* на всякий случай, если тема лезет через .site-main */
#primary.content-area.primary > .site-main{
  padding-top:0 !important;
  margin-top:0 !important;
}
/* Подтягиваем страницу товара вверх, не ломая тему */
.product-page .pv-container{
  /* тянем весь блок (hero + остальное) выше на 60px,
     чтобы убрать "воздушную прослойку" от темы */
  margin-top:-26px;

  /* важно: чтобы отрицательный margin не влиял на поток ниже */
  position: relative;
  z-index: 1;
}

/* На телефоне у темы обычно отступ сверху меньше.
   Чтобы не залезть прямо под шапку – уменьшаем сдвиг. */
@media (max-width: 768px){
  .product-page .pv-container{
    margin-top:-40px;
  }
}
/* Фиксируем блок с фото в hero под эталонные размеры */
.product-page .p-photo{
  width:200px;               /* как на старом сайте */
  height:238px;              /* как на старом сайте */
  padding:4px;               /* 4px белой окантовки */
  box-sizing:border-box;

  background:#fff;
  border:1px solid #fff;     /* чисто белая рамка, без полупрозрачного */

  flex:none;
  display:flex;
  align-items:flex-start;    /* чтобы картинка села от верхнего края */
  justify-content:center;
}

/* Само изображение внутри .p-photo */
.product-page #p-photo{
  width:190px;               /* целевое содержимое ~190×228 */
  height:228px;
  object-fit:contain;        /* не растягиваем кабель, просто вписываем */
  display:block;
  margin:0;
}
/* Внутренняя раскладка hero */
.product-page .p-hero__grid{
  /* отступ от левого и правого края hero до контента */
  padding-left:16px;
  padding-right:16px;

  /* расстояние между колонкой с фото и колонкой с текстом */
  column-gap:16px;

  /* на случай если браузер игнорит column-gap (flex) или gap (grid) —
     мы ставим обоим. Это не сломает */
  gap:0 16px;
}

/* убираем лишние внешние отступы у блока с фото,
   чтобы он сам не добавлял неожиданный зазор */
.product-page .p-photo{
  margin:0;
}
/* коррекция внутренних отступов hero:
   тянем контент на 16px левее, но оставляем зазор справа и gap */
.product-page .p-hero__grid{
  padding-left:0;        /* было 16px, теперь 0 */
  padding-right:16px;    /* оставляем как было */
  gap:0 16px;
  column-gap:16px;
}
/* доп. сдвиг контента hero влево примерно на 10px */
.product-page .p-hero__grid{
  margin-left:-8px;
  padding-right:16px;
  gap:0 16px;
  column-gap:16px;
}