/* Главная bruleur.ru. Секции .sct внутри .bph — как в макете (/design/, «Контент и главная»), образец — пилот burnerparts.
   Подключается только главной (core/home.html). Токены — из main.css (:root): --ink, --ink-2, --muted, --surface, --surface-2, --surface-3.
   Новые классы описаны в макете: .hero__btns, .hero__cta--ghost, .hero__poster, .more, .brand-grid/.brand-tile, .assist, .info-card__step. */

.bph{--ln:var(--surface-3,#e7eaee);--mut:var(--muted,#8e93a0);--nk:var(--ink,#0b0c0f);--nk2:var(--ink-2,#44474e);--acc:#1a1d23;--rad:var(--radius-lg,18px);--orange:#e8401c;
	container:bph/inline-size;color:var(--nk2)}
.bph .sct{padding:3.25rem 0}
.bph .sct:first-child{padding-top:.5rem}
.bph .sct+.sct{border-top:1px solid var(--ln)}
.bph .st{margin:0 0 .4rem;font-weight:700;letter-spacing:-.02em;color:var(--nk);font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.15}
.bph .ss{color:var(--mut);margin:0 0 2rem;font-size:1rem}
.bph .tc{text-align:center}
.bph .tc .ss,.bph .ss.tc{margin-left:auto;margin-right:auto}
/* ссылка-продолжение под секцией: «Весь каталог →» */
.bph .more{margin:1.7rem 0 0;font-size:.95rem}
.bph .more a{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--nk);text-decoration:none;transition:color .15s}
.bph .more a:hover{color:var(--orange)}
.bph .more svg{width:1rem;height:1rem}
.bph .more .u{display:inline;font-weight:500;color:var(--nk);text-decoration:underline;text-decoration-color:var(--ln);text-underline-offset:3px}
.bph .more .u:hover{text-decoration-color:currentColor}
/* якоря не прячутся под липкой верхней панелью телефона */
.bph [id]{scroll-margin-top:1rem}

/* ── ПЕРВЫЙ ЭКРАН ── */
.bph .hero__panel{position:relative;overflow:hidden;border-radius:var(--rad);padding:clamp(1.6rem,4vw,3rem);color:var(--nk);background:radial-gradient(circle at center,rgba(17,20,27,.10) 1px,transparent 1.6px) 0 0/22px 22px,radial-gradient(135% 130% at 86% 10%,var(--surface) 0%,#eef1f5 52%,#e6eaf0 100%);border:1px solid var(--ln);box-shadow:0 1rem 2.6rem rgba(15,17,22,.07);min-height:clamp(420px,50vh,560px);display:flex;flex-direction:column;justify-content:center}
.bph .hero__art{position:absolute;inset:0;z-index:0;touch-action:pan-y pinch-zoom}
.bph .hero__art.is-ready{cursor:grab}
.bph .hero__art.is-ready:active{cursor:grabbing}
.bph .hero__art canvas{display:block;opacity:0;transition:opacity .8s}
.bph .hero__art.is-ready canvas{opacity:1}
/* снимок горелки: виден сразу (3D грузится лениво и только на десктопе), уступает место живой модели */
/* широкая панель: снимок встаёт туда же, где в кадре 3D-сцены окажется модель (справа от текста); узкая — по центру сцены сверху */
.bph .hero__poster{position:absolute;left:69.1%;top:33.5%;width:28.1%;height:34.2%;object-fit:contain;pointer-events:none;user-select:none;transition:opacity .6s}
.bph .hero__art.is-ready .hero__poster{opacity:0}
.bph .hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#f1f3f6 0%,rgba(241,243,246,.92) 28%,rgba(241,243,246,.6) 50%,rgba(241,243,246,.12) 76%,rgba(241,243,246,0) 90%)}
.bph .hero__in{position:relative;z-index:2;max-width:36rem;pointer-events:none}
/* текст можно выделять; мимо текста указатель уходит в 3D-сцену */
.bph .hero__in>*,.bph .hero__in a,.bph .hero__in button{pointer-events:auto}
.bph .hero__ey{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--nk2);background:rgba(15,17,22,.06);padding:.4rem .85rem;border-radius:50rem;margin-bottom:1.05rem}
.bph .hero__h1{font-weight:700;line-height:1.07;letter-spacing:-.025em;font-size:clamp(1.9rem,4.6vw,3.1rem);margin:0 0 1rem;color:var(--nk)}
.bph .hero__sub{color:var(--nk2);font-size:1.05rem;line-height:1.55;margin:0 0 1.5rem}
.bph .hero__btns{display:flex;flex-wrap:wrap;gap:.6rem}
.bph .hero__cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--ink-hover);color:var(--dark-ink);font-weight:600;font-size:1rem;padding:.85rem 1.6rem;border-radius:11px;text-decoration:none;transition:background .15s,color .15s}
.bph .hero__cta:hover{background:#000;color:var(--dark-ink)}
.bph .hero__cta svg{width:1rem;height:1rem}
.bph .hero__cta--ghost{background:var(--surface,var(--surface));color:var(--nk);box-shadow:inset 0 0 0 1px var(--ln)}
.bph .hero__cta--ghost:hover{background:var(--surface-2,var(--surface-2));color:var(--nk)}
.bph .hero__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.bph .hero__chips span{font-size:.83rem;border:1px solid var(--ln);background:rgba(255,255,255,.6);border-radius:50rem;padding:.38rem .85rem;color:var(--nk2)}
.bph .hero__stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,auto);gap:2.4rem;margin-top:2.25rem;padding-top:1.6rem;border-top:1px solid rgba(15,17,22,.1);justify-content:start}
.bph .hero__stats .n{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:700;color:var(--nk);line-height:1;font-variant-numeric:tabular-nums}
.bph .hero__stats .l{color:var(--mut);font-size:.84rem;margin-top:.35rem}
.bph .b3dlabel{position:absolute;right:1.1rem;top:3.7rem;font-size:.78rem;font-weight:600;color:var(--dark-ink);background:var(--ink-hover);padding:.32rem .72rem;border-radius:50rem;opacity:0;transform:translateY(-5px);transition:opacity .35s,transform .35s;pointer-events:none;z-index:3;box-shadow:0 .3rem .9rem rgba(15,17,22,.18)}
.bph .b3dlabel.on{opacity:1;transform:translateY(0)}
.bph .hero__art.has-tip~.b3dhint,.bph .hero__art.has-tip~.b3dlabel{opacity:0}
.bph .b3dhint{position:absolute;right:1.1rem;bottom:.7rem;font-size:.72rem;letter-spacing:.02em;color:#5f6470;pointer-events:none;z-index:3}
/* кнопки режимов 3D-модели */
.bph .b3dbar{position:absolute;right:1.1rem;top:1.1rem;z-index:3;display:flex;gap:.4rem}
.bph .b3dbar[hidden]{display:none}
.bph .b3dbar button{border:1px solid var(--ln);background:rgba(255,255,255,.88);color:var(--nk);font:inherit;font-size:.8rem;font-weight:600;line-height:1;padding:.6rem .9rem;border-radius:50rem;cursor:pointer;transition:background .15s,color .15s,border-color .15s;box-shadow:0 .2rem .7rem rgba(15,17,22,.06)}
.bph .b3dbar button:hover{background:var(--surface);border-color:#c9ced6}
.bph .b3dbar button[aria-pressed=true]{background:var(--ink-hover);border-color:var(--ink-hover);color:var(--dark-ink)}
.bph .b3dbar button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.bph .b3dbar .b3dbar__x{padding:.6rem .75rem}
.bph .b3dbar .b3dbar__x[hidden]{display:none}
/* режим фокуса: пользователь разбирает модель — текст hero уходит, модель встаёт в центр с подписями */
.bph .hero__in,.bph .hero__stats,.bph .hero__scrim{transition:opacity .45s,visibility .45s}
.bph .hero__panel.is-focus .hero__in,.bph .hero__panel.is-focus .hero__stats,.bph .hero__panel.is-focus .hero__scrim{opacity:0;visibility:hidden}
/* модель рядом с текстом — только если панели хватает ширины (считается по самой панели, а не по окну: мешает сайдбар);
   уже — модель сверху отдельной сценой, текст под ней. Сцена резервируется сразу, чтобы текст не прыгал после загрузки */
.bph .hero{container:hero/inline-size}
@container hero (max-width: 999px){
.bph .hero__panel{--stage:clamp(280px,85cqi,380px);min-height:0;justify-content:flex-start;padding-top:calc(var(--stage) + .25rem)}
.bph .hero__art{inset:0 0 auto 0;height:var(--stage)}
.bph .hero__poster{left:0;top:0;width:100%;height:100%;padding:.4rem 0 0}
.bph .hero__scrim{display:none}
.bph .hero__in{max-width:none}
.bph .b3dbar{left:1rem;right:1rem;top:1rem;flex-wrap:wrap}
.bph .b3dbar .b3dbar__x{display:none}
.bph .b3dlabel{left:1rem;right:auto;top:calc(var(--stage) - 2.6rem)}
.bph .b3dhint{left:1rem;right:1rem;top:calc(var(--stage) - 1.6rem);bottom:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.bph .b3dlabel.on~.b3dhint{opacity:0}
}
@container hero (max-width: 360px){.bph .b3dbar button{padding:.55rem .7rem;font-size:.76rem}}
/* 3D не загрузилась (нет WebGL, ошибка) — модель заменяет снимок; сцену оставляем со снимком */
.bph .hero__panel.no-3d .b3dbar,.bph .hero__panel.no-3d .b3dhint{display:none}
/* подсказки и выноски 3D-модели (создаёт static/bp/3d/burner3d-riello.js) */
.b3d-tip{position:absolute;z-index:6;pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:8px 11px;border-radius:10px;background:var(--ink-hover);color:var(--dark-ink);font-size:12.5px;line-height:1.3;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.2);white-space:nowrap}
.b3d-tip span{color:#ffb37a;font-size:11.5px}
.b3d-tip[hidden]{display:none}
.b3d-tip.is-touch{pointer-events:auto}
.b3d-pins{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
/* слой подписей не перехватывает мышь (модель можно вращать и между подписями) — клики ловят только сами подписи */
.b3d-pins.is-live .b3d-pin{pointer-events:auto}
.b3d-leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.b3d-leaders line{stroke:var(--ink-hover);stroke-opacity:.35;stroke-width:1}
.b3d-dot{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(232,64,28,.22)}
.b3d-pin{position:absolute;left:0;top:0;display:inline-flex;flex-direction:column;padding:5px 9px;border-radius:9px;background:rgba(255,255,255,.95);box-shadow:0 2px 12px rgba(15,17,22,.12);text-decoration:none;color:var(--ink);white-space:nowrap;line-height:1.25}
.b3d-pin b{font-size:12px;font-weight:600}
.b3d-pin small{font-size:10.5px;color:#656a74}
a.b3d-pin:hover,a.b3d-pin:focus-visible{background:var(--ink-hover);color:var(--dark-ink)}
a.b3d-pin:hover small,a.b3d-pin:focus-visible small{color:#ffb37a}

/* ── РАЗДЕЛЫ: плитки — static/bp/css/shelf.css (.cshelf-grid, .cshelf-pop) ── */

/* ── ПОМОЧЬ ПОДОБРАТЬ (место под помощника: core/_home_assist.html) ── */
.bph .sct.assist{border-top:0;padding:0}
.bph .sct.assist+.sct{border-top:0}
.bph .assist__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 2.5rem;align-items:center;background:var(--surface-2,var(--surface-2));border-radius:16px;padding:2rem 2.2rem}
.bph .assist .st{margin-bottom:.35rem}
.bph .assist .ss{margin:0;max-width:38rem}
.bph .assist__slot{display:flex;flex-wrap:wrap;gap:.6rem}
.bph .assist__btn{display:inline-flex;align-items:center;gap:.55rem;min-height:48px;padding:0 1.25rem;border-radius:11px;background:var(--surface,var(--surface));color:var(--nk);font-weight:600;font-size:.95rem;text-decoration:none;transition:background .15s,color .15s}
.bph .assist__btn:hover{background:#e9ecef}
.bph .assist__btn svg{width:1.15rem;height:1.15rem;flex:none}
.bph .assist__btn--main{background:var(--ink-hover);color:var(--dark-ink)}
.bph .assist__btn--main:hover{background:#000}
@container bph (max-width: 799px){
.bph .assist__box{grid-template-columns:1fr;padding:1.5rem 1.25rem}
.bph .assist__btn{flex:1 1 100%;justify-content:center}
}

/* ── ПОПУЛЯРНЫЕ ТОВАРЫ: карточки .shop-card из main.css ── */
.bph .pop-tabs{display:flex;justify-content:center;gap:6px;margin:0 0 14px;overflow-x:auto;scrollbar-width:none}
.bph .pop-tabs::-webkit-scrollbar{display:none}
.bph .pop-tab{flex:none;height:36px;padding:0 16px;border:0;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.bph .pop-tab:hover{background:var(--surface-3)}
.bph .pop-tab.is-active{background:var(--ink);color:#fff}
.bph .pop-tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.bph .pop-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@container bph (max-width: 699px){
.bph .pop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.bph .pop-grid>li:nth-child(n+7){display:none}
}

/* ── МАРКИ ── */
.bph .brand-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.7rem}
.bph .brand-tile{display:flex;align-items:center;justify-content:center;height:84px;padding:.8rem 1rem;border-radius:var(--radius-lg);background:var(--surface-2,var(--surface-2));color:var(--nk);text-decoration:none;transition:background .15s}
.bph .brand-tile:hover{background:var(--surface-3,var(--surface-3))}
.bph .brand-tile img{max-width:100%;max-height:46px;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1);opacity:.72;transition:filter .2s,opacity .2s}
.bph .brand-tile:hover img{filter:none;opacity:1}
.bph .brand-tile span{font-weight:700;font-size:1rem;letter-spacing:-.01em;text-align:center;overflow-wrap:anywhere;color:var(--nk2)}
@container bph (max-width: 799px){.bph .brand-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container bph (max-width: 599px){
.bph .brand-grid{gap:.5rem}
.bph .brand-tile{height:64px;padding:.5rem .6rem}
.bph .brand-tile img{max-height:34px}
.bph .brand-tile span{font-size:.88rem}
.bph .brand-grid>.brand-tile:nth-child(n+13){display:none}
}

/* ── КАК ЗАКАЗАТЬ: .info-grid / .info-card из pages.css + номер шага ── */
.bph .how-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.bph .how-grid .info-card{position:relative}
.bph .info-card__step{position:absolute;top:1rem;right:1.2rem;font-size:2rem;line-height:1;font-weight:700;color:#c9ced6;letter-spacing:-.03em}
.bph .how__alt{max-width:46rem;margin-left:auto;margin-right:auto;line-height:1.6;color:var(--nk2)}
@container bph (max-width: 899px){.bph .how-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container bph (max-width: 559px){
.bph .how-grid{grid-template-columns:1fr;gap:.6rem}
/* шаг в одну строку: значок слева, заголовок и текст справа */
.bph .how-grid .info-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.9rem;align-items:start;padding:1rem 1.1rem}
.bph .how-grid .info-card__icon{grid-row:1/3;margin:0}
.bph .how-grid .info-card h3{margin:0 0 .15rem;padding-right:1.8rem}
.bph .info-card__step{top:.8rem;right:1rem;font-size:1.5rem}
}

/* ── ДОВЕРИЕ ── */
.bph .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ln);border:1px solid var(--ln);border-radius:16px;overflow:hidden}
.bph .trust__i{background:var(--surface,var(--surface));padding:1.4rem 1.3rem;display:flex;gap:.85rem;align-items:flex-start}
.bph .trust__ico{flex:0 0 auto;width:2.7rem;height:2.7rem;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--nk);background:var(--surface-2,var(--surface-2));border:1px solid var(--ln)}
.bph .trust__ico svg{width:1.35rem;height:1.35rem}
.bph .trust__t{display:block;font-size:.98rem;font-weight:600;color:var(--nk);margin:0 0 .22rem;line-height:1.2}
.bph .trust__d{display:block;font-size:.84rem;color:var(--mut);margin:0;line-height:1.45}
@container bph (max-width: 979px){.bph .trust{grid-template-columns:repeat(2,1fr)}}
@container bph (max-width: 559px){.bph .trust{grid-template-columns:1fr}}

/* ── ВОПРОСЫ ── */
.bph .faqwrap{max-width:46rem;margin:0 auto}
.bph .faq .q{width:100%;text-align:left;background:var(--surface,var(--surface));border:1px solid var(--ln);border-radius:var(--radius-lg);padding:1rem 1.1rem;font-weight:600;font-size:.97rem;margin-bottom:.55rem;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;color:var(--nk);align-items:center}
.bph .faq .q:hover{border-color:#cdd3da}
.bph .faq .q:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.bph .faq .a{padding:0 1.1rem 1rem;color:var(--nk2);font-size:.92rem;line-height:1.55;display:none}
.bph .faq .q[aria-expanded="true"]+.a{display:block}
.bph .faq .x{flex:0 0 auto;font-size:1.2rem;color:var(--mut);transition:transform .2s}
.bph .faq .q[aria-expanded="true"] .x{transform:rotate(45deg)}

/* ── SEO-ТЕКСТ ── */
.bph .seo p{color:var(--nk2);max-width:64rem;line-height:1.7;margin:0 0 1rem}
.bph .seo a{color:var(--nk);text-decoration:underline;text-underline-offset:2px}

/* ── ТЕЛЕФОН ── */
@media(max-width:820px){.bph .hero__stats{gap:1.4rem}}
@media(max-width:960px){
/* на телефоне 3D не грузится: сцена — меньше, в ней снимок горелки */
.bph .hero__panel{--stage:clamp(190px,60cqi,260px)}
.bph .b3dbar,.bph .b3dhint,.bph .b3dlabel{display:none}
.bph .sct{padding:2.25rem 0}
.bph .sct:first-child{padding-top:.25rem}
.bph .ss{margin-bottom:1.4rem}
.bph [id]{scroll-margin-top:72px}
}
@media(max-width:520px){
.bph .hero__stats{grid-template-columns:1fr 1fr 1fr;gap:.9rem}
.bph .hero__stats .n{font-size:1.35rem}
.bph .hero__stats .l{font-size:.74rem}
.bph .hero__btns .hero__cta{flex:1 1 100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.bph *{transition:none!important}}

/* ── Второй слайд hero: 3D-котёл (static/bp/3d/boiler3d-hero.js). Горелка и котёл лежат друг на друге и переключаются ── */
.bph .hero__art{transition:opacity .45s,visibility .45s}
.bph .hero__art.is-off{opacity:0;visibility:hidden;pointer-events:none}
.bph .hero__art--boiler.is-ready canvas{opacity:1}
.bph .hero__art--boiler canvas{display:block;opacity:0;transition:opacity .8s}
.bph .hero__panel.slide-boiler #b3dBar,.bph .hero__panel.slide-boiler #b3dLabel,.bph .hero__panel.slide-boiler #b3dHint{display:none}
.bph .hero__panel:not(.slide-boiler) #boilerBar,.bph .hero__panel:not(.slide-boiler) #boilerHint{display:none}
.bph .b3dhint--boiler{right:1.1rem}
.bph .hero__panel.is-focus-b .hero__in,.bph .hero__panel.is-focus-b .hero__stats,.bph .hero__panel.is-focus-b .hero__scrim{opacity:0;visibility:hidden}
.bph .hero__panel.is-focus .b3dtabs,.bph .hero__panel.is-focus-b .b3dtabs{opacity:0;visibility:hidden}
.bph .b3dtabs{position:absolute;right:1.1rem;bottom:2.2rem;z-index:3;display:flex;align-items:center;gap:.2rem;padding:.25rem;border-radius:50rem;background:rgba(255,255,255,.9);border:1px solid var(--ln);box-shadow:0 .2rem .7rem rgba(15,17,22,.08);transition:opacity .3s,visibility .3s}
.bph .b3dtabs[hidden]{display:none}
.bph .b3dtabs button{border:0;background:transparent;color:var(--nk);font:inherit;font-size:.8rem;font-weight:600;line-height:1;padding:.55rem .95rem;border-radius:50rem;cursor:pointer;transition:background .15s,color .15s}
.bph .b3dtabs button:hover{background:var(--surface-2,#f1f3f6)}
.bph .b3dtabs button[aria-selected=true]{background:var(--ink-hover);color:var(--dark-ink)}
.bph .b3dtabs button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.bph .b3dtabs .b3dtabs__arr{display:grid;place-items:center;width:2rem;height:2rem;padding:0;color:var(--nk2)}
.bph .b3dtabs .b3dtabs__arr svg{width:.9rem;height:.9rem}
@container hero (max-width: 999px){
	.bph .b3dtabs{right:1rem;bottom:auto;top:calc(var(--stage) - 3.4rem)}
	.bph .b3dhint--boiler{left:1rem;right:1rem;top:calc(var(--stage) - 1.6rem);bottom:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}