/* Витрина «Постер 360» (26.10.2026) — по макету https://claude.ai/artifact/V3ASWAMXSNR3BVyX3GQTrf:
   палитра «графит + коралл», фон белый, заголовки Jost, текст Manrope. Исходник: marketplace/poster360-site/site/. */
:root {
  --bg: #FFFFFF; --surface: #FFFFFF; --soft: #F1F0ED; --wall: #E9E6E1;
  --text: #1E1F22; --muted: #5A5D64; --line: #E4E2DE; --line-strong: #8B8D93;
  --brand: #2A2C31; --accent: #FF6F5B; --accent-soft: #FFE3DE; --accent-ink: #B7341F;
  --btn: #D63F2A; --btn-ink: #FFFFFF; --btn-hover: #B9321F;
  --btn2: #2A2C31; --btn2-ink: #FFFFFF; --btn2-hover: #17181B;
  --dark: #2A2C31; --on-dark: #FFFFFF; --on-dark-muted: #C4C6CC; --accent-on-dark: #FF8A78; --footer: #1A1B1E;
  --badge-canvas: #2A2C31; --badge-canvas-ink: #FFFFFF; --badge-paper: #FFE3DE; --badge-paper-ink: #9A2C1A;
  --hit: #FF6F5B; --hit-ink: #1E1F22; --focus: #D63F2A;
  --font: 'Manrope', 'Segoe UI', Arial, sans-serif; --font-h: 'Jost', 'Segoe UI', Arial, sans-serif;
  --r-xl: 28px; --r-lg: 20px; --r-md: 14px; --g: 32px; --hdr: 76px;
  --shadow: 0 2px 28px rgba(20, 24, 34, .07);
}
@media (max-width: 760px) { :root { --g: 16px; --r-xl: 22px; --hdr: 60px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* иначе display:grid у лент перебивает hidden (вкладки «Подборок») */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--font); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-h); margin: 0; letter-spacing: -.01em; line-height: 1.12; font-weight: 700; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: 1360px; margin: 0 auto; padding-left: max(var(--g), env(safe-area-inset-left, 0px)); padding-right: max(var(--g), env(safe-area-inset-right, 0px)); }
.muted { color: var(--muted); }
.note { font-size: 12.5px; color: var(--muted); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.test-bar { background: #1A1B1E; color: #C4C6CC; font-size: 12.5px; text-align: center; padding: 6px 16px; }
.test-bar b { color: #fff; font-weight: 600; }

/* ---------- шапка ---------- */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.hdr-row { display: flex; align-items: center; gap: 18px; height: var(--hdr); }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: 44px; width: auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; font-weight: 700; padding: 13px 24px; font-size: 15px; line-height: 1.2; transition: background .2s, transform .15s; white-space: nowrap; }
.btn-primary { background: var(--btn); color: var(--btn-ink); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-dark { background: var(--btn2); color: var(--btn2-ink); }
.btn-dark:hover { background: var(--btn2-hover); }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--text); }
.btn-lg { padding: 17px 32px; font-size: 17px; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.search { flex: 1; position: relative; min-width: 0; }
.search input { width: 100%; height: 46px; border-radius: 999px; border: 1.5px solid transparent; background: var(--soft); padding: 0 18px 0 46px; font-size: 15px; }
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; border-color: var(--line-strong); background: var(--surface); }
.search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--muted); pointer-events: none; }
.hdr-act { display: flex; align-items: center; gap: 6px; flex: none; }
.icon-btn { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { border-color: var(--line-strong); }
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn .cnt { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--btn); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid var(--surface); }
.icon-btn .cnt[data-n="0"] { display: none; }
.hdr-nav { display: flex; gap: 4px; padding-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.hdr-nav::-webkit-scrollbar { display: none; }
.hdr-nav a { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.hdr-nav a:hover, .hdr-nav a.on { background: var(--soft); color: var(--text); }
.hdr-nav a.hot { color: var(--accent-ink); }
.only-m { display: none !important; }
.search-m { display: none; padding-bottom: 10px; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -20px rgba(0,0,0,.25); display: none; max-height: calc(100vh - 140px); overflow: auto; }
.mega.open { display: block; }
.mega .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 28px; padding-bottom: 32px; }
.mega h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 12px; font-family: var(--font); font-weight: 700; }
.mega ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.mega li { padding: 5px 0; break-inside: avoid; }
.mega li a { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.mega li a span { color: var(--muted); font-weight: 400; font-size: 13px; font-variant-numeric: tabular-nums; }
.mega li a:hover { color: var(--accent-ink); }
.mega .all { display: inline-block; margin-top: 10px; color: var(--accent-ink); font-weight: 700; }

/* ---------- секции ---------- */
main.screen { padding-top: 12px; padding-bottom: 24px; }
.sec { background: var(--surface); border-radius: var(--r-xl); padding: 52px 56px; margin: 12px 0; box-shadow: var(--shadow); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.sec-title { font-size: clamp(26px, 3.2vw, 42px); }
.sec-sub { color: var(--muted); margin-top: 10px; max-width: 640px; font-size: 17px; }
.link-more { font-weight: 700; color: var(--accent-ink); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.link-more:hover { text-decoration: underline; }
.crumbs { font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; }

/* ---------- первый экран ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: var(--surface); border-radius: 30px; overflow: hidden; box-shadow: var(--shadow); min-height: 600px; margin: 10px 0 12px; }
.hero-text { padding: 64px 56px 56px 64px; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.hero h1 { font-size: clamp(34px, 4.6vw, 64px); font-weight: 700; text-transform: uppercase; line-height: 1.02; }
.hero h1 em { font-style: normal; color: var(--accent-ink); }
.hero-sub { font-size: clamp(16px, 1.5vw, 19px); color: var(--muted); max-width: 520px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 8px; border-top: 1px solid var(--line); }
.hero-facts div { padding-top: 14px; }
.hero-facts b { display: block; font-family: var(--font-h); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-facts span { font-size: 14px; color: var(--muted); }
.wall { position: relative; background: var(--wall); overflow: hidden; min-height: 420px; }
.wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 15%; background: linear-gradient(to bottom, rgba(0,0,0,.04), rgba(0,0,0,.09)); }
.wall .hang { position: absolute; transform: translate(-50%, -50%); }
.wall .hang img { width: 100%; height: auto; box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 22px 32px -14px rgba(0,0,0,.5); }
.wall .console { position: absolute; left: 22%; right: 22%; bottom: 15%; height: 3.2%; background: var(--brand); border-radius: 3px; }
.wall .console::before, .wall .console::after { content: ""; position: absolute; bottom: -260%; width: 3%; height: 260%; background: var(--brand); }
.wall .console::before { left: 6%; } .wall .console::after { right: 6%; }
.wall .vase { position: absolute; left: 35.5%; bottom: 18.2%; width: 3.6%; height: 6.4%; background: var(--accent); border-radius: 40% 40% 30% 30%; }

/* ---------- темы и художники ---------- */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.tile { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--soft); display: block; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.tile:hover img { transform: scale(1.05); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,18,.88) 0%, rgba(10,12,18,.5) 28%, rgba(10,12,18,0) 54%); }
.tile-cap { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #fff; }
.tile-cap b { display: block; font-family: var(--font-h); font-size: 20px; font-weight: 700; line-height: 1.15; }
.tile-cap span { font-size: 13px; opacity: .92; }
.artists { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 22px 16px; }
.artist { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.artist .ava { width: 100%; max-width: 132px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--soft); box-shadow: 0 0 0 4px var(--surface), 0 0 0 5.5px var(--line); }
.artist:hover .ava { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--btn); }
.artist .ava img { width: 100%; height: 100%; object-fit: cover; }
.artist b { font-weight: 700; font-size: 15px; line-height: 1.25; }
.artist span { font-size: 13px; color: var(--muted); }

/* ---------- плитки товаров ---------- */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.card-media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-md); background: var(--soft); overflow: hidden; }
.card-media .art { position: absolute; inset: 9% 12% 12%; width: 76%; height: 79%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0,0,0,.28)) drop-shadow(0 1px 1px rgba(0,0,0,.2)); transition: transform .35s; }
.card-media:hover .art { transform: scale(1.03); }
.card-alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.card-media:hover .card-alt { opacity: 1; }
.badges { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; z-index: 2; }
.badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; line-height: 1.3; }
.b-canvas { background: var(--badge-canvas); color: var(--badge-canvas-ink); }
.b-paper { background: var(--badge-paper); color: var(--badge-paper-ink); }
.b-hit { background: var(--hit); color: var(--hit-ink); }
.card-body { padding: 12px 2px 0; display: flex; flex-direction: column; gap: 4px; }
.card-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-title { font-family: var(--font); font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-title a:hover { color: var(--accent-ink); }
.card-sizes { font-size: 12.5px; color: var(--muted); }
.card-price { font-family: var(--font-h); font-weight: 700; font-size: 20px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.card-price small { font-family: var(--font); font-weight: 600; font-size: 13px; color: var(--muted); margin-right: 4px; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 20px) / 5); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.strip > * { scroll-snap-align: start; }
.strip-wrap { position: relative; }
.strip-nav { position: absolute; top: calc(40% - 24px); z-index: 5; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.14); transition: transform .15s, border-color .15s; }
.strip-nav:hover { border-color: var(--line-strong); transform: scale(1.06); }
.strip-nav svg { width: 22px; height: 22px; }
.strip-nav.prev { left: -22px; }
.strip-nav.next { right: -22px; }
@media (max-width: 760px) {   /* телефон: стрелки поверх ленты у краёв экрана (лента во всю ширину) */
  .strip-nav { width: 40px; height: 40px; top: calc(40% - 20px); }
  .strip-nav svg { width: 19px; height: 19px; }
  .strip-nav.prev { left: 8px; }
  .strip-nav.next { right: 8px; }
}
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.tab { border: 1.5px solid var(--line); background: var(--surface); padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--muted); }
.tab:hover { color: var(--text); border-color: var(--line-strong); }
.tab[aria-selected="true"] { background: var(--btn2); border-color: var(--btn2); color: #fff; }

/* ---------- размеры, материалы, доставка ---------- */
.sizes-vis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.sizes-row { display: flex; align-items: flex-end; justify-content: center; gap: 2.6%; aspect-ratio: 640 / 290; border-bottom: 2px solid var(--line); }
.szbox { position: relative; background: var(--soft); border: 2px solid var(--line-strong); border-radius: 3px; flex: none; }
.szbox span { position: absolute; top: 8%; left: 0; right: 0; text-align: center; font-family: var(--font-h); font-weight: 700; font-size: 15px; }
.szbox em { position: absolute; bottom: 6%; left: 0; right: 0; text-align: center; font-style: normal; font-size: 12px; color: var(--muted); }
.sz-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.sz-table th, .sz-table td { padding: 12px 8px; text-align: left; border-bottom: 1px solid var(--line); }
.sz-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.sz-table td:nth-child(n+3), .sz-table th:nth-child(n+3) { text-align: right; white-space: nowrap; }
.mats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mat { border-radius: var(--r-lg); background: var(--soft); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mat img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
.mat-body { padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; }
.mat-body h3 { font-size: 26px; }
.mat ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mat li { padding-left: 26px; position: relative; font-size: 15px; }
.mat li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 2.5px solid var(--btn); border-bottom: 2.5px solid var(--btn); transform: rotate(-45deg); }
.mat .from { font-family: var(--font-h); font-weight: 700; font-size: 22px; margin-top: auto; }
.sec-dark { background: var(--dark); color: var(--on-dark); position: relative; overflow: hidden; }
.sec-dark .sec-sub { color: var(--on-dark-muted); }
.sec-dark .eyebrow { color: var(--accent-on-dark); }
.perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.perk { border: 1.5px solid rgba(255,255,255,.18); border-radius: var(--r-lg); padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.perk .ic { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: var(--accent-on-dark); }
.perk .ic svg { width: 26px; height: 26px; }
.perk b { font-family: var(--font-h); font-size: 20px; font-weight: 700; }
.perk p { color: var(--on-dark-muted); font-size: 15px; }

/* ---------- подвал ---------- */
.ftr { background: var(--footer); color: var(--on-dark); margin-top: 24px; }
.ftr .wrap { padding-top: 56px; padding-bottom: 28px; }
.ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.ftr .logo img { height: 96px; }
.ftr p, .ftr li, .ftr a { color: var(--on-dark-muted); font-size: 14px; }
.ftr a:hover { color: var(--on-dark); text-decoration: underline; }
.ftr h4 { font-family: var(--font); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--on-dark); margin-bottom: 14px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pay-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pay-badges span { border: 1px solid rgba(255,255,255,.22); color: var(--on-dark); border-radius: 8px; padding: 5px 10px; font-size: 13px; font-weight: 700; }
.ftr-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 40px; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 13px; }

/* ---------- каталог ---------- */
.cat-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 18px; }
.cat-head h1 { font-size: clamp(28px, 3.4vw, 44px); }
.cat-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; }
.filters { background: var(--surface); border-radius: var(--r-lg); padding: 8px 22px 22px; box-shadow: var(--shadow); }
.f-group { border-bottom: 1px solid var(--line); padding: 16px 0; }
.f-group:last-of-type { border-bottom: 0; }
.f-group h3 { font-family: var(--font); font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.f-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; }
.f-list a, .chk { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14.5px; }
.f-list a .c, .chk .c { margin-left: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.f-list a.on { color: var(--accent-ink); font-weight: 700; }
.f-list a:hover { color: var(--accent-ink); }
.chk input { width: 18px; height: 18px; accent-color: var(--btn); margin: 0; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 13px; font-size: 13.5px; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.chip small { font-weight: 500; color: var(--muted); }
.chip.on, .chip[aria-pressed="true"] { border-color: var(--btn2); background: var(--btn2); color: #fff; }
.chip.on small, .chip[aria-pressed="true"] small { color: inherit; opacity: .85; }
.price-in { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.price-in input { width: 100%; height: 42px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); padding: 0 12px; font-size: 14px; }
.f-actions { display: flex; gap: 8px; margin-top: 16px; }
.f-actions .btn { flex: 1; padding: 11px 14px; font-size: 14px; }
.cat-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 20px; }
.cat-bar .found { font-size: 14px; color: var(--muted); margin-right: auto; }
.sel { position: relative; }
.sel select { appearance: none; height: 42px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); padding: 0 40px 0 16px; font-weight: 700; font-size: 14px; }
.sel::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.active-f { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.active-f:empty { display: none; }
.af { background: var(--accent-soft); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; display: inline-flex; gap: 8px; align-items: center; }
.af-reset { color: var(--accent-ink); font-weight: 700; font-size: 13px; text-decoration: underline; padding: 6px 4px; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 36px; }
.pager a, .pager span { min-width: 42px; height: 42px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.pager a:hover { border-color: var(--line-strong); }
.pager .cur { background: var(--btn2); border-color: var(--btn2); color: #fff; }
.pager .gap { border: 0; min-width: 20px; }
.empty { padding: 60px 20px; text-align: center; color: var(--muted); }
.f-open, .f-mob-head { display: none; }
.az { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.az a { min-width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.az a:hover { border-color: var(--btn); color: var(--accent-ink); }
.alist { columns: 4; column-gap: 32px; }
.alist h3 { font-size: 22px; margin: 14px 0 6px; break-after: avoid; }
.alist a { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; break-inside: avoid; font-size: 15px; }
.alist a span { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.alist a:hover { color: var(--accent-ink); }

/* ---------- карточка товара ---------- */
.pd { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.gal { position: sticky; top: calc(var(--hdr) + 54px); }
.gal-main { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-xl); background: var(--wall); overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* картинка — абсолютно по центру: тогда max-height в % считается от рамки и в Safari (26.10.2026: у картинки в потоке
   внутри рамки с aspect-ratio Safari процент не считал — вертикальный постер вылезал на 40 px и обрезался сверху и снизу) */
.gal-main > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 76%; max-height: 80%; width: auto; height: auto; box-shadow: 0 1px 2px rgba(0,0,0,.25), 4px 6px 0 -2px rgba(0,0,0,.08), 0 24px 34px -16px rgba(0,0,0,.5); }
.gal-main > img.full { left: 0; top: 0; transform: none; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: cover; box-shadow: none; }
@supports not (aspect-ratio: 1 / 1) { .gal-main { height: 0; padding-bottom: 100%; } }   /* старый Safari: квадрат без aspect-ratio */
.gal-main .wallviz { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.thumb { border: 2px solid transparent; border-radius: var(--r-md); background: var(--soft); padding: 0; overflow: hidden; aspect-ratio: 1; position: relative; display: flex; align-items: center; justify-content: center; }
.thumb img { max-width: 78%; max-height: 78%; }
.thumb img.cover { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: cover; }
.thumb[aria-pressed="true"] { border-color: var(--btn); }
.thumb span.t { position: absolute; left: 6px; right: 6px; bottom: 6px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.92); color: #1d1d1d; border-radius: 6px; padding: 2px 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-info { display: flex; flex-direction: column; gap: 18px; }
.pd-info h1 { font-size: clamp(28px, 3vw, 40px); }
.pd-by { font-size: 17px; color: var(--muted); }
.pd-by a { color: var(--accent-ink); font-weight: 700; }
.pd-by a:hover { text-decoration: underline; }
.lbl { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; display: flex; justify-content: space-between; gap: 10px; }
.lbl a { text-transform: none; letter-spacing: 0; color: var(--accent-ink); }
.sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.size { border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 12px 10px; text-align: left; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.size:hover:not(:disabled) { border-color: var(--line-strong); }
.size .fmt { font-size: 12px; color: var(--muted); font-weight: 700; }
.size .dim { font-weight: 800; font-size: 16px; }
.size .pr { font-family: var(--font-h); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.size[aria-pressed="true"] { border-color: var(--btn); box-shadow: inset 0 0 0 1.5px var(--btn); background: #FFF6F4; }
.size:disabled { opacity: .5; cursor: not-allowed; background: repeating-linear-gradient(-45deg, var(--surface), var(--surface) 6px, var(--soft) 6px, var(--soft) 12px); }
.size:disabled .pr { font-family: var(--font); font-weight: 500; font-size: 13px; }
.buy { background: var(--surface); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.price-big { font-family: var(--font-h); font-size: 42px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.split { font-size: 14px; color: var(--muted); }
.split b { color: var(--text); }
.buy-row { display: flex; gap: 10px; }
.buy-row .btn { flex: 1; }
.info-list { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; }
.info-list div { display: flex; gap: 12px; align-items: flex-start; }
.info-list svg { width: 22px; height: 22px; flex: none; color: var(--accent-ink); margin-top: 1px; }
.info-list b { display: block; font-weight: 800; }
.specs { width: 100%; border-collapse: collapse; font-size: 15px; }
.specs th, .specs td { padding: 11px 0; border-bottom: 1px dashed var(--line); text-align: left; vertical-align: top; }
.specs th { color: var(--muted); font-weight: 500; width: 46%; padding-right: 14px; }
.pd-more { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 44px; }
.pd-more h2 { font-size: 26px; margin-bottom: 16px; }
.pd-more p + p { margin-top: 12px; }
.wallviz { position: relative; aspect-ratio: 300 / 232; background: var(--wall); border-radius: var(--r-lg); overflow: hidden; }
.wallviz .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 8%; background: rgba(0,0,0,.07); }
.wallviz .sofa { position: absolute; bottom: 8%; left: 16.67%; width: 66.67%; height: auto; color: var(--brand); display: block; }
.wallviz .wv-art { position: absolute; left: 50%; transform: translateX(-50%); transition: all .35s ease; }
.wallviz .wv-art img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 16px 24px -12px rgba(0,0,0,.45); }
.wallviz .wv-dim { position: absolute; font-size: 12.5px; font-weight: 800; background: var(--surface); padding: 3px 9px; border-radius: 999px; white-space: nowrap; box-shadow: 0 3px 10px rgba(0,0,0,.12); transition: all .35s ease; }
.wallviz .wv-scale { position: absolute; left: 16.67%; width: 66.67%; bottom: 2.5%; font-size: 11.5px; text-align: center; color: var(--muted); }
.wv-sizes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- корзина ---------- */
.co { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.box { background: var(--surface); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow); margin-bottom: 16px; }
.box h2 { font-size: 22px; margin-bottom: 18px; }
.ci { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ci-media { aspect-ratio: 1; border-radius: 12px; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.ci-media img { max-width: 76%; max-height: 76%; box-shadow: 0 6px 10px -4px rgba(0,0,0,.4); }
.ci h3 { font-family: var(--font); font-size: 16px; font-weight: 800; }
.ci .meta { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.ci-act { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; }
.qty button { width: 34px; height: 34px; border: 0; background: transparent; font-size: 18px; font-weight: 700; }
.qty span { min-width: 26px; text-align: center; font-weight: 800; }
.rm { border: 0; background: transparent; color: var(--muted); font-size: 13.5px; text-decoration: underline; padding: 0; }
.ci-price { font-family: var(--font-h); font-weight: 700; font-size: 19px; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.ci-price small { display: block; font-family: var(--font); font-weight: 500; font-size: 12.5px; color: var(--muted); }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 15px; }
.sum-total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px; display: flex; justify-content: space-between; align-items: baseline; }
.sum-total b { font-family: var(--font-h); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.soon { background: var(--accent-soft); border-radius: var(--r-md); padding: 14px 16px; font-size: 14px; margin-top: 16px; }

/* ---------- оформление ---------- */
.box h2 { display: flex; align-items: center; gap: 12px; }
.box h2 .n { width: 30px; height: 30px; border-radius: 50%; background: var(--btn2); color: #fff; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; flex: none; font-family: var(--font); }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 700; min-width: 0; position: relative; }
.field input, .field textarea { height: 48px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); padding: 0 14px; font-size: 15px; font-weight: 400; width: 100%; }
.field textarea { height: 84px; padding: 12px 14px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--btn2); }
.field.wide { grid-column: 1 / -1; }
.field .muted { font-weight: 400; }
.field.bad input { border-color: var(--btn); }
.ferr { color: var(--btn); font-size: 13.5px; font-weight: 700; margin-top: 6px; }
.ferr:empty { display: none; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.opt { position: relative; border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 16px 16px 16px 48px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.opt input { position: absolute; left: 16px; top: 18px; width: 18px; height: 18px; accent-color: var(--btn); margin: 0; }
.opt b { font-weight: 800; font-size: 15.5px; }
.opt span { font-size: 13.5px; color: var(--muted); }
.opt:has(input:checked) { border-color: var(--btn2); box-shadow: inset 0 0 0 1px var(--btn2); background: var(--soft); }
.opt.dis { opacity: .5; cursor: not-allowed; }
.sugwrap { position: relative; }
.sug { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.25); max-height: 300px; overflow: auto; margin-top: 4px; }
.sug button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px 14px; font-size: 14.5px; font-weight: 500; }
.sug button:hover, .sug button:focus { background: var(--soft); }
.pvz-list { margin-top: 10px; max-height: 340px; overflow: auto; border: 1.5px solid var(--line); border-radius: 12px; }
.pvz-list label { display: flex; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14.5px; align-items: flex-start; }
.pvz-list label:last-child { border-bottom: 0; }
.pvz-list label:hover { background: var(--soft); }
.pvz-list input { margin-top: 3px; accent-color: var(--btn); flex: none; }
.pvz-list small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.pvz-list .empty { padding: 18px; }
.mini { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.mini-row { display: flex; justify-content: space-between; gap: 12px; }
.mini-row > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.consent { display: flex; gap: 10px; font-size: 13.5px; color: var(--muted); align-items: flex-start; }
.consent input { width: 18px; height: 18px; accent-color: var(--btn); flex: none; margin: 1px 0 0; }
.consent a { color: var(--accent-ink); text-decoration: underline; }
.sum { position: sticky; top: calc(var(--hdr) + 24px); }

/* ---------- подсказки поиска (26.10.2026) ---------- */
.sugg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 12px 40px rgba(20, 24, 34, .14); max-height: min(70vh, 560px); overflow-y: auto; padding: 6px 0; }
.sugg-h { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 10px 16px 6px; }
.sugg-note { font-size: 13px; color: var(--muted); padding: 8px 16px 2px; }
.sugg a { display: flex; align-items: center; gap: 12px; padding: 8px 16px; color: var(--text); }
.sugg a:hover, .sugg a.on { background: var(--soft); }
.sugg mark { background: none; color: var(--accent-ink); font-weight: 800; }
.sugg-lab { flex: none; font-size: 11.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.sugg-sec .sugg-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg-cnt { flex: none; font-size: 13px; color: var(--muted); }
.sugg-card img, .sugg-noimg { flex: none; width: 44px; height: 44px; object-fit: contain; background: var(--soft); border-radius: 8px; }
.sugg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sugg-txt .sugg-name { font-size: 14.5px; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sugg-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg-price { flex: none; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.sugg-all { justify-content: center; font-weight: 700; color: var(--accent-ink) !important; border-top: 1px solid var(--line); margin-top: 6px; padding: 12px 16px !important;
  position: sticky; bottom: -6px; background: var(--surface); }   /* «Все результаты» всегда видно, даже когда список прокручивается */
.sugg-empty { padding: 14px 16px; font-size: 14px; color: var(--muted); line-height: 1.5; }
@media (max-width: 760px) { .sugg { max-height: 65vh; } .sugg-price { font-size: 12.5px; } }

/* ---------- уведомление о cookie (26.10.2026) ---------- */
.cookie { position: fixed; z-index: 120; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 640px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 12px 40px rgba(20, 24, 34, .16);
  padding: 14px 16px; display: flex; gap: 14px; align-items: center; font-size: 14px; line-height: 1.5; }
.cookie p { flex: 1; min-width: 0; color: var(--muted); }
.cookie a { color: var(--accent-ink); text-decoration: underline; }
.cookie .btn { flex: none; padding: 10px 18px; font-size: 14px; }
body.has-mbar .cookie { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 520px) { .cookie { flex-direction: column; align-items: stretch; } }

/* ---------- вводный текст разделов каталога (SEO, 26.10.2026) ---------- */
.cat-intro { max-width: 78ch; color: var(--muted); font-size: 15px; line-height: 1.6; margin: -6px 0 18px; }
.cat-intro a { color: var(--accent-ink); text-decoration: underline; }
/* описания (descriptions.py, 27.10.2026): раздел — под товарами, карточка — первым абзацем «Описания» */
.about-sec { max-width: 78ch; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.about-sec h2 { font-family: var(--font-h); font-size: 22px; margin-bottom: 10px; }
.about-sec p, p.about { font-size: 15.5px; line-height: 1.65; }
.about-sec a { color: var(--accent-ink); text-decoration: underline; }
.cat-about { max-width: 78ch; margin: -6px 0 22px; }
.cat-about p { font-size: 15.5px; line-height: 1.65; }
.cat-more { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--accent-ink); font-weight: 700; font-size: 14.5px; text-decoration: underline; cursor: pointer; }
@media (max-width: 760px) {   /* на телефоне длинное описание свёрнуто до 5 строк, чтобы товары были видны сразу */
  .cat-about.clamp p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
}
p.about { margin-bottom: 10px; }

/* ---------- документы: /oferta, /vozvrat, /politika, /soglasie (26.10.2026) ---------- */
.doc-page { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; padding-bottom: 56px; }
.doc-nav { position: sticky; top: calc(var(--hdr) + 24px); align-self: start; display: flex; flex-direction: column; gap: 4px; }
.doc-nav a { padding: 10px 14px; border-radius: var(--r-md); font-size: 15px; color: var(--muted); line-height: 1.35; }
.doc-nav a:hover { background: var(--soft); color: var(--text); }
.doc-nav a.on { background: var(--soft); color: var(--text); font-weight: 700; }
.doc { max-width: 74ch; min-width: 0; }
.doc h1 { font-size: clamp(28px, 3.2vw, 42px); }
.doc-date { color: var(--muted); font-size: 14px; margin-top: 10px; }
.doc-lead { font-size: 17px; margin-top: 22px; }
.doc h2 { font-size: 21px; margin: 34px 0 12px; }
.doc p, .doc li { line-height: 1.65; }
.doc p + p { margin-top: 10px; }
.doc ul { margin: 10px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.doc ul + p { margin-top: 12px; }
.doc a { color: var(--accent-ink); text-decoration: underline; }
.doc-req { background: var(--soft); border-radius: var(--r-md); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.doc-req p + p { margin-top: 0; }
.doc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-top: 24px; }
.doc-card { background: var(--soft); border-radius: var(--r-lg); padding: 22px 24px; }
.doc-card h2 { margin: 0 0 8px; font-size: 19px; }
.doc-card p { color: var(--muted); font-size: 15px; }
@media (max-width: 900px) {
  .doc-page { grid-template-columns: 1fr; gap: 18px; }
  .doc-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .doc-nav a { background: var(--soft); font-size: 14px; padding: 8px 12px; }
}
.ftr-mail { font-weight: 700; color: var(--on-dark) !important; font-size: 16px !important; }
.ftr-docs { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 36px; font-size: 13px; }
.ftr-docs a { font-size: 13px; }
.ftr-docs + .ftr-bottom { margin-top: 18px; }
@media (max-width: 980px) { .sum { position: static; } }
@media (max-width: 760px) { .fields, .opts { grid-template-columns: 1fr; } }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; visibility: hidden; background: var(--text); color: #fff; padding: 13px 20px; border-radius: 999px; font-weight: 700; font-size: 14.5px; transition: transform .3s, opacity .3s, visibility .3s; z-index: 200; max-width: calc(100% - 32px); text-align: center; }
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast a { color: var(--accent-on-dark); text-decoration: underline; margin-left: 6px; }
.mbar { display: none; }

/* ---------- планшет ---------- */
@media (max-width: 1180px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .artists { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip { grid-auto-columns: calc((100% - 3 * 20px) / 4); }
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mats { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .co { grid-template-columns: minmax(0, 1fr) 330px; }
  .alist { columns: 3; }
}
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .sizes-vis, .pd, .pd-more { grid-template-columns: 1fr; }
  .gal { position: static; }
  .co { grid-template-columns: 1fr; }
  .alist { columns: 2; }
}

/* ---------- телефон ---------- */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .only-m { display: inline-flex !important; }
  .only-d { display: none !important; }
  /* шапка: меню слева, логотип строго по центру, корзина справа (26.10.2026) */
  .hdr-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .hdr-row > #burger { justify-self: start; }
  .hdr-row > .logo { justify-self: center; }
  .logo img { height: 34px; }
  .icon-btn { width: 42px; height: 42px; }
  .hdr-row .search, .hdr-row .cat-btn { display: none; }
  .hdr-act { justify-self: end; }
  .search-m { display: block; }
  .hdr-nav { display: none; }
  .mega .wrap { grid-template-columns: 1fr; gap: 20px; }
  .mega ul { columns: 1; }
  .sec { padding: 30px var(--g); margin-left: calc(-1 * var(--g)); margin-right: calc(-1 * var(--g)); border-radius: 22px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 22px; }
  .hero { margin-left: calc(-1 * var(--g)); margin-right: calc(-1 * var(--g)); border-radius: 0 0 24px 24px; margin-top: 0; min-height: 0; }
  .hero-text { padding: 26px var(--g) 28px; gap: 18px; }
  .hero h1 { font-size: 34px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .wall { min-height: 320px; order: -1; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile-cap b { font-size: 16px; }
  .artists { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 92px; overflow-x: auto; gap: 14px; margin: 0 calc(-1 * var(--g)); padding: 4px var(--g) 8px; scrollbar-width: none; }
  .artist b { font-size: 13px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .strip { grid-auto-columns: 44%; gap: 12px; margin: 0 calc(-1 * var(--g)); padding: 0 var(--g) 6px; scroll-padding-inline: var(--g); scrollbar-width: none; }   /* scroll-padding: начало ленты = 0 (иначе привязка ставила 16 px и «назад» в начале не вёл к концу) */
  .tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--g)) 18px; padding: 0 var(--g); scrollbar-width: none; }
  .tab { white-space: nowrap; }
  .card-title { font-size: 14.5px; }
  .card-price { font-size: 17px; }
  .badge { font-size: 11px; padding: 3px 8px; }
  .mat { grid-template-columns: 1fr; }
  .mat img { min-height: 0; aspect-ratio: 16 / 10; }
  .perks { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr; gap: 28px; }
  .ftr .logo img { height: 80px; }
  .cat-layout { grid-template-columns: 1fr; }
  .f-open { display: inline-flex; }
  .filters { position: fixed; inset: 0; z-index: 120; border-radius: 0; overflow: auto; padding: 0 var(--g) 100px; transform: translateX(-102%); transition: transform .3s; visibility: hidden; }
  .filters.open { visibility: visible; transform: none; }
  .f-mob-head { display: flex; position: sticky; top: 0; background: var(--surface); z-index: 2; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .f-mob-head b { font-family: var(--font-h); font-size: 20px; }
  .cat-bar .found { width: 100%; order: 3; }
  .cat-bar .sel { flex: 1; }
  .cat-bar .sel select { width: 100%; }
  .alist { columns: 1; }
  .pd { gap: 22px; }
  .gal-main { margin: 0 calc(-1 * var(--g)); border-radius: 0; }   /* квадрат, как на компьютере: фото «В интерьере» квадратные, в 5:4 обрезались */
  .thumbs { gap: 8px; }
  .sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-big { font-size: 34px; }
  .buy { padding: 18px 16px; }
  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--surface); border-top: 1px solid var(--line); padding: 10px var(--g) calc(10px + env(safe-area-inset-bottom, 0px)); gap: 12px; align-items: center; box-shadow: 0 -8px 24px rgba(0,0,0,.08); }
  .mbar .p { font-family: var(--font-h); font-weight: 700; font-size: 22px; line-height: 1; }
  .mbar .p small { display: block; font-family: var(--font); font-weight: 500; font-size: 12px; color: var(--muted); margin-top: 3px; }
  .mbar .btn { flex: 1; }
  body.has-mbar { padding-bottom: 80px; }
  body.has-mbar .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .box { padding: 22px 16px; margin-left: calc(-1 * var(--g)); margin-right: calc(-1 * var(--g)); border-radius: 22px; }
  .ci { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .ci-price { grid-column: 2; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }