/* Adam’s Detailing — компоненты дизайн-системы.
   Базовый блок перенесён из project/components/bundle.css дизайн-системы
   (версия от 2026-10-16, 20:35: секция услуг из трёх блоков + карточка Антихром).
   Ниже базового блока — адаптив и защита от переполнения, которых в системе нет. */

.ds-root{background:var(--ground);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
.ds-eyebrow{font-family:var(--font-sans);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.ds-h-section{font:500 56px/1 var(--font-display);letter-spacing:-.015em;text-transform:uppercase;text-align:center;color:var(--ink);margin:0}
.ds-h-section em{font-style:normal;color:var(--accent)}

/* Button */
.ds-btn{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 8px 0 28px;border-radius:var(--radius-pill);font:600 14px/20px var(--font-sans);letter-spacing:.04em;cursor:pointer;border:1px solid transparent;transition:background .4s ease-out,color .4s ease-out,border-color .4s ease-out;text-decoration:none}
.ds-btn .ds-btn__dot{width:40px;height:40px;border-radius:var(--radius-round);display:grid;place-items:center;transition:transform .5s ease-out;flex:none}
.ds-btn:hover .ds-btn__dot{transform:rotate(45deg)}
.ds-btn--primary{background:var(--bronze);color:var(--on-bronze)}
.ds-btn--primary .ds-btn__dot{background:var(--on-bronze);color:var(--bronze)}
.ds-btn--ghost{background:transparent;color:var(--ink);border-color:var(--hairline-strong)}
.ds-btn--ghost .ds-btn__dot{background:var(--ink);color:var(--ground)}
.ds-btn--ghost:hover{background:var(--surface-raised)}
.ds-btn:focus-visible,.ds-round:focus-visible,.ds-tab:focus-visible,.ds-chip:focus-visible,.ds-q:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ds-round{width:56px;height:56px;border-radius:var(--radius-round);border:1px solid var(--hairline-strong);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .4s ease-out,color .4s ease-out;flex:none}
.ds-round:hover{background:var(--ink);color:var(--ground)}
.ds-round--fill{background:var(--bronze);border-color:var(--bronze);color:var(--on-bronze)}
.ds-round--fill:hover{background:var(--ink);border-color:var(--ink);color:var(--ground)}
/* Кнопку на краю карусели не отключаем через disabled: такая кнопка выпадает
   из обхода по Tab, и если она была в фокусе — фокус теряется. Вместо этого
   aria-disabled: кнопка остаётся достижимой, но ничего не делает. */
.ds-round[disabled],.ds-round[aria-disabled="true"]{opacity:.35;cursor:default}
.ds-round[disabled]:hover,.ds-round[aria-disabled="true"]:hover{background:transparent;color:var(--ink)}
.ds-round--fill[aria-disabled="true"]:hover{background:var(--bronze);border-color:var(--bronze);color:var(--on-bronze)}

/* RoundNav */
.ds-nav{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--hairline)}
.ds-nav__logo{width:48px;height:48px;border-radius:var(--radius-round);overflow:hidden;flex:none}
.ds-nav__logo img{width:100%;height:100%;object-fit:cover;display:block}
.ds-nav__item{height:48px;padding:0 20px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;font:600 14px/20px var(--font-sans);color:var(--muted);text-decoration:none;transition:background .4s,color .4s;white-space:nowrap}
.ds-nav__item:hover{color:var(--ink)}
.ds-nav__item[aria-current="page"]{background:var(--surface-raised);color:var(--ink)}
.ds-nav__item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ds-ring{position:relative;width:132px;height:132px;border-radius:var(--radius-round);display:grid;place-items:center;color:var(--ink);text-decoration:none}
.ds-ring svg.ds-ring__text{position:absolute;inset:0;width:100%;height:100%;animation:ds-spin 18s linear infinite;fill:var(--ink)}
.ds-ring__core{width:72px;height:72px;border-radius:var(--radius-round);background:var(--bronze);color:var(--on-bronze);display:grid;place-items:center;transition:transform .5s ease-out}
.ds-ring:hover .ds-ring__core{transform:scale(1.08) rotate(45deg)}
.ds-ring:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@keyframes ds-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ds-ring svg.ds-ring__text{animation:none}}

/* ---------- Витрина услуг (кремовые листы) ---------- */
.ds-svc{position:relative;background:var(--paper);color:var(--paper-ink);border:1px solid var(--paper-line);border-radius:var(--radius-lg);padding:8px;display:flex;flex-direction:column;transition:transform .5s ease-out}
.ds-svc:hover{transform:translateY(-4px)}
.ds-svc__photo{position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:var(--photo-ground)}
.ds-svc__photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease-out}
.ds-svc:hover .ds-svc__photo img{transform:scale(1.04)}
.ds-badge{position:absolute;top:16px;left:16px;z-index:1;height:36px;padding:0 18px;border-radius:var(--radius-pill);background:var(--bronze);color:var(--on-bronze);font:600 13px/36px var(--font-sans);letter-spacing:.04em}
.ds-svc__body{padding:32px 32px 32px;display:flex;flex-direction:column;gap:16px;flex:1}
.ds-kicker{font:500 16px/22px var(--font-sans);color:var(--paper-muted)}
.ds-svc__title{font:600 30px/1.08 var(--font-display);letter-spacing:-.015em;color:var(--paper-accent);margin:-8px 0 0}
.ds-svc__text{font:400 15px/24px var(--font-sans);color:var(--paper-muted);margin:0;max-width:44ch}
.ds-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:8px 0 0;padding:0}
.ds-chip{height:40px;padding:0 18px;border-radius:var(--radius-pill);border:1px solid var(--paper-accent);background:transparent;color:var(--paper-ink);font:500 14px/38px var(--font-sans);white-space:nowrap}
.ds-chip--solid{background:var(--paper-ink);border-color:var(--paper-ink);color:var(--paper)}
.ds-svc__spacer{flex:1;min-height:16px}

/* Цены по классам */
.ds-cls{display:flex;align-items:center;gap:8px;font:400 18px/24px var(--font-sans);color:var(--paper-muted)}
.ds-q{position:relative;width:22px;height:22px;border-radius:var(--radius-round);border:0;background:var(--paper-line);color:var(--paper-muted);font:600 12px/22px var(--font-sans);text-align:center;cursor:help;padding:0}
.ds-q::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(4px);width:220px;padding:12px 14px;border-radius:12px;background:var(--paper-ink);color:var(--paper);font:500 12px/18px var(--font-sans);text-align:left;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:5}
.ds-q:hover::after,.ds-q:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
.ds-main-price{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;font:500 44px/1 var(--font-display);letter-spacing:-.02em;color:var(--paper-ink);margin-top:4px}
.ds-main-price small{font:500 13px/18px var(--font-sans);letter-spacing:0;color:var(--paper-muted)}
.ds-tiers{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--paper-line);border-radius:22px;margin-top:8px}
.ds-tier{position:relative;padding:14px 16px 16px;min-width:0}
.ds-tier+.ds-tier{border-left:1px solid var(--paper-line)}
.ds-tier__label{font:500 12px/16px var(--font-sans);color:var(--paper-muted)}
.ds-tier__price{font:500 19px/26px var(--font-display);letter-spacing:-.01em;color:var(--paper-ink);margin-top:2px;white-space:nowrap}
.ds-tier .ds-q{position:absolute;top:12px;right:12px;width:20px;height:20px;line-height:20px;font-size:11px}

/* Широкая карточка: текст слева, фото справа */
.ds-svc--wide{flex-direction:row;align-items:stretch}
.ds-svc--wide .ds-svc__body{flex:1 1 44%;padding:48px}
.ds-svc--wide .ds-svc__photo{flex:1 1 56%;aspect-ratio:auto;min-height:420px}
.ds-opt{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.ds-opt + .ds-opt{margin-top:16px}
.ds-opt__price{font:500 44px/1 var(--font-display);letter-spacing:-.02em;color:var(--paper-ink)}
@media (max-width:760px){.ds-svc--wide{flex-direction:column-reverse}.ds-svc--wide .ds-svc__photo{min-height:220px}.ds-svc--wide .ds-svc__body{padding:28px}.ds-main-price,.ds-opt__price{font-size:36px}}

/* Карточка-разворот (Антихром): широкое фото сверху, под ним два варианта */
.ds-svc--split .ds-svc__photo{aspect-ratio:3.4/1}
.ds-svc--split .ds-svc__body{padding:48px}
.ds-split{display:grid;grid-template-columns:1fr 1fr;margin-top:8px}
.ds-split__col{display:flex;flex-direction:column;gap:16px;padding-right:48px}
.ds-split__col+.ds-split__col{padding:0 0 0 48px;border-left:1px solid var(--paper-line)}
.ds-split__note{min-height:48px}
@media (max-width:760px){.ds-svc--split .ds-svc__body{padding:28px}.ds-split{grid-template-columns:1fr;gap:40px}.ds-split__col,.ds-split__col+.ds-split__col{padding:0;border:0}}

/* Раскладка секции услуг */
.ds-section{display:flex;flex-direction:column;gap:64px}
.ds-section+.ds-section{margin-top:120px}
.ds-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.ds-stack{display:flex;flex-direction:column;gap:24px}
@media (max-width:1000px){.ds-row{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.ds-row{grid-template-columns:1fr}.ds-h-section{font-size:32px}}

/* Прайс по элементам */
.ds-ptab{background:var(--paper);color:var(--paper-ink);border-radius:var(--radius-lg);padding:56px}
.ds-ptab__head,.ds-ptab__row{display:grid;grid-template-columns:2fr repeat(3,1fr);align-items:center;gap:16px}
.ds-ptab__head{margin-bottom:24px;align-items:end}
.ds-ptab__title{font:600 40px/1.04 var(--font-display);letter-spacing:-.015em;color:var(--paper-accent);margin:0}
.ds-ptab__col{display:flex;align-items:center;gap:8px;font:400 22px/28px var(--font-sans);color:var(--paper-muted)}
.ds-ptab__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ds-ptab__row{min-height:72px;padding:0 28px;border:1px solid var(--paper-line);border-radius:22px;transition:background .3s}
.ds-ptab__row:hover{border-color:var(--paper-accent)}
/* Заглушка фото, пока нет реальных снимков */
.ds-ph{position:absolute;inset:0;width:100%;height:100%}
.ds-ph .s{fill:none;stroke:var(--cream);stroke-opacity:.22;stroke-width:1.5}
.ds-ph .h{fill:var(--cream);fill-opacity:.08}
.ds-ph text{fill:var(--cream);fill-opacity:.5;font:600 11px var(--font-sans);letter-spacing:.22em}
.ds-ptab__name{font:400 18px/24px var(--font-sans);color:var(--paper-ink)}
.ds-ptab__cost{font:500 19px/24px var(--font-display);color:var(--paper-ink);white-space:nowrap}
.ds-ptab__note{margin:32px 0 0;font:400 15px/24px var(--font-sans);color:var(--paper-muted)}
.ds-ptab__cls-m{display:none}
@media (max-width:760px){.ds-ptab{padding:28px}.ds-ptab__head .ds-ptab__col{display:none}.ds-ptab__row{grid-template-columns:repeat(3,1fr);padding:16px 20px}.ds-ptab__name{grid-column:1/-1}.ds-ptab__cls-m{display:block;font:500 11px/14px var(--font-sans);color:var(--paper-muted)}}

/* Вкладки классов — остаются в системе для калькулятора */
.ds-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius-pill);border:1px solid var(--hairline)}
.ds-tab{height:44px;padding:0 22px;border-radius:var(--radius-pill);border:0;background:transparent;color:var(--muted);font:600 14px/20px var(--font-sans);letter-spacing:.04em;cursor:pointer;transition:background .4s,color .4s}
.ds-tab[aria-selected="true"]{background:var(--bronze);color:var(--on-bronze)}

/* ============================================================
   Адаптив и защита от переполнения — поверх системы
   ============================================================ */

/* Кнопки-подсказки «?» на странице не используются: классы названы по кузову
   («Седан», «Кроссовер», «Внедорожник») и в расшифровке не нуждаются.
   Сам компонент .ds-q остаётся выше — он часть дизайн-системы. */

/* Текст по окружности вращается: повёрнутый квадратный SVG даёт габарит в 1.41 раза
   шире круга и на узких экранах выпирал за правый край страницы. */
.ds-ring{overflow:hidden}

/* Длинные русские слова («Восстановительная») распирают колонку грида,
   если им не разрешить перенос: без этого появляется горизонтальный скролл */
/* Только аварийный перенос неразрывного слова. hyphens:auto здесь был ошибкой:
   браузер начинал рубить русские слова дефисами при каждом удобном случае
   («Оклей-ка по эле-мен-там»), хотя места хватало. */
.ds-svc__title,.ds-ptab__title,.ds-h-section{overflow-wrap:break-word;hyphens:manual}
/* min-width:0 и на самой карточке: иначе длинное слово в заголовке раздувает
   дорожку грида (`1fr` = minmax(auto,1fr)) и уносит страницу вбок */
.ds-svc,.ds-svc__body,.ds-tier,.ds-ptab__row,.ds-ptab__col,.ds-split__col{min-width:0}

/* Заголовки системы заданы фиксированным кеглем — делаю их плавными */
.ds-h-section{font-size:clamp(30px, 5vw, 56px)}
.ds-ptab__title{font-size:clamp(26px, 3.4vw, 40px)}
.ds-ptab__col{font-size:clamp(16px, 1.6vw, 22px)}
/* Потолок 26px, а не 30 из системы: её примеры заголовков короткие («Зоны риска»),
   а у нас есть «Предпродажная подготовка» — при 30px это слово не влезает
   в карточку трёхколоночного ряда и рвётся переносом. */
.ds-svc__title{font-size:clamp(20px, 2.2vw, 26px)}
.ds-svc__body{padding:clamp(20px, 2.2vw, 32px)}
.ds-svc--wide .ds-svc__title,
.ds-svc--split .ds-svc__title{font-size:clamp(28px, 3.2vw, 40px)}
.ds-main-price,.ds-opt__price{font-size:clamp(34px, 3.4vw, 44px)}
.ds-tier__price{font-size:clamp(16px, 1.5vw, 19px)}

/* Ритм секций в системе фиксированный — тянем его вместе с экраном */
.ds-section{gap:clamp(32px, 4.6vw, 64px)}
.ds-section+.ds-section{margin-top:clamp(64px, 8.4vw, 120px)}

/* Фото Антихрома 3.4:1 на телефоне превращается в полоску высотой ~100px */
@media (max-width: 760px){
  .ds-svc--split .ds-svc__photo{aspect-ratio:2/1}
}

/* Названия кузова («Внедорожник») заметно длиннее римских «III класс», под которые
   система считала колонки: на средних ширинах шапка переполнялась. */
@media (max-width: 1040px){
  .ds-ptab{padding:40px 32px}
  .ds-ptab__head,.ds-ptab__row{grid-template-columns:1.3fr repeat(3, minmax(0, 1fr));gap:12px}
  .ds-ptab__col{font-size:15px}
  .ds-ptab__row{padding:0 20px}
}

/* Система прячет колонки классов через display:none, но дорожки грида остаются,
   и заголовку достаётся лишь 1.3fr из 4.3 — на телефоне это 113px вместо 318,
   отчего «Оклейка по элементам» рубилась в столбик. Схлопываем шапку в одну колонку. */
@media (max-width: 760px){
  .ds-ptab__head{grid-template-columns:1fr;margin-bottom:20px}
}

/* Мобильная раскладка прайса из системы (3 колонки) рассчитана на 4-значные суммы:
   при «25 000 ₽» три nowrap-ячейки требуют 400px и ломают страницу.
   Ниже 500px показываем каждый класс отдельной строкой «класс — цена». */
@media (max-width: 500px){
  .ds-ptab{padding:24px 20px}
  .ds-ptab__row{grid-template-columns:1fr;gap:0;padding:16px 18px}
  .ds-ptab__name{grid-column:1 / -1;font-weight:500;margin-bottom:8px}
  .ds-ptab__cost{
    grid-column:1 / -1;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    font-size:16px;
    padding:4px 0;
  }
  .ds-ptab__cost + .ds-ptab__cost{border-top:1px solid var(--paper-line)}
  .ds-ptab__cls-m{display:block;font:500 13px/22px var(--font-sans);color:var(--paper-muted)}
  .ds-ptab__note{margin-top:24px;font-size:14px}
}

/* Плашка двух классов делит карточку пополам: на узком экране шестизначная цена
   с nowrap («250 000 ₽») в половину не влезает — раскладываем классы в столбик */
@media (max-width: 420px){
  .ds-tiers{grid-template-columns:1fr}
  .ds-tier + .ds-tier{border-left:0;border-top:1px solid var(--paper-line)}
  .ds-tier{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 16px}
  .ds-tier__price{margin-top:0}
}

@media (max-width: 900px){
  .ds-badge{top:12px;left:12px;height:32px;padding:0 14px;line-height:32px;font-size:12px}
  /* В двухколоночном ряду плашка класса — четверть ширины карточки,
     и «Внедорожник» в неё не помещался */
  .ds-tier{padding:12px 12px 14px}
  .ds-tier__label{font-size:11px}
}

/* Капсула сворачивается в круглую кнопку «Меню», когда пункты не влезают.
   Пунктов четыре и они короткие (Услуги, Работы, Отзывы, Контакты),
   поэтому текстовое меню держится до 640px. */
@media (max-width: 640px){
  .ds-nav__item{display:none}
}

/* На телефоне кегли из системы рассчитаны на десктоп и съедают экран:
   карточка уходит в три прокрутки там, где хватило бы одной. Ужимаем по месту. */
@media (max-width: 640px){
  .ds-ring{width:88px;height:88px}
  .ds-ring__core{width:48px;height:48px}
  .ds-chip{height:36px;line-height:34px;padding:0 14px;font-size:13px;white-space:normal}

  .ds-kicker{font-size:15px;line-height:20px}
  .ds-cls{font-size:16px;line-height:22px}
  .ds-main-price,.ds-opt__price{font-size:30px}
  .ds-svc__text{font-size:14.5px;line-height:23px}
  .ds-svc__body{gap:14px}
  .ds-ptab__name{font-size:17px}
  .ds-ptab__note{font-size:13.5px;line-height:21px}
}

@media (prefers-reduced-motion: reduce) {
  .ds-ring svg.ds-ring__text{animation:none}
  .ds-btn,.ds-btn .ds-btn__dot,.ds-round,.ds-tab,.ds-ring__core,.ds-nav__item,
  .ds-svc,.ds-svc__photo img,.ds-ptab__row{transition-duration:.01ms}
  .ds-svc:hover{transform:none}
  .ds-svc:hover .ds-svc__photo img{transform:none}
}