.fpl{font:400 16px/1.55 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#141414;-webkit-font-smoothing:antialiased;--ink:#141414; --ink-2:#5a5a5a; --line:#e6e3e0; --bg:#fff; --bg-2:#f6f4f2;
  --accent:#e8542b; --accent-dark:#c8431f;
  --h:64px; --sub:56px;}
.fpl *{box-sizing:border-box;margin:0;padding:0}
.fpl img{display:block;width:100%;height:100%;object-fit:cover}
.fpl a{color:inherit;text-decoration:none}
.fpl .wrap{max-width:1320px;margin:0 auto;padding:0 32px}
.fpl .eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.fpl h2{font-weight:300;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.01em;line-height:1.1}
.fpl h3{font-weight:400;font-size:19px;letter-spacing:-.01em}
.fpl .muted{color:var(--ink-2)}
.fpl .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:999px;font-size:14px;letter-spacing:.02em;border:1px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap}
.fpl .btn-p{background:var(--accent);color:#fff}
.fpl .btn-p:hover{background:var(--accent-dark)}
.fpl .btn-o{border-color:var(--ink);color:var(--ink)}
.fpl .btn-o:hover{background:var(--ink);color:#fff}
.fpl .btn-w{border-color:rgba(255,255,255,.65);color:#fff}
.fpl .btn-w:hover{background:#fff;color:var(--ink)}
.fpl .sec{padding:88px 0}
.fpl .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.fpl .hero{position:relative;min-height:min(74vh,660px);display:flex;align-items:flex-end;color:#fff}
.fpl .hero .bg{position:absolute;inset:0}
.fpl .hero .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,.22) 55%,rgba(0,0,0,.08) 100%)}
.fpl .hero .wrap{position:relative;z-index:2;padding-top:80px;padding-bottom:52px;width:100%}
.fpl .hero h1{margin-bottom:4px;font-weight:300;font-size:clamp(36px,5.2vw,68px);line-height:1.03;letter-spacing:-.02em;max-width:15ch}
.fpl .facts{display:flex;flex-wrap:wrap;gap:8px 0;margin:24px 0 30px;font-size:15px;color:rgba(255,255,255,.9);max-width:840px}
.fpl .facts span{padding-right:16px;margin-right:16px;border-right:1px solid rgba(255,255,255,.3)}
.fpl .facts span:last-child{border:none}
.fpl .herocta{display:flex;gap:12px;flex-wrap:wrap}
.fpl .scen{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fpl .scard{border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.fpl .scard:hover{box-shadow:0 18px 34px -22px rgba(0,0,0,.28);transform:translateY(-2px)}
.fpl .scard .ph{aspect-ratio:4/3;background:var(--bg-2)}
.fpl .scard .bd{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.fpl .spec{font-size:13px;color:var(--ink-2);margin:8px 0 12px}
.fpl .incl{font-size:13px;color:var(--ink-2);line-height:1.5;padding-top:12px;border-top:1px solid var(--line);margin-top:auto}
.fpl .price{margin-top:14px;font-size:17px}
.fpl .readmore{margin-top:auto;padding-top:18px;font-size:14px;color:var(--accent)}
.fpl .lead{font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:9px}
.fpl .scen>.scard{height:100%}
.fpl .scard .ph{aspect-ratio:3/2}
.fpl .pcard .ph{background:#efece9}
.fpl .price small{color:var(--ink-2);font-size:13px}
.fpl .mist{background:var(--bg-2)}
.fpl .mistgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
.fpl .compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fpl .compare figure{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:#ddd}
.fpl .compare figcaption{position:absolute;left:0;bottom:0;right:0;padding:9px 12px;font-size:12px;letter-spacing:.03em;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.fpl .tagbad{position:absolute;top:10px;left:10px;background:#fff;color:#b3341a;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:4px}
.fpl .taggood{position:absolute;top:10px;left:10px;background:var(--ink);color:#fff;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:4px}
.fpl .mist p{font-size:17px;line-height:1.65;margin-top:16px;color:#333}
.fpl .cat{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fpl .style{display:block;font-size:14px;color:var(--accent);margin-top:3px}
.fpl .mats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fpl .mats.two{grid-template-columns:repeat(2,1fr);gap:20px;max-width:820px}
.fpl .mats.two .ph{aspect-ratio:16/10;margin-bottom:11px}
.fpl .mats.two h3{font-size:17px}
.fpl .mats.two p{font-size:13.5px;line-height:1.5}
.fpl #material{padding:58px 0}
.fpl #material h2{font-size:clamp(24px,2.4vw,32px)}
.fpl .verdict{margin-top:18px;background:#fff;border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:16px 22px;font-size:14.5px;line-height:1.55;max-width:820px}
.fpl .verdict b{font-weight:500}
.fpl .soon{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:grid;grid-template-columns:230px 1fr;align-items:stretch;max-width:820px}
.fpl .soon .ph{display:block;height:100%;min-height:0}
.fpl .soon .ph img{object-position:50% 62%}
.fpl .soon .sb{padding:22px 28px;display:flex;flex-direction:column;justify-content:center}
.fpl .soon h3{font-size:20px}
.fpl .soon .readmore{margin-top:10px}
.fpl .mat .ph{position:relative;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#e6e2de;margin-bottom:14px}
.fpl .callout{position:absolute;transform:translate(-50%,-50%);background:rgba(255,255,255,.95);color:var(--ink);font-size:11px;letter-spacing:.02em;padding:6px 11px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 14px -4px rgba(0,0,0,.4)}
.fpl .callout:after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);border:5px solid transparent;border-top-color:rgba(255,255,255,.95)}
.fpl .tagline{font-size:14px;color:var(--ink-2);font-weight:400}
.fpl .mat h3{margin-bottom:6px}
.fpl .mat p{font-size:14px;line-height:1.55;color:var(--ink-2)}
.fpl .pcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.18s;display:flex;flex-direction:column}
.fpl .pcard:hover{box-shadow:0 18px 34px -22px rgba(0,0,0,.28);transform:translateY(-2px)}
.fpl .pcard .ph{aspect-ratio:1;background:var(--bg-2);position:relative}
.fpl .pcard .bd{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.fpl .crit{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.fpl .chip{font-size:12px;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.fpl .chip.hl{border-color:#e2c9bd;color:#b3572f;background:#fdf5f1}
.fpl .prow{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.fpl .badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);font-size:11px;letter-spacing:.09em;text-transform:uppercase;padding:5px 10px;border-radius:4px}
.fpl .tbl{width:100%;border-collapse:collapse;font-size:15px}
.fpl .tbl th, .fpl .tbl td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
.fpl .tbl th{font-weight:500;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.fpl .tbl tr:hover td{background:var(--bg-2)}
.fpl .tbl td:first-child{font-weight:500}
.fpl .addons{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.fpl .acard h3{font-size:16px;margin-top:2px}
.fpl .acard{text-align:left}
.fpl .acard .ph{aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--bg-2);margin-bottom:11px}
.fpl .acard .why{font-size:13px;color:var(--ink-2);line-height:1.45;margin-top:4px}
.fpl .acard .pr{font-size:14px;margin-top:7px}
.fpl .teasers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fpl .tcard{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/10;color:#fff;display:flex;align-items:flex-end}
.fpl .tcard .bgi{position:absolute;inset:0}
.fpl .tcard .bgi:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.05) 70%)}
.fpl .tcard .tb{position:relative;z-index:2;padding:22px}
.fpl .tcard .tb p{font-size:13px;opacity:.85;margin-top:4px}
.fpl .trust{background:var(--ink);color:#fff}
.fpl .trust .g{display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.fpl .trust .i strong{display:block;font-size:21px;font-weight:400;margin-bottom:8px;line-height:1.2}
.fpl .trust .i span{font-size:14px;color:rgba(255,255,255,.62);line-height:1.45;display:block}
.fpl .faq{max-width:900px}
.fpl .qa{border-bottom:1px solid var(--line)}
.fpl .qa summary{cursor:pointer;list-style:none;padding:19px 0;font-size:18px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.fpl .qa summary::-webkit-details-marker{display:none}
.fpl .qa summary:after{content:"+";color:var(--accent);font-size:22px;font-weight:300}
.fpl .qa[open] summary:after{content:"–"}
.fpl .qa .ans{padding:0 0 20px;color:#444;max-width:74ch;line-height:1.65}
.fpl .b2b{background:var(--bg-2);border-radius:14px;padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.fpl .b2b ul{list-style:none;font-size:15px;color:#333}
.fpl .b2b li{padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--line)}
.fpl .b2b li:before{content:"—";position:absolute;left:0;color:var(--accent)}
.fpl .kash{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fpl .kcard .ph{aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--bg-2);margin-bottom:12px}
.fpl footer{border-top:1px solid var(--line);padding:40px 0;color:var(--ink-2);font-size:14px}
.fpl .sw{position:fixed;right:18px;bottom:18px;z-index:200;background:#1d1d1d;color:#fff;border-radius:12px;padding:14px 16px;font-size:13px;box-shadow:0 16px 40px -16px rgba(0,0,0,.6);max-width:290px}
.fpl .sw h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8f8a86;font-weight:500;margin-bottom:10px}
.fpl .sw button{display:block;width:100%;text-align:left;background:transparent;border:1px solid #3a3a3a;color:#ddd;border-radius:8px;padding:9px 11px;margin-bottom:7px;cursor:pointer;font:inherit;transition:.15s}
.fpl .sw button:hover{border-color:#666}
.fpl .sw button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.fpl .sw p{color:#8f8a86;font-size:12px;line-height:1.45;margin-top:8px}
.fpl .sw .cl{position:absolute;top:8px;right:10px;color:#666;cursor:pointer;font-size:15px}
@media(max-width:1100px){
.fpl .scen{grid-template-columns:repeat(2,1fr)}
.fpl .cat{grid-template-columns:repeat(2,1fr)}
.fpl .mats, .fpl .mats.two{grid-template-columns:1fr}
.fpl .soon{grid-template-columns:1fr}
.fpl .addons{grid-template-columns:repeat(3,1fr)}
.fpl .teasers{grid-template-columns:1fr}
.fpl .trust .g{grid-template-columns:repeat(2,1fr)}
.fpl .mistgrid, .fpl .b2b{grid-template-columns:1fr}
.fpl .kash{grid-template-columns:1fr}
}
@media(max-width:640px){
.fpl .wrap{padding:0 18px}
.fpl .sec{padding:56px 0}
.fpl .scen, .fpl .addons{grid-template-columns:1fr}
.fpl .cat{grid-template-columns:repeat(2,1fr)}
.fpl .facts span{border:none;padding-right:12px;margin-right:12px}
.fpl .sw{left:18px;right:18px;max-width:none}
}
.fpl .acard, .fpl .kcard{display:flex;flex-direction:column}
.fpl .acard .ph, .fpl .kcard .ph, .fpl .scard .ph, .fpl .pcard .ph, .fpl .mat .ph, .fpl .soon .ph{display:block}
.fpl .acard .why, .fpl .acard .pr, .fpl .pcard .style, .fpl .pcard .p{display:block}
.fpl .acard h3{font-size:16px;line-height:1.3;margin-top:2px}
.fpl .acard .why{margin-top:5px}
.fpl .acard .pr{margin-top:auto;padding-top:12px;font-size:15px;font-weight:500}
.fpl .kcard .ph{aspect-ratio:16/10}
.fpl .addons{gap:14px}
.fpl .stepnum{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:var(--accent);padding:5px 12px;border-radius:999px}
.fpl .stepnum.fpldark{background:var(--ink)}
.fpl .step-main{background:var(--ink);color:#fff}
.fpl .step-main .sec-head{margin-bottom:34px}
.fpl .furn{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fpl .fcard{display:flex;flex-direction:column;background:#1f1f1f;border-radius:12px;overflow:hidden;transition:.18s}
.fpl .fcard:hover{transform:translateY(-3px);background:#262626}
.fpl .fcard .ph{display:block;flex:none;width:100%;aspect-ratio:4/3;background:#2a2a2a;overflow:hidden}
.fpl .fcard .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.fpl .fcard .fb{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.fpl .fcard h3{color:#fff;font-size:18px}
.fpl .fcard .why{display:block;font-size:13.5px;color:rgba(255,255,255,.58);line-height:1.45;margin-top:5px}
.fpl .fcard .pr{display:block;margin-top:auto;padding-top:14px;font-size:16px;color:#fff}
.fpl .cook8{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){
.fpl .furn{grid-template-columns:repeat(2,1fr)}
.fpl .cook8{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
.fpl .furn{grid-template-columns:1fr}
.fpl .cook8{grid-template-columns:repeat(2,1fr)}
}
.fpl .guideband{display:grid;grid-template-columns:minmax(0,460px) 1fr;align-items:stretch;gap:0;
  background:#232323;border:1px solid #333;border-radius:12px;overflow:hidden;margin-bottom:26px;transition:.18s}
.fpl .guideband:hover{background:#2a2a2a;border-color:#4a4a4a}
.fpl .guideband .gph{display:block;height:100%;min-height:290px;background:#fff}
.fpl .guideband .gph img{width:100%;height:100%;object-fit:cover}
.fpl .guideband .gtx{display:block;padding:34px 40px;align-self:center}
.fpl .guideband b{display:block;color:#fff;font-size:clamp(24px,2.6vw,32px);font-weight:300;letter-spacing:-.01em;line-height:1.15;margin:10px 0 12px}
.fpl .guideband .gsub{display:block;color:rgba(255,255,255,.68);font-size:16px;line-height:1.6;max-width:62ch}
.fpl .guideband .garr{display:inline-flex;align-items:center;margin-top:20px;padding:12px 24px;border-radius:999px;background:var(--accent);color:#fff;font-size:15px;white-space:nowrap}
@media(max-width:900px){
.fpl .guideband{grid-template-columns:1fr}
.fpl .guideband .gph{min-height:0;aspect-ratio:3/2}
.fpl .guideband .gtx{padding:24px 22px}
}
.fpl .sitefoot{background:#231f20;color:rgba(255,255,255,.72);padding:64px 0 72px;border:0;font-size:14px}
.fpl .ffgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr .7fr;gap:40px}
.fpl .flogo{width:auto;height:38px;object-fit:contain;margin-bottom:22px}
.fpl .fbrand p{line-height:1.55;color:rgba(255,255,255,.72)}
.fpl .fh{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.fpl .fcol a{display:block;padding:5px 0;color:rgba(255,255,255,.72);transition:.15s}
.fpl .fcol a:hover{color:#fff}
.fpl .fadr{line-height:1.55;margin-bottom:14px}
.fpl .fu{text-decoration:underline;margin-bottom:12px}
.fpl .fsoc{display:flex;gap:10px}
.fpl .fsoc a{width:34px;height:34px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:grid;place-items:center;padding:0}
@media(max-width:1100px){
.fpl .ffgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
.fpl .ffgrid{grid-template-columns:1fr;gap:30px}
}
.fpl .kit .ph, .fpl .pcard .ph, .fpl .acard .ph, .fpl .fcard .ph, .fpl .scard .ph, .fpl .fsc .ph, .fpl .kcard .ph, .fpl .mat .ph, .fpl .shots3 img, .fpl .gal a img{flex:none;width:100%}
.fpl .kit .ph, .fpl .pcard .ph, .fpl .acard .ph, .fpl .fcard .ph, .fpl .scard .ph, .fpl .fsc .ph, .fpl .kcard .ph, .fpl .mat .ph{display:block;overflow:hidden}
.fpl .kit .ph img, .fpl .pcard .ph img, .fpl .acard .ph img, .fpl .fcard .ph img, .fpl .scard .ph img, .fpl .fsc .ph img, .fpl .kcard .ph img, .fpl .mat .ph img{width:100%;height:100%;object-fit:cover}
.fpl .qa i{color:var(--accent);font-style:normal}
.fpl .relsec{background:#141414;color:#fff}
.fpl .relrow{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;padding:34px 32px}
.fpl .reltx h3{color:#fff;font-size:21px;font-weight:400;letter-spacing:-.01em}
.fpl .reltx p{margin-top:7px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.6);max-width:60ch}
.fpl .relnums{display:flex;gap:44px}
.fpl .rn strong{display:block;font-size:26px;font-weight:300;line-height:1;margin-bottom:6px;color:#fff}
.fpl .rn span{font-size:13px;line-height:1.4;color:rgba(255,255,255,.55)}
@media(max-width:900px){
.fpl .relrow{grid-template-columns:1fr;gap:26px}
.fpl .relnums{flex-wrap:wrap;gap:24px 32px}
}
.fpl .shots3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.fpl .shots3 figure{margin:0}
.fpl .shots3 img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:#e6e2de}
.fpl .shots3 figcaption{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
@media(max-width:900px){
.fpl .shots3{grid-template-columns:1fr}
}
@media(max-width:1100px){

}
.fpl .hero .bg img{object-position:50% 63%}
@media(min-width:1700px){
.fpl .hero{min-height:min(74vh,780px)}
}
.fpl .btn-off{background:transparent;border:1px solid var(--line);color:#a8a29c;cursor:default;pointer-events:none}
.fpl .gidwrap{position:relative;display:inline-flex;align-items:flex-start}
.fpl .gidnote{position:absolute;top:calc(100% + 7px);left:2px;font-size:12.5px;line-height:1.4;color:var(--ink-2);width:max-content;max-width:30ch}
.fpl .gidwrap.on-dark .btn-off{border-color:rgba(255,255,255,.32);color:rgba(255,255,255,.62)}
.fpl .gidwrap.on-dark .gidnote{color:rgba(255,255,255,.72)}
.fpl .sec-head .gidwrap{margin-bottom:30px}

/* ---------- Сталь / чугун / патина — три карточки в ряд ---------- */
/* Патина раньше стояла отдельной широкой плашкой под блоком: вёрстка
   выглядела оборванной. Теперь это третья карточка того же ряда. */
.fpl .mats.three{grid-template-columns:repeat(3,1fr);gap:20px;max-width:none}
.fpl .mats.three .ph{aspect-ratio:16/10;margin-bottom:11px}
.fpl .mats.three h3{font-size:17px}
.fpl .mats.three p{font-size:13.5px;line-height:1.5}
.fpl .mat-patina .ph img{object-position:50% 58%}
@media(max-width:1100px){.fpl .mats.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.fpl .mats.three{grid-template-columns:1fr}}

/* Плашка «Больше отличий нет» была рассчитана на два столбца (max-width 820px)
   и после добавления патины обрывалась на двух третях ряда. Тянем на всю
   ширину блока. */
.fpl .verdict{max-width:none}


/* ---------------------------------------------------------------------------
   МП 06.09.2026. Боковые отступы .wrap — длинной записью.

   В макете у части блоков к .wrap добавлен второй класс, который задавал
   отступы сокращённо: .phead{padding:54px 0 30px}. Сокращённая запись
   обнуляет и горизонтальные отступы, а по весу селекторы равны, поэтому
   выигрывал тот, что ниже в файле, — и текст прижимался к краю экрана.

   Длинная запись ниже по файлу перебивает такие сокращения и при этом
   не трогает вертикальные отступы, которые блок задавал осмысленно.
   --------------------------------------------------------------------------- */
.fpl .wrap { padding-left: 32px; padding-right: 32px; }

@media (max-width: 640px) {
    .fpl .wrap { padding-left: 18px; padding-right: 18px; }
}


/* ---------------------------------------------------------------------------
   МП 06.09.2026. Мобильная раскладка лендинга.
   Правки по замечаниям с телефона, ширина экрана 390px.
   --------------------------------------------------------------------------- */

@media (max-width: 640px) {

    /* --- «Так не надо / так лучше» — слайдер ---------------------------------
       Две карточки рядом на телефоне сжимались до нечитаемых: подпись в три
       строки поверх мелкого кадра. Теперь это лента с прилипанием: карточка
       занимает 86% ширины, край следующей виден — сразу понятно, что
       листается. Скрипт не нужен, всё делает scroll-snap. */
    .fpl .compare {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* лента идёт от края до края, отступы возвращаем изнутри */
        margin-left: -18px;
        margin-right: -18px;
        padding: 0 18px;
    }

    .fpl .compare::-webkit-scrollbar { display: none; }

    .fpl .compare > figure {
        flex: 0 0 86%;
        scroll-snap-align: center;
        margin: 0;
    }

    .fpl .compare figcaption {
        font-size: 14px;
        line-height: 1.4;
    }

    /* --- Плитка серий: убираем лишнее ----------------------------------------
       В две колонки на 390px в карточке не помещалось ничего: диаметр и
       материал вставали по чипу на строку, а цена переносилась пополам
       («от 25» / «157 ₽»). Чипы и «Смотреть →» на телефоне убираем — карточка
       целиком ссылка, стрелка ничего не добавляет. Остаётся фото, название,
       короткая характеристика и цена. */
    .fpl .cat .crit { display: none; }
    .fpl .cat .prow .muted { display: none; }

    .fpl .cat .pcard .bd { padding: 12px 12px 14px; }
    .fpl .cat .pcard h3 { font-size: 17px; }
    .fpl .cat .style { font-size: 13px; margin-top: 2px; }

    .fpl .cat .prow {
        margin-top: 10px;
        padding-top: 10px;
        font-size: 15px;
        white-space: nowrap;
    }

    /* Кострища тоже в две колонки. У этой сетки grid-template-columns задан
       инлайн в разметке (repeat(3,1fr)), а инлайн сильнее любого селектора —
       обычным правилом его не перебить, поэтому здесь !important. */
    .fpl .cat {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    /* --- Товарные карточки по две в ряд ---------------------------------------
       Мебель со светильниками и блок хранения шли в один столбец: карточка
       на всю ширину, фото огромное, за экран помещалось полторы позиции.
       Ставим по две, как в остальных товарных сетках. */
    .fpl .furn,
    .fpl .addons {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .fpl .furn .fcard .fb,
    .fpl .addons .acard { font-size: 14px; }

    .fpl .furn .fcard h3,
    .fpl .addons .acard h3 { font-size: 16px; line-height: 1.25; }

    .fpl .furn .why,
    .fpl .addons .why { font-size: 13px; line-height: 1.35; }

    .fpl .furn .pr,
    .fpl .addons .pr { font-size: 15px; white-space: nowrap; }
}


/* ---------------------------------------------------------------------------
   МП 06.09.2026. Ещё два блока в слайдер на телефоне.

   «Сталь или чугун» и «Бетонные столешницы» — это по три карточки с фото
   и текстом. В столбик они растягивали страницу на несколько экранов и
   ломали сравнение: чтобы сопоставить чугун со сталью, приходилось листать.
   Лента с прилипанием ставит карточки рядом — сравнивать можно свайпом.

   Приём тот же, что у блока «так не надо / так лучше» выше: карточка на 86%
   ширины, край следующей виден, лента идёт от края до края экрана.
   Селекторы повторяют вес исходных (.mats.three — два класса), иначе
   правила макета ниже по файлу перебили бы эти.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {

    .fpl .mats.three,
    .fpl .shots3 {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: -18px;
        margin-right: -18px;
        padding: 0 18px;
    }

    .fpl .mats.three::-webkit-scrollbar,
    .fpl .shots3::-webkit-scrollbar { display: none; }

    /* align-items:flex-start обязателен. По умолчанию flex тянет карточки
       на высоту контейнера (stretch), содержимое в них не помещалось и
       вылезало вниз — лента начинала листаться ещё и по вертикали, а часть
       подписи оставалась за краем. С flex-start каждая карточка занимает
       свою настоящую высоту. */
    .fpl .mats.three > .mat,
    .fpl .shots3 > figure {
        flex: 0 0 86%;
        scroll-snap-align: center;
        margin: 0;
        min-width: 0;
    }

    /* Внутри ленты карточка сама себе колонка: тексту нужна нормальная
       высота строки, а не сжатая под узкую сетку. */
    .fpl .mats.three .mat h3 { font-size: 18px; }
    .fpl .mats.three .mat p,
    .fpl .shots3 figcaption { font-size: 14px; line-height: 1.45; }
}


/* ---------------------------------------------------------------------------
   МП 06.09.2026. Блок «Проекты костровых зон» на телефоне.

   Число колонок у этой сетки прописано инлайн в разметке (repeat(4,1fr)),
   поэтому медиазапрос макета не срабатывал и на 390px оставались четыре
   колонки по 70px: подписи «Со скамьями · сложные» обрезались на первом
   слове, фото превращались в марки.

   Ставим две колонки, карточку делаем вертикальной (3/4 вместо 16/10) —
   в такую подпись помещается в две строки и остаётся читаемой.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {

    .fpl .teasers {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .fpl .teasers .tcard {
        aspect-ratio: 3 / 4;
    }

    .fpl .teasers .tcard .tb {
        padding: 14px;
    }

    .fpl .teasers .tcard .tb p {
        font-size: 14px;
        line-height: 1.3;
        opacity: .92;
    }
}