/* =====================================================================
   Карточка товара — 1 в 1 по макету «Карточка товара — вариант 2, в манере webasto.com» (ProductCardCom)
   и общей карточке товара в лентах (ProductTile). Всё внутри .pp — на остальные страницы не влияет.
   ===================================================================== */
.pp{--navy:#1c3c74;--navy-d:#132b56;--deep:#0e2142;--yel:#e8e346;--ink:#1d2734;--muted:#5d6978;--line:#e2e6ec;--soft:#f3f5f8;--r:6px;
  font-family:"Noto Sans",Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;font-size:15px;line-height:1.55;overflow-x:clip}
.pp *{box-sizing:border-box}
.pp a{color:inherit;text-decoration:none}
.pp .w{max-width:1352px;margin:0 auto;padding:0 24px}
.pp .bar{display:block;width:44px;height:4px;background:var(--yel);border-radius:0}
/* двухцветный заголовок как в каталоге Webasto: жирная строка + светлая */
.pp .tt{margin:0;color:var(--navy);font-size:clamp(24px,1.5vw + 12px,34px);line-height:1.18;letter-spacing:-.01em}
.pp .tt b{display:block;font-weight:700}
.pp .tt span{display:block;font-weight:300}
.pp .eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pp .lnk{display:inline-flex;align-items:center;gap:8px;color:var(--navy)!important;font-weight:600;font-size:14px;white-space:nowrap}
.pp .lnk svg{transition:transform .15s}
.pp .lnk:hover svg{transform:translateX(3px)}

/* общие элементы внутренних страниц */
.pp .crumbs{display:flex;flex-wrap:wrap;gap:6px;padding-top:22px;font-size:13px;color:var(--muted)}
.pp .crumbs a:hover{color:var(--navy)}
.pp .crumbs i{font-style:normal;opacity:.5}
.pp .phd{padding-top:18px;display:flex;flex-direction:column;gap:12px;max-width:820px}
.pp .phd p{margin:0;color:var(--muted)}
.pp .btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:4px;font-size:14.5px;font-weight:600;white-space:nowrap}
.pp .btn-navy{background:var(--navy);color:#fff}
.pp .btn-navy:hover{background:var(--navy-d)}
.pp .btn-line{border:1px solid var(--line);color:var(--navy)}
.pp .btn-line:hover{border-color:var(--navy)}
.pp a.btn-navy{color:#fff}
.pp a.btn-line{color:var(--navy)}
.pp .sec{padding-top:56px}
/* стрелки и ссылка — внизу справа, на уровне последней строки шапки блока, прямо над карточками (как на webasto.com) */
.pp .sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.pp .sec-t{min-width:0;flex:1;display:flex;flex-direction:column;gap:10px}
.pp .sec-t p{margin:0;color:var(--muted)}
.pp .sec-nav{display:flex;align-items:center;gap:8px;flex:none}
.pp .ab{all:unset;box-sizing:border-box;cursor:pointer;width:44px;height:44px;border:1px solid #e2e6ec;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#1c3c74;background:#fff;box-shadow:none}
.pp .ab:hover{border-color:#1c3c74;background:#1c3c74;color:#fff;transform:none}
.pp .cta{margin-top:64px;border-radius:0;background:var(--navy);color:#fff;padding:32px 36px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.pp .cta b{display:block;font-size:22px;font-weight:700}
.pp .cta span{color:rgba(255,255,255,.78)}
.pp .cta .btn{background:#fff;color:var(--navy)}
.pp .cta a.btn{color:var(--navy)}
.pp .ph-box{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;background:var(--soft);color:#9aa6b4;font-size:12px}
.pp .page-end{height:72px}
@media (max-width:991px){
.pp .w{padding:0 20px}
.pp .cta{flex-direction:column;align-items:flex-start}}
@media (max-width:767px){
.pp .w{padding:0 16px}
.pp .sec{padding-top:40px}
.pp .sec-h{flex-direction:column;align-items:flex-start;gap:12px}
.pp .ab{display:none}
.pp .cta{padding:24px 20px;margin-top:44px}
.pp .cta .btn{width:100%}}
.pp .pc{margin-top:24px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start}

/* ---- фотогалерея: белая рамка, счётчик «1 / N», полноэкранный просмотр ---- */
.pp .gx-main{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:0;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in}
.pp .gx-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* фото товара на белом фоне (pk) — целиком по центру; фото-сцены заполняют рамку */
/* фото в галерее карточки и в миниатюрах всегда заполняет весь контейнер (без белых полей) — одинаково во всех карточках */
.pp .gx-btn{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;z-index:2;width:44px;height:44px;border-radius:4px;background:#fff;color:#1c3c74;display:flex;align-items:center;justify-content:center;box-shadow:none;transition:background-color .15s,border-color .15s,color .15s;border:1px solid #e2e6ec}
.pp .gx-btn:hover{transform:none;background:#1c3c74;border-color:#1c3c74;color:#fff}
.pp .gx-btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pp .gx-full{top:14px;right:14px}
.pp .gx-nav{top:50%;margin-top:-24px}
.pp .gx-nav.l{left:14px}
.pp .gx-nav.r{right:14px}
.pp .gx-count{position:absolute;z-index:2;left:50%;bottom:14px;transform:translateX(-50%);height:30px;padding:0 14px;border-radius:999px;background:rgba(36,42,50,.72);color:#fff;font-size:13.5px;font-weight:600;letter-spacing:.02em;display:flex;align-items:center;white-space:nowrap}
.pp .gx-cap{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 52px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.92));color:var(--ink);font-size:14px;text-align:center;pointer-events:none}
.pp .gx-th{margin-top:12px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px}
.pp .gx-th::-webkit-scrollbar{display:none}
.pp .gx-t{all:unset;box-sizing:border-box;cursor:pointer;flex:0 0 88px;aspect-ratio:1;border:1px solid var(--line);border-radius:0;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .15s}
.pp .gx-t img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.pp .gx-t:hover{border-color:#a9b8ca}
.pp .gx-t.on{border:2px solid #2f6fb7}
.pp .gx-t:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pp .lb{position:fixed;inset:0;z-index:1000;background:rgba(10,12,16,.96);display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.pp .lb-img{max-width:calc(100% - 220px);max-height:calc(100% - 110px);object-fit:contain;cursor:default}
.pp .lb-count{position:absolute;top:22px;left:28px;color:#fff;font-size:15px;letter-spacing:.12em}
.pp .lb-b{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;width:56px;height:56px;display:flex;align-items:center;justify-content:center;color:#fff;border-radius:4px}
.pp .lb-b:hover{background:rgba(255,255,255,.08)}
.pp .lb-x{top:14px;right:18px}
.pp .lb-p{left:18px;top:50%;margin-top:-28px}
.pp .lb-n{right:18px;top:50%;margin-top:-28px}
@media (max-width:767px){
.pp .gx-btn{width:44px;height:44px}
.pp .gx-nav{margin-top:-20px}
.pp .gx-full{top:10px;right:10px}
.pp .gx-nav.l{left:10px}
.pp .gx-nav.r{right:10px}
.pp .gx-t{flex-basis:68px}
.pp .lb-img{max-width:100%;max-height:calc(100% - 140px)}
.pp .lb-p{left:4px}
.pp .lb-n{right:4px}}
.pp .g-badges{position:absolute;z-index:2;top:12px;left:12px;display:flex;gap:6px}
.pp .bdg{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:4px;font-size:13px;font-weight:500;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;background:#1c3c74;color:#fff}
.pp .buy{display:flex;flex-direction:column;gap:16px;min-width:0}
.pp .pt{margin:0;color:var(--navy);font-size:clamp(24px,1.3vw + 14px,34px);line-height:1.18;font-weight:700;letter-spacing:-.01em;overflow-wrap:break-word}
.pp .pt span{display:block;font-weight:300}
.pp .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:13.5px;color:var(--muted)}
.pp .stars{color:#f0a400;letter-spacing:1px}
.pp .stock{display:inline-flex;align-items:center;gap:6px;color:#1f7a3f;font-weight:600}
.pp .stock i{width:8px;height:8px;border-radius:50%;background:#2ea155}
.pp .opts{display:flex;flex-direction:column;gap:8px}
/* варианты покупки: иконка, что входит, цена; выбранный — «приподнят» тенью и закрашенной радиокнопкой */
.pp .opt{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:4px;background:#fff;transition:box-shadow .2s,border-color .2s,transform .2s}
.pp .opt:hover{border-color:transparent;box-shadow:0 2px 4px rgba(14,33,66,.06),0 10px 26px rgba(14,33,66,.11)}
.pp .opt .rd{width:18px;height:18px;border-radius:50%;border:2px solid #b9c6d6;display:flex;align-items:center;justify-content:center;transition:all .15s}
.pp .opt.on{border-color:#d8e0ea;box-shadow:0 10px 28px rgba(14,33,66,.12),0 2px 6px rgba(14,33,66,.06);transform:translateY(-1px)}
.pp .opt.on .rd{border-color:var(--navy);background:var(--navy)}
.pp .opt.on .rd::after{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.pp .opt .opt-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.pp .opt-t b{font-size:15.5px;font-weight:600;color:var(--ink)}
.pp .opt-t small{font-size:12.5px;color:var(--muted)}
.pp .opt-inc{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px}
.pp .opt-inc i{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:12px;color:#3d4a59}
.pp .opt-inc svg{color:var(--navy);flex:none}
.pp .opt em{font-style:normal;text-align:right;white-space:nowrap;font-size:19px;font-weight:600;color:var(--muted);line-height:1.15}
.pp .opt em small{display:block;font-size:11.5px;font-weight:500;color:var(--muted)}
.pp .opt.on em{font-weight:700;color:var(--ink)}
.pp .acts{display:flex;gap:8px}
.pp .acts .btn-cta{flex:1}
.pp .ico-btn{all:unset;box-sizing:border-box;cursor:pointer;width:46px;height:46px;flex:none;border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--navy)}
.pp .ico-btn:hover{border-color:var(--navy)}
/* фото «едет» вместе с прокруткой правой колонки, пустоты слева нет */
@media (min-width:992px){
.pp .pc > .gal-col{position:sticky;top:76px}}
/* главная кнопка покупки: мягкий тёплый красный — заметный, но не «тревожный» */
/* .o — повышаем вес: стили общей шапки подключаются позже и сбрасывают .btn */
.pp .btn-cta{background:#cf4141;color:#fff}
.pp .btn-cta:hover{background:#b83737}
.pp .btn-cta:focus-visible{outline:2px solid #1c3c74;outline-offset:2px}
.pp a.btn-cta{color:#fff}
.pp .dlv{border:1px solid transparent;box-shadow:0 1px 2px rgba(14,33,66,.05),0 4px 16px rgba(14,33,66,.07);border-radius:0;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.pp .dlv-h{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;font-size:13.5px}
.pp .dlv-h svg{color:var(--navy);margin-top:1px}
.pp .dlv-h b{display:block;font-size:14px;font-weight:600}
.pp .dlv-h span{color:var(--muted)}
.pp .dlv-f{display:flex;gap:8px}
.pp .dlv-in{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:4px;color:var(--muted)}
.pp .dlv-in:focus-within{border-color:var(--navy)}
.pp .dlv-in input{flex:1;min-width:0;border:0;outline:0;font:15px "Noto Sans",sans-serif;color:var(--ink);background:transparent}
.pp .dlv-btn{height:44px;padding:0 18px}
.pp .dlv-res{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pp .dlv-res li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.pp .dlv-res span{min-width:0}
.pp .dlv-res b{font-weight:600}
.pp .dlv-res small{margin-left:6px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.pp .dlv-res em{font-style:normal;font-weight:700;white-space:nowrap}
.pp .dlv-more{all:unset;cursor:pointer;font-size:13px;font-weight:600;color:var(--navy)}
.pp .dlv-idx{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.pp .dlv-idx input{width:100px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:4px;font:14px "Noto Sans",sans-serif}
.pp .dlv-all{font-size:13.5px;font-weight:600;color:var(--navy)!important}
.pp .info{border:1px solid var(--line);border-radius:0}
.pp .info div{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:12px 16px;font-size:13.5px}
.pp .info div + div{border-top:1px solid var(--line)}
.pp .info svg{color:var(--navy);margin-top:1px}
.pp .info b{display:block;font-weight:600;font-size:14px}
.pp .info span{color:var(--muted)}
.pp .tabs{margin-top:56px;display:flex;flex-wrap:wrap;gap:8px}
.pp .pc-tab{all:unset;box-sizing:border-box;cursor:pointer;height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line);color:var(--navy);font-size:14px;font-weight:600;display:inline-flex;align-items:center;white-space:nowrap}
.pp .pc-tab:hover{border-color:var(--navy)}
.pp .pc-tab:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pp .pc-tab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pp .tp{padding-top:28px}
.pp .opt-t,.pp .rp,.pp .pcard,.pp .doc,.pp .kf{overflow-wrap:break-word;hyphens:auto}
.pp .desc{display:flex;flex-direction:column;gap:20px}
.pp .desc-txt{max-width:none}
.pp .desc-txt p{margin:0 0 10px;line-height:1.65}
/* «Коротко о главном» — как блок «Key facts at a glance» в каталоге Webasto: тёмно-синий, белый текст, квадратные маркеры */
@media (max-width:991px){
.pp .w{padding:0 20px}
.pp .cta{flex-direction:column;align-items:flex-start}}
@media (max-width:767px){
.pp .w{padding:0 16px}
.pp .sec{padding-top:40px}
.pp .sec-h{flex-direction:column;align-items:flex-start;gap:12px}
.pp .ab{display:none}
.pp .cta{padding:24px 20px;margin-top:44px}
.pp .cta .btn{width:100%}}
.pp .pc{margin-top:24px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start}

/* ---- фотогалерея: белая рамка, счётчик «1 / N», полноэкранный просмотр ---- */
.pp .gx-main{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:0;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in}
.pp .gx-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* фото товара на белом фоне (pk) — целиком по центру; фото-сцены заполняют рамку */
.pp .gx-btn{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;z-index:2;width:44px;height:44px;border-radius:4px;background:#fff;color:#1c3c74;display:flex;align-items:center;justify-content:center;box-shadow:none;transition:background-color .15s,border-color .15s,color .15s;border:1px solid #e2e6ec}
.pp .gx-btn:hover{transform:none;background:#1c3c74;border-color:#1c3c74;color:#fff}
.pp .gx-btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pp .gx-full{top:14px;right:14px}
.pp .gx-nav{top:50%;margin-top:-24px}
.pp .gx-nav.l{left:14px}
.pp .gx-nav.r{right:14px}
.pp .gx-count{position:absolute;z-index:2;left:50%;bottom:14px;transform:translateX(-50%);height:30px;padding:0 14px;border-radius:999px;background:rgba(36,42,50,.72);color:#fff;font-size:13.5px;font-weight:600;letter-spacing:.02em;display:flex;align-items:center;white-space:nowrap}
.pp .gx-cap{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 52px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.92));color:var(--ink);font-size:14px;text-align:center;pointer-events:none}
.pp .gx-th{margin-top:12px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px}
.pp .gx-th::-webkit-scrollbar{display:none}
.pp .gx-t{all:unset;box-sizing:border-box;cursor:pointer;flex:0 0 88px;aspect-ratio:1;border:1px solid var(--line);border-radius:0;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .15s}
.pp .gx-t img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.pp .gx-t:hover{border-color:#a9b8ca}
.pp .gx-t.on{border:2px solid #2f6fb7}
.pp .gx-t:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pp .lb{position:fixed;inset:0;z-index:1000;background:rgba(10,12,16,.96);display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.pp .lb-img{max-width:calc(100% - 220px);max-height:calc(100% - 110px);object-fit:contain;cursor:default}
.pp .lb-count{position:absolute;top:22px;left:28px;color:#fff;font-size:15px;letter-spacing:.12em}
.pp .lb-b{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;width:56px;height:56px;display:flex;align-items:center;justify-content:center;color:#fff;border-radius:4px}
.pp .lb-b:hover{background:rgba(255,255,255,.08)}
.pp .lb-x{top:14px;right:18px}
.pp .lb-p{left:18px;top:50%;margin-top:-28px}
.pp .lb-n{right:18px;top:50%;margin-top:-28px}
@media (max-width:767px){
.pp .gx-btn{width:44px;height:44px}
.pp .gx-nav{margin-top:-20px}
.pp .gx-full{top:10px;right:10px}
.pp .gx-nav.l{left:10px}
.pp .gx-nav.r{right:10px}
.pp .gx-t{flex-basis:68px}
.pp .lb-img{max-width:100%;max-height:calc(100% - 140px)}
.pp .lb-p{left:4px}
.pp .lb-n{right:4px}}
.pp .g-badges{position:absolute;z-index:2;top:12px;left:12px;display:flex;gap:6px}
.pp .bdg{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:4px;font-size:13px;font-weight:500;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;background:#1c3c74;color:#fff}
.pp .buy{display:flex;flex-direction:column;gap:16px;min-width:0}
.pp .pt{margin:0;color:var(--navy);font-size:clamp(24px,1.3vw + 14px,34px);line-height:1.18;font-weight:700;letter-spacing:-.01em;overflow-wrap:break-word}
.pp .pt span{display:block;font-weight:300}
.pp .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:13.5px;color:var(--muted)}
.pp .stars{color:#f0a400;letter-spacing:1px}
.pp .stock{display:inline-flex;align-items:center;gap:6px;color:#1f7a3f;font-weight:600}
.pp .stock i{width:8px;height:8px;border-radius:50%;background:#2ea155}
.pp .opts{display:flex;flex-direction:column;gap:8px}
/* варианты покупки: иконка, что входит, цена; выбранный — «приподнят» тенью и закрашенной радиокнопкой */
.pp .opt{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:4px;background:#fff;transition:box-shadow .2s,border-color .2s,transform .2s}
.pp .opt:hover{border-color:transparent;box-shadow:0 2px 4px rgba(14,33,66,.06),0 10px 26px rgba(14,33,66,.11)}
.pp .opt .rd{width:18px;height:18px;border-radius:50%;border:2px solid #b9c6d6;display:flex;align-items:center;justify-content:center;transition:all .15s}
.pp .opt.on{border-color:#d8e0ea;box-shadow:0 10px 28px rgba(14,33,66,.12),0 2px 6px rgba(14,33,66,.06);transform:translateY(-1px)}
.pp .opt.on .rd{border-color:var(--navy);background:var(--navy)}
.pp .opt.on .rd::after{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.pp .opt .opt-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.pp .opt-t b{font-size:15.5px;font-weight:600;color:var(--ink)}
.pp .opt-t small{font-size:12.5px;color:var(--muted)}
.pp .opt-inc{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px}
.pp .opt-inc i{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:12px;color:#3d4a59}
.pp .opt-inc svg{color:var(--navy);flex:none}
.pp .opt em{font-style:normal;text-align:right;white-space:nowrap;font-size:19px;font-weight:600;color:var(--muted);line-height:1.15}
.pp .opt em small{display:block;font-size:11.5px;font-weight:500;color:var(--muted)}
.pp .opt.on em{font-weight:700;color:var(--ink)}
.pp .acts{display:flex;gap:8px}
.pp .acts .btn-cta{flex:1}
.pp .ico-btn{all:unset;box-sizing:border-box;cursor:pointer;width:46px;height:46px;flex:none;border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--navy)}
.pp .ico-btn:hover{border-color:var(--navy)}
/* фото «едет» вместе с прокруткой правой колонки, пустоты слева нет */
@media (min-width:992px){
.pp .pc > .gal-col{position:sticky;top:76px}}
/* главная кнопка покупки: мягкий тёплый красный — заметный, но не «тревожный» */
/* .o — повышаем вес: стили общей шапки подключаются позже и сбрасывают .btn */
.pp .btn-cta{background:#cf4141;color:#fff}
.pp .btn-cta:hover{background:#b83737}
.pp .btn-cta:focus-visible{outline:2px solid #1c3c74;outline-offset:2px}
.pp a.btn-cta{color:#fff}
.pp .dlv{border:1px solid transparent;box-shadow:0 1px 2px rgba(14,33,66,.05),0 4px 16px rgba(14,33,66,.07);border-radius:0;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.pp .dlv-h{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;font-size:13.5px}
.pp .dlv-h svg{color:var(--navy);margin-top:1px}
.pp .dlv-h b{display:block;font-size:14px;font-weight:600}
.pp .dlv-h span{color:var(--muted)}
.pp .dlv-f{display:flex;gap:8px}
.pp .dlv-in{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:4px;color:var(--muted)}
.pp .dlv-in:focus-within{border-color:var(--navy)}
.pp .dlv-in input{flex:1;min-width:0;border:0;outline:0;font:15px "Noto Sans",sans-serif;color:var(--ink);background:transparent}
.pp .dlv-btn{height:44px;padding:0 18px}
.pp .dlv-res{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pp .dlv-res li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.pp .dlv-res span{min-width:0}
.pp .dlv-res b{font-weight:600}
.pp .dlv-res small{margin-left:6px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.pp .dlv-res em{font-style:normal;font-weight:700;white-space:nowrap}
.pp .dlv-more{all:unset;cursor:pointer;font-size:13px;font-weight:600;color:var(--navy)}
.pp .dlv-idx{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.pp .dlv-idx input{width:100px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:4px;font:14px "Noto Sans",sans-serif}
.pp .dlv-all{font-size:13.5px;font-weight:600;color:var(--navy)!important}
.pp .info{border:1px solid var(--line);border-radius:0}
.pp .info div{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:12px 16px;font-size:13.5px}
.pp .info div + div{border-top:1px solid var(--line)}
.pp .info svg{color:var(--navy);margin-top:1px}
.pp .info b{display:block;font-weight:600;font-size:14px}
.pp .info span{color:var(--muted)}
.pp .tabs{margin-top:56px;display:flex;flex-wrap:wrap;gap:8px}
.pp .pc-tab{all:unset;box-sizing:border-box;cursor:pointer;height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line);color:var(--navy);font-size:14px;font-weight:600;display:inline-flex;align-items:center;white-space:nowrap}
.pp .pc-tab:hover{border-color:var(--navy)}
.pp .pc-tab:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pp .pc-tab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pp .tp{padding-top:28px}
.pp .desc{display:flex;flex-direction:column;gap:20px}
.pp .desc-txt{max-width:none}
.pp .desc-txt p{margin:0 0 10px;line-height:1.65}
.pp .feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.pp .feats li{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:0;background:#fff;font-size:14px;line-height:1.4}
.pp .feats i{flex:none;width:28px;height:28px;border-radius:50%;background:#e9f6ee;color:#1f8a47;display:flex;align-items:center;justify-content:center}
.pp em,.pp .p-pr,.pp .tbl td:last-child,.pp .total b{white-space:nowrap}
.pp .btn{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pp .rps{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.pp .rp{display:flex;flex-direction:column;gap:14px;padding:20px;border:1px solid var(--line);border-radius:0;background:#fff}
.pp .rp-h{display:flex;align-items:center;gap:12px}
.pp .rp-h b{font-size:16px;font-weight:700;color:var(--navy);line-height:1.3;overflow-wrap:break-word}
.pp .rp-g{display:flex;flex-direction:column;gap:6px}
.pp .rp-l{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pp .rp-g ul{list-style:none;margin:0;padding:0}
.pp .rp-g li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.pp .rp-g li em{font-style:normal;font-weight:600;white-space:nowrap}
/* цена и кнопка: в одну строку, если помещаются; иначе цена над кнопкой, кнопка на всю ширину */
.pp .rp-f{margin-top:auto;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.pp .rp-f > span{flex:1 0 auto}
.pp .rp-f .btn{flex:1 0 auto;max-width:100%}
.pp .rp-f span{font-size:13px;color:var(--muted)}
.pp .rp-f b{display:block;font-size:22px;color:var(--ink);white-space:nowrap}
.pp .rp-f .btn{height:44px;padding:0 18px}
.pp .two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px}
.pp .two p{margin:0 0 12px}
.pp .keys{list-style:none;margin:0;padding:22px;border-radius:0;background:var(--soft);display:flex;flex-direction:column;gap:10px}
.pp .keys b{color:var(--navy);font-size:15px}
.pp .keys li{display:flex;gap:10px;font-size:14px}
.pp .keys li::before{content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--navy)}
.pp .spec{width:100%;max-width:820px;border-collapse:collapse;font-size:14px}
.pp .spec th,.pp .spec td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.pp .spec th{width:45%;font-weight:400;color:var(--muted)}
.pp .spec tr:nth-child(odd) td,.pp .spec tr:nth-child(odd) th{background:#fafbfc}
.pp .docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pp .doc{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:0;min-width:0}
.pp .doc i{flex:none;width:38px;height:46px;border-radius:0;background:#fdeceb;color:#c4302b;font-style:normal;font-size:11px;font-weight:700;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px}
.pp .doc b{display:block;font-size:14px;font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp .doc span{font-size:12.5px;color:var(--muted)}
.pp .total{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.pp .tt-tbl{width:100%;border-collapse:collapse;font-size:14px}
.pp .tt-tbl td{padding:12px 0;border-bottom:1px solid var(--line)}
.pp .tt-tbl td:last-child{text-align:right;font-weight:600;white-space:nowrap;padding-left:12px}
.pp .tt-tbl .grp td{text-align:left;padding-top:18px;font-weight:600;color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase;border-bottom:0}
.pp .tot-box{border-radius:0;background:var(--navy);color:#fff;padding:22px;display:flex;flex-direction:column;gap:12px}
.pp .tot-box span{color:rgba(255,255,255,.75);font-size:14px}
.pp .tot-box b{font-size:28px}
.pp .tot-box .btn{background:#fff;color:var(--navy)}
.pp .tot-box a.btn{color:var(--navy)}
.pp .car{--per:4;--gap:16px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));gap:var(--gap);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.pp .car::-webkit-scrollbar{display:none}
.pp .pcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:0;min-width:0;scroll-snap-align:start}
.pp .pcard .im{position:relative;display:block;aspect-ratio:4/3;margin:6px 6px 0;border-radius:0;background:var(--soft);overflow:hidden}
.pp .pcard .im{background:#fff}
.pp .pcard .im img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.pp .pcard .im img.photo{object-fit:cover}
.pp .pcard .im img.photo{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.pp .pcard .bd{padding:12px 14px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.pp .pcard small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp .pcard b{font-size:15px;font-weight:600;color:var(--navy);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.3em * 2)}
.pp .pcard em{margin-top:auto;padding-top:8px;font-style:normal;font-weight:700;font-size:17px}
.pp .mbar{display:none}
@media (max-width:1199px){
.pp .car{--per:3}
.pp .docs{grid-template-columns:1fr 1fr}}
@media (max-width:991px){
.pp .pc{grid-template-columns:minmax(0,1fr);gap:24px}
.pp .two,.pp .total{grid-template-columns:minmax(0,1fr);gap:24px}
.pp .car{--per:2.4}}
@media (max-width:767px){
.pp .rps{grid-template-columns:minmax(0,1fr)}
.pp .opt{grid-template-columns:18px minmax(0,1fr);gap:12px;padding:14px}
.pp .opt em{grid-column:2;text-align:left;font-size:17px}
.pp .opt em small{display:inline;margin-right:4px}
  /* телефон: вкладки карточки — отдельные таблетки, как на планшете и компьютере, переносятся на новую строку */
.pp .tabs{margin-top:40px;gap:6px}
.pp .docs{grid-template-columns:minmax(0,1fr)}
.pp .car{--per:1.6;--gap:12px}
.pp .dlv-f{flex-direction:column}
.pp .dlv-in{flex:none}
.pp .dlv-btn{width:100%}
.pp .mbar{display:flex;flex-wrap:wrap;position:sticky;bottom:0;z-index:20;align-items:center;justify-content:space-between;gap:12px;margin:24px -16px 0;padding:10px 16px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(14,33,66,.08)}
.pp .mbar b{font-size:18px;white-space:nowrap}
.pp .mbar .btn{flex:1 0 auto;max-width:100%}
.pp .mbar small{display:block;font-size:12px;color:var(--muted)}
.pp .mbar .btn{height:44px;padding:0 18px}
}

/* ---- горизонтальное положение телефонов и низкие экраны ---- */
@media (orientation:landscape) and (max-height:500px){
.pp .gx-main{aspect-ratio:auto;height:78vh}
.pp .gx-t{flex-basis:64px}
.pp .lb-img{max-height:calc(100% - 40px)}
.pp .lb-count{top:12px}
.pp .lb-x{top:4px}
.pp .mbar{display:none}
}

/* наличие — как в общей карточке товара: фирменные цвета, без светофора */
.pp .av{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap}
.pp .av.ord{color:var(--muted);font-weight:500}
.pp .av svg{flex:none}

/* iPhone: не увеличивать текст самостоятельно — иначе блоки раздвигаются шире экрана */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ===== Таблицы в описании товара (из поля «Полное описание» в админке) =====
   На сайте скрипт оборачивает каждую таблицу в .tbl — так она прокручивается вбок на телефоне, не растягивая страницу.
   Атрибуты border/width/cellpadding из админки перекрываются оформлением сайта. */
.pp .desc-txt h2{margin:36px 0 12px;font-size:clamp(24px,1.2vw + 14px,32px);font-weight:300;line-height:1.2;letter-spacing:-.01em;color:var(--navy)}
.pp .desc-txt h3{margin:28px 0 10px;font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.005em;color:var(--navy)}
.pp .desc-txt h4{margin:22px 0 8px;font-size:17px;font-weight:600;line-height:1.3;color:var(--navy)}
.pp .desc-txt h2 :is(b,strong),.pp .desc-txt h3 :is(b,strong){font-weight:700}
/* два заголовка подряд (как «Циркуляционный насос… / Помпа водяная…») — один составной заголовок в стиле разделов сайта: первая строка жирная, вторая тонкая, без разрыва */
/* заголовок из двух строк (две строки одного уровня подряд): первая жирная, вторая светлая; подзаголовок h3 сразу под h2 — обычный, жирный */
.pp .desc-txt :is(h2:has(+ :is(h2,h3)),h3:has(+ h3)){font-weight:700;margin-bottom:0}
.pp .desc-txt :is(h2 + h2,h3 + h3){margin-top:4px;font-weight:300}
.pp .desc-txt h2 + h3{margin-top:14px}
.pp .desc-txt > :first-child{margin-top:0}
/* таблицы в описании — современный вид в стиле Webasto: белая карточка с мягкой тенью, тёмно-синяя шапка, только горизонтальные линии, текст слева, числа справа, группы комплектации выделены, вложенные позиции с отступом */
.pp .desc-txt .tbl{margin:22px 0 28px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;box-shadow:0 1px 2px rgba(14,33,66,.05),0 4px 16px rgba(14,33,66,.07)}
.pp .desc-txt table{width:100%;table-layout:auto;border:0;border-collapse:collapse;border-spacing:0;font-size:14.5px;line-height:1.5;font-variant-numeric:tabular-nums}
.pp .desc-txt th,.pp .desc-txt td{padding:13px 20px;border:0;border-bottom:1px solid #e8ecf2;text-align:left;vertical-align:top;color:var(--ink);background:#fff;transition:background-color .12s}
.pp .desc-txt td p,.pp .desc-txt th p{max-width:none;margin:0}
.pp .desc-txt td p + p,.pp .desc-txt th p + p{margin-top:4px}
.pp .desc-txt :is(th,td).num{text-align:right;white-space:nowrap}
.pp .desc-txt .h-s{display:none}
.pp .desc-txt thead .num,.pp .desc-txt tr.is-h > .num{white-space:normal}
.pp .desc-txt :is(th,td).mono{color:#5b6878;white-space:nowrap}
.pp .desc-txt thead :is(th,td),.pp .desc-txt tr.is-h > :is(td,th){background:var(--navy);color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em;line-height:1.35;padding-top:14px;padding-bottom:14px;border-bottom:0;vertical-align:middle}
.pp .desc-txt tr.is-h + tr.is-h > :is(td,th){padding-top:0}
.pp .desc-txt thead :is(strong,b),.pp .desc-txt tr.is-h :is(strong,b){font-weight:700;color:#fff}
.pp .desc-txt tbody > tr:not(.is-h):not(.is-sec):hover > :is(td,th){background:#f5f7fb}
.pp .desc-txt tbody > tr:last-child > :is(td,th){border-bottom:0}
.pp .desc-txt tr.is-grp > :is(td,th){background:#f6f8fb;font-weight:600;color:var(--navy);border-top:1px solid #dfe5ee}
.pp .desc-txt tr.is-grp :is(strong,b){font-weight:600}
.pp .desc-txt tr.is-sub > :is(td,th){padding-top:9px;padding-bottom:9px;font-size:14px}
.pp .desc-txt tr.is-sub > td.nm{padding-left:38px;position:relative}
.pp .desc-txt tr.is-sub > td.nm::before{content:"";position:absolute;left:22px;top:18px;width:6px;height:1px;background:#a9b6c7}
.pp .desc-txt tr.is-sec > td{background:#eef1f5;font-size:13px;font-weight:700;color:var(--navy)}
.pp .desc-txt table:not(:has(.is-h)) tbody > tr > :first-child{font-weight:600;color:var(--navy)}
@media (min-width:768px){.pp .desc-txt thead :is(th,td),.pp .desc-txt tr.is-h > :is(td,th){white-space:nowrap}.pp .desc-txt .tbl{overflow:visible}.pp .desc-txt .tbl-hint.on{display:none}}
@media (max-width:767px){.pp .desc-txt table{font-size:13.5px}.pp .desc-txt th,.pp .desc-txt td{padding:11px 7px;hyphens:auto;overflow-wrap:break-word}.pp .desc-txt :is(th,td):first-child{padding-left:10px}.pp .desc-txt :is(th,td):last-child{padding-right:10px}.pp .desc-txt :is(th,td).mono{font-size:12.5px}.pp .desc-txt .h-l{display:none}.pp .desc-txt table.has-art .mono{display:none}.pp .desc-txt table.has-art .nm[data-art]::after{content:attr(data-art);display:block;margin-top:2px;font-size:12px;font-weight:400;color:#5b6878}.pp .desc-txt .h-s{display:inline;white-space:nowrap}.pp .desc-txt tr.is-h > :is(td,th){letter-spacing:0}.pp .desc-txt thead :is(th,td),.pp .desc-txt tr.is-h > :is(td,th){font-size:12px}.pp .desc-txt tr.is-sub > td.nm{padding-left:24px}.pp .desc-txt tr.is-sub > td.nm::before{left:10px}.pp .desc-txt :is(th,td).mono{white-space:normal}.pp .desc-txt table:has(tr > :nth-child(5)){min-width:600px}.pp .desc-txt table:has(tr > :nth-child(4)):not(:has(.nm)){min-width:560px}.pp .desc-txt table:not(:has(.nm)) .c1{width:196px;min-width:196px;max-width:196px;hyphens:auto}.pp .desc-txt table{border-collapse:separate}.pp .desc-txt table:has(tr > :nth-child(3)):not(:has(.nm)) .c1{position:sticky;left:0;z-index:1;box-shadow:1px 0 0 #e8ecf2}}








/* широкие таблицы (3 колонки и больше) не сжимаем — на узком экране они листаются вбок */

/* подсказка под таблицей, которая не помещается (на сайте её показывает скрипт только в этом случае) */
.pp .desc-txt .tbl-hint{display:none;margin:-12px 0 18px;font-size:12px;color:var(--muted);text-align:center}
@media (max-width:767px){
.pp .desc-txt .tbl-hint.on{display:block}

}

/* ===== Видео в галерее (поле «Видео (ссылка)» в админке): обложка + ▶, плеер — только по нажатию ===== */
.pp .gx-play{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;font-size:14px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.pp .gx-play svg{box-sizing:content-box;width:26px;height:26px;padding:20px 18px 20px 22px;border-radius:50%;background:rgba(19,43,86,.88);box-shadow:0 6px 20px rgba(0,0,0,.25);transition:background-color .15s,transform .15s}
.pp .gx-play:hover svg{background:var(--navy);transform:scale(1.05)}
.pp .gx-play:focus-visible svg{outline:3px solid #fff;outline-offset:2px}
.pp .gx-video{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:#0e2142;color:#fff;font-size:14px;text-align:center;border-radius:0}
.pp .gx-t{position:relative}
.pp .gx-t-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(14,33,66,.35);border-radius:inherit}
.pp .gx-t-play svg{width:22px;height:22px;padding:6px 5px 6px 7px;border-radius:50%;background:rgba(19,43,86,.9);box-sizing:content-box}

/* ярлыки товаров — общий стиль сайта: «Хит продаж» жёлтый, «Новинка» синяя */
.pp .bdg.is-hit{background:#e8e346;color:#1d2734}

/* телефон: листание пальцем, стрелок нет */
@media (max-width:767px){
.pp .gx-nav{display:none}}

/* рейтинг и иконки «Сравнить» / «Задать вопрос» — в одной строке; кнопка покупки — на всю ширину */
.pp .meta-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pp .meta-row .meta{flex:1;min-width:0}
.pp .meta-ic{display:flex;gap:8px;flex:none}
.pp .meta-ic .ico-btn{width:44px;height:44px}
.pp .acts .btn-cta{width:100%}
/* телефон и планшет вертикально: «Сравнить» и «Задать вопрос» — круглые, как кнопка сравнения на карточках в списках */
@media (max-width:767px){
.pp .meta-ic .ico-btn{width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:var(--muted);box-shadow:0 1px 6px rgba(14,33,66,.12)}
.pp .meta-ic .ico-btn:hover{border:0}
.pp .meta-ic .ico-btn svg{width:18px;height:18px}}
@media (max-width:479px){
.pp .meta-ic .ico-btn{width:32px;height:32px}}
/* узкий телефон: таблетки вкладок компактнее — как таблетки на других страницах */
@media (max-width:479px){
.pp .pc-tab{height:34px;padding:0 12px;font-size:13px}}
/* выбранное «Сравнить» — синяя заливка, как на карточках в списке (на всех экранах) */
.pp .meta-ic .ico-btn.on,.pp .meta-ic .ico-btn.on:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.pp #pc-tabs{scroll-margin-top:72px}

/* =====================================================================
   КАРТОЧКА — ВАРИАНТ 2, в манере webasto.com (как «Главная — вариант 2»):
   крупные плотные заголовки без подписей сверху и без жёлтых черт; острые углы у блоков;
   тёмно-синие панели; жёлтый — только акцент (выбранный вариант, активная миниатюра, иконки на синем);
   разделы ниже карточки — во всю ширину, через один на серой подложке.
   Данные, блоки и логика — те же, что в текущей карточке.
   ===================================================================== */
.pp{font-size:16px}
.pp .bar,.pp .eyebrow{display:none}
.pp .pc{margin-top:28px;gap:56px}
/* заголовок товара — как заголовки разделов на главной (вариант 2) */
.pp .pt{font-size:40px;line-height:1.12;font-weight:700;letter-spacing:-.01em}
.pp .pt span{font-weight:300}
.pp .buy{gap:20px}
/* галерея: без рамок, серая подложка; активная миниатюра — синяя рамка и жёлтая полоса снизу */
.pp .gx-main{border:0;background:var(--soft)}
.pp .gx-t{border:0;background:var(--soft)}
.pp .gx-t:hover{border:0;box-shadow:none}
.pp .gx-t.on{border:0;box-shadow:none}
.pp .gx-t.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--yel);z-index:1}
/* варианты покупки: острые углы; выбранный — синяя рамка и жёлтая полоса слева, без «подъёма» тенью */
.pp .opt{border-radius:0;padding:18px 20px;border-color:transparent;box-shadow:0 1px 2px rgba(14,33,66,.05),0 4px 16px rgba(14,33,66,.07)}
.pp .opt:hover{border-color:transparent;box-shadow:0 2px 4px rgba(14,33,66,.06),0 10px 26px rgba(14,33,66,.11)}
.pp .opt.on{border-color:transparent;box-shadow:inset 4px 0 0 var(--yel),0 2px 4px rgba(14,33,66,.06),0 10px 26px rgba(14,33,66,.11);transform:none}
.pp .opt-t b{font-size:16.5px;font-weight:700;color:var(--navy)}
.pp .opt-t small{font-size:13.5px}
.pp .opt-inc i{font-size:13px}
.pp .opt em{font-size:20px}
/* главная кнопка — как кнопки главной (вариант 2): выше и жирнее */
.pp .acts .btn-cta{height:52px;font-size:16px;font-weight:700}
/* доставка — острые углы, больше воздуха */
.pp .dlv{border-radius:0;padding:20px}
.pp .dlv-h b{font-size:15px;font-weight:700;color:var(--navy)}
/* установка, оплата, гарантия — тёмно-синяя панель, как фирменный блок «Сервис и установка» на главной */
.pp .info{background:var(--deep);border:0;color:#fff;padding:6px 0}
.pp .info div{padding:14px 20px;font-size:14px}
.pp .info div + div{border-top:1px solid rgba(255,255,255,.14)}
.pp .info svg{color:var(--yel)}
.pp .info b{color:#fff;font-size:15px}
.pp .info span{color:rgba(255,255,255,.8)}
.pp .info-note{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
/* «Коротко о главном» — та же тёмно-синяя панель с жёлтым заголовком и жёлтыми маркерами */
/* вкладки — как на главной (вариант 2) */
.pp .tabs{margin-top:72px}

/* разделы ниже карточки: крупные заголовки, во всю ширину; серые — через один */
.pp .sec{padding:80px 0 0}
.pp .sec-h{margin-bottom:40px}
.pp .tt{font-size:40px;line-height:1.12}
.pp .sec-t p{font-size:18px;max-width:60ch}
.pp .sec-soft{margin-top:80px;padding:80px 0;background:var(--soft);box-shadow:0 0 0 100vmax var(--soft);clip-path:inset(0 -100vmax)}
.pp .sec-soft + .sec{padding-top:0;margin-top:80px}
.pp .lnk{font-size:16px;font-weight:700}
.pp .rp{border:0;padding:24px}
.pp .rp-h b{font-size:18px}
.pp .rp-f b{font-size:24px}
/* примеры работ — как «Полезно знать» на главной: фото без рамок, подпись под ним */
.pp .pcard{border:0;background:transparent;gap:14px}
.pp .pcard .im{margin:0;background:var(--soft)}
.pp .pcard .im img{transition:transform .5s ease}
.pp .pcard:hover .im img{transform:scale(1.03)}
.pp .pcard .bd{padding:0;gap:6px}
.pp .pcard small{font-size:14px}
.pp .pcard b{font-size:18px;font-weight:700}
.pp .doc{padding:16px 18px}
/* запчасть: анонс и номера — крупнее, острые углы */
/* ===== Карточка запчасти — только поля админки (по макету «Карточка запчасти»); номера — в карточке с мягкой тенью, как варианты покупки ===== */
.pp .anons{margin:12px 0 0;color:var(--muted);font-size:14.5px;line-height:1.55}
.pp .anons p{margin:0}
.pp .anons p + p{margin-top:6px}
.pp .anons ul,.pp .anons ol{margin:0;padding:0;list-style:none}
.pp .anons li{position:relative;padding-left:20px;margin:0 0 4px}
.pp .anons ul > li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;background:var(--yel)}
.pp .pinfo{margin:16px 0 0;padding:4px 14px;border:1px solid transparent;box-shadow:0 1px 2px rgba(14,33,66,.05),0 4px 16px rgba(14,33,66,.07);border-radius:0;background:#fff}
.pp .pinfo > div{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.pp .pinfo > div:last-child{border-bottom:0}
.pp .pinfo dt{flex:none;width:150px;font-size:13px;color:var(--muted)}
.pp .pinfo dd{margin:0;min-width:0;font-size:14px}
@media (max-width:479px){.pp .pinfo > div{flex-direction:column;gap:2px}.pp .pinfo dt{width:auto}}
.pp .pinfo .lnk{display:inline;white-space:normal;overflow-wrap:anywhere}
.pp .anons{font-size:16px}
.pp .pinfo{padding:4px 18px}
.pp .pinfo dt{font-size:14px}
.pp .pinfo dd{font-size:15px}
@media (max-width:1199px){
.pp .pt{font-size:36px}
.pp .tt{font-size:36px}
.pp .pc{gap:40px}}
@media (max-width:991px){
.pp .pt,.pp .tt{font-size:34px}
.pp .sec{padding-top:64px}
.pp .sec-soft{margin-top:64px;padding:64px 0}
.pp .sec-soft + .sec{margin-top:64px}
.pp .tabs{margin-top:56px}}
@media (max-width:767px){
.pp{font-size:15px}
.pp .pt,.pp .tt{font-size:28px}
.pp .pc{gap:24px}
.pp .sec{padding-top:48px}
.pp .sec-soft{margin-top:48px;padding:48px 0}
.pp .sec-soft + .sec{margin-top:48px}
.pp .sec-h{margin-bottom:24px}
.pp .sec-t p{font-size:16px}
.pp .tabs{margin-top:40px}
.pp .opt{padding:14px 16px}
.pp .opt em{font-size:18px}
.pp .dlv{padding:16px}
.pp .rp{padding:20px 16px}
.pp .pcard b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
.pp .pcard .im img{transition:none}}

/* ===== общая карточка товара в лентах (ProductTile) ===== */
/* ЕДИНАЯ карточка товара для всего сайта: главная, каталог, поиск, сравнение, корзина, карточка товара.
   Стили правятся только здесь. Цвета — только фирменные. */
.pp .tile{--navy:#1c3c74;--navy-d:#132b56;--yel:#e8e346;--ink:#1d2734;--muted:#5d6978;--line:#e2e6ec;--soft:#f3f5f8;--r:6px;
  box-sizing:border-box;position:relative;height:100%;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:0;background:#fff;
  font-family:"Noto Sans",Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.45;transition:box-shadow .2s,border-color .2s}
.pp .tile *{box-sizing:border-box}
.pp .tile a{color:inherit;text-decoration:none}
/* цвета ссылок-кнопок и названия — сильнее общего «ссылка без цвета» и стилей страницы */
.pp .tile a.tile-n{color:var(--navy)}
.pp .tile a.tb-navy{color:var(--navy)}
.pp .tile a.tb-navy:hover{color:#fff}
.pp .tile a.tb-cta{color:#fff}
.pp .tile:hover{border-color:#c9d3e0;box-shadow:0 10px 26px rgba(14,33,66,.08)}
.pp .tile-im{position:relative;display:block;aspect-ratio:4/3;margin:6px 6px 0;border-radius:0;background:#fff;overflow:hidden}
.pp .tile-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.pp .tile-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--soft);color:#9aa6b4;font-size:12px}
.pp .tile-tag{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:4px;font-size:13px;font-weight:500;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;background:#1c3c74;color:#fff}
.pp .tile-cmp{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--muted);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 6px rgba(14,33,66,.12)}
.pp .tile-cmp.on{color:#fff;background:var(--navy)}
.pp .tile-cmp:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pp .tile-b{flex:1;display:flex;flex-direction:column;gap:6px;padding:14px 16px 0;min-width:0}
.pp .tile-c{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp .tile-n{font-size:15.5px;font-weight:600;color:var(--navy);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.3em * 2);overflow-wrap:break-word}
.pp .tile-n:hover{text-decoration:underline;text-underline-offset:3px}
.pp .tile-k{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp .tile-m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:12.5px;color:var(--muted)}
/* наличие: фирменные цвета, без светофора */
.pp .av{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap}
.pp .av.ord{color:var(--muted);font-weight:500}
.pp .av svg{flex:none}
/* цена над своей кнопкой; если места мало — пары встают друг под другом, кнопки в ряду на одном уровне */
.pp .tile-buy{margin-top:auto;padding:12px 16px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px 10px;align-items:end}
.pp .pb{display:flex;flex-direction:column;gap:6px;min-width:0}
.pp .pb b{font-size:19px;font-weight:700;color:var(--ink);white-space:nowrap}
.pp .pb small{font-size:12px;color:var(--muted);margin-bottom:-6px;white-space:nowrap}
.pp .tb{all:unset;box-sizing:border-box;cursor:pointer;width:100%;height:48px;padding:0 10px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;white-space:nowrap}
.pp .tb:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pp .tb-cta{background:#cf4141;color:#fff}
.pp .tb-cta:hover{background:#b83737}
.pp .tb-cta.in{background:var(--navy)}
.pp .tb-navy{border:1px solid var(--line);background:#fff;color:var(--navy)}
.pp .tb-navy:hover{border-color:var(--navy);background:var(--navy);color:#fff}
/* вид «списком» в каталоге */
.pp .tile.list{display:grid;grid-template-columns:200px minmax(0,1fr) 260px;align-items:stretch}
.pp .tile.list .tile-im{margin:6px;aspect-ratio:auto;min-height:150px}
.pp .tile.list .tile-b{padding:16px 8px}
.pp .tile.list .tile-buy{padding:16px;border-left:1px solid var(--line);align-content:end}
@media (max-width:991px){
.pp .tile.list{grid-template-columns:150px minmax(0,1fr)}
.pp .tile.list .tile-buy{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}}
@media (max-width:479px){
.pp .tile-b{padding:10px 10px 0;gap:4px}
.pp .tile-n{font-size:13.5px}
.pp .tile-buy{padding:8px 10px 12px;grid-template-columns:1fr;gap:10px}
.pp .pb b{font-size:16px}
.pp .tb{height:48px;font-size:13px}
.pp .tile-cmp{width:32px;height:32px}
.pp .tile-num{display:none}
.pp .tile.list{grid-template-columns:110px minmax(0,1fr)}
.pp .tile.list .tile-im{min-height:110px}}

/* iPhone: не увеличивать текст самостоятельно — иначе блоки раздвигаются шире экрана */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ярлыки товаров — общий стиль сайта: «Хит продаж» жёлтый, «Новинка» синяя */
.pp .tile-tag.is-hit{background:#e8e346;color:#1d2734}


/* ===== дополнения для сайта (данные из админки, поведение js/product.js) ===== */
.pp [hidden]{display:none!important}
/* ленты: перетаскивание мышью, как на главной (CarouselKit) */
.pp .crsl{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;cursor:grab}
.pp .crsl:focus-visible,.pp [data-swipe]:focus-visible{outline:2px solid #1c3c74;outline-offset:4px}
.pp .crsl.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.pp .crsl.is-drag *{pointer-events:none}
.pp .crsl a,.pp .crsl img,.pp [data-swipe] img{-webkit-user-drag:none}
.pp .car > *{scroll-snap-align:start;min-width:0}
/* звёзды рейтинга: закрашены на величину оценки (--r из 5) */
.pp .stars{background:linear-gradient(90deg,#f0a400 calc(var(--r,0) * 20%),#d3d9e1 0);-webkit-background-clip:text;background-clip:text;color:transparent}
.pp .m-rev{color:inherit}
.pp .m-rev:hover{color:var(--navy)}
.pp .gx-ph{width:100%;height:100%}
.pp .tile-tags{position:absolute;top:12px;left:12px;z-index:2;display:flex;gap:6px}
.pp .tile-tags .tile-tag{position:static}
.pp .tile-tag.is-new,.pp .bdg.is-new{background:#1c3c74;color:#fff}
/* «Коротко о главном» — текст из поля «Анонс» */
/* списки в тексте — в стиле Webasto: квадратные маркеры фирменного синего, нумерация синими цифрами */
.pp .desc-txt ul,.pp .desc-txt ol{margin:0 0 14px;padding:0;list-style:none;line-height:1.65}
.pp .desc-txt ul > li,.pp .desc-txt ol > li{position:relative;padding-left:24px;margin:0 0 6px}
.pp .desc-txt ul > li::before{content:"";position:absolute;left:2px;top:.68em;width:7px;height:7px;background:var(--yel)}
.pp .desc-txt ol{counter-reset:li}
.pp .desc-txt ol > li{counter-increment:li;padding-left:30px}
.pp .desc-txt ol > li::before{content:counter(li) ".";position:absolute;left:0;top:0;min-width:22px;font-weight:700;color:var(--navy)}
.pp .desc-txt td ul,.pp .desc-txt td ol{margin:0}

.pp .desc-txt a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* отзывы и вопросы */
.pp .rev{max-width:820px}
.pp .rv-list{display:flex;flex-direction:column}
.pp .rv{padding:20px 0;border-bottom:1px solid var(--line)}
.pp .rv-list > .rv:first-child{padding-top:0}
.pp .rv-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:8px}
.pp .rv-h b{font-weight:700;color:var(--navy)}
.pp .rv-h time{font-size:13px;color:var(--muted)}
.pp .rv-t{line-height:1.65;overflow-wrap:break-word}
.pp .rv-t > *{margin:0}
.pp .rv-a{margin-top:12px;padding:14px 18px;background:var(--soft);box-shadow:inset 4px 0 0 var(--yel);line-height:1.6}
.pp .rv-a b{display:block;margin-bottom:4px;color:var(--navy)}
.pp .rv-sub{margin:12px 0 0 24px;padding-left:16px;border-left:2px solid var(--line)}
.pp .rv-sub .rv{padding:12px 0;border-bottom:0}
.pp .rv-none{margin:0;color:var(--muted)}
.pp .rv-f{margin-top:28px;padding:24px;background:var(--soft);display:flex;flex-direction:column;gap:14px}
.pp .rv-ft{font-size:18px;font-weight:700;color:var(--navy)}
.pp .rv-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pp .rv-in{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--muted)}
.pp .rv-in input,.pp .rv-in textarea{width:100%;min-height:46px;padding:11px 14px;border:1px solid var(--line);border-radius:4px;background:#fff;font:15px "Noto Sans",Arial,sans-serif;color:var(--ink)}
.pp .rv-in textarea{min-height:110px;resize:vertical}
.pp .rv-in input:focus,.pp .rv-in textarea:focus{outline:2px solid var(--navy);outline-offset:-1px;border-color:var(--navy)}
.pp .rv-in.bad input,.pp .rv-in.bad textarea{border-color:#cf4141}
.pp .rv-rate{margin:0;padding:0;border:0;display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:2px}
.pp .rv-rate legend{float:left;margin-right:10px;font-size:13.5px;color:var(--muted)}
.pp .rv-rate input{position:absolute;opacity:0;width:1px;height:1px}
.pp .rv-rate label{cursor:pointer;font-size:26px;line-height:1;color:#d3d9e1;padding:2px}
.pp .rv-rate input:checked ~ label,.pp .rv-rate label:hover,.pp .rv-rate label:hover ~ label{color:#f0a400}
.pp .rv-rate input:focus-visible + label{outline:2px solid var(--navy);outline-offset:2px}
.pp .rv-msg{margin:0;font-size:14px;color:#cf4141}
.pp .rv-msg.ok{color:var(--navy);font-weight:600}
.pp .rv-f .btn{align-self:flex-start}
@media (max-width:767px){.pp .rv-row{grid-template-columns:1fr}.pp .rv-f{padding:20px 16px}.pp .rv-f .btn{align-self:stretch}.pp .rv-sub{margin-left:8px}}
/* сообщение «Товар в корзине» */
.pp-toast{position:fixed;left:50%;bottom:24px;z-index:1100;transform:translateX(-50%);display:flex;align-items:center;gap:16px;max-width:calc(100% - 32px);padding:14px 18px;background:#0e2142;color:#fff;font:600 14.5px/1.4 "Noto Sans",Arial,sans-serif;box-shadow:0 10px 30px rgba(14,33,66,.25)}
.pp-toast a{color:#e8e346;text-decoration:underline;white-space:nowrap}
@media (max-width:767px){.pp-toast{bottom:84px}}
/* фото всегда заполняет контейнер одного размера — высота блоков не зависит от пропорций фото */
.pp .gx-img{position:absolute;inset:0}
.pp .gx-t img{position:absolute;inset:0}
/* иконка «Сравнить»: компьютер — квадратная со скруглением 4 px и рамкой (как в карточке товара), телефон и планшет вертикально — круглая с тенью */
@media (min-width:768px){.pp .tile-cmp{border-radius:4px;border:1px solid var(--line);box-shadow:none;color:var(--navy)}.pp .tile-cmp:hover{border-color:var(--navy)}.pp .tile-cmp.on,.pp .tile-cmp.on:hover{background:var(--navy);border-color:var(--navy);color:#fff}}
/* ссылка «Все …» рядом со стрелками — как на главной: жирная, синяя, жёлтое подчёркивание, стрелка → (общее правило для всех страниц) */
.pp .sec-nav .lnk{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:700;line-height:1.3;color:var(--navy)!important;border-bottom:2px solid var(--yel);padding-bottom:4px;white-space:nowrap}
.pp .sec-nav .lnk svg{width:18px;height:18px;flex:none}
.pp .sec-nav .lnk:not(:has(svg))::after{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .15s}
.pp .sec-nav .lnk:hover svg,.pp .sec-nav .lnk:hover::after{transform:translateX(3px)}
@media (max-width:767px){.pp .sec-nav .lnk{font-size:15px}}

/* ===== компьютер: карточка (фото + покупка) помещается в один экран под закреплённым меню ===== */
@media (min-width:992px){
  .pp .crumbs{padding-top:16px}
  .pp .pc{margin-top:16px;gap:40px}
  .pp .pc > .gal-col{top:86px}
  /* фото по высоте = колонка покупки (фото + превью вровень с нижним краем блока преимуществ); одно фото без превью занимает всю высоту */
  .pp .pc{align-items:stretch}
  .pp .pc > .gal-col{display:flex;flex-direction:column}
  .pp .gx{flex:1;display:flex;flex-direction:column;min-height:0}
  .pp .gx-main{aspect-ratio:var(--ar,4/3);height:auto;flex:none;min-height:0}
  .pp .gx-th{flex:none}
  .pp .gx-th{margin-top:10px}
  .pp .gx-t{flex-basis:var(--th,120px)}
  .pp .buy{gap:14px}
  .pp .pt{font-size:32px;line-height:1.15}
  .pp .opts{gap:6px}
  .pp .opt{padding:12px 18px;gap:12px}
  .pp .opt-t b{font-size:15.5px}
  .pp .opt-t small{font-size:13px}
  .pp .opt-inc{margin-top:4px}
  .pp .opt em{font-size:18px}
  .pp .acts .btn-cta{height:50px}
  .pp .dlv{padding:12px 16px;gap:6px}
  .pp .info svg{width:18px;height:18px}
  .pp .info{padding:2px 0}
  .pp .info div{grid-template-columns:20px minmax(0,1fr);gap:10px;padding:9px 16px;font-size:13px;line-height:1.45}
  .pp .info b{display:inline;margin-right:6px;font-size:13.5px}
  .pp .dlv{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:16px;row-gap:10px}
  .pp .dlv > *{grid-column:1 / -1}
  .pp .dlv > .dlv-h{grid-column:1;grid-row:1}
  .pp .dlv > .dlv-all{grid-column:2;grid-row:1;padding-top:1px}
  .pp .info-note{margin-top:-6px}
}
@media (min-width:992px){
  .pp .buy{gap:12px}
  .pp .pt{font-size:30px}
  .pp .opt{padding:10px 18px}
  .pp .dlv-all{white-space:nowrap}
}
/* невысокие экраны ноутбуков: прячем строку «что входит» у вариантов, чтобы карточка осталась в одном экране */
@media (min-width:992px) and (max-height:820px){
  .pp .opt-inc{display:none}
  .pp .gx-t{flex-basis:var(--th,104px)}
}
/* документы: длинное название переносится на 2 строки и не вылезает из плашки */
.pp .doc > span{min-width:0;flex:1}
.pp .doc b{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere}
/* совсем невысокие экраны (ноутбук 1366×768, 1280×720): прячем пояснение под названием варианта, заголовок чуть меньше */
@media (min-width:992px) and (max-height:740px){
  .pp .buy{gap:10px}
  .pp .pt{font-size:26px}
  .pp .opt-t small{display:none}
  .pp .opt{padding:9px 16px}
  .pp .info div{padding:10px 12px}
}
/* номер детали — сразу под названием */
.pp .pnum{margin:-4px 0 0;font-size:14px;color:var(--muted)}
.pp .pnum b{color:var(--ink);font-weight:700;letter-spacing:.01em}
/* расчёт доставки */
.pp .dlv-out{display:flex;flex-direction:column;gap:8px}
.pp .dlv-res:empty{display:none}
.pp .dlv-res li.dlv-note{display:block;color:var(--muted);font-size:13px}
.pp .dlv-res em.free{color:var(--navy)}
.pp .dlv-btn[disabled]{opacity:.7;cursor:default}
@media (min-width:992px) and (max-height:740px){.pp .dlv-t{display:none}}
@media (min-width:992px) and (max-height:860px){.pp .dlv-t{display:none}.pp .opt-inc{display:none}.pp .info div{padding:7px 16px}.pp .dlv{row-gap:8px}}
/* фото товара: целиком, без обрезки; белый фон фото сливается с серой подложкой */
.pp .gx-img{object-fit:contain;padding:0;z-index:1}
.pp .gx-t img{object-fit:contain;mix-blend-mode:multiply;padding:0}
.pp .lb-img{background:#fff}

/* подсказка ⓘ у гарантии — как «Способы оплаты» в подвале: белое окошко над значком при наведении или нажатии */
.pp .tip{position:relative;display:inline-flex;vertical-align:-3px}
.pp .tip-b{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin:-3px 0;border-radius:50%;color:rgba(255,255,255,.8)}
.pp .tip-b:hover,.pp .tip-b:focus-visible{color:#fff}
.pp .tip-b:focus-visible{outline:2px solid #fff;outline-offset:1px}
.pp .tip-p{display:none;position:absolute;right:-14px;bottom:calc(100% + 10px);z-index:20;width:max-content;max-width:min(300px,calc(100vw - 48px));background:#fff;color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.25);padding:12px 14px;font-size:13.5px;line-height:1.5;font-weight:400;white-space:normal;text-align:left}
.pp .tip-p::after{content:"";position:absolute;right:17px;top:100%;border:8px solid transparent;border-top-color:#fff}
.pp .tip:hover .tip-p,.pp .tip:focus-within .tip-p{display:block}

.pp .info .tip-p{color:var(--ink)}
.pp .info .tip-b svg{color:inherit;width:16px;height:16px;margin:0}

/* доставка: вкладки, «Закрыть», как в старом виджете */
.pp .dlv > .dlv-x{grid-column:2;grid-row:1;justify-self:end}
.pp .dlv.is-open > .dlv-all{display:none}
.pp .dlv-x{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--navy)}
.pp .dlv-x:hover{color:var(--ink)}
.pp .dlv-x:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pp .dlv-x[hidden]{display:none}
.pp .dlv-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-top:4px}
.pp .dlv-tabs[hidden]{display:none}
.pp .dlv-tabs button{all:unset;box-sizing:border-box;cursor:pointer;padding:8px 2px;margin-right:20px;font-size:13.5px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.pp .dlv-tabs button.on{color:var(--navy);border-bottom-color:var(--yel)}
.pp .dlv-tabs button[hidden]{display:none}
.pp .dlv-tabs button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pp .dlv-tabs + .dlv-res li:first-child{border-top:0}
.pp .dlv-res li[hidden]{display:none}
.pp .dlv-in input:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 40px #fff;-webkit-text-fill-color:var(--ink)}

/* кнопки, вставленные в описание в админке (старые классы btn/btn1) — кнопка сайта */
.pp .desc-txt a.btn,.pp .desc-txt a.btn1{display:inline-flex;align-items:center;justify-content:center;height:42px;margin:0 0 0 20px;vertical-align:middle;padding:0 22px;border-radius:4px;background:var(--navy);color:#fff;font-size:14.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.pp .desc-txt a.btn:hover,.pp .desc-txt a.btn1:hover{background:var(--navy-d)}
.pp .desc-txt a.btn:focus-visible,.pp .desc-txt a.btn1:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
/* кнопка из админки стоит в одной строке с телефоном (перенос строки перед ней скрываем); на телефоне — под текстом */
.pp .desc-txt br:has(+ a.btn),.pp .desc-txt br:has(+ a.btn1){display:none}
@media (max-width:600px){.pp .desc-txt br:has(+ a.btn),.pp .desc-txt br:has(+ a.btn1){display:inline}.pp .desc-txt a.btn,.pp .desc-txt a.btn1{margin:10px 0 0}}

/* фото любой формы (вертикальные с телефона, квадратные, широкие) — целиком, без обрезки; пустые поля по бокам заполняет мягко размытая копия этого же фото */
.pp .gx-bg{position:absolute;inset:-30px;background:center/cover no-repeat;filter:blur(28px) saturate(1.1);opacity:.6;z-index:0;pointer-events:none}
.pp .gx-main .g-badges,.pp .gx-main .gx-btn,.pp .gx-main .gx-count,.pp .gx-main .gx-play{z-index:2}

/* предметные фото на белом фоне (pk) — как раньше: на сером фоне галереи, без размытой подложки; живые фото — целиком с размытой подложкой; миниатюры живых фото заполняют квадрат */
.pp .gx-img.pk{mix-blend-mode:multiply;padding:0}
.pp .gx-main:has(.gx-img.pk) .gx-bg{display:none}
.pp .gx-t img{object-fit:cover;mix-blend-mode:normal;padding:0}
.pp .gx-t img.pk{object-fit:cover;mix-blend-mode:multiply;padding:0}

/* ширина текста описания — как была (удобно читать); таблицы, фото и видео — на всю ширину блока */
.pp .desc-txt :is(p,li,h2,h3,h4,blockquote){max-width:760px}







/* фото и схемы в тексте: целиком, по клику — на весь экран; значок-лупа подсказывает, что фото открывается */
.pp .desc-txt img{display:block;max-width:100%;height:auto;margin:0}
.pp .desc-txt p:has(> a > img),.pp .desc-txt p:has(> img){margin:18px 0}
.pp .desc-txt .zm{position:relative;display:inline-block;max-width:100%;cursor:zoom-in;text-decoration:none;color:inherit}
.pp .desc-txt .zm::after{content:"";position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:4px;background:rgba(19,43,86,.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center/20px no-repeat;transition:transform .15s,background-color .15s;pointer-events:none}
.pp .desc-txt .zm:hover::after{background-color:var(--navy);transform:scale(1.06)}
.pp .desc-txt .zm:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.pp .desc-txt .img_title{margin-top:8px;font-size:13px;line-height:1.45;color:var(--muted)}
/* видео в тексте (VK, YouTube, Rutube): на всю ширину текста, 16:9 */
.pp .desc-txt iframe{display:block;width:100%;max-width:820px;height:auto;aspect-ratio:16/9;border:0;background:#000}
.pp .desc-txt p:has(> iframe){margin:18px 0}
.pp .lb-cap{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#fff;font-size:14px;padding:0 70px}

/* фото и видео в тексте — современный контейнер: светлая подложка, мягкая тень, подпись снизу с жёлтой линией */
.pp .desc-txt .dm{margin:26px 0;max-width:820px;background:#fff;box-shadow:0 1px 2px rgba(14,33,66,.05),0 4px 16px rgba(14,33,66,.07)}
.pp .desc-txt .dm-m{position:relative;display:flex;align-items:center;justify-content:center;background:var(--soft);overflow:hidden}
.pp .desc-txt .dm-p .zm{display:block;width:100%}
.pp .desc-txt .dm-p img{width:auto;max-width:100%;max-height:min(70vh,640px);margin:0 auto;object-fit:contain}
.pp .desc-txt .dm-v .dm-m{background:#0b1426}
.pp .desc-txt .dm-v iframe{max-width:none;width:100%}
.pp .desc-txt .dm .img_title{display:none}
.pp .desc-txt p:empty{display:none}
.pp .desc-txt .dm-c{display:flex;align-items:flex-start;gap:10px;padding:13px 18px 14px;border-top:3px solid var(--yel);font-size:14px;font-weight:400;line-height:1.45;color:var(--muted)}
.pp .desc-txt .dm-c svg{flex:none;margin-top:1px;color:var(--navy)}
.pp .desc-txt .dm-c span:empty{display:none}
@media (max-width:767px){.pp .desc-txt .dm{margin:20px 0}.pp .desc-txt .dm-c{padding:10px 14px;font-size:13px}}

/* как в каталоге Webasto: вводный текст слева, синий блок «Коротко о главном» справа */
.pp .d-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:48px;align-items:start}
.pp .d-lead > .desc-txt :is(p,li){max-width:none}
.pp .d-lead > .kf{margin:0}
.pp .d-lead .kf ul,.pp .d-lead .kf-b ul{columns:1}
@media (max-width:991px){.pp .d-lead{grid-template-columns:1fr;gap:22px}}

/* «Коротко о главном» — как «Key facts at a glance» в каталоге Webasto: синий блок с градиентом, белый жирный заголовок, пункты с белыми квадратными маркерами */
.pp .kf{background:linear-gradient(160deg,#27508f 0%,#173061 100%);color:#fff;border-radius:0;padding:28px 30px 26px}
.pp .kf-t{display:block;font-size:17px;font-weight:700;letter-spacing:0;text-transform:none;color:#fff;margin:0 0 14px}
.pp .kf ul,.pp .kf-b ul{list-style:none;margin:0;padding:0;columns:1}
.pp .kf li,.pp .kf-b li{position:relative;break-inside:avoid;padding:5px 0 5px 20px;font-size:15px;line-height:1.45;color:#fff;overflow-wrap:break-word;hyphens:auto}
.pp .kf li::before,.pp .kf-b li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:7px;background:#fff}
.pp .kf-b > *{margin:0}
.pp .kf-b a{color:#fff;text-decoration:underline}
@media (max-width:767px){.pp .kf{padding:22px 20px}}.pp .tp.desc > .kf ul{columns:2 280px;column-gap:40px}

/* номера и применимость запчасти: плашки номеров, подзаголовки — обычным шрифтом */
.pp .desc-txt .xl{max-width:820px;margin:16px 0 22px;padding:16px 20px 18px;background:#fff;box-shadow:0 1px 2px rgba(14,33,66,.05),0 4px 16px rgba(14,33,66,.07)}
.pp .desc-txt .xl-h{margin:12px 0 8px;font-size:14px;font-weight:600;color:var(--navy);line-height:1.4}
.pp .desc-txt .xl-h:first-child{margin-top:0}
.pp .desc-txt .xl-c{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.pp .desc-txt .xl-c > li{margin:0;padding:4px 10px;background:var(--soft);border:1px solid #e1e6ee;font-size:13.5px;line-height:1.4;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
.pp .desc-txt .xl-c > li::before{content:none}
.pp .desc-txt .xl-c + .xl-c{margin-top:6px}
.pp .desc-txt .xl-l{margin:12px 0 6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pp .desc-txt .xl-h + .xl-l,.pp .desc-txt .xl-l:first-child{margin-top:4px}
.pp .desc-txt .xl-car > li{background:#fff;border-color:#cfd8e4;color:var(--navy);font-weight:600;padding-right:10px}
.pp .desc-txt .xl-h{font-size:15px}
.pp .desc-txt .xl-c > li{display:inline-flex;align-items:center;gap:6px;padding-right:6px}
.pp .desc-txt .xl-cp{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin:-3px 0;color:#b4bcc8;transition:color .15s}
.pp .desc-txt .xl-cp:hover{color:var(--navy)}
.pp .desc-txt .xl-cp.ok{color:#1f8a4c}
.pp .desc-txt .xl-cp:focus-visible{outline:2px solid var(--navy);outline-offset:1px}

/* миниатюры: если не помещаются в ряд — карусель со стрелками по краям (стрелки появляются только когда есть что листать) */
.pp .gx-thw{position:relative;flex:none}
.pp .gx-thw .gx-th{scroll-behavior:smooth}
.pp .gx-ta{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;top:50%;margin-top:-17px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--navy);border-radius:4px;box-shadow:0 2px 8px rgba(14,33,66,.18);z-index:2}
.pp .gx-ta.l{left:-6px}.pp .gx-ta.r{right:-6px}
.pp .gx-ta[hidden]{display:none}
.pp .gx-ta:hover{background:var(--navy);color:#fff}
.pp .gx-ta:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (max-width:767px),(hover:none){.pp .gx-ta{display:none}}

/* фото занимает весь контейнер без обрезки: рамка большого фото принимает пропорции самого фото (скрипт ставит --ar по фото; очень вытянутые вертикальные — не уже 4:5) */
.pp .gx-main{aspect-ratio:var(--ar,4/3)}
.pp .gx-img{object-fit:contain}

/* одна кнопка действия: поле выбора не показываем, цена — в одной строке с кнопкой */
.pp .opts.one{display:none}
.pp .acts.one{align-items:center;gap:24px}
.pp .acts-pr{display:flex;flex-direction:column;flex:none;gap:2px}
.pp .acts-pr small{font-size:13px;color:var(--muted);line-height:1.2}
.pp .acts-pr b{font-size:30px;font-weight:700;color:var(--ink);line-height:1.1;white-space:nowrap}
.pp .acts.one .btn-cta{flex:1;width:auto}
@media (max-width:767px){.pp .acts.one{gap:16px}.pp .acts-pr b{font-size:24px}}

/* карточка в списке: рейтинг звёздами и каталожные номера (видны на всех экранах) */
.pp .tile-rt{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);line-height:1.2;min-height:18px}
.pp .tile-rt .stars{font-size:14px;letter-spacing:1px}
.pp .tile-rt b{font-weight:700;color:var(--ink)}
.pp .tile-art{font-size:13px;color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
.pp .tile-art b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:479px){.pp .tile-rt{font-size:12px;gap:4px}.pp .tile-rt .stars{font-size:12px}.pp .tile-art{font-size:12px}}

/* фото в карточках списка: белые поля обрезает js/tiles.js, а одинаковый отступ вокруг товара задаётся здесь — товары выглядят одного размера */
.pp .tile-im img{padding:7%;box-sizing:border-box}
.pp .tile.list .tile-im img{padding:5%}
/* ===== длинный текст раздела: содержание чипами, текст свёрнут с растворением, кнопка «Читать полностью» ===== */
.pp .dx-toc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 24px}
.pp .dx-toc > span{flex:none;margin-right:4px;font-size:13px;font-weight:600;color:var(--muted)}
.pp .dx-toc a{height:38px;padding:0 16px;border:1px solid var(--line);border-radius:999px;display:inline-flex;align-items:center;font-size:14px;font-weight:600;color:var(--navy);text-decoration:none;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pp .dx-toc a:hover{border-color:var(--navy)}
.pp .dx{position:relative}
.pp .dx.cut{max-height:440px;overflow:hidden}
.pp .dx.cut::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(rgba(255,255,255,0),#fff 88%);pointer-events:none}
.pp .dx-more{all:unset;box-sizing:border-box;align-self:flex-start;justify-self:start;width:auto;cursor:pointer;display:inline-flex;align-items:center;gap:10px;height:44px;margin-top:8px;padding:0 20px;border:1px solid var(--line);background:#fff;border-radius:4px;font-size:14.5px;font-weight:600;color:var(--navy);transition:background-color .15s,color .15s}
.pp .dx-more:hover{background:var(--navy);color:#fff}
.pp .dx-more:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pp .dx-more svg{transition:transform .2s}
.pp .dx-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.pp .desc-txt :is(h2,h3){scroll-margin-top:96px}
@media (max-width:767px){.pp .dx.cut{max-height:380px}.pp .dx-toc{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 20px;padding:0 16px;scrollbar-width:none}.pp .dx-toc::-webkit-scrollbar{display:none}.pp .dx-toc a{flex:none}.pp .dx-more{width:100%;justify-content:center;border-radius:999px}}