/* «Саз» — керамика ручной работы. Тёплый минимализм: костяной фон, терракота, умбра; Piazzolla + Ysabeau Office.
   Поверх _engine/base.css: свои шапка, «док» снизу, асимметричные сетки, тёмная секция-печь, конструктор стола. */
@view-transition { navigation: auto; }
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  --bg: #f1ebe2; --paper: #f8f4ed; --slip: #e6ddcf; --sand: #ddd1bf; --fg: #2a221c; --muted: #7a6c5f; --line: #d9cdbd;
  --clay: #b4613f; --clay-d: #8e4529; --clay-l: #dc9370; --sage: #8e9a84; --kiln: #261e19;
  --accent: #2a221c; --accent-ink: #f8f4ed; --sale: #b4472c; --ok: #5c7a4c;
  --card-bg: var(--slip); --radius: 3px; --radius-btn: 999px; --wrap: 1440px; --gap: 28px;
  --font-body: 'Ysabeau Office', 'Segoe UI', system-ui, sans-serif; --font-head: 'Piazzolla', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.22, .8, .2, 1); --ease-io: cubic-bezier(.75, 0, .2, 1);
  --step--1: 14px; --step-0: 17px; --step-1: 19px; --step-2: 24px; --step-3: clamp(28px, 3vw, 40px); --step-4: clamp(42px, 5.6vw, 84px);
  --pad: clamp(16px, 4vw, 60px);
  --speck: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><circle cx='29.1' cy='13.6' r='1.2'/><circle cx='4.3' cy='73.9' r='0.5'/><circle cx='32.9' cy='5.2' r='1.0'/><circle cx='19.3' cy='7.7' r='0.8'/><circle cx='6.3' cy='8.2' r='0.8'/><circle cx='5.3' cy='50.9' r='0.6'/><circle cx='56.8' cy='52.5' r='0.5'/><circle cx='51.9' cy='35.7' r='0.6'/><circle cx='4.2' cy='77.3' r='0.7'/><circle cx='37.7' cy='48.7' r='1.0'/><circle cx='27.8' cy='73.5' r='0.6'/><circle cx='9.3' cy='51.4' r='0.6'/><circle cx='33.5' cy='49.3' r='0.5'/><circle cx='50.8' cy='55.7' r='0.8'/><circle cx='61.2' cy='38.5' r='0.7'/><circle cx='41.9' cy='83.1' r='0.7'/><circle cx='27.0' cy='71.5' r='1.2'/><circle cx='70.2' cy='7.4' r='0.7'/><circle cx='47.3' cy='78.8' r='1.2'/><circle cx='40.4' cy='54.8' r='0.5'/><circle cx='10.6' cy='37.6' r='1.5'/><circle cx='30.8' cy='84.0' r='0.8'/><circle cx='3.5' cy='60.1' r='1.5'/><circle cx='50.2' cy='71.0' r='1.5'/><circle cx='28.2' cy='62.6' r='1.0'/><circle cx='44.7' cy='71.7' r='0.5'/><circle cx='75.6' cy='85.0' r='0.8'/><circle cx='62.7' cy='5.8' r='1.2'/><circle cx='63.1' cy='58.2' r='1.2'/><circle cx='74.0' cy='25.6' r='0.8'/><circle cx='79.8' cy='31.2' r='0.8'/><circle cx='32.0' cy='55.0' r='0.8'/><circle cx='5.3' cy='69.1' r='0.6'/><circle cx='66.5' cy='35.8' r='1.5'/></svg>");
}
html { background: var(--bg); scroll-behavior: auto; }
body { font-size: var(--step-0); line-height: 1.55; background: var(--bg); color: var(--fg); font-feature-settings: 'kern', 'liga'; }
::selection { background: var(--clay); color: var(--paper); }
/* бумажное зерно поверх всего — тактильность глины; статичная картинка, на производительность не влияет */
body::after { content: ''; position: fixed; inset: 0; z-index: 390; pointer-events: none; opacity: .2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16  0 0 0 0 .12  0 0 0 0 .09  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 300; letter-spacing: -.015em; }
em { font-style: italic; }
h1 em, h2 em, .hero__t em { color: var(--clay); font-weight: 300; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
img { color: transparent; }

/* ——— кнопки и ссылки ——— */
.btn { min-height: 52px; padding: 0 28px; font-weight: 500; letter-spacing: .01em; border: 0; transition: background .3s, color .3s, transform .5s var(--ease); }
.btn:hover { filter: none; background: var(--clay-d); }
.btn--clay { background: var(--clay); color: var(--paper); }
.btn--clay:hover { background: var(--fg); }
.btn--light { background: var(--paper); color: var(--fg); }
.btn--light:hover { background: var(--fg); color: var(--paper); }
.btn--ghost { border: 1px solid currentColor; background: transparent; color: var(--fg); }
.btn--ghost:hover { background: var(--fg); color: var(--paper); }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding: 6px 0; transition: background-size .5s var(--ease); }
.link-arrow .i { transition: transform .5s var(--ease); }
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow:hover .i { transform: translateX(5px); }
.label { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 500 13px/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.label::before { content: ''; width: 26px; height: 1px; background: var(--clay); }
.sec-h { font-size: clamp(38px, 4.8vw, 76px); line-height: 1.02; letter-spacing: -.025em; margin: 0; }
.sec-head { margin: 0 0 56px; }
.sec-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; font-size: 15px; color: var(--muted); }
.kicker__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 0 rgba(180, 97, 63, .5); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(180, 97, 63, 0); } 100% { box-shadow: 0 0 0 0 rgba(180, 97, 63, 0); } }

/* ——— прелоадер ——— */
.pl { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; align-content: center; gap: 4px; background: var(--bg); color: var(--fg); cursor: pointer; animation: pl-auto .45s var(--ease-io) 2.5s forwards; }
.pl-skip .pl { display: none; }
.pl.is-out { clip-path: inset(0 0 100% 0); transition: clip-path .4s var(--ease-io); }
.pl.is-gone { display: none; }
@keyframes pl-auto { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
.pl__svg { width: min(240px, 56vw); height: auto; overflow: visible; }
.pl__sh { fill: rgba(42, 34, 28, .1); }
.pl__head { fill: #cbbda9; }
.pl__marks { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.5; stroke-dasharray: 14 22; animation: pl-spin 1.1s linear infinite; }
@keyframes pl-spin { to { stroke-dashoffset: -72; } }
.pl__clay { fill: var(--clay); }
.pl__rim { fill: #7d3c22; }
.pl__word { font: italic 300 56px/1 var(--font-head); letter-spacing: -.02em; margin-top: 4px; }
.pl__n { position: absolute; left: var(--pad); bottom: 28px; font: 300 15px var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.pl__n::after { content: ' %'; }
.pl__skip { position: absolute; right: var(--pad); bottom: 28px; font-size: 13px; color: var(--muted); }

/* ——— шапка ——— */
.top { position: relative; z-index: 20; }
.top__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 22px var(--pad) 18px; }
.top__note { margin: 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
.top__logo { justify-self: center; text-decoration: none; }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.mark { width: 30px; height: 30px; fill: none; stroke: var(--clay); stroke-width: 1.6; stroke-linecap: round; transition: transform 1.2s var(--ease); }
.top__logo:hover .mark { transform: rotate(-360deg); }
.logo__w { font: italic 400 34px/1 var(--font-head); letter-spacing: -.03em; transform: translateY(-2px); }
.top__nav { justify-self: end; display: flex; align-items: center; gap: 26px; font-size: 15px; }
.top__nav a { text-decoration: none; position: relative; padding: 4px 0; }
.top__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.top__nav a:hover::after, .top__nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.top__cart sup { font-size: 11px; color: var(--clay); font-weight: 600; margin-left: 1px; }
.top__mcart { display: none; position: relative; width: 44px; height: 44px; place-items: center; justify-self: end; }
.top__mcart .i { width: 24px; height: 24px; }
.top__mcart b { position: absolute; right: 2px; top: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--clay); color: var(--paper); font-size: 11px; line-height: 18px; text-align: center; }

/* ——— док снизу ——— */
.dock { position: fixed; left: 50%; bottom: 18px; z-index: 50; display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 999px; background: rgba(38, 30, 25, .9); color: var(--paper); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 18px 40px -18px rgba(38, 30, 25, .6); transform: translate(-50%, 150%); transition: transform .7s var(--ease); view-transition-name: dock; }
.dock.is-on { transform: translate(-50%, 0); }
.dock > * { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: inherit; text-decoration: none; font-size: 15px; white-space: nowrap; transition: background .3s; }
.dock > *:hover, .dock [aria-current] { background: rgba(248, 244, 237, .12); }
.dock__burger { display: grid; gap: 4px; width: 16px; }
.dock__burger i { display: block; height: 1.5px; background: currentColor; border-radius: 1px; }
.dock__burger i:last-child { width: 10px; }
.dock__cart { background: var(--clay) !important; }
.dock__cart b { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--paper); color: var(--fg); font-size: 12px; line-height: 20px; text-align: center; }
.dock__cart b[hidden] { display: none !important; }

/* ——— меню, корзина, фильтры, тост ——— */
.scrim { background: rgba(38, 30, 25, .38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.mmenu { inset: auto 0 0 0; width: 100%; height: min(100%, 680px); border-radius: 28px 28px 0 0; background: var(--kiln); color: var(--bg); transform: translateY(103%); transition: transform .7s var(--ease), visibility .7s; }
.mmenu.is-open { transform: none; }
.mmenu__top { border-color: rgba(241, 235, 226, .12); padding: 18px var(--pad); }
.mmenu__brand { font: italic 400 30px var(--font-head); }
.mmenu .icon-btn { color: var(--bg); }
.mmenu__search { padding: 18px var(--pad) 0; }
.mmenu__search input { background: transparent; border: 0; border-bottom: 1px solid rgba(241, 235, 226, .3); border-radius: 0; color: var(--bg); padding: 0; font-size: 18px; }
.mmenu__search input::placeholder { color: rgba(241, 235, 226, .5); }
.mmenu nav { padding: 12px var(--pad); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 40px; }
.mmenu nav a { font: 300 clamp(32px, 4.4vw, 52px)/1.1 var(--font-head); letter-spacing: -.02em; border-color: rgba(241, 235, 226, .12); padding: 16px 0; transition: color .3s, padding .5s var(--ease); }
.mmenu nav a:hover { color: var(--clay-l); padding-left: 12px; }
.mmenu.is-open nav a { animation: mm-in .8s var(--ease) both; }
.mmenu.is-open nav a:nth-child(2) { animation-delay: .05s; } .mmenu.is-open nav a:nth-child(3) { animation-delay: .1s; } .mmenu.is-open nav a:nth-child(4) { animation-delay: .15s; } .mmenu.is-open nav a:nth-child(5) { animation-delay: .2s; } .mmenu.is-open nav a:nth-child(6) { animation-delay: .25s; }
@keyframes mm-in { from { opacity: 0; transform: translateY(40px); } }
.mmenu__contacts { padding: 18px var(--pad); color: rgba(241, 235, 226, .6); }
.drawer { width: min(460px, 100%); background: var(--paper); border-radius: 24px 0 0 24px; }
.drawer__top, .drawer__foot { border-color: var(--line); }
.drawer__title { font-weight: 300; }
.filters { background: var(--paper); }
.toast { bottom: 92px; border-radius: 999px; background: var(--fg); color: var(--paper); padding: 12px 22px; }
.icon-btn:hover { background: rgba(42, 34, 28, .06); }
.card__fav svg, .icon-btn svg { stroke-width: 1.4; }
[aria-pressed="true"] > svg { fill: var(--clay); stroke: var(--clay); }

/* ——— свой курсор (только мышь) ——— */
.cur { position: fixed; left: 0; top: 0; z-index: 350; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cur.is-on { opacity: 1; }
.cur__ring { position: absolute; left: 0; top: 0; width: 42px; height: 42px; margin: -21px 0 0 -21px; border: 1px solid #fff; border-radius: 50%; mix-blend-mode: difference; transition: transform .45s var(--ease), background .35s, border-color .35s; }
.cur.is-link .cur__ring { transform: scale(.45); background: #fff; }
.cur.has-label .cur__ring { transform: scale(2.1); background: var(--clay); border-color: var(--clay); mix-blend-mode: normal; }
.cur__lab { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.6); opacity: 0; color: var(--paper); font-size: 13px; letter-spacing: .04em; white-space: nowrap; transition: opacity .3s, transform .45s var(--ease); }
.cur.has-label .cur__lab { opacity: 1; transform: translate(-50%, -50%); }

/* ——— появление: слова и блоки ——— */
.w, .w__i { display: inline-block; }
.js .is-split .w__i { opacity: 0; transform: translateY(.42em) rotate(3deg); transform-origin: 0 100%; filter: blur(7px); transition: opacity .9s var(--ease), transform 1.1s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--i, 0) * 42ms); }
.js .is-split.is-in .w__i { opacity: 1; transform: none; filter: none; }
.js [data-reveal] { transform: translateY(26px); transition-duration: 1s, 1.1s; transition-timing-function: var(--ease); }
.js .card.rv { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js .card.rv.is-in { opacity: 1; transform: none; }
.sketch { position: absolute; width: 180px; height: auto; fill: none; stroke: var(--clay); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
[data-draw] path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js [data-draw] path { stroke-dashoffset: calc(1 - var(--p, 0)); }
.js [data-draw].is-drawn path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease); }
img[data-par] { transform: scale(1.16); will-change: transform; }

/* ——— главная: первый экран ——— */
.hero { overflow-x: clip; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 24px clamp(24px, 4vw, 72px); min-height: calc(100svh - 84px); padding: 10px var(--pad) 40px; }
.hero__t { font-size: clamp(56px, 7.2vw, 124px); line-height: .98; letter-spacing: -.035em; margin: 0 0 28px; }
.hero__lead { font-size: var(--step-1); max-width: 30em; color: #4e4238; margin: 0 0 30px; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-bottom: 44px; }
.hero__facts { display: flex; gap: clamp(20px, 3vw, 48px); margin: 0; padding-top: 22px; border-top: 1px solid var(--line); }
.hero__facts div { display: grid; gap: 2px; }
.hero__facts dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero__facts dd { margin: 0; font: 300 28px/1.1 var(--font-head); }
.hero__wheel { display: grid; justify-items: center; gap: 18px; }
.wheel { position: relative; width: min(100%, 76svh, 760px); aspect-ratio: 1; touch-action: pan-y; cursor: grab; }
.wheel:active { cursor: grabbing; }
.wheel__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.wheel__ring { position: absolute; inset: -2%; width: 104%; height: 104%; pointer-events: none; animation: spin 60s linear infinite; }
.wheel__ring text { font: 500 5.2px var(--font-body); letter-spacing: .26em; text-transform: uppercase; fill: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }
.wheel__hint { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(248, 244, 237, .85); font-size: 13px; color: var(--muted); white-space: nowrap; transition: opacity .6s; pointer-events: none; }
.wheel.is-touched .wheel__hint { opacity: 0; }
.wheel__ui { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.wseg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--slip); }
.wseg button { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font-size: 15px; transition: background .3s, color .3s; }
.wseg button[aria-pressed="true"] { background: var(--fg); color: var(--paper); }
.wglz { display: inline-flex; gap: 8px; }
.wglz button { width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), transparent 45%), var(--c); box-shadow: inset 0 0 0 1px rgba(42, 34, 28, .15); transition: transform .4s var(--ease), box-shadow .3s; }
.wglz button:hover { transform: translateY(-3px); }
.wglz button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--fg); }
.wheel__link { flex-basis: 100%; text-align: center; font-size: 15px; color: var(--muted); text-decoration: none; display: inline-flex; justify-content: center; gap: 6px; align-items: center; }
.wheel__link span { color: var(--fg); }
.wheel__link:hover { color: var(--clay); }

/* бегущая строка */
.band { overflow: hidden; border-block: 1px solid var(--line); padding: 18px 0; }
.band__track { display: flex; align-items: center; gap: 28px; width: max-content; animation: band 46s linear infinite; }
.band span { font: italic 300 clamp(22px, 2.4vw, 34px) var(--font-head); white-space: nowrap; }
.band i { width: 10px; height: 10px; border-radius: 50%; background: var(--clay); flex: none; }
@keyframes band { to { transform: translateX(-50%); } }

/* манифест */
.manifest { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gap); padding: clamp(90px, 13vw, 200px) 0 clamp(80px, 11vw, 180px); }
.manifest .label { grid-column: 1 / span 3; margin-top: 18px; }
.manifest__t { grid-column: 4 / -1; font-size: clamp(30px, 3.5vw, 56px); line-height: 1.16; letter-spacing: -.02em; margin: 0 0 48px; }
.pill { display: inline-block; width: 2.1em; height: .86em; margin: 0 .12em; border-radius: 999px; overflow: hidden; vertical-align: -.06em; background: var(--slip); transition: transform 1.2s var(--ease) .3s; }
.pill img { width: 100%; height: 100%; object-fit: cover; }
.js .is-split .pill { transform: scaleX(0); }
.js .is-split.is-in .pill { transform: none; }
.manifest__aside { grid-column: 8 / span 4; color: #4e4238; }
.manifest .sketch { left: 0; bottom: 60px; width: clamp(110px, 13vw, 190px); }

/* коллекции */
.cols { padding-bottom: clamp(80px, 10vw, 160px); }
.cols__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px var(--gap); align-items: start; }
.col { display: grid; gap: 16px; text-decoration: none; }
.col--1 { grid-column: 1 / span 5; }
.col--2 { grid-column: 7 / span 4; margin-top: 160px; }
.col--3 { grid-column: 2 / span 3; }
.col--4 { grid-column: 6 / span 3; margin-top: 90px; }
.col--5 { grid-column: 10 / span 3; margin-top: -40px; }
.col__ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--slip); clip-path: inset(0 round var(--radius)); transition: clip-path .9s var(--ease); }
.col--1 .col__ph { aspect-ratio: 4 / 4.6; }
.col__ph img { width: 100%; height: 100%; object-fit: cover; }
.col:hover .col__ph { clip-path: inset(3% 3% round 14px); }
.col__cap { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; }
.col__n { font-size: 13px; color: var(--clay); grid-row: span 2; }
.col__t { font: 300 clamp(26px, 2.4vw, 38px)/1.05 var(--font-head); letter-spacing: -.02em; }
.col__s { font-size: 15px; color: var(--muted); }
.col__c { grid-column: 2; font-size: 13px; color: var(--muted); }

/* история-печь (липкая) */
.story { position: relative; height: 430vh; background: var(--kiln); color: var(--bg); }
.story__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 90px); align-items: center; padding: 40px var(--pad); overflow: hidden; }
.story__media { position: relative; height: min(82vh, 760px); border-radius: 4px; overflow: hidden; background: #3a2e26; }
.story__ph { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease-io); }
.story__ph.is-past { clip-path: inset(0 0 0 0); }
.story__ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 1.6s var(--ease); }
.story__ph.is-past img { transform: scale(1); }
.story__temp { position: absolute; left: 24px; bottom: 18px; z-index: 2; display: flex; align-items: flex-start; gap: 4px; font: 300 clamp(64px, 8vw, 128px)/1 var(--font-head); letter-spacing: -.04em; color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); font-variant-numeric: tabular-nums; }
.story__temp small { font: 400 20px var(--font-body); margin-top: 14px; letter-spacing: 0; }
.story .label { color: rgba(241, 235, 226, .6); }
.story__h { font-size: clamp(34px, 3.6vw, 58px); line-height: 1.05; margin: 0 0 40px; }
.story__h em { color: var(--clay-l); }
.story__steps { position: relative; list-style: none; margin: 0; padding: 0; min-height: 230px; }
.story__step { position: absolute; inset: 0 0 auto 0; opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity .28s ease, transform .5s var(--ease), visibility 0s .28s; }
.story__step.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease) .2s, transform .8s var(--ease) .2s, visibility 0s; }
.story__mimg { display: none; }
.story__n { display: block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--clay-l); margin-bottom: 10px; }
.story__step h3 { font-size: clamp(36px, 3.4vw, 54px); line-height: 1; margin: 0 0 16px; }
.story__step p { max-width: 30em; color: rgba(241, 235, 226, .78); font-size: var(--step-1); }
.story__bar { height: 2px; background: rgba(241, 235, 226, .14); margin-top: 26px; }
.story__bar i { display: block; height: 100%; background: var(--clay-l); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* полка товаров и сетка каталога */
.shelf { padding: clamp(90px, 12vw, 180px) 0 clamp(60px, 8vw, 120px); }
.shelfgrid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 64px var(--gap); align-items: start; }
.shelfgrid > .card:nth-child(6n+1) { grid-column: 1 / span 5; }
.shelfgrid > .card:nth-child(6n+2) { grid-column: 7 / span 3; margin-top: 120px; }
.shelfgrid > .card:nth-child(6n+3) { grid-column: 10 / span 3; margin-top: 30px; }
.shelfgrid > .card:nth-child(6n+4) { grid-column: 2 / span 3; }
.shelfgrid > .card:nth-child(6n+5) { grid-column: 6 / span 3; margin-top: 70px; }
.shelfgrid > .card:nth-child(6n) { grid-column: 9 / span 4; }

.card { background: transparent; }
.card__media { border-radius: var(--radius); position: relative; }
.card__media img { transition: transform 1.4s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(42, 34, 28, .12)); opacity: 0; transition: opacity .6s; }
.card:hover .card__media::after { opacity: 1; }
.card__badge { left: 14px; top: 14px; padding: 4px 11px; background: var(--paper); color: var(--clay-d); font-size: 12px; letter-spacing: .04em; border-radius: 999px; }
.card__fav { right: 12px; top: 12px; width: 38px; height: 38px; background: rgba(248, 244, 237, .82); opacity: .9; transition: transform .4s var(--ease), opacity .3s; }
.card__fav:hover { transform: scale(1.1); opacity: 1; }
.card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px; padding-top: 16px; align-content: start; }
.card__name { grid-column: 1; grid-row: 1; font: 400 22px/1.18 var(--font-head); letter-spacing: -.01em; }
.card__name a:hover { text-decoration: none; color: var(--clay); }
.card__price { grid-column: 2; grid-row: 1; font-size: 16px; white-space: nowrap; padding-top: 3px; }
.card__price b { font-weight: 600; }
.card__price s { font-size: 13px; }
.card__meta { grid-column: 1 / -1; font-size: 14px; }
.card__glz { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: 4px; }
.card__glz i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(42, 34, 28, .14); }
.card__add { grid-column: 1 / -1; justify-self: start; margin-top: 10px; min-height: 36px; padding: 0 16px 0 12px; background: transparent; color: var(--fg); border: 1px solid var(--line); font-size: 14px; gap: 6px; transition: background .3s, color .3s, border-color .3s; }
.card__add::before { content: '+'; font-size: 18px; line-height: 1; font-weight: 300; }
.card__add:hover { background: var(--fg); color: var(--paper); border-color: var(--fg); }
.shelfgrid > .card:nth-child(6n+1) .card__name { font-size: clamp(24px, 2.2vw, 32px); }

/* витрина конструктора */
.setteaser { background: var(--slip); padding: clamp(70px, 9vw, 140px) 0; overflow: clip; }
.setteaser__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.setteaser__table { aspect-ratio: 1200 / 760; }
.setteaser__copy p { color: #4e4238; }
.setteaser__copy .sec-h { margin-bottom: 22px; }
.setteaser__pal { font-size: 15px; }
.setteaser__pal b { font: italic 400 20px var(--font-head); color: var(--clay-d); }
.setteaser .btn { margin-top: 10px; }

/* глазури-капли */
.glazes { position: relative; padding: clamp(90px, 12vw, 180px) 0; }
.glazes__body { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; align-items: center; }
.glazes__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-height: 260px; }
.drop { --sz: 110px; display: grid; justify-items: center; gap: 14px; border: 0; background: none; padding: 0; transition: transform .7s var(--ease); }
.drop:nth-child(1) { --sz: 128px; } .drop:nth-child(2) { --sz: 96px; margin-bottom: 60px; } .drop:nth-child(3) { --sz: 140px; } .drop:nth-child(4) { --sz: 104px; margin-bottom: 90px; } .drop:nth-child(5) { --sz: 120px; margin-bottom: 20px; } .drop:nth-child(6) { --sz: 88px; margin-bottom: 70px; } .drop:nth-child(7) { --sz: 116px; }
.drop__b { position: relative; display: block; width: var(--sz); aspect-ratio: 1; border-radius: 52% 48% 50% 50% / 56% 52% 48% 44%; background: radial-gradient(circle at 33% 28%, rgba(255, 255, 255, calc(var(--gl) * .85)) 0 5%, transparent 20%), radial-gradient(circle at 46% 42%, var(--cl), var(--c) 48%, var(--cd) 100%); box-shadow: inset -10px -16px 26px rgba(30, 20, 12, .2), 0 22px 32px -20px rgba(42, 34, 28, .55); transition: transform .8s var(--ease), border-radius .8s var(--ease); }
.drop__b::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: calc(var(--spk) * .9); background: var(--sp); -webkit-mask: var(--speck) 0 0 / 90px 90px, var(--speck) 37px 51px / 63px 63px; mask: var(--speck) 0 0 / 90px 90px, var(--speck) 37px 51px / 63px 63px; }
.drop__n { font: italic 400 18px var(--font-head); color: var(--muted); transition: color .3s; }
.drop:hover .drop__b { transform: translateY(-8px) scale(1.04); border-radius: 46% 54% 44% 56% / 50% 46% 54% 50%; }
.drop.is-on .drop__b { transform: translateY(-12px) scale(1.08); }
.drop.is-on .drop__n { color: var(--fg); }
.ginfo { padding-left: 28px; border-left: 1px solid var(--line); min-height: 210px; }
.ginfo__name { font: 300 44px/1 var(--font-head); margin: 0 0 12px; }
.ginfo__name small { display: block; margin-top: 10px; font: 400 14px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ginfo__note { color: #4e4238; }
.ginfo.is-swap { animation: swap .6s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(12px); } }
.glazes .sketch { right: 0; top: 60px; width: clamp(80px, 9vw, 130px); }

/* уход */
.care { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding: 0 0 clamp(90px, 12vw, 170px); }
.care__i { padding-top: 22px; border-top: 1px solid var(--line); }
.care__i svg { width: 46px; height: 46px; fill: none; stroke: var(--clay); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
.care__i h3 { font-size: 26px; margin: 0 0 8px; }
.care__i p { color: var(--muted); font-size: 15px; }

/* мастер-класс */
.mk { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(28px, 6vw, 110px); padding: 0 var(--pad) clamp(90px, 12vw, 170px); }
.mk__ph { aspect-ratio: 4 / 4.3; overflow: hidden; border-radius: var(--radius); background: var(--slip); }
.mk__ph img { width: 100%; height: 100%; object-fit: cover; }
.mk__copy p { color: #4e4238; max-width: 30em; }
.mk__copy .sec-h { margin-bottom: 24px; }
.mk__copy .btn { margin: 12px 24px 0 0; }

/* подвал */
.foot { background: var(--kiln); color: var(--bg); padding-bottom: 110px; overflow: hidden; }
.foot__word { padding: 30px var(--pad) 0; }
.foot__word svg { display: block; width: 100%; height: auto; overflow: visible; }
.foot__word text { font: italic 300 330px var(--font-head); letter-spacing: -.04em; }
.fw-o { fill: none; stroke: rgba(241, 235, 226, .3); stroke-width: 1.2; }
.fw-f { fill: var(--clay); }
.foot__in { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 40px var(--gap); padding-top: 40px; border-top: 1px solid rgba(241, 235, 226, .12); }
.foot__about p { color: rgba(241, 235, 226, .65); max-width: 26em; margin-top: 18px; }
.foot__logo { text-decoration: none; }
.foot__h { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(241, 235, 226, .5); margin-bottom: 14px; }
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot__col a { text-decoration: none; }
.foot__col a:hover { color: var(--clay-l); }
.foot__dev { margin-top: 18px; font-size: 13px; }
.foot__dev a { display: inline-flex; align-items: center; gap: 8px; color: rgba(241, 235, 226, .72); text-decoration: none; background: linear-gradient(var(--clay-l), var(--clay-l)) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: color .3s, background-size .5s var(--ease); }
.foot__dev a::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--clay); }
.foot__dev a:hover { color: var(--bg); background-size: 100% 1px; }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(241, 235, 226, .12); font-size: 13px; color: rgba(241, 235, 226, .5); }

/* ——— каталог ——— */
.catalog { padding-bottom: 40px; }
.crumbs { font-size: 13px; padding-top: 6px; }
.cathero { position: relative; display: grid; grid-template-columns: auto 1fr minmax(0, 360px); align-items: end; gap: 0 22px; margin: 10px 0 40px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.cathero__t { font-size: clamp(60px, 9vw, 150px); line-height: .9; letter-spacing: -.045em; margin: 0; }
.cathero__n { align-self: start; margin: 12px 0 0; font-size: 15px; color: var(--clay); }
.cathero__lead { grid-column: 3; color: var(--muted); margin: 0; font-size: 15px; }
.cathero .sketch { right: 400px; bottom: 30px; width: 170px; }
.catalog .cat-chips { flex-wrap: wrap; gap: 6px 26px; padding: 0 0 26px; overflow: visible; }
.catalog .cat-chips .chip { min-height: 0; padding: 0 0 4px; border: 0; border-radius: 0; background: none; color: var(--muted); font: 300 clamp(22px, 2.2vw, 32px)/1.15 var(--font-head); letter-spacing: -.015em; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .3s, background-size .5s var(--ease); }
.catalog .cat-chips .chip:hover { color: var(--fg); }
.catalog .cat-chips .chip.is-on { color: var(--fg); background-size: 100% 1px; }
.cattools { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; padding: 16px 0; margin-bottom: 40px; border-block: 1px solid var(--line); }
.cattools__f { display: inline-flex !important; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border: 1px solid var(--fg); border-radius: 999px; background: none; font-size: 15px; transition: background .3s, color .3s; }
.cattools__f:hover { background: var(--fg); color: var(--paper); }
.cattools__ico { display: grid; gap: 4px; width: 16px; }
.cattools__ico i { height: 1.5px; background: currentColor; }
.cattools__ico i:last-child { width: 9px; justify-self: end; }
.cattools__q { flex: 1; min-width: 200px; }
.cattools__q input { width: 100%; height: 44px; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 0 2px; font-size: 16px; }
.cattools__q input:focus { outline: none; border-color: var(--fg); }
.cat-sort { font-size: 14px; color: var(--muted); }
.cat-sort select { height: 40px; border: 0; background: transparent; font-size: 15px; color: var(--fg); margin-left: 4px; cursor: pointer; }
.catalog .cat-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 60px; }
.catalog .cat-main .shelfgrid { --cols: 12; }
.catalog .cat-bar { display: none; }
/* фильтры — выезжающая панель на всех ширинах */
.filters { position: fixed; top: 0; left: 0; bottom: 0; width: min(400px, 100%); z-index: 70; padding: 0 26px 20px; overflow: auto; transform: translateX(-100%); visibility: hidden; transition: transform .6s var(--ease), visibility .6s; display: block; border-radius: 0 24px 24px 0; }
.filters.is-open { transform: none; visibility: visible; }
.filters__top { display: flex; margin: 0 -26px 18px; padding: 16px 18px 16px 26px; }
.filters__title { font-weight: 300; }
.filters__foot { position: sticky; bottom: 0; background: var(--paper); padding: 14px 0; }
.filters__foot .filters__apply { display: inline-flex; flex: 1; }
.fgroup legend { font: 400 20px var(--font-head); padding-bottom: 10px; }
.fopt { font-size: 15px; }
.fopt input[name="f-glaze"] + span { display: inline-flex; align-items: center; gap: 8px; }
.fopt input[name="f-glaze"] + span::before { content: ''; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(42, 34, 28, .2); background: #ccc; }
.fopt input[value="sut"] + span::before { background: #ece6da; } .fopt input[value="sula"] + span::before { background: #d9c7a9; } .fopt input[value="seladon"] + span::before { background: #a9b8a1; } .fopt input[value="kok"] + span::before { background: #3f5b79; } .fopt input[value="glina"] + span::before { background: #b9694a; } .fopt input[value="komir"] + span::before { background: #363230; } .fopt input[value="bal"] + span::before { background: #c28a3f; }
.empty { padding: 80px 20px; }
.empty__t { font-weight: 300; font-size: 34px; }

/* ——— карточка товара ——— */
.pwrap { padding-bottom: 20px; }
.pwrap .product { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 96px); padding-top: 18px; }
.gallery__main { border-radius: var(--radius); }
.gallery__main img { aspect-ratio: 4 / 5; object-fit: cover; view-transition-name: pimg; }
.gallery__nav { background: rgba(248, 244, 237, .9); }
.gallery__thumbs button { width: 76px; border-radius: var(--radius); }
.product__buy { top: 24px; gap: 18px; }
.pbadge { padding: 4px 12px; border-radius: 999px; background: var(--paper); color: var(--clay-d); border: 1px solid var(--line); }
.ptitle { font-size: clamp(36px, 3.8vw, 62px); line-height: 1.02; letter-spacing: -.03em; }
.pmeta { font-size: 15px; margin-top: -4px; }
.pprice { font: 500 28px var(--font-body); }
.pvars__l { font-size: 14px; }
.pvars__list { gap: 8px; }
.pvars__list .chip { min-height: 40px; padding: 0 14px 0 8px; border-color: var(--line); background: transparent; font-size: 14px; transition: border-color .3s; }
.pvars__list .chip:not(:has(.sw)) { padding-left: 14px; }
.pvars__list .chip.is-on { background: var(--paper); color: var(--fg); border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.chip .sw { width: 22px; height: 22px; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), transparent 50%), var(--sw); }
.stepper { border-radius: 999px; }
.pbuy .btn { border-radius: 999px; background: var(--clay); }
.pbuy .btn:hover { background: var(--fg); }
.pfav { border-radius: 50%; }
.pstock { color: var(--ok); }
.pfacts { border-color: var(--line); }
.pfacts li::before { border-color: var(--clay); }
.passport { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.passport__t { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.draw { width: 100%; max-width: 360px; height: auto; display: block; overflow: visible; }
.draw path { fill: none; stroke: var(--fg); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.draw .draw__body { fill: rgba(180, 97, 63, .07); }
.draw__axis { stroke: var(--clay) !important; stroke-dasharray: 3 4; stroke-width: .8 !important; }
.draw__dim path { stroke: var(--clay); stroke-width: .9; }
.draw text { font: 500 11px var(--font-body); fill: var(--muted); }
.draw .draw__v { font: italic 400 13px var(--font-head); fill: var(--clay-d); }
.js .passport .draw .dl { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease); }
.js .passport .draw__dim path { transition-delay: .9s; }
.js .passport .draw text { opacity: 0; transition: opacity .6s 1.4s; }
.js .passport.is-on .draw .dl { stroke-dashoffset: 0; }
.js .passport.is-on .draw text { opacity: 1; }
.passport__care { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.passport__care li { padding: 5px 12px; border-radius: 999px; background: var(--slip); font-size: 13px; }
.pinfo { border-color: var(--line); gap: clamp(28px, 5vw, 96px); }
.pinfo h2 { font-size: 34px; }
.pinfo p { color: #4e4238; max-width: 36em; }
.specs div { border-color: var(--line); font-size: 15px; }
.related__t { font-size: clamp(32px, 3.4vw, 52px); }
.related .grid { gap: 40px var(--gap); }
.pcta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; padding: 34px 0; margin-bottom: 70px; border-block: 1px solid var(--line); }
.pcta__t { margin: 0; font: 300 clamp(24px, 2.4vw, 34px) var(--font-head); }

/* ——— корзина и оформление ——— */
.page-title { font-weight: 300; font-size: clamp(48px, 7vw, 110px); line-height: .95; letter-spacing: -.04em; }
.cartpage__side, .checkout__side { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; top: 24px; }
.line { border-color: var(--line); }
.line__name { font: 400 19px/1.2 var(--font-head); }
.line__img { border-radius: var(--radius); }
.sum__total { font: 500 20px var(--font-body); border-color: var(--line); }
.sum__total dd { font-family: var(--font-head); font-size: 26px; font-weight: 400; }
.ship-progress__bar { background: var(--slip); }
.ship-progress__bar i { background: var(--clay); }
.setnote { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--slip); font-size: 14px; }
.setnote__t { margin: 0; }
.setnote__bar { height: 4px; border-radius: 4px; background: rgba(42, 34, 28, .1); overflow: hidden; }
.setnote__bar i { display: block; height: 100%; background: var(--clay); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.setnote a { color: var(--clay-d); }
.promo input, .field input, .field textarea { border-radius: 14px; background: var(--paper); border-color: var(--line); }
.cbox legend { font-weight: 300; font-size: 30px; }
.opt { border-radius: 16px; border-color: var(--line); background: var(--paper); }
.opt:has(input:checked) { border-color: var(--clay); box-shadow: inset 0 0 0 1px var(--clay); }
.opt input, .agree input, .fopt input { accent-color: var(--clay); }
.done__k { color: var(--clay); }
.done__t { font-weight: 300; }
.lost { position: relative; }
.lost__code { color: var(--slip); font-weight: 300; font-style: italic; }
.lost .sketch { right: 0; top: 40px; width: 240px; }
.lost__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.credits img { border-radius: var(--radius); }

/* ——— конструктор «Сервировка» ——— */
.svhead { padding-bottom: 24px; }
.svhead__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: end; gap: 20px 40px; padding: 8px 0 30px; border-bottom: 1px solid var(--line); }
.svhead__t { font-size: clamp(60px, 8.4vw, 140px); line-height: .9; letter-spacing: -.045em; margin: 0; }
.svhead__lead { color: #4e4238; margin: 0; }
.svgrid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding: 30px 0 100px; }
.svstage { position: sticky; top: 16px; display: grid; gap: 14px; }
.svstage__table { aspect-ratio: 1200 / 760; border-radius: 28px; background: radial-gradient(120% 90% at 50% 40%, #eae1d4, #dcd0bf); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(42, 34, 28, .06); }
.svstage__table svg, .setteaser__table svg { display: block; width: 100%; height: 100%; }
.svstage__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.svsurf { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--slip); }
.svsurf__l { font-size: 13px; color: var(--muted); padding: 0 8px 0 10px; }
.svsurf button { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font-size: 14px; transition: background .3s, color .3s; }
.svsurf button[aria-pressed="true"] { background: var(--fg); color: var(--paper); }
.svstage__cap { margin: 0; font: italic 400 18px var(--font-head); color: var(--muted); }
.svpanel { display: grid; gap: 8px; }
.svbox { border: 0; margin: 0; padding: 0 0 24px; border-bottom: 1px solid var(--line); min-width: 0; }
.svbox + .svbox { padding-top: 18px; }
.svbox legend { display: flex; align-items: baseline; gap: 12px; padding: 0 0 14px; font: 300 26px var(--font-head); }
.svbox legend span { font: 500 12px var(--font-body); color: var(--clay); letter-spacing: .1em; }
.svpers { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 5px; border-radius: 999px; background: var(--slip); }
.svpers label { position: relative; z-index: 1; cursor: pointer; }
.svpers input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.svpers span { display: grid; place-items: center; height: 50px; font: 300 26px var(--font-head); transition: color .4s; }
.svpers input:checked + span { color: var(--paper); }
.svpers input:focus-visible + span { outline: 2px solid var(--clay); outline-offset: -4px; border-radius: 999px; }
.svpers__ind { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 4); border-radius: 999px; background: var(--fg); transform: translateX(calc(var(--i, 1) * 100%)); transition: transform .6s var(--ease); }
.svpal { display: flex; flex-wrap: wrap; gap: 8px; }
.svpal button { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 14px; transition: border-color .3s, transform .4s var(--ease); }
.svpal button:hover { border-color: var(--fg); transform: translateY(-2px); }
.svpal button.is-on { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.svpal__dots { display: inline-flex; }
.svpal__dots i { width: 16px; height: 16px; border-radius: 50%; margin-left: -5px; box-shadow: 0 0 0 2px var(--paper); }
.svpal__dots i:first-child { margin-left: 0; }
.svitems { display: grid; }
.svitem { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 12px 0; border-top: 1px solid rgba(217, 205, 189, .6); transition: opacity .4s; }
.svitem:first-child { border-top: 0; }
.svitem.is-off .svglz, .svitem.is-off .svitem__sum { opacity: .35; }
.svitem__on { display: grid; grid-template-columns: 22px 46px minmax(0, 1fr); align-items: center; gap: 12px; cursor: pointer; }
.svitem__on input { width: 20px; height: 20px; margin: 0; accent-color: var(--clay); }
.svitem__ico { position: relative; width: 46px; height: 56px; }
.svitem__ico img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; background: var(--slip); }
.svitem__ico i { position: absolute; right: -5px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg), inset 0 0 0 1px rgba(42, 34, 28, .18); transition: background .5s var(--ease); }
.svitem__t { display: grid; gap: 1px; }
.svitem__t b { font: 400 18px/1.2 var(--font-head); }
.svitem__t small { font-size: 13px; color: var(--muted); }
.svitem__sum { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.svglz { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; padding-left: 80px; transition: opacity .4s; }
.svglz label { position: relative; cursor: pointer; }
.svglz input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.svglz span { display: block; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), transparent 48%), var(--c); box-shadow: inset 0 0 0 1px rgba(42, 34, 28, .16); transition: transform .4s var(--ease), box-shadow .3s; }
.svglz label:hover span { transform: translateY(-2px); }
.svglz input:checked + span { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--fg); }
.svglz input:focus-visible + span { outline: 2px solid var(--clay); outline-offset: 4px; }
.svglz__n { align-self: center; margin-left: 6px; font: italic 400 15px var(--font-head); color: var(--muted); }
.svsum { display: grid; gap: 12px; margin-top: 10px; padding: 24px; border-radius: 24px; background: var(--paper); border: 1px solid var(--line); }
.svsum__k { margin: 0; font: 300 28px/1.1 var(--font-head); }
.svsum__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.svsum__list li { display: flex; justify-content: space-between; gap: 12px; }
.svsum__list span { color: var(--muted); }
.svsum__tot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.svsum__tot span { font-size: 15px; }
.svsum__tot b { font: 300 40px/1 var(--font-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.svsum__off { margin: 0; font-size: 14px; color: var(--ok); }
.svsum__hint { margin: 0; font-size: 13px; color: var(--muted); }
.svsum .btn { width: 100%; }
.svbar { display: none; }
.svitem .it-pop { animation: pop .5s var(--ease); }
@keyframes pop { 40% { transform: scale(1.12); } }

/* стол сверху (SVG из js/table.js) */
.tb-item { transform-box: fill-box; transform-origin: center; }
.tb-seat { transition: transform .8s var(--ease); }
.tb-in { animation: tb-drop .8s var(--ease) both; }
.tb-out { animation: tb-lift .45s var(--ease) both; }
@keyframes tb-drop { from { opacity: 0; transform: translateY(-18px) scale(1.22) rotate(-6deg); } 55% { opacity: 1; } }
@keyframes tb-lift { to { opacity: 0; transform: translateY(-14px) scale(1.12); } }
.glz { transition: fill .7s var(--ease); }
.tb-pulse { animation: tb-pulse .7s var(--ease); }
@keyframes tb-pulse { 35% { transform: scale(1.06); } }

/* ——— мастерская ——— */
.about { position: relative; }
.about__hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px 60px; align-items: end; padding: 16px 0 60px; }
.about__t { font-size: clamp(52px, 7vw, 116px); line-height: .96; letter-spacing: -.04em; margin: 0; }
.about__lead { color: #4e4238; font-size: var(--step-1); margin: 0; }
.about__collage { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding-bottom: clamp(90px, 12vw, 170px); }
.about__ph { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--slip); }
.about__ph img { width: 100%; height: 100%; object-fit: cover; }
.about__ph--1 { grid-column: 1 / span 5; aspect-ratio: 3 / 4; }
.about__ph--2 { grid-column: 7 / span 4; aspect-ratio: 1; margin-top: 140px; }
.about__ph--3 { grid-column: 10 / span 3; aspect-ratio: 4 / 5; margin-top: -60px; grid-row: 2; }
.about__collage .sketch { left: 44%; top: 20px; width: 150px; }
.people { padding-bottom: clamp(90px, 12vw, 170px); }
.people__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.person { grid-column: span 5; padding: 30px; border-radius: 24px; background: var(--paper); border: 1px solid var(--line); }
.person + .person { grid-column: 7 / span 5; margin-top: 70px; }
.person__ph { margin: -10px -10px 22px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: var(--slip); }
.person__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.person:hover .person__ph img { transform: scale(1.05); }
.person h3 { font-size: 36px; margin: 0; }
.person__r { color: var(--clay); margin: 4px 0 14px; }
.person p:last-child { color: #4e4238; margin: 0; }
.people__note { grid-column: 1 / -1; }
.steps6 { padding-bottom: clamp(70px, 10vw, 150px); }
.steps6__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap); counter-reset: s; }
.steps6__list li { counter-increment: s; display: grid; gap: 8px; padding: 26px 0 30px; border-top: 1px solid var(--line); }
.steps6__list li::before { content: '0' counter(s); font-size: 13px; color: var(--clay); letter-spacing: .1em; }
.steps6__list b { font: 300 34px var(--font-head); }
.steps6__list span { color: var(--muted); max-width: 22em; }
.glazes--page { padding-top: 0; }
.mk--page { padding-top: 0; }
.mk--page .link-arrow { margin-top: 12px; }

/* ——— доставка ——— */
.info { padding-bottom: 110px; }
.info__head { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px 60px; align-items: end; padding: 10px 0 60px; border-bottom: 1px solid var(--line); }
.info__t { font-size: clamp(56px, 8vw, 130px); line-height: .92; letter-spacing: -.045em; margin: 0; }
.info__lead { margin: 0; color: #4e4238; font-size: var(--step-1); }
.info__head .sketch { right: 34%; top: -10px; width: 130px; opacity: .8; }
.info__sec { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px var(--gap); padding: 56px 0; border-bottom: 1px solid var(--line); }
.info__h { font-size: 40px; margin: 0; }
.dtable { display: grid; }
.dtable__r { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 6px 20px; padding: 18px 0; border-top: 1px solid var(--line); align-items: baseline; }
.dtable__r:first-child { border-top: 0; padding-top: 4px; }
.dtable__r b { font: 400 22px var(--font-head); }
.dtable__r span { color: var(--muted); }
.dtable__r em { font-style: normal; text-align: right; font-weight: 600; }
.info__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px var(--gap); }
.info__list li { display: grid; gap: 6px; }
.info__list b { font: 400 22px var(--font-head); }
.info__list span { color: var(--muted); }
.faq details { border-top: 1px solid var(--line); }
.faq details:first-child { border-top: 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; font: 400 22px var(--font-head); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 300 28px/1 var(--font-body); color: var(--clay); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: #4e4238; max-width: 44em; padding-bottom: 14px; }
.faq a { color: var(--clay-d); }

/* ——— переходы между страницами ——— */
::view-transition-old(root) { animation: vt-out .5s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in .75s var(--ease-io) both; }
::view-transition-group(pimg) { animation-duration: .7s; animation-timing-function: var(--ease); }
::view-transition-old(dock), ::view-transition-new(dock) { animation: none; }
@keyframes vt-out { to { opacity: .2; transform: translateY(-50px) scale(.98); } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0 round 40px 40px 0 0); transform: translateY(80px); } to { clip-path: inset(0 0 0 0 round 0); transform: none; } }

/* ——— планшет ——— */
@media (max-width: 1180px) {
  .top__note { display: none; }
  .top__in { grid-template-columns: auto 1fr; }
  .top__logo { justify-self: start; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .shelfgrid > .card:nth-child(n) { grid-column: span 4; margin-top: 0; }
  .shelfgrid > .card:nth-child(6n+1) { grid-column: span 8; }
  .shelfgrid > .card:nth-child(6n+2) { margin-top: 80px; }
  .care { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .col--1 { grid-column: 1 / span 7; } .col--2 { grid-column: 8 / span 5; margin-top: 120px; }
  .col--3 { grid-column: 1 / span 4; margin-top: 0; } .col--4 { grid-column: 5 / span 4; margin-top: 70px; } .col--5 { grid-column: 9 / span 4; margin-top: -30px; }
  .card__body { grid-template-columns: minmax(0, 1fr); }
  .card__price { grid-column: 1; grid-row: auto; padding: 0; }
  .foot__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__about { grid-column: 1 / -1; }
  .cathero { grid-template-columns: auto 1fr; }
  .cathero__lead { grid-column: 1 / -1; margin-top: 18px; max-width: 34em; }
  .cathero .sketch { right: 0; }
}
@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'k' 't' 'w' 'l' 'c' 'f'; min-height: 0; padding-top: 0; gap: 0; }
  .hero__copy { display: contents; }
  .kicker { grid-area: k; } .hero__t { grid-area: t; } .hero__wheel { grid-area: w; margin-bottom: 30px; } .hero__lead { grid-area: l; } .hero__cta { grid-area: c; } .hero__facts { grid-area: f; }
  .wheel { width: min(100%, 560px); }
  .story { height: auto; padding: 90px 0 70px; }
  .story__pin { position: static; height: auto; display: block; padding: 0; overflow: visible; }
  .story__media { display: none; }
  .story__text { padding: 0 var(--pad); }
  .story__h { margin-bottom: 28px; }
  .story__steps { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 10px; scrollbar-width: none; min-height: 0; }
  .story__steps::-webkit-scrollbar { display: none; }
  .story__step, .story__step.is-on { position: relative; inset: auto; flex: 0 0 min(80%, 360px); scroll-snap-align: start; opacity: 1; visibility: visible; transform: none; }
  .story__mimg { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); margin-bottom: 18px; }
  .story__step h3 { font-size: 34px; }
  .story__step p { font-size: 16px; }
  .story__bar { display: none; }
  .setteaser__in { grid-template-columns: minmax(0, 1fr); }
  .glazes__body { grid-template-columns: minmax(0, 1fr); }
  .ginfo { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 22px; min-height: 0; }
  .mk { grid-template-columns: minmax(0, 1fr); }
  .svgrid { grid-template-columns: minmax(0, 1fr); }
  .svstage__table { width: min(100%, calc(44vh * 1.58)); margin-inline: auto; }
  .svstage { top: 0; z-index: 6; padding: 10px 0 8px; margin: 0 calc(-1 * var(--pad)); padding-inline: var(--pad); background: var(--bg); }
  .svhead__row, .about__hero, .info__head { grid-template-columns: minmax(0, 1fr); }
  .info__sec { grid-template-columns: minmax(0, 1fr); }
  .pwrap .product { grid-template-columns: minmax(0, 1fr); }
}

/* ——— телефон ——— */
@media (max-width: 760px) {
  :root { --gap: 14px; --step-0: 16px; --step-1: 17px; }
  body { padding-bottom: 86px; }
  .top__in { padding: 14px var(--pad); }
  .top__nav { display: none; }
  .top__mcart { display: grid; }
  .logo__w { font-size: 30px; }
  .dock { bottom: 12px; transform: translate(-50%, 0); width: calc(100% - 24px); max-width: 420px; justify-content: space-between; }
  .dock > * { padding: 0 12px; font-size: 14px; height: 46px; }
  .dock__cart { padding: 0 14px; }
  .toast { bottom: 84px; }
  .hero__t { font-size: clamp(46px, 13.6vw, 72px); margin-bottom: 14px; }
  .hero__lead { font-size: 17px; }
  .hero__cta { margin-bottom: 30px; }
  .hero__facts { gap: 18px; justify-content: space-between; }
  .hero__facts dd { font-size: 22px; }
  .hero__facts dt { font-size: 10px; }
  .wheel { width: 100%; }
  .wheel__ui { gap: 12px; }
  .wseg button { padding: 0 12px; font-size: 14px; height: 36px; }
  .band { padding: 12px 0; }
  .manifest { display: block; padding: 70px 0 80px; }
  .manifest__t { font-size: 27px; line-height: 1.2; margin-bottom: 28px; }
  .manifest .sketch { position: relative; display: block; bottom: auto; width: 90px; margin: 30px 0 0 auto; }
  .sec-head { margin-bottom: 30px; }
  .sec-h { font-size: clamp(34px, 10vw, 46px); }
  .cols__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 14px; }
  .col.col--1 { grid-column: 1 / -1; margin: 0; }
  .col.col--2 { grid-column: 1; margin-top: 0; }
  .col.col--3 { grid-column: 2; margin-top: 60px; }
  .col.col--4 { grid-column: 1; margin-top: -40px; }
  .col.col--5 { grid-column: 2; margin-top: 20px; }
  .col__cap { grid-template-columns: minmax(0, 1fr); }
  .col__n { grid-row: auto; }
  .col__c { grid-column: 1; }
  .col__t { font-size: 24px; }
  .col__s { font-size: 13px; }
  .shelfgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 14px; }
  .shelfgrid > .card:nth-child(n) { grid-column: auto; margin-top: 0; }
  .shelfgrid > .card:nth-child(5n+1) { grid-column: 1 / -1; }
  .shelfgrid > .card:nth-child(5n+3), .shelfgrid > .card:nth-child(5n+5) { margin-top: 44px; }
  .card__body { grid-template-columns: minmax(0, 1fr); padding-top: 10px; }
  .card__name { font-size: 18px; }
  .shelfgrid > .card:nth-child(5n+1) .card__name { font-size: 24px; }
  .card__price { grid-column: 1; grid-row: auto; padding: 0; font-size: 15px; }
  .card__meta { font-size: 13px; }
  .card__add { width: 100%; justify-content: center; }
  .card__fav { width: 34px; height: 34px; right: 8px; top: 8px; }
  .setteaser { padding: 60px 0; }
  .glazes__row { flex-wrap: wrap; justify-content: center; gap: 18px 14px; min-height: 0; }
  .drop:nth-child(n) { --sz: 74px; margin-bottom: 0; }
  .drop:nth-child(2n) { margin-top: 30px; }
  .drop__n { font-size: 15px; }
  .ginfo__name { font-size: 34px; }
  .glazes .sketch { display: none; }
  .care { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .care__i { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; padding: 18px 0; }
  .care__i svg { grid-row: span 2; margin: 0; }
  .care__i h3 { font-size: 22px; }
  .mk { padding-bottom: 80px; }
  .foot__word text { font-size: 330px; }
  .foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__col:last-child { grid-column: 1 / -1; }
  .foot__legal { flex-direction: column; }
  .cathero { margin-bottom: 26px; padding-bottom: 24px; }
  .cathero .sketch { display: none; }
  .catalog .cat-chips { flex-wrap: nowrap; overflow-x: auto; gap: 22px; margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); scrollbar-width: none; }
  .catalog .cat-chips::-webkit-scrollbar { display: none; }
  .catalog .cat-chips .chip { font-size: 24px; }
  .cattools { gap: 10px 14px; margin-bottom: 26px; }
  .cattools__f { flex: 1 1 100%; justify-content: center; }
  .cattools__q { min-width: 0; flex: 1 1 140px; }
  .filters { width: 100%; border-radius: 0; }
  .pwrap .product { padding-top: 6px; }
  .ptitle { font-size: 38px; }
  .pbuy .btn { order: 3; flex: 1 1 100%; }
  .pbuy .pfav { margin-left: auto; }
  .gallery__thumbs button { width: 60px; }
  .pinfo { padding: 28px 0; }
  .related .grid { --cols: 2; gap: 30px 14px; }
  .page-title { font-size: 52px; }
  .svhead__t { font-size: clamp(54px, 15vw, 80px); }
  .svhead__row { padding-bottom: 20px; }
  .svgrid { padding-top: 6px; }
  .svstage__table { border-radius: 18px; }
  .svstage__bar { gap: 6px 12px; }
  .svstage__cap { font-size: 15px; }
  .svsurf button { height: 30px; padding: 0 10px; font-size: 13px; }
  .svglz { padding-left: 0; gap: 6px; }
  .svglz span { width: 30px; height: 30px; }
  .svitem__on { grid-template-columns: 22px 40px minmax(0, 1fr); gap: 10px; }
  .svitem__ico { width: 40px; height: 50px; }
  .svsum { padding: 18px; }
  .is-set .dock { display: none; }
  .is-set { padding-bottom: 92px; }
  .svbar { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 999px; background: rgba(38, 30, 25, .94); color: var(--paper); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .svbar__t { margin: 0; display: grid; font-size: 12px; line-height: 1.2; color: rgba(248, 244, 237, .7); }
  .svbar__t b { font: 400 22px var(--font-head); color: var(--paper); }
  .svbar .btn { min-height: 46px; padding: 0 20px; }
  .about__collage { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .about__ph--1 { grid-column: 1 / span 4; }
  .about__ph--2 { grid-column: 3 / span 4; margin-top: -40px; grid-row: 2; }
  .about__ph--3 { grid-column: 1 / span 3; margin-top: -60px; grid-row: 3; }
  .about__collage .sketch { left: auto; right: 0; top: 0; width: 80px; }
  .people__grid { grid-template-columns: minmax(0, 1fr); }
  .person, .person + .person { grid-column: 1; margin: 0; padding: 22px; }
  .steps6__list { grid-template-columns: minmax(0, 1fr); }
  .info__list { grid-template-columns: minmax(0, 1fr); }
  .dtable__r { grid-template-columns: minmax(0, 1fr) auto; }
  .dtable__r span { grid-column: 1 / -1; grid-row: 2; }
  .info__h { font-size: 32px; }
  .info__sec { padding: 40px 0; }
  .info__head .sketch { display: none; }
}

/* ——— без анимаций ——— */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .pl { display: none; }
  .js .is-split .w__i, .js .is-split .pill, .js .card.rv { opacity: 1; transform: none; filter: none; transition: none; }
  .js [data-draw] path, .js .passport .draw .dl { stroke-dashoffset: 0; transition: none; }
  .js .passport .draw text { opacity: 1; transition: none; }
  .band__track, .wheel__ring, .kicker__dot, .pl__marks { animation: none; }
  img[data-par] { transform: none; }
  .story__ph, .story__ph img, .story__step, .tb-seat, .glz { transition: none; }
  .tb-in, .tb-out, .tb-pulse { animation: none; }
  .dock, .mmenu, .drawer, .filters { transition: none; }
}