/* «Былғары» — свой вид поверх base.css: монохромная журнальная вёрстка, развороты с корешком, крупная антиква.
   Цвета и шрифты — в :root. Ширина колонок — --gut (поля страницы). */
:root {
  --paper: #eeebe5; --paper-2: #e4e0d8; --paper-3: #d9d4ca; --ink: #151311; --ink-2: #2b2825; --muted: #6f6a63;
  --gold: #b8955a; --lime: #dadd55; --water: #d3d8d6;
  --bg: var(--paper); --fg: var(--ink); --soft: var(--paper-2); --line: rgba(21, 19, 17, .15); --accent: var(--ink); --accent-ink: var(--paper);
  --card-bg: var(--paper-2); --sale: #8f2a1e; --ok: #3e5a2c; --radius: 0px; --radius-btn: 999px;
  --font-body: 'Ysabeau Office', 'Segoe UI', system-ui, sans-serif; --font-head: 'Noto Serif Display', Georgia, 'Times New Roman', serif;
  --mono: 'Martian Mono', ui-monospace, Menlo, monospace;
  --gut: clamp(16px, 2.8vw, 44px); --mast: 64px;
  --step--1: 13.5px; --step-0: 16.5px; --step-1: 18.5px; --step-2: 24px;
  --e-out: cubic-bezier(.16, 1, .3, 1); --e-io: cubic-bezier(.7, 0, .2, 1);
}
html { background: var(--paper); }
body { font-size: var(--step-0); letter-spacing: .005em; }
::selection { background: var(--ink); color: var(--paper); }
em { font-style: italic; }
.kicker { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 18px; color: var(--muted); }
.h2 { font: 300 clamp(36px, 4.4vw, 74px)/.98 var(--font-head); letter-spacing: -.02em; margin: 0 0 28px; }
.h2 em, .hero__t em, .story__h em, .im__t em { font-weight: 300; }
.link-u { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; text-decoration: none; font-weight: 600; font-size: var(--step--1); letter-spacing: .02em; }
.link-u::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform-origin: right; transition: transform .5s var(--e-out); }
.link-u:hover::after { transform: scaleX(0); }
.btn { min-height: 52px; padding: 0 26px; font-weight: 600; letter-spacing: .02em; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .4s var(--e-out); }
.btn:hover svg { transform: translateX(4px); }
.btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ink:hover { filter: none; background: var(--ink-2); }
.btn--ghost { border-color: var(--line); }
[data-magnet] { will-change: transform; transition: transform .5s var(--e-out), background .2s; }
.seam { height: 10px; background: repeating-linear-gradient(90deg, var(--ink) 0 12px, transparent 12px 21px); transform: skewX(-48deg); opacity: .5; mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); margin: 0 var(--gut); max-height: 3px; }
.seam--light { background: repeating-linear-gradient(90deg, var(--paper) 0 12px, transparent 12px 21px); opacity: .35; }

/* ——— прелоадер: шов прошивает логотип (CSS-анимация, 1,4 с, один раз за визит) ——— */
@property --n { syntax: '<integer>'; initial-value: 0; inherits: false; }
.pl { position: fixed; inset: 0; z-index: 200; background: var(--paper); display: grid; place-items: center; animation: pl-out .42s var(--e-io) 1s forwards; cursor: pointer; }
.pl-skip .pl, .pl.is-gone { display: none; }
.pl__in { width: min(1100px, 100% - 2 * var(--gut)); display: grid; gap: 18px; }
.pl__k { display: flex; justify-content: space-between; margin: 0; font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pl__word { position: relative; font: 300 clamp(64px, 15vw, 220px)/1 var(--font-head); letter-spacing: -.03em; text-align: center; }
.pl__ghost { display: block; color: transparent; -webkit-text-stroke: 1px rgba(21, 19, 17, .25); }
.pl__ink { position: absolute; inset: 0; color: var(--ink); clip-path: inset(0 100% 0 0); animation: pl-ink .86s cubic-bezier(.45, 0, .2, 1) .1s forwards; }
.pl__seamrow { position: relative; height: 16px; }
.pl__seam { position: absolute; left: 0; right: 0; top: 4px; height: 7px; background: repeating-linear-gradient(90deg, var(--ink) 0 13px, transparent 13px 22px); transform: skewX(-50deg); clip-path: inset(0 100% 0 0); animation: pl-ink .86s cubic-bezier(.45, 0, .2, 1) .1s forwards; }
.pl__needle { position: absolute; left: 0; top: -14px; width: 100%; height: 40px; animation: pl-needle .86s cubic-bezier(.45, 0, .2, 1) .1s both; }
.pl__needle i { position: absolute; left: 0; top: 0; width: 2px; height: 40px; background: linear-gradient(var(--muted), var(--ink)); border-radius: 2px; transform: rotate(18deg); animation: pl-pierce .12s ease-in-out infinite alternate; }
.pl__count { --n: 0; counter-reset: n var(--n); animation: pl-n .86s cubic-bezier(.45, 0, .2, 1) .1s forwards; font-variant-numeric: tabular-nums; }
.pl__count::after { content: counter(n) ' стежков'; }
@keyframes pl-ink { to { clip-path: inset(0 0 0 0); } }
@keyframes pl-needle { from { transform: translateX(0); } to { transform: translateX(calc(100% - 2px)); } }
@keyframes pl-pierce { to { transform: translateY(8px) rotate(18deg); } }
@keyframes pl-n { to { --n: 148; } }
@keyframes pl-out { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
.pl.is-out { animation: pl-out .38s var(--e-io) forwards; }
@media (prefers-reduced-motion: reduce) { .pl { display: none; } }

/* ——— шапка ——— */
.mast { position: sticky; top: 0; z-index: 50; height: var(--mast); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gut); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: transform .5s var(--e-out), border-color .3s; view-transition-name: mast; }
.mast.is-scrolled { border-bottom-color: var(--line); }
.mast.is-hidden { transform: translateY(-100%); }
.mast__l, .mast__r { display: flex; align-items: center; gap: 26px; }
.mast__r { justify-content: flex-end; gap: 22px; }
.mast__menu { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0; border: 0; background: none; font-weight: 600; font-size: var(--step--1); letter-spacing: .04em; }
.mast__burger { display: grid; gap: 6px; width: 26px; }
.mast__burger i { display: block; height: 1.5px; background: currentColor; transition: transform .5s var(--e-out); }
.mast__burger i:last-child { width: 62%; }
.mast__menu:hover .mast__burger i:last-child { transform: scaleX(1.6); transform-origin: left; }
.mast__nav { display: flex; gap: 22px; }
.mast__nav a, .mast__link { text-decoration: none; font-size: var(--step--1); font-weight: 600; letter-spacing: .03em; position: relative; }
.mast__nav a::after, .mast__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--e-out); }
.mast__nav a:hover::after, .mast__link:hover::after, .mast__nav a[aria-current]::after, .mast__link[aria-current]::after { transform: scaleX(1); }
.mast__logo { text-decoration: none; font: 400 30px/1 var(--font-head); letter-spacing: -.01em; position: relative; padding-bottom: 6px; }
.mast__logo::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 0; height: 2px; background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 10px); opacity: .55; transform: skewX(-45deg); }
.mast__ico, .mast__cart { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: var(--step--1); font-weight: 600; }
.mast__ico svg, .mast__bag svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mast__bag { display: none; }
.mast__cart sup { font: 400 10px var(--mono); min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--ink); color: var(--paper); display: inline-grid; place-items: center; top: 0; }

/* ——— меню-оверлей ——— */
.ov { position: fixed; inset: 0; z-index: 90; background: var(--ink); color: var(--paper); display: grid; grid-template-rows: auto 1fr; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--e-io), visibility 0s .7s; }
.ov.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .7s var(--e-io), visibility 0s; }
.ov__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--mast); padding: 0 var(--gut); border-bottom: 1px solid rgba(238, 235, 229, .14); }
.ov__k { font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.ov__logo { font: 400 30px var(--font-head); text-decoration: none; }
.ov__x { justify-self: end; border: 0; background: none; color: inherit; font-weight: 600; font-size: var(--step--1); height: 44px; letter-spacing: .04em; }
.ov__body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gut); padding: 3vh var(--gut) 4vh; min-height: 0; overflow: auto; }
.ov__nav { display: grid; align-content: center; }
.ov__nav a { display: flex; align-items: baseline; gap: 22px; text-decoration: none; padding: .5vh 0; border-bottom: 1px solid rgba(238, 235, 229, .1); overflow: hidden; }
.ov__n { font: 400 11px var(--mono); opacity: .5; width: 24px; font-style: normal; }
.ov__t { font: 300 clamp(34px, 5.6vh, 76px)/1.08 var(--font-head); letter-spacing: -.02em; transition: transform .6s var(--e-out), font-style 0s; display: inline-block; }
.ov__nav a:hover .ov__t, .ov__nav a:focus-visible .ov__t { transform: translateX(22px); font-style: italic; }
.ov.is-open .ov__nav a .ov__t { animation: ov-in .9s var(--e-out) both; animation-delay: calc(.12s + var(--i, 0) * 50ms); }
@keyframes ov-in { from { transform: translateY(105%); } }
.ov__side { display: grid; align-content: center; gap: 22px; }
.ov__pic { margin: 0; aspect-ratio: 4/5; max-height: 52vh; overflow: hidden; background: var(--ink-2); }
.ov__pic img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.ov__search { display: flex; border-bottom: 1px solid rgba(238, 235, 229, .4); }
.ov__search input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; color: var(--paper); font-size: var(--step-1); outline: none; }
.ov__search input::placeholder { color: rgba(238, 235, 229, .45); }
.ov__search button { border: 0; background: none; color: inherit; width: 44px; }
.ov__search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ov__c { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--step--1); opacity: .75; margin: 0; }
.ov__c a { text-decoration: none; }

/* ——— курсор (только мышь) ——— */
.cur { position: fixed; left: 0; top: 0; z-index: 120; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--paper); mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: width .35s var(--e-out), height .35s var(--e-out), margin .35s var(--e-out), opacity .3s; display: grid; place-items: center; }
.cur.is-on { opacity: 1; }
.cur.is-link { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.cur.is-label { width: 92px; height: 92px; margin: -46px 0 0 -46px; mix-blend-mode: normal; background: var(--ink); }
.cur__l { font: 400 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper); opacity: 0; transition: opacity .2s; }
.cur.is-label .cur__l { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cur { display: none; } }

/* ——— развороты ——— */
.spread { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line); }
.spread::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 90px; margin-left: -45px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .05) 46%, rgba(0, 0, 0, .12) 50%, rgba(255, 255, 255, .25) 51%, transparent); mix-blend-mode: multiply; z-index: 2; }
.page { position: relative; padding: 52px var(--gut) 76px; min-width: 0; margin: 0; }
.folio { position: absolute; left: var(--gut); right: var(--gut); bottom: 24px; display: flex; justify-content: space-between; font: 400 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.page--r .folio { flex-direction: row-reverse; }
.runhead { display: flex; gap: 24px; margin: 0; font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.runhead span + span::before { content: '— '; }

/* ——— первый экран ——— */
.hero { min-height: calc(100svh - var(--mast)); min-height: max(640px, calc(100svh - var(--mast))); border-top: 0; }
.hero__l { display: flex; flex-direction: column; justify-content: space-between; gap: 36px; }
.hero__t { font: 300 clamp(54px, 7.3vw, 136px)/.9 var(--font-head); letter-spacing: -.035em; margin: 0; max-width: 9.2em; }
.hero__t--s { font-size: clamp(48px, 6vw, 112px); }
.hero__low { display: grid; gap: 26px; max-width: 560px; }
.hero__lead { font-size: var(--step-1); line-height: 1.5; margin: 0; max-width: 34em; }
.hero__cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.facts { display: flex; gap: 34px; margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.facts div { display: grid; gap: 2px; }
.facts dt { order: 2; font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font: 300 46px/1 var(--font-head); }
.facts--col { flex-wrap: wrap; }
.hero__r { padding: 18px 18px 64px; }
.leather { position: relative; height: 100%; min-height: 520px; overflow: hidden; background: #6a3a1d url(../img/tex/leather-s.webp) center/cover; isolation: isolate; }
.leather__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s; }
.leather.is-gl .leather__gl { opacity: 1; }
.leather__fb { position: absolute; inset: 0; display: grid; place-items: center; font: 300 clamp(70px, 9vw, 170px)/1 var(--font-head); color: rgba(30, 14, 4, .55); text-shadow: 0 1px 1px rgba(255, 220, 180, .28), 0 -1px 1px rgba(0, 0, 0, .55); transition: opacity .4s; }
.leather.is-gl .leather__fb, .js .leather:not(.no-gl) .leather__fb { opacity: 0; }
.leather__ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 22px; color: #f3e6d4; background: linear-gradient(transparent, rgba(0, 0, 0, .35)); }
.leather__cap { margin: 0; font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.swatches { display: flex; gap: 8px; }
.sw { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: none; padding: 4px; display: grid; transition: transform .3s var(--e-out), border-color .3s; }
.sw i { border-radius: 50%; background: var(--c); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .35), inset 0 2px 3px rgba(255, 255, 255, .2); }
.sw span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sw:hover { transform: translateY(-3px); }
.sw[aria-pressed="true"] { border-color: #fff; border-width: 2px; padding: 3px; }

/* бегущая строка */
.band { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; background: var(--paper); }
.band__track { display: flex; gap: 28px; width: max-content; animation: band 46s linear infinite; font: 400 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.band__track b { font-weight: 400; color: var(--gold); }
@keyframes band { to { transform: translateX(-50%); } }

/* ——— содержание ——— */
.toc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: var(--gut); padding: 110px var(--gut) 120px; position: relative; }
.toc__head .h2 { position: sticky; top: calc(var(--mast) + 30px); max-width: 7em; }
.toc__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.toc__list a { display: grid; grid-template-columns: 54px minmax(0, 1.25fr) minmax(0, 1fr) 110px; gap: 18px; align-items: baseline; padding: 22px 0 20px; border-bottom: 1px solid var(--line); text-decoration: none; position: relative; }
.toc__n { font: 400 11px var(--mono); color: var(--muted); }
.toc__t { font: 300 clamp(32px, 3.6vw, 58px)/1 var(--font-head); letter-spacing: -.02em; transition: transform .6s var(--e-out); }
.toc__d { font-size: var(--step--1); color: var(--muted); }
.toc__c { font: 400 11px var(--mono); text-align: right; letter-spacing: .04em; }
.toc__list a::before { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--e-out); }
.toc__list a:hover::before { transform: scaleX(1); }
.toc__list a:hover .toc__t { transform: translateX(18px); font-style: italic; }
.toc__float { position: fixed; left: 0; top: 0; z-index: 30; width: 220px; margin: 0; aspect-ratio: 4/5; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: opacity .35s, transform .5s var(--e-out); overflow: hidden; }
.toc__float.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toc__float img { width: 100%; height: 100%; object-fit: cover; }

/* ——— выбор мастерской ——— */
.picks__fig { padding: 0; display: flex; flex-direction: column; }
.picks__ph { flex: 1; min-height: 640px; overflow: hidden; position: relative; }
.picks__ph img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: 50% 12%; will-change: transform; }
.picks__fig figcaption { padding: 18px var(--gut) 70px; font-size: var(--step--1); color: var(--muted); max-width: 520px; }
.picks__fig figcaption b { font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-right: 6px; }
.picks__r { display: flex; flex-direction: column; align-items: flex-start; }
.grid--picks { --cols: 2; width: 100%; gap: 34px 26px; margin-bottom: 26px; }

/* ——— карточка товара ——— */
.card { background: transparent; }
.card__media { background: var(--paper-2); position: relative; }
.card__media img { transition: transform 1.1s var(--e-out), opacity .4s; }
.card:hover .card__media img { transform: scale(1.05); }
.card__media::after { content: ''; position: absolute; inset: 0; background: var(--ink); opacity: 0; transition: opacity .5s; pointer-events: none; }
.card:hover .card__media::after { opacity: .06; }
.card__badge { left: 12px; top: 12px; background: var(--paper); color: var(--ink); font: 400 10px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 0; }
.card__fav { right: 10px; top: 10px; width: 38px; height: 38px; background: rgba(238, 235, 229, .9); }
.card__fav svg { width: 18px; height: 18px; }
.card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding-top: 14px; align-content: start; }
.card__name { grid-column: 1; grid-row: 1; font: 400 20px/1.15 var(--font-head); letter-spacing: -.01em; }
.card__name a:hover { text-decoration: none; font-style: italic; }
.card__price { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-end; gap: 0; font: 400 13px/1.5 var(--mono); }
.card__price b { font-weight: 400; }
.card__price s { font-size: 11px; }
.card__meta { grid-column: 1 / -1; font-size: 13px; }
.card__mono { grid-column: 1 / -1; margin: 0; font: 400 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--gold); }
.card__add { grid-column: 1 / -1; justify-self: start; min-height: 34px; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: .03em; position: relative; }
.card__add::before { content: '+ '; }
.card__add::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(.18); transform-origin: left; transition: transform .5s var(--e-out); }
.card:hover .card__add::after, .card__add:focus-visible::after { transform: scaleX(1); }
.card__add:hover { filter: none; }
.card.is-out .card__add::before { content: ''; }

/* ——— история: пять этапов ——— */
.story { position: relative; height: 330vh; border-top: 1px solid var(--line); }
.story__pin { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; }
.story__l { padding: calc(var(--mast) + 20px) var(--gut) 48px; display: flex; flex-direction: column; }
.story__h { font: 300 clamp(40px, 4.6vw, 80px)/.95 var(--font-head); letter-spacing: -.025em; margin: 0 0 auto; max-width: 8em; }
.story__steps { list-style: none; margin: 30px 0 0; padding: 0 0 150px; position: relative; display: grid; }
.story__st { display: flex; align-items: baseline; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); transition: color .4s; }
.story__st.is-on { color: var(--ink); }
.story__n { font: 400 11px var(--mono); width: 26px; }
.story__t { font: 300 clamp(24px, 2.2vw, 36px)/1.1 var(--font-head); font-weight: 300; transition: transform .6s var(--e-out); }
.story__st.is-on .story__t { transform: translateX(14px); font-style: italic; }
.story__d { position: absolute; left: 44px; right: 0; bottom: 0; height: 130px; margin: 0; color: var(--ink); font-size: var(--step-0); line-height: 1.55; max-width: 34em; opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .6s var(--e-out); pointer-events: none; }
.story__st.is-on .story__d { opacity: 1; transform: none; }
.story__ph { display: none; }
.story__bar { height: 2px; background: var(--line); }
.story__bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.story__r { position: relative; margin: calc(var(--mast) + 20px) var(--gut) 48px 0; }
.story__pics { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
.story__pics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transform: scale(1.12); transition: clip-path 1s var(--e-io), transform 1.6s var(--e-out); }
.story__pics img.is-on, .story__pics img.was { clip-path: inset(0 0 0 0); transform: scale(1); }
.story__pics img.was { transition: none; }
.story__seam { position: absolute; left: -24px; top: 0; width: 12px; height: 100%; overflow: visible; }
.story__thread { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 12 9; fill: none; vector-effect: non-scaling-stroke; }
.story__seam { clip-path: inset(0 0 calc(100% - var(--p, 0) * 100%) 0); }
.story__big { position: absolute; right: 22px; bottom: 16px; color: var(--paper); font: 300 clamp(80px, 11vw, 190px)/.8 var(--font-head); letter-spacing: -.04em; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); display: flex; align-items: flex-end; gap: 6px; }
.story__big small { font: 400 12px var(--mono); letter-spacing: .06em; padding-bottom: 10px; }

/* ——— именная вещь (тизер) ——— */
.monop { background: var(--paper); }
.monop__l { display: grid; gap: 26px; align-content: start; }
.leather--mono { min-height: 0; height: clamp(320px, 38vw, 520px); background-image: url(../img/tex/leather-dark-s.webp); }
.leather--mono .leather__fb { color: rgba(0, 0, 0, .6); font-family: var(--font-head); }
.monop__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: end; }
.monop__f { display: grid; gap: 6px; }
.monop__f span, .im__letters + .im__chk span { font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.monop__f input { height: 64px; border: 0; border-bottom: 1px solid var(--ink); background: none; font: 300 44px/1 var(--font-head); letter-spacing: .25em; text-transform: uppercase; outline: none; min-width: 0; width: 100%; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span, .seg button { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 0; background: none; transition: background .3s, color .3s; white-space: nowrap; }
.seg input:checked + span, .seg button.is-on { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.monop__r { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.monop__lead { max-width: 32em; font-size: var(--step-1); }
.monop__steps { list-style: none; padding: 0; margin: 10px 0 34px; width: 100%; max-width: 560px; border-top: 1px solid var(--line); }
.monop__steps li { display: grid; grid-template-columns: 54px 1fr; padding: 14px 0; border-bottom: 1px solid var(--line); }
.monop__steps b { font: 400 11px var(--mono); color: var(--muted); padding-top: 4px; }

/* ——— манифест ——— */
.mani { padding: 150px var(--gut) 140px; border-top: 1px solid var(--line); }
.mani__t { font: 300 clamp(34px, 4.6vw, 82px)/1.06 var(--font-head); letter-spacing: -.025em; margin: 0; max-width: 17em; text-indent: 2.4em; }
.mani__t .w { font-style: normal; opacity: .16; transition: opacity .35s; }
.mani__t .w.is-on { opacity: 1; }
.mani__sign { margin: 34px 0 0 auto; width: max-content; max-width: 100%; font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ——— лайм ——— */
.acid__fig { padding: 0; overflow: hidden; min-height: 620px; }
.acid__fig img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
.acid__r { background: var(--lime); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.acid__r .kicker, .acid__r .folio { color: rgba(21, 19, 17, .6); }
.acid__t { font: 300 clamp(48px, 6.4vw, 118px)/.9 var(--font-head); letter-spacing: -.035em; margin: 0 0 26px; }
.acid__d { max-width: 30em; font-size: var(--step-1); }
.acid__price { font: 300 52px/1 var(--font-head); margin: 10px 0 28px; }
.acid__price small { font: 400 12px var(--mono); }
.acid__cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.spread.acid::after { mix-blend-mode: multiply; }

/* ——— ряд товаров ——— */
.row { padding: 110px var(--gut) 100px; border-top: 1px solid var(--line); }
.row__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 30px; margin-bottom: 40px; }
.row__head .kicker { grid-column: 1 / -1; }
.row__head .h2 { margin: 0; }
.grid--row { --cols: 4; gap: 40px 26px; }

/* ——— уход ——— */
.care { padding: 110px var(--gut) 110px; border-top: 1px solid var(--line); }
.care__head { max-width: 900px; margin-bottom: 50px; }
.care__list { list-style: none; padding: 0; margin: 0 0 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.care__list--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.care__list li { padding: 28px 28px 30px 0; display: grid; gap: 10px; align-content: start; }
.care__list li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.care__n { font: italic 300 74px/1 var(--font-head); color: var(--paper-3); -webkit-text-stroke: 1px var(--ink); }
.care__list b { font: 400 24px/1.15 var(--font-head); }
.care__list p { margin: 0; color: var(--ink-2); }

/* ——— мастерская на карте ——— */
.visit__l { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.visit__l > p:not(.kicker) { max-width: 32em; font-size: var(--step-1); }
.visit__dl { margin: 10px 0 26px; width: 100%; max-width: 540px; border-top: 1px solid var(--line); }
.visit__dl div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.visit__dl dt { font-weight: 600; }
.visit__dl dd { margin: 0; color: var(--muted); text-align: right; }
.visit__r { display: grid; align-content: center; gap: 18px; justify-items: start; }
.map { width: 100%; height: auto; display: block; }
.map__route { stroke-dashoffset: 0; }

/* ——— подвал ——— */
.foot { background: var(--ink); color: var(--paper); padding: 40px 0 26px; overflow: hidden; }
.foot .seam { margin-bottom: 30px; }
.foot__word { font: 300 clamp(96px, 21vw, 380px)/.9 var(--font-head); letter-spacing: -.045em; color: #181614; text-shadow: 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(0, 0, 0, 0); padding: 0 var(--gut); white-space: nowrap; transition: text-shadow 1.6s var(--e-out), color 1.6s var(--e-out); }
.foot__word.is-in { color: #1c1a18; text-shadow: 0 2px 1px rgba(255, 255, 255, .08), 0 -2px 2px rgba(0, 0, 0, .95); }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 30px var(--gut); padding: 40px var(--gut) 34px; border-top: 1px solid rgba(238, 235, 229, .12); margin-top: 34px; }
.foot__h { font: 400 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .55; margin-bottom: 14px; }
.foot__col p { opacity: .85; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { text-decoration: none; }
.foot ul a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__legal { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px var(--gut) 0; margin: 0; border-top: 1px solid rgba(238, 235, 229, .12); font-size: 12.5px; opacity: .6; }
.foot__made { margin: 0; padding: 16px var(--gut) 0; }
.foot__made a { position: relative; display: inline-flex; align-items: center; min-height: 32px; font: 400 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); opacity: .55; transition: opacity .3s; }
.foot__made a::before { content: ''; width: 18px; height: 2px; margin-right: 10px; background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); transform: skewX(-45deg); }
.foot__made a::after { content: ''; position: absolute; left: 28px; right: 0; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--e-out); }
.foot__made a:hover { opacity: 1; }
.foot__made a:hover::after { transform: scaleX(1); }

/* ——— каталог ——— */
.cat { padding: 0 var(--gut) 110px; }
.cat__head { padding: 6px 0 24px; }
.cat__title { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.cat__title h1 { font: 300 clamp(60px, 9vw, 168px)/.88 var(--font-head); letter-spacing: -.04em; }
.cat__count { margin: 0; font: 400 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cat__lead { margin: 18px 0 0; max-width: 40em; color: var(--muted); }
.cat__index { counter-reset: ci; display: flex; flex-wrap: wrap; gap: 4px 30px; padding: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.cat__index .chip { min-height: 36px; padding: 0; border: 0; background: none; border-radius: 0; font: 300 22px/1 var(--font-head); color: var(--muted); counter-increment: ci; transition: color .3s; }
.cat__index .chip::before { content: counter(ci, decimal-leading-zero); font: 400 10px var(--mono); margin-right: 8px; align-self: flex-start; padding-top: 4px; }
.cat__index .chip:hover { color: var(--ink); }
.cat__index .chip.is-on { color: var(--ink); background: none; font-style: italic; }
.cat__tools { display: flex; align-items: center; gap: 30px; padding: 16px 0 34px; flex-wrap: wrap; }
.cat__q { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; max-width: 520px; border-bottom: 1px solid var(--ink); }
.cat__q span, .cat__sort span { font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cat__q input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; font-size: var(--step-1); outline: none; }
.cat__fbtn { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 999px; background: none; font-weight: 600; font-size: 13.5px; transition: background .3s, color .3s; }
.cat__fbtn i { font-style: normal; font-size: 18px; line-height: 1; transition: transform .4s var(--e-out); }
.cat__fbtn:hover { background: var(--ink); color: var(--paper); }
.cat__fbtn:hover i { transform: rotate(90deg); }
.cat__sort { display: flex; align-items: center; gap: 10px; }
.cat__sort select { height: 44px; border: 0; border-bottom: 1px solid var(--line); background: none; font-weight: 600; padding: 0 4px; }
.grid--cat { --cols: 4; gap: 56px 26px; grid-auto-flow: dense; counter-reset: card; }
.grid--cat .card { counter-increment: card; }
.grid--cat .card__body::before { content: '№ ' counter(card, decimal-leading-zero); grid-column: 1 / -1; grid-row: 1; font: 400 10px var(--mono); letter-spacing: .06em; color: var(--muted); }
.grid--cat .card__name, .grid--cat .card__price { grid-row: 2; }
.grid--cat .card:nth-child(10n+1) .card__body, .grid--cat .card:nth-child(10n+7) .card__body { flex: none; }
.grid--cat .card:nth-child(10n+1), .grid--cat .card:nth-child(10n+7) { grid-column: span 2; grid-row: span 2; }
.grid--cat .card:nth-child(10n+1) .card__media, .grid--cat .card:nth-child(10n+7) .card__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 320px; position: relative; }
.grid--cat .card:nth-child(10n+1) .card__media img, .grid--cat .card:nth-child(10n+7) .card__media img { position: absolute; inset: 0; }
.grid--cat .card:nth-child(10n+1) .card__name, .grid--cat .card:nth-child(10n+7) .card__name { font-size: 32px; }
/* фильтры — выезжающая панель на любой ширине */
.filters { position: fixed; top: 0; left: 0; bottom: 0; width: min(420px, 100%); background: var(--paper); z-index: 70; padding: 0 28px 20px; overflow: auto; transform: translateX(-100%); visibility: hidden; transition: transform .55s var(--e-io), visibility 0s .55s; display: block; }
.filters.is-open { transform: none; visibility: visible; transition: transform .55s var(--e-io), visibility 0s; }
.filters__top { display: flex; margin: 0 -28px 18px; padding: 12px 16px 12px 28px; }
.filters__title { font: 300 30px var(--font-head); }
.filters__foot { position: sticky; bottom: 0; background: var(--paper); padding: 12px 0; display: flex; gap: 8px; }
.filters__foot .filters__apply { display: inline-flex; flex: 1; }
.fgroup legend { font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; }
.fopt { font-size: 15px; }
.fopt input { accent-color: var(--ink); }
.cat-main { min-width: 0; }

/* ——— карточка товара ——— */
.prod { width: auto; margin: 0; padding: 0 var(--gut); }
.product { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: calc(var(--gut) * 1.6); padding: 8px 0 70px; }
.gallery { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: start; }
.gallery__main { grid-column: 2; grid-row: 1; background: var(--paper-2); cursor: zoom-in; }
.gallery__thumbs { grid-column: 1; grid-row: 1; flex-direction: column; margin: 0; }
.gallery__thumbs button { width: 76px; border-color: transparent; transition: opacity .3s; opacity: .55; }
.gallery__thumbs button[aria-current], .gallery__thumbs button:hover { opacity: 1; border-color: var(--ink); }
.gallery:not(:has(.gallery__thumbs)) { grid-template-columns: minmax(0, 1fr); }
.gallery:not(:has(.gallery__thumbs)) .gallery__main { grid-column: 1; }
.gallery__nav { background: rgba(238, 235, 229, .9); }
.loupe { position: absolute; z-index: 5; width: 230px; height: 230px; border-radius: 50%; pointer-events: none; border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 18px 50px rgba(0, 0, 0, .3), inset 0 0 0 6px rgba(255, 255, 255, .12); background-repeat: no-repeat; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .35s var(--e-out); left: 0; top: 0; margin: -115px 0 0 -115px; }
.loupe.is-on { opacity: 1; transform: scale(1); }
.loupe-btn { position: absolute; right: 12px; bottom: 12px; z-index: 4; display: none; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(238, 235, 229, .92); font-size: 12.5px; font-weight: 600; }
.loupe-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.product__buy { top: calc(var(--mast) + 20px); gap: 16px; }
.pbadge { border-radius: 0; background: var(--paper-2); color: var(--ink); font: 400 10.5px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ptitle { font: 300 clamp(40px, 4.2vw, 70px)/.95 var(--font-head); letter-spacing: -.03em; }
.pmeta { margin: 0; }
.pprice { font: 300 36px/1 var(--font-head); }
.pprice b { font-weight: 300; }
.pvars__l { font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pvars__l b { font: 600 14px var(--font-body); text-transform: none; letter-spacing: 0; }
.pvars__list .chip { border-color: var(--line); min-height: 40px; padding: 0 14px 0 8px; font-size: 13.5px; }
.pvars__list .chip:not(:has(.sw)) { padding: 0 14px; }
.pvars__list .chip.is-on { background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pvars__list .chip .sw { width: 22px; height: 22px; padding: 0; border: 0; }
[data-pv^="m-"], [data-cv^="m-"] { display: none !important; }
.pbuy .btn { background: var(--ink); color: var(--paper); }
.pfav { border-radius: 50%; }
.stepper { border-radius: 999px; }
.pfacts { border-top: 1px solid var(--line); }
.pfacts li::before { border-color: var(--ink); }
.pmono { display: grid; grid-template-columns: 74px 1fr; gap: 16px; align-items: center; padding: 14px; background: var(--ink); color: var(--paper); text-decoration: none; transition: transform .5s var(--e-out); }
.pmono:hover { transform: translateY(-3px); }
.pmono__m { display: grid; place-items: center; height: 74px; background: #2b1c12 url(../img/tex/leather-s.webp) center/cover; font: 400 22px var(--font-head); color: #e3c27c; text-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 -1px 0 rgba(255, 240, 200, .4); }
.pmono b { display: block; font: 400 21px var(--font-head); }
.pmono small { display: block; opacity: .7; font-size: 13px; }
.pinfo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-top: 1px solid var(--ink); gap: calc(var(--gut) * 1.6); }
.pinfo h2 { font: 400 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pinfo__col:first-child p { font-size: var(--step-1); max-width: 36em; }
.pinfo__col:first-child p:first-of-type::first-letter { float: left; font: 300 4.6em/.8 var(--font-head); margin: .06em .1em 0 0; }
.specs div { grid-template-columns: 40% 1fr; font-size: 14.5px; }
.specs dt { font: 400 10.5px/2 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.related__t { font: 300 clamp(34px, 3.6vw, 58px)/1 var(--font-head); letter-spacing: -.02em; }
.related .grid { --cols: 4; gap: 40px 26px; }

/* ——— корзина, ящик, оформление ——— */
.crumbs { font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 22px 0 12px; }
.page-title { font: 300 clamp(48px, 7vw, 120px)/.9 var(--font-head); letter-spacing: -.035em; margin: 6px 0 34px; }
.drawer { background: var(--paper); }
.drawer__title, .filters__title, .checkout__t, .cbox legend { font-family: var(--font-head); font-weight: 300; }
.drawer__title { font-size: 34px; }
.drawer .btn--block, .cartpage__side .btn--block, .checkout__side .btn { background: var(--ink); color: var(--paper); }
.line__name { font: 400 19px/1.2 var(--font-head); }
.line__var { font-size: 12.5px; }
.line__img { position: relative; }
.mono-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 3px 6px; background: rgba(21, 19, 17, .78); font: 400 12px/1.1 var(--font-head); letter-spacing: .08em; white-space: nowrap; pointer-events: none; }
.mono-tag--gold { color: #e5c27a; } .mono-tag--silver { color: #e2e4e8; } .mono-tag--blind { color: #c9b8a6; }
.mono-tag.ff-script { font-family: 'Great Vibes', cursive; font-size: 15px; letter-spacing: 0; }
.mono-tag.ff-sans { font-family: var(--font-body); font-weight: 600; letter-spacing: .14em; font-size: 10px; }
.cartpage__side, .checkout__side { background: var(--paper-2); padding: 28px; }
.cartpage__side::before, .checkout__side::before { content: ''; display: block; height: 3px; margin: -10px 0 4px; background: repeating-linear-gradient(90deg, var(--ink) 0 9px, transparent 9px 15px); transform: skewX(-45deg); opacity: .45; }
.cside-note { margin: 0; font-size: 13px; color: var(--muted); }
.sum__total { font-family: var(--font-head); font-weight: 400; font-size: 22px; }
.cbox legend { font-size: 30px; }
.opt { border-color: var(--line); }
.opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.field input, .field textarea, .promo input { border-color: var(--line); background: var(--paper); border-radius: 0; }
.promo .btn { border-radius: 0; }
.field input:focus, .field textarea:focus { border-color: var(--ink); outline: none; }
.done { max-width: 760px; position: relative; padding-top: 10px; }
.done__k { color: var(--ink); font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.done__t { font: 300 clamp(44px, 6vw, 96px)/.92 var(--font-head); letter-spacing: -.03em; max-width: 11em; }
.done .btn { background: var(--ink); color: var(--paper); }
.seal { width: 150px; height: 150px; margin: 0 0 8px; }
.seal__ring { font-family: var(--mono); font-size: 9.5px; letter-spacing: 2.6px; text-transform: uppercase; }
.seal--anim { animation: seal 1s var(--e-out) both; }
@keyframes seal { 0% { transform: scale(1.6) rotate(-14deg); opacity: 0; } 45% { transform: scale(.94) rotate(2deg); opacity: 1; } 100% { transform: none; } }
.toast { background: var(--ink); color: var(--paper); border-radius: 999px; }
.lost__code { color: var(--paper-3); font-family: var(--font-head); font-weight: 300; }
.sec-t { font: 300 clamp(32px, 3.4vw, 54px)/1 var(--font-head); }
.narrow { padding-bottom: 80px; }
.credits a { text-underline-offset: 3px; }

/* ——— «Именная вещь» ——— */
.im { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; border-top: 1px solid var(--line); }
.im__stage { position: sticky; top: var(--mast); height: calc(100vh - var(--mast)); min-height: 560px; display: grid; grid-template-rows: 1fr auto; background: var(--paper-2); border-right: 1px solid var(--line); }
.im__view { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.im__view::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 45%, rgba(255, 255, 255, .55), transparent 70%); pointer-events: none; }
.im__svg { position: relative; width: min(100%, 72vh); aspect-ratio: 1; transition: opacity .5s, transform .8s var(--e-out); }
.im__svg svg { width: 100%; height: 100%; display: block; overflow: visible; }
.im__svg.is-swap { opacity: 0; transform: translateY(14px) scale(.97); }
.im__gl { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); opacity: 0; pointer-events: none; transition: opacity .5s; background: #2a1a10; }
.im[data-v="close"] .im__gl { opacity: 1; pointer-events: auto; }
.im[data-v="close"] .im__svg { opacity: 0; }
.im[data-v="close"] .im__meta { z-index: 2; color: rgba(243, 230, 212, .8); }
.im__plate { position: absolute; left: 0; top: 0; width: 10px; height: 10px; pointer-events: none; opacity: 0; border-radius: 6px; background: linear-gradient(135deg, #f1dca5, #a57d33 45%, #e8cc87 70%, #6f5020); box-shadow: 0 30px 40px rgba(0, 0, 0, .35); }
.im__meta { position: absolute; left: 22px; right: 22px; top: 18px; display: flex; justify-content: space-between; font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.im__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 22px; border-top: 1px solid var(--line); }
.seg--sm button { height: 34px; font-size: 12.5px; }
.im__hint { margin: 0; font-size: 12.5px; color: var(--muted); text-align: right; }
.mk-dot { cursor: pointer; }
.mk-dot__p { fill: var(--ink); opacity: .14; transform-box: fill-box; transform-origin: center; animation: dot 2s ease-out infinite; }
.mk-dot__c { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.mk-dot:hover .mk-dot__c { fill: var(--ink); }
@keyframes dot { from { transform: scale(.6); opacity: .35; } to { transform: scale(2.2); opacity: 0; } }
.im__panel { padding: 0 var(--gut) 60px; min-width: 0; }
.im__head { padding-bottom: 26px; }
.im__t { font: 300 clamp(52px, 6vw, 108px)/.9 var(--font-head); letter-spacing: -.035em; margin: 0 0 18px; }
.im__lead { max-width: 30em; color: var(--ink-2); margin: 0; }
.im__step { border: 0; margin: 0; padding: 22px 0 26px; border-top: 1px solid var(--line); min-width: 0; }
.im__step legend { display: flex; align-items: baseline; gap: 14px; padding: 0; margin-bottom: 16px; font: 400 26px/1 var(--font-head); float: left; width: 100%; }
.im__step legend + * { clear: both; }
.im__step legend i { font: 400 10.5px var(--mono); font-style: normal; color: var(--muted); }
.im__step legend b { margin-left: auto; font: 400 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.im__models { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.im__model { position: relative; cursor: pointer; display: grid; gap: 6px; }
.im__model input, .im__font input, .im__tc input, .im__col input, .im__pl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.im__model img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--paper-2); outline: 1px solid transparent; outline-offset: 3px; transition: outline-color .3s, transform .5s var(--e-out); }
.im__model:hover img { transform: translateY(-3px); }
.im__model input:checked ~ img { outline-color: var(--ink); }
.im__model input:focus-visible ~ img { outline: 2px solid var(--ink); }
.im__model span { font-size: 12.5px; line-height: 1.25; }
.im__model small { display: block; font: 400 10px var(--mono); color: var(--muted); }
.im__colors { display: flex; flex-wrap: wrap; gap: 10px; }
.im__col { position: relative; width: 44px; height: 44px; border-radius: 50%; padding: 4px; border: 1px solid transparent; transition: border-color .3s, transform .3s var(--e-out); }
.im__col:hover { transform: translateY(-2px); }
.im__col i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c); box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .35), inset 0 2px 3px rgba(255, 255, 255, .25); }
.im__col:has(input:checked) { border-color: var(--ink); }
.im__col:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.im__letters { display: block; }
.im__letters input { width: 100%; height: 92px; border: 0; border-bottom: 1px solid var(--ink); background: none; font: 300 64px/1 var(--font-head); letter-spacing: .3em; text-transform: uppercase; text-align: center; outline: none; padding: 0 0 0 .3em; }
.im__letters input[aria-invalid="true"] { border-color: var(--sale); box-shadow: none; }
.im__chk { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; cursor: pointer; }
.im__chk input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
.im__note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.im__note.is-err { color: var(--sale); }
.im__fonts, .im__tech { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.im__font, .im__tc { position: relative; cursor: pointer; }
.im__font span, .im__tc span { display: grid; gap: 4px; justify-items: start; padding: 14px; border: 1px solid var(--line); height: 100%; transition: border-color .3s, background .3s; }
.im__font b { font-weight: 400; font-size: 40px; line-height: 1.1; }
.im__font small, .im__tc small { font: 400 10.5px var(--mono); letter-spacing: .04em; color: var(--muted); }
.im__font input:checked + span, .im__tc input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--paper); }
.im__font input:focus-visible + span, .im__tc input:focus-visible + span, .im__pl input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.ff-serif { font-family: var(--font-head); }
.ff-sans { font-family: var(--font-body); font-weight: 600 !important; letter-spacing: .12em; font-size: 30px !important; }
.ff-script { font-family: 'Great Vibes', cursive; }
.im__places { display: flex; flex-wrap: wrap; gap: 8px; }
.im__pl { position: relative; }
.im__pl span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; font-weight: 600; transition: background .3s, color .3s; }
.im__pl input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.im__tc b { font-weight: 600; font-size: 14px; }
.tc { width: 30px; height: 30px; border-radius: 50%; display: block; margin-bottom: 4px; }
.tc--gold { background: linear-gradient(135deg, #f6e2a8, #b0852f 45%, #f0d48c 65%, #7a5718); }
.tc--silver { background: linear-gradient(135deg, #fbfbfb, #9fa2a6 45%, #e8eaec 65%, #66696d); }
.tc--blind { background: #6b4022; box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .5), inset -1px -1px 2px rgba(255, 220, 180, .35); }
.im__sum { margin-top: 6px; padding: 24px; background: var(--ink); color: var(--paper); display: grid; gap: 14px; }
.im__sum dl { margin: 0; display: grid; gap: 6px; }
.im__sum dl div { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; }
.im__sum dt { opacity: .7; }
.im__sum dd { margin: 0; font-family: var(--mono); font-size: 12.5px; }
.im__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid rgba(238, 235, 229, .2); }
.im__total span { font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.im__total b { font: 300 46px/1 var(--font-head); }
.im__add { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.im__add:hover { filter: none; background: #fff; }
.im__sum .small { color: rgba(238, 235, 229, .6); margin: 0; }
.im__done { margin: 0; font-size: 13.5px; color: #cfe0b8; }

/* ——— мастерская, доставка ——— */
.ahero__l { display: flex; flex-direction: column; gap: 28px; }
.ahero__lead { font-size: var(--step-1); max-width: 32em; margin: 0; }
.ahero__fig, .craft__fig, .mk__fig { padding: 0; overflow: hidden; min-height: 560px; }
.ahero__fig img, .craft__fig img, .mk__fig img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
.ahero__fig .folio, .craft__fig .folio, .mk__fig .folio { color: rgba(255, 255, 255, .8); z-index: 2; }
.leathers { padding: 110px var(--gut); }
.leathers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.lt { display: grid; gap: 10px; align-content: start; }
.lt__sw { aspect-ratio: 4/3; background: var(--img) center/cover; position: relative; overflow: hidden; }
.lt__sw::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 30%) var(--my, 30%), rgba(255, 255, 255, .28), transparent 45%); mix-blend-mode: soft-light; transition: opacity .3s; }
.lt__n { margin: 8px 0 0; font: 400 10.5px var(--mono); color: var(--muted); }
.lt h3 { font: 400 28px/1.1 var(--font-head); }
.lt p:last-child { margin: 0; color: var(--ink-2); }
.craft__r, .mk__l { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.craft__r > p:not(.kicker), .mk__l > p:not(.kicker):not(.acid__price) { max-width: 32em; font-size: var(--step-1); }
.dhero { padding: 0 var(--gut) 50px; }
.dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 var(--gut) 60px; gap: 0; border-top: 1px solid var(--ink); margin: 0 var(--gut); padding-left: 0; padding-right: 0; }
.dcard { padding: 30px 28px 30px 0; display: grid; gap: 8px; align-content: start; }
.dcard + .dcard { padding-left: 28px; border-left: 1px solid var(--line); }
.dcard__n { margin: 0; font: 400 10.5px var(--mono); color: var(--muted); }
.dcard h2 { font: 400 32px/1.05 var(--font-head); }
.dcard__p { margin: 0; font: 400 12.5px var(--mono); }
.dtext { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); padding: 70px var(--gut); }
.dlist { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 14px; }
.dlist li { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dlist b { display: block; font: 400 21px var(--font-head); margin-bottom: 2px; }
.faq { padding: 30px var(--gut) 110px; max-width: 1100px; }
.faq__i { border-top: 1px solid var(--line); }
.faq__i:last-child { border-bottom: 1px solid var(--line); }
.faq__i summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font: 400 clamp(21px, 2vw, 28px)/1.2 var(--font-head); position: relative; }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after { content: '+'; position: absolute; right: 4px; top: 18px; font: 300 30px var(--font-head); transition: transform .4s var(--e-out); }
.faq__i[open] summary::after { transform: rotate(45deg); }
.faq__i p { max-width: 44em; padding: 0 0 22px; margin: 0; color: var(--ink-2); }

/* ——— появление (скрываем только с JS) ——— */
.ln { display: inline-block; vertical-align: top; overflow: hidden; padding: .1em .07em .12em; margin: -.1em -.07em -.12em; font-style: inherit; }
.ln__in { display: inline-block; font-style: inherit; }
.js [data-split].sp .ln__in { transform: translateY(105%); transition: transform 1.1s var(--e-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-split].sp.is-in .ln__in { transform: none; }
.js [data-rise] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--e-out), transform 1.1s var(--e-out); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-rise].is-in { opacity: 1; transform: none; }
.js .grid .card[data-reveal] { transform: translateY(34px); }

/* ——— переходы между страницами ——— */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .6s var(--e-io) both; }
::view-transition-new(root) { animation: vt-in .8s var(--e-io) both; }
::view-transition-group(mast) { animation-duration: 0s; }
::view-transition-old(mast), ::view-transition-new(mast) { animation: none; }
::view-transition-group(pimg) { animation-duration: .7s; animation-timing-function: var(--e-io); }
@keyframes vt-out { to { transform: translateY(-5%) scale(.985); opacity: .4; } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .band__track { animation: none; }
  .js [data-split].sp .ln__in, .js [data-rise] { transform: none !important; opacity: 1 !important; transition: none !important; }
  .mani__t .w { opacity: 1; }
  .leather__gl, .leather__fb, .im__svg { transition: none !important; }
  .story__pics img, .story__d, .card__media img { transition: none !important; }
  .mk-dot__p { animation: none; }
  .ov.is-open .ov__nav a .ov__t { animation: none; }
}

/* ——— планшет ——— */
@media (max-width: 1180px) {
  .grid--cat, .grid--row, .related .grid { --cols: 3; }
  .grid--cat .card:nth-child(10n+7) { grid-column: span 1; grid-row: span 1; }
  .grid--cat .card:nth-child(10n+7) .card__media { aspect-ratio: 4/5; min-height: 0; flex: none; }
  .grid--cat .card:nth-child(10n+7) .card__media img { position: static; }
  .grid--cat .card:nth-child(10n+7) .card__name { font-size: 20px; }
  .mast__nav a:nth-child(2), .mast__link { display: none; }
  .toc { grid-template-columns: 1fr; }
  .toc__head .h2 { position: static; max-width: none; }
  .care__list--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .care__list--5 li:nth-child(4) { border-left: 0; padding-left: 0; }
  .im__models { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --mast: 56px; }
  .mast__nav, .mast__mt, .mast__ct, .mast__link { display: none; }
  .mast__bag { display: inline-flex; }
  .mast__logo { font-size: 25px; }
  .mast__l, .mast__r { gap: 10px; }
  .mast__cart { position: relative; width: 40px; height: 44px; justify-content: center; }
  .mast__cart sup { position: absolute; right: 0; top: 4px; }
  .mast__ico { width: 40px; height: 44px; justify-content: center; }
  .spread { grid-template-columns: minmax(0, 1fr); }
  .spread::after { display: none; }
  .page { padding: 40px var(--gut) 64px; }
  .folio { bottom: 20px; }
  .hero { min-height: 0; }
  .hero__r { order: -1; padding: 10px 10px 0; }
  .hero__r .folio { display: none; }
  .leather { min-height: 0; height: 64svh; max-height: 560px; }
  .leather__ui { flex-direction: column; align-items: flex-start; padding: 14px; gap: 10px; }
  .hero__l { padding-top: 26px; gap: 26px; }
  .hero__t { font-size: clamp(48px, 13.6vw, 86px); }
  .runhead { gap: 12px; font-size: 10px; }
  .facts { gap: 22px; }
  .facts dd { font-size: 38px; }
  .toc { padding: 70px var(--gut) 70px; gap: 6px; }
  .toc__list a { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 12px; padding: 16px 0; }
  .toc__d { grid-column: 2 / -1; grid-row: 2; }
  .toc__c { grid-column: 3; grid-row: 1; }
  .toc__t { font-size: 32px; }
  .toc__float { display: none; }
  .picks__ph { flex: none; min-height: 0; height: 110vw; max-height: 620px; }
  .picks__fig figcaption { padding: 14px var(--gut) 0; }
  .picks__fig .folio { display: none; }
  .story { height: auto; }
  .story__pin { position: static; height: auto; grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .story__l { min-width: 0; }
  .story__l { padding: 70px 0 60px; }
  .story__l > .kicker, .story__h { padding: 0 var(--gut); }
  .story__r { display: none; }
  .story__steps { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gut) 10px; margin-top: 30px; scrollbar-width: none; }
  .story__steps::-webkit-scrollbar { display: none; }
  .story__st { flex: 0 0 78%; scroll-snap-align: start; display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 6px 12px; border: 0; color: var(--ink); padding: 0; }
  .story__ph { display: block; grid-column: 1 / -1; grid-row: 1; width: 100%; aspect-ratio: 4/5; object-fit: cover; margin-bottom: 10px; }
  .story__st .story__t, .story__st.is-on .story__t { transform: none; font-style: normal; font-size: 26px; }
  .story__d { position: static; grid-column: 1 / -1; height: auto; opacity: 1; transform: none; font-size: 15px; }
  .story__bar { display: none; }
  .story__h { margin: 0; }
  .monop__l { order: 0; }
  .leather--mono { height: 300px; }
  .monop__form { grid-template-columns: 1fr; }
  .mani { padding: 90px var(--gut) 90px; }
  .mani__t { text-indent: 1.2em; }
  .acid__fig { min-height: 0; height: 75vw; }
  .acid__r { padding-top: 46px; }
  .row { padding: 70px var(--gut); }
  .row__head { grid-template-columns: 1fr; gap: 10px; }
  .grid--row, .grid--picks, .grid--cat, .related .grid { --cols: 2; gap: 34px 14px; }
  .care { padding: 70px var(--gut); }
  .care__list, .care__list--5 { grid-template-columns: 1fr; }
  .care__list li, .care__list li + li, .care__list--5 li:nth-child(4) { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 64px 1fr; gap: 4px 14px; }
  .care__n { grid-row: span 2; font-size: 54px; }
  .visit__r { padding-top: 0; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__word { font-size: 22vw; }
  .cat__title h1 { font-size: clamp(56px, 17vw, 110px); }
  .cat__index { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 22px; }
  .cat__index::-webkit-scrollbar { display: none; }
  .cat__tools { gap: 14px; padding-bottom: 26px; }
  .cat__q { flex-basis: 100%; max-width: none; }
  .cat__fbtn { margin-left: 0; }
  .cat__sort { margin-left: auto; }
  .grid--cat .card:nth-child(10n+1) { grid-column: span 2; grid-row: span 1; }
  .grid--cat .card:nth-child(10n+1) .card__media { aspect-ratio: 1; min-height: 0; flex: none; }
  .grid--cat .card:nth-child(10n+1) .card__name { font-size: 26px; }
  .grid--cat .card:nth-child(10n+7) { grid-column: span 1; }
  .card__name { font-size: 17px; }
  .card__body { grid-template-columns: 1fr; }
  .card__name { order: -1; }
  .grid--cat .card__price { grid-row: 3; }
  .card__price { grid-column: 1; grid-row: auto; flex-direction: row; align-items: baseline; gap: 8px; }
  .prod { padding: 0 var(--gut); }
  .product, .pinfo { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pbuy .stepper { flex: 1; }
  .pbuy .btn { order: 2; flex: 1 1 100%; }
  .gallery { grid-template-columns: 1fr; }
  .gallery__main { grid-column: 1; cursor: default; }
  .gallery__thumbs { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; }
  .gallery__thumbs button { width: 64px; flex: none; }
  .loupe { width: 170px; height: 170px; margin: -85px 0 0 -85px; }
  .loupe-btn { display: inline-flex; }
  .gallery__main.is-loupe { touch-action: none; }
  .ptitle { font-size: 44px; }
  .pinfo { gap: 26px; }
  .page-title { font-size: clamp(44px, 13vw, 80px); }
  .im { grid-template-columns: 1fr; }
  .im__stage { top: var(--mast); height: 44svh; min-height: 300px; z-index: 5; border-right: 0; border-bottom: 1px solid var(--line); }
  .im__svg { width: min(100%, 40svh); }
  .im__bar { padding: 8px 12px; }
  .im__hint { display: none; }
  .im__meta { left: 12px; right: 12px; top: 10px; font-size: 9.5px; }
  .im__gl { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .im__models { grid-template-columns: repeat(5, minmax(96px, 1fr)); overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-right: calc(var(--gut) * -1); padding-right: var(--gut); }
  .im__models::-webkit-scrollbar { display: none; }
  .im__t { font-size: 56px; }
  .im__letters input { font-size: 52px; height: 76px; }
  .im__fonts, .im__tech { gap: 8px; }
  .im__font span, .im__tc span { padding: 10px; }
  .im__font b { font-size: 32px; }
  .ff-sans { font-size: 22px !important; }
  .im__tc b { font-size: 12.5px; }
  .leathers { padding: 70px var(--gut); }
  .leathers__grid { grid-template-columns: 1fr; gap: 40px; }
  .ahero__fig, .craft__fig, .mk__fig { min-height: 0; height: 80vw; }
  .ahero__fig .folio, .craft__fig .folio, .mk__fig .folio { display: none; }
  .dgrid { grid-template-columns: 1fr; }
  .dcard, .dcard + .dcard { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .dtext { grid-template-columns: 1fr; padding: 50px var(--gut); }
  .faq { padding-bottom: 70px; }
  .ov__body { grid-template-columns: 1fr; align-content: start; }
  .ov__pic { display: none; }
  .ov__nav a { padding: 4px 0; }
  .ov__t { font-size: clamp(30px, 8.6vw, 44px); }
  .ov__top { grid-template-columns: auto 1fr auto; }
  .ov__logo { justify-self: center; font-size: 25px; }
}
@media (max-width: 420px) {
  .facts dt { font-size: 9.5px; }
  .hero__cta { gap: 16px; }
  .im__fonts, .im__tech { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .im__tc .tc { width: 22px; height: 22px; }
  .cat__sort span { display: none; }
}