/* Токены концепции C: светлый магазин, сланцевые нейтрали, акцент — терракота.
   Радиусы: кнопки и поля 8px, карточки 12px. */
/* Caveat — только для рукописных пометок в подвале */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');
:root {
  --bg: #ffffff;
  --surface: #f3f4f6;
  --tile: #e9ebee;
  --ink: #111418;
  --muted: #5a6068;
  --line: #e1e4e8;
  --accent: #a8401f;
  --accent-hover: #8f361a;
  --accent-soft: #f8ebe6;
  --ok: #2f7a4b;
  --font: 'Golos Text', system-ui, sans-serif;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --r-ctl: 8px; --r-card: 12px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --shadow: 0 12px 32px rgb(17 20 24 / .10);
  --wrap: 1360px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--font); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-5); }
@media (max-width: 767px) { .wrap { padding: 0 var(--s-4); } body { padding-bottom: 64px; } }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; }
.num { font-variant-numeric: tabular-nums; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 44px; padding: 0 var(--s-5); border-radius: var(--r-ctl); border: 1px solid var(--accent); background: var(--accent); color: #fff; font-weight: 600; white-space: nowrap; transition: background .15s, transform .1s; }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:active { transform: scale(.97); }
.btn--line { background: var(--bg); color: var(--ink); border-color: var(--line); }
.btn--line:hover { background: var(--surface); border-color: var(--line); }
.btn--dark { background: var(--ink); border-color: var(--ink); }
.btn--dark:hover { background: #2a2f36; border-color: #2a2f36; }

/* Шапка */
.head { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.head > .wrap { display: flex; align-items: center; gap: var(--s-4); height: 72px; }
.logo img { height: 22px; width: auto; filter: invert(1); }
.cat-btn { height: 44px; }
.search { position: relative; flex: 1; max-width: 560px; }
.search input { width: 100%; height: 44px; border: 1px solid #c9cdd3; border-radius: var(--r-ctl); padding: 0 var(--s-4) 0 42px; background: var(--bg); }
.search input::placeholder { color: #737a83; }
.search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.search > i { position: absolute; left: 14px; top: 13px; font-size: 18px; color: var(--muted); }
.suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: var(--s-2); display: none; }
.suggest.is-open { display: block; }
.sug { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--s-3); align-items: center; padding: 6px; border-radius: var(--r-ctl); }
.sug:hover, .sug:focus { background: var(--surface); outline: none; }
.sug img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.sug small { color: var(--muted); display: block; }
.sug-empty { padding: var(--s-3); color: var(--muted); margin: 0; }
.acts { display: flex; gap: var(--s-1); margin-left: auto; }
.act { position: relative; display: grid; justify-items: center; gap: 2px; font-size: 12px; color: var(--muted); background: none; border: 0; padding: 4px 8px; border-radius: var(--r-ctl); }
.act i { font-size: 22px; color: var(--ink); }
.act:hover { background: var(--surface); }
.count { position: absolute; top: 0; right: 6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent); color: #fff; font: 600 10px/18px var(--font); text-align: center; padding: 0 4px; }
@media (max-width: 1023px) { .acts .act span:not(.count) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .cat-btn .lbl { display: none; } .cat-btn { padding: 0 12px; } }
@media (max-width: 767px) { .head > .wrap { flex-wrap: wrap; height: auto; padding-block: var(--s-3); gap: var(--s-3); } .search { order: 3; flex-basis: 100%; max-width: none; } .acts { display: none; } .cat-btn { display: none; } }

/* Мега-панель каталога */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); display: none; }
.mega.is-open { display: block; }
.mega .wrap { display: grid; grid-template-columns: 260px 1fr; gap: var(--s-6); padding-block: var(--s-5) var(--s-6); }
.mega-cats { display: grid; gap: 2px; align-content: start; }
.mega-cats a { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: var(--r-ctl); }
.mega-cats a:hover, .mega-cats a.is-active { background: var(--surface); }
.mega-cats a span { color: var(--muted); }
.mega-series { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.mega-series a { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; transition: border-color .15s; }
.mega-series a:hover { border-color: var(--ink); }
.mega-series img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.mega-series div { padding: var(--s-2) var(--s-3) var(--s-3); }
.mega-series b { display: block; }
.mega-series small { color: var(--muted); }

section { padding-block: var(--s-8); }
.h2 { font-size: clamp(24px, 2.2vw, 32px); }
.sec-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; }
.more { color: var(--accent); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }

/* Первый экран: слайдер + две промо-плитки */
.hero { padding-top: var(--s-5); padding-bottom: 0; }
.hero .wrap { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-4); }
.slider { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 460px; background: var(--ink); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); display: flex; align-items: flex-end; color: #fff; }
.slide.is-on { opacity: 1; z-index: 1; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 12 15 / .72), transparent 65%); }
.slide-copy { position: relative; z-index: 1; padding: var(--s-7); max-width: 560px; }
.slide-copy small { font-weight: 600; color: #ffd6c8; }
.slide-copy h1, .slide-copy h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.05; margin: var(--s-2) 0 var(--s-3); }
.slide-copy p { margin: 0 0 var(--s-5); color: #e6e7e9; }
.slider-ctl { position: absolute; z-index: 2; right: var(--s-5); bottom: var(--s-5); display: flex; gap: var(--s-2); align-items: center; }
.dots { display: flex; gap: 6px; margin-right: var(--s-2); }
.dots button { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: rgb(255 255 255 / .45); transition: width .3s var(--ease), background .3s; }
.dots button[aria-current="true"] { width: 24px; background: #fff; }
.slider-ctl .arr { width: 40px; height: 40px; border-radius: var(--r-ctl); border: 0; background: rgb(255 255 255 / .18); color: #fff; backdrop-filter: blur(6px); font-size: 18px; display: grid; place-items: center; }
.promos { display: grid; gap: var(--s-4); }
.promo { border-radius: var(--r-card); padding: var(--s-5); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-4); position: relative; overflow: hidden; }
.promo h3 { font-size: 22px; line-height: 1.15; }
.promo p { margin: 6px 0 0; color: var(--muted); }
.promo--pay { background: var(--accent-soft); }
.promo--pay strong { font-size: 44px; line-height: 1; color: var(--accent); letter-spacing: -.03em; }
.promo--room { background: var(--ink); color: #fff; }
.promo--room img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.promo--room > :not(img) { position: relative; }
.promo--room p { color: #d7d9dc; }
.promo .btn { align-self: flex-start; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .slider { min-height: 380px; } .slide-copy { padding: var(--s-5); } .promos { grid-template-columns: 1fr 1fr; } .slider-ctl { top: var(--s-4); bottom: auto; right: var(--s-4); } }
@media (max-width: 560px) { .promos { grid-template-columns: 1fr; } }

/* Категории */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.cat { display: grid; grid-template-columns: 1fr 96px; align-items: center; gap: var(--s-3); padding: var(--s-4); background: var(--surface); border-radius: var(--r-card); transition: background .15s; }
.cat:hover { background: var(--tile); }
.cat b { display: block; font-weight: 600; }
.cat small { color: var(--muted); }
.cat img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; }
@media (max-width: 1023px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cat { grid-template-columns: 1fr; padding: var(--s-3); } .cat img { order: -1; width: 100%; height: auto; aspect-ratio: 1; } }

/* Подбор акустики */
.picker { background: var(--surface); border-radius: var(--r-card); padding: var(--s-6); display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-6); }
.picker h2 { font-size: clamp(24px, 2.4vw, 34px); }
.picker > div > p { color: var(--muted); margin: var(--s-2) 0 var(--s-5); max-width: 42ch; }
.q { margin-bottom: var(--s-4); border: 0; padding: 0; }
.q legend { font-weight: 600; margin-bottom: var(--s-2); padding: 0; }
.opts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.opt { border: 1px solid #c9cdd3; background: var(--bg); padding: 8px 14px; border-radius: var(--r-ctl); font-size: 14px; transition: border-color .15s, background .15s, color .15s; }
.opt[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.pick-res { display: grid; gap: var(--s-3); align-content: start; }
.pick-res h3, .pick-res h2 { font-size: 16px; color: var(--muted); font-weight: 500; }
.pick-item { display: grid; grid-template-columns: 88px 1fr auto; gap: var(--s-4); align-items: center; background: var(--bg); border-radius: var(--r-card); padding: var(--s-3); }
.pick-item img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; }
.pick-item b { display: block; }
.pick-item small { color: var(--muted); }
.pick-why { font-size: 13px; color: var(--ok); }
.pick-empty { background: var(--bg); border-radius: var(--r-card); padding: var(--s-5); color: var(--muted); }
@media (max-width: 900px) { .picker { grid-template-columns: 1fr; padding: var(--s-5); } .pick-item { grid-template-columns: 64px 1fr; } .pick-item img { width: 64px; height: 64px; } .pick-item .btn { grid-column: span 2; } }

/* Товары */
.filters { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-5); }
.chip { border: 1px solid var(--line); background: var(--bg); padding: 7px 14px; border-radius: 999px; font-size: 14px; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); } }
.card { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s; background: var(--bg); }
.card:hover { box-shadow: var(--shadow); border-color: transparent; }
.card-media { position: relative; aspect-ratio: 1; background: var(--tile); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.labels { position: absolute; top: var(--s-2); left: var(--s-2); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.lbl-b { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--bg); }
.lbl-b--sale { background: var(--accent); color: #fff; }
.lbl-b--new { background: var(--ink); color: #fff; }
.card-tools { position: absolute; top: var(--s-2); right: var(--s-2); display: grid; gap: 4px; }
.tool { width: 34px; height: 34px; border-radius: var(--r-ctl); border: 0; background: rgb(255 255 255 / .9); display: grid; place-items: center; font-size: 17px; }
.tool[aria-pressed="true"] { color: var(--accent); }
.card-body { padding: var(--s-3) var(--s-4) var(--s-4); display: grid; gap: 4px; flex: 1; align-content: start; }
.card-body small { color: var(--muted); }
.card-name { font-weight: 600; font-size: 16px; }
.swatches { display: flex; gap: 6px; margin: 4px 0; }
.sw { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bg); box-shadow: 0 0 0 1px #c9cdd3; padding: 0; }
.sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.stock { font-size: 13px; color: var(--ok); display: flex; gap: 4px; align-items: center; }
.stock.is-order { color: var(--muted); }
.price-row { display: flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; }
.price { font-size: 20px; font-weight: 700; }
.price-old { color: var(--muted); text-decoration: line-through; font-size: 14px; }
.split { font-size: 13px; color: var(--muted); }
.split b { color: var(--ink); font-weight: 600; }
.card-acts { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); padding: 0 var(--s-4) var(--s-4); }
.card-acts .btn { height: 40px; padding: 0 var(--s-3); }
.card-acts .btn.is-added { background: var(--ok); border-color: var(--ok); }
@media (max-width: 480px) { .card-acts { grid-template-columns: 1fr; } .card-acts .btn--line { display: none; } }

/* Серии */
.series-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-3); }
.ser { scroll-snap-align: start; border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.ser img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.ser div { padding: var(--s-3) var(--s-4) var(--s-4); }
.ser b { display: block; font-size: 17px; }
.ser small { color: var(--muted); display: block; }
.ser .num { font-weight: 600; margin-top: 4px; display: block; }

/* Преимущества */
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); padding-block: var(--s-6); border-block: 1px solid var(--line); }
.perk { display: flex; gap: var(--s-3); }
.perk i { font-size: 30px; color: var(--accent); flex: none; }
.perk b { display: block; }
.perk span { color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .perks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .perks { grid-template-columns: 1fr; } }

/* Кабинет и трекинг */
.lk { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-4); }
.lk-card { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-5); }
.lk-top { display: flex; justify-content: space-between; gap: var(--s-4); align-items: start; flex-wrap: wrap; margin-bottom: var(--s-5); }
.lk-top h3 { font-size: 20px; }
.lk-top small { color: var(--muted); display: block; }
.st { display: inline-flex; gap: 6px; align-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 13px; padding: 4px 10px; border-radius: 999px; }
.lk-items { display: flex; gap: var(--s-2); margin-bottom: var(--s-5); }
.lk-items img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: var(--s-3); }
.progress span { height: 6px; border-radius: 3px; background: var(--tile); }
.progress span.on { background: var(--accent); }
.lk-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; font-size: 12px; color: var(--muted); }
.lk-steps span.on { color: var(--ink); font-weight: 600; }
.lk-foot { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-5); }
@media (max-width: 767px) { .lk-steps { display: none; } }
.track h3 { font-size: 20px; margin-bottom: var(--s-2); }
.track p.sub { margin: 0 0 var(--s-4); color: var(--muted); }
.track label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.track-row { display: flex; gap: var(--s-2); }
.track input { flex: 1; min-width: 0; height: 44px; border: 1px solid #c9cdd3; border-radius: var(--r-ctl); padding: 0 var(--s-3); }
.track-out { margin-top: var(--s-4); }
.track-error { color: var(--accent); margin: 0; font-size: 14px; }
.track-skeleton { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--tile), var(--surface), var(--tile)); background-size: 200% 100%; animation: shimmer 1s linear infinite; margin-bottom: var(--s-3); }
@keyframes shimmer { to { background-position: -200% 0; } }
.track-steps { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.track-steps li { position: relative; padding: 0 0 var(--s-3) 24px; display: grid; }
.track-steps li::before { content: ''; position: absolute; left: 3px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--tile); }
.track-steps li.is-done::before { background: var(--ink); }
.track-steps li.is-current::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.track-steps li.is-current .track-name { font-weight: 600; color: var(--accent); }
.track-steps li:not(.is-done):not(.is-current) { color: var(--muted); }
.track-meta { font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .lk { grid-template-columns: minmax(0, 1fr); } }

/* Журнал и SEO */
.jr { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.jr a img { aspect-ratio: 4/3; object-fit: cover; width: 100%; border-radius: var(--r-card); margin-bottom: var(--s-3); }
.jr small { color: var(--muted); }
.jr h3 { font-size: 16px; line-height: 1.35; margin-top: 4px; font-weight: 600; }
@media (max-width: 900px) { .jr { grid-template-columns: 1fr 1fr; } }
.seo { columns: 2 340px; column-gap: var(--s-7); color: var(--muted); }
.seo p { margin: 0 0 var(--s-3); }

footer { background: var(--surface); padding-top: var(--s-8); font-size: 14px; }
.foot { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--s-5); }
.foot h4 { margin: 0 0 var(--s-3); font-size: 14px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: var(--muted); }
.foot a:hover { color: var(--ink); }
.foot .logo img { margin-bottom: var(--s-3); }
.foot .phone { font-size: 20px; font-weight: 700; display: block; margin-bottom: 4px; }
.foot p { margin: 0 0 var(--s-2); color: var(--muted); }
.pay { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--s-3); }
.pay span { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 600; }
.legal { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: var(--s-2) var(--s-5); flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.legal a:hover { color: var(--ink); }
@media (max-width: 900px) { .foot { grid-template-columns: 1fr 1fr; } .foot > :first-child { grid-column: span 2; } }
/* Подвал в манере студии SLK: карточки с жёсткой тенью, рукописные пометки, полоса-дизеринг */
.foot-card { display: block; max-width: 300px; margin-top: var(--s-3); padding: 8px 14px 10px; background: var(--bg); border: 2px solid var(--ink); border-radius: var(--r-ctl); box-shadow: 4px 4px 0 var(--accent); transition: transform .12s, box-shadow .12s; }
@media (hover: hover) and (pointer: fine) { .foot-card:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--accent); } }
.foot-card:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--accent); }
.foot-card small { display: block; font: 600 19px/1.1 'Caveat', cursive; color: var(--accent); }
.foot-card b { font-size: 17px; }
.studio { margin-left: auto; color: var(--ink); }
.studio b { font-weight: 800; letter-spacing: -.01em; }
.studio em { font: 600 18px/1 'Caveat', cursive; color: var(--accent); }
.studio:hover { text-decoration: underline; text-underline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.foot-art { position: relative; margin-top: var(--s-5); }
.foot-art img, .foot-art canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; mask-image: linear-gradient(transparent, #000 30%); }
.foot-art canvas { position: absolute; inset: 0; height: 100%; visibility: hidden; pointer-events: none; }
.foot-art.is-moving img { visibility: hidden; }
.foot-art.is-moving canvas { visibility: visible; }
.foot-note { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.foot-note text { font: 700 30px 'Caveat', cursive; fill: var(--accent); stroke: var(--surface); stroke-width: 6px; paint-order: stroke fill; stroke-linejoin: round; }
.foot-note path { fill: none; stroke: var(--accent); stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
@media (min-width: 768px) { .foot-note text { font-size: 15px; stroke-width: 4px; } .foot-note path { stroke-width: .7px; } }
@media (prefers-reduced-motion: no-preference) {
  .foot-note path { transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1) .2s; }
  .foot-note.is-armed:not(.is-in) path { stroke-dashoffset: 1; }
}
@media print { .foot-art { display: none; } }

/* Нижняя панель на мобильном */
.tabbar { display: none; }
@media (max-width: 767px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0 0; z-index: 40; background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 8px 0; font-size: 11px; color: var(--muted); position: relative; }
  .tabbar a i { font-size: 22px; }
  .tabbar a[aria-current] { color: var(--accent); }
  .tabbar .count { right: calc(50% - 22px); }
  .switcher { bottom: 76px !important; }
}

.switcher { position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 50; display: flex; gap: 2px; background: var(--ink); padding: 4px; border-radius: 10px; font-size: 13px; box-shadow: var(--shadow); }
.switcher a { padding: 6px 12px; border-radius: 7px; color: #c8ccd1; white-space: nowrap; }
@media (max-width: 480px) { .switcher a { padding: 6px 8px; font-size: 12px; } }
.switcher a[aria-current] { background: var(--bg); color: var(--ink); }
.toast { position: fixed; right: var(--s-5); bottom: 80px; z-index: 60; background: var(--ink); color: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--r-ctl); opacity: 0; transform: translateY(8px); transition: opacity .2s var(--ease), transform .2s var(--ease); pointer-events: none; }
.toast.is-on { opacity: 1; transform: none; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition-property: opacity, color, background-color, border-color, visibility !important; transition-duration: .15s !important; } .spinner-bar span { animation: pulse 1.2s ease-in-out infinite alternate !important; transform: translateX(75%); } }
@keyframes pulse { from { opacity: .35; } }

/* ===== Многостраничная версия C ===== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Строка разделов под шапкой */
.subnav { border-top: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; height: 48px; align-items: center; }
.subnav a { white-space: nowrap; padding: 8px 14px; border-radius: var(--r-ctl); font-weight: 500; color: var(--muted); transition: background .15s, color .15s; }
.subnav a:hover { background: var(--surface); color: var(--ink); }
.subnav a[aria-current="page"] { color: var(--ink); background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
@media (max-width: 767px) { .subnav .wrap { height: 44px; } .subnav a { padding: 6px 10px; font-size: 14px; } }

/* Главная: один первый экран и кнопки-входы */
.home-hero { padding-top: var(--s-4); padding-bottom: 0; }
.hero1 { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: clamp(420px, calc(100dvh - 160px), 700px); display: flex; align-items: flex-end; color: #fff; background: var(--ink); }
.hero1 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero1::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 12 15 / .78), rgb(10 12 15 / .25) 55%, transparent 80%); }
.hero1-copy { position: relative; z-index: 1; padding: var(--s-7); max-width: 780px; }
.hero1 h1 { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.04; margin-bottom: var(--s-3); }
.hero1 p { margin: 0 0 var(--s-5); color: #e3e5e8; font-size: 17px; max-width: 46ch; }
/* Две кнопки одинаковой ширины по самой длинной; на телефоне — во всю ширину одна под другой */
.hero1-cta { display: inline-grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
@media (max-width: 600px) { .hero1-cta { display: grid; grid-template-columns: minmax(0, 1fr); } }
.btn--glass { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .4); color: #fff; backdrop-filter: blur(6px); }
.btn--glass:hover { background: rgb(255 255 255 / .24); border-color: #fff; }
@media (max-width: 767px) { .hero1-copy { padding: var(--s-5); } .hero1 { min-height: 420px; } }

.entries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.entry { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); transition: border-color .15s, box-shadow .2s, transform .15s; }
.entry:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.entry:active { transform: scale(.97); }
.entry > i:first-child { font-size: 28px; color: var(--accent); }
.entry b { display: block; font-size: 16px; }
.entry small { color: var(--muted); }
.entry > i:last-child { font-size: 18px; color: var(--muted); transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .entry:hover > i:last-child { transform: translateX(3px); color: var(--ink); } }
.entry--main { background: var(--ink); border-color: var(--ink); color: #fff; }
.entry--main small { color: #b9bec5; }
.entry--main > i:first-child, .entry--main > i:last-child { color: #fff; }
@media (max-width: 1023px) { .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .entries { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .entry { padding: 10px var(--s-4); }
  .entry > i:first-child { font-size: 22px; }
  .entry small { display: none; }
  .hero1 { min-height: 300px; }
  .hero1 h1 { font-size: 28px; }
  .hero1 p { font-size: 15px; margin-bottom: var(--s-4); }
}

.promo-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.promo-row .promo { min-height: 220px; }
@media (max-width: 767px) { .promo-row { grid-template-columns: 1fr; } }

/* Внутренние страницы */
.crumbs { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted); padding-top: var(--s-5); }
.crumbs a:hover { color: var(--ink); }
.page-head { padding: var(--s-3) 0 var(--s-5); display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.page-head h1 { font-size: clamp(28px, 3vw, 40px); }
.page-head span { color: var(--muted); }

/* Каталог */
.cat-strip { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: thin; padding-bottom: var(--s-3); }
.cat-chip { flex: none; display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); white-space: nowrap; font-weight: 500; font-size: 14px; transition: border-color .15s, background .15s; }
.cat-chip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.cat-chip small { color: var(--muted); font-weight: 400; }
.cat-chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.cat-chip[aria-pressed="true"] small { color: #b9bec5; }

.picker-wrap { margin: var(--s-3) 0 var(--s-5); scroll-margin-top: 96px; }
@media (max-width: 767px) { .picker-wrap { scroll-margin-top: 80px; } }
.picker-wrap > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-card); background: var(--accent-soft); font-weight: 600; }
.picker-wrap > summary::-webkit-details-marker { display: none; }
.picker-wrap > summary i { font-size: 24px; color: var(--accent); }
.picker-wrap > summary .grow { flex: 1; }
.picker-wrap > summary .more i { font-size: 16px; transition: transform .2s var(--ease); }
.picker-wrap[open] > summary .more i { transform: rotate(180deg); }
.picker-wrap[open] > summary { border-radius: var(--r-card) var(--r-card) 0 0; }
.picker-wrap .picker { border-radius: 0 0 var(--r-card) var(--r-card); }

.cat-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--s-6); align-items: start; padding-bottom: var(--s-8); }
.side { position: sticky; top: 96px; display: grid; gap: var(--s-5); }
.side fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.side legend { font-weight: 600; margin-bottom: var(--s-2); padding: 0; }
.check { display: flex; align-items: center; gap: var(--s-2); font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
.check small { color: var(--muted); margin-left: auto; }
.range-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.range-row2 label { font-size: 12px; color: var(--muted); display: grid; gap: 4px; }
.range-row2 input { height: 38px; border: 1px solid #c9cdd3; border-radius: var(--r-ctl); padding: 0 10px; width: 100%; font-size: 14px; }
.side-toggle { display: none; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; }
.toolbar .found { color: var(--muted); }
.toolbar label { font-size: 14px; color: var(--muted); display: inline-flex; align-items: center; gap: var(--s-2); }
.toolbar select { height: 38px; border: 1px solid #c9cdd3; border-radius: var(--r-ctl); padding: 0 10px; font: inherit; color: var(--ink); background: var(--bg); }
.active-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s-4); }
.af { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 0; border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.cat-layout .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.empty { padding: var(--s-7) var(--s-5); text-align: center; border: 1px dashed #c9cdd3; border-radius: var(--r-card); }
.empty b { display: block; font-size: 18px; margin-bottom: 6px; }
.empty p { color: var(--muted); margin: 0 0 var(--s-4); }
@media (max-width: 1100px) { .cat-layout .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .cat-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .side { position: static; display: none; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card); }
  .side.is-open { display: grid; }
  .side-toggle { display: inline-flex; }
}

/* Линейка и технологии */
.anchors { position: sticky; top: 72px; z-index: 5; background: var(--bg); display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; padding: var(--s-2) 0 var(--s-3); }
@media (max-width: 767px) { .anchors { top: 0; position: relative; } }
.anchors a { white-space: nowrap; }
.r-sec { padding-block: var(--s-7); scroll-margin-top: 130px; }
.r-sec + .r-sec { border-top: 1px solid var(--line); }
.r-lead { color: var(--muted); max-width: 64ch; margin: var(--s-2) 0 var(--s-5); }
.group-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-5); }
.series-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 1100px) { .series-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s; }
.sc:hover { box-shadow: var(--shadow); border-color: transparent; }
.sc-media { position: relative; aspect-ratio: 16/10; background: var(--tile); overflow: hidden; }
.sc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
@media (hover: hover) and (pointer: fine) { .sc:hover .sc-media img { transform: scale(1.03); } }
.sc-body { padding: var(--s-3) var(--s-4) var(--s-4); display: grid; gap: 6px; flex: 1; align-content: start; }
.sc-body h4 { margin: 0; font-size: 18px; }
.sc-body p { margin: 0; color: var(--muted); font-size: 14px; }
.sc-meta { display: flex; gap: var(--s-3); flex-wrap: wrap; font-size: 14px; margin-top: var(--s-2); }
.sc-meta b { font-weight: 600; }
.sc-tech { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.sc-tech span { font-size: 12px; background: var(--surface); border-radius: 6px; padding: 2px 8px; }
.sc-foot { padding: 0 var(--s-4) var(--s-4); }
.sc-foot .btn { height: 38px; width: 100%; }
.sc .new { position: absolute; top: var(--s-3); left: var(--s-3); }
@media (max-width: 600px) {
  .series-grid { gap: var(--s-2); }
  .sc-media { aspect-ratio: 4/3; }
  .sc-body { padding: var(--s-2) var(--s-3) var(--s-3); }
  .sc-body h4 { font-size: 15px; }
  .sc-body p, .sc-tech { display: none; }
  .sc-meta { flex-direction: column; gap: 0; font-size: 13px; margin-top: 0; }
  .sc-foot { padding: 0 var(--s-3) var(--s-3); }
  .sc-foot .btn { height: 34px; font-size: 13px; padding: 0 var(--s-2); }
}

.cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); }
.cmp { border-collapse: collapse; width: 100%; min-width: 860px; font-size: 14px; }
.cmp th, .cmp td { padding: 12px 14px; text-align: left; vertical-align: top; }
.cmp thead th { background: var(--surface); font-size: 15px; position: sticky; top: 0; }
.cmp tbody tr + tr td, .cmp tbody tr + tr th { border-top: 1px solid var(--line); }
.cmp tbody th { font-weight: 500; color: var(--muted); width: 150px; }
.cmp .num { font-weight: 600; }
/* Колонки моделей одной ширины: иначе длинные тексты сабвуфера забирают всю таблицу */
.cmp--models { table-layout: fixed; }
.cmp--models thead th { vertical-align: bottom; }
.cmp--models thead th:first-child { width: 170px; }
.cmp-model { position: relative; }
.cmp-model a { display: grid; gap: var(--s-2); }
.cmp-model img { width: 100%; max-width: 160px; aspect-ratio: 1; object-fit: contain; }
.cmp-model .num { display: block; margin: 4px 0 var(--s-3); }
.cmp-model .btn { height: 38px; width: 100%; padding: 0 var(--s-3); }
.cmp-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: var(--r-ctl); border: 0; background: var(--bg); display: grid; place-items: center; font-size: 16px; }
.cmp-slot a { display: grid; place-items: center; gap: var(--s-2); min-height: 200px; border: 1px dashed #c9cdd3; border-radius: var(--r-ctl); color: var(--muted); font-weight: 500; }
.cmp-slot i { font-size: 24px; }

.tech-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); gap: var(--s-3); }
.tc { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--ink); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s-5); isolation: isolate; }
.tc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.tc::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgb(10 12 15 / .2) 0%, rgb(10 12 15 / .72) 38%, rgb(10 12 15 / .95) 72%); }
.tc h3 { font-size: 20px; margin-bottom: 4px; }
.tc p { margin: 0; color: #d9dce0; font-size: 14px; max-width: 46ch; }
.tc small { color: #ffd6c8; font-weight: 600; font-size: 12px; margin-bottom: 6px; }
.tc--wide { grid-column: span 2; }
.tc--tall { grid-row: span 2; }
@media (max-width: 1023px) { .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tech-grid { grid-template-columns: minmax(0, 1fr); } .tc--wide { grid-column: auto; } .tc--tall { grid-row: auto; } .tc { min-height: 280px; } }

.philo { display: grid; grid-template-columns: 6fr 5fr; gap: var(--s-6); align-items: center; }
.philo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-card); }
.philo blockquote { margin: 0 0 var(--s-4); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.philo p { color: var(--muted); margin: 0 0 var(--s-3); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.facts b { display: block; font-size: 28px; letter-spacing: -.02em; }
.facts span { color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .philo { grid-template-columns: minmax(0, 1fr); } }

.notice { font-size: 13px; color: var(--muted); background: var(--surface); border-radius: var(--r-ctl); padding: 6px 10px; margin-bottom: var(--s-3); }
.soon { display: block; text-align: center; font-size: 13px; color: var(--muted); padding: 8px; border: 1px dashed #c9cdd3; border-radius: var(--r-ctl); }

/* ===== Общие элементы форм ===== */
[hidden] { display: none !important; }
textarea, select { font: inherit; color: inherit; }
.field2 { display: grid; gap: 6px; }
.field2 > label, .field2 > .lbl2 { font-weight: 600; font-size: 14px; }
.field2 input, .field2 select, .field2 textarea { height: 44px; border: 1px solid #b9bec5; border-radius: var(--r-ctl); padding: 0 12px; background: var(--bg); width: 100%; }
.field2 textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; field-sizing: content; }
.field2 input:focus, .field2 select:focus, .field2 textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.field2 .hint { font-size: 13px; color: var(--muted); }
.field2 .err { font-size: 13px; color: #b3261e; display: none; }
.field2.is-invalid input, .field2.is-invalid select { border-color: #b3261e; }
.field2.is-invalid .err { display: block; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 600px) { .row2 { grid-template-columns: minmax(0, 1fr); } }
.qty { display: inline-flex; align-items: center; border: 1px solid #b9bec5; border-radius: var(--r-ctl); height: 44px; }
.qty button { width: 40px; height: 100%; border: 0; background: none; font-size: 18px; display: grid; place-items: center; }
.qty button:disabled { color: #b9bec5; cursor: default; }
.qty input { width: 44px; text-align: center; border: 0; height: 100%; font-weight: 600; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.choice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border: 1px solid #c9cdd3; border-radius: var(--r-card); cursor: pointer; transition: border-color .15s, background .15s; }
.choice:has(input:checked) { border-color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }
.choice:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.choice input { margin-top: 3px; accent-color: var(--ink); width: 18px; height: 18px; flex: none; }
.choice b { display: block; }
.choice small { color: var(--muted); display: block; }
.choice .end { margin-left: auto; text-align: right; white-space: nowrap; font-weight: 600; }
.choices { display: grid; gap: var(--s-2); }

/* ===== Карточка товара ===== */
.pdp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: start; padding-bottom: var(--s-7); }
.gallery { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s-3); position: sticky; top: 96px; }
.thumbs { display: grid; gap: var(--s-2); align-content: start; }
.thumbs button { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--tile); aspect-ratio: 1; }
.thumbs button[aria-current="true"] { border-color: var(--ink); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.main-img { border-radius: var(--r-card); overflow: hidden; background: var(--tile); aspect-ratio: 1; }
.main-img img { width: 100%; height: 100%; object-fit: cover; }
.buy { display: grid; gap: var(--s-4); }
.buy .series-link { color: var(--accent); font-weight: 600; font-size: 14px; }
.buy h1 { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.1; }
.buy .meta { display: flex; gap: var(--s-4); flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.fin-list { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.fin { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 12px 6px 6px; border: 1px solid #c9cdd3; border-radius: 999px; background: var(--bg); font-size: 14px; }
.fin span { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.fin[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.price-big { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.price-big b { font-size: 34px; letter-spacing: -.02em; }
.price-big small { color: var(--muted); }
.pay-opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.pay-opt { background: var(--surface); border-radius: var(--r-ctl); padding: 10px 12px; font-size: 14px; }
.pay-opt b { display: block; font-size: 15px; }
.buy-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.buy-row .btn { flex: 1; min-width: 150px; height: 48px; }
.buy-tools { display: flex; gap: var(--s-4); }
.buy-tools button { background: none; border: 0; padding: 0; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.buy-tools button[aria-pressed="true"] { color: var(--accent); }
.box { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-4); display: grid; gap: var(--s-3); }
.box h2 { font-size: 16px; }
.avail li, .dl-rows li { display: flex; justify-content: space-between; gap: var(--s-3); font-size: 14px; }
.avail, .dl-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.avail .ok { color: var(--ok); }
.dl-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.dl-head select { height: 34px; border: 1px solid #c9cdd3; border-radius: var(--r-ctl); padding: 0 8px; font: inherit; font-size: 14px; }
.warn { background: #fff4e5; color: #6b4300; border-radius: var(--r-ctl); padding: 8px 12px; font-size: 13px; }
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); font-size: 13px; }
.trust div { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.trust i { color: var(--accent); font-size: 20px; }
@media (max-width: 1023px) { .pdp { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .gallery { position: static; } }
@media (max-width: 600px) { .gallery { grid-template-columns: minmax(0, 1fr); } .thumbs { grid-auto-flow: column; grid-auto-columns: 64px; order: 2; overflow-x: auto; } .pay-opts, .trust { grid-template-columns: minmax(0, 1fr); } }

.ptabs { border-bottom: 1px solid var(--line); display: flex; gap: var(--s-5); overflow-x: auto; scrollbar-width: none; }
.ptab { background: none; border: 0; padding: var(--s-3) 0; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ptab[aria-selected="true"] { color: var(--ink); border-color: var(--accent); }
.ppanel { padding: var(--s-5) 0 var(--s-7); max-width: 980px; }
.ppanel p { max-width: 70ch; }
.key-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); }
.key-specs div { background: var(--surface); border-radius: var(--r-card); padding: var(--s-4); }
.key-specs small { color: var(--muted); display: block; font-size: 13px; }
.key-specs b { font-size: 18px; white-space: pre-line; }
.spec-table { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); }
.spec-table dt, .spec-table dd { margin: 0; padding: 10px 14px; font-size: 14px; white-space: pre-line; }
.spec-table dt { color: var(--muted); }
.spec-table dt:nth-of-type(odd), .spec-table dd:nth-of-type(odd) { background: var(--surface); }
.docs { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.docs a { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card); }
.docs a:hover { border-color: var(--ink); }
.docs i { font-size: 26px; color: var(--accent); }
.docs small { color: var(--muted); display: block; }
@media (max-width: 600px) { .key-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .spec-table { grid-template-columns: minmax(0, 1fr); } .spec-table dd:nth-of-type(odd), .spec-table dt:nth-of-type(odd) { background: none; } .spec-table dt { background: var(--surface) !important; padding-bottom: 2px; } }

/* Панель покупки: на десктопе выезжает снизу, когда основная кнопка «В корзину» ушла из вида; на телефоне видна всегда.
   visibility скрывает кнопку от Tab, пока панель спрятана */
.mbar { position: fixed; inset: auto 0 0; z-index: 35; background: var(--bg); border-top: 1px solid var(--line); box-shadow: var(--shadow); visibility: hidden; transform: translateY(100%); transition: transform .25s var(--ease), visibility 0s .25s; }
.mbar.is-on { visibility: visible; transform: none; transition: transform .25s var(--ease); }
.mbar-in { display: flex; align-items: center; gap: var(--s-4); height: 72px; }
.mbar-in img { width: 52px; height: 52px; object-fit: contain; }
.mbar-name { flex: 1; min-width: 0; }
.mbar-name b, .mbar-price b { display: block; font-size: 16px; }
.mbar-name small, .mbar-price small { color: var(--muted); }
.mbar-price { text-align: right; }
.mbar .btn { height: 44px; min-width: 180px; }
body:has(.mbar.is-on) .switcher { bottom: 88px; }
@media (min-width: 768px) { body:has(.mbar) { padding-bottom: 72px; } }
@media (prefers-reduced-motion: reduce) { .mbar, .mbar.is-on { transition: none; } }
@media (max-width: 767px) {
  .mbar { inset: auto 0 64px; box-shadow: none; visibility: visible; transform: none; }
  .mbar-in { height: 64px; padding: 0 var(--s-4); gap: var(--s-3); }
  /* Над таббаром (64px) стоит панель (64px): подвал не уходит под неё, переключатель концепций — выше панели */
  body:has(.mbar) { padding-bottom: 128px; }
  body:has(.mbar) .switcher { bottom: 140px !important; }
  .mbar-in img, .mbar-name { display: none; }
  .mbar-price { flex: 1; text-align: left; }
  .mbar-price b { font-size: 18px; }
  .mbar .btn { height: 42px; min-width: 0; }
}

dialog.dlg { border: 0; border-radius: var(--r-card); padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgb(17 20 24 / .3); }
dialog.dlg::backdrop { background: rgb(17 20 24 / .45); }
.dlg-body { padding: var(--s-5); display: grid; gap: var(--s-4); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; }
.dlg-head h2 { font-size: 20px; }
.dlg-x { background: none; border: 0; font-size: 22px; width: 36px; height: 36px; border-radius: var(--r-ctl); }
.dlg-x:hover { background: var(--surface); }
.consent { display: flex; gap: var(--s-2); font-size: 13px; color: var(--muted); align-items: flex-start; }
.consent input { margin-top: 2px; accent-color: var(--ink); }
.consent a { color: var(--ink); text-decoration: underline; }

/* ===== Корзина и оформление ===== */
.co { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-6); align-items: start; padding-bottom: var(--s-8); }
@media (max-width: 1023px) { .co { grid-template-columns: minmax(0, 1fr); } }
.lines { display: grid; }
.line { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto auto; gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.line img { width: 112px; height: 112px; border-radius: 10px; object-fit: cover; background: var(--tile); }
.line b a:hover { color: var(--accent); }
.line small { color: var(--muted); display: block; }
.line .sum { font-weight: 700; font-size: 18px; text-align: right; min-width: 120px; }
.line .rm { background: none; border: 0; color: var(--muted); padding: 4px 0; font-size: 13px; display: inline-flex; gap: 4px; align-items: center; margin-top: 6px; }
.line .rm:hover { color: var(--ink); }
@media (max-width: 600px) { .line { grid-template-columns: 80px minmax(0, 1fr); } .line img { width: 80px; height: 80px; } .line .qty, .line .sum { grid-column: 2; } .line .sum { text-align: left; } }
.summary { position: sticky; top: 96px; border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-5); display: grid; gap: var(--s-3); background: var(--bg); }
.summary h2 { font-size: 20px; }
.summary .r { display: flex; justify-content: space-between; gap: var(--s-3); font-size: 15px; }
.summary .r span:first-child { color: var(--muted); }
.summary .total { font-size: 22px; font-weight: 700; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.summary .total span:first-child { color: var(--ink); }
.summary .btn { height: 50px; width: 100%; }
.summary .mini-lines { display: grid; gap: 8px; max-height: 240px; overflow: auto; }
.summary .mini-lines div { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--s-2); align-items: center; font-size: 13px; }
.summary .mini-lines img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.promo-code { display: flex; gap: var(--s-2); }
.promo-code input { flex: 1; min-width: 0; height: 40px; border: 1px solid #b9bec5; border-radius: var(--r-ctl); padding: 0 10px; }
.promo-code .btn { height: 40px; width: auto; }
@media (max-width: 1023px) { .summary { position: static; } }
.empty-cart { text-align: center; padding: var(--s-8) var(--s-5); border: 1px dashed #c9cdd3; border-radius: var(--r-card); }
.empty-cart i { font-size: 44px; color: var(--muted); }
.empty-cart h2 { margin: var(--s-3) 0 var(--s-2); }
.empty-cart p { color: var(--muted); margin: 0 0 var(--s-4); }

.step { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-5); display: grid; gap: var(--s-4); margin-bottom: var(--s-4); }
.step > h2 { font-size: 20px; display: flex; gap: var(--s-3); align-items: center; }
.step > h2 span { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 14px; flex: none; }
.seg { display: inline-flex; padding: 3px; background: var(--surface); border-radius: var(--r-ctl); gap: 2px; }
.seg button { border: 0; background: none; padding: 7px 14px; border-radius: 6px; font-weight: 600; font-size: 14px; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgb(17 20 24 / .12); }
.pvz { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-3); }
.pvz-map { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); min-height: 300px; background: var(--surface); }
.pvz-map iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }
.pvz .choices { align-content: start; max-height: 340px; overflow: auto; padding-right: 2px; }
@media (max-width: 767px) { .pvz { grid-template-columns: minmax(0, 1fr); } .pvz-map, .pvz-map iframe { min-height: 220px; } }
.pay-logos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pay-logos span { border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 11px; font-weight: 600; color: var(--muted); }
.form-err { background: #fdecea; color: #8c1d18; border-radius: var(--r-ctl); padding: 10px 14px; font-size: 14px; }
.paygate { max-width: 460px; margin: var(--s-8) auto; border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-6); text-align: center; display: grid; gap: var(--s-3); }
.paygate b { font-size: 30px; }
.spinner-bar { height: 4px; border-radius: 2px; background: var(--tile); overflow: hidden; }
.spinner-bar span { display: block; height: 100%; width: 40%; background: var(--accent); animation: slide 1.1s linear infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ===== Личный кабинет ===== */
.acc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-6); align-items: start; padding-bottom: var(--s-8); }
.acc-nav { display: grid; gap: 2px; position: sticky; top: 96px; }
.acc-nav a { display: flex; gap: var(--s-3); align-items: center; padding: 10px 12px; border-radius: var(--r-ctl); font-weight: 500; color: var(--muted); }
.acc-nav a:hover { background: var(--surface); color: var(--ink); }
.acc-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; }
.acc-nav i { font-size: 20px; }
.acc-nav .count { position: static; margin-left: auto; }
@media (max-width: 900px) { .acc { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } .acc-nav { position: static; grid-auto-flow: column; overflow-x: auto; scrollbar-width: none; } .acc-nav a { white-space: nowrap; } }
.banner-ok { display: flex; gap: var(--s-3); align-items: center; background: #e7f4ec; color: #1e5434; border-radius: var(--r-card); padding: var(--s-4); margin-bottom: var(--s-4); }
.banner-ok i { font-size: 28px; }
.orders { display: grid; gap: var(--s-3); }
.ord { border: 1px solid var(--line); border-radius: var(--r-card); }
.ord-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-4) var(--s-5); align-items: center; width: 100%; background: none; border: 0; text-align: left; }
.ord-title { display: block; font-size: 17px; font-weight: 700; }
.ord-head small { color: var(--muted); display: block; }
.ord-thumbs { display: flex; gap: 6px; margin-top: var(--s-2); }
.ord-thumbs img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; }
.ord-right { text-align: right; display: grid; gap: 6px; justify-items: end; }
.ord-right b { font-size: 18px; }
.ord-body { border-top: 1px solid var(--line); padding: var(--s-5); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-5); }
@media (max-width: 900px) { .ord-body { grid-template-columns: minmax(0, 1fr); } .ord-head { grid-template-columns: minmax(0, 1fr); } .ord-right { text-align: left; justify-items: start; } }
.st--done { background: #e7f4ec; color: #1e5434; }
.st--wait { background: var(--surface); color: var(--muted); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 var(--s-4) 28px; display: grid; }
.timeline li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--tile); }
.timeline li::after { content: ''; position: absolute; left: 9px; top: 20px; bottom: 2px; width: 2px; background: var(--tile); }
.timeline li:last-child::after { display: none; }
.timeline li.is-done::before, .timeline li.is-done::after { background: var(--ink); }
.timeline li.is-current::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.timeline li.is-current b { color: var(--accent); }
.timeline li:not(.is-done):not(.is-current) { color: var(--muted); }
.timeline small { color: var(--muted); font-size: 13px; }
.kv { display: grid; gap: 8px; font-size: 14px; }
.kv div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s-2); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.toggles { display: grid; gap: var(--s-2); }
.toggle { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.toggle input { appearance: none; width: 42px; height: 24px; border-radius: 12px; background: #c9cdd3; position: relative; cursor: pointer; transition: background .2s; flex: none; }
.toggle input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.toggle input:checked { background: var(--ok); }
.toggle input:checked::after { transform: translateX(18px); }
.toggle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.devices { display: grid; gap: var(--s-3); }
.device { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-3); }
.device img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; }
.device small { color: var(--muted); display: block; }
@media (max-width: 600px) { .device { grid-template-columns: 56px minmax(0, 1fr); } .device img { width: 56px; height: 56px; } .device .btn { grid-column: span 2; } }

/* ===== Шапка без поиска: пункты с мега-меню (по мотивам Carbonara) ===== */
.mainnav { display: flex; align-items: center; gap: var(--s-1); margin-left: var(--s-4); flex: 1; }
.mn-trigger, .mn-link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font-weight: 500; font-size: 15px; color: var(--ink); white-space: nowrap; transition: background .15s; }
.mn-trigger i { font-size: 13px; color: var(--muted); transition: transform .2s var(--ease); }
.mn-trigger:hover, .mn-link:hover, .mn-trigger[aria-expanded="true"] { background: var(--surface); }
.mn-trigger[aria-expanded="true"] i { transform: rotate(180deg); }
.mn-trigger.is-current { box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.burger { display: none !important; }
.mm { position: absolute; left: 0; right: 0; top: 100%; height: 0; pointer-events: none; }
.mm-panel { position: absolute; left: 0; top: 8px; overflow: hidden; border-radius: 16px; background: rgb(255 255 255 / .92); backdrop-filter: blur(18px) saturate(1.5); border: 1px solid var(--line); box-shadow: 0 24px 60px rgb(17 20 24 / .14); opacity: 0; visibility: hidden; transform-origin: top center;
  transition: width .25s cubic-bezier(.23, 1, .32, 1), height .25s cubic-bezier(.23, 1, .32, 1), transform .25s cubic-bezier(.23, 1, .32, 1), opacity .18s cubic-bezier(.23, 1, .32, 1), visibility 0s .18s; }
.mm-panel.no-anim { transition: opacity .18s, visibility 0s .18s; }
.mm.is-open .mm-panel { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.mm.is-open .mm-panel.no-anim { transition: opacity .18s; }
@supports not (backdrop-filter: blur(1px)) { .mm-panel { background: #fff; } }
.mm-in { position: relative; }
.mm-content { width: max-content; padding: 12px; transition: transform .22s var(--ease), opacity .22s var(--ease); }
.mm-content.is-leaving { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
.mm-cat { display: grid; grid-template-columns: 290px 300px; gap: 12px; }
.mm-list a span { white-space: nowrap; }
.mm-list { display: grid; gap: 2px; align-content: start; }
.mm-list a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; font-weight: 500; }
.mm-list a small { color: var(--muted); font-weight: 400; }
.mm-list a.is-on, .mm-list a:hover, .mm-list a:focus-visible { background: var(--surface); }
.mm-prev { border-radius: 12px; overflow: hidden; position: relative; display: block; color: #fff; isolation: isolate; min-height: 300px; }
.mm-prev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.mm-prev::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 50%, rgb(10 12 15 / .75)); }
.mm-prev span { position: absolute; left: 16px; right: 16px; bottom: 14px; display: grid; }
.mm-prev small { color: #dfe2e5; }
.mm-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 10px; border-radius: 10px; background: var(--surface); font-weight: 600; font-size: 14px; }
.mm-foot:hover { background: var(--tile); }
.mm-cards { display: grid; grid-template-columns: repeat(3, 170px); gap: 8px; }
.mm-cards a { display: grid; gap: 2px; padding: 6px 6px 10px; border-radius: 12px; font-size: 14px; }
.mm-cards a:hover, .mm-cards a:focus-visible { background: var(--surface); }
.mm-cards img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.mm-cards small { color: var(--muted); }
.mm-fam { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mm-fam a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; }
.mm-fam a:hover { border-color: var(--ink); }
.mm-rows { display: grid; gap: 2px; width: 340px; }
.mm-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; }
.mm-row:hover, .mm-row:focus-visible { background: var(--surface); }
.mm-row i { font-size: 22px; color: var(--accent); margin-top: 1px; }
.mm-row b { display: block; font-weight: 600; }
.mm-row small { color: var(--muted); }
@media (max-width: 1023px) {
  .mainnav { display: none; }
  .burger { display: grid !important; }
  .mm-panel { left: 12px; right: 12px; width: auto !important; height: auto !important; transform: none !important; max-height: calc(100dvh - 140px); overflow: auto; }
  .mm-content { width: auto; }
  .mm-sec + .mm-sec { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  .mm-sec h2 { font-size: 13px; color: var(--muted); font-weight: 600; margin: 4px 12px 6px; }
  .mm-cat { grid-template-columns: minmax(0, 1fr); }
  .mm-prev { display: none; }
  .mm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-rows { width: auto; }
}
@media (max-width: 767px) {
  .head > .wrap { flex-wrap: nowrap; height: 60px; padding-block: 0; }
  .acts { display: flex; }
  .acts .act:not(.burger) { display: none; }
}

/* ===== Шоурум и контакты ===== */
.vh { padding-top: 0; }
.vh-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-7); align-items: center; }
.vh-title { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.04; margin: var(--s-4) 0 var(--s-3); letter-spacing: -.03em; }
.vh-lead { font-size: 18px; color: var(--muted); max-width: 46ch; margin: 0 0 var(--s-5); }
.vh-facts { display: grid; gap: var(--s-3); margin: 0 0 var(--s-5); }
.vh-facts div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--s-3); }
.vh-facts dt { color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.vh-facts dt i { color: var(--accent); font-size: 18px; }
.vh-facts dd { margin: 0; font-weight: 600; }
.vh-cta { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.vh-media { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 5/4; }
.vh-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .vh-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .vh-media { order: -1; aspect-ratio: 16/10; } }
.route { background: var(--surface); }
.route-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); margin-top: var(--s-5); align-items: start; }
.route-map { border-radius: var(--r-card); overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.route-map iframe { width: 100%; height: 420px; border: 0; display: block; }
.route-links { display: flex; gap: var(--s-2); padding: var(--s-3); flex-wrap: wrap; }
.route-panel { margin-top: var(--s-4); }
.steps { list-style: none; counter-reset: st; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-4); }
.steps li { counter-increment: st; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: var(--s-3); }
.steps li::before { content: counter(st); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.steps b { display: block; }
.steps span { color: var(--muted); }
@media (max-width: 900px) { .route-grid { grid-template-columns: minmax(0, 1fr); } .route-map iframe { height: 300px; } }
.rooms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.room { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.room img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.room div { padding: var(--s-4) var(--s-5) var(--s-5); }
.room h3 { font-size: 20px; margin-bottom: 6px; }
.room p { margin: 0; color: var(--muted); }
@media (max-width: 700px) { .rooms-grid { grid-template-columns: minmax(0, 1fr); } }
.book .co { margin-top: var(--s-5); }
.days, .slots { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* Календарь записи: месяц слева, свободное время выбранного дня справа */
.choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cal { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--s-5); align-items: start; }
.cal-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.cal-head b { flex: 1; font-size: 16px; }
.cal-nav { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--bg); display: grid; place-items: center; font-size: 16px; }
.cal-nav:hover:not(:disabled) { border-color: var(--ink); }
.cal-nav:disabled { opacity: .35; cursor: not-allowed; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { font-size: 12px; color: var(--muted); text-align: center; padding-bottom: 2px; }
.cal-day { position: relative; height: 44px; border: 0; border-radius: var(--r-ctl); background: var(--surface); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; transition: background .15s, color .15s; }
.cal-day:hover:not(:disabled) { background: var(--tile); }
.cal-day:disabled { background: none; color: #9aa0a7; font-weight: 400; cursor: default; }
.cal-day.is-today::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.cal-day[aria-pressed="true"] { background: var(--ink); color: #fff; }
.cal-times > b { font-size: 15px; padding-top: 8px; }
.cal-times > b::first-letter { text-transform: uppercase; }
.cal-times .slots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; max-height: 330px; overflow: auto; }
.cal-times .opt { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .cal, .choices--2 { grid-template-columns: minmax(0, 1fr); } .cal-times .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: none; } }
.opt:disabled { color: #9aa0a7; background: var(--surface); border-color: var(--line); cursor: not-allowed; text-decoration: line-through; }
.ct { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-6); align-items: start; padding-bottom: var(--s-8); }
.ct-info { display: grid; gap: var(--s-3); }
.ct-card { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card); transition: border-color .15s; }
.ct-card:hover { border-color: var(--ink); }
.ct-card > i:first-child { font-size: 26px; color: var(--accent); flex: none; }
.ct-card b { display: block; }
.ct-card small { color: var(--muted); }
.ct-card--main b { font-size: 24px; letter-spacing: -.02em; }
.ct-go { margin-left: auto; color: var(--muted); }
.ct-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.ct-req { margin: var(--s-2) 0 0; display: grid; gap: 6px; font-size: 14px; }
.ct-req div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-2); }
.ct-req dt { color: var(--muted); }
.ct-req dd { margin: 0; }
.ct-form-wrap .step { margin: 0; }
@media (max-width: 900px) { .ct { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .ct-pair { grid-template-columns: minmax(0, 1fr); } .vh-facts div, .ct-req div { grid-template-columns: minmax(0, 1fr); gap: 0; } }