/* ForteRentals — кликабельный прототип. Концепт A «отличимый»: тёмная бирюза и жёлтый, форма кнопок из B.
   Mobile first: базовые стили для 360–767, затем 768+ (планшет) и 1200+ (desktop).
   Жёлтый — только фон кнопок и акцент на тёмном; на белом ссылки и иконки бирюзовые. */

/* ============ шрифты ============ */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('../fonts/Inter-Bold.woff2') format('woff2'); }

/* ============ токены ============ */
:root {
  --teal: #1D3E3A; --teal-h: #2A524D; --teal-d: #152E2B;
  --yellow: #FFD84D; --yellow-h: #F5C924; --yellow-a: #E8BB10; --on-yellow: #1F1A00; --ochre: #7A5C00;
  --sky: #8DD3FB; --navy: #133160;
  --mist: #F0F5F4; --mist-2: #F6F9F8;
  --ink: #0E1F1D; --ink-2: #4A5E5B; --ink-3: #7F918E;
  --line: #DCE6E4; --line-2: #C3D1CE;
  --on-dark: #C5D6D3;
  --ok: #17734B; --ok-bg: #E4F4EC; --warn: #8A5300; --warn-bg: #FFF2DC; --off: #5B6B68; --off-bg: #EDF1F0;
  --err: #B42318; --err-bg: #FDECEA;
  --bg: #FFFFFF;

  --r-s: 8px; --r: 12px; --r-l: 20px; --r-xl: 28px; --r-pill: 999px;
  --sh-1: 0 2px 6px rgba(29,62,58,.05), 0 8px 24px rgba(29,62,58,.07);
  --sh-2: 0 16px 40px rgba(29,62,58,.16);
  --focus: 0 0 0 3px #fff, 0 0 0 5px var(--teal);

  --wrap: 1200px; --gut: 16px;
  --hdr-h: 64px;
  --fs: 1; --fs-h: 1;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
@media (min-width: 768px) { :root { --gut: 32px; --hdr-h: 72px; } }
@media (min-width: 1200px) { :root { --hdr-h: 80px; } }

/* ============ база ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body { margin: 0; font: 400 calc(16px * var(--fs))/1.5 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
@media (min-width: 1200px) { body { padding-bottom: 0; } }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-s); }
[tabindex="-1"]:focus-visible { box-shadow: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding-inline: var(--gut); }
.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic-s { width: 20px; height: 20px; } .ic-xs { width: 16px; height: 16px; } .ic-l { width: 40px; height: 40px; stroke-width: 1.5; }
@media (max-width: 1199px) { .d-only { display: none !important; } }
@media (min-width: 1200px) { .d-hide { display: none !important; } }
@media (max-width: 767px) { .t-up { display: none !important; } }
@media (min-width: 768px) { .t-down, .m-only { display: none !important; } }
.grow { flex: 1; }
.muted { color: var(--ink-2); }

/* ============ типографика ============ */
.h1 { font-size: calc(30px * var(--fs-h)); line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.h2 { font-size: calc(24px * var(--fs-h)); line-height: 1.18; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.h3 { font-size: calc(18px * var(--fs)); line-height: 1.3; font-weight: 600; }
.lead { font-size: calc(17px * var(--fs)); line-height: 1.55; color: var(--ink-2); }
.over { font-size: calc(12px * var(--fs)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ochre); }
.cap { font-size: calc(13px * var(--fs)); line-height: 1.45; color: var(--ink-2); }
.cap .ic { vertical-align: -3px; }
.small { font-size: calc(14px * var(--fs)); line-height: 1.5; }
@media (min-width: 768px) { .h1 { font-size: calc(42px * var(--fs-h)); } .h2 { font-size: calc(30px * var(--fs-h)); } .lead { font-size: calc(18px * var(--fs)); } }
@media (min-width: 1200px) { .h1 { font-size: calc(52px * var(--fs-h)); line-height: 1.08; } .h2 { font-size: calc(36px * var(--fs-h)); } .h3 { font-size: calc(19px * var(--fs)); } }
.prose p + p { margin-top: 10px; }
.link-u, .prose a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }

/* ============ кнопки ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--r); font-weight: 600; font-size: calc(15px * var(--fs)); line-height: 1.2; white-space: nowrap; border: 1.5px solid transparent; transition: background .15s, border-color .15s, color .15s; text-align: center; background: var(--teal); color: #fff; }
.btn:hover { background: var(--teal-h); }
.btn-l { min-height: 56px; padding: 0 28px; font-size: calc(16px * var(--fs)); }
.btn-s { min-height: 40px; padding: 0 14px; font-size: calc(14px * var(--fs)); }
.btn-pri { background: var(--yellow); color: var(--on-yellow); }
.btn-pri:hover { background: var(--yellow-h); } .btn-pri:active { background: var(--yellow-a); }
.btn-sec { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-sec:hover { background: #fff; border-color: var(--ink-2); }
.btn-ghost { background: none; color: var(--teal); padding-inline: 8px; }
.btn-ghost:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
.btn-ghost-d { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-ghost-d:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .55; pointer-events: none; }
.btn .spin { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link { color: var(--teal); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ibtn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--r); flex: none; position: relative; color: var(--ink); }
.ibtn:hover { background: var(--mist); }
.cnt { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--sky); color: #0E2A3F; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; line-height: 1; }

/* ============ чипы, статусы ============ */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: #fff; font-size: calc(14px * var(--fs)); font-weight: 500; white-space: nowrap; }
.chip:hover { border-color: var(--ink-2); }
.chip.is-on, .chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
.chips-row::-webkit-scrollbar { display: none; }
@media (min-width: 1200px) { .chips-row { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; } }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: calc(12px * var(--fs)); font-weight: 600; background: var(--mist); color: var(--teal); width: max-content; }
.st { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: calc(12px * var(--fs)); font-weight: 600; width: max-content; background: var(--ok-bg); color: var(--ok); white-space: nowrap; }
.st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st.is-warn { background: var(--warn-bg); color: var(--warn); }
.st.is-off { background: var(--off-bg); color: var(--off); }

/* ============ шапка ============ */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line); }
.hdr.is-scrolled { box-shadow: 0 4px 16px rgba(29,62,58,.06); }
.hdr-in { height: var(--hdr-h); display: flex; align-items: center; gap: 6px; }
.logo { display: inline-flex; flex: none; margin-right: 4px; }
.logo img { height: 38px; width: auto; aspect-ratio: 737/338; }
@media (min-width: 1200px) { .logo img { height: 48px; } }
.xl { display: flex; flex-direction: column; white-space: nowrap; padding: 4px 16px 4px 16px; border-left: 1px solid var(--line); font-size: calc(13px * var(--fs)); line-height: 1.25; color: var(--ink-2); border-radius: 0; }
.xl b { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 600; }
.xl:hover b { text-decoration: underline; text-underline-offset: 3px; }
.xl .ic { width: 12px; height: 12px; }
.cat-btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: var(--r); background: var(--yellow); color: var(--on-yellow); font-weight: 600; flex: none; margin-left: 8px; }
.cat-btn:hover, .cat-btn[aria-expanded="true"] { background: var(--yellow-h); }
.hdr-s { flex: 1; min-width: 0; margin: 0 8px; }
.hdr-sm { padding-bottom: 10px; }
.a11y-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--r); color: var(--ink); flex: none; }
.a11y-btn:hover, .a11y-btn[aria-expanded="true"] { background: var(--mist); }
.lang-dd { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 6px 0 10px; border-radius: var(--r); font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--ink-2); }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { background: var(--mist); color: var(--ink); }
.lang-btn .ic { width: 16px; height: 16px; }
.lang-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 160px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); padding: 6px; z-index: 60; }
.lang-menu a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-s); font-size: calc(14px * var(--fs)); }
.lang-menu a:hover { background: var(--mist); }
.lang-menu b { width: 22px; font-size: calc(12px * var(--fs)); color: var(--ink-2); }
.lang-menu a[aria-current="true"] { font-weight: 600; }
.lang { display: inline-flex; gap: 2px; font-size: calc(13px * var(--fs)); font-weight: 600; }
.lang a { padding: 6px 10px; border-radius: var(--r-pill); color: var(--ink-2); border: 1px solid var(--line); }
.lang a[aria-current="true"] { color: #fff; background: var(--teal); border-color: var(--teal); }

/* поиск с подсказками */
.srch { position: relative; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: var(--r); background: var(--mist); color: var(--ink-2); border: 1.5px solid transparent; }
.srch:focus-within { background: #fff; border-color: var(--teal); }
.srch input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: calc(16px * var(--fs)); color: var(--ink); }
.srch input::-webkit-search-cancel-button { display: none; }
.srch input:focus-visible { box-shadow: none; }
.srch-sug { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); padding: 6px; z-index: 70; max-height: 420px; overflow-y: auto; }
.srch-sug a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-s); color: var(--ink); }
.srch-sug a:hover, .srch-sug a.is-on { background: var(--mist); }
.srch-sug img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--mist); }
.srch-sug span { flex: 1; font-size: calc(14px * var(--fs)); line-height: 1.3; }
.srch-sug small { display: block; color: var(--ink-2); font-size: calc(12px * var(--fs)); }
.srch-sug b { font-size: calc(14px * var(--fs)); white-space: nowrap; }
.srch-sug .sug-cat .ic { width: 44px; color: var(--teal); }
.srch-sug .sug-all { justify-content: center; color: var(--teal); font-weight: 600; font-size: calc(14px * var(--fs)); }
.srch-sug .sug-none { padding: 12px; color: var(--ink-2); font-size: calc(14px * var(--fs)); }

/* меню «Каталог»: компактные строки с маленьким фото, количеством и ценой «от»; справа переход во весь каталог */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 24px 40px rgba(29,62,58,.12);
  max-height: calc(100vh - var(--hdr-h)); max-height: calc(100dvh - var(--hdr-h)); overflow-y: auto; overscroll-behavior: contain; }
.mega-in { display: grid; grid-template-columns: 1fr; gap: 20px; padding-top: 20px; padding-bottom: 24px; }
.mega-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; align-items: start; }
.mega-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-h { font-size: calc(12px * var(--fs)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 0 8px; margin-bottom: 4px; }
.cm-row { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: var(--r); min-height: 56px; }
.cm-row:hover, .cm-row:focus-visible { background: var(--mist); }
.cm-row:hover b { color: var(--teal); }
.cm-ph { flex: none; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--mist); }
.cm-ph img { width: 100%; height: 100%; object-fit: cover; }
.cm-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cm-t b { font-weight: 600; font-size: calc(15px * var(--fs)); }
.cm-t small { font-size: calc(13px * var(--fs)); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-side { display: grid; gap: 10px; padding: 18px; border-radius: var(--r-l); background: var(--teal); color: var(--on-dark); align-content: start; align-self: start; }
.mega-side-t { color: #fff; font-weight: 700; font-size: calc(18px * var(--fs)); }
.mega-side-s { font-size: calc(14px * var(--fs)); line-height: 1.45; }
.mega-side-l { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--fs)); color: var(--on-dark); }
.mega-side-l:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) and (max-width: 1199px) {
  .mega-side { grid-template-columns: 1fr auto; align-items: center; column-gap: 20px; }
  .mega-side-t, .mega-side-s, .mega-side-l { grid-column: 1; }
  .mega-side .btn { grid-column: 2; grid-row: 1 / span 3; width: auto; }
}
@media (min-width: 1200px) {
  .mega-in { grid-template-columns: minmax(0, 1fr) 248px; gap: 24px; }
  .mega-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}

/* мобильное меню */
.menu { position: fixed; inset: 0; z-index: 80; background: #fff; display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
.menu.is-open { transform: none; visibility: visible; transition: transform .25s ease; }
.menu-top { height: 64px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.menu-body { flex: 1; overflow-y: auto; padding-top: 16px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.menu-x { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-l); background: #E9F2FB; }
.menu-x img { height: 34px; width: auto; }
.menu-x span { flex: 1; font-size: calc(13px * var(--fs)); color: #4E5D70; line-height: 1.35; }
.menu-list { margin-top: 8px; }
.menu-list a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line); font-size: calc(17px * var(--fs)); font-weight: 500; }
.menu-list .ic { color: var(--ink-3); }
.menu-cats { border-bottom: 1px solid var(--line); }
.menu-cats summary { display: flex; justify-content: space-between; align-items: center; min-height: 56px; font-size: calc(17px * var(--fs)); font-weight: 500; cursor: pointer; list-style: none; }
.menu-cats summary::-webkit-details-marker { display: none; }
.menu-cats summary .ic { color: var(--ink-3); transition: transform .2s; }
.menu-cats[open] summary .ic { transform: rotate(180deg); }
.menu-list .menu-cats-in a { min-height: 56px; border-bottom: 0; font-size: inherit; justify-content: flex-start; margin-inline: -8px; }
.menu-list .menu-cats-in a.btn { margin: 0 0 8px; justify-content: center; min-height: 48px; font-size: calc(15px * var(--fs)); }
.menu-list .menu-cats-in .btn .ic { color: inherit; }
.menu-cats-in { padding-bottom: 12px; }
.menu-cats-h { font-size: calc(12px * var(--fs)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 12px 0 2px; }
.menu-foot { margin-top: 24px; display: grid; gap: 12px; }
.menu-msg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* нижняя панель вкладок (mobile) */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; font-size: 11px; color: var(--ink-2); }
.tabbar a[aria-current="page"] { color: var(--teal); font-weight: 600; }
.tabbar a[aria-current="page"]::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--yellow); }
.tab-ic { position: relative; display: grid; place-items: center; }
.tab-ic .cnt { top: -6px; right: -10px; }
@media (min-width: 768px) and (max-width: 1199px) { .tabbar { display: grid !important; } }
@media (min-width: 1200px) { .tabbar { display: none !important; } }

/* ============ секции ============ */
.sec { padding: 48px 0; }
.sec-top { padding-top: 16px; }
.sec-tone { background: var(--mist-2); }
@media (min-width: 1200px) { .sec { padding: 80px 0; } .sec-top { padding-top: 24px; } }
.sec-h { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 24px; }
.sec-h .over { margin-bottom: 8px; }
.sec-h p.lead { margin-top: 10px; max-width: 640px; }
@media (min-width: 1200px) { .sec-h { margin-bottom: 36px; } }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: calc(13px * var(--fs)); color: var(--ink-2); padding-top: 16px; }
.crumbs a:hover { color: var(--teal); }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--ink-3); }

/* ============ hero ============ */
.hero { position: relative; background: var(--teal); color: #fff; overflow: hidden; display: flex; flex-direction: column; }
.hero-in { position: relative; z-index: 2; padding-top: 28px; padding-bottom: 28px; }
.hero .over { color: var(--yellow); margin-bottom: 12px; }
.hero .lead { color: var(--on-dark); margin-top: 14px; max-width: 560px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-ctas .btn { flex: 1 1 100%; }
.hero-often { margin: 24px 0 8px; font-size: calc(13px * var(--fs)); color: var(--on-dark); }
.hero .chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); color: #fff; }
.hero .chip:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }
.hero-ph { order: 2; height: 220px; position: relative; }
.hero-ph img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .hero-ph { height: 340px; }
  .hero-in { padding-top: 48px; padding-bottom: 40px; }
  .hero-ctas .btn { flex: 0 0 auto; }
}
@media (min-width: 1200px) {
  .hero { min-height: 600px; justify-content: center; }
  .hero-in { padding-top: 72px; padding-bottom: 72px; }
  .hero-in > * { max-width: 620px; }
  .hero-ph { position: absolute; inset: 0 0 0 auto; width: 52%; height: auto; }
  .hero-ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #1D3E3A 0%, rgba(29,62,58,.55) 35%, rgba(29,62,58,.12) 100%); }
}
.usp { border-bottom: 1px solid var(--line); }
.usp ul { display: grid; gap: 14px; padding: 20px 0; }
.usp li { display: flex; gap: 12px; align-items: flex-start; font-size: calc(14px * var(--fs)); color: var(--ink-2); }
.usp li > .ic { color: var(--teal); margin-top: 1px; }
.usp b { display: block; font-size: calc(15px * var(--fs)); color: var(--ink); }
@media (min-width: 768px) { .usp ul { grid-template-columns: repeat(3, 1fr); padding: 28px 0; } }

/* ============ категории ============ */
.cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cat-t { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.cat-t:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.cat-ph { aspect-ratio: 4/3; background: var(--mist); overflow: hidden; }
.cat-ph img { width: 100%; height: 100%; object-fit: cover; }
.cat-n { padding: 12px 14px 14px; font-weight: 600; font-size: calc(15px * var(--fs)); line-height: 1.3; }
.cat-n small { display: block; font-weight: 400; font-size: calc(13px * var(--fs)); color: var(--ink-2); margin-top: 2px; }
@media (min-width: 768px) { .cats { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1200px) { .cats { grid-template-columns: repeat(6, 1fr); } .cg .cats { grid-template-columns: repeat(5, 1fr); } }
.cg { margin-top: 40px; }
.cg .h2 { margin-bottom: 16px; }

/* ============ карточка товара ============ */
.grid-pc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
@media (min-width: 768px) { .grid-pc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; } }
@media (min-width: 1200px) { .grid-pc { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; } .grid-pc-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pc { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pc-img { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--mist); }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.pc:hover .pc-img img { transform: scale(1.03); }
.fav { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.fav[aria-pressed="true"] { color: #C2253A; }
.fav[aria-pressed="true"] .ic { fill: currentColor; }
.fav-l { width: 48px; height: 48px; top: 12px; right: 12px; }
.pc-n { font-size: calc(15px * var(--fs)); font-weight: 500; line-height: 1.35; }
.pc-n a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.pc-k { font-size: calc(13px * var(--fs)); color: var(--ink-2); margin-top: -4px; }
.pc-f { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin-top: auto; }
.pc-p b { font-size: calc(19px * var(--fs)); font-weight: 700; letter-spacing: -0.01em; }
.pc-p span { font-size: calc(13px * var(--fs)); color: var(--ink-2); margin-left: 4px; white-space: nowrap; display: inline-block; }
.pc-p small { display: block; font-size: calc(12px * var(--fs)); color: var(--ink-2); line-height: 1.35; margin-top: 2px; }
.pc-p.has-dates small { color: var(--ink); font-weight: 600; }
.addc { width: 48px; height: 48px; border-radius: var(--r); background: var(--yellow); color: var(--on-yellow); display: grid; place-items: center; flex: none; }
.addc:hover { background: var(--yellow-h); }
.addc.is-in { background: var(--teal); color: #fff; }
.pc.is-hidden { display: none; }
@media (max-width: 767px) { .pc-p small { display: none; } .pc-p.has-dates small { display: block; } }

/* ============ хиты, панель дат ============ */
.hits-bar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
@media (min-width: 1200px) { .hits-bar { flex-direction: row; justify-content: space-between; align-items: center; } }
.dpill { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); background: #fff; border: 1.5px solid var(--teal); color: var(--teal); font-weight: 600; font-size: calc(14px * var(--fs)); align-self: flex-start; white-space: nowrap; max-width: 100%; }
.dpill span { overflow: hidden; text-overflow: ellipsis; }
.dpill.has-dates { background: var(--teal); color: #fff; }
.dpill:hover { box-shadow: var(--sh-1); }

/* ============ как это работает ============ */
.hw { display: grid; gap: 16px; }
.hw li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px; align-items: start; }
.hw-n { position: absolute; top: 16px; right: 18px; font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--ink-3); }
.hw-ic { grid-row: span 2; width: 48px; height: 48px; border-radius: 14px; background: var(--yellow); color: var(--on-yellow); display: grid; place-items: center; }
.hw li p { color: var(--ink-2); font-size: calc(15px * var(--fs)); }
@media (min-width: 768px) { .hw { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .hw { grid-template-columns: repeat(4, 1fr); gap: 24px; } .hw li { display: flex; flex-direction: column; gap: 10px; padding: 24px; } .hw-ic { margin-bottom: 8px; } }

/* ============ наборы, карточки ============ */
.card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-1); }
.card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--mist); }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-b { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.set-l { display: grid; gap: 6px; font-size: calc(14px * var(--fs)); }
.set-l li { display: flex; gap: 8px; align-items: flex-start; }
.set-l .ic { color: var(--ok); margin-top: 2px; }
.set-f { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.set-f b { font-size: calc(20px * var(--fs)); }
.set-f span { display: block; font-size: calc(13px * var(--fs)); color: var(--ink-2); }
.set-f s { font-size: calc(13px * var(--fs)); color: var(--ink-3); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gut) * -1); padding: 4px var(--gut) 12px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 768px) { .rail { grid-auto-columns: 46%; } }
@media (min-width: 1200px) { .rail { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; gap: 24px; } }

/* ============ блок ForteLeasing (в цветах концепта B) ============ */
.xpromo { background: #E9F2FB; border-radius: var(--r-l); overflow: hidden; display: flex; flex-direction: column; color: #16233A; }
.xpromo-ph { height: 160px; } .xpromo-ph img { width: 100%; height: 100%; object-fit: cover; }
.xpromo-b { padding: 24px 20px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.xpromo-b img.xlogo { height: 40px; width: auto; }
.xpromo .over { color: #4E5D70; }
.xpromo .muted { color: #4E5D70; }
.xpromo .btn { background: #1D5FB0; color: #fff; margin-top: 4px; }
.xpromo .btn:hover { background: #174E92; }
@media (min-width: 768px) { .xpromo { flex-direction: row; } .xpromo-ph { order: 2; flex: 0 0 42%; height: auto; } .xpromo-b { padding: 36px; flex: 1; } }
@media (min-width: 1200px) { .xpromo { min-height: 360px; } .xpromo-b { padding: 48px 56px; } .xpromo-ph { flex-basis: 48%; } }

/* ============ аккордеон ============ */
.acc { border-top: 1px solid var(--line); }
.acc-i { border-bottom: 1px solid var(--line); }
.acc-h { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 12px 0; text-align: left; font-weight: 600; font-size: calc(16px * var(--fs)); }
.acc-h .ic { transition: transform .2s; color: var(--ink-2); }
.acc-i.is-open .acc-h .ic { transform: rotate(180deg); }
.acc-b { display: none; padding-bottom: 16px; color: var(--ink-2); }
.acc-i.is-open .acc-b { display: block; }
.split { display: grid; gap: 24px; }
@media (min-width: 1200px) { .split { grid-template-columns: 5fr 7fr; gap: 64px; } }

/* ============ категория: фильтры ============ */
.cat-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.cat-head .over { margin-bottom: 8px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 24px; }
.toolbar .dpill { align-self: auto; }
.sort { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line-2); margin-left: auto; color: var(--ink-2); }
.sort select { border: 0; background: transparent; font-size: calc(14px * var(--fs)); font-weight: 500; color: var(--ink); appearance: none; padding-right: 4px; cursor: pointer; }
.fcnt { min-width: 20px; height: 20px; border-radius: 10px; background: var(--teal); color: #fff; font-size: 12px; display: inline-grid; place-items: center; padding: 0 6px; }
.cat-layout { display: grid; gap: 24px; }
.cat-layout > * { min-width: 0; }
@media (min-width: 1200px) { .cat-layout { grid-template-columns: 260px 1fr; gap: 40px; align-items: start; } .filters { position: sticky; top: calc(var(--hdr-h) + 16px); } }
.filters-b { display: grid; gap: 24px; }
.fset legend { font-weight: 600; margin-bottom: 10px; font-size: calc(15px * var(--fs)); }
.fset legend b { font-weight: 600; color: var(--teal); }
.fset .chk + .chk { margin-top: 8px; }
.chk { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: calc(15px * var(--fs)); }
.chk input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--teal); flex: none; }
.tgl { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 500; font-size: calc(15px * var(--fs)); padding: 14px; border-radius: var(--r); background: var(--mist); }
.tgl input { position: absolute; opacity: 0; }
.tgl-s { width: 44px; height: 26px; border-radius: 13px; background: var(--line-2); position: relative; flex: none; transition: background .15s; }
.tgl-s::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.tgl input:checked + .tgl-s { background: var(--teal); }
.tgl input:checked + .tgl-s::after { transform: translateX(18px); }
.tgl input:focus-visible + .tgl-s { box-shadow: var(--focus); }
.range { width: 100%; accent-color: var(--teal); height: 24px; }
.filters-h, .filters-f { display: none; }
@media (max-width: 1199px) {
  .filters { position: fixed; inset: 0; z-index: 85; background: #fff; display: flex; flex-direction: column; transform: translateY(100%); visibility: hidden; transition: transform .25s, visibility 0s .25s; }
  .filters.is-open { transform: none; visibility: visible; transition: transform .25s; }
  .filters-h { display: flex; justify-content: space-between; align-items: center; padding: 12px var(--gut); border-bottom: 1px solid var(--line); }
  .filters-b { flex: 1; overflow-y: auto; padding: 20px var(--gut); }
  .filters-f { display: flex; flex-direction: column; gap: 4px; padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
}
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 48px 16px; border: 1px dashed var(--line-2); border-radius: var(--r-l); }
.empty > .ic { color: var(--ink-3); }
.empty .btn { margin-top: 8px; }

/* ============ страница товара ============ */
.pp { display: grid; gap: 24px; margin-top: 8px; }
.pp > * { min-width: 0; }
@media (min-width: 1200px) { .pp { grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; } }
.gal-m { position: relative; aspect-ratio: 1; border-radius: var(--r-l); overflow: hidden; background: var(--mist); }
.gal-m img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .gal-m { aspect-ratio: 4/3; } }
.gal-ts { display: flex; gap: 8px; margin-top: 10px; }
.gal-t { width: 72px; height: 72px; border-radius: 12px; overflow: hidden; border: 2px solid transparent; background: var(--mist); }
.gal-t img { width: 100%; height: 100%; object-fit: cover; }
.gal-t.is-on { border-color: var(--teal); }
.pp-info .over { margin-bottom: 8px; }
.pp-h { font-size: calc(26px * var(--fs-h)); }
@media (min-width: 768px) { .pp-h { font-size: calc(34px * var(--fs-h)); } }
.pp-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font-size: calc(14px * var(--fs)); }
.book { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px; box-shadow: var(--sh-1); background: #fff; display: grid; gap: 16px; }
@media (min-width: 1200px) { .book { position: sticky; top: calc(var(--hdr-h) + 16px); padding: 24px; } }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tiers li { background: #fff; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.tiers span { font-size: calc(12px * var(--fs)); color: var(--ink-2); }
.tiers b { font-size: calc(17px * var(--fs)); }
.tiers li.is-on { background: #FFF8DB; }
.dfield { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: var(--r); text-align: left; font-size: calc(16px * var(--fs)); }
.dfield span { flex: 1; }
.dfield:hover { border-color: var(--ink-2); }
.dfield.has-dates { border-color: var(--teal); font-weight: 600; }
.book-q { display: flex; justify-content: space-between; align-items: center; }
.book-q .lab { margin: 0; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: var(--r); height: 44px; }
.qty button { width: 44px; height: 100%; display: grid; place-items: center; }
.qty button:disabled { opacity: .35; cursor: not-allowed; }
.qty output { min-width: 32px; text-align: center; font-weight: 600; }
.book-sum { background: var(--mist-2); border-radius: var(--r); padding: 14px; }
.book-sum .row { display: flex; justify-content: space-between; gap: 12px; font-size: calc(14px * var(--fs)); }
.book-sum .row + .row { margin-top: 6px; }
.book-sum .tot { font-size: calc(20px * var(--fs)); font-weight: 700; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--line); }
.book-sum .is-bad { color: var(--err); font-weight: 600; }
.book-notes { display: grid; gap: 8px; font-size: calc(13px * var(--fs)); color: var(--ink-2); }
.book-notes li { display: flex; gap: 8px; align-items: flex-start; }
.book-notes .ic { color: var(--teal); margin-top: 1px; }
.pp-more { display: grid; gap: 32px; }
@media (min-width: 1200px) { .pp-more { grid-template-columns: 7fr 5fr; gap: 56px; } }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-l); background: #fff; }
.tbl { font-size: calc(15px * var(--fs)); }
.tbl th, .tbl td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.spec th { width: 44%; font-weight: 400; color: var(--ink-2); }
.spec td { font-weight: 500; }
.list-check { display: grid; gap: 10px; }
.list-check li { display: flex; gap: 10px; align-items: flex-start; }
.list-check .ic { color: var(--ok); margin-top: 1px; }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r); background: #FFF8DB; font-size: calc(14px * var(--fs)); line-height: 1.5; }
.note > .ic { color: var(--ochre); margin-top: 1px; }
.pbar { position: fixed; left: 0; right: 0; bottom: calc(57px + env(safe-area-inset-bottom)); z-index: 44; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gut); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(29,62,58,.08); }
.pbar b { display: block; font-size: calc(18px * var(--fs)); }
.pbar span { font-size: calc(12px * var(--fs)); color: var(--ink-2); }
body.has-pbar { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body.has-pbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } }
@media (min-width: 1200px) { body.has-pbar { padding-bottom: 0; } }

/* ============ календарь ============ */
.cal { display: grid; gap: 24px; }
@media (min-width: 768px) { .cal { grid-template-columns: 1fr 1fr; } }
.cal-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 600; text-transform: capitalize; }
.cal-h .ibtn { width: 40px; height: 40px; }
.cal-h .ibtn:disabled { opacity: .3; cursor: default; }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-g .dow { font-size: 12px; color: var(--ink-2); text-align: center; padding: 4px 0; }
.cal-d { height: 44px; border-radius: 10px; font-size: calc(15px * var(--fs)); font-weight: 500; display: grid; place-items: center; position: relative; }
.cal-d:hover:not(:disabled) { background: var(--mist); }
.cal-d:disabled { color: var(--ink-3); cursor: not-allowed; }
.cal-d.is-busy { text-decoration: line-through; color: var(--ink-3); }
.cal-d.is-low::after { content: ''; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--warn); }
.cal-d.is-today { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.cal-d.in-range { background: #FFF3C2; border-radius: 0; }
.cal-d.is-start, .cal-d.is-end { background: var(--teal); color: #fff; border-radius: 10px; }
.cal-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-2); margin-top: 8px; }
.cal-leg span { display: inline-flex; align-items: center; gap: 6px; }
.cal-leg i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.dates-help { margin-bottom: 12px; }
.dates-sum { margin-top: 12px; font-size: calc(14px * var(--fs)); }
.dates-sum .alert { margin: 0; }

/* ============ формы ============ */
.lab { display: flex; justify-content: space-between; gap: 8px; font-size: calc(14px * var(--fs)); font-weight: 500; margin-bottom: 8px; }
.lab span { color: var(--ink-2); font-weight: 400; }
.inp { display: flex; align-items: center; height: 52px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: #fff; transition: border-color .15s; gap: 8px; }
.inp:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(29,62,58,.12); }
.inp input, .inp select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: calc(17px * var(--fs)); height: 100%; padding: 0; }
.inp select { appearance: none; cursor: pointer; }
.inp :focus-visible { box-shadow: none; }
.field.is-err .inp { border-color: var(--err); }
.err-msg { display: none; align-items: center; gap: 6px; color: var(--err); font-size: calc(13px * var(--fs)); margin-top: 6px; }
.field.is-err .err-msg, .is-err > .err-msg { display: flex; }
.hint { font-size: calc(13px * var(--fs)); color: var(--ink-2); margin-top: 6px; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.field { min-width: 0; }
.form-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; align-items: center; }
.form-acts .btn-pri { flex: 1 1 auto; }
@media (min-width: 768px) { .form-acts .btn-pri { flex: 0 0 auto; } }
.alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--err-bg); color: var(--err); font-size: calc(14px * var(--fs)); margin-bottom: 16px; }
.alert b { display: block; color: var(--ink); }
.alert-warn { background: var(--warn-bg); color: var(--warn); }
.alert-ok { background: var(--ok-bg); color: var(--ok); }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }

/* ============ модалка / bottom sheet ============ */
.sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; visibility: hidden; }
.sheet.is-open { visibility: visible; }
.sheet-bg { position: absolute; inset: 0; background: rgba(14,31,29,.5); opacity: 0; transition: opacity .2s; }
.sheet.is-open .sheet-bg { opacity: 1; }
.sheet-box { position: relative; width: 100%; max-height: 94vh; overflow-y: auto; background: #fff; border-radius: 20px 20px 0 0; padding: 8px var(--gut) calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .25s ease; }
.sheet.is-open .sheet-box { transform: none; }
.sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 4px auto 12px; }
.sheet-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
@media (min-width: 768px) {
  .sheet { align-items: center; }
  .sheet-box { width: 560px; border-radius: var(--r-l); padding: 24px 32px 32px; transform: translateY(16px); opacity: 0; transition: transform .2s, opacity .2s; }
  .sheet-wide { width: 720px; }
  .sheet.is-open .sheet-box { opacity: 1; }
  .sheet-grab { display: none; }
}
.doc-frame { display: block; width: 100%; height: 62vh; border: 1px solid var(--line); border-radius: var(--r); background: #fff; margin-top: 8px; }
.sheet-doc .form-acts { margin-top: 16px; }
@media (min-width: 768px) { .sheet-box.sheet-doc { width: 860px; } .doc-frame { height: 66vh; } }
body.no-scroll { overflow: hidden; }

/* ============ корзина ============ */
.cart-layout, .co-layout { display: grid; gap: 24px; }
.cart-layout > *, .co-layout > * { min-width: 0; }
@media (min-width: 1200px) { .cart-layout, .co-layout { grid-template-columns: 1fr 380px; gap: 40px; align-items: start; } .cart-side, .co-side { position: sticky; top: calc(var(--hdr-h) + 16px); } }
.cart-dates { flex-direction: row; align-items: center; gap: 14px; padding: 16px; box-shadow: none; }
.cart-dates > .ic { color: var(--teal); }
.cart-dates > div { flex: 1; min-width: 0; }
.cart-dates .lab { margin-bottom: 2px; color: var(--ink-2); font-weight: 400; }
.cart-list { margin-top: 16px; display: grid; gap: 12px; }
.ci { display: grid; grid-template-columns: 88px 1fr; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: #fff; }
.ci img { width: 88px; height: 88px; border-radius: 12px; object-fit: cover; background: var(--mist); }
.ci-n { font-weight: 600; line-height: 1.35; }
.ci-n a:hover { color: var(--teal); text-decoration: underline; }
.ci-m { font-size: calc(13px * var(--fs)); color: var(--ink-2); margin-top: 2px; }
.ci-f { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ci-f b { font-size: calc(18px * var(--fs)); }
.ci-del { color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; font-size: calc(14px * var(--fs)); }
.ci-del:hover { color: var(--err); }
.ci .st { margin-top: 6px; }
@media (min-width: 768px) { .ci { grid-template-columns: 96px 1fr auto; align-items: center; } .ci img { width: 96px; height: 96px; } .ci-f { grid-column: auto; flex-direction: column; align-items: flex-end; } }
.sumbox, .co-side { padding: 20px; gap: 14px; }
.sum-l { display: grid; gap: 8px; font-size: calc(15px * var(--fs)); }
.sum-l div { display: flex; justify-content: space-between; gap: 12px; }
.sum-l dt { color: var(--ink-2); }
.sum-l .off dd { color: var(--ok); font-weight: 600; }
.sum-l .tot { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line); font-size: calc(20px * var(--fs)); font-weight: 700; }
.sum-l .tot dt { color: var(--ink); }

/* ============ оформление ============ */
.stepper { display: flex; gap: 6px; counter-reset: s; }
.stepper li { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: calc(12px * var(--fs)); color: var(--ink-3); font-weight: 500; }
.stepper li span { height: 4px; border-radius: 2px; background: var(--line); font-size: 0; }
.stepper li.is-done, .stepper li.is-on { color: var(--ink); }
.stepper li.is-done span { background: var(--teal); }
.stepper li.is-on span { background: var(--yellow); }
@media (min-width: 768px) { .stepper li { font-size: calc(14px * var(--fs)); } }
.co-layout { margin-top: 24px; }
.co-main { padding: 20px; box-shadow: none; }
@media (min-width: 768px) { .co-main { padding: 32px; } }
.opt-l { display: grid; gap: 10px; margin-top: 16px; }
.opt { cursor: pointer; }
.opt input { position: absolute; opacity: 0; }
.opt-b { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1.5px solid var(--line-2); border-radius: var(--r); font-size: calc(14px * var(--fs)); color: var(--ink-2); line-height: 1.45; }
.opt-b b { display: block; color: var(--ink); font-size: calc(16px * var(--fs)); margin-bottom: 2px; }
.opt-b > .ic { color: var(--teal); margin-top: 2px; }
.opt input:checked + .opt-b { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); background: var(--mist-2); }
.opt input:focus-visible + .opt-b { box-shadow: var(--focus); }
.co-dates { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 16px; border-radius: var(--r); background: var(--mist-2); }
.co-dates > div { flex: 1; }
.co-dates .lab { margin-bottom: 2px; color: var(--ink-2); font-weight: 400; }
.otp { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 420px; }
.otp-code input { letter-spacing: .5em; font-weight: 600; font-size: calc(22px * var(--fs)); }
.otp-sent { font-size: calc(14px * var(--fs)); color: var(--ink-2); }
.otp-sent b { color: var(--ink); }
.otp-again { font-size: calc(14px * var(--fs)); color: var(--ink-2); }
.otp-again button { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.gov { margin-top: 20px; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; }
.gov-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--ok-bg); color: var(--ok); font-weight: 600; font-size: calc(14px * var(--fs)); }
.gov-h.is-warn { background: var(--warn-bg); color: var(--warn); }
.gov-h.is-load { background: var(--mist); color: var(--ink-2); }
.gov-h .spin { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.gov dl { padding: 12px 16px; display: grid; gap: 8px; }
.gov dl div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; font-size: calc(15px * var(--fs)); }
.gov dt { color: var(--ink-2); }
.gov dd { font-weight: 600; }
.gov p { padding: 0 16px 14px; font-size: calc(13px * var(--fs)); color: var(--ink-2); }
.consents { margin-top: 20px; display: grid; gap: 12px; }
.consents.is-err .err-msg { display: flex; }
.co-rev { display: grid; gap: 10px; margin-top: 16px; }
.co-rev div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; font-size: calc(15px * var(--fs)); }
@media (min-width: 768px) { .co-rev div { grid-template-columns: 180px 1fr; } }
.co-rev dt { color: var(--ink-2); }
.co-items { display: grid; gap: 10px; }
.co-it { display: flex; gap: 10px; align-items: center; font-size: calc(14px * var(--fs)); }
.co-it img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.co-it span { flex: 1; line-height: 1.3; }
.co-it b { white-space: nowrap; }
.ok-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin-bottom: 16px; }
.ok-steps { margin-top: 16px; display: grid; gap: 10px; counter-reset: ok; }
.ok-steps li { position: relative; padding-left: 38px; min-height: 26px; font-size: calc(15px * var(--fs)); }
.ok-steps li::before { position: absolute; left: 0; top: 0; counter-increment: ok; content: counter(ok); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: var(--on-yellow); font-weight: 700; font-size: calc(13px * var(--fs)); display: grid; place-items: center; }

/* имитация платёжной страницы банка */
.bank { position: fixed; inset: 0; z-index: 95; background: #EEF1F4; overflow-y: auto; display: flex; justify-content: center; padding: 24px 16px; }
.bank-box { width: 100%; max-width: 440px; background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 8px 32px rgba(0,0,0,.08); align-self: flex-start; }
.bank-demo { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--warn); background: var(--warn-bg); padding: 6px 10px; border-radius: 8px; margin-bottom: 16px; }
.bank-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #E5E8EC; }
.bank-top b { font-size: 20px; color: #C8102E; letter-spacing: -.01em; }
.bank-top span { font-size: 13px; color: #5A6470; }
.bank-sum { font-size: 30px; font-weight: 700; margin-top: 16px; }
.bank .btn-pri { background: #C8102E; color: #fff; }
.bank .btn-pri:hover { background: #A50D26; }

/* ============ личный кабинет ============ */
.btn-danger { background: var(--err-bg); color: var(--err); border-color: var(--err); }
.btn.is-off { background: var(--line); color: var(--ink-3); cursor: not-allowed; }
.ext { padding: 16px; border-radius: var(--r); background: var(--mist-2); }
.ext .chips { margin-top: 0; }
button.link-u { font-size: inherit; padding: 0; }

.login { max-width: 520px; padding: 24px; box-shadow: none; }
@media (min-width: 768px) { .login { padding: 40px; } }
.acc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.acc-head .over { margin-bottom: 8px; }
.acc-tabs { display: flex; gap: 8px; margin: 24px 0; }
.orders { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ord { border: 1px solid var(--line); border-radius: var(--r-l); background: #fff; overflow: hidden; }
.ord-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--mist-2); }
.ord-h b { font-size: calc(17px * var(--fs)); }
.ord-b { padding: 16px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1200px) { .ord-b { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; } }
.ord-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ord-meta { display: grid; gap: 6px; font-size: calc(14px * var(--fs)); color: var(--ink-2); }
.ord-meta b { color: var(--ink); }
.ord-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.tl { display: grid; gap: 0; align-content: start; }
.tl li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: calc(14px * var(--fs)); color: var(--ink-3); position: relative; padding-bottom: 12px; }
.tl li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-2); background: #fff; margin: 4px 0 0 2px; position: relative; z-index: 1; }
.tl li:not(:last-child)::after { content: ''; position: absolute; left: 7px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.tl li.is-done { color: var(--ink); } .tl li.is-done::before { background: var(--teal); border-color: var(--teal); }
.tl li.is-now { color: var(--ink); font-weight: 600; } .tl li.is-now::before { background: var(--yellow); border-color: var(--on-yellow); }
.tl small { display: block; font-weight: 400; color: var(--ink-2); }
.timer { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: var(--r); background: #FFF8DB; font-size: calc(14px * var(--fs)); }
.timer .ic { color: var(--ochre); }
.docs-l { display: flex; flex-wrap: wrap; gap: 8px; }
.docs-l a { display: inline-flex; gap: 6px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); font-size: calc(13px * var(--fs)); }
.docs-l a:hover { border-color: var(--teal); }
.docs-l .ic { color: var(--teal); }
.profile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1200px) { .profile { grid-template-columns: 1fr 1fr; align-items: start; } }
.pf { padding: 20px; box-shadow: none; gap: 12px; }
.pf dl { display: grid; gap: 10px; }
.pf dl div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; font-size: calc(15px * var(--fs)); }
.pf dt { color: var(--ink-2); }
.pf dd { font-weight: 500; }
.lim { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.lim i { display: block; height: 100%; background: var(--teal); border-radius: 4px; }
.cardrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); }
.cardrow b { flex: 1; }

/* ============ как арендовать, контакты ============ */
.how-grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .how-grid { grid-template-columns: 1fr 1fr; } }
.how-b { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px; scroll-margin-top: calc(var(--hdr-h) + 16px); }
.how-b .tiers { grid-template-columns: repeat(3, 1fr); }
.how-b .tiers b { font-size: calc(15px * var(--fs)); }
.ct-grid { display: grid; gap: 24px; }
@media (min-width: 1200px) { .ct-grid { grid-template-columns: 5fr 7fr; align-items: stretch; } }
.ct-card { padding: 24px; box-shadow: none; gap: 16px; }
.ct-dl { display: grid; gap: 14px; }
.ct-dl div { display: flex; gap: 12px; align-items: flex-start; font-size: calc(15px * var(--fs)); }
.ct-dl .ic { color: var(--teal); margin-top: 1px; }
.ct-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ct-acts .btn-pri { flex: 1 1 100%; }
.map { position: relative; border-radius: var(--r-l); overflow: hidden; min-height: 320px; background: #E6EEEC; border: 1px solid var(--line); }
.map svg.map-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.map-pin b { background: #fff; padding: 6px 10px; border-radius: var(--r-s); font-size: calc(13px * var(--fs)); box-shadow: var(--sh-1); white-space: nowrap; }
.map-pin i { width: 20px; height: 20px; border-radius: 50%; background: var(--yellow); border: 4px solid var(--teal); box-shadow: var(--sh-1); }
.map-note { position: absolute; left: 12px; bottom: 12px; background: #fff; border-radius: var(--r-s); padding: 6px 10px; font-size: calc(12px * var(--fs)); }
.m-search .srch { background: #fff; border-color: var(--line-2); }

/* ============ футер ============ */
.ftr { background: var(--teal); color: rgba(255,255,255,.75); padding: 40px 0 32px; font-size: calc(14px * var(--fs)); margin-top: 0; }
.ftr-grid { display: grid; gap: 28px; }
.ftr-col { display: flex; flex-direction: column; gap: 10px; }
.ftr-col a:hover { color: #fff; }
.ftr-h { font-size: calc(12px * var(--fs)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 4px; }
.ftr .logo img { height: 44px; }
.ftr-svc { display: grid; gap: 8px; }
.ftr-cur, .ftr-x { display: flex; flex-direction: column; padding: 12px 14px; border-radius: var(--r); font-size: calc(13px * var(--fs)); line-height: 1.35; }
.ftr-cur { border: 1px solid rgba(255,255,255,.18); }
.ftr-x { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); }
.ftr-x:hover { background: rgba(255,255,255,.16); }
.ftr-cur b, .ftr-x b { display: inline-flex; gap: 4px; align-items: center; font-size: calc(15px * var(--fs)); color: #fff; }
.ftr-soc { display: flex; gap: 8px; }
.ftr-soc a { width: 44px; height: 44px; border-radius: var(--r); background: rgba(255,255,255,.08); display: grid; place-items: center; color: #fff; }
.ftr-soc a:hover { background: rgba(255,255,255,.16); }
.ftr-bot { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: calc(12px * var(--fs)); color: rgba(255,255,255,.6); }
@media (min-width: 768px) { .ftr-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .ftr { padding-top: 64px; } .ftr-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 48px; } }

/* ============ разное ============ */
.toast { width: max-content; position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--r); font-size: calc(14px * var(--fs)); z-index: 100; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: calc(100% - 32px); display: flex; gap: 12px; align-items: center; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: var(--yellow); font-weight: 600; white-space: nowrap; }
body.has-pbar .toast { bottom: calc(148px + env(safe-area-inset-bottom)); }
@media (min-width: 1200px) { .toast, body.has-pbar .toast { bottom: 32px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ============ специальные возможности (как на ForteLeasing) ============ */
html.a11y-fs-2 { --fs: 1.25; --fs-h: 1.12; }
html.a11y-fs-3 { --fs: 1.5; --fs-h: 1.25; }
.a11y { border-top: 1px solid var(--line); background: #fff; max-height: calc(100vh - var(--hdr-h)); overflow-y: auto; }
.a11y-in { padding-top: 16px; padding-bottom: 16px; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.a11y-t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: calc(17px * var(--fs)); }
.a11y-acts { display: flex; align-items: center; gap: 4px; }
.a11y-grid { display: grid; gap: 14px 24px; margin-top: 12px; }
.a11y-l { font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.a11y-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.a11y-seg button { min-width: 48px; height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: #fff; font-weight: 600; }
.a11y-seg button[aria-pressed="true"] { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); color: var(--teal); }
.a11y-seg button:disabled { opacity: .45; cursor: not-allowed; }
.a11y-seg [aria-label="Крупный"] { font-size: calc(19px * var(--fs)); } .a11y-seg [aria-label="Очень крупный"] { font-size: calc(22px * var(--fs)); }
.a11y-sw { font-size: calc(18px * var(--fs)); }
html body .a11y-seg .a11y-sw.a11y-sw-def { background: #fff !important; color: #0E1F1D !important; border-color: #C3D1CE !important; }
html body .a11y-seg .a11y-sw.a11y-sw-bw { background: #fff !important; color: #000 !important; border-color: #000 !important; }
html body .a11y-seg .a11y-sw.a11y-sw-wb { background: #000 !important; color: #fff !important; border-color: #000 !important; }
html body .a11y-seg .a11y-sw.a11y-sw-blue { background: #9DD1FF !important; color: #063462 !important; border-color: #063462 !important; }
.a11y-sw[aria-pressed="true"] { outline: 3px solid var(--teal); outline-offset: 2px; }
.a11y-hint { font-size: calc(12px * var(--fs)); color: var(--ink-2); margin-top: 6px; }
.a11y-ear { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: var(--r); background: var(--mist); font-size: calc(14px * var(--fs)); }
.a11y-ear .ic { color: var(--teal); margin-top: 2px; }
.a11y-ear a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 768px) { .a11y-grid { grid-template-columns: repeat(3, auto); justify-content: start; } }
@media (min-width: 1200px) { .a11y-grid { grid-template-columns: repeat(5, auto); } }
html:is(.a11y-fs-2, .a11y-fs-3, .a11y-sp) .hdr :is(.xl, .lang-dd) { display: none !important; }
html:is(.a11y-fs-2, .a11y-fs-3, .a11y-sp) .btn { white-space: normal; height: auto; min-height: 48px; padding-block: 8px; }
html:is(.a11y-fs-2, .a11y-fs-3, .a11y-sp) .grid-pc { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
html:is(.a11y-fs-2, .a11y-fs-3, .a11y-sp) main :is(h1, h2, h3, p, li, a, b) { overflow-wrap: break-word; }
html.a11y-sp body * { letter-spacing: .06em !important; word-spacing: .16em !important; }
html.a11y-sp p, html.a11y-sp li, html.a11y-sp .lead, html.a11y-sp dd { line-height: 1.85 !important; }
html.a11y-noimg main img:not(.xlogo), html.a11y-noimg .hero-ph, html.a11y-noimg .card-img, html.a11y-noimg .xpromo-ph, html.a11y-noimg .cat-ph, html.a11y-noimg .cm-ph { display: none !important; }
html.a11y-noimg .pc-img, html.a11y-noimg .gal-m { aspect-ratio: auto; min-height: 56px; }
html.a11y-c-bw body, html.a11y-c-bw body *:not(svg):not(svg *):not(img) { background-color: #fff !important; background-image: none !important; color: #000 !important; border-color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
html.a11y-c-wb body, html.a11y-c-wb body *:not(svg):not(svg *):not(img) { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; }
html.a11y-c-blue body, html.a11y-c-blue body *:not(svg):not(svg *):not(img) { background-color: #9DD1FF !important; background-image: none !important; color: #063462 !important; border-color: #063462 !important; box-shadow: none !important; text-shadow: none !important; }
html[class*="a11y-c-"] svg.ic { color: inherit !important; }
html[class*="a11y-c-"] img:not(.logo img) { filter: grayscale(1); }
html[class*="a11y-c-"] :focus-visible { outline: 3px solid currentColor !important; outline-offset: 2px; }
html[class*="a11y-c-"] .hero-ph::after { display: none; }
html.a11y-c-wb .logo img, html.a11y-c-wb .xlogo, html.a11y-c-wb .menu-x img { filter: grayscale(1) invert(1) brightness(2); }
html.a11y-c-bw :is(.btn-pri, .addc, .cat-btn, [aria-pressed="true"], .is-on, .cal-d.is-start, .cal-d.is-end) { background-color: #000 !important; color: #fff !important; }
html.a11y-c-wb :is(.btn-pri, .addc, .cat-btn, [aria-pressed="true"], .is-on, .cal-d.is-start, .cal-d.is-end) { background-color: #fff !important; color: #000 !important; }
html.a11y-c-blue :is(.btn-pri, .addc, .cat-btn, [aria-pressed="true"], .is-on, .cal-d.is-start, .cal-d.is-end) { background-color: #063462 !important; color: #9DD1FF !important; }
html[class*="a11y-c-"] a:not(.btn):not(.cat-t):not(.cm-row) { text-decoration: underline; text-underline-offset: 2px; }
html.a11y-tts main, html.a11y-tts .ftr { cursor: help; }
.a11y-reading { outline: 3px dashed var(--teal) !important; outline-offset: 3px; border-radius: 4px; }

/* ============ флоу 25.10: даты по умолчанию, самовывоз, переписка, ущерб ============ */
.dpill.is-auto, .dfield.is-auto { border-color: var(--yellow-a); background: #FFF8DB; color: var(--ink); }
.cart-dates.is-auto, .co-dates.is-auto { background: #FFF8DB; outline: 1.5px solid var(--yellow-a); outline-offset: -1.5px; }
.cart-dates.is-auto .h3, .co-dates.is-auto .h3 { color: var(--ochre); }
.pick { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--r); background: var(--mist-2); }
.pick > .ic { color: var(--teal); margin-top: 2px; }
.pick p { margin: 2px 0 0; }
.chat { display: grid; gap: 8px; padding-top: 4px; }
.msg { max-width: 85%; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--mist); justify-self: start; }
.msg p { margin: 0; font-size: calc(14px * var(--fs)); overflow-wrap: anywhere; }
.msg small { display: block; margin-top: 2px; font-size: calc(12px * var(--fs)); color: var(--ink-3); }
.msg-me { justify-self: end; border-radius: 14px 14px 4px 14px; background: #FFF3BF; }
.chat-f { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 4px; }
.chat-f .inp input { min-width: 0; }
.dmg { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r); background: var(--warn-bg); }
.dmg p { margin: 0; }
.dmg-ph { display: flex; flex-wrap: wrap; gap: 8px; }
.dmg-ph span { width: 56px; height: 56px; border-radius: var(--r-s); background: repeating-linear-gradient(45deg, #E9DCC0 0 6px, #F3E8CF 6px 12px); display: grid; place-items: center; color: var(--warn); }
.ftr-proto { margin-top: 0; padding-top: 12px; border-top: 0; }
.ftr-proto a { color: rgba(255,255,255,.75); text-decoration: underline; text-underline-offset: 2px; }

/* Цели нажатия на телефоне не меньше 44 px (QA, доступность): «Удалить» и название в корзине, «Изменить» срок, язык, «Изменить номер» */
@media (pointer: coarse) {
  .ci-del, .lang-menu a, [data-dates-open], [data-otp-edit] { min-height: 44px; min-width: 44px; }
  .ci-del, [data-otp-edit] { display: inline-flex; align-items: center; }
  .ci-n a { display: inline-block; padding-block: 10px; }
}
/* ждём внешний сервис (госбаза, TrustMe): что сейчас происходит, висит до ответа */
.wait-note { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--r); font-size: calc(14px * var(--fs)); z-index: 99; display: flex; gap: 12px; align-items: center; }
.wait-note .spin { flex: none; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }