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

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

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


@font-face{font-family:"Be Vietnam Pro";src:url("/cdn/shop/t/4/assets/be-vietnam-pro-latin-400.03d1b589.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("/cdn/shop/t/4/assets/be-vietnam-pro-latin-500.b621f77d.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("/cdn/shop/t/4/assets/be-vietnam-pro-latin-700.a193dd87.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/cdn/shop/t/4/assets/instrument-serif-latin-400.5eb09b5a.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
 --ink:#14120F; --ink-soft:#4A443C; --ink-faint:#6B635A;
 --paper:#FFFFFF; --sand:#F4EFE7; --sand-deep:#E7DCCB;
 --line:#DED5C8; --wine:#6E1B28; --wine-soft:#8C2A38;
 --camel:#7A5230; --night:#17150F;
 --on-night:#F4EFE7; --on-night-soft:#C9BFAE; --on-wine:#FBF7F1;
 --wrap:1360px; --gut:40px;
 --display:"Instrument Serif",Georgia,"Times New Roman",serif;
 --ui:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.62 var(--ui);
 font-synthesis-weight:none;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.08;letter-spacing:-.01em}
h1,h2{font-family:var(--display)}
h3,h4{font-family:var(--ui);font-weight:600;line-height:1.28;letter-spacing:0}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--wine);outline-offset:2px}

/* ------------------------------------------------------- полоса и сетка */
.oy-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.oy-band{padding:72px 0}
.oy-band.tight{padding:44px 0}
.oy-band.sand{background:var(--sand)}
.oy-band.night{background:var(--night);color:var(--on-night)}
.oy-band.night h2,.oy-band.night h3{color:var(--on-night)}
.oy-band.night p,.oy-band.night li{color:var(--on-night-soft)}
.oy-band.night a{color:var(--on-night)}

/* Заголовок раздела: имя слева, ссылка «всё» справа, линия под ними. Это
   ритм, который у лидеров ниши держит всю главную (ref/NOTES.md, п.4). */
.oy-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
 flex-wrap:wrap;margin:0 0 26px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.oy-band.night .oy-head{border-color:#39352c}
.oy-head h2{font-size:clamp(28px,3.4vw,44px)}
.oy-head p{margin:6px 0 0;color:var(--ink-faint);font-size:15px;max-width:62ch}
.oy-band.night .oy-head p{color:var(--on-night-soft)}
.oy-seeall{font:600 13px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
 text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;white-space:nowrap}

/* --------------------------------------------------------------- шапка */
.oy-announce{background:var(--night);color:var(--on-night);font:500 11.5px/1 var(--ui);
 letter-spacing:.16em;text-transform:uppercase}
.oy-announce ul{display:flex;list-style:none;margin:0;padding:0;justify-content:center;gap:0}
.oy-announce li{padding:11px 22px;color:var(--on-night)}
.oy-announce li + li{border-left:1px solid #39352c}
.oy-util{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px 0}
.oy-util-l,.oy-util-r{display:flex;align-items:center;gap:20px;min-width:0}
.oy-util-r{justify-content:flex-end}
.oy-util a{font:500 13px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink-soft)}
.oy-util a:hover{color:var(--wine)}
.oy-mark{font:400 clamp(21px,2.6vw,30px)/1 var(--ui);font-weight:500;letter-spacing:.34em;
 text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap;padding-left:.34em}
.oy-nav{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.oy-nav ul{display:flex;justify-content:center;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.oy-nav a{display:block;padding:13px 14px;font:500 13px/1 var(--ui);letter-spacing:.13em;
 text-transform:uppercase;text-decoration:none;color:var(--ink)}
.oy-nav a:hover,.oy-nav a[aria-current]{color:var(--wine)}
.oy-burger{display:none;background:none;border:1px solid var(--line);padding:9px 12px;
 font:500 13px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:var(--ink)}
.oy-drawer{display:none}

/* ---------------------------------------------------------------- герой */
/* Герой СПЛИТОМ, а не полотном во всю ширину, и это не вкус: исходники
   каталога 1500px по длинной стороне, а полотно 1440 при DPR 2 требует 2880.
   §4.0 п.2 говорит прямо — макет подгоняется под исходник, а не наоборот.
   Кадр в колонке 388px просит 776 и получает их с запасом. */
/* Колонки кадров ФИКСИРОВАНЫ в 330px: бокс шире требует при DPR 2 больше
   660px, а двойники дают 1126 по ширине только у части кадров. Панель забирает
   остаток полосы (§4.0 п.2 — макет под исходник). */
.oy-hero{display:grid;grid-template-columns:minmax(0,1fr) 268px 268px;gap:18px;align-items:stretch;padding:34px 0 46px}
.oy-hero-say{background:var(--sand);padding:40px 38px;display:flex;flex-direction:column;justify-content:center}
.oy-hero-kick{font:500 11.5px/1.5 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--camel);margin:0 0 18px}
.oy-hero h1{font-size:clamp(38px,4.9vw,68px);line-height:1.02;margin:0 0 18px}
.oy-hero h1 em{font-style:italic;color:var(--wine)}
.oy-hero-say p{color:var(--ink-soft);max-width:34ch;margin:0 0 26px}
.oy-hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.oy-hero-pills a{font:500 13px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;
 text-decoration:none;border:1px solid var(--sand-deep);background:var(--paper);padding:9px 13px;border-radius:999px}
.oy-hero-pills a:hover{border-color:var(--wine);color:var(--wine)}
/* Кадр героя не шире 268px НИ НА ОДНОЙ ширине: при DPR 2 это 536, ровно то,
   что даёт ступень m у публикуемого кадра. Полосу добирает панель. */
.oy-hero-shot{position:relative;overflow:hidden;background:var(--sand);max-width:268px;width:100%;
 justify-self:center;aspect-ratio:3/4;align-self:stretch}
/* Пропорции исходников РАЗНЫЕ (от 3:4 до почти квадрата), поэтому бокс
   показывает кадр ЦЕЛИКОМ: cover срезал у героя до 27% содержимого, а
   срезанное содержимое не ловит ни один страж геометрии (§4, урок fluest). */
.oy-hero-shot img{width:100%;height:100%;object-fit:contain;background:var(--sand)}
.oy-hero-tag{position:absolute;left:0;bottom:0;background:var(--night);color:var(--on-night);
 font:500 13px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;text-decoration:none}

/* --------------------------------------------------------------- кнопки */
.oy-btn{display:inline-block;background:var(--wine);color:var(--on-wine);text-decoration:none;
 font:600 13px/1 var(--ui);letter-spacing:.08em;padding:15px 22px;border:1px solid var(--wine);cursor:pointer}
.oy-btn:hover{background:var(--wine-soft);border-color:var(--wine-soft)}
.oy-btn.ghost{background:transparent;color:var(--wine)}
.oy-btn.ghost:hover{background:var(--wine);color:var(--on-wine)}
.oy-btn.wide{display:block;text-align:center;width:100%}
.oy-band.night .oy-btn.ghost{color:var(--on-night);border-color:var(--on-night-soft)}
.oy-band.night .oy-btn.ghost:hover{background:var(--on-night);color:var(--night)}
.oy-outnote{font-size:12.5px;color:var(--ink-faint);margin:8px 0 0}
.oy-band.night .oy-outnote{color:var(--on-night-soft)}

/* -------------------------------------------------------------- карточка */
/* Лицо карточки своё (в библиотеку такое не кладут): портретный кадр 2:3 без
   рамки, под ним имя обычным кеглем — НЕ капсом узкой гарнитуры, это брак на
   длинных именах (урок stickon), — строка факта и цена. Значка скидки на
   кадре нет: слот, который у соседей занимает «-40%», у нас занимает то,
   чего на витринах ниши нет вовсе — тянется вещь или нет. */
/* height:100% на флекс-элементе ОТМЕНЯЕТ растяжение: явная высота сильнее
   align-self:stretch, и карточки в ряду остаются разной высоты, а цена внизу
   гуляет на два десятка пикселей. Высоту держит сам флекс. */
.oy-card{background:var(--paper)}
.oy-card-body{display:flex;flex-direction:column;flex:1 1 auto}
.oy-card .oy-row:last-child{margin-top:auto;padding-top:4px}
/* Пропорция бокса РАВНА пропорции исходника (кадры фида и двойники 3:4):
   при 2:3 cover срезал бы одиннадцать процентов кадра, а срезанное
   содержимое не ловит ни один страж геометрии (§4, урок fluest). */
/* Кадр показывается ЦЕЛИКОМ: у поставщика пропорции гуляют от 3:4 до почти
   квадрата, и cover срезал до девяти процентов кадра. Срезанное содержимое не
   ловит ни один страж геометрии (§4, урок fluest), поэтому решаем раскладкой. */
.oy-shot{position:relative;background:var(--sand);overflow:hidden;aspect-ratio:3/4}
.oy-shot img{width:100%;height:100%;object-fit:contain}
.oy-card-body{padding:13px 2px 0}
.oy-card-title{font:500 14.5px/1.34 var(--ui);letter-spacing:0;margin:0 0 6px}
.oy-card-title a{text-decoration:none}
.oy-card-title a:hover{color:var(--wine)}
/* Строка факта держит ДВЕ строки всегда: у товара без фактов она схлопывалась
   и цена вставала выше соседской по ряду (урок kalidi). */
.oy-spec{font-size:12.5px;color:var(--ink-faint);margin:0 0 8px;min-height:2.68em}
.oy-price{font:600 15px/1 var(--ui);font-variant-numeric:tabular-nums}
.oy-stars{font-size:12.5px;color:var(--ink-faint);white-space:nowrap}
.oy-flag{position:absolute;left:10px;top:10px;background:rgba(23,21,15,.86);color:var(--on-night);
 font:500 13px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;padding:7px 9px}
.oy-card .oy-row{margin-top:2px}
/* На узком экране цена и рейтинг не помещаются в строку, и у карточек без
   рейтинга строка выходит вдвое ниже: цена в ряду встаёт на разной высоте.
   Держим одинаковую высоту явно. */
@media (max-width:560px){
 .oy-card .oy-row{flex-direction:column;align-items:flex-start;gap:2px;min-height:3.1em}
}

/* Лента: уезжает за правый край, как у лидеров ниши — видна половина
   следующей карточки, и это приглашение листать. */
/* Лента показывает половину следующей карточки, но НЕ ВЫЕЗЖАЕТ ЗА ПОЛОСУ:
   обрезка идёт по краю самой ленты. Вынос за полосу давал текст карточки за
   границей полосы — страж «блок вне полосы» краснел на каждой ленте. */
.oy-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
.oy-rail > *{flex:0 0 clamp(200px,21vw,268px);scroll-snap-align:start}
.oy-rail::-webkit-scrollbar{height:4px}
.oy-rail::-webkit-scrollbar-thumb{background:var(--sand-deep)}

/* Сетка карточек не схлопывается в одну колонку: одна колонка на 460px даёт
   бокс 408px, которому при DPR 2 нужно 816, а двойники столько дают не всегда.
   Две колонки на телефоне — и штатная раскладка витрин этой полки. */
/* Колонок ровно столько, чтобы бокс карточки не перерос то, что даёт исходник:
   при DPR 2 ему нужно вдвое больше, а ступень m даёт от 536px ширины. */
.oy-grid > *{flex-basis:calc((100% - var(--gap)) / 2)!important}
@media (min-width:561px){.oy-grid > *{flex-basis:calc((100% - 2 * var(--gap)) / 3)!important}}
@media (min-width:900px){.oy-grid > *{flex-basis:calc((100% - 3 * var(--gap)) / 4)!important}}
@media (min-width:1200px){.oy-grid > *{flex-basis:calc((100% - 4 * var(--gap)) / 5)!important}}

/* ------------------------------------------------------- плитки отделов */
.oy-tiles{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.oy-tiles > *{flex:0 1 calc((100% - 4 * 16px) / 5);min-width:0}
.oy-tile{display:block;text-decoration:none;position:relative}
.oy-tile-shot{aspect-ratio:3/4;background:var(--sand);overflow:hidden;max-width:268px;width:100%;margin-inline:auto;display:block}
.oy-tile-shot img{width:100%;height:100%;object-fit:contain;background:var(--sand)}
.oy-tile b{display:block;font:500 13px/1.3 var(--ui);letter-spacing:.09em;text-transform:uppercase;margin:11px 0 2px}
.oy-tile span{font-size:12.5px;color:var(--ink-faint)}
.oy-tile:hover b{color:var(--wine)}

/* ----------------------------------------------------- редакционный сплит */
.oy-split{display:grid;grid-template-columns:400px minmax(0,1fr);gap:24px}
/* Потолок ширины врезки — МАКЕТ ПОДОГНАН ПОД ИСХОДНИК (§4.0 п.2). На 900px
   сплит складывается, врезка получает всю полосу 848px, и при DPR 2 ей нужно
   1696 — исходник столько не даёт. Ограничиваем бокс, а не растягиваем кадр. */
/* Потолок ширины врезки — МАКЕТ ПОДОГНАН ПОД ИСХОДНИК (§4.0 п.2): двойники
   дают 1126px по ширине, значит бокс при DPR 2 не может быть шире 450. */
.oy-edit{position:relative;display:block;text-decoration:none;background:var(--sand-deep);max-width:400px;width:100%}
.oy-edit-shot{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.oy-edit-shot img{width:100%;height:100%;object-fit:contain}
/* Светлый текст поверх кадра обязан читаться БЕЗ кадра (правило 25.08,
   homemate): у плашки свой тёмный фон, а не только вуаль. */
.oy-edit-say{position:absolute;left:0;bottom:0;background:var(--night);color:var(--on-night);padding:16px 20px;max-width:78%}
.oy-edit-say b{display:block;font-family:var(--display);font-size:clamp(20px,2.3vw,30px);font-weight:400;line-height:1.1}
.oy-edit-say span{display:block;font:500 13px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;margin-top:9px;color:var(--on-night-soft)}

/* Панель рядом с редакционным кадром: тёмная плашка с фактом вместо второго
   кадра. Своя пропорция ей не нужна — она тянется по высоте соседа. */
.oy-panel{background:var(--night);color:var(--on-night);padding:38px 34px;
 display:flex;flex-direction:column;justify-content:center}
.oy-panel h2{font-size:clamp(26px,2.8vw,38px);margin:0 0 16px;color:var(--on-night)}
.oy-panel p{color:var(--on-night-soft);max-width:44ch}
.oy-panel .oy-hero-kick{color:var(--on-night-soft)}
.oy-panel .oy-btn.ghost{color:var(--on-night);border-color:var(--on-night-soft);align-self:flex-start}
.oy-panel .oy-btn.ghost:hover{background:var(--on-night);color:var(--night)}
@media (max-width:1000px){.oy-panel{padding:30px 26px}}

/* ------------------------------------------------------------ полосы текста */
/* §5: текст занимает ПОЛОСУ ЦЕЛИКОМ. Меру строки держат колонки, а не поля:
   узкая колонка с пустотой по обе стороны — запрещённый ход. */
.oy-prose{font-size:16.5px}
.oy-prose h2{font-size:clamp(26px,3vw,40px);margin:0 0 18px}
.oy-prose h3{font-size:19px;margin:30px 0 10px}
.oy-cols2{columns:2;column-gap:44px}
.oy-cols2 > *{break-inside:avoid}
.oy-cols2.loose > *{break-inside:auto}
.oy-side{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;align-items:stretch}
.oy-side > * > .oy-fig{position:sticky;top:24px}
.oy-side.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.oy-lead{font-size:19px;line-height:1.55;color:var(--ink-soft)}

/* ------------------------------------------------- своя инфографика (SVG) */
/* Подписи набираются HTML, а не <text> внутри SVG: одна широкая картинка с
   текстом внутри читается на 1440 и сжимается втрое на 360 (урок kalidi). */
.oy-fig{margin:26px 0 0;border-top:1px solid var(--line);padding-top:18px}
.oy-band.night .oy-fig{border-color:#39352c}
.oy-fig figcaption{font:500 13px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;
 color:var(--ink-faint);margin:0 0 16px}
.oy-band.night .oy-fig figcaption{color:var(--on-night-soft)}
.oy-bars{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.oy-bars li{display:grid;grid-template-columns:minmax(96px,20%) 1fr auto;align-items:center;gap:12px;font-size:13.5px}
.oy-bars .t{color:var(--ink-soft)}
.oy-band.night .oy-bars .t{color:var(--on-night-soft)}
.oy-bars .v{font-variant-numeric:tabular-nums;font-weight:600}
.oy-bar{height:12px;background:var(--sand-deep);position:relative;min-width:2px}
.oy-band.night .oy-bar{background:#39352c}
.oy-bar i{position:absolute;inset:0 auto 0 0;background:var(--wine);display:block}
.oy-strip{display:flex;height:16px;overflow:hidden;margin:0 0 16px;background:#DCD2C2}
.oy-seg{display:block;height:100%;min-width:2px}
.oy-seg[data-i="0"],.oy-legend i[data-i="0"]{background:var(--wine)}
.oy-seg[data-i="1"],.oy-legend i[data-i="1"]{background:var(--camel)}
.oy-seg[data-i="2"],.oy-legend i[data-i="2"]{background:var(--night)}
/* Четвёртый сегмент отличается от ДОРОЖКИ, а не сливается с ней: на песочной
   полосе «sand-deep» на «sand» читался как пустое место, и доля выглядела
   потерянной (поймано глазом на странице посадки). */
.oy-seg[data-i="3"],.oy-legend i[data-i="3"]{background:#9A907F}
.oy-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.5px}
.oy-legend li{display:flex;align-items:center;gap:7px;min-width:0}
.oy-legend i{width:11px;height:11px;flex:0 0 11px;display:block}
.oy-legend .t{color:var(--ink-soft)}
.oy-legend .v{font-weight:600;font-variant-numeric:tabular-nums}
.oy-band.night .oy-legend .t{color:var(--on-night-soft)}
.oy-band.night .oy-strip{background:#39352c}
.oy-band.night .oy-seg[data-i="2"]{background:var(--on-night-soft)}
.oy-band.night .oy-seg[data-i="3"],.oy-band.night .oy-legend i[data-i="3"]{background:#6b6455}
.oy-scale{display:flex;gap:10px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.oy-scale li{flex:1 1 90px;min-width:0;border-top:3px solid var(--wine);padding-top:9px}
.oy-scale b{display:block;font:600 17px/1.2 var(--ui);font-variant-numeric:tabular-nums}
.oy-scale span{font-size:12.5px;color:var(--ink-faint)}
.oy-band.night .oy-scale span{color:var(--on-night-soft)}
.oy-steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;
 grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px}
.oy-steps li{counter-increment:s;position:relative;padding-top:38px;font-size:14.5px;color:var(--ink-soft)}
.oy-steps li::before{content:counter(s);position:absolute;top:0;left:0;width:28px;height:28px;
 display:grid;place-items:center;background:var(--wine);color:var(--on-wine);font:600 13px/1 var(--ui)}
.oy-steps b{display:block;color:var(--ink);font:600 14.5px/1.3 var(--ui);margin-bottom:5px}
.oy-band.night .oy-steps li{color:var(--on-night-soft)}
.oy-band.night .oy-steps b{color:var(--on-night)}

/* ------------------------------------------- цитата и врезка в статье */
.oy-quote{margin:22px 0;padding:0 0 0 20px;border-left:3px solid var(--wine)}
.oy-quote p{font-family:var(--display);font-size:clamp(19px,2.1vw,25px);line-height:1.28;margin:0 0 10px}
.oy-quote cite{font:500 13px/1.5 var(--ui);letter-spacing:.1em;text-transform:uppercase;
 color:var(--ink-faint);font-style:normal;display:block}
.oy-quote cite a{color:inherit}
.oy-band.night .oy-quote cite{color:var(--on-night-soft)}
.oy-inset{background:var(--sand);padding:20px;border-top:0}
.oy-band.sand .oy-inset{background:var(--paper)}
.oy-inset .oy-side{grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:20px;align-items:center}
.oy-inset-shot{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--sand-deep)}
.oy-inset-shot img{width:100%;height:100%;object-fit:contain}
.oy-inset b{display:block;font:600 16px/1.3 var(--ui);margin-bottom:8px}
.oy-inset p{font-size:14.5px;color:var(--ink-soft);margin:0 0 10px}
@media (max-width:760px){.oy-inset .oy-side{grid-template-columns:minmax(0,110px) minmax(0,1fr)}}

/* ------------------------------------------------------- карточка товара */
.oy-pdp{display:grid;grid-template-columns:minmax(0,54%) minmax(0,1fr);gap:46px;align-items:start;padding:30px 0 0}
.oy-pdp-main{background:var(--sand);aspect-ratio:2/3;overflow:hidden}
.oy-pdp-main img{width:100%;height:100%;object-fit:cover}
.oy-thumbs{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.oy-thumbs button{padding:0;border:1px solid transparent;background:var(--sand);cursor:pointer;
 width:78px;aspect-ratio:3/4;overflow:hidden}
.oy-thumbs button[aria-current="true"]{border-color:var(--wine)}
.oy-thumbs img{width:100%;height:100%;object-fit:contain}
.oy-pdp-info h1{font-size:clamp(26px,3vw,38px);line-height:1.1;margin:0 0 14px}
.oy-pdp-price{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 6px}
.oy-pdp-price b{font:600 26px/1 var(--ui);font-variant-numeric:tabular-nums}
.oy-facts{list-style:none;margin:22px 0;padding:0;border-top:1px solid var(--line)}
.oy-facts li{display:flex;justify-content:space-between;gap:18px;padding:11px 0;
 border-bottom:1px solid var(--line);font-size:14.5px}
.oy-facts dt,.oy-facts .k{color:var(--ink-faint)}
.oy-facts .v{text-align:right;font-weight:500}
.oy-swatches{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.oy-swatches a{display:block;width:58px;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line)}
.oy-swatches a[aria-current]{border-color:var(--wine);border-width:2px}
.oy-swatches img{width:100%;height:100%;object-fit:contain}
.oy-story{margin:22px 0 0;border-top:1px solid var(--line);padding-top:18px}
.oy-story p{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink-soft)}

/* Галерея карточки: две в ряд НА ВСЮ КОЛОНКУ. Раскладка библиотеки даёт
   треть ширины на кадр, и при двух кадрах колонка остаётся наполовину пустой. */
.oy-pdp .oy-gal{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.oy-pdp .oy-gal > *{flex:none;min-width:0}
.oy-pdp .oy-shot-link{display:block;background:var(--sand);aspect-ratio:3/4;overflow:hidden;cursor:zoom-in;max-width:268px;width:100%;margin-inline:auto}
.oy-pdp .oy-gal > *:first-child{grid-column:1/-1}
.oy-pdp .oy-gal > *:first-child .oy-shot-link{max-width:var(--lead,450px)}
.oy-pdp .oy-shot-link img{width:100%;height:100%;object-fit:contain}
.oy-pdp .oy-gal > *:first-child:nth-last-child(1){grid-column:1/-1}
@media (max-width:520px){.oy-pdp .oy-gal{grid-template-columns:1fr}}

/* ----------------------------------------------------------- категория */
.oy-cat-head{text-align:center;padding:34px 0 22px}
.oy-cat-head h1{font-size:clamp(32px,4vw,52px);margin:0 0 10px}
.oy-cat-head p{color:var(--ink-soft);max-width:70ch;margin:0 auto}
.oy-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
 border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:0 0 30px}
.oy-count{font:500 13px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.oy-chip{background:var(--paper);border:1px solid var(--line);padding:9px 14px;cursor:pointer;
 font:500 13px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.oy-chip[aria-pressed="true"]{background:var(--night);border-color:var(--night);color:var(--on-night)}
.oy-pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-width:0}
.oy-pills a{font:500 13px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;
 text-decoration:none;border:1px solid var(--line);padding:9px 13px;border-radius:999px;white-space:nowrap}
.oy-pills a:hover{border-color:var(--wine);color:var(--wine)}
.oy-pills a[aria-current]{background:var(--night);border-color:var(--night);color:var(--on-night)}
@media (max-width:760px){.oy-toolbar{gap:10px}.oy-pills{order:3;width:100%}}
.oy-pager{justify-content:center;margin:44px 0 0;gap:6px}
.oy-pager a,.oy-pager span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 10px;
 border:1px solid var(--line);text-decoration:none;font:500 13px/1 var(--ui)}
.oy-pager span[aria-current]{background:var(--night);color:var(--on-night);border-color:var(--night)}
.oy-crumbs{font-size:12.5px;color:var(--ink-faint);padding:16px 0 0}
.oy-crumbs a{text-decoration:none}
.oy-crumbs a:hover{color:var(--wine)}
.oy-crumbs li + li::before{content:"/";margin-right:8px;color:var(--line)}

/* ---------------------------------------------------------------- поиск */
.oy-search{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 18px;
 border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.oy-search label{font:500 11.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.oy-search input{flex:1 1 280px;min-width:0;border:1px solid var(--line);background:var(--paper);
 padding:13px 14px;font:400 16px/1.2 var(--ui);color:var(--ink)}
.oy-search input:focus{outline:2px solid var(--wine);outline-offset:1px}
.oy-search .oy-btn{padding:13px 20px}

/* Шапка таблицы на телефоне прячется ВИЗУАЛЬНО, но остаётся в полосе.
   Библиотека уносит её на left:-9999px, и страж «текст вне полосы» видит текст
   за десять тысяч пикселей от края. Приём тот же, побочного эффекта нет. */
/* Шапка таблицы на телефоне НЕ ПОКАЗЫВАЕТСЯ вовсе: подписи колонок уезжают в
   td::before, и прятать её уносом за край (так делает библиотека) значит
   держать текст за десять тысяч пикселей от полосы. */
@media (max-width:640px){ table.oy-t thead{display:none} }

/* -------------------------------------------------------------- таблицы */
table.oy-t{font-size:14.5px}
table.oy-t caption{text-align:left;font:500 13px/1.4 var(--ui);letter-spacing:.14em;
 text-transform:uppercase;color:var(--ink-faint);padding-bottom:12px}
.oy-band.night table.oy-t caption,
.oy-band.night .oy-fig figcaption{color:var(--on-night-soft)}
table.oy-t th{text-align:left;font:600 12px/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;
 border-bottom:1px solid var(--ink);padding:0 14px 9px 0}
table.oy-t td{border-bottom:1px solid var(--line);padding:10px 14px 10px 0}
.oy-band.night table.oy-t th{border-color:var(--on-night-soft);color:var(--on-night)}
.oy-band.night table.oy-t td{border-color:#39352c;color:var(--on-night-soft)}

/* ------------------------------------------------------------------ FAQ */
.oy-faq-item{border-bottom:1px solid var(--line);padding:14px 0}
.oy-faq-item summary{cursor:pointer;font:600 15.5px/1.4 var(--ui);list-style:none}
.oy-faq-item summary::-webkit-details-marker{display:none}
.oy-faq-item summary::after{content:"+";float:right;color:var(--wine);font-weight:400}
.oy-faq-item[open] summary::after{content:"\2212"}
.oy-faq-item p{margin:10px 0 0;color:var(--ink-soft);font-size:15px}

/* --------------------------------------------------------------- журнал */
/* Карточка журнала — РЯД, а не плитка: кадр 240px, текст рядом. Так бокс
   кадра не перерастает то, что даёт исходник (у части кадров крупный двойник
   узкий), и полоса журнала не стоит четвертью мегабайта на главной. */
.oy-posts{display:flex;flex-wrap:wrap;gap:26px;justify-content:center}
.oy-posts > *{flex:0 1 calc((100% - 26px) / 2);min-width:0}
.oy-post{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start;text-decoration:none}
.oy-post-shot{aspect-ratio:3/4;background:var(--sand);overflow:hidden;margin-bottom:0}
.oy-post-shot img{width:100%;height:100%;object-fit:contain;background:var(--sand)}
/* У карточки журнала РОВНО ДВА ребёнка: кадр и текст. Три ребёнка в сетке из
   двух колонок уводят третий на новую строку, и подпись уезжает под кадр —
   поймано глазом на листе главной. */
.oy-post-text{display:block;min-width:0}
.oy-post b{display:block;font:600 17px/1.28 var(--ui);margin-bottom:7px}
.oy-post span{font-size:14px;color:var(--ink-faint)}
.oy-post:hover b{color:var(--wine)}
.oy-meta{font:500 13px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------------------------------------------------------------- подвал */
.oy-foot{background:var(--night);color:var(--on-night);margin-top:78px;padding:60px 0 28px}
.oy-fgrid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1.35fr;gap:38px}
.oy-foot h4{font:500 11.5px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;
 color:var(--on-night);margin:0 0 16px}
.oy-foot a{color:var(--on-night-soft);text-decoration:none;display:block;padding:5px 0;font-size:14px}
.oy-foot a:hover{color:var(--on-night)}
.oy-flogo{display:block;font:500 20px/1 var(--ui);letter-spacing:.3em;text-transform:uppercase;margin-bottom:16px}
.oy-foot p{color:var(--on-night-soft);font-size:14px}
/* Блок адреса живёт и в подвале, и на странице контактов. Цвета задаются
   ОТ МЕСТА, а не от блока: раскрашенный «под тёмное» адрес на белой странице
   давал светло-серое по белому (тот же класс, что поймали на eytino). */
.oy-place{font-style:normal;font-size:14px;margin:0 0 14px;color:var(--ink-soft)}
.oy-place b{display:block;font-weight:500;color:var(--ink)}
.oy-place a{display:inline;color:var(--ink);border-bottom:1px solid var(--line);padding:0}
.oy-foot .oy-place{color:var(--on-night-soft)}
.oy-foot .oy-place b{color:var(--on-night)}
.oy-foot .oy-place a{color:var(--on-night);border-bottom-color:#4a453a}
.oy-map{border:0;width:100%;height:190px;background:#242017;display:block}
.oy-fbottom{border-top:1px solid #39352c;margin-top:40px;padding-top:22px;
 display:flex;gap:22px;flex-wrap:wrap;justify-content:space-between}
.oy-fbottom p{margin:0;font-size:13px;color:var(--on-night-soft);max-width:78ch}
.oy-fbottom a{display:inline;padding:0;font-size:13px;border-bottom:1px solid #4a453a}

/* ------------------------------------------------------------- адаптив */
@media (max-width:1180px){
 .oy-tiles > *{flex-basis:calc((100% - 3 * 16px) / 4)}
 .oy-fgrid{grid-template-columns:1fr 1fr;gap:30px}
 .oy-pdp{grid-template-columns:minmax(0,1fr);gap:30px}
 .oy-pdp-main{aspect-ratio:3/4}
}
@media (max-width:1000px){
 :root{--gut:26px}
 .oy-hero{grid-template-columns:repeat(2,minmax(0,268px));justify-content:center;gap:14px}
 .oy-hero-say{grid-column:1/-1;padding:32px 28px}
 .oy-nav{display:none}
 .oy-burger{display:inline-block}
 .oy-drawer{display:block;border-bottom:1px solid var(--line)}
 .oy-drawer[hidden]{display:none!important}
 .oy-drawer ul{list-style:none;margin:0;padding:8px 0 16px;display:grid;
  grid-template-columns:1fr 1fr;gap:2px}
 .oy-drawer a{display:block;padding:11px 4px;font:500 12px/1 var(--ui);
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
 .oy-announce li:nth-child(n+3){display:none}
 .oy-split{grid-template-columns:1fr;justify-items:center}
 .oy-posts > *{flex-basis:100%}
 .oy-side{grid-template-columns:1fr;gap:26px}
 .oy-side.flip{grid-template-columns:1fr}
}
@media (max-width:760px){
 .oy-band{padding:52px 0}
 .oy-tiles > *{flex-basis:calc((100% - 16px) / 2)}
 .oy-cols2{columns:1}
 .oy-posts > *{flex-basis:100%}
 .oy-post{grid-template-columns:150px minmax(0,1fr);gap:14px}
 .oy-fgrid{grid-template-columns:1fr}
 .oy-announce li:nth-child(n+2){display:none}
 /* Словесный знак остаётся ПО ЦЕНТРУ и на телефоне: колонки по краям равны,
    правая пустеет, но держит ширину. При колонках auto/1fr/auto знак уезжал к
    бургеру, и шапка читалась перекошенной. */
 .oy-util{grid-template-columns:1fr auto 1fr;gap:10px}
 .oy-util-r{min-width:0}
 .oy-util-l a,.oy-util-r a{display:none}
 .oy-mark{letter-spacing:.22em;font-size:19px}
}
@media (max-width:420px){
 :root{--gut:16px}
 .oy-hero{grid-template-columns:minmax(0,268px);justify-content:center;padding-top:22px}
 .oy-hero-shot{aspect-ratio:3/4}
 .oy-rail > *{flex-basis:clamp(168px,62vw,220px)}
 .oy-thumbs button{width:62px}
}