/*
 * North3 MW — ядро: основа, шапка, карточка, ленты, шторки, тосты, попап канала, консьерж, подвал.
 * Значения — из макета reference/source/Menswear Redesign.dc.html 1:1. Ширины макета (там их считает JS):
 * телефон < 760, десктоп ≥ 1100, навигация в шапке ≥ 1280, слово «Меню» ≥ 1500.
 */

:root {
	--g: 'Geologica', sans-serif;
	--m: 'IBM Plex Mono', monospace;
	--ink: #0f0f0f;
	--bg2: #f4f4f3;
	--l1: #ececea;
	--l2: #e2dfda;
	--l3: #d8d8d6;
	--t1: #46433f;
	--t2: #6f6a64;
	--t3: #79746e;
	--t4: #99948f;
	--t5: #a5a19c;
	--red: #c8321e;
	--ok: #2f7d4a;
	--hov: #302c28;
	--pad: clamp(14px, 2.4vw, 40px);
	--ease: cubic-bezier(.2, .8, .2, 1);
	--safe-b: env(safe-area-inset-bottom);
}

/* --- основа (helmet макета) --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; scroll-padding-top: 72px; }
body { margin: 0; background: #fff; color: var(--ink); font-family: 'Geologica', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { overflow-wrap: break-word; }
:where(a) { color: var(--ink); text-decoration: none; }
:where(a):hover { color: var(--t1); }
button, input, select, textarea { font-family: inherit; color: inherit; }
img, video { display: block; max-width: 100%; }
img { color: transparent; font-size: 0; outline: 0; border: 0; }
img:not([src]):not([srcset]), img[src=""]:not([srcset]), img[data-broken] { visibility: hidden; }
input::placeholder, textarea::placeholder { color: var(--t5); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button { -webkit-appearance: none; appearance: none; border-radius: 0; }
input, select, textarea { -webkit-appearance: none; appearance: none; border-radius: 0; }
input[type=checkbox], input[type=radio] { -webkit-appearance: auto; appearance: auto; }
select { background-image: none; }
input[type=search]::-webkit-search-cancel-button { display: none; }
video::-webkit-media-controls-start-playback-button { display: none; }
@media (max-width: 1099.98px) { input, select, textarea { font-size: 16px !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media print { header, footer, aside { display: none !important; } }
@keyframes mwMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 14px; background: var(--ink); color: #fff; }
.skip:focus { left: 8px; top: 8px; color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
/* Значок настроек cookie (плагин N3 Cookie Consent) не лежит поверх открытых шторок, галереи и окон. */
body.is-locked #n3cc-revisit { visibility: hidden; }
html:has(body.is-locked) { overflow: hidden; overscroll-behavior: none; }
.ico { display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* --- общие элементы --- */
.mono { font: 400 10.5px/1 var(--m); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow { font: 400 10.5px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--t4); }
.btn { height: 48px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; font: 500 10.5px/1 var(--m); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.btn:hover { background: var(--ink); color: #fff; }
.btn--dark { background: var(--ink); color: #fff; border: 0; }
.btn--dark:hover { background: var(--hov); color: #fff; }
.btn--soft { border-color: var(--l2); }
.btn--soft:hover { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn--block { width: 100%; }
.ulink { padding-bottom: 4px; border-bottom: 1px solid var(--ink); font: 500 10.5px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.arr { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--l2); background: #fff; cursor: pointer; color: var(--ink); }
.arr:hover { border-color: var(--ink); }
.arrs { display: flex; gap: 4px; }
.shead { padding: 0 var(--pad); margin-bottom: clamp(20px, 2.4vw, 36px); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.shead__t { margin: 0; display: flex; align-items: baseline; gap: 14px; font: 800 clamp(28px, 3.8vw, 60px)/.92 var(--g); letter-spacing: -.05em; text-transform: uppercase; }
.shead__t--sm { font-size: clamp(26px, 3.4vw, 52px); }
.shead__n { align-self: flex-start; margin-top: .1em; font: 400 11px/1 var(--m); letter-spacing: .1em; color: var(--t4); }
.shead__acts { display: flex; align-items: center; gap: 18px; }
.chip { flex: 0 0 auto; height: 34px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid var(--l2); background: #fff; cursor: pointer; font: 500 12px/1 var(--g); color: var(--ink); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.field { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--l2); border-radius: 0; background: #fff; font: 400 15px/1 var(--g); outline: none; }
.field:focus { border-color: var(--ink); }
.field.is-err { border-color: var(--red); }
.err-t { font: 400 10px/1.3 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }

/* --- полоса над шапкой --- */
.topbar { height: 34px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 28px; background: var(--ink); color: #fff; font: 400 10px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.topbar a { color: #fff; }

/* --- шапка --- */
.hdr { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--l1); }
.hdr__in { height: 64px; padding: 0 clamp(12px, 2.4vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.hdr__l { display: flex; align-items: center; gap: clamp(4px, 1.6vw, 28px); min-width: 0; }
.hdr__menu { display: flex; align-items: center; gap: 10px; height: 40px; min-width: 36px; padding: 0; background: none; border: 0; cursor: pointer; font: 500 11.5px/1 var(--g); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.hdr__burger { display: grid; gap: 5px; width: 20px; }
.hdr__burger span { height: 1.5px; background: var(--ink); }
.hdr__burger span + span { width: 13px; }
.hdr__menu-t { display: none; }
.hdr__ico { position: relative; width: 38px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; cursor: pointer; color: var(--ink); }
.hdr__ico:hover { opacity: .6; color: var(--ink); }
.hdr__srch-m { width: 36px; }
.hdr__srch-m:hover { opacity: 1; }
.hdr__srch-d { display: none; }
.hdr__nav { display: none; gap: clamp(10px, 1vw, 18px); min-width: 0; overflow: hidden; }
.hdr__nav a { padding: 6px 0; border-bottom: 1px solid transparent; font: 500 10.5px/1 var(--g); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.hdr__nav a.is-current { border-bottom-color: var(--ink); }
.hdr__nav a.is-sale { color: var(--red); }
.hdr__logo { font: 800 clamp(19px, 1.8vw, 26px)/1 var(--g); letter-spacing: -.05em; color: var(--ink); }
.hdr__logo:hover { color: var(--ink); }
.hdr__logo-s { display: none; }
.hdr__r { display: flex; justify-content: flex-end; align-items: center; gap: clamp(0px, .6vw, 10px); }
.hdr__count { position: absolute; right: 1px; top: 5px; min-width: 15px; height: 15px; padding: 0 3px; display: grid; place-items: center; background: var(--ink); color: #fff; border-radius: 8px; font: 500 10px/1 var(--m); }
.hdr__bot { margin-left: 4px; flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; background: var(--ink); border-radius: 50%; color: #fff; }
.hdr__bot:hover { background: var(--t1); color: #fff; }
@media (max-width: 759.98px) {
	.topbar__more { display: none; }
	.hdr__logo { font-size: 30px; }
	.hdr__logo-l { display: none; }
	.hdr__logo-s { display: inline; }
	.hdr__wish { display: none; }
}
@media (min-width: 1280px) {
	.hdr__srch-m { display: none; }
	.hdr__srch-d { display: flex; }
	.hdr__nav { display: flex; }
}
/* В меню шапки MW на пункт больше, чем в макете («Парфюм»): на 1280–1439 с отступами макета «Sale» обрезался. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
	.hdr__l { gap: 14px; }
	.hdr__nav { gap: 8px; }
}
@media (min-width: 1500px) { .hdr__menu-t { display: inline; } }

/* --- карточка товара (MWCard) --- */
.card { display: flex; flex-direction: column; gap: 12px; min-width: 0; color: var(--ink); }
.card__media { position: relative; aspect-ratio: 3/4; background: var(--bg2); overflow: hidden; }
.card__media.is-swipe { touch-action: pan-y; }
/* В лентах (Sale, подборки) фото не листается пальцем — палец листает саму ленту: pan-y здесь запрещал её прокрутку (09.10.2026). */
.rail .card__media.is-swipe { touch-action: pan-x pan-y; }
.card__link { position: absolute; inset: 0; display: block; }
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.card.is-zoom .card__img { transform: scale(1.04); }
.card__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--bg2); opacity: 0; transition: opacity .25s; }
.card__layer.is-on { opacity: 1; }
/* Палец: фото — нативная полоса со «щелчком» (cards.js strip, как на cornery, 08.10.2026). pan-x у полосы — иначе pan-y
   карточки (is-swipe) запрещал горизонтальную прокрутку внутри. */
.card__media.is-strip { touch-action: pan-x pan-y; }
.card__link.is-strip { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x pan-y; }
.card__link.is-strip::-webkit-scrollbar { display: none; }
.card__link.is-strip > .card__img { position: relative; inset: auto; flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; transform: none; }
.card__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Бейджи не заходят под сердечко (справа 44 px), лишние — на следующую строку; в узких карточках (ленты на телефоне)
   у бейджа видео — только ▶ (07.10.2026). */
.card__badges { position: absolute; left: 8px; right: 44px; top: 8px; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
@container (max-width: 210px) { .badge__t { display: none; } }
.badge { padding: 5px 7px 4px; background: #fff; font: 500 10px/1 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.badge--sale { color: var(--red); }
.badge--video { background: var(--ink); color: #fff; }
/* Распроданный товар в сетке (на MW видны, в конце выдачи): моно-метка «Нет в наличии», фото приглушено, цена серым. */
.badge--out { color: var(--t3); }
.card.is-out .card__link { opacity: .5; filter: grayscale(.35); transition: opacity .25s; }
.card.is-out:hover .card__link { opacity: .8; }
.card.is-out .card__price { color: var(--t4); }
/* У распроданного с видео — «Нет в наличии» и ▶ без подписи (до 10.10.2026 метку видео у распроданных скрывали совсем: вдвоём
   на узкой карточке телефона они переносились в две строки — но так не видно, что у товара есть ролик). На узкой карточке
   метки плотнее, чтобы встать в одну строку. */
.card.is-out .badge--video .badge__t { display: none; }
@container (max-width: 210px) { .card.is-out .badge { padding-left: 5px; padding-right: 5px; letter-spacing: .02em; } .card.is-out .card__badges { gap: 3px; } }
.badge--out { white-space: nowrap; }
/* Сердечко — на одной линии с бейджами (центр ~18 px) и на том же отступе от края, что бейджи слева. */
.card__fav { position: absolute; right: -2px; top: -2px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; background: none; border: 0; cursor: pointer; color: var(--ink); }
.card__fav[aria-pressed="true"] svg { fill: var(--ink); }
.card__segs { position: absolute; left: 8px; right: 8px; bottom: 8px; display: none; gap: 3px; pointer-events: none; transition: bottom .2s; }
.card__segs span { flex: 1; height: 2px; background: rgba(15, 15, 15, .15); transition: background .2s; }
.card__segs span.is-on { background: var(--ink); }
/* Кадр-видео: над его сегментом — маленький ▶. */
.card__segs span.is-vid { position: relative; }
.card__segs span.is-vid::before { content: ''; position: absolute; left: 0; bottom: 5px; border-left: 6px solid rgba(15, 15, 15, .35); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.card__segs span.is-vid.is-on::before { border-left-color: var(--ink); }
video.card__layer { background: transparent; }
.card.is-segs .card__segs { display: flex; }
.card.is-quick .card__segs { bottom: calc(var(--qh, 36px) + 8px); } /* --qh — высота панели размеров (cards.js enter) */
.card__quick { position: absolute; left: 0; right: 0; bottom: 0; padding: 11px 12px 10px; display: none; align-items: baseline; gap: 14px; background: var(--ink); color: #fff; }
.card.is-quick .card__quick { display: flex; }
.card__quick-k { flex: 0 0 auto; font: 400 9.5px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: #8a857f; }
.card__quick-v { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.card__quick-v button { padding: 0 0 2px; border: 0; border-bottom: 1px solid transparent; background: none; font: 500 11px/1 var(--m); letter-spacing: .04em; color: #fff; cursor: pointer; }
.card__quick-v button:hover { border-bottom-color: #fff; }
.card__quick-v button.is-out { color: #5c5853; text-decoration: line-through; cursor: default; }
/* Узкая карточка (телефон в 2 колонки, ленты, планшет в 4–6 колонок — до 260 px): «В корзину» строкой сверху, размеры —
   ниже, крупнее для пальца; полоски кадров на это время скрыты (иначе наезжали на панель). Как в макете (в строку) —
   с 260 px ширины самой карточки (container query; в Safari 15 их нет — там всегда компактный вид). 06.10.2026. */
.card__media { container-type: inline-size; }
.card__quick { flex-direction: column; align-items: stretch; gap: 7px; padding: 9px 10px 8px; }
.card__quick-v { gap: 2px 12px; }
.card__quick-v button { padding: 3px 0 4px; font-size: 11.5px; }
.card.is-quick .card__segs { display: none; }
@container (min-width: 260px) {
	.card__quick { flex-direction: row; align-items: baseline; gap: 14px; padding: 11px 12px 10px; }
	.card__quick-v { gap: 4px 14px; }
	.card__quick-v button { padding: 0 0 2px; font-size: 11px; }
	.card.is-quick .card__segs { display: flex; }
}
.card__info { display: grid; gap: 6px; padding-right: 12px; }
.card__sku { justify-self: start; padding: 0; border: 0; background: none; cursor: copy; font: 400 10px/1 var(--m); letter-spacing: .1em; color: var(--t4); }
.card__sku:hover { color: var(--ink); }
.card__a { display: grid; gap: 6px; color: var(--ink); }
.card__a:hover { color: var(--ink); }
.card__name { font: 500 13.5px/1.35 var(--g); text-wrap: pretty; }
.card__price { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font: 600 13.5px/1 var(--g); }
.card__price s { font-weight: 400; color: var(--t4); }

/* --- горизонтальные ленты (подборки, Sale, «С этим носят») --- */
.rail { display: grid; grid-auto-flow: column; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); padding: 0 var(--pad); scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.rail::-webkit-scrollbar { display: none; width: 0; height: 0; }
.rail > * { scroll-snap-align: start; min-width: 0; }
.rail.is-drag { scroll-snap-type: none; cursor: grabbing; }
.rail img { -webkit-user-drag: none; }
/* Горизонтальные ленты по вертикали не прокручиваются: при overflow-x: auto браузер ставит auto и по y, и лишний пиксель
   высоты (315 против 314) забирал колёсико мыши — привязка кадров дёргала ленту, страница не листалась (06.10.2026).
   overscroll-behavior-x: долистали до края — без жеста «Назад» в браузере. */
.rail, .cat__chips, .pol__nav, .br__abc, .lkp__strip, .pd__strip, .lb__thumbs, .ac__tabs, .bn__f { overflow-y: hidden; overscroll-behavior-x: contain; }
/* Строки со скрытой полосой прокрутки — для мыши стрелки по краям и затухание края (rail.js, 07.10.2026). */
.hs { position: relative; min-width: 0; }
.hs__b { position: absolute; top: 50%; z-index: 3; width: 32px; height: 32px; margin-top: -16px; display: none; place-items: center; padding: 0; border: 1px solid var(--l2, #e3e1de); background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 2px 8px rgba(15, 15, 15, .08); }
.hs__b:hover { border-color: var(--ink); }
.hs__b--l { left: 0; }
.hs__b--r { right: 0; }
.hs.is-l .hs__b--l, .hs.is-r .hs__b--r { display: grid; }
.hs.is-r > :first-child { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.hs.is-l > :first-child { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent); }
.hs.is-l.is-r > :first-child { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.hs > .is-drag { cursor: grabbing; }
@media (max-width: 759.98px) { .arrs--nm { display: none; } }

/* --- шторки --- */
.ovl { position: fixed; inset: 0; z-index: 60; background: rgba(244, 244, 243, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .35s; }
.ovl.is-on { opacity: 1; pointer-events: auto; }
.drw { position: fixed; top: 10px; bottom: 10px; z-index: 61; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--ink); box-shadow: 0 24px 60px rgba(15, 15, 15, .14); transition: transform .5s var(--ease); visibility: hidden; }
.drw.is-open { visibility: visible; transform: translateX(0) !important; }
.drw--l { left: 10px; width: min(calc(100vw - 20px), 460px); transform: translateX(-110%); }
.drw--r { right: 10px; width: min(calc(100vw - 20px), 500px); transform: translateX(110%); }
.drw:not(.is-open) { transition: transform .5s var(--ease), visibility 0s .5s; }
@media (max-width: 759.98px) {
	.drw { top: 0; bottom: 0; }
	.drw--l { left: 0; width: 100vw; }
	.drw--r { right: 0; width: 100vw; }
}
.drw__h { min-height: 76px; flex: 0 0 auto; padding: 16px 16px 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--ink); color: #fff; }
.drw__t { font: 800 clamp(20px, 2vw, 26px)/1 var(--g); letter-spacing: -.045em; text-transform: uppercase; }
.drw__x { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .28); background: none; color: #fff; cursor: pointer; }
.drw__x:hover { background: var(--hov); }
.drw__back { font: 400 16px/1 var(--g); }
.drw__h--light { min-height: 0; height: 64px; padding: 0 16px 0 24px; background: #fff; color: var(--ink); border-bottom: 1px solid var(--l1); }
.drw__h--light .drw__t { font: 400 10.5px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; }
.drw__h--light .drw__x { width: 36px; height: 36px; border: 0; color: var(--ink); }
.drw__h--light .drw__x:hover { background: none; }
.drw__b { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 24px; display: grid; gap: 18px; align-content: start; }
.drw__f { flex: 0 0 auto; padding: 16px 24px calc(16px + var(--safe-b)); border-top: 1px solid var(--ink); }
.drw__f--soft { border-top-color: var(--l1); }
.drw__empty { display: grid; gap: 14px; justify-items: start; }
.drw__empty-t { font: 700 24px/1 var(--g); letter-spacing: -.03em; text-transform: uppercase; }
.drw__empty-s { font: 400 14px/1.5 var(--g); color: var(--t2); }
.drw__btn { height: 44px; padding: 0 20px; border: 0; background: var(--ink); color: #fff; cursor: pointer; font: 500 10.5px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; }
.drw__btn:hover { color: #fff; }
.drw__big { width: 100%; height: 52px; border: 0; background: var(--ink); color: #fff; cursor: pointer; font: 500 10.5px/1 var(--m); letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; }
.drw__big:hover { background: var(--hov); color: #fff; }

/* меню */
.mnu__b { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 24px 24px; }
.mnu__lvl { display: none; }
.mnu__lvl.is-on { display: block; }
.mnu__all { display: inline-block; margin: 10px 0 8px; padding-bottom: 3px; border-bottom: 1px solid var(--ink); font: 500 10.5px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.mnu__i { width: 100%; padding: 16px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; border: 0; border-bottom: 1px solid var(--l1); background: none; cursor: pointer; text-align: left; font: 700 clamp(22px, 5.4vw, 28px)/1.05 var(--g); letter-spacing: -.035em; text-transform: uppercase; color: var(--ink); transition: color .25s; }
.mnu__i:hover { color: var(--t4); }
.mnu__i.is-sale { color: var(--red); }
.mnu__n { font: 400 10px/1 var(--m); letter-spacing: .1em; color: var(--t4); }
.mnu__arr { font: 300 20px/1 var(--g); color: var(--t4); }
.mnu__links { margin-top: 32px; display: grid; gap: 14px; }
.mnu__links a { justify-self: start; font: 400 10.5px/1.3 var(--m); letter-spacing: .1em; text-transform: uppercase; }
.mnu__f { flex: 0 0 auto; margin: 0 24px; padding: 18px 0 calc(18px + var(--safe-b)); border-top: 1px solid var(--ink); display: grid; gap: 8px; font: 400 10px/1.4 var(--m); letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.mnu__f-row { display: flex; flex-wrap: wrap; gap: 16px; }
.mnu__f-row a { color: var(--ink); }
.mnu__credit { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--l1); display: flex; justify-content: space-between; align-items: center; color: var(--t3); }
.mnu__credit:hover { color: var(--ink); }
.mnu__credit b { padding: 5px 8px 4px; border: 1px solid var(--ink); color: var(--ink); font-weight: 500; }

/* поиск */
.srch__h { gap: 14px; justify-content: flex-start; }
.srch__in { flex: 1; min-width: 0; height: 48px; border: 0; background: none; color: #fff; font: 500 19px/1 var(--g); letter-spacing: -.02em; outline: none; }
.srch__in::placeholder { color: rgba(255, 255, 255, .5); }
.srch__b { gap: 28px; }
/* Группы шторки поиска (макет: колонка с gap 28) — и без запроса («Часто ищут» → «Новинки»), и с ним (бренды → товары). */
.srch__idle, .srch__res { display: grid; gap: 28px; align-content: start; min-width: 0; }
.srch__grp { display: grid; gap: 12px; }
.srch__grp--rows { gap: 14px; }
.srch__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip--dark { border-color: var(--ink); }

/* строки товаров в шторках и поиске */
.row { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; align-items: center; color: var(--ink); }
.row:hover { color: var(--ink); }
.thumb { aspect-ratio: 3/4; background: var(--bg2); overflow: hidden; display: block; }
.thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.row__t { display: grid; gap: 5px; min-width: 0; }
.row__sku { font: 400 10px/1 var(--m); letter-spacing: .1em; color: var(--t4); }
.row__name { font: 500 13.5px/1.3 var(--g); }
.row__price { font: 600 13px/1 var(--g); }
.tgbtn { height: 48px; padding: 0 22px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--ink); background: #fff; font: 500 10.5px/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.tgbtn:hover { background: var(--ink); color: #fff; }

/* избранное и корзина в шторке */
.fav-r { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--l1); }
.fav-r__t { display: grid; gap: 6px; align-content: start; }
.fav-r__name { font: 500 14px/1.3 var(--g); color: var(--ink); }
.fav-r__price { font: 600 13.5px/1 var(--g); }
.fav-r__go { justify-self: start; margin-top: 8px; padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--ink); background: none; cursor: pointer; font: 500 10px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.fav-r__x { width: 40px; height: 40px; margin: -6px -8px 0 0; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; color: var(--t4); }
.cart-r { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--l1); }
.cart-r__t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cart-r__top { display: flex; justify-content: space-between; gap: 8px; }
.cart-r__rm { padding: 0; border: 0; background: none; cursor: pointer; font: 400 10px/1 var(--m); letter-spacing: .1em; text-transform: uppercase; color: var(--t4); }
.cart-r__rm:hover { color: var(--ink); }
.cart-r__name { font: 500 14px/1.3 var(--g); color: var(--ink); }
.cart-r__size { font: 400 10px/1 var(--m); letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.cart-r__bot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.qty { height: 32px; display: flex; align-items: center; border: 1px solid var(--l2); }
.qty button { width: 38px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; font: 400 16px/1 var(--g); }
.qty span { min-width: 22px; text-align: center; font: 500 12px/1 var(--m); }
.cart-r__sum { font: 600 14px/1 var(--g); }
.cart-f { padding: 18px 24px calc(18px + var(--safe-b)); display: grid; gap: 12px; }
.cart-f__tot { display: flex; justify-content: space-between; align-items: baseline; }
.cart-f__k { font: 400 10.5px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; }
.cart-f__v { font: 600 22px/1 var(--g); letter-spacing: -.02em; }
.cart-f__note { font: 400 10px/1.4 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--t4); }
.cart-f__btns { display: grid; gap: 6px; }
.cart-f__btns a { height: 48px; display: flex; align-items: center; justify-content: center; font: 500 10.5px/1 var(--m); text-transform: uppercase; }
.cart-f__go { background: var(--ink); color: #fff; letter-spacing: .14em; }
.cart-f__go:hover { background: var(--hov); color: #fff; }
.cart-f__page { border: 1px solid var(--l2); letter-spacing: .12em; }
.cart-f__page:hover { border-color: var(--ink); color: var(--ink); }

/* --- тосты --- */
.toasts { position: fixed; left: 50%; bottom: 20px; z-index: 90; transform: translateX(-50%); width: min(calc(100vw - 28px), 440px); display: grid; gap: 6px; pointer-events: none; }
.toast { pointer-events: auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--ink); color: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.toast__m { display: flex; align-items: center; gap: 10px; font: 400 13px/1.35 var(--g); }
.toast__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #7bd88f; }
.toast--error .toast__dot { background: #ff5a3c; }
.toast__act { flex: 0 0 auto; padding: 0 0 2px; border: 0; border-bottom: 1px solid #fff; background: none; color: #fff; cursor: pointer; font: 500 10px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; }

/* уведомления WooCommerce — рамкой в стиле «Проверьте:» макета (на любой странице: товар, каталог, корзина, кабинет) */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-error, .woocommerce-message, .woocommerce-info { list-style: none; margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--l2); background: #fff; font: 400 13px/1.45 var(--g); color: var(--ink); }
.woocommerce-error { border-color: var(--red); }
.woocommerce-message { border-color: var(--ink); }
.woocommerce-error li + li { margin-top: 6px; }
.woocommerce-error a, .woocommerce-message a, .woocommerce-info a { border-bottom: 1px solid currentColor; }
.n3n { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; }
.n3n__t { flex: 1 1 240px; min-width: 0; }
.n3n__t:empty { display: none; }
.n3n__a { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.woocommerce-error .button, .woocommerce-message .button, .woocommerce-info .button { padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--ink); background: none; font: 400 10.5px/1.3 var(--m); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }

/* --- состояния: загрузка, ошибка, нет связи, занятые кнопки (единый вид в стиле макета) --- */
.st { display: grid; gap: 14px; justify-items: start; }
.st__k { font: 400 10.5px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--t4); }
.st--err .st__k { color: var(--red); }
.st__t { font: 700 24px/1 var(--g); letter-spacing: -.03em; text-transform: uppercase; }
.st__s { max-width: 46ch; font: 400 14px/1.5 var(--g); color: var(--t2); }
.st__b { display: flex; flex-wrap: wrap; gap: 6px; }
.skel { display: block; background: linear-gradient(90deg, var(--bg2) 0, var(--l1) 50%, var(--bg2) 100%) 0 0 / 200% 100%; animation: n3skel 1.2s linear infinite; }
.skel-rows { display: grid; gap: 14px; }
.srch__res.is-wait { opacity: .5; transition: opacity .2s; }
.skel-rows .skel { height: 80px; }
.skel-rows .skel:nth-child(2) { opacity: .6; }
@keyframes n3skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.bar-wait { position: relative; display: block; width: 100%; height: 2px; margin-top: 4px; overflow: hidden; background: rgba(15, 15, 15, .1); }
.bar-wait::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--ink); animation: n3bar 1.1s var(--ease) infinite; }
@keyframes n3bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.cart-r--wait .thumb { aspect-ratio: 3/4; }
.is-busy { cursor: progress; }
button.is-busy, a.is-busy, .is-busy > button { pointer-events: none; opacity: .6; }
.card__quick-v.is-busy button { opacity: .45; }
.card__quick-v.is-busy button.is-wait { opacity: 1; animation: n3blink 1s linear infinite; }
@keyframes n3blink { 50% { opacity: .35; } }
/* Нет связи: полоса сверху в стиле бегущей строки макета (чёрная, моно, красная точка), пропадает при восстановлении. */
.netbar { position: fixed; left: 0; right: 0; top: 0; z-index: 95; height: 34px; padding: 0 var(--pad); display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--ink); color: #fff; font: 400 10.5px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; }
.netbar::before { content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #ff5a3c; }

/* --- попап Telegram-канала --- */
.drop { position: fixed; left: 20px; bottom: 20px; z-index: 70; width: 380px; padding: 22px 22px calc(22px + var(--safe-b)); display: grid; gap: 14px; background: #fff; border: 1px solid var(--ink); box-shadow: 0 24px 60px rgba(15, 15, 15, .16); transform: translateY(24px); opacity: 0; pointer-events: none; transition: transform .5s var(--ease), opacity .35s; }
.drop.is-on { transform: translateY(0); opacity: 1; pointer-events: auto; }
@media (max-width: 759.98px) { .drop { left: 0; right: 0; bottom: 0; width: auto; } }
.drop__h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.drop__k { font: 400 10px/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--t4); }
.drop__x { width: 40px; height: 40px; margin: -12px -12px -12px 0; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.drop__t { font: 800 clamp(24px, 2.4vw, 30px)/1.02 var(--g); letter-spacing: -.045em; text-transform: uppercase; }
.drop__s { font: 400 13.5px/1.5 var(--g); color: var(--t2); }
.drop__btns { display: grid; grid-template-columns: 1.6fr 1fr; gap: 4px; }
.drop__go { height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--ink); color: #fff; font: 500 10px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; }
.drop__go:hover { background: var(--hov); color: #fff; }
.drop__later { height: 46px; border: 1px solid var(--l2); background: #fff; cursor: pointer; font: 500 10px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.drop__later:hover { border-color: var(--ink); color: var(--ink); }

/* --- консьерж (перед подвалом) --- */
.conc { margin: clamp(80px, 10vw, 180px) var(--pad) 0; padding: clamp(28px, 4vw, 64px) 0 0; border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 28px clamp(32px, 5vw, 96px); align-items: end; }
.conc__l { display: grid; gap: 18px; }
.conc__t { margin: 0; font: 800 clamp(30px, 4.4vw, 72px)/1.18 var(--g); letter-spacing: -.05em; text-transform: uppercase; }
.conc__r { display: grid; gap: 20px; }
.conc__p { margin: 0; max-width: 46ch; font: 400 15px/1.55 var(--g); color: var(--t2); text-wrap: pretty; }
.conc__btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; max-width: 520px; }
.conc__btns a { height: 52px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--l2); font: 500 10px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.conc__btns a:hover { border-color: var(--ink); color: var(--ink); }
.conc__btns a.is-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.conc__btns a.is-dark:hover { background: var(--hov); border-color: var(--hov); color: #fff; }

/* --- подвал --- */
.ftr { margin-top: clamp(80px, 10vw, 180px); background: var(--ink); color: #fff; }
.has-conc .ftr { margin-top: clamp(64px, 8vw, 140px); }
.ftr__top { padding: clamp(48px, 6vw, 96px) var(--pad) clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px 48px; align-items: end; border-bottom: 1px solid #2a2724; }
.ftr__l { display: grid; gap: 18px; }
.ftr__k { font: 400 10.5px/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: #8a857f; }
.ftr__big { font: 700 clamp(30px, 4.4vw, 72px)/.95 var(--g); letter-spacing: -.05em; text-transform: uppercase; }
.ftr__r { display: grid; gap: 18px; justify-items: start; }
.ftr__meta { display: flex; flex-wrap: wrap; gap: 8px 28px; font: 400 10.5px/1.4 var(--m); letter-spacing: .12em; text-transform: uppercase; color: #c9c5c0; }
.ftr__meta a { color: #fff; }
.ftr__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ftr__btns a { height: 48px; padding: 0 22px; display: flex; align-items: center; gap: 10px; font: 500 10.5px/1 var(--m); letter-spacing: .14em; text-transform: uppercase; }
.ftr__tg { background: #fff; color: var(--ink); }
.ftr__tg:hover { background: var(--l3); color: var(--ink); }
.ftr__route { border: 1px solid var(--t1); color: #fff; }
.ftr__route:hover { border-color: #fff; color: #fff; }
.ftr__cols { padding: clamp(36px, 4vw, 56px) var(--pad); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 36px 24px; }
.ftr__col { display: grid; gap: 13px; align-content: start; }
.ftr__ct { margin-bottom: 6px; font: 400 10px/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--t2); }
.ftr__col a { justify-self: start; font: 400 10.5px/1.3 var(--m); letter-spacing: .1em; text-transform: uppercase; color: var(--l2); transition: color .2s; }
.ftr__col a:hover { color: #fff; }
.ftr__bot { padding: 18px var(--pad) calc(18px + var(--safe-b)); border-top: 1px solid #2a2724; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font: 400 10px/1.4 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--t2); }
.ftr__bot a { color: #8a857f; }
.ftr__bot a:hover { color: #fff; }
.ftr__legal { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.ftr__legal a { color: var(--t2); }

/* уведомления WooCommerce на страницах темы */
.n3-ads-note { margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--l2); font: 400 13px/1.5 var(--g); }

/* хлебные крошки (каталог, товар, страницы) */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 400 10.5px/1 var(--m); letter-spacing: .1em; text-transform: uppercase; color: var(--t4); }
.crumbs a { color: var(--t4); }
.crumbs a:hover { color: var(--ink); }
.crumbs__cur { color: var(--ink); }

/* Страницы: «Показать ещё · N», номера, «Показано X из Y» — каталог и Lookbook (parts/pager.php). */
.pager { margin-top: clamp(40px, 5vw, 72px); padding: 0 var(--pad); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pager__more { height: 48px; padding: 0 24px; display: flex; align-items: center; border: 1px solid var(--ink); background: #fff; color: var(--ink); font: 500 10.5px/1 var(--m); letter-spacing: .14em; text-transform: uppercase; }
.pager__more:hover { background: var(--ink); color: #fff; }
.pager__nums { display: flex; align-items: center; gap: 2px; }
.pager__n { width: 36px; height: 36px; display: grid; place-items: center; font: 500 10.5px/1 var(--m); color: var(--t4); }
.pager__n:hover { color: var(--ink); }
.pager__n.is-on { background: var(--ink); color: #fff; }
.pager__gap { width: 24px; text-align: center; font: 500 10.5px/1 var(--m); color: var(--t4); }
.pager__info { font: 400 10.5px/1 var(--m); letter-spacing: .1em; text-transform: uppercase; color: var(--t4); }

/* Стрелки галерей на телефоне (лента фото товара и образа — не в окне): по краям кадра, как кнопки .arr. 06.10.2026. */
/* Стрелки ленты фото на телефоне: 44 px — палец попадает с первого раза (07.10.2026, было 36). */
.garr { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; padding: 0; border: 0; background: rgba(255, 255, 255, .9); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.garr .ico { width: 20px; height: 20px; }
.garr--prev { left: 12px; } /* как артикул и счётчик на фото */
.garr--next { right: 12px; }
.garr:active { background: #fff; }