/* собрано scripts/prepare.mjs из ../src/css — править там */
@font-face{font-family:"Fira Mono";font-style:normal;font-weight:400;font-display:block;src:url("/assets/fonts/FiraMono-Regular.woff2") format("woff2")}
@font-face{font-family:"Fira Mono";font-style:normal;font-weight:500;font-display:block;src:url("/assets/fonts/FiraMono-Medium.woff2") format("woff2")}
@font-face{font-family:"Fira Mono";font-style:normal;font-weight:700;font-display:block;src:url("/assets/fonts/FiraMono-Bold.woff2") format("woff2")}
@font-face{font-family:"Univers";font-style:normal;font-weight:400;font-display:block;src:url("/assets/fonts/Univers-Regular.woff2") format("woff2")}
@font-face{font-family:"Univers";font-style:normal;font-weight:700;font-display:block;src:url("/assets/fonts/Univers-Bold.woff2") format("woff2")}

:root{
  --ink:#000;--paper:#fff;--g900:#2d2d2d;--g800:#353535;--g600:#606060;--g500:#767676;--g400:#949494;--g300:#acacac;--g280:#bdbaba;--g250:#c0c0c0;--g200:#c1c1c1;--g150:#cdcdcd;--g100:#d9d9d9;
  --overlay:rgba(0,0,0,.54);--stripe-dim:rgba(255,255,255,.43);
  --ui:"Univers",Arial,Helvetica,sans-serif;--mono:"Fira Mono",ui-monospace,Menlo,Consolas,monospace;
  --pad:30px;--gap:27px;--cols:4;--header-h:48px;--radius:5px;
}

*,*::before,*::after{box-sizing:border-box;min-width:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-width:none;scroll-padding-top:var(--header-h)} /* the page scrollbar is hidden (client, 2026-09-06); scrolling itself works */
/* ШАПКА position:fixed (не sticky): sticky ломался на части мобильных браузеров из-за
   overflow-x:clip на html/body — шапка уезжала за экран при скролле (заказчик, 2026-09-29).
   Поэтому тело всегда отступает на высоту шапки: */
html::-webkit-scrollbar{display:none}
body{margin:0;padding-top:var(--header-h);background:var(--paper);color:var(--ink);font:400 16px/20px var(--ui);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
[hidden]{display:none!important}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,ul,figure{margin:0;padding:0}
ul{list-style:none}
table{border-collapse:collapse;max-width:100%}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{padding-inline:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap);row-gap:37px}
.btn{display:flex;align-items:center;justify-content:center;text-align:center;height:59px;padding:0 20px;background:var(--g800);color:var(--paper);border-radius:var(--radius);font:400 20px/25px var(--ui);white-space:nowrap}
.btn:disabled,.btn.is-disabled{background:var(--g800);opacity:.35;cursor:default}
.btn--ghost{background:none;color:var(--ink);border:1px solid var(--g800)}
.btn--mono{font:400 16px/20px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.field{display:block;width:100%;height:44px;padding:0 14px;border:1px solid var(--g800);border-radius:var(--radius);background:var(--paper);font:400 16px/20px var(--ui);color:var(--ink);outline:none}
.field::placeholder{color:var(--g280)}
.field:focus{border-color:var(--ink)}
.dd{position:relative}
.dd__btn{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;cursor:pointer;padding-right:14px}
.dd__btn .chev{display:block;width:15px;height:8px;flex:none;transition:transform .2s}
.dd__btn .chev img{display:block;width:15px;height:8px}
.dd.is-open .dd__btn .chev{transform:rotate(180deg)}
.dd.is-open .dd__btn{border-color:var(--ink)}
.dd__list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;margin:0;padding:6px 0;list-style:none;background:var(--paper);border:1px solid var(--ink);border-radius:var(--radius)}
.dd__opt{padding:11px 14px;font:400 16px/20px var(--ui);cursor:pointer}
.dd__opt.is-sel,.dd__opt[aria-selected="true"]{text-decoration:underline;text-underline-offset:3px}
.dd__label{font:400 16px/20px var(--ui)}
.dd__opt:hover,.dd__opt.is-focus{background:#f3f3f3}
.dd__opt[aria-selected="true"]{}
select.field{appearance:none;-webkit-appearance:none;padding-right:40px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='8' viewBox='0 0 15 8'%3E%3Cpath d='M1 1l6.5 6L14 1' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;cursor:pointer}
.field--line{border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:0;height:44px;font:400 16px/20px var(--ui)}
.field--line::placeholder{color:var(--g500)}
.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:400 16px/20px var(--ui)}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{width:16px;height:16px;border:1px solid var(--g800);border-radius:2px;flex:none;display:grid;place-items:center;color:var(--ink);background:var(--paper)}
.check__box svg{display:none;width:16px;height:16px}
.check input:checked+.check__box svg{display:block}
.radio{display:flex;align-items:center;gap:10px;cursor:pointer;font:400 16px/20px var(--ui)}
.radio input{position:absolute;opacity:0;width:0;height:0}
.radio__dot{width:16px;height:16px;border:1px solid var(--g800);border-radius:50%;flex:none;display:grid;place-items:center;background:var(--paper)}
.radio__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink);display:none}
.radio input:checked+.radio__dot::after{display:block}
.mono-label{font:400 16px/20px var(--ui);color:var(--ink)}
.error-block{font:400 16px/20px var(--ui);color:var(--ink)}
@media (max-width:1199px){:root{--cols:3;--gap:24px;--pad:24px}}
@media (max-width:899px){:root{--cols:2;--gap:16px;--pad:16px}}
@media (max-width:899px){.field,.field--line,.sub__field{font-size:16px}} /* iOS zooms into inputs smaller than 16px */
@media (max-width:599px){:root{--gap:10px;--pad:12px}.btn{height:52px;font-size:18px}}
@media (max-width:359px){:root{--cols:1}}

/* ДИЗАЙН-ИНВАРИАНТЫ шапки (не ломать!):
   — логотип 26px на ВСЕХ экранах и строго по центру (absolute+translateX, как на заглушке);
   — бургер/иконки сидят в своих grid-колонках явно: логотип вне потока, без grid-column
     они съезжают к центру (баг 2026-09-29);
   — шапка fixed, тело отступает var(--header-h) (см. 10-base.css). */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--header-h);background:var(--paper);border:1px solid transparent;border-bottom-color:var(--g300);display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.hdr__nav{grid-column:1;display:flex;align-items:flex-start;gap:25px;padding:12px 0 0 29px;font:400 18px/22px var(--ui);color:var(--g800)}
.hdr__nav .is-bold{font-weight:700}
.hdr__burger{grid-column:1;position:relative;z-index:2;display:none;width:44px;height:46px;align-items:center;justify-content:center;color:var(--g800)}
.hdr__logo{display:block;grid-column:2;justify-self:center;margin:auto;font-weight:500;font-family:var(--mono);font-size:26px;color:var(--ink);white-space:nowrap;letter-spacing:0;z-index:1}  /* заказчик 2026-09-30: margin auto, всегда 26px, без «/31px» */
.hdr__icons{grid-column:3;position:relative;z-index:2;display:flex;justify-content:flex-end;align-items:flex-start;padding:2px 14px 0 0;gap:0}
.hdr__ic{position:relative;display:block;color:var(--ink)}
.hdr__ic--heart{width:47px;height:42px}
.hdr__ic--bag{width:44px;height:43px}
/* live counter drawn exactly over the «0» disc of the Figma bag crop (disc 24px of 87 → 12.14px of 44, at 20.23/10.62) */
.hdr__ic .badge{position:absolute;left:20.2px;top:10.6px;width:12.2px;height:12.2px;border-radius:50%;background:var(--ink);color:var(--paper);font:500 7px/12.2px var(--mono);text-align:center;letter-spacing:0}
.hdr__ic .ic-raster,.hdr__ic .ic-off,.hdr__ic .ic-on{display:block;width:100%;height:100%}.hdr__ic .ic-on{display:none}
.hdr__ic--heart.is-on .ic-off{display:none}.hdr__ic--heart.is-on .ic-on{display:block}
.hdr__ic--bag .badge{display:none}.hdr__ic--bag.is-on .badge{display:block}
@media (max-width:899px){
  .hdr{grid-template-columns:1fr auto 1fr;align-items:center}  /* как на десктопе: лого строго по центру экрана (заказчик, 2026-09-30) */
  .hdr__nav{display:none}
  .hdr__burger{display:flex}
  .hdr__icons{padding:0 2px 0 0}
  .hdr__ic--heart,.hdr__ic--bag{width:44px;height:44px}
}

.overlay{position:fixed;left:0;right:0;top:var(--header-h);height:calc(125vh - var(--header-h));height:calc(125lvh - var(--header-h));background:var(--overlay);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
.overlay.is-open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:var(--header-h);height:calc(125vh - var(--header-h));height:calc(125lvh - var(--header-h));width:363px;max-width:100%;background:var(--paper);z-index:50;overflow:hidden;transform:translateX(-100%);transition:transform .24s cubic-bezier(.22,1,.36,1);visibility:hidden}
/* Схема заказчика (2026-09-29): ящик РАСТЯНУТ на 125% высоты экрана — белый запас уходит под
   полупрозрачную строку Safari при любом раскладе viewport-единиц; контент живёт во
   внутреннем .drawer__in ровно на высоту экрана (100lvh−header): кнопки футера на месте,
   скролл внутри него, лишний скролл снаружи не появляется. */
.drawer__in{height:calc(100vh - var(--header-h));height:calc(100lvh - var(--header-h));display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
/* Подложка под строку Safari — border-bottom 200px: НЕПРОБИВАЕМЫЙ вариант (2026-09-29).
   Работает при ЛЮБОМ раскладе viewport-единиц: даже если браузер считает высоту как svh,
   рамка докрашивает 200px ниже неё (зона строки ~93px). border-box: контентная область
   = 100lvh − header, как и была — футер и скролл не меняются, рамка уходит за экран.
   (Чистый 100lvh на устройстве заказчика просвет не закрыл; ::after/fixed внутри drawers
   в Safari перекрывал кнопки; box-shadow не клеится вплотную к краю.) */
.drawer.is-open{transform:none;visibility:visible}
.drawer--left{left:0}
.drawer::-webkit-scrollbar,.rows::-webkit-scrollbar{display:none}
.drawer--right{right:0;transform:translateX(100%);width:420px}
.drawer--right .drawer__close{top:6px;right:calc(var(--pad) - 8px)}
.drawer--right .rows{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.drawer--right.drawer--cart{width:480px}
.drawer__close{position:absolute;top:12px;right:11px;width:40px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.drawer__close img{width:40px;height:36px;display:block;object-fit:cover}
.drawer--cart .drawer__head{padding-right:30px} /* крестика в корзине нет — место под него не резервируем */
.drawer__head{display:flex;align-items:center;flex:none;height:48px;padding:0 60px 0 30px;font:400 20px/25px var(--ui);color:var(--ink)}
.drawer__empty{position:absolute;inset:48px 0 0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:30px;text-align:center;font:400 18px/22px var(--ui);color:var(--ink)}
.drawer__empty a{text-decoration:underline}
/* menu (Figma «Меню»): titles Bold 18 at 30/26, lists 18/22 with 5px paragraph gap */
.menu{padding:26px 30px 40px}
.menu__group+.menu__group{margin-top:42px}
.menu__title{font:700 18px/22px var(--ui);color:var(--g800);width:fit-content}
.menu__list{margin-top:13px;font:400 18px/22px var(--ui);color:var(--g800);width:fit-content;min-width:199px}
.menu__list li+li{margin-top:5px}
.menu__list a{display:block}
.menu__extra{display:none;margin-top:42px;font:400 18px/22px var(--ui);color:var(--g800)} /* same style as the category lists (client 2026-09-07) */
.menu__extra li+li{margin-top:5px}
.menu__extra a{display:block}
html.is-locked{overflow-y:hidden;padding-right:var(--sbw,0px)} /* --sbw = width of the classic scrollbar (Windows/Linux), set by the script so the page does not jump */
/* cart / favorites rows */
.rows{padding:0 30px}
/* ДИЗАЙН строки корзины (заказчик, 2026-09-29): картинка слева (строка 1, высота зафиксирована
   по её aspect-ratio), текст справа сверху, ЦЕНА — СПРАВА на уровне нижнего края картинки.
   ВАЖНО: всем трём детям заданы явные grid-column/grid-row — с автоплейсментом колонки
   перекашивает (контент уезжает влево/вверх). Не убирать явные координаты! */
.row{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:120px auto;column-gap:20px;padding:12px 0;color:var(--ink)}
.row--link{cursor:pointer}
.row__link{display:block;align-self:start}
.row>.row__link,.row>.row__img{grid-column:1;grid-row:1;align-self:start}
.row__img{width:96px;height:auto;aspect-ratio:4/5;object-fit:cover;background:#f2f2f2;align-self:start}
.row__name{font:400 18px/22px var(--ui)}
.row__name b{font-weight:700}
.row__meta{margin-top:0;font:400 16px/20px var(--ui);color:var(--ink)}
.row>div:not(.row__price):not(.qty){grid-column:2;grid-row:1/span 2}
/* счётчик — на линии нижнего края картинки слева, цена — справа (заказчик, 2026-09-29) */
.row>.qty{grid-column:2;grid-row:1;align-self:end;justify-self:start;margin-top:0}
.row__price{grid-column:2;grid-row:1;align-self:end;justify-self:end;padding-top:12px;font:400 16px/20px var(--ui);text-align:right;white-space:nowrap}
.row__rm{display:block;margin-top:4px;font:400 16px/20px var(--ui);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* quantity stepper in the cart: pieces are changed here, «Удалить» drops the whole item (client 2026-09-10) */
.qty{display:inline-flex;align-items:center;margin-top:6px;height:32px;margin-left:-9px}
.qty__b{width:32px;height:32px;display:grid;place-items:center;color:var(--ink)}
.qty__b svg{display:block;width:15px;height:15px}
.qty__b[disabled]{opacity:.28;cursor:default}
.qty__n{min-width:26px;padding:0 2px;text-align:center;font:400 16px/20px var(--ui);font-variant-numeric:tabular-nums}
@media (hover:hover){.qty__b:not([disabled]):hover{opacity:.5}}
.rows--page .qty{height:38px;margin-top:8px;margin-left:-11px}
.rows--page .qty__b{width:38px;height:38px}
.rows--page .qty__n{min-width:30px;font:400 18px/22px var(--ui)}
@media (max-width:480px){.qty,.rows--page .qty{height:38px;margin-top:6px;margin-left:-10px}.qty__b,.rows--page .qty__b{width:36px;height:36px}.qty__n,.rows--page .qty__n{min-width:28px;font:400 16px/20px var(--ui)}}
/* safe-area: низ панели не уходит под home-индикатор/строку Safari (viewport-fit=cover уже
   есть; двойной bottom-сдвиг кнопок НЕ делать — только этот padding) */
.drawer__foot{flex:none;margin-top:auto;background:var(--paper);padding:20px 30px calc(28px + env(safe-area-inset-bottom,0px))}
.total{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:baseline;font:400 18px/22px var(--ui)}
.total>span:last-child{white-space:nowrap}
.total small{grid-column:1/-1;display:block;margin-top:2px;font:400 16px/20px var(--ui);color:var(--ink)}
.drawer__foot .btn{width:100%;margin-top:20px}
.drawer__foot .link{display:block;margin-top:10px;text-align:center;font:400 16px/20px var(--ui);text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
@media (max-width:899px){.drawer,.drawer--right,.drawer--right.drawer--cart{width:100%}.menu__extra{display:block}
  /* кнопки футера выше зоны строки Safari (~60px): ящик lvh-тянется под неё, белое поле внизу — норм */
  .drawer__foot{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}}
@media (max-width:480px){
  .rows,.drawer__head,.drawer__foot{padding-left:var(--pad);padding-right:var(--pad)}
  .row{grid-template-columns:72px minmax(0,1fr);grid-template-rows:90px auto;column-gap:12px;padding:12px 0}
  .row__img{width:72px}
  .row__rm{margin-top:4px}
  .drawer__empty{padding:20px}
}

.modal{position:fixed;inset:0;top:var(--header-h);height:calc(125vh - var(--header-h));height:calc(125lvh - var(--header-h));bottom:auto;z-index:70;display:none;overflow-y:auto;background:var(--overlay)}
.modal.is-open{display:flex;flex-direction:column} /* the card is centred in the window below the header (Oskar, 2026-09-07); the Figma position 225 px under the header is what centring gives at a 1007 px window */
.modal__card{position:relative;background:var(--paper);margin:auto;width:456px;max-width:calc(100% - 32px)}
.modal__close{position:absolute;top:8px;right:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--ink);z-index:2}
/* subscribe (Figma «Подписка») */
.sub__img{width:100%;aspect-ratio:456/259;object-fit:cover}
.sub__body{padding:57px 33px 36px}
.sub__field{height:33px;padding:0 14px;font:400 15px/19px var(--ui);background:transparent}
.sub__err{margin:12px 0 0;font:400 12px/15px var(--ui);color:var(--ink)}
.sub__btn{width:100%;margin-top:25px}
.sub__consent{display:flex;align-items:flex-start;gap:6px;margin:25px 0 0 8px;font:400 12px/15px var(--ui)}
.sub__consent .check__box{margin-top:1px;width:13px;height:13px;border-radius:0;border-color:var(--ink);background:transparent}.sub__consent .check__box svg{width:11px;height:11px}
.sub__consent .grey{color:var(--g400)}
.sub__consent .u{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:.5px}
.sub__ok{display:none;padding:40px 33px;text-align:center;font:400 18px/24px var(--ui)}
.sub.is-done .sub__body{display:none}.sub.is-done .sub__ok{display:block}
/* size chart */
.size-modal .modal__card{width:720px;margin-top:80px;padding:40px}
.size__title{font:500 14px/18px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.size__tabs{display:flex;gap:24px;margin-top:20px;font:400 16px/20px var(--ui)}
.size__tabs button{padding-bottom:6px;border-bottom:1px solid transparent;color:var(--g500)}
.size__tabs button.is-active{color:var(--ink);border-color:var(--ink)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:20px}
.size-table{width:100%;font:400 16px/20px var(--ui)}
.size-table th,.size-table td{padding:14px 12px;text-align:center;border-bottom:1px solid var(--g150);white-space:nowrap}
.size-table th:first-child,.size-table td:first-child{text-align:left;position:sticky;left:0;background:var(--paper);font-weight:400;color:var(--g500)}
.size-table thead th{font:500 12px/16px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--g500)}
.size-table .is-sel{background:var(--g100)}
.size__note{margin-top:20px;font:400 14px/20px var(--ui);color:var(--g500)}
@media (max-width:599px){.modal__card{margin:auto}.size-modal .modal__card{margin:0;width:100%;max-width:100%;min-height:calc(100lvh - var(--header-h));padding:24px 16px}.sub__body{padding:32px 20px 28px}}
@media (max-height:640px){.sub__img{display:none}}

/* окно «Заказ оплачен» — из итоговой версии заказчика (зип 10.09) */
.paid__body{padding:52px 33px 40px}
.paid__num{position:absolute;top:8px;left:33px;height:36px;display:flex;align-items:center;font:500 12px/16px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--g500)}
.paid__title{font:400 36px/45px var(--ui);width:fit-content}
.paid__text{margin-top:24px;font:400 16px/20px var(--ui)}
.paid__btn{width:100%;margin-top:47px}
.paid__link{display:block;margin-top:12px;text-align:center;font:400 16px/20px var(--ui);text-decoration:underline;text-underline-offset:3px}
@media (max-width:599px){
  .paid__body{padding:52px 20px 28px}
  .paid__num{left:20px}
  .paid__title{font-size:24px;line-height:30px}
  .paid__text{margin-top:12px}
  .paid__btn{margin-top:24px}
}

/* product card: photo 445×557 + slider stripes + meta (name/material left, price/old right) */
.card{position:relative;display:block}
.card__media{position:relative;aspect-ratio:445/557;overflow:hidden;background:#f3f3f3}
/* Embla гоняет ленту трансформами: нативный скролл и снап выключаем, иначе картинки
   «скачут» по вертикали (overflow-y:auto у скролл-контейнера) — заказчик, 2026-09-29 */
.card__media.is-embla .card__track{overflow:visible;scroll-snap-type:none}
.card__media.is-embla .card__track>a{scroll-snap-align:none;scroll-snap-stop:auto;overflow:hidden}
.card__track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.card__track::-webkit-scrollbar{display:none}
.card__track>a{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;display:block;scroll-snap-stop:always;overflow:hidden}  /* слайд = контейнер: обрезает зум картинки, иначе соседнее фото «подглядывает» с края */
.card__track img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.card__stripes{position:absolute;left:8px;right:9px;bottom:6.5px;display:flex;gap:6px;height:3px;pointer-events:none}
.card__stripes span{flex:1;background:var(--paper);opacity:.43}
.card__stripes span.is-active{opacity:1}
.card__arrow{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;display:none;align-items:center;justify-content:center;color:var(--paper);filter:drop-shadow(0 0 2px rgba(0,0,0,.45));z-index:2}
.card__arrow--l{left:0}.card__arrow--r{right:0}
/* На тач-экранах стрелки не показываем: листается свайпом (scroll-snap), заказчик 2026-09-28.
   На десктопе стрелки тоже скрыты — там фото листаются наведением по третям карточки. */
.card__heart{display:none}.card__heart-x{position:absolute;top:2px;right:2px;width:60px;height:54px;display:flex;align-items:center;justify-content:center;color:var(--paper);filter:drop-shadow(0 0 2px rgba(0,0,0,.45));opacity:0;transition:opacity .15s;z-index:2}
.card__heart .ic-off,.card__heart .ic-on{display:block}.card__heart .ic-on{display:none}
.card__heart.is-on .ic-off{display:none}.card__heart.is-on .ic-on{display:block}
.card__heart.is-on{opacity:1}
@media (hover:hover){.card__media:hover .card__heart{opacity:1}}
@media (hover:none){.card__heart{opacity:.85}}
.card__meta{display:flex;justify-content:space-between;align-items:flex-start;padding-top:5px}
.card__txt{padding-left:1px;min-width:0}
.card__name{display:block;width:fit-content;max-width:100%;font:400 18px/22px var(--ui);color:var(--ink)}
.card__name.is-bold{font-weight:700}
.card__mat{margin-top:4px;width:fit-content;max-width:100%;font:400 16px/20px var(--ui)}
.card__prices{text-align:right;padding-top:2px;flex:none}
.card__price{font:400 16px/20px var(--ui);white-space:nowrap}
.card__old{margin-top:6px;font:400 14px/17px var(--ui);color:var(--g500);white-space:nowrap}
.card__old s{text-decoration:line-through}
.card__name b{font-weight:700}
@media (max-width:899px){.card__name{font-size:16px;line-height:20px}.card__mat{font-size:14px;line-height:18px}.card__price{font-size:15px}}
@media (max-width:599px){.card__meta{display:block}.card__txt{padding-left:0}.card__prices{display:flex;gap:8px;align-items:baseline;text-align:left;padding-top:4px}.card__old{margin-top:0}.card__name{font-size:14px;line-height:18px}.card__mat{font-size:13px;line-height:16px;margin-top:2px}.card__price{font-size:14px;line-height:18px}.card__old{font-size:12px;line-height:15px;margin-top:3px}.card__meta{padding-top:6px}.card__stripes{left:6px;right:6px;bottom:5px;height:2px;gap:4px}}
/* пометка предзаказа у строки корзины/чекаута */
.row__pre{color:var(--g600)}

/* home */
/* ДИЗАЙН: высота hero — весь экран (100lvh: стабильна при анимации строки Safari).
   Пиксельные высоты 1010/695 + белая полоса были по ошибке внесены сюда 2026-09-30 —
   та правка относилась к странице coming soon; откачено в тот же день. */
.hero{position:relative;height:calc(100vh - var(--header-h));height:calc(100lvh - var(--header-h));overflow:hidden;background:#ddd}
.hero img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero__btn{position:absolute;left:50%;top:50%;width:202px;height:54px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 3px rgba(255,255,255,.25);color:var(--paper);font:400 20px/24px var(--mono);white-space:nowrap}
.hero__btn:hover{background:rgba(255,255,255,.2)}
.home-grid{padding-top:163px}
.banners{display:grid;grid-template-columns:1217fr 699fr;gap:4px;margin-top:87px}
.banners>div{display:block;aspect-ratio:1217/631;overflow:hidden;background:#eee}
.banners>div:last-child{aspect-ratio:699/631}
.banners img{width:100%;height:100%;object-fit:cover}
.product__pre{margin-top:8px;font:400 16px/20px var(--ui);color:var(--g600)}
/* catalog */
.cat-title{margin-top:13px;width:fit-content;font:400 18px/22px var(--ui);color:var(--g800)}
/* Категория занимает минимум один экран: при 1–2 товарах подвал не «прилипает» к сетке,
   а начинается ниже сгиба (заказчик, 2026-09-29) */
.cat-grid{padding-top:13px}
/* product */
.product{display:grid;grid-template-columns:minmax(0,707fr) minmax(0,826fr);column-gap:calc(270 / 1803 * 100%);padding:83px 0 0 calc(117 / 1920 * 100%)}
.product__gallery{overflow:hidden}  /* вьюпорт Embla (мобильная); на десктопе — просто обёртка колонки */
/* Embla-режим: лента flex'ом, нативный снап выключаем; ширина слайда = ширине вьюпорта,
   кусочка следующего фото сбоку не видно (заказчик, 2026-09-29) */
.product__gallery.is-embla .product__photos{display:flex;grid-auto-flow:unset;grid-auto-columns:unset;overflow:visible;scroll-snap-type:none}
.product__gallery.is-embla .product__photo{flex:0 0 100%;width:100%;scroll-snap-align:unset;scroll-snap-stop:unset}
.product__photos{display:grid;gap:0}
.product__photo{aspect-ratio:707/885;overflow:hidden;background:#f3f3f3;scroll-snap-stop:always}
.product__photo:nth-child(n+2){aspect-ratio:707/884}
.product__photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.product__photos .card__stripes{display:none}
.product__info{padding-top:51px;padding-right:var(--pad)}
.product__title{font:400 36px/45px var(--ui);width:fit-content}
.product__title b{font-weight:700}
.product__mat{font:400 20px/25px var(--ui);width:fit-content}
.product__price{margin-top:24px;font:400 24px/30px var(--ui);width:fit-content}
.swatches{position:relative;display:flex;gap:.5px;margin-top:49px;height:92.88px;width:176px}
.swatch{position:relative;flex:none;width:92.42px;height:92.42px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);border:1px solid transparent}
.swatch.is-sel{border-color:var(--ink)}
.swatch img{width:73.7px;height:92.3px;object-fit:cover;margin-top:1px}
.sizes{display:flex;align-items:flex-start;gap:0;margin:47px 0 0 -1.5px;height:38px}
.size:nth-child(2){margin-left:15.5px}.size:nth-child(3){margin-left:10px}.size:nth-child(4){margin-left:8.5px}.size:nth-child(5){margin-left:12px}
/* ДИЗАЙН: текст размера строго по центру квадрата (align-items:center, без padding-top);
   padding-inline нужен длинным подписям вида ONE SIZE — иначе текст касается рамки */
.size{position:relative;height:38px;min-width:38px;padding:0 8px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--radius);font:400 24px/30px var(--ui);color:var(--ink)}
.size.is-sel{border-color:var(--ink)}
.size.is-off{color:var(--g250);cursor:default}
.product--no-colors .sizes{margin-top:57px}
.product__buy{display:flex;align-items:flex-start;margin-top:47px}
.product__add{width:444px;max-width:100%}
.product__heart{width:64px;height:58px;margin:1px 0 0 1px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.product__heart .ic-off,.product__heart .ic-on{display:block;width:100%;height:100%}.product__heart .ic-on{display:none}
.product__heart.is-on .ic-off{display:none}.product__heart.is-on .ic-on{display:block}
.acc{margin-top:68px;max-width:484px}
.acc details{position:relative}
.acc details+details{margin-top:25px}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:flex-start;cursor:pointer;font:400 18px/22px var(--ui);padding-right:0}
.acc summary::-webkit-details-marker{display:none}
.acc summary .chev{display:block;width:15px;height:8px;margin:10px 0 0;color:var(--ink);transition:transform .2s;flex:none}
.acc summary .chev img{width:15px;height:8px;display:block}
.acc details[open] summary .chev{transform:rotate(180deg)}
/* ДИЗАЙН аккордеона: абзацы отбиты margin-top:20px, переносы строк внутри абзаца — «склеены»
   (line-height), см. sync.ts: новый абзац = только пустая строка в тексте МС */
.acc__body{padding:27px 0 62px;font:400 16px/20px var(--ui);white-space:pre-line;max-width:365px}
.acc__body .sz{white-space:normal}
.acc details.acc__i--wide .acc__body,.acc__body:has(.sz){max-width:none}
.acc__body p+p{margin-top:20px}
.acc__text{width:fit-content;max-width:100%}
.also{padding-top:94px}
.also__title{margin-left:calc(29px - var(--pad));font:400 26px/32px var(--ui);width:fit-content}
.also__grid{margin-top:34px;margin-left:-1px}
.buybar{display:none}
@media (max-width:1199px){.product{grid-template-columns:minmax(0,55fr) minmax(0,45fr);column-gap:40px;padding-left:var(--pad);padding-top:40px}.product__info{padding-top:0}.acc{max-width:none}}
/* align-content:start — иначе grid растягивает auto-строки на всю min-height и между карточками
   появляются огромные вертикальные отступы (заказчик, 2026-09-29) */
@media (max-width:899px){.cat-grid{min-height:calc(100lvh - var(--header-h));align-content:start}}
@media (max-width:899px){
  .product{display:block;padding:0}
  .product__photos{grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;position:relative}
  .product__photos::-webkit-scrollbar{display:none}
  .product__photo{scroll-snap-align:start;aspect-ratio:4/5}
  .product__info{padding:20px var(--pad) 0}
  .product__title{font-size:24px;line-height:30px}.product__mat{font-size:16px;line-height:20px}.product__price{margin-top:12px;font-size:20px;line-height:26px}
  .swatches{margin-top:24px}.sizes{margin:24px 0 0;gap:8px;flex-wrap:wrap;height:auto}.size:nth-child(n){margin-left:0}.size{min-width:44px;height:44px;font-size:18px;padding:0 10px}
  .product__buy{margin-top:24px;gap:12px}.product__add{flex:1}.product__heart{width:52px;height:52px;margin:0;border:1px solid var(--g800);border-radius:var(--radius);padding:6px}
  .acc{margin-top:40px}
  .also{padding-top:56px}.also__title{font-size:20px;line-height:26px;margin-left:0}
  .buybar{position:fixed;left:0;right:0;bottom:var(--barzone,0px);z-index:30;display:flex;align-items:center;gap:12px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom,0px) - min(env(safe-area-inset-bottom,0px), var(--barzone,0px)));background:var(--paper);transform:translateY(calc(110% + var(--barzone,0px)));transition:transform .2s}
  .buybar.is-on{transform:none}
  .buybar__price{font:400 18px/22px var(--ui);white-space:nowrap}
  .buybar .btn{flex:1;height:44px;font-size:16px}
  .buybar .product__heart{width:44px;height:44px;padding:0}
}
@media (max-width:599px){.home-grid{padding-top:24px}.banners{grid-template-columns:1fr;gap:8px;margin-top:32px}.banners>div{aspect-ratio:4/5}.banners>div:last-child{display:none}.hero img{object-position:50% 20%}.hero__btn{width:180px;height:48px;font-size:18px}.cat-title{padding-top:10px}}
@media (max-width:359px){.hero__btn{width:160px;font-size:16px}}
/* Скрыт полностью по просьбе заказчика (2026-09-29). НЕ удалять: разметка и логика
   появления остаются, вернуть = убрать это правило. */
.buybar{display:none !important}


.ftr{padding:58px 74px 40px 62px;display:grid;grid-template-columns:379px minmax(0,1fr) 473px;align-items:start}
.ftr__col{font:400 18px/22px var(--ui);width:max-content;max-width:100%}
.ftr__col li+li{margin-top:6px}
.ftr__col a:hover{text-decoration:underline}
.ftr__news{position:relative}
.ftr__text{font:400 18px/22px var(--ui);white-space:pre-line;width:fit-content;max-width:100%}
.ftr__btn{width:100%;margin-top:9px}
.ftr__row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;min-height:44px}
/* иконка мессенджера — из итоговой версии заказчика (зип 10.09) */
.ftr__wa{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-9px;color:var(--ink)}
.ftr__wa svg{flex:none;width:26px;height:26px}
@media (hover:hover){.ftr__wa:hover{opacity:.55}}
.ftr__privacy{font:400 18px/22px var(--ui);color:var(--g600);white-space:nowrap}
.ftr__line{grid-column:1/-1;height:1px;background:var(--g200);margin-top:65px}
.ftr__copy{grid-column:1/-1;margin-top:5px;width:fit-content;font:500 16px/19px var(--mono);color:var(--g200)}
@media (max-width:1199px){.ftr{padding:48px var(--pad) 32px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}.ftr__news{grid-column:1/-1;margin-top:40px;max-width:473px}}
@media (max-width:599px){.ftr{grid-template-columns:1fr;padding:36px var(--pad) 24px}.ftr__col+.ftr__col{margin-top:24px}.ftr__news{margin-top:32px}.ftr__row{flex-wrap:wrap;gap:12px}.ftr__privacy{white-space:normal}.ftr__line{margin-top:32px}.ftr__copy{font-size:13px;line-height:16px}}
@media (max-width:359px){.ftr__col,.ftr__text{font-size:16px;line-height:20px}}
/* телефон: кнопка подписки идёт первой, подпись читается под ней (заказчик 10.09) */
@media (max-width:899px){.ftr__news{display:flex;flex-direction:column;align-items:flex-start}.ftr__btn{order:1;margin-top:0;width:100%}.ftr__text{order:2;margin-top:12px}.ftr__row{order:3;width:100%}}

/* ===== shared bits for variant pages ===== */
.form{display:grid;gap:16px;margin-top:32px;max-width:480px}
.form .field--area{height:120px;padding:12px 14px;resize:vertical}
.form__ok{display:none;font:400 16px/20px var(--ui);color:var(--ink)}
form.is-done .form__ok{display:block}
form.is-done .co__submit{display:none}
.btn--sm{height:40px;padding:0 16px;font-size:14px}
.btn--black{background:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:28px;min-width:32px;padding:0 8px;border:1px solid var(--g300);border-radius:var(--radius);font:400 13px/26px var(--ui);color:var(--ink);text-align:center}
.chip.is-sel{border-color:var(--ink)}
.chip.is-off{color:var(--g250);border-color:var(--g150);cursor:default;text-decoration:line-through}
.chips--big{margin-top:24px}.chips--big .chip{height:44px;min-width:56px;font-size:18px;line-height:42px}
.drawer__count{margin-left:8px;color:var(--g500)}
.drawer__empty--icon{gap:18px;color:var(--g800)}
/* ===== gallery ===== */
.gal .cat-title{margin-top:13px}
.gal-album{padding:56px 0 120px}
.gal-album__item{width:min(85%,1100px);margin:0 auto 120px}
.gal-album__item[data-wide]{width:min(92%,1400px)}
.gal-album__item img{width:100%;height:auto}
.gal-album__cap{display:block;text-align:center;margin-top:8px}
.gal-album__end{text-align:center;color:var(--g500)}
.gal-edit__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:56px}
.gal-edit{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:27px;row-gap:64px;padding:0 var(--pad);margin-bottom:120px}
.gal-edit__item img{width:100%;height:auto}
.gal-edit__cap{display:flex;gap:14px;margin-top:6px;font:400 16px/20px var(--ui);color:var(--ink)}
.gal-edit--a .gal-edit__item--1{grid-column:1/9}.gal-edit--a .gal-edit__item--2{grid-column:9/13;margin-top:120px}.gal-edit--a .gal-edit__item--3{grid-column:3/11}
.gal-edit--b .gal-edit__item--1{grid-column:1/7}.gal-edit--b .gal-edit__item--2{grid-column:7/13}.gal-edit--b .gal-edit__item--3{grid-column:1/13;margin:0 calc(-1 * var(--pad))}
.gal-edit--c .gal-edit__item--1{grid-column:2/6}.gal-edit--c .gal-edit__item--2{grid-column:7/13}.gal-edit--c .gal-edit__item--3{grid-column:4/10}
.gal--stories{position:relative}
body.is-stories{scroll-snap-type:y proximity}
.story{position:relative;height:100vh;height:100lvh;min-height:420px;scroll-snap-align:start;overflow:hidden;background:#111}
.story__img,.story__img img{width:100%;height:100%;object-fit:cover}
.story__cap{position:absolute;left:var(--pad);right:var(--pad);bottom:24px;display:flex;justify-content:space-between;color:#fff;mix-blend-mode:difference;font:400 16px/20px var(--ui);}
.story__hint{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);color:#fff;mix-blend-mode:difference;pointer-events:none;opacity:.7}
@media (max-width:899px){.gal-album{padding:32px 0 64px}.gal-album__item,.gal-album__item[data-wide]{width:min(87%,600px);margin-bottom:64px}.gal-edit{display:block;padding:0 var(--pad)}.gal-edit__item{margin:0 0 40px!important}.gal-edit--b .gal-edit__item--3{margin:0 calc(-1 * var(--pad)) 40px!important}.gal-edit__head{flex-direction:column;gap:8px;margin-bottom:24px}}
/* ===== 404 ===== */
.nf{padding:80px var(--pad) 160px}
.nf__code{font:700 60px/72px var(--mono);letter-spacing:.15em;color:var(--g900)}
.nf__t{margin-top:16px;font:400 18px/22px var(--ui)}
.links404{display:flex;gap:24px;margin-top:32px;font:400 16px/20px var(--ui)}
.links404 a{text-decoration:underline;text-underline-offset:3px}
.nf--photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0}
.nf__photo{aspect-ratio:707/884;overflow:hidden}
.nf__photo img{width:100%;height:100%;object-fit:cover}
.nf__side{padding-top:80px;padding-bottom:80px}
.nf__side .nf__t{font-size:26px;line-height:32px;max-width:420px}
.nf--min{padding:160px var(--pad)}
.nf__line{font:400 18px/22px var(--ui)}
.nf__line a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:899px){.nf{padding:48px var(--pad) 96px}.nf--photo{display:block}.nf__side{padding-top:32px}.nf--min{padding:96px var(--pad)}.nf__code{font-size:40px;line-height:48px}}
/* ===== favorites ===== */
.frows{padding:0 30px}
.frow{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:12px 0}
.frow .row__img{width:120px}
.frow__body{position:relative;padding-right:28px}
.frow__rm{position:absolute;top:-4px;right:-6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--g600)}
.frow .chips{margin-top:12px}
.frow__foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.favpage__head{display:flex;justify-content:space-between;align-items:baseline;padding-top:13px}
.favpage{padding-top:83px;padding-bottom:120px}
.favgrid{padding:32px 0 0}
.favcard{color:var(--ink)}
.favcard__rm{position:absolute;top:8px;right:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.85);color:var(--ink);z-index:2}
.favcard__btn{width:100%;margin-top:14px;height:44px;font-size:16px}
.favcard .card__media a,.favcard .card__media img{display:block;width:100%;height:100%;object-fit:cover}
/* ===== cart / checkout ===== */
.rows--tight .row{padding:12px 0}
.drawer--xsai{width:560px}
.co{display:grid;gap:0;padding:24px 30px 30px}
.co__title{font:400 20px/25px var(--ui);padding-right:50px}
.co__head{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.co__back{display:inline-block;font:400 16px/20px var(--ui);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.co__title--step{margin-top:36px}
.co__items{margin-top:16px}
.co__items summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 0;font:400 16px/20px var(--ui);cursor:pointer}
.co__items summary::-webkit-details-marker{display:none}
.co__items .chev{transition:transform .2s;color:var(--ink)}
.co__items[open] summary .chev{transform:rotate(180deg)}
.co__sec{margin-top:32px;display:grid;gap:12px}
.co__label{font:400 20px/25px var(--ui);color:var(--ink)}
p.co__label{font:400 16px/20px var(--ui)}
.co__check{font:400 16px/20px var(--ui);align-items:flex-start;gap:10px}
.co__check .check__box{margin-top:1px}
.co__check a{text-decoration:underline;text-underline-offset:3px}
.co .check{margin-top:4px}
.co .co__sec+.co__check{margin-top:28px}
.co .radios{display:grid;gap:12px}
/* зона доставки — подпись над своими способами, тем же кеглем, что строка товара (заказчик 2026-09-19) */
.co__zone{font:400 18px/22px var(--ui);color:var(--ink)}
.co__zone+.radio{margin-top:-2px}
.radio+.co__zone,.radio--apart{margin-top:10px}   /* «Международная доставка» стоит сама по себе, не в зоне выше */
.co .radios+.co__hint{margin-top:14px}
.co__city{position:relative}
.co__search{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--g600);pointer-events:none;display:flex}
.co__hint{font:400 16px/20px var(--ui);color:var(--ink)}
.co [data-ship-address]{display:grid;gap:10px}
.co .radios+.co__check,.co .radios+.check{margin-top:14px}
.co__inst{display:grid;gap:18px;padding-top:8px}
.co__select{appearance:none;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center}
.co__foot{margin-top:36px}
.co__foot .total{font:400 18px/22px var(--ui)}
.co__foot .co__hint{margin-top:8px}
.co__submit{width:100%;margin-top:24px}
.co .error-block{margin-top:28px}
.co .error-block+.co__submit{margin-top:16px}
.co .form__ok{margin-top:24px}
/* Сообщение об ошибке под кнопкой не должно липнуть к ней (заказчик 2026-09-22) */
.co .form__err{margin-top:14px;font:400 16px/20px var(--ui)}
.co .form__err+.form__ok{margin-top:14px}
.cart-table__h{display:grid;grid-template-columns:minmax(0,1fr) 100px 120px 120px;padding-bottom:12px}
.cart-table__h span:last-child{text-align:right}
.cart-table__r{display:grid;grid-template-columns:96px minmax(0,1fr) 100px 120px 120px;gap:16px;align-items:start;padding:12px 0}
.cart-table__size{font:400 16px/20px var(--ui);padding-top:2px}
.cart-table .qty{margin-top:0}
.cart-table .row__rm{margin-top:10px}
.summary{padding:0}
.summary .total{display:flex;justify-content:space-between;gap:24px;font:400 24px/30px var(--ui)}
.summary .t-body{margin-top:4px}
.summary .link{display:inline-block;margin-top:16px;font:400 18px/22px var(--ui);text-decoration:underline;text-underline-offset:3px}
.summary__dl{display:grid;grid-template-columns:1fr auto;row-gap:12px;margin-top:20px;font:400 16px/20px var(--ui)}
.summary__dl dd{text-align:right}
.summary__promo{display:flex;gap:8px;margin-top:20px}
.summary__total{display:flex;justify-content:space-between;margin-top:20px;font:400 18px/22px var(--ui)}
.summary .btn{width:100%;margin-top:32px}
.summary .co__hint{margin-top:12px}
.summary__toggle summary{list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.summary__toggle summary::-webkit-details-marker{display:none}
.summary__toggle .chev{color:var(--ink);transition:transform .2s}
.summary__toggle[open] .chev{transform:rotate(180deg)}
.sum-row{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;margin-top:12px}
.co__label+.sum-row{margin-top:8px}
.sum-row .row__img{width:64px;grid-row:1/span 2;align-self:start}
.sum-row .row__price{grid-column:2;grid-row:2;align-self:end;padding-top:8px}
.sum-row+.total{margin-top:24px}
.co--page{padding:0}
.co--page .co__submit{margin-top:32px}
.receipt{padding:56px var(--pad) 120px;display:flex;justify-content:center}
.receipt__col{width:520px;max-width:100%}
.receipt__brand{text-align:center}
.receipt .t-h1{text-align:center}
.leaders{margin-top:32px;font:400 18px/22px var(--ui)}
.leader{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:3px 0}
.leader i{flex:1}
.leader--total{font-weight:700;margin-top:8px}
.dash{border:0;border-top:1px dashed var(--g300);margin:28px 0 0}
.receipt .co__sec{margin-top:28px}
.receipt .co__submit{margin-top:28px}
.receipt .co__check{margin-top:14px}
@media (max-width:899px){
  .drawer--xsai{width:100%}.co{padding:20px var(--pad) 30px}.co--page{padding:0}.co--page .co__sec:first-of-type{margin-top:0}
  .cart-table__h{display:none}.cart-table__r{grid-template-columns:80px minmax(0,1fr);row-gap:8px}.cart-table .row__img{width:80px}.cart-table__size,.cart-table .row__price{grid-column:2}.cart-table .row__price{text-align:left}
  .summary{margin-top:32px}
  .receipt{padding:32px var(--pad) 96px}
}
/* ===== size chart variants ===== */
.size-modal--pick .modal__card{width:520px}
.size-card{margin-top:28px}
.size-card__big{font:700 60px/72px var(--mono);letter-spacing:.15em;color:var(--g900)}
.size-card__dl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:20px;font:400 16px/20px var(--ui)}
.size-card__dl+.size-card__dl{grid-template-columns:repeat(3,minmax(0,1fr))}
.size-card__dl dt{font:500 11px/16px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--g500)}
.size-card__dl dd{margin-top:6px;grid-row:2}
.size-card .btn{width:100%;margin-top:24px}
.size-modal--guide .modal__card{width:860px}
.guide{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:48px}
.guide__head{display:flex;justify-content:space-between;align-items:center}
.units{display:flex;border:1px solid var(--g300);border-radius:var(--radius);overflow:hidden}
.units button{padding:6px 12px;font:400 14px/18px var(--ui);color:var(--g500)}
.units button.is-active{background:var(--ink);color:#fff}
.guide__tips{margin-top:24px;padding-left:0;list-style:none;font:400 15px/22px var(--ui);color:var(--g800)}
.guide__tips li+li{margin-top:8px}
@media (max-width:899px){.guide{display:block}.guide__pic{display:flex;justify-content:center}.guide__pic svg{width:140px;height:224px}.guide__head{margin-top:16px}}

/* size chart inside the product accordion: no rules, compact */
.sz{font:400 16px/20px var(--ui);color:var(--ink)}
/* Таблица размеров — ДИЗАЙН-ИНВАРИАНТ (референс заказчика 2026-09-29): чистая текстовая
   сетка без рамок/фона, колонки по контенту, НЕ скроллится: на узких экранах ужимаем шрифт
   (clamp) и разворачиваем таблицу на всю ширину компенсацией --pad. Не возвращать fixed-ширины! */
.sz--table{border-collapse:collapse;table-layout:fixed;width:100%}  /* колонки делят всю ширину аккордеона поровну (заказчик, 2026-09-29) */
.sz--table th{font-weight:400;text-align:center;white-space:nowrap;padding:0 5px 6px}
.sz--table td{padding:2px 5px;text-align:center;white-space:nowrap}
.sz--table th:first-child,.sz--table td:first-child{text-align:left;padding-left:0}
.sz--lines p+p{margin-top:6px}
.sz--cols{display:flex;gap:18px;flex-wrap:wrap}
.sz__col p,.sz__legend p{margin:0;white-space:nowrap}
.sz__col p+p,.sz__legend p+p{margin-top:2px}
.sz__legend{order:-1}
.co .total{display:flex;justify-content:space-between;margin-top:8px;font:400 18px/22px var(--ui)}
@media (max-width:1199px){.sz--table{font-size:13px;line-height:17px}}
/* 5 колонок (XS–XL) помещаются без скролла: overflow у аккордеонной таблицы отключён
   (заказчик, 2026-09-29). .table-scroll с overflow остаётся только у юр.страниц (.dtab) */
@media (max-width:599px){.acc__body .table-scroll{overflow-x:visible}.sz--table th,.sz--table td{padding-left:2px;padding-right:2px}}

/* cart and checkout pages live on the product-page grid: list/form in the photo column (x 117, w 707), total in the description column (x 1094, w 444) */
.pgrid{display:grid;grid-template-columns:minmax(0,707fr) minmax(0,826fr);column-gap:calc(270 / 1803 * 100%);padding:83px 0 120px calc(117 / 1920 * 100%);align-items:start}
.pgrid__side{padding-top:51px;padding-right:var(--pad)}
.pgrid__side>*{max-width:444px}
.pgrid .t-h1{margin:0}
.pgrid .co__back{margin-bottom:2px}
.pgrid .co--page{margin-top:32px;max-width:560px}
.rows--page{padding:0;margin-top:32px}
.rows--page .row{padding:0 0 32px}
.rows--page .row__name{font:400 18px/22px var(--ui)}
.rows--page .row__meta{margin-top:0;font:400 16px/20px var(--ui)}
.rows--page .row__price{font:400 18px/22px var(--ui)}
.rows--page .row__rm{font:400 16px/20px var(--ui)}
@media (min-width:481px){.rows--page .row{grid-template-columns:120px minmax(0,1fr);grid-template-rows:150px auto;column-gap:24px}.rows--page .row__img{width:120px}}
@media (max-width:480px){.rows--page .row{padding:0 0 20px}}
@media (max-width:1199px){.pgrid{grid-template-columns:minmax(0,55fr) minmax(0,45fr);column-gap:40px;padding:40px var(--pad) 96px}.pgrid__side{padding:0}}
@media (max-width:899px){.pgrid{display:block;padding:24px var(--pad) 64px}.pgrid__side{padding:32px 0 0}.pgrid__side>*{max-width:none}.pgrid .co--page{max-width:none}}
/* ссылка «назад» едет сразу под шапкой, как строка категории в каталоге (заказчик 10.09) */
.pagenav{display:block;margin-top:13px;width:fit-content;font:400 18px/22px var(--ui);color:var(--g800)}
@media (hover:hover){.pagenav:hover{color:var(--ink)}}
@media (max-width:359px){.pagenav{font-size:16px;line-height:20px}}
.pgrid--nav{padding-top:34px}
@media (max-width:1199px){.pgrid--nav{padding-top:24px}}
@media (max-width:899px){.pgrid--nav{padding-top:16px}}
/* колонка «Итого» заканчивается перед заголовком «Смотрите также», а не там, где кончились строки (заказчик 10.09) */
@media (min-width:900px){
  .cartpage{padding-bottom:0}
  .cartpage .pgrid__main{padding-bottom:174px}
  .cartpage+.also{padding-top:40px}
}
@media (min-width:900px) and (max-width:1199px){.cartpage .pgrid__main{padding-bottom:150px}}
/* телефон: «Ваш заказ» идёт перед формой, а не после всех полей (заказчик 10.09) */
@media (max-width:899px){
  .copage{display:flex;flex-direction:column}
  .copage .pgrid__main{display:contents}
  .copage .t-h1{order:1}
  .copage .pgrid__side{order:2;margin-top:24px;padding:0}
  .copage .co--page{order:3}
  .copage .pgrid__side .total{display:none}
}

/* ===== information pages: typography and spacing taken from the product page (design.md §3.3) ===== */
.t-h1{font:400 36px/45px var(--ui);color:var(--ink)}
.t-sub{font:400 20px/25px var(--ui);color:var(--ink)}
.t-intro{margin-top:16px;font:400 16px/20px var(--ui);max-width:620px}
.t-body{font:400 16px/20px var(--ui)}
.t-req{margin-top:32px;max-width:620px}
.blk{margin-top:25px;max-width:620px}
.blk:first-of-type{margin-top:40px}
.blk--notitle:first-of-type{margin-top:16px}
.blk p{font:400 16px/20px var(--ui);color:var(--ink)}
.blk p+p{margin-top:4px}
.blk__t{margin-bottom:0;font:400 18px/22px var(--ui);color:var(--ink)}
.blk__t--bold18{font-weight:700}
.blk__t--h1{font-size:36px;line-height:45px}
.blk__t--h2{font-size:20px;line-height:25px}
.blk__t--h1~p{max-width:560px}
.blk--lines{display:grid;grid-template-columns:max-content max-content max-content;column-gap:28px;row-gap:4px;justify-content:start}
.blk--lines .blk__t{grid-column:1/-1}
.line{display:contents}
@media (max-width:599px){.blk--lines{grid-template-columns:minmax(0,1fr) max-content max-content;column-gap:16px}}
.form--tight{margin-top:32px;max-width:444px;gap:12px}
.form--tight .blk__t{margin-bottom:4px}
/* Документы без картинки: колонка текста той же ширины, что и в тексте товара (заказчик 2026-09-19).
   Заголовок и вводка живут по тем же правилам, что и в split, поэтому меняется только обёртка. */
/* Ширину строки держим на самом тексте, а не на колонке: иначе широкая таблица
   документа (шесть колонок в политике) упиралась бы в 820 px и резалась. */
.doc{padding-top:83px;padding-bottom:120px}
.doc .t-h1,.doc .t-sub,.doc .t-intro,.doc .blk__t,.doc .blk p{max-width:820px}
.doc .t-sub{margin-top:8px;color:var(--g800)}
.doc .blk{max-width:none}
@media (max-width:1199px){.doc{padding-top:48px;padding-bottom:96px}}
@media (max-width:899px){.doc{padding-top:32px;padding-bottom:72px}}
/* оговорка про Meta — тем же кеглем, что и основной текст страниц */
.t-note{display:block;margin-top:4px;font:400 16px/20px var(--ui);color:var(--ink)}
/* Таблицы из документов заказчика. Оформление — как у таблицы размеров в макете:
   без рамок и заливок, шапка тем же начертанием, отличается только положением.
   Колонке задан минимум: лучше прокрутка вбок, чем столбик из одной буквы. */
.t-scroll{overflow-x:auto;overscroll-behavior-x:contain;margin-top:12px}
.dtab{border-collapse:collapse;width:100%;font:400 16px/20px var(--ui);color:var(--ink)}
.dtab th{font-weight:400;text-align:left;vertical-align:top;padding:0 24px 10px 0}
.dtab td{vertical-align:top;padding:0 24px 12px 0}
.dtab th,.dtab td{min-width:150px}
.dtab th:last-child,.dtab td:last-child{padding-right:0}
@media (max-width:599px){.dtab{font-size:14px;line-height:18px}.dtab th,.dtab td{padding-right:16px;min-width:130px}}
/* split: sticky photo left, text right — chosen layout (agreement 3) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split__media{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));height:calc(100lvh - var(--header-h));overflow:hidden}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__body{padding:83px 60px 120px 80px}
.split__body .t-sub{margin-top:0}
/* contacts 1 */
.contacts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:27px;padding-top:83px;padding-bottom:120px}
.kv{display:grid;grid-template-columns:120px minmax(0,1fr);row-gap:4px;column-gap:24px;margin:40px 0 0;font:400 18px/22px var(--ui)}
.kv dd{margin:0}
.kv dd a{text-decoration:underline;text-underline-offset:3px}
.contacts__photo{margin:0;aspect-ratio:707/884;overflow:hidden}
.contacts__photo img{width:100%;height:100%;object-fit:cover}
.contacts--links{padding-top:83px;padding-bottom:120px}
.biglinks{list-style:none;margin:40px 0 0;padding:0}
.biglinks li+li{margin-top:8px}
.biglinks a{font:400 36px/45px var(--ui);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
/* 404 */
.nf{padding-top:83px;padding-bottom:160px}
.nf .t-sub{margin-top:0}
.links404{display:flex;gap:24px;margin-top:24px;font:400 16px/20px var(--ui)}
.links404 a{text-decoration:underline;text-underline-offset:3px}
.nf--min a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1199px){.split__body{padding:48px 40px 96px}}
@media (max-width:899px){
  .split{display:block}.split__media{position:relative;top:auto;height:auto;aspect-ratio:4/5;max-height:70vh}.split__body{padding:32px var(--pad) 72px}
  .t-h1{font-size:24px;line-height:30px}.blk__t--h1{font-size:24px;line-height:30px}.t-sub{font-size:16px;line-height:20px}
  .blk:first-of-type{margin-top:28px}.blk{margin-top:22px}
  .contacts{display:block;padding-top:32px;padding-bottom:64px}.contacts__photo{margin-top:32px}.kv{grid-template-columns:100px minmax(0,1fr);margin-top:24px;font-size:16px;line-height:20px}
  .contacts--links{padding-top:32px;padding-bottom:64px}.biglinks a{font-size:24px;line-height:30px}
  .line span:first-child{min-width:0;flex-basis:100%}
  .nf{padding-top:32px;padding-bottom:96px}
}

@media (max-width:899px){.blk__t--h2,.drawer__head,.co__title,.co__label,.t-sub.t-sub--h2{font-size:20px;line-height:26px}}

/* two columns of different height: the shorter one rides along with the scroll under the header (client, 2026-09-06);
   columns taller than the viewport are re-pinned by their bottom edge in nd32.js so nothing becomes unreachable */
@media (min-width:900px){
  .pgrid>*,.contacts>*{position:sticky;top:calc(var(--header-h) + 24px);align-self:start}
  .pgrid>[data-static]{position:static}
  .split__body{position:sticky;top:var(--header-h);align-self:start}
}

/* motion (client 2026-09-07, reference xsai.vision): everything eases, nothing lifts or shifts — hovers only dim, fade or recolour */
a,button,.btn,.hdr__ic,.swatch,.size,.acc summary,.dd__opt,.dd__btn,.row__rm,.link,.card__heart,.check__box,.radio__dot,.field{transition:opacity .25s ease,color .25s ease,background-color .25s ease,border-color .25s ease,text-decoration-color .25s ease}
.overlay{transition:opacity .3s ease}
.drawer{transition:transform .3s cubic-bezier(.2,.7,.2,1),visibility .3s}
.modal.is-open{animation:nd-fade .3s ease}
@keyframes nd-fade{from{opacity:0}to{opacity:1}}
.acc__body,.co__items>*:not(summary){will-change:height}
@media (hover:hover){
  .hdr__nav a:hover,.hdr__nav button:hover,.hdr__ic:hover,.hdr__burger:hover,.ftr__col a:hover,.ftr__policy:hover,.ftr__soc a:hover,.menu a:hover,.menu__extra a:hover,.row__link:hover,.row__name:hover,.row__rm:hover,.row--link:hover,.link:hover,.co__back:hover,.dd__opt:hover,.drawer__close:hover,.modal__close:hover,.card__arrow:hover,.kv a:hover,.blk a:hover,.t-body a:hover,.nf a:hover,.contacts a:hover,.big-links a:hover,.summary .link:hover,.drawer__empty a:hover,.co__check a:hover,.sub__note a:hover,.acc summary:hover,.size:not(.is-sel):not(.is-off):hover,.swatch:not(.is-sel):hover,.favcard:hover,.card__name:hover{opacity:.55}
  .btn:hover,.product__add:hover,.co__submit:hover{background:#000}
  .btn--ghost:hover{background:rgba(255,255,255,.2)}
  .ftr__col a:hover{text-decoration:none}
  .dd__opt:hover{background:transparent}
}
:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* строка-заглушка, пока товар для панели ещё не приехал с сервера:
   счётчик в шапке уже считает вещь, и панель не должна выглядеть пустой */
.row--wait { display: block; padding: 12px 0; opacity: .55; }
.row--wait .row__name { font: 400 18px/22px var(--ui); }

/* строка корзины, товара в которой уже нет: приглушена, рядом причина */
.row.is-gone .row__img, .row.is-gone .row__name { opacity: .45; }
.row__gone { font: 400 16px/20px var(--ui); color: var(--ink); margin-top: 4px; }
.btn.is-off, .btn:disabled { pointer-events: none; opacity: .4; }

/* Выбор пункта выдачи. Ритм секции оформления: шаг 12 между элементами,
   как между полями «Контакты». Служебных подписей нет — только адреса. */
.cdek { margin-top: 0; }   /* шаг внутри секции задаёт поле города, свой отступ не нужен */
.cdek__note { font: 400 16px/20px var(--ui); margin: 0 0 12px; }
.cdek__note:empty { display: none; }
.cdek__list { display: grid; gap: 8px; }
.cdek__pt { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; }
.cdek__addr { display: block; font: 400 18px/22px var(--ui); }
.cdek__hours { display: block; font: 400 16px/20px var(--ui); }
.cdek__pt.is-sel .cdek__addr { font-weight: 700; }
.cdek__more { font: 400 16px/20px var(--ui); background: none; border: 0; padding: 0; margin-top: 4px; cursor: pointer; text-decoration: underline; color: inherit; justify-self: start; }
.cdek__filter { margin-bottom: 12px; }

/* Выбор пункта выдачи — готовый выпадающий список .dd, добавляем только прокрутку
   длинного перечня и вторую строку с часами работы. */
.cdek .dd__list { max-height: 320px; overflow-y: auto; scrollbar-width: none; }
.cdek .dd__list::-webkit-scrollbar { display: none; }
.cdek .dd__opt { padding: 8px 14px; }
.cdek__mapwrap { padding: 0; }
.cdek__map { height: 260px; border-bottom: 1px solid var(--g800); }
/* Яндекс подставляет свой класс с номером версии — цепляемся за прямого потомка */
.cdek__map > ymaps { height: 100% !important; }
/* кнопка «Открыть в Картах» отвлекает от выбора пункта; копирайт Яндекса остаётся */
.cdek__map ymaps[class*="gototech"], .cdek__map ymaps[class*="map-copyrights-promo"] { display: none !important; }
.cdek__search { position: sticky; top: -6px; z-index: 401; padding: 6px 8px 8px; background: var(--paper); }
.cdek__search .field { height: 36px; }
.cdek__empty { padding: 8px 14px; font: 400 16px/20px var(--ui); }
.cdek__addr { display: block; font: 400 16px/20px var(--ui); }
.cdek__hours { display: block; font: 400 14px/17px var(--ui); }

#checkout-to-catalog { display: inline-block; margin-top: 12px; }
#checkout-empty { margin-top: 12px; }

/* Подсказки городов под полем: тот же выпадающий список, только прокручиваемый. */
[data-city] .dd__list { max-height: 260px; overflow-y: auto; scrollbar-width: none; }
[data-city] .dd__list::-webkit-scrollbar { display: none; }
[data-city] .dd__opt { padding: 8px 14px; }
/* Местная часть доставки — такая же сетка с шагом 12, как у самой секции:
   иначе поля внутри обёртки слипаются (заказчик 2026-09-21). */
.co [data-ship-local] { display: grid; gap: 12px; }
/* страна и способ доставки стоят подряд — между группами воздуха чуть больше */
.co .radios--ship { margin-top: 2px; }
#checkout-ship { margin-top: 8px; }
#checkout-ship + .total { margin-top: 8px; }

/* Пустая корзина не должна схлопывать страницу на глазах у покупателя.
   Inline-скрипт в layout ставит на <html> data-has-cart/data-has-fav ещё до отрисовки,
   и страница сразу рисуется в правильном виде; до правки сдвиг вёрстки на
   телефоне был 0.702. Правила живут только до первой отрисовки скриптом (data-ready). */
html[data-has-cart="0"]:not([data-ready]) #checkout-form,
html[data-has-cart="0"]:not([data-ready]) #checkout-side,
html[data-has-cart="0"]:not([data-ready]) #checkout-submit,
html[data-has-cart="0"]:not([data-ready]) .co__back,
html[data-has-cart="0"]:not([data-ready]) #cart-page-next { display: none !important; }
html[data-has-cart="0"]:not([data-ready]) #checkout-nothing[hidden],
html[data-has-cart="0"]:not([data-ready]) #cart-page-empty[hidden] { display: block !important; }
html[data-has-cart="0"]:not([data-ready]) #checkout-to-catalog[hidden] { display: inline-block !important; }
html[data-has-fav="0"]:not([data-ready]) #fav-page-empty[hidden] { display: block !important; }
/* И наоборот: если в корзине есть строки, заранее занимаем под них место — иначе на медленном
   телефоне страница успевает нарисоваться пустой, а потом «Смотрите также» и подвал уезжают вниз.
   Высота строки взята замером: 164 на телефоне, 182 на ноутбуке. */
html:not([data-ready]) #cart-page-list { min-height: calc(var(--cart-lines, 0) * 164px); }
html:not([data-ready]) #checkout-side { min-height: calc(var(--cart-lines, 0) * 80px); }
@media (min-width: 900px) {
  html:not([data-ready]) #cart-page-list { min-height: calc(var(--cart-lines, 0) * 182px); }
}