/* ===================== ELEKSOL — PRODUCT VIEW (clean) ===================== */
/* Скоп: только страницы товара (JS добавляет body.pv-page) */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap");

:root{
  --brand:#E63946;
  --text:#111; --muted:#6b7280;
  --line:#E5E7EB; --soft:#F9FAFB;
  --page-width:1142px;            /* фактическая ширина контента */
  --hero-pad:24px;                 /* внутренний отступ у HERO слева/справа */
  --t:.18s;
}

/* ---------- базовые сбросы внутри страницы товара ---------- */
.pv-page{color:var(--text);background:#fff}
.pv-page a{color:inherit;text-decoration:none}
.pv-page .container{max-width:var(--page-width);margin:0 auto;padding:0;box-sizing:border-box}
.pv-page .entry-title,.pv-page .page-title,.pv-page .entry-header,.pv-page .wp-block-post-title{display:none!important}
.pv-page .site,.pv-page .site-main,.pv-page .site-content,.pv-page .content-area,
.pv-page #page,.pv-page #primary,.pv-page #content,.pv-page #main,.pv-page .entry-content{
  padding:0!important;margin:0!important;border:0!important
}
html,body{overflow-x:clip}

/* ================================ HERO ==================================== */
.pv-page .p-hero{padding:0;background:transparent}
.pv-page .p-hero > .container{
  /* фон и «рамки страницы» */
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.09) 0,rgba(255,255,255,.09) 1px,transparent 1px,transparent 18px),
    linear-gradient(var(--brand),var(--brand));
  color:#fff; border-radius:0;
  padding:18px var(--hero-pad) 56px var(--hero-pad);
}
.pv-page .p-hero__grid{
  display:grid; grid-template-columns:200px 1fr; gap:18px; align-items:start;
}

/* Фото в рамке */
.pv-page .p-photo{background:#fff;border:1px solid #ffffff40;padding:4px;display:flex;align-items:center;justify-content:center}
.pv-page .p-photo img{max-width:100%;height:auto;display:block}

/* ГОСТ-бейдж: 16px system-ui, жирно, по центру */
.pv-page .p-gost-badge{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;padding:0 16px;margin:0 0 22px;border-radius:0;
  background:#fff;color:var(--brand);text-transform:uppercase;line-height:1;
  font:800 16px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-synthesis-weight:none;
}

/* Марка (H1): Poppins 42px */
.pv-page .p-title{
  margin:0 0 20px;color:#fff!important;
  font-family:"Poppins",sans-serif;font-weight:600;font-size:42px;line-height:1.2;
  font-synthesis-weight:none;
}
.pv-page .p-desc{margin:0;opacity:.95;white-space:pre-line}

/* ================================ CARDS =================================== */
.pv-page .p-cards{padding:14px 0 8px}
.pv-page .p-card{
  background:#fff;border:1px solid var(--line);padding:14px;
  box-shadow:0 6px 20px rgba(16,24,40,.06)
}
.pv-page .p-card h3{margin:0 0 8px;font:800 22px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.pv-page .p-card__body{white-space:pre-line}
.pv-page .p-card__list{margin:0;padding-left:18px;display:grid;gap:6px}
.pv-page ul.dotlist{margin:0;padding-left:18px;display:grid;gap:6px}

/* кнопка-сворачивалка «Область применения» (если создаёт JS) */
.pv-page .usage-toggle{
  margin-top:10px;display:inline-flex;align-items:center;justify-content:center;
  height:30px;padding:0 12px;border:0;cursor:pointer;background:var(--brand);color:#fff;font-weight:800;
  transition:filter var(--t),transform var(--t),opacity var(--t)
}
.pv-page .usage-toggle:hover{filter:brightness(1.05);transform:translateY(-1px)}

/* ================================ TABLE =================================== */
.pv-page .p-table h2{margin:0 0 12px;font:600 18px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.pv-page .table-wrap{background:#fff;border:1px solid var(--line);box-shadow:0 6px 20px rgba(16,24,40,.06);overflow:auto}

.pv-page #variants-table.grid{
  width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text)
}
.pv-page #variants-table.grid th,
.pv-page #variants-table.grid td{padding:12px 14px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
.pv-page #variants-table.grid tbody tr:nth-child(odd) td{background:var(--soft)}
.pv-page #variants-table.grid thead th{position:sticky;top:0;z-index:2;background:#fff;font-weight:600;line-height:1.2}
.pv-page #variants-table.grid th:nth-child(1),.pv-page #variants-table.grid td:nth-child(1){width:32%}
.pv-page #variants-table.grid th:nth-child(2),.pv-page #variants-table.grid td:nth-child(2){width:16%}
.pv-page #variants-table.grid th:nth-child(3),.pv-page #variants-table.grid td:nth-child(3){width:16%}
.pv-page #variants-table.grid th:nth-child(4),.pv-page #variants-table.grid td:nth-child(4){width:14%}
.pv-page #variants-table.grid th:nth-child(5),.pv-page #variants-table.grid td:nth-child(5){width:22%}
.pv-page #variants-table.grid .num{font-variant-numeric:tabular-nums}
.pv-page #variants-table.grid td.order{white-space:nowrap}
.pv-page #variants-table.grid .group{display:inline-flex;gap:8px;align-items:center}
.pv-page #variants-table.grid .group .qty{
  height:30px;width:96px;border:1px solid var(--line);padding:0 10px;background:#fff;
  font:600 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif
}
.pv-page #variants-table.grid .group .qty:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(230,57,70,.12)}
.pv-page #variants-table.grid .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)
}
.pv-page #variants-table.grid .btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.pv-page #variants-table.grid .btn:disabled{opacity:.45;cursor:not-allowed}

/* моби-раскладка таблицы */
@media (max-width:680px){
  .pv-page #variants-table.grid thead{display:none}
  .pv-page #variants-table.grid tr{display:block;margin:12px 12px 16px;border:1px solid var(--line);box-shadow:0 3px 12px rgba(16,24,40,.06);background:#fff}
  .pv-page #variants-table.grid td{display:flex;gap:16px;align-items:flex-start;border-bottom:1px dashed var(--line)}
  .pv-page #variants-table.grid tr>*:last-child{border-bottom:0}
  .pv-page #variants-table.grid td:nth-child(1)::before{content:"Номенклатура";color:var(--muted);min-width:46%}
  .pv-page #variants-table.grid td:nth-child(2)::before{content:"Наружный диаметр, мм";color:var(--muted);min-width:46%}
  .pv-page #variants-table.grid td:nth-child(3)::before{content:"Расчётная масса, кг/км";color:var(--muted);min-width:46%}
  .pv-page #variants-table.grid td:nth-child(4)[data-col="combust"]::before{content:"Масса горючих веществ, кг/км";color:var(--muted);min-width:46%}
  .pv-page #variants-table.grid td.order::before{content:"Заказ";color:var(--muted);min-width:46%}
}

/* SEO-блок, если нужен */
.pv-page .ssr-seo-block.is-hidden{position:absolute!important;left:-99999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
/* ====== CARDS LAYOUT (2 cols) + USAGE full-width with collapse ====== */

/* Сетка карточек: 2 колонки на десктопе, 1 — на мобиле */
.pv-page .p-cards{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:16px;
  padding:14px 0 8px; /* как и было */
}

/* Обычные карточки занимают по 1/2 строки (6 из 12) */
.pv-page .p-cards .p-card{ grid-column:span 6; }

/* «Область применения» — во всю ширину */
.pv-page #card-usage.p-card{ grid-column:1 / -1; }

/* Визуальный стиль карточек (чистая версия) */
.pv-page .p-card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 6px 20px rgba(16,24,40,.06);
  padding:14px;
}
.pv-page .p-card h3{
  margin:0 0 8px;
  font:800 22px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---------- СВЕРТЫВАНИЕ «ОБЛАСТЬ ПРИМЕНЕНИЯ» ---------- */
/* Состояние по умолчанию: 3 строки + затухание снизу */
.pv-page #card-usage .p-card__body{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  position:relative;
  white-space:normal; /* чтобы переносились строки */
}
.pv-page #card-usage .p-card__body::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:42px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 70%);
  pointer-events:none;
}

/* Кнопка-стрелка (добавляется JS как <button class="usage-toggle">) */
.pv-page #card-usage .usage-toggle{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:10px;
  padding:0; border:0; background:transparent; cursor:pointer;
  color:var(--brand); font:700 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.pv-page #card-usage .usage-toggle::after{
  content:"▾"; display:inline-block; transform:translateY(1px) rotate(0deg);
  transition:transform var(--t);
}

/* Состояние «раскрыто»: убираем клип и градиент, поворачиваем стрелку */
.pv-page #card-usage.is-open .p-card__body,
.pv-page #card-usage[data-open="1"] .p-card__body{
  display:block; -webkit-line-clamp:unset; overflow:visible;
}
.pv-page #card-usage.is-open .p-card__body::after,
.pv-page #card-usage[data-open="1"] .p-card__body::after{ display:none; }
.pv-page #card-usage.is-open .usage-toggle::after,
.pv-page #card-usage[data-open="1"] .usage-toggle::after{ transform:rotate(180deg); }

/* Адаптив: одна колонка на узких */
@media (max-width: 860px){
  .pv-page .p-cards .p-card{ grid-column:1 / -1; }
}
/* === Typography: как на скринах === */
:root{
  --ff-head:"Poppins",sans-serif;
  --ff-body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* базовый текст страницы */
.pv-page{
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.6;
  color:#111;
}

/* заголовки карточек (Область применения, Конструкция и т.д.) */
.pv-page .p-card h3{
  margin:0 0 8px;
  font-family:var(--ff-head);
  font-weight:600;
  font-size:22px;
  line-height:1.25;
  color:#222;
}

/* тело карточек — 16px system-ui */
.pv-page .p-card__body,
.pv-page .p-card__list,
.pv-page #p-area{                 /* если скрипт вставляет <p id="p-area"> */
  font:16px/1.6 var(--ff-body);
  color:#111;
}

/* === «Номенклатуры и параметры» — как часть таблицы === */
/* переносим рамку/тень на общий контейнер секции */
.pv-page .p-table{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 6px 20px rgba(16,24,40,.06);
  padding:0;                      /* без внешних отступов внутри секции */
}

/* заголовок секции выглядит как строка таблицы */
.pv-page .p-table h2{
  margin:0;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  font:600 22px/1.2 var(--ff-head);
  color:#222;
}

/* сама таблица больше не рисует вторую рамку */
.pv-page .p-table .table-wrap{
  border:0;
  box-shadow:none;
  overflow:auto;
}

/* липкая шапка таблицы остаётся как была */
.pv-page #variants-table.grid thead th{
  position:sticky; top:0; z-index:2; background:#fff;
  font-weight:600; line-height:1.2;
}
/* === TABLE: 4 columns + header 'Заказ' === */
.pv-page #variants-table.grid th,
.pv-page #variants-table.grid td{padding:12px 14px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
/* ширины именно для 4 столбцов */
.pv-page #variants-table.grid th:nth-child(1), .pv-page #variants-table.grid td:nth-child(1){width:38%}
.pv-page #variants-table.grid th:nth-child(2), .pv-page #variants-table.grid td:nth-child(2){width:18%}
.pv-page #variants-table.grid th:nth-child(3), .pv-page #variants-table.grid td:nth-child(3){width:18%}
.pv-page #variants-table.grid th:nth-child(4), .pv-page #variants-table.grid td:nth-child(4){width:26%}
.pv-page #variants-table.grid thead th:nth-child(4){white-space:nowrap} /* «Заказ» видно всегда */

/* ячейка заказа (и по классу, и по позиции — на всякий случай) */
.pv-page #variants-table.grid td.order,
.pv-page #variants-table.grid td:nth-child(4){white-space:nowrap}
.pv-page #variants-table.grid td.order .group,
.pv-page #variants-table.grid td:nth-child(4) .group{display:inline-flex;gap:8px;align-items:center}

/* мобайл: подпись «Заказ» для 4-го столбца */
@media (max-width:680px){
  .pv-page #variants-table.grid thead{display:none}
  .pv-page #variants-table.grid td:nth-child(4)::before{content:"Заказ";color:var(--muted);min-width:46%}
}

/* === USAGE: collapse/expand (работает и для #usage-body, и для #p-area) === */
.pv-page #card-usage .p-card__body,
.pv-page #card-usage #usage-body,
.pv-page #card-usage #p-area{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden; position:relative; white-space:normal;
}
.pv-page #card-usage .p-card__body::after,
.pv-page #card-usage #usage-body::after,
.pv-page #card-usage #p-area::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:42px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 70%); pointer-events:none;
}

/* кнопка-стрелка */
.pv-page #card-usage .usage-toggle{
  display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  padding:0; border:0; background:transparent; cursor:pointer;
  color:var(--brand); font:700 14px/1 var(--ff-body);
}
.pv-page #card-usage .usage-toggle::after{content:"▾"; transform:translateY(1px); transition:transform var(--t)}

/* раскрыто */
.pv-page #card-usage.is-open .p-card__body,
.pv-page #card-usage.is-open #usage-body,
.pv-page #card-usage.is-open #p-area{display:block; -webkit-line-clamp:unset; overflow:visible}
.pv-page #card-usage.is-open .p-card__body::after,
.pv-page #card-usage.is-open #usage-body::after,
.pv-page #card-usage.is-open #p-area::after{display:none}
.pv-page #card-usage.is-open .usage-toggle::after{transform:rotate(180deg)}
/* ---- TABLE widths: 4 или 5 столбцов ---- */
/* 5 столбцов (есть колонка combust) */
.pv-page #variants-table.grid.has-combust th:nth-child(1),
.pv-page #variants-table.grid.has-combust td:nth-child(1){width:32%}
.pv-page #variants-table.grid.has-combust th:nth-child(2),
.pv-page #variants-table.grid.has-combust td:nth-child(2){width:16%}
.pv-page #variants-table.grid.has-combust th:nth-child(3),
.pv-page #variants-table.grid.has-combust td:nth-child(3){width:16%}
.pv-page #variants-table.grid.has-combust th:nth-child(4),
.pv-page #variants-table.grid.has-combust td:nth-child(4){width:14%}  /* combust */
.pv-page #variants-table.grid.has-combust th:nth-child(5),
.pv-page #variants-table.grid.has-combust td:nth-child(5){width:22%}  /* Заказ */

/* 4 столбца (без combust) */
.pv-page #variants-table.grid:not(.has-combust) th:nth-child(1),
.pv-page #variants-table.grid:not(.has-combust) td:nth-child(1){width:38%}
.pv-page #variants-table.grid:not(.has-combust) th:nth-child(2),
.pv-page #variants-table.grid:not(.has-combust) td:nth-child(2){width:18%}
.pv-page #variants-table.grid:not(.has-combust) th:nth-child(3),
.pv-page #variants-table.grid:not(.has-combust) td:nth-child(3){width:18%}
.pv-page #variants-table.grid:not(.has-combust) th:nth-child(4),
.pv-page #variants-table.grid:not(.has-combust) td:nth-child(4){width:26%}  /* Заказ */

/* Мобайл-подписи для колонки "Заказ" */
@media (max-width:680px){
  .pv-page #variants-table.grid.has-combust td:nth-child(5)::before{content:"Заказ";color:var(--muted);min-width:46%}
  .pv-page #variants-table.grid:not(.has-combust) td:nth-child(4)::before{content:"Заказ";color:var(--muted);min-width:46%}
}
/* ----- USAGE: свёрнуто по умолчанию (3 строки) ----- */
.pv-page #card-usage .p-card__body{position:relative; white-space:normal}
.pv-page #card-usage.is-collapsed .p-card__body{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}
.pv-page #card-usage.is-collapsed .p-card__body::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:42px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 70%);
  pointer-events:none;
}

/* для списков: скрываем «лишние» <li> */
.pv-page #card-usage .hidden-li{display:none}

/* кнопка-переключатель (как была) */
.pv-page #card-usage .usage-toggle{
  display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  padding:0; border:0; background:transparent; cursor:pointer;
  color:var(--brand); font:700 14px/1 var(--ff-body);
}
/* ==== FIX: collapse работает только при .is-collapsed ==== */
/* Сброс «вечного» клипа из ранних правил */
.pv-page #card-usage .p-card__body{
  display:block !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:initial !important;
  overflow:visible !important;
  position:relative;
}
.pv-page #card-usage .p-card__body::after{ content:none !important; }

/* Свёрнуто: показываем только 3 строки + затухание */
.pv-page #card-usage.is-collapsed .p-card__body{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;
}
.pv-page #card-usage.is-collapsed .p-card__body::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:42px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 70%);
  pointer-events:none;
}

/* Кнопка-стрелка: вниз при свёрнутом, вверх при раскрытом */
.pv-page #card-usage .usage-toggle{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  padding:0; border:0; background:transparent; cursor:pointer;
  color:var(--brand); font:700 14px/1 var(--ff-body);
}
.pv-page #card-usage .usage-toggle::after{
  content:"▾"; transform:rotate(0deg); transition:transform var(--t);
}
.pv-page #card-usage:not(.is-collapsed) .usage-toggle::after{
  transform:rotate(180deg);
}
/* ==== HERO: одинаковые отступы со всех сторон (левый = верхнему) ==== */
.pv-page .p-hero{ --hero-pad: 14px; } /* если нужен другой размер — меняйте здесь */

.pv-page .p-hero__grid{
  /* один источник паддингов — не трогаем .container */
  padding-top: var(--hero-pad) !important;
  padding-right: var(--hero-pad) !important;
  padding-bottom: var(--hero-pad) !important;
  padding-left: var(--hero-pad) !important;
  background: transparent; /* на всякий случай, чтобы не «заливало» */
}

/* убираем возможные сдвиги внутри грида */
.pv-page .p-hero__grid .p-photo,
.pv-page .p-hero__grid .p-hero__text{
  margin-left: 0 !important;
}
/* ==== Отступ между HERO и карточками ==== */
.pv-page .p-hero{
  /* общий нижний отступ секции hero */
  margin-bottom: 16px !important;   /* подправь число, если нужно чуть больше/меньше */
}

/* на всякий случай уберём верхний у следующего блока,
   чтобы не было «двойного» суммарного отступа */
.pv-page .p-cards{
  margin-top: 0 !important;
}