/* Латунь бренда (#C08B2C) на светлом фоне подтемняем, на тёмном высветляем —
   иначе цены и кнопка «в корзину» не дотягивают до 4.5:1. Серый --ink-3 держим
   не светлее этого по той же причине: на телефоне под солнцем иначе не прочесть. */
:root{--ground:#F4F1EC;--surface:#EDE9E2;--sunk:#E4DFD6;--ink-1:#14161A;--ink-2:#4A4E56;
 --ink-3:#626771;--rule:#D8D3CA;--accent:#8A6217;--accent-ink:#F4F1EC;
 --display:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
 --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;--wrap:1240px;
 /* Движение: быстрое для цвета, помедленнее для теней и масштаба.
    Кривая с длинным хвостом — останавливается мягко, без пружины. */
 --t:.24s;--t-slow:.42s;--ease:cubic-bezier(.25,.1,.25,1);--ease-out:cubic-bezier(.22,.61,.36,1);
 --lift:0 10px 30px rgba(20,22,26,.13),0 2px 6px rgba(20,22,26,.06)}
:root[data-theme="dark"]{--ground:#14161A;--surface:#1C1F25;--sunk:#20242B;
 --ink-1:#F4F1EC;--ink-2:#B3B7BE;--ink-3:#8A8F98;--rule:#2C3038;--accent:#D9A445;--accent-ink:#14161A;
 --lift:0 10px 30px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.35)}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink-1);font-family:var(--display);
 font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut,28px)}
h1,h2,h3{text-wrap:balance;margin:0;letter-spacing:-.022em;font-weight:700}
h1{font-size:clamp(2.3rem,5.4vw,3.9rem);line-height:1.03}
h2{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.12}
h3{font-size:1.05rem;letter-spacing:-.01em}
p{margin:0}a{color:inherit}
.lede{font-size:1.14rem;color:var(--ink-2);max-width:62ch}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.note{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);letter-spacing:.03em}
section{padding:70px 0}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:34px;max-width:64ch}
/* h1 внутри секции — тот же размер, что был у h2: меняем смысл, не вид. */
.sec-head h1{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.12}
header{border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--ground);z-index:20}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 28px}
.mark{font-weight:700;font-size:1.2rem;letter-spacing:.12em;color:var(--accent);text-decoration:none}
.headright{display:flex;align-items:center;gap:10px}
.cartbtn{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
 padding:9px 12px;border:1px solid var(--rule);background:transparent;color:var(--ink-1);
 cursor:pointer;border-radius:2px;line-height:1;position:relative;
 transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.cartbtn:hover{border-color:var(--accent);color:var(--accent)}
.cartbtn .n{color:var(--accent);font-weight:700;margin-left:6px;
 display:inline-block;transition:transform var(--t-slow) var(--ease)}
.qtyrow{display:flex;align-items:center;gap:10px}
.qty{display:flex;align-items:center;border:1px solid var(--rule);border-radius:2px}
.qty button{width:36px;height:42px;border:0;background:transparent;color:var(--ink-1);
 font-size:1.1rem;cursor:pointer;font-family:var(--display)}
.qty button{transition:color var(--t) var(--ease),background-color var(--t) var(--ease)}
.qty button:hover{color:var(--accent);background:var(--sunk)}
.qty span{min-width:34px;text-align:center;font-family:var(--mono);font-variant-numeric:tabular-nums}
/* Ящик корзины выезжает справа, фон затемняется. Раньше display:none/block — рывок.
   visibility держит закрытый ящик вне клавиатурного обхода; при закрытии она
   гаснет с задержкой, чтобы панель успела уехать. */
.drawer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;visibility:hidden;
 transition:visibility 0s linear .6s}
.drawer.open{visibility:visible;transition:visibility 0s}
html.locked,html.locked body{overflow:hidden}
.drawer .veil{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.45);
 opacity:0;transition:opacity .55s var(--ease)}
.drawer.open .veil{opacity:1}
.drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);
 background:var(--ground);border-left:1px solid var(--rule);display:flex;flex-direction:column;
 transform:translateX(100%);transition:transform .6s var(--ease-out)}
.drawer.open .panel{transform:none}
.drawer .dhead{display:flex;align-items:center;justify-content:space-between;
 padding:20px 24px;border-bottom:1px solid var(--rule)}
.drawer .dhead h3{font-size:1.1rem}
.drawer .x{border:0;background:transparent;color:var(--ink-2);font-size:1.4rem;cursor:pointer;line-height:1}
.drawer .x{transition:color var(--t) var(--ease),transform var(--t) var(--ease)}
.drawer .x:hover{color:var(--accent);transform:rotate(90deg)}
.drawer .items{flex:1;overflow-y:auto;padding:8px 24px}
.citem{display:grid;grid-template-columns:64px 1fr auto 30px;gap:12px;align-items:center;
 padding:16px 0;border-bottom:1px solid var(--rule)}
.citem img{width:100%;height:auto;display:block;background:var(--sunk);border-radius:2px}
.citem .nm{font-weight:600;font-size:.95rem}
.citem .sk{font-family:var(--mono);font-size:.64rem;color:var(--ink-3);letter-spacing:.04em}
.citem .pr{font-family:var(--mono);font-size:.88rem;color:var(--accent);font-variant-numeric:tabular-nums}
.citem .pr{text-align:right}
.citem .rm{border:1px solid var(--rule);background:transparent;color:var(--ink-2);cursor:pointer;
 font-size:1.3rem;line-height:1;width:30px;height:30px;border-radius:50%;padding:0}
.citem .rm{transition:color var(--t) var(--ease),background-color var(--t) var(--ease),
 border-color var(--t) var(--ease)}
.citem .rm:hover{color:var(--accent-ink);background:var(--ink-2);border-color:var(--ink-2)}
.cqty{display:inline-flex;align-items:center;gap:2px;margin-top:7px;
 border:1px solid var(--rule);border-radius:2px}
.cqty button{border:0;background:transparent;color:var(--ink-1);cursor:pointer;
 font-size:1rem;line-height:1;padding:5px 9px}
.cqty button{transition:color var(--t) var(--ease)}
.cqty button:hover{color:var(--accent)}
.cqty span{font-family:var(--mono);font-size:.8rem;min-width:20px;text-align:center}
.clearall{width:100%;border:1px solid var(--rule);background:transparent;color:var(--ink-3);
 font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
 padding:10px;margin-top:12px;cursor:pointer;border-radius:2px}
.clearall{transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.clearall:hover{color:var(--ink-1);border-color:var(--ink-3)}
.dfoot{border-top:1px solid var(--rule);padding:20px 24px;display:flex;flex-direction:column;gap:14px}
.total{display:flex;justify-content:space-between;align-items:baseline}
.total .v{font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--accent);
 font-variant-numeric:tabular-nums}
.empty{padding:48px 24px;text-align:center;color:var(--ink-2)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:70;
 background:var(--ink-1);color:var(--ground);padding:12px 20px;border-radius:2px;
 font-size:.9rem;opacity:0;visibility:hidden;transform:translate(-50%,16px);pointer-events:none;
 transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),visibility 0s linear .4s}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);
 transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),visibility 0s}
.themetoggle{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
 padding:9px 12px;border:1px solid var(--rule);background:transparent;color:var(--ink-2);
 cursor:pointer;border-radius:2px;line-height:1}
.themetoggle{transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.themetoggle:hover{border-color:var(--accent);color:var(--accent)}
header nav{display:flex;gap:24px;font-size:.9rem;color:var(--ink-2)}
header nav a{text-decoration:none;padding:3px 0;border-bottom:2px solid transparent}
header nav a:hover{color:var(--accent)}
/* На узком экране пункты меню — за кнопкой Menu, панель на весь экран (22 сентября;
   до этого стояли второй строкой шапки ячейками — Коля попросил убрать). Шапка
   в одну строку; липкие панели берут её высоту замером и подстроятся сами. */
.menubtn,.sitemenu{display:none}
@media (max-width:860px){
 .bar{padding:10px 20px}
 header nav{display:none}
 .headright .themetoggle{display:none}
 .menubtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;
  padding:0 18px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink-1) 26%,transparent);
  background:transparent;color:var(--ink-1);font:inherit;font-size:.9rem;cursor:pointer}
 .menubtn[aria-expanded="true"]{border-color:var(--ink-1)}
 .sitemenu:not([hidden]){display:flex;flex-direction:column;position:fixed;left:0;right:0;
  top:var(--headh,64px);bottom:0;z-index:19;background:var(--ground);overflow-y:auto;
  padding:6px var(--gut,20px) 28px;animation:rise .3s var(--ease-out) both}
 .sitemenu a{text-decoration:none}
 .sitemenu .main a{display:block;font-family:var(--serif);font-size:2.2rem;line-height:1.1;
  letter-spacing:-.015em;color:var(--ink-1);padding:16px 0;border-bottom:1px solid var(--rule)}
 .sitemenu .more{display:flex;gap:26px;padding-top:16px}
 .sitemenu .more a{color:var(--ink-2);padding:12px 0}
 .sitemenu .contact{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;padding-top:28px}
 .sitemenu .contact a{color:var(--ink-1);padding:11px 0}
 .sitemenu .themetoggle{margin-top:12px;min-height:44px;padding:0 18px}
 html.menu-open{overflow:hidden}
}
.btn{display:inline-block;padding:13px 22px;border-radius:2px;font-size:.94rem;font-weight:600;
 text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--display);
 transition:filter var(--t) var(--ease),color var(--t) var(--ease),
  border-color var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t-slow) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.1)}
.btn-ghost{border-color:var(--rule);color:var(--ink-1);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:10px;z-index:200;padding:10px 16px;border-radius:10px;
  background:#14161A;color:#F4F1EC;font-weight:600;text-decoration:none}
.skip:focus{left:16px}
main:focus{outline:none}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding:66px 28px 38px}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:30px;padding:40px 0 26px}}
.hero-copy{display:flex;flex-direction:column;gap:20px}
.hero h1 em{font-style:normal;color:var(--accent)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:2px}
.shotbox{background:var(--sunk);display:grid;place-items:center;padding:28px;border-radius:2px}
.shotbox img{width:100%;max-width:460px;height:auto;display:block}
.strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--surface)}
.strip ul{list-style:none;margin:0;padding:15px 0;display:flex;flex-wrap:wrap;gap:9px 32px;
 font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;color:var(--ink-2);text-transform:uppercase}
.strip li{display:flex;align-items:center;gap:9px}
.strip li::before{content:"";width:5px;height:5px;background:var(--accent);flex:none}
.tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
 padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
 position:sticky;top:var(--headh,64px);background:var(--ground);z-index:15}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chipnav{display:none}          /* стрелки нужны только на узком экране */
.chip{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;padding:6px 11px;
 border:1px solid var(--rule);background:transparent;color:var(--ink-2);cursor:pointer;border-radius:2px}
.chip{transition:color var(--t) var(--ease),border-color var(--t) var(--ease),
 background-color var(--t) var(--ease)}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chip .c{opacity:.6;margin-left:5px}
.morebox{padding:26px 0 0}
.backlink{display:inline-flex;align-items:center;min-height:44px;margin:0 0 6px;font-size:.92rem;
 color:var(--ink-2);text-decoration:none}
.backlink:hover{color:var(--accent)}
a.chip{text-decoration:none;display:inline-block}
.rightset{display:flex;gap:9px;align-items:center}
input[type=search],select{font-family:var(--display);font-size:.92rem;padding:9px 12px;
 border-radius:2px;border:1px solid var(--rule);background:var(--ground);color:var(--ink-1)}
.count{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);padding:14px 0 0}
@media (max-width:700px){
 /* flex-wrap:wrap вместе с колонкой раскладывает детей в столбцы и не сжимает их
    по ширине — панель уезжала за край экрана. Перенос здесь не нужен. */
 .tools{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:9px;padding:11px 0}
 /* иначе восемь категорий переносятся на шесть строк и съедают пол-экрана */
 /* min-width:0 обязателен: без него флекс-элемент раздвигает страницу вширь */
 .chipbar{position:relative;min-width:0;margin:0 calc(-1 * var(--gut,28px))}
 .chips{flex-wrap:nowrap;min-width:0;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 var(--gut,28px) 1px;scroll-behavior:smooth}
 .chips::-webkit-scrollbar{display:none}
 /* подсказки, что ленту можно листать: затухание у края и кнопка-стрелка */
 .chipbar::before,.chipbar::after{content:"";position:absolute;top:0;bottom:0;width:52px;
  pointer-events:none;opacity:0;transition:opacity .18s ease;z-index:1}
 .chipbar::before{left:0;background:linear-gradient(90deg,var(--ground) 34%,transparent)}
 .chipbar::after{right:0;background:linear-gradient(270deg,var(--ground) 34%,transparent)}
 .chipbar.can-left::before,.chipbar.can-right::after{opacity:1}
 .chipnav{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:30px;height:30px;border-radius:50%;border:1px solid var(--rule);background:var(--ground);
  color:var(--ink-1);cursor:pointer;font-size:1.1rem;line-height:1;padding:0;
  place-items:center;box-shadow:0 1px 5px rgba(0,0,0,.09)}
 .chipnav.prev{left:5px}
 .chipnav.next{right:5px}
 .chipbar.can-left .chipnav.prev,.chipbar.can-right .chipnav.next{display:grid}
 .chipnav:active{background:var(--sunk)}
 .chip{flex:0 0 auto;white-space:nowrap}
 .rightset{gap:8px;min-width:0}
 .rightset input[type=search]{flex:1 1 auto;min-width:0;width:100%}
 .rightset select{flex:0 0 auto;max-width:46%;min-width:0}
 .count{padding:10px 0 0}
}
@media (prefers-reduced-motion:reduce){.chips{scroll-behavior:auto}
 .chipbar::before,.chipbar::after{transition:none}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(286px,1fr));gap:1px;
 background:var(--rule);border:1px solid var(--rule);margin-top:18px}
.card{background:var(--ground);display:flex;flex-direction:column;text-decoration:none;
 padding-bottom:20px;position:relative;
 transition:background-color var(--t) var(--ease),box-shadow var(--t-slow) var(--ease)}
.card:hover{background:var(--surface)}
/* Карточки стоят вплотную, разделители — щели в один пиксель. Поэтому наведение
   поднимает карточку тенью, а не сдвигом: сдвиг разорвал бы решётку. */
.card .shot{background:var(--sunk);padding:26px;display:grid;place-items:center;position:relative;
 overflow:hidden}
.card .shot img{transition:transform var(--t-slow) var(--ease)}
.card .ticks{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;
 gap:5px;opacity:0;transition:opacity .15s ease;pointer-events:none}
.card .shot.live .ticks{opacity:1}
.card .ticks i{width:16px;height:2px;background:var(--rule);display:block}
.card .ticks i.on{background:var(--accent)}
@media (prefers-reduced-motion:reduce){.card .ticks{transition:none}}
@media (hover:none){.card .ticks{display:none}}
.card .shot img{width:100%;max-width:214px;height:auto;display:block}
.card .meta{padding:17px 20px 0;display:flex;flex-direction:column;gap:7px;flex:1}
.card h3{font-size:.99rem}
.card .sku{font-family:var(--mono);font-size:.66rem;color:var(--ink-3);letter-spacing:.04em}
.card .mat{font-size:.83rem;color:var(--ink-2)}
.card .p{font-family:var(--mono);font-size:.95rem;font-variant-numeric:tabular-nums;
 color:var(--accent);font-weight:600;margin-top:auto;padding-top:8px}
.detail{display:grid;grid-template-columns:1fr 1fr;gap:52px;padding:44px 0 0;align-items:start}
@media (max-width:880px){.detail{grid-template-columns:1fr;gap:28px}}
.gallery{display:flex;flex-direction:column;gap:10px}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.thumb{background:var(--sunk);border:1px solid transparent;padding:6px;cursor:pointer;
 display:grid;place-items:center;border-radius:2px}
.thumb img{width:100%;height:auto;display:block}
.thumb{transition:border-color var(--t) var(--ease)}
.thumb img{transition:transform var(--t-slow) var(--ease)}
.thumb:hover{border-color:var(--ink-3)}
.thumb.on{border-color:var(--accent)}
.viewnote{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
.colourpick{display:flex;flex-direction:column;gap:11px}
.colourhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.colourhead .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
 text-transform:uppercase;color:var(--ink-3)}
.colourhead .v{font-size:.98rem}
.swatches{display:flex;flex-wrap:wrap;gap:9px}
.swatch{width:36px;height:36px;padding:3px;border:1px solid var(--rule);border-radius:50%;
 background:transparent;cursor:pointer;display:block;line-height:0}
.swatch span{display:block;width:100%;height:100%;border-radius:50%;
 box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
.swatch{transition:border-color var(--t) var(--ease),transform var(--t-slow) var(--ease),
 box-shadow var(--t) var(--ease)}
.swatch:hover{border-color:var(--ink-3)}
.swatch.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.colournote{display:none}
.dots{display:flex;align-items:center;gap:5px;padding:4px 0 0}
.dots i{width:12px;height:12px;border-radius:50%;display:block;
 box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
.dots .more{font-family:var(--mono);font-size:.66rem;color:var(--ink-3);margin-left:2px}
.pbar{position:fixed;top:64px;left:0;right:0;z-index:18;background:var(--ground);
 border-bottom:1px solid var(--rule);transform:translateY(-130%);transition:transform .45s var(--ease-out)}
.pbar.on{transform:none}
@media (prefers-reduced-motion:reduce){.pbar{transition:none}}
.pbar-in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:9px 28px}
.pbar-id{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto;overflow:hidden}
.pbar-id img{display:block;background:var(--sunk);flex:none}
/* text-overflow не работает на flex-контейнере, поэтому строки — обычные блоки */
.pbar-id .nm{font-weight:600;font-size:.95rem;display:block;min-width:0;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar-id .sk{display:block;font-family:var(--mono);font-size:.64rem;color:var(--ink-3);
 font-weight:400;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar-buy{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.pbar-buy .pr{font-family:var(--mono);font-size:1rem;font-variant-numeric:tabular-nums;
 color:var(--accent);font-weight:600}
.pbar-buy .btn{padding:9px 18px;font-size:.88rem}
@media (max-width:620px){.pbar-in{padding:8px 18px}.pbar-id .nm{font-size:.85rem}
 .pbar-id img{display:none}.pbar-buy{gap:10px}
 .pbar-buy .pr{font-size:.88rem}.pbar-buy .btn{padding:9px 13px;font-size:.82rem}}
@media (max-width:420px){.pbar-id .sk{display:none}}

.tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.tab{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ink-3);
 font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
 padding:11px 15px;cursor:pointer;margin-bottom:-1px}
.tab{transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.tab:hover{color:var(--ink-1)}
.tab.on{color:var(--ink-1);border-bottom-color:var(--accent)}
.pane{padding-top:12px}
.specsec{border-top:1px solid var(--rule)}
.dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
@media (max-width:820px){.dl{grid-template-columns:1fr;gap:0}}
.dl>div{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:13px 0;
 border-bottom:1px solid var(--rule);align-items:baseline}
.dl dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
 color:var(--ink-3);margin:0}
.dl dd{margin:0;font-size:.95rem;color:var(--ink-1);overflow-wrap:anywhere}
@media (max-width:520px){.dl>div{grid-template-columns:1fr;gap:4px}}
.specs{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.specs li{display:flex;justify-content:space-between;gap:18px;padding:11px 0;
 border-bottom:1px solid var(--rule);font-size:.93rem}
.specs .k{color:var(--ink-3);font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.specs .v{color:var(--ink-1);text-align:right}
.bigprice{font-family:var(--mono);font-size:2rem;font-variant-numeric:tabular-nums;
 color:var(--accent);font-weight:700}
.back{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);text-decoration:none;letter-spacing:.05em}
.back{transition:color var(--t) var(--ease)}
.back:hover{color:var(--accent)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{display:flex;flex-direction:column;gap:8px;padding-top:15px;border-top:2px solid var(--accent)}
.step .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--ink-3)}
.step p{font-size:.92rem;color:var(--ink-2)}
/* Ссылки на разделы каталога: и людям способ сузить выбор, и поисковику путь
   к страницам, которые иначе спрятаны за фильтром на JavaScript. */
.morein{max-width:70ch;line-height:1.7}
.morein a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule);
 transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.morein a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.catnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 0 0}
.catnav .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
 color:var(--ink-3);margin-right:4px}
.catnav a{font-size:.86rem;color:var(--ink-2);text-decoration:none;padding:6px 11px;
 border:1px solid var(--rule);border-radius:2px;
 transition:color var(--t) var(--ease),border-color var(--t) var(--ease),
  background-color var(--t) var(--ease)}
.catnav a i{font-style:normal;color:var(--ink-3);font-family:var(--mono);font-size:.72rem;
 margin-left:5px}
.catnav a:hover{border-color:var(--accent);color:var(--accent)}
.catnav a:hover i{color:var(--accent)}
.prose{max-width:70ch;display:flex;flex-direction:column;gap:18px}
.prose p{color:var(--ink-2);font-size:1.03rem;line-height:1.65}
.prose h2{margin-top:26px}
.prose h3{margin-top:10px;font-size:1.02rem}
.prose ul,.prose ol{color:var(--ink-2);margin:0;padding-left:22px;
 display:flex;flex-direction:column;gap:9px;line-height:1.6}
.prose strong{color:var(--ink-1)}
.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;
 transition:border-color var(--t) var(--ease)}
.prose a:hover{border-bottom-color:var(--accent)}
/* Кнопки внутри текста статьи: правило .prose a выше по силе и перекрашивало
   их в цвет ссылки — у главной кнопки текст сливался с фоном. */
.prose a.btn{border-bottom:0}
.prose a.btn-primary{color:var(--accent-ink)}
.prose a.btn-ghost{color:var(--ink-1)}
.prose a.btn-ghost:hover{color:var(--accent)}
.toc{border:1px solid var(--rule);padding:20px 22px;display:flex;flex-direction:column;gap:10px;
 background:var(--surface)}
.toc .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
 color:var(--ink-3)}
.toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;
 font-size:.95rem;color:var(--ink-2)}
.toc a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent;
 transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.toc a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.callout{border-left:2px solid var(--accent);background:var(--surface);padding:18px 22px;
 display:flex;flex-direction:column;gap:9px}
.callout .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
 color:var(--accent)}
.callout p{font-size:.98rem;color:var(--ink-2);margin:0}
.cmp{width:100%;border-collapse:collapse;font-size:.93rem;display:block;overflow-x:auto}
.cmp th,.cmp td{border:1px solid var(--rule);padding:11px 13px;text-align:left;vertical-align:top}
.cmp th{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
 color:var(--ink-3);font-weight:400;background:var(--surface)}
.cmp td{color:var(--ink-2)}
.cmp td strong{color:var(--ink-1)}
.gcard{background:var(--ground);border:1px solid var(--rule);padding:24px;display:flex;
 flex-direction:column;gap:11px;text-decoration:none;position:relative;
 transition:border-color var(--t) var(--ease),box-shadow var(--t-slow) var(--ease)}
.gcard h3{font-size:1.12rem}
.gcard p{color:var(--ink-2);font-size:.94rem;margin:0}
.gcard .read{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
 color:var(--accent);margin-top:auto;padding-top:6px}
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px;margin-top:18px}
.byline{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--ink-3)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:22px 0 0;
 font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-3)}
.crumbs a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a{transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.crumbs a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.crumbs .here{color:var(--ink-2)}
.faq{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);padding:15px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1rem;list-style:none;
 transition:color var(--t) var(--ease)}
.faq summary:hover{color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--accent);font-family:var(--mono);margin-right:11px}
.faq details[open] summary::before{content:"\2013"}
.faq p{color:var(--ink-2);font-size:.95rem;padding:10px 0 0 25px;max-width:66ch}
.wl{background:var(--surface);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.wl-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;padding:60px 28px}
@media (max-width:880px){.wl-grid{grid-template-columns:1fr;gap:28px}}
.formbox{background:var(--ground);border:1px solid var(--rule);border-radius:2px;
 overflow:hidden;min-height:520px}
.formbox iframe{width:100%;border:0;display:block;min-height:520px}
footer{padding:40px 0 56px;color:var(--ink-3);font-size:.86rem;border-top:1px solid var(--rule)}
.foot{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;align-items:flex-start}
.stamp{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;display:block}
.foot a{text-decoration:none}
.foot a{transition:color var(--t) var(--ease)}
.foot a:hover{color:var(--accent)}
/* Ссылки в подвале — второй способ уйти со страницы, важен на телефоне. */
.footnav{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:.9rem;color:var(--ink-2)}
.footnav a{color:var(--ink-2);border-bottom:1px solid transparent;padding-bottom:1px}
.footnav a{transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.footnav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.footstamps{display:flex;flex-direction:column;gap:6px;text-align:right}
.footlegal{grid-column:1/-1;margin:0;font-size:.78rem;line-height:1.6;color:var(--ink-3)}
.footlegal a{color:var(--ink-2)}
@media (max-width:700px){
 .foot{flex-direction:column;gap:24px}
 .footnav{flex-direction:column;gap:14px;width:100%}
 .footstamps{text-align:left}
}
/* --- Наведение: только там, где есть настоящий курсор. На сенсорном экране
   hover «залипает» после тапа, поэтому подъём, тень и масштаб сюда не идут. --- */
@media (hover:hover) and (pointer:fine){
 /* Тень в плотной сетке почти не читается, поэтому главный сигнал —
    латунная черта по верху карточки, вырастающая от левого края. */
 .card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;z-index:2;
  transition:transform var(--t-slow) var(--ease)}
 .card:hover::before{transform:scaleX(1)}
 .card:hover{box-shadow:var(--lift);z-index:2}
 .card:hover .shot img{transform:scale(1.045)}
 .card:hover .p{color:var(--accent)}
 .gcard:hover{border-color:var(--accent);box-shadow:var(--lift)}
 .card .p{transition:color var(--t) var(--ease)}
 .btn:hover{transform:translateY(-1px);box-shadow:var(--lift)}
 .btn:active{transform:translateY(0);box-shadow:none}
 .chip:hover{background:var(--surface)}
 .thumb:hover img{transform:scale(1.07)}
 .swatch:hover{transform:scale(1.12)}
 .swatch.on:hover{transform:scale(1.06)}
 .cartbtn:hover .n{transform:scale(1.25)}
 .citem:hover img{transform:scale(1.05)}
 .citem img{transition:transform var(--t-slow) var(--ease)}
 /* пункт меню подчёркивается линией, растущей от левого края */
 header nav a{position:relative}
 header nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--ease)}
 header nav a:hover::after{transform:scaleX(1)}
 /* вкладка характеристик — так же, но линия идёт из центра */
 .tab{position:relative}
 .tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transition:transform var(--t-slow) var(--ease)}
 .tab:hover:not(.on)::after{transform:scaleX(.55)}
 .shotbox img{transition:transform var(--t-slow) var(--ease)}
 .shotbox:hover img{transform:scale(1.03)}
}
/* Ряд достоинств на странице товара. Таблица характеристик из двенадцати
   строк нужна тому, кто сравнивает; этот ряд — тому, кто решает: шесть
   главных фактов считываются за пару секунд. Собирается из того, что завод
   реально прислал, поэтому у разных кресел пунктов может быть от трёх
   до шести, но пустых мест не бывает. */
.perks{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--rule);
 display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.perks li{display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;
 column-gap:10px;align-items:start}
.perks svg{grid-row:1/3;width:22px;height:22px;fill:none;stroke:var(--accent);
 stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.perks .pk-t{font-size:.92rem;font-weight:600;line-height:1.3}
.perks .pk-s{font-size:.78rem;color:var(--ink-3);line-height:1.35;margin-top:2px}
@media (max-width:520px){.perks{grid-template-columns:1fr;gap:12px}}

/* --- Телефон: размеры под палец и фото раньше текста ------------------
   Замерено 12 сентября на 390×844: главная кнопка покупки была 132×36,
   образцы цвета 36×36, вкладки 38 в высоту. Палец надёжно попадает по
   мишени от 44 px — это и рекомендация Apple, и уровень AAA в WCAG.
   Заодно первое фото кресла уезжало на 662 px вниз, то есть человек
   первым делом видел стену текста. Мебель продаёт картинка. */
@media (max-width:700px){
 /* главное действие во всю ширину — как на всех сильных магазинах */
 .cta-row{flex-direction:column;align-items:stretch}
 .cta-row .btn{width:100%;text-align:center;min-height:52px;
  display:flex;align-items:center;justify-content:center;font-size:1rem}
 .buyrow .btn-primary,.qtyrow .btn-primary{flex:1;min-height:52px;font-size:1rem}
 /* выбор цвета — это покупательское действие, мишень должна быть крупной */
 .swatch{width:44px;height:44px}
 .tab{padding:14px 15px}
 .cartbtn,.themetoggle{min-height:44px;display:inline-flex;align-items:center}
 .pbar .btn-primary{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
 .qty button{width:44px;height:48px}
 .qty span{min-width:40px}
 /* Фото кресла выше текста, но с потолком по высоте: иначе картинка
    съедает первый экран и обещание «двенадцать лет» человек не видит.
    300 px хватает, чтобы кресло читалось, и заголовок остаётся в кадре. */
 .hero .shotbox{order:-1;padding:14px}
 .hero .shotbox img{max-height:300px;width:auto;max-width:100%}
 .hero{gap:22px}
}

/* Каталог на телефоне — две колонки. В одну 157 моделей давали 94 экрана
   прокрутки (замерено 12 сентября на 390×844); в две получается вдвое
   короче. Так устроен любой магазин на телефоне: человек сравнивает
   соседние кресла взглядом, а не памятью. Отступы внутри карточки
   поджимаем, иначе от фото ничего не останется. */
@media (max-width:640px){
 .grid{grid-template-columns:1fr 1fr}
 .card{padding-bottom:14px}
 .card .shot{padding:12px}
 .card .meta{padding:12px 12px 0;gap:5px}
 .card h3{font-size:.88rem;line-height:1.25}
 .card .sku{font-size:.6rem}
 .card .mat{font-size:.75rem}
 .card .p{font-size:.88rem;padding-top:6px}
}
/* Совсем узкие экраны (iPhone SE и подобные) — снова одна колонка:
   на 320 px две колонки дают фото меньше 130 px, кресло не разглядеть. */
@media (max-width:359px){
 .grid{grid-template-columns:1fr}
}

/* ============================================================================
   ДИЗАЙН 2 — 15 сентября 2026. По мотивам rideradian.com: крупный спокойный шрифт
   средней жирности со сжатой разрядкой, смена светлых и тёмных экранов, кнопки-
   таблетки со стрелкой в круге, скругления у фото. Цвета — наши: кость, графит, латунь.
   Слой лежит поверх старых стилей и переопределяет их, поэтому корзина, вкладки,
   галерея и фильтр работают как раньше.
   ========================================================================== */
:root{--display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable","Segoe UI",
 Roboto,"Helvetica Neue",Arial,sans-serif;
 --brass:#C08B2C;--stone:#E4DED3;--fade:#857F75;--r:14px;--pill:999px;--ink-3:#5B606A;
 --ground:#F4F1EC;--surface:#EDE9E2;--sunk:#E6E0D6;--rule:#DCD6CC}
:root[data-theme="dark"]{--brass:#D9A445;--stone:#1E2127;--fade:#6E737C;--sunk:#1C1F25;--ink-3:#8A8F98}
/* тёмные экраны: подменяем переменные внутри, всё содержимое перекрашивается само */
.dark,footer{--ground:#14161A;--surface:#1B1E23;--sunk:#1F2329;--ink-1:#F4F1EC;--ink-2:#B6BAC1;
 --ink-3:#8E939C;--rule:#2B2F36;--accent:#D9A445;--brass:#D9A445;--fade:#6E737C;
 background:var(--ground);color:var(--ink-1)}

body{font-size:16px;letter-spacing:-.006em}
h1,h2,h3{font-weight:500}
h1{font-size:clamp(2.55rem,6vw,5rem);line-height:.98;letter-spacing:-.038em}
h2{font-size:clamp(1.85rem,3.6vw,2.9rem);line-height:1.03;letter-spacing:-.032em}
.sec-head h1{font-size:clamp(1.85rem,3.6vw,2.9rem);line-height:1.03;letter-spacing:-.032em}
h3{letter-spacing:-.014em}
h1 em{font-style:normal;color:var(--accent)}
.lede{font-size:1.1rem;line-height:1.5}
.eyebrow{font-size:.66rem;letter-spacing:.18em}
section{padding:92px 0}
.sec-head{gap:14px;margin-bottom:40px}

/* шапка */
header{background:color-mix(in srgb,var(--ground) 84%,transparent);
 -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
 border-bottom:1px solid color-mix(in srgb,var(--rule) 70%,transparent)}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:13px 28px}
header nav{gap:24px;font-size:.88rem;color:var(--ink-1)}
.mark{justify-self:center;font-size:.98rem;font-weight:600;letter-spacing:.42em;padding-left:.42em;
 color:var(--ink-1)}
.headright{justify-self:end;gap:8px}
.themetoggle{border-radius:var(--pill);font-family:var(--display);text-transform:none;letter-spacing:0;
 font-size:.82rem;padding:8px 14px}
.cartbtn{border-radius:var(--pill);background:var(--brass);border-color:var(--brass);color:#14161A;
 font-family:var(--display);text-transform:none;letter-spacing:0;font-size:.86rem;font-weight:500;
 padding:6px 6px 6px 15px;display:inline-flex;align-items:center;gap:9px}
.cartbtn:hover{color:#14161A;border-color:var(--brass);filter:brightness(1.06)}
.cartbtn .n{margin:0;min-width:26px;height:26px;padding:0 6px;border-radius:var(--pill);
 display:inline-grid;place-items:center;background:#14161A;color:var(--brass);font-size:.78rem}

/* кнопки-таблетки; у ссылок стрелка в круге, у кнопки покупки — плюс */
.btn{border-radius:var(--pill);font-weight:500;font-size:.94rem;padding:11px 22px;
 display:inline-flex;align-items:center;justify-content:center;gap:12px;letter-spacing:-.01em}
a.btn,#addcart{padding:8px 8px 8px 20px}
a.btn::after,#addcart::after{content:"→";display:inline-grid;place-items:center;flex:none;
 width:28px;height:28px;border-radius:50%;border:1px solid currentColor;font-size:.82rem;line-height:1;
 transition:transform var(--t) var(--ease-out)}
#addcart::after{content:"+";font-size:1rem}
a.btn:hover::after{transform:translateX(3px)}
#addcart:hover::after{transform:rotate(90deg)}
.btn-primary{background:var(--brass);color:#14161A}
.btn-primary:hover{filter:brightness(1.07)}
.prose a.btn-primary{color:#14161A}
.btn-ghost{border-color:color-mix(in srgb,var(--ink-1) 26%,transparent);color:var(--ink-1)}
.btn-ghost:hover{border-color:var(--ink-1);color:var(--ink-1)}
.chip,.catnav a,input[type=search],select,.qty,.clearall,.toast{border-radius:var(--pill)}
.qty button:first-child{border-radius:var(--pill) 0 0 var(--pill)}
.qty button:last-child{border-radius:0 var(--pill) var(--pill) 0}
.chip.on{color:#14161A;background:var(--brass);border-color:var(--brass)}

/* карточки: фото на камне со скруглением, подпись под ним, без клеток */
.grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:30px 18px;background:transparent;border:0}
.card{background:transparent;padding-bottom:6px}
.card:hover{background:transparent;box-shadow:none}
.card::before{display:none}
.card .shot{border-radius:var(--r);background:var(--sunk);transition:box-shadow var(--t-slow) var(--ease)}
.card:hover .shot{box-shadow:var(--lift)}
@media (hover:none){.card:hover .shot{box-shadow:none}}
.card .meta{padding:14px 2px 0;gap:5px}
.card h3{font-size:1.02rem}
.card .p{font-family:var(--display);font-weight:500;font-size:1rem;letter-spacing:-.01em;color:var(--ink-1)}
.dots{padding:3px 0 0}
.shotbox,.thumb,.thumbs button,.facts-fig{border-radius:var(--r)}
.thumb img,.thumbs img{border-radius:10px}

/* цены — тем же спокойным шрифтом, что и заголовки, а не жирным моноширинным */
.bigprice{font-family:var(--display);font-weight:500;font-size:2.2rem;letter-spacing:-.03em;color:var(--ink-1)}
.pbar-buy .pr,.citem .pr{font-family:var(--display);font-weight:500;letter-spacing:-.01em;color:var(--ink-1)}
.total .v{font-family:var(--display);font-weight:500;letter-spacing:-.02em;color:var(--ink-1)}

/* 3D-кресло в карточке: ложится ровно на фото, сменяет его прозрачностью */
.shotbox{position:relative;overflow:hidden}
.g3d{position:absolute;display:block;background:transparent;opacity:0;cursor:grab;
 transition:opacity .5s var(--ease)}
.g3d:active{cursor:grabbing}
.shotbox.live3d .g3d{opacity:1}
#mainshot{transition:opacity .5s var(--ease)}
.shotbox.live3d #mainshot{opacity:0}
.g3d-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;
 font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
 color:var(--ink-3);background:color-mix(in srgb,var(--ground) 80%,transparent);
 padding:6px 12px;border-radius:var(--pill);opacity:0;pointer-events:none;
 transition:opacity .5s var(--ease)}
.shotbox.live3d .g3d-hint{opacity:1}
.shotbox.g3d-used .g3d-hint{opacity:0}

/* главный экран — рассказ: кресло на липкой сцене, пять экранов текста листаются
   поверх неё, и за них кресло делает ровно оборот */
.spin{padding:0;position:relative;
 background:radial-gradient(90% 70% at 64% 40%,#F1ECE4 0%,#E3DCD1 58%,#D3CBBE 100%)}
:root[data-theme="dark"] .spin{background:radial-gradient(90% 70% at 64% 40%,#2A2E35 0%,#1B1E23 60%,#14161A 100%)}
.spin-stage{position:sticky;top:var(--headh,64px);height:calc(100vh - var(--headh,64px));
 height:calc(100svh - var(--headh,64px));overflow:hidden;z-index:0}
.spin-img{position:absolute;left:68%;top:52%;height:min(88%,760px);width:auto;
 transform:translate(-50%,-50%);pointer-events:none;user-select:none}
/* живая модель ложится ровно на постер (hero.js считает место), смена — прозрачностью */
.spin-mv{position:absolute;display:block;background:transparent;pointer-events:none;opacity:0;
 transition:opacity .6s var(--ease)}
.spin-live .spin-mv{opacity:1}
.spin img.spin-img{transition:opacity .6s var(--ease)}
.spin-live img.spin-img{opacity:0}
.spin-notes,.spin-ticks{display:none}
.spin-read{position:absolute;top:26px;right:28px;display:flex;gap:16px;align-items:baseline;
 font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.spin-read .deg{color:var(--ink-1);font-variant-numeric:tabular-nums;min-width:4ch;text-align:right}
.spin-steps{position:relative;z-index:1;margin-top:calc(-100vh + var(--headh,64px));
 margin-top:calc(-100svh + var(--headh,64px))}
.spin-step{min-height:calc(100vh - var(--headh,64px));min-height:calc(100svh - var(--headh,64px));
 display:flex;align-items:center}
.spin-step>.wrap{width:100%}
.spin-text{max-width:31rem;display:flex;flex-direction:column;gap:18px}
.spin-step:first-child .spin-text{max-width:36rem}
.spin-text h1{max-width:12ch}
.spin-text h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.02;letter-spacing:-.034em}
.spin-text p{color:var(--ink-2);font-size:1.05rem;line-height:1.55;max-width:44ch}
.spin-text .spin-specs{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-3)}

/* крупный список «что вы получаете»: строка ярче, когда проходит середину экрана */
.facts-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:start}
.facts-list{list-style:none;margin:22px 0 0;padding:0}
.facts-list li{padding:22px 0 24px;border-top:1px solid var(--rule)}
.facts-list h2{font-size:clamp(1.9rem,4.4vw,3.4rem)}
.facts-list p{margin-top:10px;color:var(--ink-2);max-width:48ch;font-size:1rem}
.facts-fig{position:sticky;top:calc(var(--headh,64px) + 36px);margin:52px 0 0;background:var(--sunk);
 padding:36px;display:grid;place-items:center}
.facts-fig img{width:100%;max-width:340px;height:auto;display:block}
@keyframes lit{0%,100%{color:var(--fade)}38%,62%{color:var(--ink-1)}}
@supports (animation-timeline:view()){
 @media (prefers-reduced-motion:no-preference){
  .facts-list h2{animation:lit linear both;animation-timeline:view();animation-range:cover 12% cover 88%}
 }
}

/* тёмный блок «как заказать» и подвал */
.wl.dark{border:0}
.dark .step{border-top-color:var(--brass)}
.dark .step h3{font-size:1.25rem}
footer{padding:84px 0 40px;border-top:0}
.foot{display:grid;grid-template-columns:1.2fr 1fr;gap:40px 56px;align-items:start}
.foot-lead{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.foot-big{font-size:clamp(2rem,4vw,3.2rem);line-height:1;letter-spacing:-.035em;font-weight:500;color:var(--ink-1)}
.footnav{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;font-size:.95rem}
.footnav a{color:var(--ink-1)}
.footstamps{grid-column:1/-1;flex-direction:row;justify-content:space-between;text-align:left;
 padding-top:28px;border-top:1px solid var(--rule);flex-wrap:wrap;gap:8px}

@media (max-width:860px){
 .bar{display:flex;flex-wrap:wrap}
 .mark{order:1;justify-self:auto;padding-left:0}
 .headright{order:2;margin-left:auto}
 .facts-grid{grid-template-columns:1fr;gap:0}
 .facts-fig{display:none}
 .foot{grid-template-columns:1fr}
}
@media (max-width:700px){
 section{padding:64px 0}
 :root[data-theme="dark"] .spin{background:#1F232A}
 :root[data-theme="dark"] .spin-stage{background:linear-gradient(to bottom,#1F232A calc(100% - 52px),rgba(31,35,42,0))}
 /* Шапка на телефоне занимает две строки — делаем её ниже и без размытия: сквозь
    полупрозрачную подложку просвечивали кнопки и получалось грязное пятно. */
 header{background:var(--ground);-webkit-backdrop-filter:none;backdrop-filter:none}
 :root{--gut:20px}
 /* На телефоне кресло стоит в своей панели наверху и никуда не уезжает, а текст
    течёт под ней обычной лентой и уходит за кресло. Раньше текст ехал поверх кресла
    и резал его пополам, а между кусками истории зияла пустая половина экрана. */
 .spin{background:#E9E2D7}
 /* нижние 52 px панели — растворение: текст уходит под кресло плавно, а не обрубается */
 /* 42svh, а не 50: при половине экрана на маленьких телефонах заголовок уходил под первый
    экран, а кнопку каталога прикрывала кнопка WhatsApp (замер 29.10.2026, 375×667 и 390×844) */
 .spin-stage{height:calc(42svh + 52px);z-index:2;
  background:linear-gradient(to bottom,#E9E2D7 calc(100% - 52px),rgba(233,226,215,0))}
 .spin-steps{margin-top:0;z-index:1}
 .spin-img{left:50%;top:4%;height:80%;transform:translateX(-50%)}
 /* название и угол резались текстом — на телефоне они не нужны */
 .spin-read{display:none}
 /* подписи деталей у кресла: по одной, на свободных полях слева и справа от кресла */
 .spin-notes{display:block;position:absolute;inset:0 0 52px;margin:0;padding:0;list-style:none;
  pointer-events:none;z-index:1}
 /* метка моноширинным, значение шрифтом заголовков. Линию-выноску к детали Коля
    забраковал 29.10 — не возвращать */
 .spin-notes li{position:absolute;top:var(--y);max-width:min(26vw,118px);opacity:0;
  transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
 .spin-notes li b{display:block;font-family:var(--mono);font-size:.58rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:5px}
 .spin-notes li span{display:block;font-family:var(--serif);font-size:.98rem;line-height:1.18;color:var(--ink-1)}
 .spin-notes li[data-side="l"]{left:var(--gut)}
 .spin-notes li[data-side="r"]{right:var(--gut);text-align:right}
 .spin-notes li.on{opacity:1;transform:none}
 /* где мы в обходе: шесть отметок, текущая длиннее и золотая */
 .spin-ticks{display:flex;position:absolute;left:var(--gut);top:16px;gap:5px;z-index:1}
 .spin-ticks i{width:10px;height:2px;border-radius:1px;background:var(--ink-3);opacity:.45;
  transition:width .35s var(--ease),background .35s,opacity .35s}
 .spin-ticks i.on{width:22px;background:var(--accent);opacity:1}
 .spin-step{min-height:0;align-items:flex-start;padding:34px 0}
 .spin-step>.wrap{padding:0 20px}
 .spin-text{gap:12px}
 .spin-step:first-child .lede{display:none}
 .spin-step:first-child{padding-top:16px}
 .spin-step:last-child{padding-bottom:40px}
 .spin-text p{font-size:.96rem}
 .grid{grid-template-columns:1fr 1fr;gap:22px 10px}
 .card .meta{padding:10px 1px 0}
 /* ссылки в подвале: палец должен попадать не глядя */
 .footnav a{padding:9px 0}
}
/* на совсем узких экранах — одна колонка, как было: иначе фото меньше 130 px */
@media (max-width:359px){.grid{grid-template-columns:1fr}}

/* ============================================================================
   ДИЗАЙН 3 — 22 сентября 2026. Шлифовка по словам Коли: «выглядит дёшево, скучно,
   мало доверия». Цвета бренда те же. Что меняется и почему:
   — заголовки и цены шрифтом с засечками (Newsreader, SIL OFL, лежит у нас в
     static/fonts): системный гротеск был как у тысячи сайтов;
   — главная кнопка тёмная, а не горчичная: золото осталось тонким акцентом
     (метки, выбранное, подчёркивания) — так выглядит дорогая вещь;
   — стрелки без кружков, шапка сплошная, длинные примечания обычным шрифтом,
     моноширинный — только для коротких меток;
   — тёмная полоса доверия после первого экрана даёт странице ритм.
   ========================================================================== */
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-400-normal.woff2) format("woff2");
 font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-400-italic.woff2) format("woff2");
 font-weight:400;font-style:italic;font-display:swap}
:root{--serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif}
h1,h2,.sec-head h1,.foot-big{font-family:var(--serif);font-weight:400}
h1{letter-spacing:-.022em;line-height:1}
h2,.sec-head h1{letter-spacing:-.018em;line-height:1.05}
h1 em,h2 em{font-style:italic;color:inherit}
.bigprice,.card .p,.pbar-buy .pr,.citem .pr,.total .v{font-family:var(--serif);font-weight:400;
 letter-spacing:-.01em;font-variant-numeric:lining-nums}
.bigprice{font-size:2.5rem}
.card .p{font-size:1.3rem}
.note{font-family:var(--display);font-size:.8rem;letter-spacing:0;line-height:1.5}

/* кнопки: тёмная главная, стрелка без кружка */
.btn-primary,.prose a.btn-primary{background:var(--ink-1);border-color:var(--ink-1);color:var(--ground)}
.btn-primary:hover{filter:none;background:color-mix(in srgb,var(--ink-1) 86%,var(--brass))}
a.btn,#addcart{padding:12px 24px}
a.btn::after{width:auto;height:auto;border:0;border-radius:0;font-size:1rem}
#addcart::after{content:none}

/* шапка сплошная: сквозь размытие просвечивали кресла и кнопки */
header{background:var(--ground);-webkit-backdrop-filter:none;backdrop-filter:none;
 border-bottom:1px solid var(--rule)}
.cartbtn,.cartbtn:hover{background:var(--ink-1);border-color:var(--ink-1);color:var(--ground);filter:none}
.cartbtn .n{background:var(--ground);color:var(--ink-1)}

/* выбранное и метки: графит с латунью вместо сплошной горчицы */
.chip.on{background:var(--ink-1);border-color:var(--ink-1);color:var(--ground)}
/* число на выбранном фильтре — не полупрозрачным: на графите в тёмной теме было 3,4:1 */
.chip.on .c{opacity:.85}

/* карточка в каталоге: код завода не нужен глазу, он остаётся в поиске */
.card .sku{display:none}
/* фильтры по сериям — тем же шрифтом, что и разделы под ними */
.chip{font-family:var(--display);font-size:.86rem;letter-spacing:0;padding:7px 13px}
.card h3{font-weight:500}

/* полоса доверия на главной */
.proof{padding:34px 0}
.proof-row{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.proof-row div{display:flex;flex-direction:column;gap:4px;padding-left:18px;
 border-left:1px solid var(--brass)}
.proof-row b{font-family:var(--serif);font-weight:400;font-size:1.55rem;letter-spacing:-.015em;line-height:1.1}
.proof-row span{font-size:.88rem;color:var(--ink-2);line-height:1.45}
@media (max-width:860px){.proof-row{grid-template-columns:1fr 1fr;gap:22px 18px}}

/* под ценой в карточке */
.trustrow{list-style:none;margin:-4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;
 font-size:.86rem;color:var(--ink-2)}
.trustrow li{display:inline-flex;align-items:center;gap:7px}
.trustrow li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass);flex:none}

/* --- Движение -------------------------------------------------------------
   Переходы были рывками: вкладки, ответы, фильтр и страницы менялись мгновенно.
   Всё ниже — средствами браузера, без библиотек, и выключается целиком для тех,
   кто просил меньше движения (блок сразу после этого). */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
/* переход между страницами: старая гаснет, новая проявляется; шапка стоит на месте */
@media (prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 ::view-transition-old(root){animation:.3s var(--ease) both vt-out}
 ::view-transition-new(root){animation:.55s var(--ease-out) .05s both vt-in}
 header{view-transition-name:site-head}
}
/* вкладка характеристик и ответ в вопросах открываются мягко */
.pane.on{animation:rise .5s var(--ease-out) backwards}
.faq details[open]>p{animation:rise .45s var(--ease-out) backwards}
/* карточки при загрузке и после фильтра — появление заново запускается,
   когда карточка из display:none снова становится видимой. backwards, а не both:
   после анимации у карточки не должно оставаться transform — иначе она становится
   отдельным слоем и решётка с тенью при наведении ведёт себя иначе (ловит test_hover) */
.grid .card{animation:rise .6s var(--ease-out) backwards}
/* блоки проявляются при прокрутке; где браузер не умеет — просто видны сразу */
@supports (animation-timeline:view()){
 @media (prefers-reduced-motion:no-preference){
  .sec-head,.step,.perks li,.faq details,.glist>*{animation:rise linear both;
   animation-timeline:view();animation-range:entry 0% entry 55%}
 }
}

/* Кто просил меньше движения — получает мгновенные состояния без сдвигов. */

@media (prefers-reduced-motion:reduce){
 *{transition:none!important;animation:none!important}
 .card:hover .shot img,.thumb:hover img,.swatch:hover,.btn:hover,.cartbtn:hover .n,
 .citem:hover img,.shotbox:hover img,.drawer .x:hover{transform:none!important}
 header nav a::after,.tab::after,.card::before{display:none}
}
/* Арабский (2 октября 2026): страницы /ar/ и блок «بيانات المنتج بالعربية» в карточке.
   Шрифтов своих не грузим — у Newsreader нет арабских букв, берём системные. Отрицательный
   трекинг заголовков рвёт связное арабское письмо, поэтому у арабского он нулевой. */
:lang(ar){font-family:"SF Arabic","Geeza Pro","Segoe UI","Noto Sans Arabic","Noto Naskh Arabic",Tahoma,sans-serif!important}
:lang(ar) *{letter-spacing:0!important;text-transform:none!important}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3{font-family:inherit;line-height:1.35}
[dir=rtl] .prose p,[dir=rtl] .prose li{line-height:1.85}
[dir=rtl] .prose ul,[dir=rtl] .prose ol{padding-left:0;padding-right:22px}
.arsec{margin-top:56px;padding-top:34px;border-top:1px solid var(--rule)}
.arsec .dl dt{font-size:.82rem}
.arsec .dl dd{line-height:1.7}
.arcols{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;margin-top:26px}
.arcols h3{margin-bottom:10px}
.arcols ul{margin:0;padding-inline-start:20px;color:var(--ink-2);line-height:1.7;font-size:.95rem}
.arcols li{margin-bottom:6px}
@media (max-width:700px){.arcols{grid-template-columns:1fr}}
/* Подбор кресла, 2 октября 2026 */
.finder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 22px;margin-top:30px;
 padding:24px;border:1px solid var(--rule);border-radius:12px;background:var(--surface,transparent)}
.finder label{display:flex;flex-direction:column;gap:8px}
.finder .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.finder .inp{display:flex;align-items:center;border:1px solid var(--rule);border-radius:8px;background:var(--ground)}
.finder input,.finder select{font:inherit;font-size:1.05rem;color:var(--ink-1);background:var(--ground);
 border:0;padding:12px 12px;min-height:46px;width:100%;box-sizing:border-box;border-radius:8px}
.finder select{border:1px solid var(--rule)}
.finder .inp i{font-style:normal;font-family:var(--mono);font-size:.78rem;color:var(--ink-3);padding:0 12px}
.finder input:focus-visible,.finder select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.finder .btn{grid-column:1/-1;justify-self:start;min-height:46px}
.fresults{margin-top:30px;display:flex;flex-direction:column;gap:14px}
.fhead{font-family:var(--serif);font-size:1.35rem;margin:0}
.fmsg{color:var(--ink-2);margin:0}
.fmsg a{color:var(--accent)}
.frow{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:18px 0;border-top:1px solid var(--rule)}
.frow img{width:120px;height:auto;display:block}
.fbody{display:flex;flex-direction:column;gap:8px}
.fbody h3{font-size:1.2rem}
.fbody h3 a{color:var(--ink-1);text-decoration:none}
.fwhy{margin:0;padding-left:18px;color:var(--ink-2);font-size:.95rem;line-height:1.6}
.fbuy{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:4px}
.fprice{font-family:var(--serif);font-size:1.3rem;color:var(--ink-1)}
@media (max-width:860px){.finder{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.finder{grid-template-columns:1fr;padding:18px}.frow{grid-template-columns:84px 1fr;gap:14px}
 .frow img{width:84px}.finder .btn{justify-self:stretch}}
/* WhatsApp на каждой странице — 20 октября 2026 */
.wafab{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));
 z-index:60;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
 background:#25D366;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.22);text-decoration:none;transition:transform .2s}
.wafab:hover{transform:scale(1.06)}
.wafab:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
html.locked .wafab{display:none}
.wafab{transition:transform .2s,opacity .2s}
.wafab.off{opacity:0;transform:scale(.8);pointer-events:none}
@media (prefers-reduced-motion:reduce){.wafab{transition:none}}