.sz-grid{--cols:4;--gap:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.sz-grid > *{flex:0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));min-width:0}
@media (max-width:1100px){.sz-grid > *{flex-basis:calc((100% - 2 * var(--gap)) / 3)}}
@media (max-width:760px){.sz-grid > *{flex-basis:calc((100% - var(--gap)) / 2)}}
@media (max-width:460px){.sz-grid > *{flex-basis:100%}}
/* even — ровные ряды: карточки одной высоты, неполный последний ряд
   центрируется базовым justify-content. Правило существует и потому, что
   класс без единого правила в CSS означает потерянный при порте стиль, и
   общий свод справедливо на это краснеет. */
.sz-grid.even{align-items:stretch}
.sz-grid.even > *{flex-grow:0}
.sz-grid.rail{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory}
.sz-grid.rail > *{scroll-snap-align:start;flex:0 0 260px}
[hidden]{display:none!important}

.sz-tscroll{overflow-x:auto;max-width:100%;min-width:0}
table.sz-t{width:100%;border-collapse:collapse;min-width:560px}
table.sz-t td.num{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:640px){
 table.sz-t{min-width:0}
 table.sz-t thead{position:absolute;left:-9999px}
 table.sz-t tr{display:block;margin-bottom:12px}
 table.sz-t td{display:flex;justify-content:space-between;gap:12px}
 table.sz-t td::before{content:attr(data-label);font-weight:600}
}

.sz-crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.sz-pager{display:flex;gap:8px;flex-wrap:wrap}
.sz-filters{display:flex;gap:8px;flex-wrap:wrap}
.sz-chip[aria-pressed="true"]{font-weight:600}
.sz-field{display:flex;flex-direction:column;gap:6px}
.sz-zoom{border:0;padding:0;max-width:96vw;max-height:96vh}
.sz-zoom img{display:block;max-width:96vw;max-height:96vh;height:auto}
.sz-gal{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.sz-gal > *{flex:0 1 calc((100% - 32px) / 3);min-width:0}
@media (max-width:700px){.sz-gal > *{flex-basis:100%}}
.sz-shot-link{position:relative;display:block}
.sz-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-width:0}
.sz-card{display:flex;flex-direction:column;min-width:0}


.sz-grid{--cols:4;--gap:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.sz-grid > *{flex:0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));min-width:0}
@media (max-width:1100px){.sz-grid > *{flex-basis:calc((100% - 2 * var(--gap)) / 3)}}
@media (max-width:760px){.sz-grid > *{flex-basis:calc((100% - var(--gap)) / 2)}}
@media (max-width:460px){.sz-grid > *{flex-basis:100%}}
/* even — ровные ряды: карточки одной высоты, неполный последний ряд
   центрируется базовым justify-content. Правило существует и потому, что
   класс без единого правила в CSS означает потерянный при порте стиль, и
   общий свод справедливо на это краснеет. */
.sz-grid.even{align-items:stretch}
.sz-grid.even > *{flex-grow:0}
.sz-grid.rail{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory}
.sz-grid.rail > *{scroll-snap-align:start;flex:0 0 260px}
[hidden]{display:none!important}

@font-face{font-family:"Bitter";src:url("/static/f/bitter.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Hanken";src:url("/static/f/hanken.woff2") format("woff2");font-weight:300 800;font-display:swap}

:root{
 --ink:#1E2426; --ink2:#4A5457; --paper:#FBFAF7; --white:#FFFFFF;
 --rule:#E1DDD4; --felt:#E8E9E6; --sand:#F0E7D8; --slate:#E2E8EA;
 --moss:#E4E9DF; --deep:#2A3133; --accent:#8C5A3B;
 --slab:"Bitter",Georgia,serif;
 --text:"Hanken","Segoe UI",system-ui,sans-serif;
 --wrap:1180px; --gap:22px; --r:4px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16.5px/1.62 var(--text)}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink)}
h1,h2,h3{font-family:var(--slab);font-weight:600;line-height:1.16;margin:0 0 .5em}
h1{font-size:38px;letter-spacing:-.01em}
h2{font-size:29px}
h3{font-size:19px}
p{margin:0 0 1em}
.sz-wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.sz-skip{position:absolute;left:-9999px}
.sz-skip:focus{left:12px;top:12px;background:var(--white);padding:8px 12px;z-index:60}

/* ── Шапка: словесный знак в разрядку, отделы строкой, тонкая линейка ── */
.sz-top{background:var(--white);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:30}
.sz-top .sz-wrap{display:flex;align-items:center;gap:26px;min-height:62px;flex-wrap:wrap}
.sz-mark{font-family:var(--slab);font-weight:600;font-size:21px;letter-spacing:.28em;
 text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap}
.sz-nav{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto;font-size:14.5px}
.sz-nav a{text-decoration:none;color:var(--ink2);padding:4px 0;border-bottom:2px solid transparent}
.sz-nav a:hover{color:var(--ink)}
.sz-nav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}

/* ── Hero: песочная панель, кадр справа, ничего лишнего ── */
.sz-hero{background:var(--sand)}
.sz-hero .sz-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
 gap:34px;align-items:center;padding-block:34px}
.sz-hero h1{margin-bottom:.35em;max-width:15ch}
.sz-hero p{font-size:17.5px;color:var(--ink2);max-width:46ch}
.sz-kicker{font-family:var(--text);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
 color:var(--ink2);margin:0 0 12px}
.sz-heroshot{background:var(--white);border-radius:var(--r);padding:14px;max-width:420px;
 width:100%;margin-inline:auto;box-shadow:0 10px 30px rgba(30,36,38,.10)}
.sz-heroshot img{aspect-ratio:1/1;object-fit:contain;width:100%}
.sz-links{display:flex;gap:20px;flex-wrap:wrap;margin-top:6px}
.sz-links a{font-weight:600;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px}
.sz-links a:hover{color:var(--accent)}

/* ── Полка-панель: цвет = материал отдела ── */
.sz-shelf{padding:38px 0}
.sz-shelf--felt{background:var(--felt)}
.sz-shelf--sand{background:var(--sand)}
.sz-shelf--slate{background:var(--slate)}
.sz-shelf--moss{background:var(--moss)}
.sz-shelfhead{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.sz-shelfhead h2{margin:0;min-width:0}
.sz-shelfhead p{margin:0;color:var(--ink2);font-size:15.5px;flex:1 1 320px;min-width:0}
.sz-shelfhead a{margin-left:auto;white-space:nowrap;font-weight:600;text-decoration:none;
 border-bottom:2px solid var(--accent);padding-bottom:2px}

/* ── Карточка: белая на панели, кадр на белой плитке ── */
.sz-card{background:var(--white);border-radius:var(--r);display:flex;flex-direction:column;
 min-width:0;overflow:hidden;border:1px solid rgba(30,36,38,.06)}
.sz-shot{padding:14px;background:var(--white)}
.sz-shot img{aspect-ratio:1/1;object-fit:contain;width:100%}
.sz-card-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.sz-card-title{font-size:16px;margin:0;line-height:1.28}
.sz-card-title a{text-decoration:none}
.sz-spec{font-size:13px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:4px 10px}
.sz-spec b{font-weight:600;color:var(--ink)}
.sz-row{display:flex;align-items:baseline;gap:10px;min-width:0}
.sz-price{font-family:var(--slab);font-size:21px;font-weight:600;margin:0}
.sz-unit{font-size:12.5px;color:var(--ink2)}
/* Кнопка прижимается к низу карточки РЯДОМ-обёрткой: действие у ui.card
   лежит в .sz-row, и margin-top у самой ссылки на выравнивание ряда не
   влиял — в ряду карточек кнопки стояли на разной высоте, когда имя
   занимало две строки (замечание владельца 31.08, замер: разница 20.5px). */
.sz-card-body > .sz-row:last-child{margin-top:auto}
.sz-buy{display:flex;align-items:center;justify-content:center;
 background:var(--deep);color:var(--white);border-radius:var(--r);padding:11px 14px;
 font-size:14.5px;font-weight:600;text-decoration:none;width:100%}
.sz-buy:hover{background:#171C1E}
.sz-buy img{image-rendering:auto;transform:none}
.sz-card .sz-row:last-of-type{display:block}

/* ── Полоса фактов между полками ── */
.sz-facts{background:var(--white);border-block:1px solid var(--rule);padding:22px 0}
.sz-facts ul{list-style:none;margin:0;padding:0;display:grid;
 grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:18px}
.sz-facts b{display:block;font-family:var(--slab);font-size:22px;font-weight:600}
.sz-facts span{font-size:13.5px;color:var(--ink2)}

/* ── Текстовая полоса: две колонки, без узкой колонки по центру (§5) ── */
.sz-prose{padding:40px 0}
.sz-cols{columns:2;column-gap:44px}
.sz-cols p{break-inside:avoid}
.sz-prose h2{max-width:22ch}
.sz-lede{font-size:18px;color:var(--ink2);max-width:70ch}

/* ── Таблица ── */
.sz-tw{overflow-x:auto;min-width:0}
.sz-tbl{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
.sz-tbl th,.sz-tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule)}
.sz-none{color:#8A9192;font-size:13.5px}
.sz-tbl a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(140,90,59,.35)}
.sz-tbl a:hover{border-bottom-color:var(--accent)}
.sz-cap{caption-side:top;text-align:left;font-size:13.5px;color:var(--ink2);padding:0 0 8px}
.sz-tbl thead th{font-family:var(--slab);font-weight:600;background:var(--white)}
.sz-tbl tbody tr:nth-child(odd){background:var(--white)}

/* ── Подбор подложки по размеру ковра: конверсионный блок ── */
.sz-fit{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);
 padding:20px 22px;margin:24px 0}
.sz-fit h3{margin:0 0 6px}
.sz-fit > p{margin:0 0 14px;color:var(--ink2);font-size:15px;max-width:62ch}
.sz-fitrow{display:flex;flex-wrap:wrap;gap:16px}
.sz-fitrow label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink2);min-width:0}
.sz-fitrow input{font:inherit;font-size:16px;padding:9px 12px;border:1px solid var(--rule);
 border-radius:var(--r);background:var(--paper);color:var(--ink);width:140px;max-width:100%}
.sz-fitout{display:block;margin-top:16px;font-size:15.5px;min-width:0}
.sz-fitout b{font-family:var(--slab);font-size:18px}
.sz-fitout ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.sz-fitout li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.sz-fitout li a:first-child{font-weight:600}
.sz-buy--inline{width:auto;padding:8px 14px;margin:0}

/* ── Четыре материала ── */
.sz-materials{margin:22px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:6px 22px}
.sz-materials dt{font-family:var(--slab);font-weight:600;font-size:16px}
.sz-materials dd{margin:0 0 10px;font-size:14.5px;color:var(--ink2)}

/* ── FAQ ── */
/* min() в minmax: на 320px колонка в 320px плюс поля обёртки давала
   горизонтальную прокрутку (браузерный аудит 31.08). */
.sz-faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:22px}
.sz-qa{min-width:0}
.sz-faq h3{margin-bottom:.35em}
.sz-faq p{margin:0;color:var(--ink2);font-size:15px}

/* ── Крошки ── */
.sz-crumbs{font-size:13.5px;color:var(--ink2);padding:14px 0 0}
.sz-crumbs a{color:var(--ink2)}

/* ── Гид ── */
/* min-width:0 на детях сетки: без него таблица с min-width распирала колонку
   и страница ехала шире экрана на 390px (браузерный аудит 31.08). */
.sz-guide{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:38px;align-items:start}
.sz-guide > *{min-width:0}
.sz-aside{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);padding:18px;
 position:sticky;top:80px}
.sz-aside h3{font-size:15px;letter-spacing:.04em;text-transform:uppercase;font-family:var(--text);
 font-weight:700;color:var(--ink2)}
.sz-aside ol{margin:0;padding-left:18px;font-size:14.5px}
.sz-aside li{margin-bottom:6px}
.sz-metrics{list-style:none;display:flex;flex-wrap:wrap;gap:24px;margin:0 0 20px;padding:14px 0;
 border-block:1px solid var(--rule)}
.sz-metrics b{display:block;font-family:var(--slab);font-size:18px;font-weight:600}
.sz-metrics span{font-size:12.5px;color:var(--ink2)}

/* ── Подвал по образцу 34-organiccottonmart: волнистая верхняя граница,
   первая группа в ДВА столбца, две узкие колонки, широкая содержательная
   справа, нижняя полоса за тонкой линией. ── */
.sz-foot{background:var(--deep);color:#D8DBDB;margin-top:0;padding:0 0 24px;font-size:14.5px;position:relative}
.sz-wave{height:64px;background:var(--paper);
 -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v18c-150 34-320 40-520 18S180 6 0 40Z' fill='%23000'/%3E%3C/svg%3E");
 mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v18c-150 34-320 40-520 18S180 6 0 40Z' fill='%23000'/%3E%3C/svg%3E");
 -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.sz-foot a{color:#D8DBDB;text-decoration:none}
.sz-foot a:hover{text-decoration:underline}
.sz-foot h2{font-family:var(--slab);color:#F2EFE8;font-size:20px;font-weight:600;margin:0 0 14px}
.sz-footgrid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);gap:30px;padding-top:14px}
.sz-foottwo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
.sz-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;min-width:0}
.sz-foot li{line-height:1.4}
.sz-foot li span{color:#98A0A0;font-size:12.5px}
.sz-footnote p{margin:0 0 10px;color:#B9BEBF;max-width:34ch}
.sz-footnote a{border-bottom:1px solid #6E7A7A}
.sz-footbar{border-top:1px solid rgba(255,255,255,.14);margin-top:28px;padding-top:16px;
 display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;color:#98A0A0;font-size:13px}
.sz-footbar .sz-mark{color:#F2EFE8;font-size:16px;margin-right:6px}

@media (max-width:900px){
 .sz-hero .sz-wrap{grid-template-columns:1fr}
 .sz-heroshot{order:-1;max-width:340px}
 .sz-guide{grid-template-columns:1fr}
 .sz-aside{position:static}
 .sz-cols{columns:1}
 .sz-footgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sz-footwide{grid-column:1 / -1}
 h1{font-size:31px}h2{font-size:25px}
}
@media (max-width:560px){
 .sz-footgrid{grid-template-columns:1fr}
 .sz-foottwo{grid-template-columns:1fr}
 .sz-nav{gap:14px;font-size:14px}
}