/* ЗІБРАНО АВТОМАТИЧНО — tools/build-css.py. Руками не правити.
   Джерело: main.css і все, що він імпортує. */
/* Icon Cars — порядок підключення стилів: base → components → layout → sections → utils. */

/* 1. Base */

/* ── assets/css/base/_reset.css ── */
/* Reset / normalize */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Відступ для якорів під закріплену шапку; :where() не додає ваги. */
:where([id]) {
  scroll-margin-top: calc(
    var(--header-height) + var(--space-24) + var(--wp-admin--admin-bar--height, 0px)
  );
}

:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
  margin: 0;
}

:where(ul[class], ol[class]) {
  margin: 0;
  padding: 0;
  list-style: none;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

:where(fieldset) {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

:where(legend) {
  padding: 0;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

:focus-visible {
  outline: 2px solid var(--color-focus, currentColor);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    /* затримку теж у нуль, інакше блок з animation-delay з'являється ривком */
    animation-delay: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ── assets/css/base/_variables.css ── */
/* Design tokens з Figma Variables: примітиви --c-, --fs-, --lh-; семантика --color-, --space-. */

:root {
  /* 1. Примітиви — кольори (назва = токен Figma) */
  --c-white: #ffffff;
  --c-black: #000000;

  --c-grey-5: #0d0d0d;   /* Cod Gray      */
  --c-grey-8: #151317;   /* Baltic Sea    */
  --c-grey-9: #161616;
  --c-grey-12: #1e1e1e;
  --c-grey-14: #232323;  /* Mine Shaft    */
  --c-grey-14b: #242424;
  --c-grey-16: #2a2a2a;
  --c-grey-20: #333333;
  --c-grey-23: #363a3f;  /* Tuna          */
  --c-grey-27: #444444;  /* Tundora       */
  --c-grey-29: #4a4a4a;
  --c-grey-42: #6b6b6b;  /* Dove Gray     */
  --c-grey-48: #7a7a7a;  /* Boulder       */
  --c-grey-50: #808080;
  --c-grey-54: #8a8a8a;  /* Gray          */
  --c-grey-60: #9a9a9a;  /* Dusty Gray    */
  --c-grey-66: #a8a8a8;  /* Silver Chalice*/
  --c-grey-71: #b9b7b3;  /* Cotton Seed   */
  --c-grey-78: #c9c7c3;  /* Cloud         */
  --c-grey-79: #c9c9c9;  /* Silver        */
  --c-grey-79b: #cccac6;
  --c-grey-81: #d2d0cc;
  --c-grey-82: #d5d3cf;
  --c-grey-83: #d6d4d0;  /* Timberwolf    */
  --c-grey-85: #dcdad6;
  --c-grey-86: #e0ded9;  /* Westar        */
  --c-grey-89: #e5e3df;
  --c-grey-91: #eceae6;
  --c-grey-95: #f4f3f1;  /* Cararra       */

  --c-yellow-58: #ffdd2b; /* Sunglow — акцент бренду */
  --c-yellow-36: #8a7a2e; /* Pesto                   */
  --c-orange-18: #3a3320; /* Birch                   */

  --c-red-49: #d92c1f;    /* Alizarin Crimson — «не веземо» */
  --c-green-37: #1f9d55;  /* Eucalyptus — підтвердження     */

  --c-azure-46: #647387;  /* Pale Sky     */
  --c-azure-51: #1a73e8;
  --c-azure-54: #1254ff;  /* Blue Ribbon  */

  /* 2. Семантика — кольори */
  --color-bg: var(--c-white);
  --color-bg-dark: var(--c-grey-5);
  --color-bg-soft: var(--c-grey-95);
  --color-bg-muted: var(--c-grey-91);

  --color-text: var(--c-grey-5);
  --color-text-invert: var(--c-white);
  --color-text-muted: var(--c-grey-42);
  --color-text-subtle: var(--c-grey-54);
  --color-text-dim: var(--c-grey-66);

  --color-accent: var(--c-yellow-58);
  --color-accent-ink: var(--c-grey-5);   /* текст на акцентному фоні */

  --color-border: var(--c-grey-86);
  --color-border-soft: var(--c-grey-91);
  --color-border-strong: var(--c-grey-83);
  --color-border-dark: var(--c-grey-20);

  --color-focus: var(--c-azure-54);

  /* 3. Типографіка */
  /* Власні назви родин, не «Inter»/«JetBrains Mono» — див. base/_fonts.css */
  --font-primary: "Icon Inter", "Icon Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Icon Mono", "Icon Mono Fallback", ui-monospace, "SFMono-Regular", monospace;

  /* кегль */
  --fs-8: 8px;
  --fs-9: 9px;
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-12-5: 12.5px;
  --fs-13: 13px;
  --fs-13-5: 13.5px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-16-body: 16px;
  --fs-19: 19px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-28: 28px;
  --fs-30: 30px;
  --fs-32: 32px;
  --fs-34: 34px;
  --fs-38: 38px;
  --fs-40: 40px;
  --fs-44: 44px;
  --fs-46: 46px;
  --fs-50: 50px;

  /* міжрядковий */
  --lh-10: 10px;
  --lh-12: 12px;
  --lh-13: 13px;
  --lh-14: 14px;
  --lh-14-5: 14.5px;
  --lh-15-5: 15.5px;
  --lh-16: 16px;
  --lh-18: 18px;
  --lh-19: 19px;
  --lh-19-5: 19.5px;
  --lh-20: 20px;
  --lh-20-63: 20.63px;
  --lh-22: 22px;
  --lh-22-1: 22.1px;
  --lh-22-28: 22.28px;
  --lh-24: 24px;
  --lh-26: 26px;
  --lh-27-6: 27.6px;
  --lh-28: 28px;
  --lh-30: 30px;
  --lh-32: 32px;
  --lh-34: 34px;
  --lh-34-5: 34.5px;
  --lh-36: 36px;
  --lh-38: 38px;
  --lh-40: 40px;
  --lh-44: 44px;
  --lh-48: 48px;
  --lh-50: 50px;
  --lh-52: 52px;
  --lh-56: 56px;

  /* трекінг */
  --ls-tight-1-6: -1.6px;
  --ls-tight-1-52: -1.52px;
  --ls-tight-1-32: -1.32px;
  --ls-tight-1-12: -1.12px;
  --ls-tight-1-38: -1.38px;
  --ls-tight-1-36: -1.36px;
  --ls-tight-1-28: -1.28px;
  --ls-tight-1-2: -1.2px;
  --ls-tight-1-5: -1.5px;
  --ls-tight-1-14: -1.14px;
  --ls-tight-1-02: -1.02px;
  --ls-tight-0-96: -0.96px;
  --ls-tight-0-9: -0.9px;
  --ls-tight-0-84: -0.84px;
  --ls-tight-0-66: -0.66px;
  --ls-tight-0-78: -0.78px;
  --ls-tight-0-72: -0.72px;
  --ls-tight-0-84: -0.84px;
  --ls-tight-0-48: -0.48px;
  --ls-tight-0-4: -0.4px;
  --ls-tight-0-38: -0.38px;
  --ls-0-28: 0.28px;
  --ls-0-39: 0.39px;
  --ls-0-42: 0.42px;
  --ls-0-44: 0.44px;
  --ls-0-48: 0.48px;
  --ls-0-6: 0.6px;
  --ls-0-65: 0.65px;
  --ls-0-72: 0.72px;
  --ls-0-78: 0.78px;
  --ls-0-9: 0.9px;
  --ls-0-96: 0.96px;
  --ls-1: 1px;
  --ls-1-08: 1.08px;
  --ls-1-1: 1.1px;
  --ls-1-4: 1.4px;
  --ls-1-26: 1.26px;
  --ls-1-6: 1.6px;
  --ls-1-8: 1.8px;

  /* 4. Відступи */
  --space-1: 1px;
  --space-2: 2px;    /* xxxs */
  --space-3: 3px;
  --space-4: 4px;    /* xxs  */
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;    /* xs   */
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;  /* s    */
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;  /* s+   */
  --space-28: 28px;
  --space-32: 32px;  /* m    */
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;  /* l    */

  /* 5. Радіуси, обведення */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-22: 22px;
  --radius-32: 32px;
  --radius-full: 999px;

  --stroke-1: 1px;
  --stroke-2: 2px;

  /* 6. Контейнери: хедер і футер мають власні, незалежні від сторінки */
  --container-max: 1440px;
  --container-padding: 60px;
  --container-narrow: 800px;

  --header-container-max: var(--container-max);
  --header-container-padding: var(--container-padding);

  --footer-container-max: var(--container-max);
  --footer-container-padding: var(--container-padding);

  /* 7. Розкладка, z-index, анімації */
  --header-height: 68px;
  --action-bar-height: 72px;

  --z-header: 100;
  --z-dropdown: 200;
  --z-action-bar: 800;
  --z-overlay: 900;
  --z-modal: 1000;

  --transition-fast: 0.15s ease;

  /* Тіні наведення — доповнення до макета, геометрію не змінюють. */
  --shadow-hover: 0 4px 14px rgb(0 0 0 / 14%);
  --shadow-hover-accent: 0 4px 16px rgb(255 221 43 / 38%);
  --transition-base: 0.25s ease;
}

/* Адаптив */

/* Малий ноут */
@media (max-width: 1279px) {
  :root {
    --container-padding: 40px;
  }
}

/* Планшет — уже стекова (мобільна) розкладка */
@media (max-width: 1023px) {
  :root {
    --container-padding: 32px;
    --header-height: 60px;
  }
}

/* Мобільна (макет 390) */
@media (max-width: 767px) {
  :root {
    --container-padding: 20px;
  }
}


/* ── assets/css/base/_fonts.css ── */
/* @font-face Inter + JetBrains Mono (OFL). Назви «Icon Inter»/«Icon Mono» не міняти: загальні перебивають розширення браузера.
   font-display: block у субсетів із preload — свідомо, optional лишав сторінку на запасному шрифті. */

@font-face {
  font-family: "Icon Inter";
  src: url("../fonts/inter-cyrillic-ext-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Icon Inter";
  src: url("../fonts/inter-cyrillic-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 800;
  font-display: block;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Icon Inter";
  src: url("../fonts/inter-latin-ext-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Icon Inter";
  src: url("../fonts/inter-latin-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 800;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Icon Inter";
  src: url("../fonts/inter-cyrillic-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Icon Inter";
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: block;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Icon Inter";
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Icon Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Icon Mono";
  src: url("../fonts/jetbrains-mono-cyrillic-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Icon Mono";
  src: url("../fonts/jetbrains-mono-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: block;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Icon Mono";
  src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Icon Mono";
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Запасні Arial/Courier New з метриками Inter/JetBrains Mono, щоб підміна не зсувала текст; ascent/descent поділені на size-adjust. */

@font-face {
  font-family: "Icon Inter Fallback";
  src: local("Arial");
  font-style: normal;
  size-adjust: 107.12%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Icon Inter Fallback";
  src: local("Arial");
  font-style: italic;
  size-adjust: 107.12%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Icon Mono Fallback";
  src: local("Courier New"), local("Liberation Mono");
  font-style: normal;
  size-adjust: 99.98%;
  ascent-override: 102.02%;
  descent-override: 30.01%;
  line-gap-override: 0%;
}


/* ── assets/css/base/_typography.css ── */
/* Базова типографіка */

body {
  font-family: var(--font-primary);
  font-size: var(--fs-15);
  font-weight: 400;
  line-height: var(--lh-22);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--ls-tight-0-9);
}

p {
  margin: 0;
}

a {
  transition: color var(--transition-fast);
}

.mono {
  font-family: var(--font-mono);
}


/* 2. Components */

/* ── assets/css/components/_button.css ── */
/* Button */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-12);
  font-weight: 800;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-0-48);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}

.button--accent {
  color: var(--color-accent-ink);
  background-color: var(--color-accent);
}

.button--accent:hover,
.button--accent:focus-visible {
  background-color: #ffe75c;
}

.button--dark {
  color: var(--c-white);
  background-color: var(--c-grey-5);
}

.button--outline {
  color: var(--color-text);
  border: var(--stroke-1) solid var(--color-border);
}

.button:disabled,
.button.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Великий розмір */
.button--lg {
  height: 48px;
  padding: 0 var(--space-28);
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  letter-spacing: var(--ls-0-65);
}

/* Контурна кнопка на темному тлі */
.button--outline-dark {
  font-weight: 700;
  color: var(--c-white);
  border: var(--stroke-1) solid var(--c-grey-29);
}

.button--outline-dark:hover,
.button--outline-dark:focus-visible {
  border-color: var(--c-white);
}

/* Стани наведення: геометрія не змінюється, лише колір і тінь; фокус — :focus-visible з обведенням. */

.button {
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.button:active {
  box-shadow: none;
}

.button:focus-visible {
  outline: var(--stroke-2) solid var(--color-accent);
  outline-offset: 3px;
}

.button--accent:hover,
.button--accent:focus-visible {
  background-color: #ffe75c;
  box-shadow: var(--shadow-hover-accent);
}

.button--dark:hover,
.button--dark:focus-visible {
  background-color: var(--c-grey-20);
  box-shadow: var(--shadow-hover);
}

.button--outline:hover,
.button--outline:focus-visible {
  border-color: var(--c-grey-5);
  background-color: var(--c-grey-5);
  color: var(--c-white);
}

.button--outline-dark:hover,
.button--outline-dark:focus-visible {
  border-color: var(--c-white);
  background-color: rgb(255 255 255 / 8%);
}


/* ── assets/css/components/_field.css ── */
/* Поля форми */

.field {
  position: relative;
  display: block;
}

.field__control {
  --field-chevron: url("../icons/chevron-down-light.svg");

  /* block — інакше inline додає зазор під базову лінію */
  display: block;
  width: 100%;
  height: 44px;
  padding-inline: var(--space-16);
  border: var(--stroke-1) solid var(--c-grey-82);
  border-radius: var(--radius-12);
  font-family: var(--font-primary);
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-white);
  background-color: transparent;
  transition: border-color var(--transition-fast);
}

.field__control::placeholder {
  color: var(--c-grey-54);
  opacity: 1;
}

.field__control:hover {
  border-color: var(--c-white);
}

/* Іконка стрілки — у змінній: так її перевизначає звичайний клас, без боротьби зі специфічністю select.field__control. */
select.field__control {
  padding-right: 40px;
  appearance: none;
  background-image: var(--field-chevron);
  background-repeat: no-repeat;
  background-position: right var(--space-16) center;
  background-size: 9.07px 5.07px;
  cursor: pointer;
}

/* Великий розмір */
.field__control--lg {
  height: 48px;
  /* обведення в Figma всередині: мінус 1px бордера */
  padding: 12.5px 15px 13.5px;
  font-size: var(--fs-14);
}

/* Поле на темному тлі */
.field__control--dark {
  border-color: var(--c-grey-27);
  color: var(--c-white);
}

.field__control--dark::placeholder {
  color: var(--c-grey-48);
}

.field__control--dark:hover,
.field__control--dark:focus-visible {
  border-color: var(--c-white);
}


/* ── assets/css/components/_section-head.css ── */
/* Заголовок секції; кегль перевизначається в секції */

.section-head {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.section-head__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-34);
  line-height: var(--lh-44);
  letter-spacing: var(--ls-tight-1-02);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.section-head__subtitle {
  font-size: var(--fs-15);
  line-height: var(--lh-24);
  color: var(--color-text-muted);
}

/* Мобільна */
@media (max-width: 1023px) {
  .section-head__title {
    font-size: var(--fs-26);
    line-height: var(--lh-34);
    letter-spacing: var(--ls-tight-0-78);
  }
}


/* ── assets/css/components/_post-card.css ── */
/* Картка статті */

.post-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  overflow: hidden;
  padding-top: var(--space-8);
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-20);
  transition: border-color var(--transition-fast);
}

.post-card:hover,
.post-card:has(:focus-visible) {
  border-color: var(--c-grey-83);
}

.post-card__photo {
  width: calc(100% - 16px);
  height: 256px;
  overflow: hidden;
  border-radius: var(--radius-12);
  background-color: var(--c-grey-83);
}

/* Кадрування задається модифікатором; у WP — фокусна точка мініатюри. */
.post-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.post-card__img--top    { object-position: 50% 0%; }
.post-card__img--bottom { object-position: 50% 94%; }
.post-card__img--right  { object-position: 97% 50%; }
.post-card__img--low    { object-position: 50% 79%; }

.post-card__body {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-20) var(--space-24);
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.post-card__badge {
  flex-shrink: 0;
  padding: var(--space-4) var(--space-10);
  border: var(--stroke-1) solid var(--c-grey-78);
  border-radius: var(--radius-8);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-10);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1);
  text-transform: uppercase;
  color: var(--c-grey-29);
}

.post-card__date {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

.post-card__title {
  padding-top: var(--space-4);
  font-weight: 700;
  font-size: var(--fs-19);
  line-height: var(--lh-26);
  color: var(--c-grey-5);
}

.post-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.post-card {
  position: relative;
}

.post-card__excerpt {
  font-size: var(--fs-16-body);
  /* фіксоване число з Figma: «normal» браузер рахує як 19.36 */
  line-height: var(--lh-19);
  color: var(--c-grey-42);
}

/* Мобільна версія */

@media (max-width: 1023px) {
  .post-card__photo {
    width: calc(100% - 16px);
    height: 208px;
  }

  .post-card__meta {
    gap: var(--space-8);
  }

  .post-card__badge {
    font-size: var(--fs-9);
    line-height: var(--lh-12);
    letter-spacing: var(--ls-0-9);
  }

  .post-card__date {
    font-size: var(--fs-11);
    line-height: var(--lh-14);
  }

  .post-card__title {
    font-size: var(--fs-18);
    line-height: var(--lh-24);
  }
}

/* Клікабельна вся картка через посилання заголовка; рубрика — окреме посилання, тому вище за нього. */
.post-card {
  position: relative;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.post-card__link {
  position: static;
}

.post-card__link::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
}

.post-card__badge {
  position: relative;
  z-index: 3;
}

.post-card:hover {
  box-shadow: var(--shadow-hover);
  cursor: pointer;
}

/* :has(:focus-visible), а не :focus-within — той ловив програмний focus() після «Показати ще». */
.post-card:has(:focus-visible) {
  outline: var(--stroke-2) solid var(--color-accent);
  outline-offset: 2px;
}


/* ── assets/css/components/_post-blocks.css ── */
/* Блоки всередині статті (ACF-блоки для редактора) */

/* Акцент */

.post-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-24);
  border-radius: var(--radius-20);
  background-color: var(--c-grey-5);
}

.post-note__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: var(--space-2);
}

.post-note__text {
  font-weight: 500;
  font-size: var(--fs-15);
  line-height: var(--lh-26);
  color: var(--c-white);
}

/* Таблиця розрахунку */

.post-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.post-table__box {
  padding: var(--space-24);
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-20);
}

.post-table__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
  padding-block: var(--space-12) 13px;
  border-bottom: var(--stroke-1) solid var(--c-grey-91);
}

.post-table__key {
  font-size: var(--fs-15);
  line-height: var(--lh-20);
  color: var(--c-grey-29);
}

.post-table__val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-15);
  line-height: var(--lh-20);
  color: var(--c-grey-5);
}

.post-table__row--sum {
  padding-bottom: 14px;
  border-bottom: 2px solid var(--c-grey-5);
}

.post-table__row--sum .post-table__key {
  font-weight: 600;
  color: var(--c-grey-5);
}

.post-table__row--last {
  padding-bottom: var(--space-28);
  border-bottom: 0;
}

.post-table__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-16) var(--space-20);
  border-radius: var(--radius-12);
  background-color: var(--color-accent);
}

.post-table__total-key {
  font-weight: 800;
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  letter-spacing: var(--ls-0-42);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.post-table__total-val {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: var(--fs-24);
  line-height: var(--lh-30);
  color: var(--c-grey-5);
}

.post-table__caption {
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

/* Відео */

.post-video {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.post-video__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 800 / 400;
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-20);
  background-color: var(--c-grey-85);
}

.post-video__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44%;
}

.post-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 72px;
  height: 72px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  transform: translate(-50%, -50%);
  transition: transform var(--transition-fast);
}

.post-video__frame:hover .post-video__play,
.post-video__frame:focus-visible .post-video__play {
  transform: translate(-50%, -50%) scale(1.06);
}

.post-video__label {
  position: absolute;
  bottom: var(--space-16);
  left: var(--space-16);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-8);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-white);
  background-color: rgba(13, 13, 13, 0.8);
}

.post-video__caption {
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

/* Що робити / чого не робити */

.post-verdict {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
}

.post-verdict__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
  border-radius: var(--radius-20);
  background-color: var(--c-grey-95);
}

.post-verdict__head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.post-verdict__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.post-verdict__title {
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: var(--lh-20);
  color: var(--c-grey-5);
}

.post-verdict__text {
  font-size: var(--fs-14);
  line-height: var(--lh-24);
  color: var(--c-grey-42);
}

/* FAQ по темі */

.post-faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-20);
}

.post-faq__title {
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: var(--lh-24);
  color: var(--c-grey-5);
}

.post-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.post-faq__item {
  border-radius: var(--radius-12);
  background-color: var(--c-grey-95);
}

.post-faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-16) var(--space-20);
  font-weight: 600;
  font-size: var(--fs-15);
  line-height: var(--lh-20);
  color: var(--c-grey-5);
  cursor: pointer;
  list-style: none;
}

.post-faq__question::-webkit-details-marker {
  display: none;
}

.post-faq__sign {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--c-grey-29);
}

.post-faq__item[open] .post-faq__sign {
  font-size: 0;
}

.post-faq__item[open] .post-faq__sign::after {
  content: "−";
  font-size: var(--fs-15);
}

.post-faq__answer {
  padding: 0 var(--space-20) var(--space-16);
  font-size: var(--fs-14);
  line-height: var(--lh-24);
  color: var(--c-grey-42);
}

.post-faq__answer:empty {
  display: none;
}

/* Заявка */

.post-cta {
  display: flex;
  /* блок в окремому контейнері, відступ від потоку не діє — задаємо явно */
  margin-top: var(--space-40);
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-32);
  border-radius: var(--radius-20);
  background-color: var(--c-grey-95);
}

.post-cta__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-24);
  line-height: var(--lh-30);
  letter-spacing: var(--ls-tight-0-72);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.post-cta__note {
  max-width: 560px;
  font-size: var(--fs-15);
  line-height: var(--lh-26);
  color: var(--c-grey-42);
}

.post-cta__form {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding-top: var(--space-12);
}

.post-cta__field {
  flex: 1 0 0;
  min-width: 0;
}

.post-cta__control {
  height: 52px;
  /* обведення в Figma всередині: мінус 1px бордера */
  padding-inline: 15px;
  border-color: var(--c-grey-82);
  font-size: var(--fs-14);
  color: var(--c-grey-5);
  background-color: var(--c-white);
}

.post-cta__control::placeholder {
  color: var(--c-grey-54);
}

.post-cta__control:hover,
.post-cta__control:focus-visible {
  border-color: var(--c-grey-5);
}

.post-cta__submit {
  height: 52px;
  flex-shrink: 0;
  padding-inline: var(--space-28);
  letter-spacing: var(--ls-0-6);
  color: var(--color-accent);
  background-color: var(--c-grey-5);
}

/* CF7 віддає спільну форму з класами темної панелі; панель статті світла — повертаємо її вигляд. */
.post-cta .field__control {
  width: auto;
  height: 52px;
  border-color: var(--c-grey-82);
  color: var(--c-grey-5);
  background-color: var(--c-white);
}

.post-cta .field__control::placeholder {
  color: var(--c-grey-54);
}

.post-cta .field__control:hover,
.post-cta .field__control:focus-visible {
  border-color: var(--c-grey-5);
}

.post-cta .button {
  height: 52px;
  color: var(--color-accent);
  background-color: var(--c-grey-5);
}

.post-cta .button:hover,
.post-cta .button:focus-visible {
  background-color: var(--c-grey-20);
  box-shadow: none;
}

.post-cta__submit:hover,
.post-cta__submit:focus-visible {
  background-color: var(--c-grey-20);
}

/* Авто зі статті */

.post-car {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  padding: var(--space-24);
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-20);
}

.post-car__photo {
  width: 120px;
  height: 88px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-12);
  background-color: var(--c-grey-85);
}

.post-car__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.post-car__meta {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
}

.post-car__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-10);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1-4);
  text-transform: uppercase;
  color: var(--c-grey-29);
}

.post-car__name {
  padding-top: var(--space-2);
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: var(--lh-24);
  color: var(--c-grey-5);
}

.post-car__note {
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-grey-42);
}

.post-car__action {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-8);
}

.post-car__price {
  font-weight: 800;
  font-size: var(--fs-24);
  line-height: var(--lh-30);
  text-align: right;
  color: var(--c-grey-5);
}

.post-car__link {
  display: inline-flex;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-20);
  border-radius: var(--radius-12);
  font-weight: 700;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-0-6);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-accent);
  background-color: var(--c-grey-5);
  transition: background-color var(--transition-fast);
}

.post-car__link:hover,
.post-car__link:focus-visible {
  background-color: var(--c-grey-20);
}

/* Поділитись */

.post-share {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-40);
  padding-top: 25px;
  border-top: var(--stroke-1) solid var(--c-grey-91);
}

.post-share__label {
  font-weight: 600;
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-grey-42);
}

.post-share__list {
  display: flex;
  gap: var(--space-8);
}

.post-share__link {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-12);
  transition: border-color var(--transition-fast);
}

.post-share__link:hover,
.post-share__link:focus-visible {
  border-color: var(--c-grey-5);
}

/* Мобільна версія */

@media (max-width: 1023px) {
  .post-note {
    gap: var(--space-12);
    padding: var(--space-20);
  }

  .post-note__text {
    font-size: var(--fs-14);
    line-height: var(--lh-24);
  }

  .post-table__box {
    padding: var(--space-20);
  }

  .post-table__key,
  .post-table__val {
    font-size: var(--fs-14);
    line-height: var(--lh-18);
  }

  .post-table__total {
    padding: var(--space-16);
  }

  .post-table__total-key {
    font-size: var(--fs-13);
    letter-spacing: var(--ls-0-39);
  }

  .post-table__total-val {
    font-size: var(--fs-22);
    line-height: var(--lh-28);
  }

  .post-video {
    gap: var(--space-8);
  }

  .post-video__frame {
    aspect-ratio: 350 / 188;
  }

  .post-video__play {
    width: 64px;
    height: 64px;
  }

  .post-video__play img {
    width: 24px;
    height: 24px;
  }

  .post-video__label {
    bottom: var(--space-12);
    left: var(--space-12);
    padding: var(--space-6) var(--space-12);
    font-size: var(--fs-11);
    line-height: var(--lh-14);
  }

  .post-verdict {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
  }

  .post-verdict__card {
    padding: var(--space-20);
  }

  .post-faq {
    gap: var(--space-16);
    padding: var(--space-20);
  }

  .post-faq__title {
    font-size: var(--fs-17);
    line-height: var(--lh-22);
  }

  .post-faq__question {
    gap: var(--space-16);
    padding: var(--space-16);
    font-size: var(--fs-14);
    line-height: var(--lh-18);
  }

  .post-faq__answer {
    padding: 0 var(--space-16) var(--space-16);
  }

  .post-cta {
    gap: var(--space-8);
    padding: var(--space-24) var(--space-20);
  }

  .post-cta__title {
    font-size: var(--fs-22);
    line-height: var(--lh-28);
    letter-spacing: var(--ls-tight-0-66);
  }

  .post-cta__note {
    max-width: none;
    padding-top: var(--space-4);
    font-size: var(--fs-14);
    line-height: var(--lh-24);
  }

  .post-cta__form {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    padding-top: var(--space-8);
  }

  .post-cta__field,
  .post-cta__submit {
    flex: 0 0 auto;
    width: 100%;
  }

  .post-car {
    flex-wrap: wrap;
    gap: var(--space-16);
    padding: var(--space-20);
  }

  .post-car__photo {
    width: 96px;
    height: 72px;
  }

  .post-car__name {
    font-size: var(--fs-16);
    line-height: var(--lh-20);
  }

  .post-car__action {
    width: 100%;
    flex-direction: column;
    gap: var(--space-16);
  }

  .post-car__price {
    font-size: var(--fs-20);
    line-height: var(--lh-26);
    text-align: left;
  }

  .post-car__link {
    height: 48px;
  }

  .post-share {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
    margin-top: var(--space-28);
    padding-top: 21px;
  }

  .post-share__list {
    gap: var(--space-8);
  }

  /* flex на пунктах списку, а не на посиланнях */
  .post-share__list > li {
    flex: 1 0 0;
    min-width: 0;
  }

  .post-share__link {
    width: 100%;
    height: 48px;
  }

  .post-cta .field__control {
    width: 100%;
  }
}

.post-share__link {
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.post-share__link:hover,
.post-share__link:focus-visible {
  border-color: var(--c-grey-42);
  background-color: var(--c-grey-95);
}

.post-share__link:focus-visible {
  outline: var(--stroke-2) solid var(--color-accent);
  outline-offset: 2px;
}


/* ── assets/css/components/_car-card.css ── */
/* Картка авто. На головній її варіант з іншими полями — у sections/_catalog.css. */

.car-card {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  overflow: hidden;
  padding-block: var(--space-8);
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-20);
  background-color: var(--c-white);
  transition: border-color var(--transition-fast);
}

.car-card:hover,
.car-card:has(:focus-visible) {
  border-color: var(--c-grey-83);
}

/* Фото */

.car-card__photo {
  position: relative;
  width: calc(100% - 16px);
  height: 224px;
  overflow: hidden;
  border-radius: var(--radius-12);
  background-color: var(--c-grey-95);
}

.car-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.car-card__img--g30   { object-position: 50% 43.9%; }
.car-card__img--x5    { object-position: 50% 41.6%; }
.car-card__img--edge  { object-position: 50% 40.7%; }
.car-card__img--q7    { object-position: 50% 45.0%; }
.car-card__img--tesla { object-position: 50% 27.0%; }

.car-card__status {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-8);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-9);
  line-height: var(--lh-12);
  letter-spacing: var(--ls-0-9);
  text-transform: uppercase;
  color: var(--color-accent);
  background-color: var(--c-grey-5);
}

/* Тіло */

.car-card__body {
  display: flex;
  width: 100%;
  flex: 1 0 auto;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-20) var(--space-4);
}

.car-card__name {
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: var(--lh-20);
  color: var(--c-grey-5);
}

.car-card__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-12);
}

.car-card__spec {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-42);
}

.car-card__spec--wide {
  grid-column: 1 / -1;
}

.car-card__spec-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.car-card__price {
  display: flex;
  margin-top: auto;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: 17px;
  border-top: var(--stroke-1) solid var(--c-grey-91);
}

.car-card__price-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-9);
  line-height: var(--lh-12);
  letter-spacing: var(--ls-1-26);
  text-transform: uppercase;
  color: var(--c-grey-42);
}

.car-card__price-value {
  font-weight: 800;
  font-size: var(--fs-24);
  line-height: var(--lh-30);
  color: var(--c-grey-5);
}

/* Смуга вигоди */

.car-card__benefit {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-20);
  background-color: var(--color-accent);
}

.car-card__benefit--muted {
  background-color: var(--c-grey-95);
}

.car-card__benefit-label {
  font-weight: 700;
  font-size: var(--fs-11);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-0-44);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.car-card__benefit-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-11);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-0-44);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

/* Кнопка */

.car-card__cta {
  display: inline-flex;
  width: calc(100% - 40px);
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  font-weight: 700;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-0-6);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-white);
  background-color: var(--c-grey-5);
  transition: background-color var(--transition-fast);
}

.car-card__cta:hover,
.car-card__cta:focus-visible {
  background-color: var(--c-grey-20);
}

/* Картка «підбір на запит» */

.car-card__photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-grey-91);
}

.car-card__placeholder {
  width: 130px;
  height: 74px;
  opacity: 0.45;
}

.car-card__status--request {
  color: var(--c-grey-5);
  background-color: var(--color-accent);
}

.car-card__request-note {
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--c-grey-42);
}

/* Мобільна версія */

@media (max-width: 1023px) {
  .car-card__photo {
    height: 249px;
  }

  .car-card__status {
    font-size: var(--fs-10);
    line-height: 13px;
  }

  .car-card__body {
    gap: var(--space-12);
    padding: var(--space-8) var(--space-16) 0;
  }

  .car-card__name {
    line-height: 19px;
  }

  .car-card__request-note {
    line-height: 19.33px;
  }

  .car-card__spec {
    line-height: var(--lh-14-5);
  }

  .car-card__price-label {
    font-size: var(--fs-10);
    line-height: 13px;
    letter-spacing: var(--ls-1-4);
  }

  .car-card__price-value {
    line-height: 29px;
  }

  .car-card__benefit {
    padding: var(--space-16) var(--space-16) var(--space-12);
  }

  .car-card__benefit-label,
  .car-card__benefit-value {
    font-size: var(--fs-12);
    line-height: var(--lh-16);
    letter-spacing: 0;
  }

  .car-card__cta {
    width: calc(100% - 32px);
    height: 52px;
  }
}

/* Клікабельна вся картка: область кнопки-посилання розтягнута на блок, а не картка обгорнута в <a>. */
.car-card {
  position: relative;
}

/* кнопка має лишатись static, інакше область розтягнеться на неї саму */
.car-card__cta {
  position: static;
}

.car-card__cta::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
}

.car-card:hover {
  cursor: pointer;
}

/* :has(:focus-visible), а не :focus-within — той ловив програмний focus() після «Показати ще». */
.car-card:has(:focus-visible) {
  outline: var(--stroke-2) solid var(--color-accent);
  outline-offset: 2px;
}

/* Наведення — на всю картку, бо клікабельна вся площа. */
.car-card {
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.car-card:hover {
  border-color: var(--c-grey-42);
  box-shadow: var(--shadow-hover);
}

.car-card:hover .car-card__cta {
  background-color: var(--c-grey-20);
}


/* ── assets/css/components/_filters.css ── */
/* Фільтр каталогу (сайдбар і висувна панель на мобільній) */

.filters {
  display: flex;
  width: 312px;
  flex-shrink: 0;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-24);
  border-radius: var(--radius-20);
  background-color: var(--c-grey-95);
}

.filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.filters__title {
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: var(--lh-20);
  color: var(--c-grey-5);
}

.filters__reset {
  padding: 0;
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
  transition: color var(--transition-fast);
}

.filters__reset:hover,
.filters__reset:focus-visible {
  color: var(--c-grey-5);
}

.filters__close {
  display: none;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Група */

.filters__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* <legend> не флекс-елемент <fieldset>, gap на нього не діє */
.filters__label--legend {
  margin-bottom: var(--space-12);
}

.filters__group--budget {
  padding-top: var(--space-4);
  /* компенсація повзунків, що вилазять на 6px нижче доріжки */
  padding-bottom: var(--space-6);
}

.filters__group--divided {
  padding-top: 25px;
  border-top: var(--stroke-1) solid var(--c-grey-85);
}

.filters__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-10);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1-4);
  text-transform: uppercase;
  color: var(--c-grey-29);
}

.filters__pair {
  display: flex;
  gap: var(--space-8);
}

.filters__group--budget .filters__pair {
  padding-bottom: var(--space-4);
}

.filters__field {
  flex: 1 0 0;
  min-width: 0;
}

.filters__control {
  --field-chevron: url("../icons/chevron-down-16.svg");

  height: 44px;
  /* обведення в Figma всередині: мінус 1px бордера */
  padding-inline: 11px;
  border-color: var(--c-grey-82);
  font-weight: 500;
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-grey-5);
  background-color: var(--c-white);
}

.filters__control:hover,
.filters__control:focus-visible {
  border-color: var(--c-grey-5);
}

.filters__control--select {
  padding-right: var(--space-40);
  background-size: 16px 16px;
  background-position: right 11px center;
}

.filters__control--muted {
  color: var(--c-grey-54);
}

/* Повзунок діапазону */

/* Початкові значення змінних = повний діапазон, як малює price-range.js, — інакше смуга стрибає при завантаженні. */
.filters__range {
  --range-from: 0%;
  --range-to: 100%;

  position: relative;
  height: 4px;
  border-radius: var(--radius-4);
  background-color: var(--c-grey-85);
}

.filters__range-fill {
  position: absolute;
  top: 0;
  left: var(--range-from);
  width: calc(var(--range-to) - var(--range-from));
  height: 4px;
  border-radius: var(--radius-4);
  background-color: var(--c-grey-5);
}

.filters__range-knob {
  position: absolute;
  top: -6px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border: 2px solid var(--c-grey-5);
  border-radius: var(--radius-8);
  background-color: var(--color-accent);
}

.filters__range-knob--min { left: var(--range-from); }
.filters__range-knob--max { left: var(--range-to); }

.filters__range.is-live {
  cursor: pointer;
}

.filters__range.is-live .filters__range-knob {
  cursor: grab;
}

.filters__range.is-live .filters__range-knob:active {
  cursor: grabbing;
}

.filters__range.is-live .filters__range-knob:focus-visible {
  outline: var(--stroke-2) solid var(--color-accent);
  outline-offset: 2px;
}

/* Теги-перемикачі */

.filters__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.filters__tag {
  position: relative;
  display: inline-flex;
}

.filters__tag-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.filters__tag-label {
  display: inline-flex;
  height: 32px;
  align-items: center;
  padding-inline: 11px;
  border: var(--stroke-1) solid var(--c-grey-82);
  border-radius: var(--radius-12);
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  white-space: nowrap;
  color: var(--c-grey-29);
  background-color: var(--c-white);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast),
    background-color var(--transition-fast);
}

.filters__tag-input:checked + .filters__tag-label {
  font-weight: 600;
  padding-inline: var(--space-12);
  color: var(--c-white);
  border-color: var(--c-grey-5);
  background-color: var(--c-grey-5);
}

.filters__tag-input:focus-visible + .filters__tag-label {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Кнопка */

.filters__submit {
  height: 52px;
  padding-block: 0;
  letter-spacing: var(--ls-0-6);
  color: var(--color-accent);
  background-color: var(--c-grey-5);
}

.filters__submit:hover,
.filters__submit:focus-visible {
  background-color: var(--c-grey-20);
}

/* Мобільна версія — накладна панель */

@media (max-width: 1023px) {
  .filters {
    position: fixed;
    z-index: var(--z-modal);
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 100%);
    flex-shrink: 1;
    overflow-y: auto;
    border-radius: 0;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    visibility: hidden;
  }

  .filters.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .filters__close {
    display: inline-flex;
  }
}

/* Наведення */
.filters__reset {
  transition: color var(--transition-fast);
}

.filters__reset:hover,
.filters__reset:focus-visible {
  color: var(--c-grey-5);
}

.filters__tag-label {
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast),
    background-color var(--transition-fast);
}

.filters__tag-input:not(:checked) + .filters__tag-label:hover {
  border-color: var(--c-grey-5);
  color: var(--c-grey-5);
}

.filters__tag-input:focus-visible + .filters__tag-label {
  outline: var(--stroke-2) solid var(--color-accent);
  outline-offset: 2px;
}

.filters__close:hover {
  filter: brightness(0.8);
}


/* ── assets/css/components/_car-buy.css ── */
/* Картка купівлі авто; на мобільній рамка й поля зникають, блок стає секцією. */

.car-buy {
  display: flex;
  width: 424px;
  flex-shrink: 0;
  flex-direction: column;
  gap: var(--space-8);
  padding: 28px;
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-20);
  background-color: var(--c-white);
}

.car-buy__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-30);
  line-height: var(--lh-34);
  letter-spacing: var(--ls-tight-0-9);
  color: var(--c-grey-5);
}

.car-buy__summary {
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-grey-42);
}

/* Ціна */

.car-buy__price {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: 33px var(--space-8);
  border-top: var(--stroke-1) solid var(--c-grey-91);
}

.car-buy__price-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-10);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1-4);
  text-transform: uppercase;
  color: var(--c-grey-42);
}

.car-buy__price-value {
  font-weight: 800;
  font-size: var(--fs-44);
  line-height: var(--lh-56);
  letter-spacing: var(--ls-tight-1-32);
  color: var(--c-grey-5);
}

.car-buy__price-market {
  padding-top: var(--space-4);
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-grey-54);
}

/* Вигода */

.car-buy__benefit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-20);
  border-radius: var(--radius-12);
  background-color: var(--color-accent);
}

.car-buy__benefit-label {
  font-weight: 700;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-0-48);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.car-buy__benefit-value {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: var(--fs-20);
  line-height: var(--lh-26);
  color: var(--c-grey-5);
}

/* Що вже зроблено */

.car-buy__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-block: var(--space-12);
}

.car-buy__fact {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-grey-29);
}

.car-buy__fact-icon {
  flex-shrink: 0;
}

/* Кнопки */

.car-buy__cta,
.car-buy__report {
  display: flex;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  letter-spacing: var(--ls-0-65);
  text-align: center;
  text-transform: uppercase;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.car-buy__cta {
  font-weight: 800;
  color: var(--color-accent);
  background-color: var(--c-grey-5);
}

.car-buy__cta:hover,
.car-buy__cta:focus-visible {
  background-color: var(--c-grey-20);
}

.car-buy__report {
  font-weight: 700;
  color: var(--c-grey-5);
  border: var(--stroke-1) solid var(--c-grey-5);
}

.car-buy__report:hover,
.car-buy__report:focus-visible {
  color: var(--c-white);
  background-color: var(--c-grey-5);
}

/* Месенджери */

.car-buy__contacts {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  padding-bottom: var(--space-12);
}

.car-buy__contact {
  display: inline-flex;
  flex: 1 0 0;
  min-width: 0;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-12);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-5);
  transition: border-color var(--transition-fast);
}

.car-buy__contact:hover,
.car-buy__contact:focus-visible {
  border-color: var(--c-grey-5);
}

/* Менеджер */

.car-buy__manager {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-top: 21px;
  border-top: var(--stroke-1) solid var(--c-grey-91);
}

.car-buy__manager-photo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: var(--radius-full);
  background-color: var(--c-grey-83);
}

.car-buy__manager-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.car-buy__manager-name {
  font-weight: 700;
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-grey-5);
}

.car-buy__manager-note {
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

/* Мобільна версія: без рамки й радіуса, поля — сторінки */

@media (max-width: 1023px) {
  .car-buy {
    width: auto;
    flex-shrink: 1;
    padding: var(--space-24) 0 0;
    border: 0;
    border-radius: 0;
  }

  .car-buy__title {
    font-size: var(--fs-28);
    line-height: var(--lh-32);
    letter-spacing: var(--ls-tight-0-84);
  }

  .car-buy__summary {
    padding-bottom: var(--space-12);
  }

  .car-buy__price {
    padding-top: 21px;
  }

  .car-buy__price-value {
    font-size: var(--fs-40);
    line-height: var(--lh-50);
    letter-spacing: var(--ls-tight-1-2);
  }
}


/* ── assets/css/components/_modal.css ── */
/* Модальні вікна (окремого макета немає — токени картки заявки) */

.modal {
  position: fixed;
  z-index: var(--z-modal);
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-20);
}

.modal[hidden] {
  display: none;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 65%);
}

.modal__box {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - var(--space-40));
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-32) var(--space-24) var(--space-24);
  overflow-y: auto;
  border-radius: var(--radius-20);
  background-color: var(--c-grey-5);
  color: var(--c-white);
}

.modal__box--narrow {
  max-width: 360px;
  text-align: center;
}

.modal__close {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-8);
  background: none;
  color: var(--c-grey-60);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.modal__close:hover {
  color: var(--c-white);
}

.modal__title {
  font-family: var(--font-primary);
  font-size: var(--fs-20);
  font-style: italic;
  font-weight: 800;
  line-height: var(--lh-26);
  text-transform: uppercase;
}

.modal__note {
  color: var(--c-grey-60);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
}

.modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-4);
}

.modal__submit {
  width: 100%;
  margin-top: var(--space-4);
}

.modal__aside {
  margin-top: var(--space-4);
  color: var(--c-grey-60);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  text-align: center;
}

.modal__phone-link {
  color: var(--color-accent);
  font-weight: 700;
  white-space: nowrap;
}

/* Вікно з номером телефону */

.modal__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-20);
  border-radius: var(--radius-12);
  background-color: var(--color-accent);
  color: var(--c-grey-5);
  font-family: var(--font-mono);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: var(--lh-26);
  white-space: nowrap;
}

.modal__phone:hover {
  filter: brightness(1.05);
}

.modal__hours {
  color: var(--c-grey-60);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
}

body.is-locked {
  overflow: hidden;
}

@media (max-width: 767px) {
  .modal {
    align-items: flex-end;
    padding: 0;
  }

  .modal__box {
    max-width: none;
    max-height: 90vh;
    border-radius: var(--radius-20) var(--radius-20) 0 0;
  }
}


/* ── assets/css/components/_to-top.css ── */
/* Кнопка «нагору» */

.to-top {
  position: fixed;
  z-index: var(--z-action-bar);
  right: var(--space-24);
  bottom: var(--space-24);
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--stroke-1) solid var(--c-grey-27);
  border-radius: var(--radius-12);
  background-color: var(--c-grey-5);
  box-shadow: var(--shadow-hover);
  cursor: pointer;
  transition: opacity var(--transition-fast), border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.to-top[hidden] {
  display: none;
}

.to-top:not(.is-visible) {
  opacity: 0;
  pointer-events: none;
}

.to-top.is-visible {
  opacity: 1;
}

.to-top:hover,
.to-top:focus-visible {
  border-color: var(--c-white);
  background-color: var(--c-grey-20);
}

.to-top:focus-visible {
  outline: var(--stroke-2) solid var(--color-accent);
  outline-offset: 3px;
}

.to-top__icon {
  filter: invert(1);
}

/* Піднімається над нижньою панеллю; висоту віддає assets/js/modules/bottom-bar.js, числа тут не ставити. */
body:has(.car-bar.is-visible) .to-top,
body:has(.action-bar.is-visible) .to-top {
  bottom: calc(var(--bottom-bar-height, 72px) + var(--space-16));
}

@media (max-width: 1023px) {
  .to-top {
    right: var(--space-16);
    bottom: var(--space-16);
  }
}


/* ── assets/css/components/_google-trust.css ── */
/* Плашка рейтингу Google: --panel над відгуками, --hero у першому екрані */

.gtrust {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: var(--space-12);
}

.gtrust__mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.gtrust__stars {
  display: inline-flex;
  flex-shrink: 0;
  gap: var(--space-2);
}

.gtrust__star {
  width: 16px;
  height: 16px;
}

.gtrust__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}

.gtrust__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
}

.gtrust__rating {
  font-weight: 700;
}

/* Плитка над каруселлю відгуків: темна, бо жовтий на білому нечитний */

.gtrust--panel {
  padding: 9px var(--space-16);
  border-radius: var(--radius-12);
  background-color: var(--c-grey-5);
  transition: background-color var(--transition-fast);
}

.gtrust--panel:hover,
.gtrust--panel:focus-visible {
  background-color: var(--c-grey-16);
}

.gtrust--panel .gtrust__claim {
  font-weight: 600;
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-white);
}

.gtrust--panel .gtrust__meta {
  font-size: var(--fs-11);
  line-height: var(--lh-14);
  color: var(--c-grey-60);
}

.gtrust--panel .gtrust__rating {
  color: var(--color-accent);
}

/* Рядок у першому екрані: тримає висоту й радіус кнопки, яку замінює */

.gtrust--hero {
  gap: var(--space-10);
  align-self: flex-start;
  padding: var(--space-10) var(--space-16);
  border: var(--stroke-1) solid var(--c-grey-20);
  border-radius: var(--radius-12);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.gtrust--hero:hover,
.gtrust--hero:focus-visible {
  border-color: var(--c-grey-29);
  background-color: var(--c-grey-9);
}

.gtrust--hero .gtrust__meta {
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-grey-60);
}

.gtrust--hero .gtrust__rating,
.gtrust--hero .gtrust__count {
  color: var(--c-white);
}

@media (max-width: 1023px) {
  .gtrust__mark {
    width: 16px;
    height: 16px;
  }

  .gtrust__star {
    width: 14px;
    height: 14px;
  }

  .gtrust--panel {
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
  }

  .gtrust--panel .gtrust__claim {
    font-size: var(--fs-12);
    line-height: var(--lh-16);
  }

  .gtrust--hero {
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
  }

  .gtrust--hero .gtrust__meta {
    font-size: var(--fs-12);
    line-height: var(--lh-16);
  }
}


/* ── assets/css/components/_form-status.css ── */
/* Відповідь форми (малює assets/js/modules/forms.js) */

.form-status {
  /* У рядкових формах відповідь іде власним рядком; order тримає її останньою. */
  flex: 0 0 100%;
  order: 99;
  width: 100%;
  margin-top: var(--space-12);
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--color-text-muted);
}

.cta-lead__form,
.blog-cta__form,
.post-cta__form,
.calculator__lead-form {
  flex-wrap: wrap;
}

/* Форма броні — display: contents, тож відповіді повертаємо власний бокс. */
.car-book__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.form-status[hidden] {
  display: none;
}

/* Успіх — колір плюс галочка: сам колір сенсу не несе. */
.form-status--ok {
  font-weight: 600;
  color: var(--c-green-37);
}

.form-status--ok::before {
  content: '✓ ';
}

.form-status--error {
  font-weight: 600;
  color: var(--c-red-49);
}

.form-status--sending {
  color: var(--color-text-subtle);
}

/* На темних панелях — світліший відтінок сірого */
.modal__form .form-status,
.cta-lead__form .form-status,
.hero__form .form-status,
.lead__form .form-status,
.car-book__form .form-status,
.calculator__lead-form .form-status {
  color: var(--c-grey-66);
}

.cta-lead__form .form-status--ok,
.hero__form .form-status--ok {
  color: var(--c-white);
}

.field__control.is-invalid {
  border-color: var(--c-red-49);
}

.is-sending [type='submit'] {
  cursor: progress;
  opacity: 0.75;
}


/* 3. Layout (може перевизначати компоненти) */

/* ── assets/css/layout/_container.css ── */
/* Контейнери: ширини хедера й футера — окремі змінні в base/_variables.css */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--header {
  max-width: var(--header-container-max);
  padding-inline: var(--header-container-padding);
}

.container--footer {
  max-width: var(--footer-container-max);
  padding-inline: var(--footer-container-padding);
}

/* Колонка тексту статті (800px), звужується разом із полями контейнера */
.container--narrow {
  max-width: calc(var(--container-narrow) + var(--container-padding) * 2);
}

.container--fluid {
  max-width: none;
}


/* ── assets/css/layout/_header.css ── */
/* Header */

.header {
  /* top враховує панель адміністратора WordPress (без неї змінна = 0) */
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: var(--z-header);
  width: 100%;
  background-color: var(--c-grey-5);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-40);
  min-height: var(--header-height);
}

/* Логотип */

.header__logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

/* Розміри числом, а не auto, — інакше меню зсувається при завантаженні логотипа. */
.header__logo-img {
  width: 137.4px;
  height: 44px;
}

/* Навігація */

.header__list {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
}

.header__link {
  display: block;
  font-weight: 500;
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-grey-79);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.header__link:hover,
.header__link:focus-visible,
.header__link.is-active {
  color: var(--c-white);
}

/* Дії: телефон + кнопка */

.header__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-16);
}

.header__phone {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  transition: opacity var(--transition-fast);
}

.header__phone:hover {
  opacity: 0.8;
}

.header__phone-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.header__phone-text {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-white);
  white-space: nowrap;
}

/* Бургер */

.header__burger {
  display: none;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  background-color: var(--c-yellow-58);
}

.header__burger-box {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.header__burger-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--c-grey-5);
  transition: transform 0.22s ease, opacity 0.16s ease, top 0.22s ease;
}

.header__burger-line:nth-child(1) { top: 0; }
.header__burger-line:nth-child(2) { top: 6px; }
.header__burger-line:nth-child(3) { top: 12px; }

.header__burger.is-open .header__burger-line:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.header__burger.is-open .header__burger-line:nth-child(2) {
  opacity: 0;
}

.header__burger.is-open .header__burger-line:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .header__burger-line {
    transition: none;
  }
}

.header__phone-icon--mobile {
  display: none;
  width: 18px;
  height: 18px;
}

/* Мобільна версія */

@media (max-width: 1023px) {
  .header__inner {
    gap: var(--space-12);
  }

  .header__logo-img {
    width: 109.9px;
    height: 35.2px;
  }

  .header__burger {
    display: inline-flex;
  }

  /* без групи space-between лишає телефон посеред шапки, бо меню сховане */
  .header__inner {
    justify-content: flex-start;
  }

  .header__actions {
    gap: var(--space-12);
    margin-left: auto;
  }

  .header__phone {
    width: 44px;
    height: 44px;
    justify-content: center;
    border: var(--stroke-1) solid var(--c-grey-20);
    border-radius: var(--radius-12);
  }

  .header__phone-icon,
  .header__phone-text,
  .header__cta {
    display: none;
  }

  .header__phone-icon--mobile {
    display: block;
  }

  /* Меню — накладна панель; visibility з прозорістю замість display:none, щоб закрита не ловила кліки й фокус. */
  .header__nav {
    position: fixed;
    top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-dropdown);
    display: none;
    flex-direction: column;
    /* низ меню резервує місце під .action-bar (вона вище за z-index); висоту віддає bottom-bar.js */
    padding: var(--space-8) var(--container-padding) calc(var(--bottom-bar-height, 78px) + var(--space-24));
    overflow-y: auto;
    background-color: var(--c-grey-5);
  }

  .header__nav.is-open {
    display: flex;
    animation: ic-menu-in 0.18s ease;
  }

  .header__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .header__item + .header__item {
    border-top: var(--stroke-1) solid var(--c-grey-14);
  }

  /* Поява пунктів по черзі; крок свідомо дрібний */
  .header__nav.is-open .header__item {
    animation: ic-menu-item-in 0.18s ease backwards;
  }

  .header__nav.is-open .header__item:nth-child(1) { animation-delay: 0.02s; }
  .header__nav.is-open .header__item:nth-child(2) { animation-delay: 0.04s; }
  .header__nav.is-open .header__item:nth-child(3) { animation-delay: 0.06s; }
  .header__nav.is-open .header__item:nth-child(4) { animation-delay: 0.08s; }
  .header__nav.is-open .header__item:nth-child(5) { animation-delay: 0.1s; }
  .header__nav.is-open .header__item:nth-child(6) { animation-delay: 0.12s; }
  .header__nav.is-open .header__item:nth-child(7) { animation-delay: 0.14s; }

  .header__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-16);
    font-size: var(--fs-17);
    line-height: var(--lh-24);
  }

  .header__link::after {
    content: "";
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--c-grey-42);
    border-right: 2px solid var(--c-grey-42);
    margin-left: var(--space-12);
    transform: rotate(45deg);
    transition: border-color 0.16s ease, transform 0.16s ease;
  }

  .header__link:hover::after,
  .header__link:focus-visible::after {
    border-color: var(--color-accent);
    transform: rotate(45deg) translate(2px, -2px);
  }

  .header__item--current .header__link {
    color: var(--color-accent);
  }

  /* Підвал меню: головна дія і телефон */

  .header__nav-foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
    margin-top: auto;
    padding-top: var(--space-24);
  }

  .header__nav-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-12);
    border: var(--stroke-1) solid var(--c-grey-20);
    border-radius: var(--radius-12);
    color: var(--c-white);
    font-family: var(--font-mono);
    font-size: var(--fs-15);
    font-weight: 700;
    line-height: var(--lh-20);
  }

  .header__nav-hours {
    color: var(--c-grey-42);
    font-size: var(--fs-12);
    line-height: var(--lh-16);
    text-align: center;
  }

  @media (prefers-reduced-motion: reduce) {
    .header__nav.is-open,
    .header__nav.is-open .header__item {
      animation: none;
    }
  }
}

/* Анімація лише рухом, без прозорості: якщо не програється, меню все одно видиме. */
@keyframes ic-menu-in {
  from { transform: translateY(-8px); }
  to   { transform: none; }
}

@keyframes ic-menu-item-in {
  from { transform: translateY(-6px); }
  to   { transform: none; }
}

@media (min-width: 1024px) {
  .header__nav-foot {
    display: none;
  }
}

.header__link {
  transition: color var(--transition-fast);
}

.header__link:hover,
.header__link:focus-visible {
  color: var(--color-accent);
}

.header__phone {
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.header__phone:hover,
.header__phone:focus-visible {
  border-color: var(--c-white);
}

.header__burger {
  cursor: pointer;
  transition: filter var(--transition-fast);
}

.header__burger:hover {
  filter: brightness(1.08);
}

.header__link:focus-visible,
.header__phone:focus-visible,
.header__burger:focus-visible {
  outline: var(--stroke-2) solid var(--color-accent);
  outline-offset: 3px;
}


/* ── assets/css/layout/_footer.css ── */
/* Footer */

.footer {
  padding-block: 48px 28px;
  background-color: var(--c-grey-5);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

/* Верхній ряд колонок */

.footer__top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
}

.footer__cols {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-24);
}

.footer__brand {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: var(--space-16);
  width: 432px;
  padding-bottom: 30px;
}

.footer__logo {
  display: inline-flex;
}

.footer__logo-img {
  width: 137.4px;
  height: 44px;
}

.footer__about {
  max-width: 280px;
  font-size: var(--fs-13);
  line-height: var(--lh-22);
  color: var(--c-grey-54);
}

.footer__col {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-12);
}

.footer__col--rivne  { padding-bottom: 22px; }
.footer__col--warsaw { padding-bottom: 44px; }

.footer__col-title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-10);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1-6);
  text-transform: uppercase;
  color: var(--c-yellow-58);
}

.footer__lines {
  font-style: normal;
  font-size: var(--fs-13);
  line-height: var(--lh-22);
  color: var(--c-grey-79);
}

.footer__link {
  transition: color var(--transition-fast);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--c-yellow-58);
}

/* Нижній ряд */

.footer__bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  /* обведення в Figma всередині: мінус 1px бордера */
  padding-top: var(--space-16);
  border-top: var(--stroke-1) solid var(--c-grey-14);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-42);
}

.footer__socials {
  display: flex;
  gap: var(--space-8);
  order: 2;
}

/* на десктопі обгортка розчиняється (три блоки в ряд), на мобільній тримає їх в одному рядку */
.footer__legal {
  display: contents;
}

.footer__copyright { order: 1; }
.footer__privacy   { order: 3; }

/* підпис розробника — у лівому блоці, а не четвертою колонкою, щоб не ламати space-between */
.footer__credit { order: 1; }

.footer__item--mobile {
  display: none;
}

/* Мобільна версія */

@media (max-width: 1023px) {
  .footer {
    padding-block: 32px 84px;
  }

  .footer__inner {
    gap: var(--space-12);
  }

  .footer__top {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
  }

  .footer__brand {
    display: contents;
  }

  .footer__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-24);
    padding-block: var(--space-16) var(--space-12);
  }

  .footer__about {
    max-width: none;
    font-size: var(--fs-12);
    line-height: var(--lh-20);
  }

  .footer__col--warsaw {
    padding-bottom: 40px;
  }

  .footer__col--rivne {
    padding-bottom: 0;
  }

  .footer__col:last-child {
    grid-column: 1 / -1;
  }

  .footer__lines {
    font-size: var(--fs-12);
    line-height: var(--lh-20);
  }

  .footer__col:last-child .footer__lines {
    line-height: var(--lh-22);
  }

  .footer__col:last-child .footer__lines li {
    display: inline;
  }

  .footer__col:last-child .footer__lines li:not(:last-child)::after {
    content: " · ";
    white-space: pre;
  }

  .footer__item--mobile {
    display: inline;
  }

  /* Нижній ряд */
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: var(--space-16);
    font-size: var(--fs-11);
    line-height: var(--lh-20);
  }

  .footer__legal {
    display: flex;
    flex-wrap: wrap;
  }

  .footer__copyright::after,
  .footer__credit::after {
    content: " · ";
    white-space: pre;
  }
}

.footer__link {
  transition: color var(--transition-fast);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--c-white);
}

/* довга пошта на 320 розтягувала сторінку — перенос усередині адреси */
.footer__link {
  overflow-wrap: anywhere;
}

.footer__link:focus-visible {
  outline: var(--stroke-2) solid var(--color-accent);
  outline-offset: 3px;
}


/* ── assets/css/layout/_action-bar.css ── */
/* Нижня панель CTA */

.action-bar {
  /* sticky, а не fixed: панель у потоці й наприкінці стає під футером, місце резервувати не треба. */
  position: sticky;
  z-index: var(--z-action-bar);
  bottom: 0;
  padding-block: 14px 12px;
  border-top: 2px solid var(--c-yellow-58);
  background-color: var(--c-grey-5);
}

.action-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.action-bar__title {
  font-weight: 600;
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-white);
}

.action-bar__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-12);
}

.action-bar__call-icon,
.action-bar__calc,
.action-bar__lead-short {
  display: none;
}

.action-bar__call {
  height: 44px;
  padding-inline: var(--space-20);
  border: var(--stroke-1) solid var(--c-grey-27);
  border-radius: var(--radius-12);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-white);
}

.action-bar__lead {
  height: 44px;
  padding-inline: var(--space-24);
  letter-spacing: var(--ls-0-6);
}

/* Мобільна версія: телефон-іконка · Порахувати · Заявка */

@media (max-width: 1023px) {
  .action-bar {
    /* обведення 2px входить у верхній відступ */
    padding-block: 12px var(--space-16);
  }

  .action-bar .container {
    padding-inline: var(--space-16);
  }

  .action-bar__title {
    display: none;
  }

  .action-bar__actions {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-8);
    width: 100%;
  }

  .action-bar__call {
    width: 52px;
    height: 48px;
    padding-inline: 0;
  }

  .action-bar__call-icon {
    display: block;
    width: 20px;
    height: 20px;
  }

  .action-bar__call-text {
    display: none;
  }

  .action-bar__calc {
    display: inline-flex;
    height: 48px;
    padding-inline: var(--space-8);
    border: var(--stroke-1) solid var(--c-grey-27);
    border-radius: var(--radius-12);
    font-weight: 700;
    font-size: var(--fs-12);
    line-height: var(--lh-16);
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-white);
  }

  .action-bar__lead {
    height: 48px;
    padding-inline: var(--space-8);
    letter-spacing: var(--ls-0-48);
  }

  .action-bar__lead-full {
    display: none;
  }

  .action-bar__lead-short {
    display: inline;
  }
}


/* 4. Sections */

/* ── assets/css/sections/_page-hero.css ── */
/* Шапка внутрішньої сторінки — Figma 401:2900 · 1440×313 */

.page-hero {
  padding-block: 44px 56px;
  background-color: var(--c-grey-5);
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.page-hero__crumbs {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-42);
}

.page-hero__crumbs a {
  transition: color var(--transition-fast);
}

.page-hero__crumbs a:hover {
  color: var(--c-white);
}

.page-hero__row {
  display: flex;
  align-items: flex-end;
  gap: 56px;
}

.page-hero__text {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: var(--space-20);
  width: 632px;
}

.page-hero__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-46);
  line-height: var(--lh-48);
  letter-spacing: var(--ls-tight-1-38);
  text-transform: uppercase;
  color: var(--c-white);
}

.page-hero__title-accent {
  color: var(--c-yellow-58);
}

.page-hero__lead {
  max-width: 520px;
  font-size: var(--fs-16-body);
  line-height: var(--lh-19-5);
  color: var(--c-grey-66);
}

.page-hero__stats {
  display: grid;
  flex: 1 0 0;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-12);
}

.page-hero__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-20);
  border-radius: var(--radius-16);
  background-color: var(--c-grey-9);
}

.page-hero__stat--accent {
  background-color: var(--c-yellow-58);
}

.page-hero__stat-value {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-20);
  line-height: var(--lh-26);
  color: var(--c-white);
}

.page-hero__stat--accent .page-hero__stat-value {
  color: var(--c-grey-5);
}

.page-hero__stat-label {
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

.page-hero__stat--accent .page-hero__stat-label {
  color: var(--c-orange-18);
}

/* Мобільна — Figma 401:3258 · 390×481 */

@media (max-width: 1023px) {
  .page-hero {
    padding-block: var(--space-20) var(--space-32);
  }

  .page-hero__inner {
    gap: var(--space-16);
  }

  .page-hero__crumbs {
    font-size: var(--fs-11);
    line-height: var(--lh-14);
  }

  .page-hero__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
  }

  .page-hero__text {
    display: contents;
  }

  .page-hero__title {
    font-size: var(--fs-32);
    line-height: var(--lh-36);
    letter-spacing: var(--ls-tight-0-96);
  }

  .page-hero__lead {
    max-width: none;
  }

  .page-hero__stats {
    padding-top: var(--space-4);
  }

  .page-hero__stat {
    padding: var(--space-16);
  }

  .page-hero__stat-value {
    font-size: var(--fs-18);
    line-height: var(--lh-24);
  }

  .page-hero__stat-label {
    font-size: var(--fs-11);
    line-height: var(--lh-14);
  }
}


/* ── assets/css/sections/_about-hero.css ── */
/* Шапка «Про нас» + показники — Figma 401:4483 + 401:4495 (одна секція) */

.about-hero {
  padding-block: var(--space-40) var(--space-48);
  background-color: var(--c-grey-5);
}

.about-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.about-hero__crumbs {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-42);
}

.about-hero__crumbs a:hover,
.about-hero__crumbs a:focus-visible {
  color: var(--c-white);
}

.about-hero__row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-48);
}

.about-hero__text {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-16);
}

.about-hero__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-44);
  line-height: var(--lh-48);
  letter-spacing: var(--ls-tight-1-32);
  text-transform: uppercase;
  color: var(--c-white);
}

.about-hero__title-accent {
  color: var(--color-accent);
}

.about-hero__lead {
  max-width: 560px;
  font-size: var(--fs-15);
  line-height: var(--lh-26);
  color: var(--c-grey-66);
}

.about-hero__media {
  width: 656px;
  height: 320px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-20);
  background-color: var(--c-grey-14);
}

.about-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* кадрування 1:1 з макетом: видно нижні 73% кадру */
  object-position: 50% 72%;
}

/* Показники — Figma 401:4495 */

.about-hero__facts {
  display: flex;
  gap: var(--space-12);
  /* у макеті відступ 48; 20 дає gap колонки, решта — тут */
  margin-top: var(--space-28);
}

.about-hero__fact {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24);
  border-radius: var(--radius-16);
  background-color: var(--c-grey-9);
}

.about-hero__fact--accent {
  background-color: var(--color-accent);
}

.about-hero__fact-value {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-32);
  line-height: var(--lh-40);
  color: var(--c-white);
}

.about-hero__fact--accent .about-hero__fact-value {
  color: var(--c-grey-5);
}

.about-hero__fact-label {
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-grey-54);
}

.about-hero__fact--accent .about-hero__fact-label {
  color: var(--c-orange-18);
}

/* Мобільна — Figma 401:4869 · 390×772 */

@media (max-width: 1023px) {
  .about-hero {
    padding-block: var(--space-20) var(--space-28);
  }

  .about-hero__inner {
    gap: var(--space-12);
  }

  .about-hero__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
  }

  .about-hero__text {
    gap: var(--space-12);
  }

  .about-hero__title {
    padding-top: var(--space-4);
    font-size: var(--fs-32);
    line-height: var(--lh-36);
    letter-spacing: var(--ls-tight-0-96);
  }

  .about-hero__lead {
    max-width: none;
    font-size: var(--fs-14);
    line-height: var(--lh-24);
  }

  .about-hero__media {
    width: auto;
    height: 240px;
  }

  .about-hero__img {
    object-position: 46% 71%;
  }

  .about-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* висоти з макета — лише мінімум: на 320–360 підписи переносяться */
    grid-template-rows: minmax(80px, auto) minmax(96px, auto);
    gap: var(--space-8);
    margin-top: var(--space-4);
  }

  .about-hero__fact {
    gap: var(--space-4);
    padding: var(--space-16);
  }

  .about-hero__fact-value {
    font-size: var(--fs-22);
    line-height: var(--lh-28);
  }

  .about-hero__fact-label {
    font-size: var(--fs-12);
    line-height: var(--lh-16);
  }
}


/* ── assets/css/sections/_contacts-hero.css ── */
/* Шапка «Контакти» — Figma 401:6257 · 1440×284 */

.contacts-hero {
  padding-block: var(--space-40) var(--space-48);
  background-color: var(--c-grey-5);
}

.contacts-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.contacts-hero__crumbs {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-42);
}

.contacts-hero__crumbs a:hover,
.contacts-hero__crumbs a:focus-visible {
  color: var(--c-white);
}

.contacts-hero__row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-48);
}

.contacts-hero__text {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-16);
}

.contacts-hero__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-44);
  line-height: var(--lh-48);
  letter-spacing: var(--ls-tight-1-32);
  text-transform: uppercase;
  color: var(--c-white);
}

.contacts-hero__lead {
  max-width: 520px;
  font-size: var(--fs-15);
  line-height: var(--lh-24);
  color: var(--c-grey-66);
}

.contacts-hero__cards {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: stretch;
  gap: var(--space-12);
}

.contacts-hero__cards-item {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
}

.contacts-hero__card {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-20);
  border-radius: var(--radius-16);
  background-color: var(--c-grey-9);
  transition: background-color var(--transition-fast);
}

.contacts-hero__card:hover,
.contacts-hero__card:focus-visible {
  background-color: var(--c-grey-12);
}

.contacts-hero__card-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-8);
}

.contacts-hero__card-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-10);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1-4);
  text-transform: uppercase;
  color: var(--c-grey-48);
}

.contacts-hero__card-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-26);
  color: var(--c-white);
}

.contacts-hero__card-value--sm {
  font-size: var(--fs-16);
  line-height: var(--lh-20);
}

.contacts-hero__card-note {
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

.contacts-hero__card-action {
  display: none;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  background-color: var(--color-accent);
}

/* Мобільна — Figma 401:6543 · 390×434 */

@media (max-width: 1023px) {
  .contacts-hero {
    padding-block: var(--space-20) var(--space-28);
  }

  .contacts-hero__inner {
    gap: var(--space-8);
  }

  .contacts-hero__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
  }

  .contacts-hero__text {
    gap: 0;
  }

  .contacts-hero__title {
    padding-top: var(--space-8);
    font-size: var(--fs-32);
    line-height: var(--lh-36);
    letter-spacing: var(--ls-tight-0-96);
  }

  .contacts-hero__lead {
    max-width: none;
    padding-block: var(--space-4) var(--space-12);
    font-size: var(--fs-14);
    line-height: var(--lh-22);
  }

  .contacts-hero__cards {
    flex-direction: column;
    gap: var(--space-8);
  }

  /* у колонці `flex: 1 0 0` задав би базову висоту 0 */
  .contacts-hero__text,
  .contacts-hero__cards,
  .contacts-hero__cards-item {
    flex: 0 0 auto;
  }

  .contacts-hero__card {
    min-height: 88px;
  }

  .contacts-hero__card-action {
    display: flex;
  }
}


/* ── assets/css/sections/_blog-hero.css ── */
/* Шапка сторінки «Блог» — Figma 401:5240 · 1440×314 */

.blog-hero {
  padding-block: var(--space-40) var(--space-48);
  background-color: var(--c-grey-5);
}

.blog-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.blog-hero__crumbs {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-42);
}

.blog-hero__crumbs a:hover,
.blog-hero__crumbs a:focus-visible {
  color: var(--c-white);
}

.blog-hero__row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-48);
}

.blog-hero__text {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-16);
}

.blog-hero__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-44);
  line-height: var(--lh-48);
  letter-spacing: var(--ls-tight-1-32);
  text-transform: uppercase;
  color: var(--c-white);
}

.blog-hero__lead {
  max-width: 520px;
  font-size: var(--fs-15);
  line-height: var(--lh-26);
  color: var(--c-grey-66);
}

.blog-hero__stats {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: stretch;
  gap: var(--space-12);
}

.blog-hero__stat {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-20);
  border-radius: var(--radius-16);
  background-color: var(--c-grey-9);
}

.blog-hero__stat-value {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-24);
  line-height: var(--lh-30);
  color: var(--c-white);
}

.blog-hero__stat-label {
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

/* Мобільна — Figma 401:5441 · 390×360 */

@media (max-width: 1023px) {
  .blog-hero {
    padding-block: var(--space-20) var(--space-28);
  }

  .blog-hero__inner {
    gap: var(--space-12);
  }

  .blog-hero__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
  }

  /* у колонці `flex: 1 0 0` задав би базову висоту 0 */
  .blog-hero__text,
  .blog-hero__stats {
    flex: 0 0 auto;
  }

  .blog-hero__text {
    gap: var(--space-12);
  }

  .blog-hero__title {
    padding-top: var(--space-4);
    font-size: var(--fs-32);
    line-height: var(--lh-36);
    letter-spacing: var(--ls-tight-0-96);
  }

  .blog-hero__lead {
    max-width: none;
    font-size: var(--fs-14);
    line-height: var(--lh-24);
  }

  .blog-hero__stats {
    gap: var(--space-8);
    padding-top: var(--space-8);
  }

  .blog-hero__stat {
    padding: var(--space-16);
  }

  .blog-hero__stat-value {
    font-size: var(--fs-22);
    line-height: var(--lh-28);
  }
}


/* ── assets/css/sections/_hero.css ── */
/* Hero — Figma 401:1418 · 1440×648 */

.hero {
  padding-block: 49px 97px;
  background-color: var(--c-grey-5);
}

.hero__inner {
  display: flex;
  align-items: center;
  gap: var(--space-40);
}

.hero__content {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
}

.hero__badge {
  padding: var(--space-8) var(--space-20);
  border-radius: var(--radius-8);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-10);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1-8);
  text-transform: uppercase;
  color: var(--c-grey-5);
  background-color: var(--c-yellow-58);
}

.hero__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-50);
  line-height: var(--lh-52);
  letter-spacing: var(--ls-tight-1-5);
  text-transform: uppercase;
  color: var(--c-white);
}

.hero__lead {
  max-width: 440px;
  font-size: var(--fs-15);
  line-height: var(--lh-24);
  color: var(--c-grey-66);
}

.hero__actions {
  display: flex;
  gap: var(--space-12);
  padding-top: var(--space-12);
}

/* плашка рейтингу — лише проміжок колонки, без додаткових 12, інакше відривається */
.gtrust--hero {
  margin-top: calc(-1 * var(--space-8));
}

.hero__stats {
  display: flex;
  gap: var(--space-12);
  width: 100%;
  padding-top: var(--space-24);
}

.hero__stat {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-20);
  border-radius: var(--radius-20);
  background-color: var(--c-grey-9);
}

.hero__stat-value {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-22);
  line-height: var(--lh-28);
  color: var(--c-white);
}

.hero__stat-label {
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

.hero__right {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
}

.hero__media {
  position: relative;
  height: 500px;
  overflow: hidden;
  border-radius: var(--radius-32);
  background-color: var(--c-grey-14b);
}

/* кадрування 1:1 з макетом (660×825, зсув −134px) у відсотках від контейнера */
.hero__media-img {
  position: absolute;
  top: -26.8%;
  left: 0;
  width: 103.125%;
  height: 165%;
  object-fit: cover;
  pointer-events: none;
}

.hero__form {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-20);
  border-radius: var(--radius-20);
  background-color: rgba(13, 13, 13, 0.7);
}

.hero__form-title {
  font-weight: 700;
  font-size: var(--fs-15);
  line-height: var(--lh-20);
  color: var(--c-white);
}

.hero__form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  padding-top: var(--space-4);
}

.hero__form-row--full {
  grid-column: 1 / -1;
}

.hero__submit {
  width: 100%;
  letter-spacing: var(--ls-0-78);
}

/* Мобільна — Figma 401:2165 · 390×1040 */

@media (max-width: 1023px) {
  .hero {
    padding-block: 24px 32px;
  }

  .hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
  }

  /* обидві обгортки «розчиняються», діти стають в один потік */
  .hero__content,
  .hero__right {
    display: contents;
  }

  .hero__badge   { order: 1; align-self: flex-start; padding: var(--space-8) var(--space-16);
                   letter-spacing: var(--ls-1-6); }
  .hero__title   { order: 2; font-size: var(--fs-38); line-height: var(--lh-40);
                   letter-spacing: var(--ls-tight-1-14); }
  .hero__lead    { order: 3; max-width: none; font-size: var(--fs-14); line-height: var(--lh-22); }
  .gtrust--hero  { order: 4; align-self: flex-start; }
  .hero__media   { order: 5; height: 228px; border-radius: var(--radius-20); }
  .hero__form    { order: 6; }
  .hero__stats   { order: 7; }
  .hero__actions { display: none; }

  /* фото: у макеті 389×292 зі зсувом (−20, −18) у вікні 390×228 */
  .hero__media-img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-position: 50% 22%;
  }

  .hero__form {
    position: static;
    gap: var(--space-12);
    padding: var(--space-20);
    background-color: var(--c-white);
  }

  .hero__form-title {
    color: var(--c-grey-5);
  }

  .hero__form-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-top: var(--space-4);
  }

  /* панель біла — чорнило в полях темне */
  .hero__form .field__control {
    height: 48px;
    padding: 12.5px 15px 13.5px;
    font-size: var(--fs-14);
    color: var(--c-grey-5);
  }

  .hero__form .field__control::placeholder {
    color: var(--c-grey-54);
  }

  .hero__form .field__control {
    --field-chevron: url("../icons/chevron-down.svg");
  }

  .hero__form select.field__control {
    padding-right: 40px;
  }

  .hero__submit {
    height: 52px;
    color: var(--c-yellow-58);
    background-color: var(--c-grey-5);
  }

  .hero__submit:hover,
  .hero__submit:focus-visible {
    background-color: var(--c-grey-14);
  }

  .hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
    padding-top: 0;
  }

  .hero__stat {
    padding: var(--space-16);
    border-radius: var(--radius-16);
  }

  .hero__stat:last-child {
    grid-column: 1 / -1;
  }

  .hero__stat-value {
    font-size: var(--fs-19);
    line-height: var(--lh-24);
  }

  .hero__stat-label {
    font-size: var(--fs-11);
    line-height: var(--lh-14);
  }
}


/* ── assets/css/sections/_steps.css ── */
/* Кроки роботи — Figma 401:1466 · 1440×389 */

.steps {
  padding-block: 64px;
  background-color: var(--c-white);
}

.steps__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.steps__list {
  display: flex;
  gap: var(--space-24);
  width: 100%;
}

.steps__item {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-20) var(--space-20) var(--space-40);
  border-radius: var(--radius-20);
  background-color: var(--c-grey-95);
}

/* Останній крок акцентний — Figma 401:1531 */
.steps__item--accent {
  padding-bottom: var(--space-20);
  background-color: var(--c-yellow-58);
}

.steps__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.steps__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}

.steps__num {
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-8);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: var(--fs-11);
  line-height: var(--lh-14);
  color: var(--c-yellow-58);
  background-color: var(--c-grey-5);
}

.steps__title {
  padding-top: var(--space-8);
  font-weight: 700;
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  color: var(--c-grey-5);
}

.steps__text {
  font-size: var(--fs-16-body);
  line-height: var(--lh-19-5);
  color: var(--c-grey-42);
}

.steps__item--accent .steps__text {
  color: var(--c-orange-18);
}

/* Мобільна — Figma 401:2205 · 390×628; рядок 148px — мінімум, тексти з адмінки можуть бути довші */

@media (max-width: 1023px) {
  .steps {
    padding-block: 36px;
  }

  .steps__inner {
    gap: var(--space-20);
  }

  .steps__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(148px, auto);
    gap: var(--space-12);
  }

  .steps__item {
    gap: var(--space-4);
    padding: var(--space-16);
    border-radius: var(--radius-16);
  }

  .steps__item--accent {
    padding-bottom: var(--space-16);
  }

  .steps__icon {
    width: 24px;
    height: 24px;
  }

  .steps__icon img {
    width: 100%;
    height: auto;
  }

  .steps__num {
    padding: 3px var(--space-12);
    font-size: var(--fs-10);
  }

  .steps__title {
    padding-top: var(--space-12);
  }

  .steps__text {
    font-size: var(--fs-12);
    line-height: var(--lh-18);
  }
}


/* ── assets/css/sections/_stages.css ── */
/* П'ять етапів угоди — Figma 401:2930 · 1440×1018 */

.stages {
  padding-block: 64px;
  background-color: var(--c-white);
}

/* у макеті відступ 24px належить блоку заголовка (Figma 401:2931 — 68px) */
.stages .section-head {
  padding-bottom: var(--space-24);
}

.stages__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-32);
  /* обведення 2px входить у верхній відступ 26 з макета */
  padding-block: var(--space-24);
  border-top: 2px solid var(--c-grey-5);
}

/* у макеті перший і останній рядки мають на 2 і 4px більші відступи */
.stages__item:first-child {
  padding-top: 26px;
}

.stages__item:last-child {
  padding-bottom: 28px;
}

.stages__aside {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: var(--space-8);
  width: 120px;
}

.stages__num {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-40);
  line-height: var(--lh-40);
  letter-spacing: var(--ls-tight-1-6);
  color: var(--c-grey-5);
}

.stages__time {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-11);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1-1);
  color: var(--c-grey-71);
}

.stages__body {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-12);
}

.stages__title {
  font-weight: 700;
  font-size: var(--fs-19);
  line-height: var(--lh-24);
  color: var(--c-grey-5);
}

.stages__text {
  max-width: 640px;
  font-size: var(--fs-14);
  line-height: var(--lh-24);
  color: var(--c-grey-42);
}

.stages__result {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: var(--space-12);
  width: 300px;
  padding-top: var(--space-4);
}

.stages__result-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-10);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1-4);
  color: var(--c-grey-5);
}

.stages__result-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.stages__result-item {
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--c-grey-29);
}

/* Галочка «ви отримуєте» — лише мобільна (Figma 401:3302) */
.stages__result-icon {
  display: none;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Мобільна — Figma 401:3286 · 390×1801 */

@media (max-width: 1023px) {
  .stages {
    padding-block: 36px;
  }

  .stages .section-head {
    padding-bottom: 0;
  }

  .stages__item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    padding-block: var(--space-20) var(--space-24);
  }

  .stages__item:first-child {
    padding-top: 42px;
  }

  .stages__item:last-child {
    padding-bottom: var(--space-24);
  }

  .stages__aside {
    flex-direction: row;
    align-items: center;
    gap: var(--space-16);
    width: auto;
  }

  .stages__num {
    font-size: var(--fs-34);
    line-height: var(--lh-34);
    letter-spacing: var(--ls-tight-1-36);
  }

  .stages__time {
    font-size: var(--fs-10);
    line-height: var(--lh-14);
    letter-spacing: var(--ls-1);
  }

  .stages__body {
    gap: var(--space-8);
  }

  .stages__title {
    padding-top: var(--space-4);
    font-size: var(--fs-17);
    line-height: var(--lh-22);
  }

  .stages__text {
    max-width: none;
    font-size: var(--fs-14);
    line-height: var(--lh-22);
  }

  .stages__result {
    width: auto;
    gap: var(--space-8);
    padding-top: var(--space-8);
  }

  .stages__result-list {
    padding-top: var(--space-4);
  }

  .stages__result-item {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8);
    padding-bottom: 1px;
    height: 19px;
    font-size: var(--fs-12);
    line-height: var(--lh-18);
  }

  .stages__result-icon {
    display: block;
  }
}


/* ── assets/css/sections/_pricing.css ── */
/* Прозорий прайс послуг — Figma 401:3040 · 1440×595 */

.pricing {
  padding-bottom: 64px;
  background-color: var(--c-white);
}

.pricing__panel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-48);
  padding: var(--space-40);
  border-radius: var(--radius-32);
  background-color: var(--c-grey-5);
}

.pricing__intro {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  width: 636px;
}

.pricing__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-30);
  line-height: var(--lh-34);
  letter-spacing: var(--ls-tight-0-9);
  text-transform: uppercase;
  color: var(--c-white);
}

.pricing__note {
  padding-bottom: var(--space-8);
  font-size: var(--fs-14);
  line-height: var(--lh-24);
  color: var(--c-grey-66);
}

.pricing__cta {
  height: 48px;
  padding-inline: var(--space-28);
  letter-spacing: var(--ls-0-6);
}

.pricing__table {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  padding: var(--space-24) var(--space-28);
  border-radius: var(--radius-20);
  background-color: var(--c-grey-9);
}

.pricing__rows {
  display: flex;
  flex-direction: column;
}

.pricing__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding-block: var(--space-12) 13px;
  border-bottom: var(--stroke-1) solid var(--c-grey-14);
}

.pricing__row:last-of-type {
  padding-bottom: var(--space-28);
  border-bottom: none;
}

.pricing__row-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pricing__row-name {
  font-weight: 600;
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  color: var(--c-white);
}

.pricing__row-note {
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-48);
}

.pricing__row-value {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: var(--lh-20);
  color: var(--c-yellow-58);
}

.pricing__row-value--wrap {
  padding-right: 10.66px;
  text-align: left;
}

.pricing__foot {
  padding-top: 17px;
  border-top: var(--stroke-1) solid var(--c-grey-14);
  font-size: var(--fs-12);
  line-height: var(--lh-20);
  color: var(--c-grey-42);
}

/* Мобільна — Figma 401:3399 · 390×978 */

@media (max-width: 1023px) {
  .pricing {
    padding-bottom: 36px;
  }

  .pricing__panel {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
    padding: var(--space-24) var(--space-20);
    border-radius: var(--radius-20);
  }

  .pricing__intro {
    display: contents;
  }

  .pricing__title {
    font-size: var(--fs-24);
    line-height: var(--lh-28);
    letter-spacing: var(--ls-tight-0-72);
  }

  .pricing__note {
    order: 1;
    padding-bottom: 0;
    line-height: var(--lh-22);
  }

  /* на мобільній боксом стає .pricing__rows */
  .pricing__table {
    display: contents;
  }

  .pricing__rows {
    order: 2;
    padding: var(--space-16) var(--space-20) var(--space-8);
    border-radius: var(--radius-16);
    background-color: var(--c-grey-9);
  }

  .pricing__foot {
    order: 3;
    padding-top: var(--space-4);
    border-top: none;
  }

  .pricing__cta {
    order: 4;
    width: 100%;
    height: 56px;
  }

  .pricing__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    padding-block: var(--space-16) 17px;
  }

  .pricing__row:last-of-type {
    padding-bottom: var(--space-16);
  }

  .pricing__row-text {
    display: contents;
  }

  .pricing__row-name {
    order: 1;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--fs-9);
    line-height: var(--fs-12);
    letter-spacing: var(--ls-1-26);
    text-transform: uppercase;
    color: var(--c-grey-48);
  }

  .pricing__row-value {
    order: 2;
    font-size: var(--fs-20);
    line-height: var(--lh-26);
  }

  .pricing__row-value--wrap {
    padding-right: 0;
  }

  .pricing__row-note {
    order: 3;
    font-size: var(--fs-12);
    line-height: var(--lh-20);
    color: var(--c-grey-54);
  }
}


/* ── assets/css/sections/_reject.css ── */
/* Що відсіюємо до торгів — Figma 401:3092 · 1440×681 */

.reject {
  padding-bottom: 64px;
  background-color: var(--c-white);
}

.reject__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-40);
  border-radius: var(--radius-32);
  background-color: var(--c-grey-95);
}

.reject__head {
  display: flex;
  align-items: flex-end;
  gap: var(--space-48);
}

.reject__title {
  flex: 1 0 0;
  min-width: 0;
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-30);
  line-height: var(--lh-34);
  letter-spacing: var(--ls-tight-0-9);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.reject__note {
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-19-5);
  color: var(--c-grey-42);
}

.reject__list {
  display: flex;
  align-items: stretch;
  gap: var(--space-16);
  padding-top: var(--space-8);
}

.reject__item {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  overflow: hidden;
  padding-top: var(--space-8);
  border-radius: var(--radius-20);
  background-color: var(--c-white);
}

.reject__photo {
  position: relative;
  width: 282px;
  max-width: 100%;
  height: 212px;
  overflow: hidden;
  border-radius: var(--radius-12);
  background-color: var(--c-grey-85);
}

/* без max-width: none глобальне img{max-width:100%} ламає кадрування */
.reject__photo-img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

/* кадрування 1:1 з макета — у відсотках від вікна 282×212 */
.reject__photo-img--flood { width: 328%;   height: 291%;   left: -106.7%; top: -108.5%; }
.reject__photo-img--cut   { width: 147.2%; height: 130.7%; left: -22%;    top: -8%; }
.reject__photo-img--frame { width: 186.9%; height: 165.6%; left: -42.2%;  top: -46.7%; }
.reject__photo-img--odo   { width: 198.2%; height: 148.1%; left: -94.7%;  top: -19.8%; }

.reject__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(13, 13, 13, 0.35);
  pointer-events: none;
}

.reject__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--c-red-49);
  transform: translate(-50%, -50%);
}

.reject__mark-icon {
  width: 26px;
  height: 26px;
}

.reject__flag {
  position: absolute;
  bottom: var(--space-8);
  left: var(--space-8);
  z-index: 1;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-8);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-9);
  line-height: var(--fs-12);
  letter-spacing: var(--ls-0-9);
  color: var(--c-white);
  background-color: var(--c-red-49);
}

.reject__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-8) var(--space-20) var(--space-24);
}

.reject__item-title {
  font-weight: 700;
  font-size: var(--fs-15);
  line-height: var(--lh-20);
  color: var(--c-grey-5);
}

.reject__item-text {
  font-size: var(--fs-16);
  line-height: var(--lh-19-5);
  color: var(--c-grey-42);
}

.reject__foot {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  /* обведення 1px входить у відступ 22 з макета */
  padding-top: 21px;
  border-top: var(--stroke-1) solid var(--c-grey-85);
}

.reject__foot-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.reject__foot-text {
  font-weight: 500;
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  color: var(--c-grey-5);
}

/* Мобільна — Figma 401:3445 · 390×739 */

@media (max-width: 1023px) {
  .reject {
    padding-bottom: 36px;
  }

  .reject .container {
    padding-inline: 0;
  }

  .reject__panel {
    gap: 0;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .reject__head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
    padding-inline: var(--container-padding);
  }

  .reject__title {
    flex: 0 0 auto;
    font-size: var(--fs-24);
    line-height: var(--lh-28);
    letter-spacing: var(--ls-tight-0-72);
  }

  .reject__note {
    flex: 0 0 auto;
  }

  .reject__list {
    align-items: stretch;
    /* явна висота 482 (Figma 401:3451): 20 + картка 442 + 20 */
    height: 482px;
    gap: var(--space-12);
    padding: var(--space-20) var(--container-padding);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* snap рахується від краю скролпорту без padding — scroll-padding це компенсує */
    scroll-padding-inline: var(--container-padding);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .reject__list::-webkit-scrollbar {
    display: none;
  }

  .reject__item {
    flex: 0 0 272px;
    scroll-snap-align: start;
  }

  .reject__photo {
    width: 256px;
    height: 250px;
  }

  .reject__mark {
    width: 52px;
    height: 52px;
  }

  .reject__mark-icon {
    width: 24px;
    height: 24px;
  }

  .reject__body {
    padding-bottom: var(--space-20);
  }

  .reject__foot {
    align-items: flex-start;
    margin-inline: var(--container-padding);
    padding-top: 17px;
  }

  .reject__foot-text {
    font-size: var(--fs-13);
    line-height: var(--lh-20);
  }
}


/* ── assets/css/sections/_dealer.css ── */
/* Блок для дилерів — Figma 401:3164 · 1440×232 */

.dealer {
  padding-bottom: 64px;
  background-color: var(--c-white);
}

.dealer__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
  padding: var(--space-32) 60px;
  border-radius: var(--radius-32);
  background-color: var(--c-grey-5);
}

.dealer__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 620px;
}

.dealer__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-24);
  line-height: var(--lh-30);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-white);
}

.dealer__note {
  max-width: 620px;
  font-size: var(--fs-14);
  line-height: var(--lh-22);
  color: var(--c-grey-54);
}

.dealer__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-12);
}

.dealer__terms {
  height: 48px;
  padding-inline: var(--space-24);
  border: var(--stroke-1) solid var(--c-grey-27);
  border-radius: var(--radius-12);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-white);
}

.dealer__price {
  height: 48px;
  padding-inline: var(--space-28);
  letter-spacing: var(--ls-0-6);
}

/* Мобільна — Figma 401:3513 · 390×360 */

@media (max-width: 1023px) {
  .dealer {
    padding-bottom: 36px;
  }

  .dealer__panel {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
    padding: var(--space-24) var(--space-20);
    border-radius: var(--radius-20);
  }

  .dealer__text {
    display: contents;
  }

  .dealer__title {
    font-size: var(--fs-22);
    line-height: var(--lh-28);
  }

  .dealer__note {
    max-width: none;
    padding-bottom: var(--space-8);
    font-size: var(--fs-13);
    line-height: var(--lh-20);
  }

  .dealer__actions {
    display: contents;
  }

  .dealer__terms,
  .dealer__price {
    width: 100%;
  }
}


/* ── assets/css/sections/_compare.css ── */
/* Порівняння «ринок vs імпорт» — Figma 401:1545 · 1440×512 */

.compare {
  padding-block: 8px 64px;
  background-color: var(--c-white);
}

.compare__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
  padding: var(--space-40);
  border-radius: var(--radius-32);
  background-color: var(--c-grey-95);
}

.compare__head {
  display: flex;
  align-items: flex-end;
  gap: 285px;
}

.compare__title {
  flex-shrink: 0;
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-30);
  line-height: var(--lh-38);
  letter-spacing: var(--ls-tight-0-9);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.compare__note {
  flex-shrink: 0;
  padding-right: 13.73px;
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--c-grey-42);
}

.compare__grid {
  display: flex;
  gap: var(--space-20);
}

.compare__card {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-8);
  border-radius: var(--radius-20);
}

.compare__card--market {
  padding: var(--space-28) var(--space-28) 30px;
  background-color: var(--c-white);
}

.compare__card--ours {
  padding: var(--space-28);
  background-color: var(--c-grey-5);
}

.compare__label {
  font-weight: 700;
  font-size: var(--fs-15);
  line-height: var(--lh-20);
  color: var(--c-grey-54);
}

.compare__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.compare__logo {
  width: 89.286px;
  height: 20px;
  flex-shrink: 0;
}

.compare__badge {
  padding: var(--space-4) var(--space-16);
  border-radius: var(--radius-8);
  font-weight: 800;
  font-size: var(--fs-11);
  line-height: var(--lh-14);
  text-transform: uppercase;
  color: var(--c-grey-5);
  background-color: var(--c-yellow-58);
}

.compare__price {
  font-weight: 800;
  font-size: var(--fs-34);
  line-height: var(--lh-44);
  letter-spacing: var(--ls-tight-1-02);
}

.compare__card--market .compare__price {
  color: var(--c-grey-54);
}

.compare__card--ours .compare__price {
  color: var(--c-yellow-58);
}

.compare__list {
  padding-top: var(--space-12);
}

.compare__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding-block: 9px var(--space-8);
  border-top: var(--stroke-1) solid var(--c-grey-91);
  font-size: var(--fs-13);
  line-height: var(--lh-18);
}

.compare__card--market .compare__row {
  color: var(--c-grey-42);
}

.compare__card--ours .compare__row {
  border-top-color: var(--c-grey-14);
  font-weight: 500;
  color: var(--c-white);
}

.compare__row-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Мобільна — Figma 401:2284 · 390×702 */

@media (max-width: 1023px) {
  .compare {
    padding-block: 0 36px;
  }

  .compare__panel {
    gap: var(--space-8);
    padding: var(--space-20);
    border-radius: var(--radius-20);
  }

  .compare__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
  }

  .compare__title {
    font-size: var(--fs-24);
    line-height: var(--lh-30);
    letter-spacing: var(--ls-tight-0-72);
  }

  .compare__note {
    padding-right: 0;
    font-size: var(--fs-12);
    line-height: var(--lh-20);
  }

  .compare__grid {
    flex-direction: column;
    gap: var(--space-12);
    padding-top: var(--space-12);
  }

  .compare__card {
    border-radius: var(--radius-16);
  }

  .compare__card--market,
  .compare__card--ours {
    padding: var(--space-20);
  }

  .compare__label {
    font-size: var(--fs-14);
    line-height: var(--lh-18);
  }

  .compare__price {
    font-size: var(--fs-30);
    line-height: var(--lh-38);
    letter-spacing: var(--ls-tight-0-9);
  }

  .compare__badge {
    padding-inline: var(--space-12);
    text-transform: none;
  }

  .compare__list {
    padding-top: var(--space-8);
  }

  .compare__row {
    gap: var(--space-8);
    font-size: var(--fs-12);
    line-height: var(--lh-16);
  }

  .compare__row-icon {
    width: 15px;
    height: 15px;
  }
}


/* ── assets/css/sections/_calc.css ── */
/* Калькулятор вартості — Figma 401:1592 · 1440×556 */

.calc {
  padding-bottom: 64px;
  background-color: var(--c-white);
}

.calc__panel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-40);
  padding: var(--space-40);
  border-radius: var(--radius-32);
  background-color: var(--c-grey-5);
}

.calc__intro {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-12);
  padding-bottom: 46px;
}

.calc__title {
  max-width: 400px;
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-30);
  line-height: var(--lh-34);
  letter-spacing: var(--ls-tight-0-9);
  text-transform: uppercase;
  color: var(--c-white);
}

.calc__note {
  max-width: 420px;
  font-size: var(--fs-14);
  line-height: var(--lh-22);
  color: var(--c-grey-54);
}

.calc__params {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-12);
  padding-top: var(--space-16);
}

.calc__param {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* обведення в Figma всередині: 13/17 мінус 1px бордера */
  padding: 12px 16px;
  border: var(--stroke-1) solid var(--c-grey-20);
  border-radius: var(--radius-12);
}

/* Ціна лота — Figma 401:1630 */
.calc__param--price {
  grid-column: 1 / span 2;
  gap: var(--space-2);
  border-color: var(--c-yellow-58);
}

/* Тип авто — Figma 401:1635 */
.calc__param--tall {
  padding-bottom: 18px;
}

.calc__param-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-9);
  line-height: var(--fs-12);
  letter-spacing: var(--ls-1-08);
  color: var(--c-grey-48);
}

.calc__param--price .calc__param-label {
  color: var(--c-yellow-58);
}

.calc__param-value {
  font-weight: 600;
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-white);
}

.calc__param--price .calc__param-value {
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-26);
}

.calc__result {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-28);
  border-radius: var(--radius-20);
  background-color: var(--c-grey-9);
}

.calc__cols {
  display: flex;
  gap: var(--space-28);
}

.calc__col {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
}

.calc__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-8) 9px;
  border-bottom: var(--stroke-1) solid var(--c-grey-14);
}

.calc__row:last-child {
  padding-bottom: var(--space-8);
  border-bottom: none;
}

.calc__row-label {
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-60);
  white-space: nowrap;
}

.calc__row-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-white);
  white-space: nowrap;
}

.calc__total-wrap {
  padding-top: var(--space-20);
}

.calc__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-20);
  border-radius: var(--radius-12);
  background-color: var(--c-yellow-58);
}

.calc__total-label {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  letter-spacing: var(--ls-0-28);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.calc__total-value {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: var(--fs-26);
  line-height: var(--lh-34);
  color: var(--c-grey-5);
}

.calc__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  padding-top: var(--space-20);
}

.calc__disclaimer {
  font-size: var(--fs-12);
  line-height: var(--lh-18);
  color: var(--c-grey-48);
}

.calc__cta {
  padding: var(--space-16) var(--space-28);
  letter-spacing: var(--ls-0-6);
}

/* Мобільна — Figma 401:2330 · 390×1046 */

@media (max-width: 1023px) {
  .calc {
    padding-bottom: 36px;
  }

  .calc__panel {
    flex-direction: column;
    gap: var(--space-12);
    padding: var(--space-24) var(--space-20);
    border-radius: var(--radius-20);
  }

  /* обгортки «розчиняються» — блоки стають в одну колонку панелі */
  .calc__intro,
  .calc__result {
    display: contents;
  }

  .calc__title {
    max-width: none;
    font-size: var(--fs-24);
    line-height: var(--lh-28);
    letter-spacing: var(--ls-tight-0-72);
  }

  .calc__note {
    max-width: none;
    font-size: var(--fs-12);
    line-height: var(--lh-20);
  }

  .calc__params {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    padding-top: var(--space-8);
  }

  .calc__param {
    /* тут обведення не входить у висоту з Figma: 12 + бордер = 57 */
    padding: var(--space-12);
    gap: var(--space-3);
    border-radius: var(--radius-12);
  }

  .calc__param-label {
    font-size: var(--fs-8);
    line-height: var(--lh-10);
    letter-spacing: var(--ls-0-96);
  }

  .calc__param-value {
    font-size: var(--fs-13);
    line-height: var(--lh-18);
  }

  /* у макеті останній рядок у зворотному порядку */
  .calc__param--tall {
    grid-column: 1;
    grid-row: 4;
    padding-bottom: var(--space-16);
  }

  .calc__param--price {
    grid-column: 2;
    grid-row: 4;
    gap: var(--space-1);
  }

  .calc__param--price .calc__param-value {
    font-size: var(--fs-18);
    line-height: var(--lh-24);
  }

  .calc__result {
    padding: 0;
  }

  .calc__cols {
    flex-direction: column;
    gap: 0;
    padding: var(--space-24) var(--space-20) var(--space-20);
    border-radius: var(--radius-16);
    background-color: var(--c-grey-9);
  }

  /* межа зникає лише в найостаннішого рядка всієї таблиці */
  .calc__col:not(:last-child) .calc__row:last-child {
    padding-bottom: 9px;
    border-bottom: var(--stroke-1) solid var(--c-grey-14);
  }

  .calc__total-wrap {
    padding-top: 0;
  }

  .calc__total {
    border-radius: var(--radius-16);
  }

  .calc__total-label {
    font-size: var(--fs-13);
    line-height: var(--lh-18);
    letter-spacing: 0;
  }

  .calc__total-value {
    font-size: var(--fs-22);
    line-height: var(--lh-28);
  }

  .calc__foot {
    display: contents;
  }

  .calc__disclaimer {
    font-size: var(--fs-11);
    line-height: var(--lh-16);
  }

  .calc__cta {
    width: 100%;
    height: 56px;
    padding: var(--space-4) var(--space-28) 0;
  }
}


/* ── assets/css/sections/_calculator.css ── */
/* Калькулятор вартості під ключ — стиль кошторису з _calc.css, поля темного варіанта */

.calculator {
  padding-block: var(--space-40) 64px;
  background-color: var(--c-white);
}

.calculator__head {
  max-width: 720px;
  padding-bottom: var(--space-32);
}

.calculator__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-38);
  line-height: var(--lh-40);
  letter-spacing: var(--ls-tight-1-14);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.calculator__lead {
  padding-top: var(--space-12);
  font-size: var(--fs-15);
  line-height: var(--lh-24);
  color: var(--c-grey-42);
}

.calculator__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-40);
  padding: var(--space-40);
  border-radius: var(--radius-32);
  background-color: var(--c-grey-5);
}

.calculator__panel:not(:has(.calculator__result:not([hidden]))) {
  grid-template-columns: minmax(0, 1fr);
}

.calculator__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.calculator__clients {
  display: flex;
  gap: var(--space-12);
  padding: 0;
  border: 0;
}

.calculator__client {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.calculator__client-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.calculator__client-label {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: var(--stroke-1) solid var(--c-grey-27);
  border-radius: var(--radius-12);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-0-48);
  text-transform: uppercase;
  color: var(--c-grey-79);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast),
    background-color var(--transition-fast);
}

.calculator__client-label:hover {
  border-color: var(--c-white);
  color: var(--c-white);
}

.calculator__client-input:checked + .calculator__client-label {
  border-color: var(--color-accent);
  color: var(--c-grey-5);
  background-color: var(--color-accent);
}

.calculator__client-input:focus-visible + .calculator__client-label {
  outline: var(--stroke-2) solid var(--color-accent);
  outline-offset: 3px;
}

.calculator__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
}

.calculator__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.calculator__field--wide {
  grid-column: 1 / -1;
}

.calculator__field[hidden] {
  display: none;
}

/* Локація: поле-фільтр поверх select; без --ready (без JS) видно рідний select */

.calculator__combo {
  position: relative;
}

.calculator__combo--ready .calculator__combo-native {
  display: none;
}

.calculator__combo-list {
  position: absolute;
  z-index: 3;
  top: calc(100% + var(--space-4));
  right: 0;
  left: 0;
  max-height: 264px;
  margin: 0;
  padding: var(--space-4);
  overflow-y: auto;
  list-style: none;
  border: var(--stroke-1) solid var(--c-grey-27);
  border-radius: var(--radius-12);
  background-color: var(--c-grey-8, #141414);
  box-shadow: 0 16px 40px rgb(0 0 0 / 45%);
  overscroll-behavior: contain;
}

.calculator__combo-group {
  position: sticky;
  top: 0;
  padding: var(--space-8) var(--space-12) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1-1);
  text-transform: uppercase;
  color: var(--c-grey-48);
  background-color: var(--c-grey-8, #141414);
}

.calculator__combo-option {
  padding: var(--space-8) var(--space-12);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  color: var(--c-white);
  border-radius: var(--radius-8);
  cursor: pointer;
}

.calculator__combo-option:hover,
.calculator__combo-option.is-active {
  background-color: var(--c-grey-20);
}

.calculator__combo-option[aria-selected="true"] {
  color: var(--c-yellow);
}

.calculator__combo-empty {
  padding: var(--space-12);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  color: var(--c-grey-48);
}

.calculator__label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1-1);
  text-transform: uppercase;
  color: var(--c-grey-54);
}

.calculator__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.calculator__submit {
  height: 52px;
}

.calculator__error {
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--c-red-49);
}

.calculator__error[hidden] {
  display: none;
}

.calculator__result {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-24);
  border-radius: var(--radius-20);
  background-color: var(--c-grey-9);
}

.calculator__result[hidden] {
  display: none;
}

.calculator__result-route {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1-1);
  text-transform: uppercase;
  color: var(--color-accent);
}

.calculator__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
}

.calculator__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
}

.calculator__row--sub {
  margin-top: calc(var(--space-12) * -1 + var(--space-4));
  padding-left: var(--space-12);
}

.calculator__row--sub .calculator__row-label,
.calculator__row--sub .calculator__row-value {
  font-size: var(--fs-13);
  color: var(--c-grey-48);
}

.calculator__row-label {
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  color: var(--c-grey-60);
}

.calculator__row-note {
  display: block;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-48);
}

.calculator__row-value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  white-space: nowrap;
  color: var(--c-white);
}

.calculator__total-wrap {
  padding-top: var(--space-20);
  border-top: var(--stroke-1) solid var(--c-grey-20);
}

.calculator__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
}

.calculator__total-label {
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  color: var(--c-grey-60);
}

.calculator__total-value {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-32);
  line-height: var(--lh-34);
  letter-spacing: var(--ls-tight-0-96);
  white-space: nowrap;
  color: var(--color-accent);
}

.calculator__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.calculator__note {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  line-height: var(--lh-16);
  color: var(--c-grey-42);
}

.calculator__cta {
  height: 48px;
}

.calculator__disclaimer {
  padding-top: var(--space-20);
  font-size: var(--fs-12);
  line-height: var(--lh-18);
  color: var(--c-grey-54);
}

/* Мобільна */

@media (max-width: 1023px) {
  .calculator {
    padding-block: var(--space-24) 40px;
  }

  .calculator__title {
    font-size: var(--fs-28);
    line-height: var(--lh-32);
  }

  .calculator__panel,
  .calculator__panel:not(:has(.calculator__result:not([hidden]))) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-24);
    padding: var(--space-20);
    border-radius: var(--radius-20);
  }

  .calculator__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
  }

  .calculator__field--wide {
    grid-column: auto;
  }

  .calculator__total-value {
    font-size: var(--fs-26);
    line-height: var(--lh-30);
  }
}

.calculator__lead[hidden] {
  display: none;
}

.calculator__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.calculator__lead-note {
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--c-grey-60);
}

.calculator__lead-form {
  display: flex;
  gap: var(--space-8);
}

.calculator__lead-field {
  flex: 1 1 0;
  min-width: 0;
}

.calculator__lead-submit {
  height: 48px;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .calculator__lead-form {
    flex-direction: column;
  }

  .calculator__lead-submit {
    width: 100%;
  }
}

/* Замок на час перевірки */

.calculator--locked .calculator__panel {
  position: relative;
}

/* блюр — лише вигляд; сама перевірка на сервері (inc/calc/gate.php) */
.calculator--locked .calculator__form,
.calculator--locked .calculator__result {
  filter: blur(6px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

.calculator__lock {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  width: min(420px, calc(100% - var(--space-40)));
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-32);
  border: var(--stroke-1) solid var(--c-grey-27);
  border-radius: var(--radius-20);
  background-color: var(--c-grey-9);
  box-shadow: var(--shadow-hover);
  transform: translate(-50%, -50%);
  text-align: center;
}

.calculator__lock-title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-20);
  line-height: var(--lh-26);
  text-transform: uppercase;
  color: var(--c-white);
}

.calculator__lock-note {
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  color: var(--c-grey-60);
}

.calculator__lock-form {
  display: flex;
  gap: var(--space-8);
  padding-top: var(--space-4);
}

.calculator__lock-form .field {
  flex: 1 1 0;
  min-width: 0;
}

.calculator__lock-error {
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--c-red-49);
}

@media (max-width: 1023px) {
  .calculator__lock {
    padding: var(--space-20);
  }

  .calculator__lock-form {
    flex-direction: column;
  }
}


/* ── assets/css/sections/_savings.css ── */
/* Економія клієнтів — Figma 401:1696 · 1440×581.5 */

.savings {
  padding-bottom: 64px;
  background-color: var(--c-white);
}

.savings__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.savings__list {
  display: flex;
  gap: var(--space-24);
}

.savings__item {
  position: relative;
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  overflow: hidden;
  padding: 9px 1px 1px;
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-20);
}

.savings__photo {
  position: relative;
  width: 406px;
  max-width: 100%;
  height: 256px;
  overflow: hidden;
  border-radius: var(--radius-12);
  background-color: var(--c-grey-85);
}

.savings__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Кадрування 1:1 з макетом — зсув по вертикалі рахований від висоти фото */
.savings__photo-img--audi    { object-position: 50% 43.31%; }
.savings__photo-img--bmw     { object-position: 50% 47.44%; }

/* фото в макеті повернуте на 1.92°; scale(1.03) закриває кути */
.savings__photo-img--porsche {
  object-position: 29.6% 45.27%;
  transform: rotate(1.92deg) scale(1.03);
}

/* від краю картки: 1 + 9 + 12 по вертикалі, 1 + 1 + 7 + 12 по горизонталі */
.savings__badge {
  position: absolute;
  top: 22px;
  left: 21px;
  padding: 3px var(--space-12);
  border-radius: var(--radius-8);
  font-weight: 800;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-5);
  background-color: var(--c-yellow-58);
}

.savings__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7.5px;
  width: 100%;
  padding: var(--space-8) var(--space-20) var(--space-20);
}

.savings__amount-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.savings__amount {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-38);
  line-height: var(--lh-48);
  letter-spacing: var(--ls-tight-1-52);
  color: var(--c-grey-5);
}

.savings__model {
  padding-block: 4.5px;
  font-weight: 700;
  font-size: var(--fs-15);
  line-height: var(--lh-20);
  color: var(--c-grey-5);
}

.savings__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
}

.savings__row--first {
  padding-top: 13px;
  border-top: var(--stroke-1) solid var(--c-grey-91);
}

.savings__row-label {
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-42);
  white-space: nowrap;
}

.savings__row-value {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-5);
  white-space: nowrap;
}

.savings__row-value--total {
  font-weight: 700;
}

/* Мобільна — Figma 401:2428 · 390×547 */

@media (max-width: 1023px) {
  .savings {
    padding-bottom: 36px;
  }

  /* контейнер віддає поля, щоб скролер доїжджав до краю екрана */
  .savings .container {
    padding-inline: 0;
  }

  .savings__inner {
    gap: 0;
  }

  .savings .section-head {
    padding-inline: var(--container-padding);
  }

  .savings .section-head__title {
    max-width: 232px;
  }

  .savings__list {
    gap: var(--space-12);
    padding: var(--space-20) var(--container-padding) var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* snap рахується від краю скролпорту без padding — scroll-padding це компенсує */
    scroll-padding-inline: var(--container-padding);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .savings__list::-webkit-scrollbar {
    display: none;
  }

  .savings__item {
    flex: 0 0 280px;
    padding: var(--space-8) 0 0;
    scroll-snap-align: start;
  }

  .savings__photo {
    width: 262px;
    height: 208px;
  }

  .savings__badge {
    position: static;
    padding: 3px var(--space-8);
    font-size: var(--fs-11);
    line-height: var(--lh-14);
  }

  .savings__body {
    gap: 3.5px;
    padding: var(--space-8) var(--space-16) var(--space-20);
  }

  .savings__amount {
    font-size: var(--fs-32);
    line-height: var(--lh-40);
    letter-spacing: var(--ls-tight-1-28);
  }

  .savings__model {
    padding-block: 8.5px;
    font-size: var(--fs-14);
    line-height: var(--lh-18);
  }
}


/* ── assets/css/sections/_cta-lead.css ── */
/* CTA «Порахуємо за 15 хвилин» — Figma 401:1763 · 1440×174 */

.cta-lead {
  padding-bottom: 64px;
  background-color: var(--c-white);
}

.cta-lead__panel {
  position: relative;
  overflow: hidden;
  padding: var(--space-28) var(--space-32);
  border-radius: var(--radius-32);
  background-color: var(--c-grey-5);
}

/* Декоративна смуга — Figma 401:1765 */
.cta-lead__panel::before {
  content: "";
  position: absolute;
  top: 0.5px;
  bottom: 0.5px;
  left: 0;
  width: 169px;
  background-image: linear-gradient(
    to right,
    var(--c-yellow-58) 0%,
    rgba(255, 221, 43, 0.4) 54.327%,
    rgba(13, 13, 13, 0.3) 100%
  );
  pointer-events: none;
}

.cta-lead__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
  padding-left: 132px;
}

.cta-lead__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.cta-lead__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-22);
  line-height: var(--lh-28);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-white);
}

.cta-lead__note {
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-grey-54);
}

.cta-lead__form {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-12);
}

.cta-lead__field {
  width: 220px;
}

.cta-lead__submit {
  height: 48px;
  padding-inline: var(--space-28);
  letter-spacing: var(--ls-0-6);
}

/* Мобільна — Figma 401:2492 · 390×304 */

@media (max-width: 1023px) {
  .cta-lead {
    padding-bottom: 36px;
  }

  .cta-lead__panel {
    padding: var(--space-24) var(--space-20);
    border-radius: var(--radius-20);
  }

  .cta-lead__panel::before {
    display: none;
  }

  .cta-lead__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    padding-left: 0;
  }

  .cta-lead__text {
    gap: 0;
  }

  .cta-lead__title {
    font-size: var(--fs-20);
    line-height: var(--lh-24);
  }

  .cta-lead__note {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
    font-size: var(--fs-12);
    line-height: var(--lh-16);
  }

  .cta-lead__form {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
  }

  .cta-lead__field {
    width: 100%;
  }

  .cta-lead__form .field__control {
    height: 52px;
    padding: 14.5px 15px 15.5px;
  }

  .cta-lead__submit {
    width: 100%;
    height: 56px;
    padding: 0 var(--space-28);
  }
}


/* ── assets/css/sections/_catalog.css ── */
/* Каталог авто — Figma 401:1778 · 1440×654 */

.catalog {
  padding-bottom: 64px;
  background-color: var(--c-white);
}

.catalog__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.catalog__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-32);
}

.catalog__tabs {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-8);
}

.catalog__tab {
  display: inline-flex;
  height: 40px;
  align-items: center;
  padding-inline: var(--space-20);
  border: var(--stroke-1) solid var(--c-grey-78);
  border-radius: var(--radius-12);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-29);
  white-space: nowrap;
  transition: color var(--transition-fast), background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.catalog__tab[aria-selected="true"] {
  font-weight: 700;
  color: var(--c-white);
  border-color: var(--c-grey-5);
  background-color: var(--c-grey-5);
}

.catalog__list {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
}

.catalog__item {
  display: flex;
  /* ширина — фіксована частка ряду, щоб 1–2 картки не розтягувались */
  flex: 0 1 calc((100% - var(--space-20) * 3) / 4);
  max-width: calc((100% - var(--space-20) * 3) / 4);
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  overflow: hidden;
  padding: 9px 1px;
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-20);
  background-color: var(--c-white);
}

.catalog__photo {
  position: relative;
  width: 297px;
  max-width: 100%;
  height: 224px;
  overflow: hidden;
  border-radius: var(--radius-12);
  background-color: var(--c-grey-95);
}

.catalog__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Кадрування 1:1 з макетом */
.catalog__photo-img--g30  { object-position: 50% 43.9%; }
.catalog__photo-img--x5   { object-position: 50% 41.6%; }
.catalog__photo-img--edge { object-position: 50% 40.7%; }

.catalog__status {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  padding: var(--space-4) var(--space-16);
  border-radius: var(--radius-8);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-10);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1);
  color: var(--c-yellow-58);
  background-color: var(--c-grey-5);
}

.catalog__status--transit {
  color: var(--c-grey-5);
  background-color: var(--c-yellow-58);
}

.catalog__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-8) var(--space-16) var(--space-4);
}

.catalog__model {
  font-weight: 700;
  font-size: var(--fs-15);
  line-height: var(--lh-20);
  color: var(--c-grey-5);
}

.catalog__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* рядки 16px, пункти 16.5 — різниця перекривається */
  grid-template-rows: repeat(3, 16px);
  column-gap: var(--space-12);
  row-gap: var(--space-8);
  width: 100%;
}

.catalog__spec {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 16.5px;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-42);
  white-space: nowrap;
}

.catalog__spec--wide {
  grid-column: 1 / -1;
}

.catalog__spec-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.catalog__price {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  padding-top: 13px;
  border-top: var(--stroke-1) solid var(--c-grey-91);
}

.catalog__price-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-9);
  line-height: var(--fs-12);
  letter-spacing: var(--ls-1-26);
  color: var(--c-grey-42);
}

.catalog__price-value {
  font-weight: 800;
  font-size: var(--fs-22);
  line-height: var(--lh-28);
  color: var(--c-grey-5);
}

.catalog__benefit {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  /* плашка ширша за контент (Figma 401:1824) — обрізається радіусом картки */
  align-self: stretch;
  margin-inline: -1.5px;
  padding: var(--space-8) var(--space-16);
  background-color: var(--c-yellow-58);
}

.catalog__benefit-label {
  font-weight: 700;
  font-size: var(--fs-11);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-0-44);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.catalog__benefit-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-11);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-0-44);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.catalog__cta {
  width: 281px;
  max-width: 100%;
  height: 48px;
  font-weight: 700;
  letter-spacing: var(--ls-0-6);
}

.catalog__item--request {
  gap: 0;
  padding: 0;
  height: 522px;
}

.catalog__placeholder-wrap {
  width: 100%;
  padding: var(--space-8);
}

.catalog__placeholder {
  position: relative;
  display: flex;
  height: 224px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  background-color: var(--c-grey-95);
}

.catalog__placeholder-img {
  width: 130px;
  height: 74px;
}

.catalog__placeholder-badge {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  /* обведення в Figma всередині: 5/17 мінус 1px бордера */
  padding: 4px 16px;
  border: var(--stroke-1) solid var(--c-grey-5);
  border-radius: var(--radius-8);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-10);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1);
  color: var(--c-grey-5);
}

.catalog__request-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-8) var(--space-16) 0;
}

.catalog__request-title {
  font-weight: 700;
  font-size: var(--fs-15);
  line-height: var(--lh-20);
  color: var(--c-grey-5);
}

.catalog__request-note {
  font-size: var(--fs-12);
  line-height: var(--lh-20);
  color: var(--c-grey-42);
}

.catalog__request-foot {
  width: 100%;
  margin-top: auto;
}

.catalog__item--request .catalog__benefit {
  margin-inline: 0;
}

.catalog__request-action {
  padding: var(--space-12) var(--space-16) var(--space-16);
}

.catalog__item--request .catalog__cta {
  width: 100%;
  height: 44px;
}

/* Мобільна — Figma 401:2503 · 390×726 */

@media (max-width: 1023px) {
  .catalog {
    padding-bottom: 36px;
  }

  .catalog .container {
    padding-inline: 0;
  }

  .catalog__inner {
    gap: 0;
  }

  .catalog__head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
    height: auto;
    padding-inline: var(--container-padding);
  }

  .catalog__tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .catalog__tabs::-webkit-scrollbar {
    display: none;
  }

  .catalog__list {
    align-items: flex-start;
    /* у макеті фрейм 577, але вміст 566 — решта обрізана */
    gap: var(--space-12);
    padding: var(--space-16) var(--container-padding) 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* snap рахується від краю скролпорту без padding — scroll-padding це компенсує */
    scroll-padding-inline: var(--container-padding);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .catalog__list::-webkit-scrollbar {
    display: none;
  }

  .catalog__item {
    flex: 0 0 272px;
    /* скидаємо десктопний max-width: flex-basis йому програє */
    max-width: none;
    padding: var(--space-8) 0;
    scroll-snap-align: start;
  }

  .catalog__photo {
    width: 254px;
    height: 250px;
  }

  .catalog__status {
    padding-inline: var(--space-12);
    font-size: var(--fs-9);
    line-height: var(--fs-12);
    letter-spacing: var(--ls-0-9);
  }

  .catalog__benefit {
    align-self: auto;
    width: 100%;
    margin-inline: 0;
  }

  .catalog__cta {
    width: 238px;
    height: 52px;
  }

  .catalog__item--request {
    height: auto;
    padding: 0;
  }

  .catalog__placeholder {
    height: 250px;
  }

  .catalog__placeholder-img {
    width: 32px;
    height: 32px;
  }

  .catalog__placeholder-badge {
    padding: 3px 11px;
    font-size: var(--fs-9);
    line-height: var(--fs-12);
    letter-spacing: var(--ls-0-9);
  }

  .catalog__item--request .catalog__cta {
    width: 100%;
    height: 48px;
  }
}

.catalog__placeholder-img--sm {
  display: none;
}

@media (max-width: 1023px) {
  .catalog__placeholder-img {
    display: none;
  }

  .catalog__placeholder-img--sm {
    display: block;
    width: 32px;
    height: 32px;
  }
}

/* порожня вкладка займає місце однієї картки */
.catalog__item--empty {
  justify-content: center;
  height: 522px;
}

.catalog__empty {
  color: var(--color-text-muted);
  text-align: center;
}

.catalog__item {
  position: relative;
}

.catalog__item .catalog__cta {
  position: static;
}

.catalog__item .catalog__cta::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
}

.catalog__item:not(.catalog__item--request):hover {
  cursor: pointer;
}

/* обведення лише для клавіатури: :focus-within ловить програмний focus() після «Показати ще» */
.catalog__item:has(:focus-visible) {
  outline: var(--stroke-2) solid var(--color-accent);
  outline-offset: 2px;
}

.catalog__list.is-loading {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.catalog__item {
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.catalog__item:hover {
  border-color: var(--c-grey-42);
  box-shadow: var(--shadow-hover);
}

.catalog__item:hover .catalog__cta {
  background-color: var(--c-grey-20);
}

.catalog__tab {
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast),
    background-color var(--transition-fast);
}

.catalog__tab:not([aria-selected="true"]):hover,
.catalog__tab:not([aria-selected="true"]):focus-visible {
  border-color: var(--c-grey-5);
  color: var(--c-grey-5);
}

.catalog__tab:focus-visible {
  outline: var(--stroke-2) solid var(--color-accent);
  outline-offset: 2px;
}


/* ── assets/css/sections/_checks.css ── */
/* Перевірки лота — Figma 401:1927 · 1440×368 */

.checks {
  padding-block: 74.5px;
  background-color: var(--c-white);
}

.checks__inner {
  display: flex;
  align-items: center;
  gap: 88px;
}

.checks__intro {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 14px;
  width: 573px;
}

.checks__title {
  max-width: 489px;
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-30);
  line-height: var(--lh-34-5);
  letter-spacing: var(--ls-tight-0-9);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.checks__lead {
  font-size: var(--fs-13-5);
  line-height: var(--lh-22-28);
  color: var(--c-grey-42);
}

.checks__list {
  flex: 1 0 0;
  min-width: 0;
  padding-left: 26px;
  border-left: var(--stroke-1) solid var(--c-grey-85);
}

.checks__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-18);
  /* обведення в Figma всередині: 21px мінус 1px бордера */
  padding-block: var(--space-20);
  border-top: var(--stroke-1) solid var(--c-grey-85);
}

.checks__item:first-child {
  padding-top: 0;
  border-top: none;
}

.checks__item:last-child {
  padding-bottom: 0;
}

.checks__num {
  flex-shrink: 0;
  width: 52px;
  padding-bottom: 11.63px;
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-28);
  line-height: var(--lh-34);
  letter-spacing: var(--ls-tight-0-84);
  color: var(--c-yellow-58);
}

.checks__text {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
}

.checks__item-title {
  font-weight: 700;
  font-size: var(--fs-15);
  line-height: var(--lh-18);
  color: var(--c-grey-5);
}

.checks__item-note {
  padding-bottom: 0.63px;
  font-size: var(--fs-12-5);
  line-height: var(--lh-20-63);
  color: var(--c-grey-42);
}

/* Мобільна — Figma 401:2649 · 390×668 */

@media (max-width: 1023px) {
  .checks {
    padding-block: 0 36px;
  }

  .checks__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
    padding: var(--space-24) var(--space-20);
    border-radius: var(--radius-20);
    background-color: var(--c-grey-95);
  }

  .checks__intro {
    display: contents;
  }

  .checks__title {
    max-width: none;
    font-size: var(--fs-24);
    line-height: var(--lh-28);
    letter-spacing: var(--ls-tight-0-72);
  }

  .checks__lead {
    font-size: var(--fs-16-body);
    line-height: var(--lh-19-5);
  }

  .checks__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding-left: 0;
    padding-top: var(--space-8);
    border-left: none;
  }

  .checks__item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding-block: 18px 0;
    border-top: 2px solid var(--c-grey-5);
  }

  .checks__item:first-child {
    padding-top: 18px;
    border-top: 2px solid var(--c-grey-5);
  }

  .checks__num {
    width: auto;
    padding-bottom: 0;
    font-size: var(--fs-24);
    line-height: var(--lh-30);
    letter-spacing: var(--ls-tight-0-72);
  }

  .checks__text {
    gap: var(--space-4);
  }

  .checks__item-title {
    padding-top: var(--space-4);
    line-height: var(--lh-18);
    font-size: var(--fs-14);
  }

  .checks__item-note {
    padding-bottom: 0;
    font-size: var(--fs-12);
    line-height: var(--lh-20);
  }
}


/* ── assets/css/sections/_about.css ── */
/* Про компанію та офіси — Figma 401:1955 · 1440×377 */

.about {
  padding-bottom: 64px;
  background-color: var(--c-white);
}

.about__panel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-48);
  padding: var(--space-40);
  border-radius: var(--radius-32);
  background-color: var(--c-grey-5);
}

.about__intro {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  /* колонка фіксована 233px (Figma 401:1957) — від неї висота панелі */
  min-height: 233px;
}

.about__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-30);
  line-height: var(--lh-34);
  letter-spacing: var(--ls-tight-0-9);
  text-transform: uppercase;
  color: var(--c-white);
}

.about__lead {
  padding-top: var(--space-16);
  font-size: var(--fs-14);
  line-height: var(--lh-24);
  color: var(--c-grey-66);
}

.about__auctions-label {
  padding-top: var(--space-28);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-10);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1-6);
  color: var(--c-grey-48);
}

.about__auctions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-24);
  min-height: 44px;
  padding-top: var(--space-16);
}

.about__auction-logo {
  flex-shrink: 0;
  height: 24px;
  width: auto;
}

.about__auction-logo--manheim {
  width: 28px;
  height: 28px;
}

/* знак Impact — лок-ап із підписом, на 24px не читається; висота як у найвищого */
.about__auction-logo--impact {
  width: 102px;
  height: 28px;
}

/* аукціон без логотипа: назва текстом у тому ж ряду */
.about__auction-name {
  flex-shrink: 0;
  font-weight: 700;
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  letter-spacing: var(--ls-0-9);
  color: var(--c-grey-66);
  white-space: nowrap;
}

.about__offices {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  gap: var(--space-16);
}

.about__office {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
}

.about__map {
  display: block;
  height: 140px;
  margin-block: var(--space-16) 9px;
  overflow: hidden;
  border-radius: var(--radius-20);
  background-color: var(--c-grey-89);
}

.about__map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-fast);
}

.about__map:hover .about__map-img,
.about__map:focus-visible .about__map-img {
  transform: scale(1.04);
}

.about__map:focus-visible {
  outline: var(--stroke-2) solid var(--color-accent);
  outline-offset: 3px;
}

.about__office-name {
  padding-top: var(--space-12);
  font-weight: 600;
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-white);
}

.about__office-address {
  padding-top: var(--space-3);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

.about__office-phone {
  padding-top: var(--space-3);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
}

.about__office-tel {
  color: var(--c-grey-79);
  transition: color var(--transition-fast);
}

.about__office-tel:hover,
.about__office-tel:focus-visible {
  color: var(--color-accent);
}

/* Мобільна — Figma 401:2677 · 390×728 */

@media (max-width: 1023px) {
  .about {
    padding-bottom: 36px;
  }

  .about__panel {
    flex-direction: column;
    align-items: stretch;
    gap: 12.6px;
    padding: 23px var(--space-20) 24.5px;
    border-radius: var(--radius-20);
  }

  .about__intro {
    display: contents;
  }

  .about__title {
    font-size: var(--fs-24);
    line-height: var(--lh-27-6);
    letter-spacing: var(--ls-tight-0-72);
  }

  .about__lead {
    padding-top: 0;
    font-size: var(--fs-13);
    line-height: var(--lh-22-1);
  }

  .about__auctions-label {
    padding-top: var(--space-12);
    line-height: var(--lh-13);
  }

  .about__auctions {
    min-height: 26px;
    gap: var(--space-20);
    padding-top: 0;
  }

  .about__auction-logo--copart  { width: 53.509px; height: 20px; }
  .about__auction-logo--iaa     { width: 39px; height: 24px; }
  .about__auction-logo--manheim { width: 26px; height: 26px; }
  .about__auction-logo--impact  { width: 80.1px; height: 22px; }

  .about__offices {
    flex-direction: column;
    gap: var(--space-20);
    padding-top: var(--space-12);
  }

  .about__office {
    gap: var(--space-3);
  }

  .about__map {
    height: 139px;
    margin-block: 0;
    border-radius: var(--radius-16);
  }

  .about__office-name {
    padding-top: 9px;
    line-height: var(--lh-15-5);
  }

  .about__office-address {
    padding-top: 0;
    line-height: var(--lh-14-5);
  }

  .about__office-phone {
    padding-top: 0;
    line-height: var(--lh-14-5);
  }
}

/* Модифікатор --geo: «Аукціони та географія» на «Про нас» — Figma 401:4687 · 401:5045 */

.about--geo .about__intro {
  /* колонка 216px — від неї висота панелі 296 */
  min-height: 216px;
}

.about--geo .about__auctions-label {
  padding-top: var(--space-32);
}

.about--geo .about__map {
  margin-block: 0;
}

.about--geo .about__office-address {
  padding-top: var(--space-4);
}

.about--geo .about__office-phone {
  padding-top: var(--space-4);
}

@media (max-width: 1023px) {
  .about--geo .about__panel {
    gap: 0;
    padding: 23px var(--space-20);
  }

  .about--geo .about__title {
    font-size: var(--fs-26);
    line-height: var(--lh-30);
    letter-spacing: var(--ls-tight-0-78);
  }

  .about--geo .about__lead {
    padding-top: var(--space-8);
  }

  .about--geo .about__auctions-label {
    padding-top: 25px;
  }

  .about--geo .about__auctions {
    min-height: 38px;
    padding-top: var(--space-12);
  }

  .about--geo .about__office-address,
  .about--geo .about__office-phone {
    padding-top: 0;
  }
}


/* ── assets/css/sections/_why.css ── */
/* Чому обирають нас — Figma 401:4517 · 1440×496 */

.why {
  padding-block: 64px;
  background-color: var(--c-white);
}

.why__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-48);
}

.why__intro {
  display: flex;
  width: 636px;
  flex-shrink: 0;
  flex-direction: column;
  gap: var(--space-16);
}

.why__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-34);
  line-height: var(--lh-40);
  letter-spacing: var(--ls-tight-1-02);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.why__lead {
  font-size: var(--fs-14);
  line-height: var(--lh-24);
  color: var(--c-grey-42);
}

.why__list {
  display: grid;
  flex: 1 0 0;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* рядки 176 з макета, minmax дозволяє вирости під довший текст */
  grid-auto-rows: minmax(176px, auto);
  align-items: start;
  gap: var(--space-16);
}

.why__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24);
  border-radius: var(--radius-20);
  background-color: var(--c-grey-95);
}

.why__item-title {
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: var(--lh-20);
  color: var(--c-grey-5);
}

.why__item-text {
  font-size: var(--fs-16-body);
  /* line-height з Figma: «normal» у браузері дає 19.36 */
  line-height: var(--lh-19);
  color: var(--c-grey-42);
}

/* Мобільна — Figma 401:4900 · 390×781 */

@media (max-width: 1023px) {
  .why {
    padding-block: 36px;
  }

  .why__inner {
    flex-direction: column;
    gap: var(--space-12);
  }

  .why__intro {
    width: auto;
    gap: var(--space-12);
  }

  .why__title {
    font-size: var(--fs-26);
    line-height: var(--lh-30);
    letter-spacing: var(--ls-tight-0-78);
  }

  .why__lead {
    font-size: var(--fs-13);
    line-height: var(--lh-22);
  }

  .why__list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--space-8);
    padding-top: var(--space-8);
  }

  .why__item {
    padding: var(--space-20);
    border-radius: var(--radius-16);
  }
}


/* ── assets/css/sections/_path.css ── */
/* Наш шлях — Figma 401:4544 · 1440×320; лінія й крапка таймлайну — псевдоелементи віхи */

.path {
  padding-bottom: 64px;
  background-color: var(--c-white);
}

.path__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.path__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
}

.path__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-34);
  line-height: var(--lh-44);
  letter-spacing: var(--ls-tight-1-02);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.path__note {
  max-width: 420px;
  padding-right: 12.19px;
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--c-grey-42);
}

.path__list {
  display: flex;
  gap: var(--space-24);
}

.path__item {
  position: relative;
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-8);
}

.path__item::before {
  content: "";
  position: absolute;
  top: 67px;
  right: -24px;
  left: 12px;
  height: 2px;
  background-color: var(--c-grey-5);
}

.path__item::after {
  content: "";
  position: absolute;
  top: 60px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-8);
  background-color: var(--c-grey-5);
}

.path__item--last::before {
  content: none;
}

.path__item--last::after {
  border: 4px solid var(--c-grey-5);
  background-color: var(--color-accent);
}

.path__year {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-40);
  line-height: var(--lh-40);
  letter-spacing: var(--ls-tight-1-6);
  color: var(--c-grey-5);
}

.path__item--last .path__year {
  color: var(--color-accent);
}

.path__name {
  /* 40px — смуга таймлайну (32) + другий gap колонки (8) */
  margin-top: 40px;
  padding-top: var(--space-8);
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: var(--lh-24);
  color: var(--c-grey-5);
}

.path__text {
  font-size: var(--fs-13);
  line-height: var(--lh-22);
  color: var(--c-grey-42);
}

/* Мобільна — Figma 401:4926 · 390×682 */

@media (max-width: 1023px) {
  .path {
    padding-bottom: 36px;
  }

  .path__inner {
    gap: var(--space-8);
  }

  .path__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
  }

  .path__title {
    font-size: var(--fs-26);
    line-height: var(--lh-34);
    letter-spacing: var(--ls-tight-0-78);
  }

  .path__note {
    max-width: none;
    padding-right: 0;
  }

  .path__list {
    position: relative;
    flex-direction: column;
    gap: 0;
    padding-top: var(--space-16);
    padding-left: var(--space-32);
  }

  .path__list::before {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 40px;
    left: 7px;
    width: 2px;
    background-color: var(--c-grey-5);
  }

  .path__item {
    padding-bottom: var(--space-28);
  }

  .path__item--last {
    padding-bottom: 0;
  }

  .path__item::before {
    content: none;
  }

  .path__item::after {
    top: 6px;
    left: -32px;
  }

  .path__year {
    font-size: var(--fs-28);
    line-height: var(--lh-28);
    letter-spacing: var(--ls-tight-1-12);
  }

  .path__name {
    margin-top: 0;
    padding-top: var(--space-4);
    font-size: var(--fs-17);
    line-height: var(--lh-22);
  }
}


/* ── assets/css/sections/_team.css ── */
/* Команда — Figma 401:4590 · 1440×1264; .team__list — display: contents для спільної сітки */

.team {
  padding-bottom: 64px;
  background-color: var(--c-white);
}

.team__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding: var(--space-40);
  border-radius: var(--radius-20);
  background-color: var(--c-grey-95);
}

.team__head {
  display: flex;
  align-items: center;
  gap: var(--space-48);
}

.team__title {
  flex: 1 0 0;
  min-width: 0;
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-30);
  line-height: var(--lh-34);
  letter-spacing: var(--ls-tight-0-9);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.team__note {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-24);
  border-radius: var(--radius-20);
  background-color: var(--c-grey-5);
}

.team__note-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: var(--space-2);
}

.team__note-text {
  font-weight: 500;
  font-size: var(--fs-15);
  line-height: var(--lh-24);
  color: var(--c-white);
}

.team__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-16);
}

.team__list {
  display: contents;
}

.team__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  overflow: hidden;
  padding-top: var(--space-8);
  border-radius: var(--radius-20);
  background-color: var(--c-white);
}

.team__photo {
  position: relative;
  width: 282px;
  max-width: 100%;
  /* пропорція замість висоти, щоб відсотки кадрування лишались вірними */
  aspect-ratio: 282 / 392;
  overflow: hidden;
  border-radius: var(--radius-12);
  background-color: var(--c-grey-85);
}

/* кадрування 1:1 з макетом; зсув кожного знімка — модифікатором */
.team__photo-img {
  position: absolute;
  max-width: none;
  height: auto;
}

.team__photo-img--a {
  width: 160.284%;
  top: -72.679%;
  left: -32.624%;
}

.team__photo-img--b {
  width: 244.681%;
  top: -177.78%;
  left: -80.496%;
}

.team__body {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-20) var(--space-20);
}

.team__name {
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: var(--lh-20);
  color: var(--c-grey-5);
}

.team__role {
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-42);
}

.team__join {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-24);
  border-radius: var(--radius-20);
  background-color: var(--c-grey-5);
}

.team__join::before,
.team__join::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-full);
}

.team__join::before {
  right: -32px;
  bottom: -32px;
  width: 160px;
  height: 160px;
  background-color: var(--c-grey-9);
}

.team__join::after {
  right: -8px;
  bottom: -8px;
  width: 96px;
  height: 96px;
  background-color: var(--c-grey-12);
}

.team__join-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.team__join-icon {
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  background-color: var(--color-accent);
}

.team__join-title {
  padding-top: var(--space-8);
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: var(--lh-20);
  color: var(--c-white);
}

.team__join-text {
  font-size: var(--fs-12);
  line-height: var(--lh-20);
  color: var(--c-grey-54);
}

.team__perks {
  display: flex;
  flex-direction: column;
  gap: 7.5px;
  padding-top: var(--space-12);
}

.team__perk {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-79);
}

.team__perk-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.team__cta {
  position: relative;
  z-index: 1;
  height: 44px;
  margin-top: auto;
  padding: 0;
  letter-spacing: var(--ls-0-6);
}

/* Мобільна — Figma 401:4965 · 390×882 */

@media (max-width: 1023px) {
  .team {
    padding-bottom: 36px;
  }

  .team .container {
    padding-inline: 0;
  }

  .team__panel {
    gap: var(--space-16);
    padding: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .team__head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
    padding-inline: var(--container-padding);
  }

  .team__title {
    font-size: var(--fs-26);
    line-height: var(--lh-30);
    letter-spacing: var(--ls-tight-0-78);
  }

  .team__note {
    gap: var(--space-12);
    padding: var(--space-20);
    border-radius: var(--radius-16);
  }

  .team__note-text {
    font-size: var(--fs-14);
    line-height: var(--lh-22);
  }

  .team__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .team__list {
    display: flex;
    align-items: stretch;
    gap: var(--space-12);
    padding: var(--space-20) var(--container-padding);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* snap рахується від краю скролпорту без padding — scroll-padding це компенсує */
    scroll-padding-inline: var(--container-padding);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .team__list::-webkit-scrollbar {
    display: none;
  }

  .team__item {
    flex: 0 0 152px;
    padding-bottom: var(--space-16);
    background-color: var(--c-grey-95);
    scroll-snap-align: start;
  }

  .team__photo {
    width: 136px;
    aspect-ratio: 136 / 160;
  }

  .team__photo-img--a {
    width: 161.03%;
    top: -86.625%;
    left: -30.882%;
  }

  .team__photo-img--b {
    width: 327.94%;
    top: -288.594%;
    left: -127.941%;
  }

  .team__body {
    padding: var(--space-8) var(--space-16) var(--space-16);
  }

  .team__name {
    font-size: var(--fs-15);
  }

  .team__join {
    margin-inline: var(--container-padding);
    padding: var(--space-40) var(--space-20) var(--space-24);
  }

  .team__join-title {
    font-size: var(--fs-17);
    line-height: var(--lh-22);
  }

  .team__join-text {
    font-size: var(--fs-13);
  }

  .team__perks {
    gap: var(--space-8);
    padding-block: var(--space-8) var(--space-12);
  }

  .team__perk {
    font-size: var(--fs-13);
    line-height: var(--lh-18);
  }

  .team__perk-icon {
    width: 16px;
    height: 16px;
  }

  .team__cta {
    height: 48px;
    margin-top: var(--space-8);
  }
}


/* ── assets/css/sections/_promo.css ── */
/* Дві дії наприкінці сторінки — Figma 401:4815 · 1440×280 */

.promo {
  padding-bottom: 64px;
  background-color: var(--c-white);
}

.promo__list {
  display: flex;
  gap: var(--space-32);
}

.promo__item {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-32);
  border-radius: var(--radius-20);
  background-color: var(--c-grey-95);
}

.promo__item--dark {
  background-color: var(--c-grey-5);
}

.promo__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-24);
  line-height: var(--lh-30);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.promo__item--dark .promo__title {
  color: var(--c-white);
}

.promo__text {
  padding-bottom: var(--space-12);
  font-size: var(--fs-16-body);
  /* line-height з Figma: «normal» у браузері дає 19.36 */
  line-height: var(--lh-19);
  color: var(--c-grey-42);
}

.promo__item--dark .promo__text {
  color: var(--c-grey-54);
}

.promo__button {
  height: 48px;
  padding-block: 0;
  letter-spacing: var(--ls-0-6);
}

.promo__button--ghost {
  font-weight: 700;
  color: var(--c-grey-5);
  border: var(--stroke-1) solid var(--c-grey-5);
}

.promo__button--ghost:hover,
.promo__button--ghost:focus-visible {
  color: var(--c-white);
  background-color: var(--c-grey-5);
}

/* Мобільна — Figma 401:5157 · 390×467 */

@media (max-width: 1023px) {
  .promo {
    padding-bottom: 36px;
  }

  .promo__list {
    flex-direction: column;
    gap: var(--space-12);
  }

  .promo__item {
    align-items: stretch;
    gap: var(--space-8);
    padding: var(--space-24) var(--space-20);
  }

  .promo__title {
    font-size: var(--fs-22);
    line-height: var(--lh-28);
  }

  .promo__text {
    padding-bottom: var(--space-8);
  }
}


/* ── assets/css/sections/_offices.css ── */
/* Офіси на карті — Figma 401:6281 · 1440×590 */

.offices {
  padding-top: var(--space-48);
  background-color: var(--c-white);
}

.offices__list {
  display: flex;
  align-items: stretch;
  gap: var(--space-24);
}

.offices__item {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-20);
}

.offices__map {
  display: block;
  overflow: hidden;
  height: 280px;
  background-color: var(--c-grey-89);
}

.offices__map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-fast);
}

.offices__map:hover .offices__map-img,
.offices__map:focus-visible .offices__map-img {
  transform: scale(1.03);
}

.offices__map:focus-visible {
  outline: var(--stroke-2) solid var(--color-accent);
  outline-offset: -2px;
}

.offices__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
}

.offices__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.offices__city {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-24);
  line-height: var(--lh-30);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.offices__badge {
  flex-shrink: 0;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-8);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-10);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1);
  text-transform: uppercase;
  color: var(--c-grey-5);
  background-color: var(--color-accent);
}

.offices__badge--muted {
  border: var(--stroke-1) solid var(--c-grey-78);
  color: var(--c-grey-29);
  background-color: transparent;
}

.offices__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

.offices__row-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: var(--space-2);
}

.offices__row-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-1);
}

/* inset box-shadow, а не border: border зсунув би картку на 1px */
.offices__address {
  align-self: flex-start;
  box-shadow: inset 0 -1px 0 var(--c-grey-78);
  font-weight: 500;
  font-size: var(--fs-15);
  line-height: var(--lh-20);
  color: var(--c-grey-5);
  transition: box-shadow var(--transition-fast);
}

.offices__address:hover,
.offices__address:focus-visible {
  box-shadow: inset 0 -1px 0 var(--c-grey-5);
}

.offices__hint {
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

.offices__hours {
  font-size: var(--fs-14);
  line-height: var(--lh-22);
  color: var(--c-grey-42);
}

.offices__row--address {
  padding-top: var(--space-4);
}

.offices__actions {
  display: flex;
  gap: var(--space-8);
  padding-top: var(--space-8);
}

.offices__call,
.offices__book {
  display: inline-flex;
  flex: 1 0 0;
  min-width: 0;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  border-radius: var(--radius-12);
}

.offices__call {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-white);
  background-color: var(--c-grey-5);
  transition: background-color var(--transition-fast);
}

.offices__call:hover,
.offices__call:focus-visible {
  background-color: var(--c-grey-20);
}

.offices__call-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.offices__book {
  padding: 0;
  border: var(--stroke-1) solid var(--c-grey-5);
  font-weight: 700;
  letter-spacing: var(--ls-0-6);
  color: var(--c-grey-5);
}

.offices__book:hover,
.offices__book:focus-visible {
  color: var(--c-white);
  background-color: var(--c-grey-5);
}

/* Мобільна — Figma 401:6564 · 390×1068 */

@media (max-width: 1023px) {
  .offices {
    padding-top: var(--space-32);
  }

  /* у колонці `flex: 1 0 0` задав би базову висоту 0 */
  .offices__list {
    flex-direction: column;
    gap: var(--space-16);
  }

  .offices__item {
    flex: 0 0 auto;
  }

  .offices__map {
    height: 200px;
    flex-shrink: 0;
  }

  .offices__body {
    gap: var(--space-8);
    padding: var(--space-20);
  }

  .offices__row--address {
    padding-top: var(--space-8);
  }

  .offices__row--hours {
    padding-block: var(--space-4) var(--space-12);
  }

  .offices__actions {
    flex-direction: column;
    gap: var(--space-8);
    padding-top: 0;
  }

  .offices__call,
  .offices__book {
    flex: 0 0 auto;
  }
}

.offices__address {
  transition: color var(--transition-fast);
}

.offices__address:hover,
.offices__address:focus-visible {
  color: var(--c-grey-5);
  text-decoration: underline;
}


/* ── assets/css/sections/_messengers.css ── */
/* Напишіть у месенджер — Figma 401:6408 · 1440×240 */

.messengers {
  padding-top: var(--space-48);
  background-color: var(--c-white);
}

.messengers__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.messengers__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-32);
  line-height: var(--lh-40);
  letter-spacing: var(--ls-tight-0-96);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.messengers__lead {
  font-size: var(--fs-14);
  line-height: var(--lh-22);
  color: var(--c-grey-42);
}

.messengers__list {
  display: flex;
  align-items: stretch;
  gap: var(--space-16);
  padding-top: var(--space-16);
}

.messengers__list-item {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
}

.messengers__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-24);
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-20);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.messengers__item:hover,
.messengers__item:focus-visible {
  border-color: var(--c-grey-5);
}

.messengers__icon {
  display: flex;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  background-color: var(--c-grey-95);
}

.messengers__meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
}

.messengers__name {
  font-weight: 700;
  font-size: var(--fs-15);
  line-height: var(--lh-20);
  color: var(--c-grey-5);
}

.messengers__handle {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

/* Мобільна — Figma 401:6681 · 390×294 */

@media (max-width: 1023px) {
  .messengers {
    padding-top: var(--space-32);
  }

  .messengers__title {
    font-size: var(--fs-26);
    line-height: var(--lh-34);
    letter-spacing: var(--ls-tight-0-78);
  }

  .messengers__lead {
    font-size: var(--fs-13);
    line-height: var(--lh-20);
  }

  .messengers__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    padding-top: var(--space-8);
  }

  .messengers__item {
    gap: var(--space-12);
    padding: var(--space-16);
    border-radius: var(--radius-16);
  }

  .messengers__icon {
    width: 40px;
    height: 40px;
  }

  .messengers__icon-img {
    width: 20px;
    height: 20px;
  }

  .messengers__meta {
    gap: var(--space-2);
  }

  .messengers__name {
    font-size: var(--fs-14);
    line-height: var(--lh-18);
  }

  .messengers__handle {
    font-size: var(--fs-11);
    line-height: var(--lh-14);
  }
}

.messengers__item {
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.messengers__item:hover,
.messengers__item:focus-visible {
  border-color: var(--c-grey-42);
  box-shadow: var(--shadow-hover);
}


/* ── assets/css/sections/_delivery.css ── */
/* Доставляємо по всій Україні — Figma 401:6448 · 1440×242 */

.delivery {
  padding-top: var(--space-48);
  background-color: var(--c-white);
}

.delivery__panel {
  display: flex;
  align-items: center;
  gap: var(--space-48);
  padding: var(--space-32) 60px;
  border-radius: var(--radius-20);
  background-color: var(--c-grey-95);
}

.delivery__intro {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-8);
}

.delivery__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-24);
  line-height: var(--lh-30);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.delivery__text {
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--c-grey-42);
}

.delivery__list {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: stretch;
  gap: var(--space-16);
}

.delivery__item {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-20);
  border-radius: var(--radius-16);
  background-color: var(--c-white);
}

.delivery__city {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-24);
  line-height: var(--lh-30);
  color: var(--c-grey-5);
}

.delivery__note {
  font-size: var(--fs-12);
  line-height: var(--lh-18);
  color: var(--c-grey-42);
}

/* Мобільна — Figma 401:6721 · 390×514 */

@media (max-width: 1023px) {
  .delivery {
    padding-top: var(--space-32);
  }

  .delivery__panel {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    padding: var(--space-24) var(--space-20);
  }

  .delivery__title {
    font-size: var(--fs-22);
    line-height: var(--lh-28);
  }

  .delivery__list {
    flex-direction: column;
    gap: var(--space-8);
    padding-top: var(--space-8);
  }

  /* у колонці `flex: 1 0 0` задав би базову висоту 0 */
  .delivery__intro,
  .delivery__list,
  .delivery__item {
    flex: 0 0 auto;
  }

  .delivery__item {
    gap: var(--space-4);
    padding: var(--space-16);
  }

  .delivery__city {
    font-size: var(--fs-20);
    line-height: var(--lh-26);
  }
}


/* ── assets/css/sections/_lead.css ── */
/* Зв'яжіться з нами — Figma 401:6471 · 1440×572; перемикач ролі дублює .faq__role з іншими розмірами */

.lead {
  padding-block: var(--space-48) 64px;
  background-color: var(--c-white);
}

.lead__panel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-48);
  padding: var(--space-40);
  border-radius: var(--radius-20);
  background-color: var(--c-grey-5);
}

.lead__intro {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-16);
}

.lead__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-32);
  line-height: var(--lh-36);
  letter-spacing: var(--ls-tight-0-96);
  text-transform: uppercase;
  color: var(--c-white);
}

.lead__text {
  max-width: 440px;
  font-size: var(--fs-14);
  line-height: var(--lh-24);
  color: var(--c-grey-66);
}

.lead__perks {
  display: flex;
  flex-direction: column;
  gap: 11.5px;
  padding-top: var(--space-16);
}

.lead__perk {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--fs-14);
  line-height: var(--lh-22);
  color: var(--c-grey-79);
}

.lead__perk-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.lead__form {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-12);
}

.lead__roles {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
}

.lead__role {
  position: relative;
}

.lead__role-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lead__role-label {
  display: flex;
  width: 293px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: var(--stroke-1) solid var(--c-grey-27);
  border-radius: var(--radius-12);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-0-48);
  text-transform: uppercase;
  text-align: center;
  color: var(--c-grey-79);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}

/* активна кнопка в макеті без обведення — звідси на 2px вужча рамка */
.lead__role-input:checked + .lead__role-label {
  width: 291px;
  font-weight: 700;
  color: var(--c-grey-5);
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

.lead__role-input:focus-visible + .lead__role-label {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.lead__control {
  height: 52px;
  /* обведення в Figma всередині: 16px мінус 1px бордера */
  padding-inline: 15px;
  border-color: var(--c-grey-20);
  font-size: var(--fs-14);
  color: var(--c-white);
}

.lead__control::placeholder {
  color: var(--c-grey-48);
}

.lead__control:hover,
.lead__control:focus-visible {
  border-color: var(--c-white);
}

.lead__textarea {
  height: 96px;
  padding: 15px;
  resize: vertical;
}

.lead__submit {
  width: 100%;
  height: 56px;
  padding-block: 0;
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  letter-spacing: var(--ls-0-65);
}

.lead__note {
  font-size: var(--fs-12);
  line-height: var(--lh-20);
  color: var(--c-grey-42);
}

.lead__note-link {
  text-decoration: underline;
}

.lead__note-link:hover,
.lead__note-link:focus-visible {
  color: var(--c-white);
}

/* Мобільна — Figma 401:6743 · 390×738 */

@media (max-width: 1023px) {
  .lead {
    padding-block: var(--space-32);
  }

  .lead__panel {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    padding: var(--space-24) var(--space-20);
  }

  .lead__intro {
    display: contents;
  }

  .lead__title {
    font-size: var(--fs-26);
    line-height: var(--lh-30);
    letter-spacing: var(--ls-tight-0-78);
  }

  .lead__text {
    max-width: none;
    padding-top: var(--space-4);
    font-size: var(--fs-13);
    line-height: var(--lh-22);
  }

  .lead__perks {
    gap: var(--space-8);
    padding-top: var(--space-12);
  }

  .lead__perk {
    font-size: var(--fs-13);
    line-height: var(--lh-20);
  }

  .lead__perk-icon {
    width: 16px;
    height: 16px;
  }

  .lead__form {
    display: contents;
  }

  .lead__roles {
    gap: var(--space-8);
    padding-top: var(--space-16);
  }

  /* на 320px дві кнопки по 150px не вміщаються — дозволяємо стискатись */
  .lead__role {
    flex: 0 1 auto;
    min-width: 0;
  }

  .lead__role-label {
    width: 152px;
    max-width: 100%;
  }

  .lead__role-input:checked + .lead__role-label {
    width: 150px;
    max-width: 100%;
  }

  .lead__textarea {
    height: 88px;
  }

  .lead__note {
    padding-top: var(--space-4);
  }
}


/* ── assets/css/sections/_blog-filter.css ── */
/* Фільтр рубрик — Figma 401:5425 · 1440×86; активний чіп = поточний term архіву */

.blog-filter {
  padding-block: var(--space-20) 21px;
  border-bottom: var(--stroke-1) solid var(--c-grey-91);
  background-color: var(--c-white);
}

.blog-filter__list {
  display: flex;
  flex-wrap: wrap;
  /* row-gap — страховка на проміжних ширинах */
  gap: var(--space-8);
}

.blog-filter__item {
  display: flex;
}

.blog-filter__chip {
  display: inline-flex;
  height: 44px;
  align-items: center;
  padding-inline: var(--space-24);
  border: var(--stroke-1) solid var(--c-grey-82);
  border-radius: var(--radius-12);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-0-72);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-grey-29);
  transition: border-color var(--transition-fast), color var(--transition-fast),
    background-color var(--transition-fast);
}

.blog-filter__chip:hover,
.blog-filter__chip:focus-visible {
  border-color: var(--c-grey-5);
  color: var(--c-grey-5);
}

.blog-filter__chip--active {
  font-weight: 700;
  color: var(--c-white);
  border-color: var(--c-grey-5);
  background-color: var(--c-grey-5);
}

/* Мобільна — Figma 401:5603 · 390×78 */

@media (max-width: 1023px) {
  .blog-filter {
    padding-block: var(--space-16) 17px;
  }

  .blog-filter .container {
    padding-inline: 0;
  }

  .blog-filter__list {
    flex-wrap: nowrap;
    padding-inline: var(--container-padding);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* snap рахується від краю скролпорту без padding — scroll-padding це компенсує */
    scroll-padding-inline: var(--container-padding);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .blog-filter__list::-webkit-scrollbar {
    display: none;
  }

  .blog-filter__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .blog-filter__chip {
    padding-inline: var(--space-20);
  }
}


/* ── assets/css/sections/_blog-featured.css ── */
/* Головна стаття — Figma 401:5260 · 1440×380 */

.blog-featured {
  padding-top: var(--space-32);
  background-color: var(--c-white);
}

.blog-featured__card {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-20);
}

/* 56.4492% = 744/1318: відсоток, щоб колонка стискалась плавно на 1024–1439 */
.blog-featured__media {
  width: 56.4492%;
  flex-shrink: 0;
  padding: var(--space-8);
}

.blog-featured__photo {
  aspect-ratio: 728 / 298;
  overflow: hidden;
  border-radius: var(--radius-12);
  background-color: var(--c-grey-85);
}

.blog-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
}

.blog-featured__body {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-40) 60px var(--space-40) var(--space-24);
}

.blog-featured__meta {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.blog-featured__badge {
  flex-shrink: 0;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-8);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-10);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1);
  text-transform: uppercase;
  color: var(--c-grey-5);
  background-color: var(--color-accent);
}

.blog-featured__note {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

.blog-featured__title {
  padding-top: var(--space-16);
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-32);
  line-height: var(--lh-36);
  letter-spacing: var(--ls-tight-0-96);
  color: var(--c-grey-5);
}

.blog-featured__excerpt {
  padding-top: var(--space-12);
  font-size: var(--fs-14);
  line-height: var(--lh-24);
  color: var(--c-grey-42);
}

.blog-featured__actions {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-top: var(--space-24);
}

.blog-featured__link {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-24);
  border-radius: var(--radius-12);
  font-weight: 700;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-0-6);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-white);
  background-color: var(--c-grey-5);
  transition: background-color var(--transition-fast);
}

.blog-featured__link:hover,
.blog-featured__link:focus-visible {
  background-color: var(--c-grey-20);
}

.blog-featured__date {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

/* Мобільна — Figma 401:5459 · 350×576 */

@media (max-width: 1023px) {
  .blog-featured {
    padding-top: 23px;
  }

  .blog-featured__card {
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    padding-top: var(--space-8);
  }

  .blog-featured__media {
    width: 332px;
    max-width: 100%;
    flex: 0 0 auto;
    padding: 0;
  }

  .blog-featured__photo {
    aspect-ratio: 332 / 208;
  }

  .blog-featured__body {
    width: 100%;
    flex: 0 0 auto;
    gap: var(--space-10);
    padding: var(--space-12) var(--space-20) var(--space-24);
  }

  .blog-featured__meta {
    flex-wrap: wrap;
    gap: var(--space-8);
  }

  .blog-featured__title {
    padding-top: var(--space-2);
    font-size: var(--fs-24);
    line-height: var(--lh-30);
    letter-spacing: var(--ls-tight-0-72);
  }

  .blog-featured__excerpt {
    padding-top: 0;
    padding-bottom: var(--space-6);
    font-size: var(--fs-13);
    line-height: var(--lh-22);
  }

  .blog-featured__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-10);
    padding-top: 0;
  }

  .blog-featured__link {
    color: var(--color-accent);
  }

  .blog-featured__date {
    padding-top: var(--space-2);
  }
}

.blog-featured__card {
  position: relative;
  transition: box-shadow var(--transition-fast);
}

.blog-featured__link {
  position: static;
}

.blog-featured__link::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
}

.blog-featured__card:hover {
  box-shadow: var(--shadow-hover);
  cursor: pointer;
}

/* обведення лише для клавіатури: :focus-within ловить програмний focus() після «Показати ще» */
.blog-featured__card:has(:focus-visible) {
  outline: var(--stroke-2) solid var(--color-accent);
  outline-offset: 2px;
}

/* 768–1023: фото на всю ширину картки з пропорцією ПК */
@media (min-width: 768px) and (max-width: 1023px) {
  .blog-featured__media {
    width: 100%;
    padding-inline: var(--space-8);
  }

  .blog-featured__photo {
    aspect-ratio: 728 / 298;
  }
}

/* ≥1024: пропорція з макета — мінімум, далі фото тягнеться на висоту картки */
@media (min-width: 1024px) {
  .blog-featured__card {
    align-items: stretch;
  }

  .blog-featured__media {
    display: flex;
    flex-direction: column;
  }

  /* картинка поза потоком, інакше її висота роздуває картку */
  .blog-featured__photo {
    position: relative;
    flex: 1 0 auto;
    min-height: 0;
  }

  .blog-featured__img {
    position: absolute;
    inset: 0;
  }
}


/* ── assets/css/sections/_blog-list.css ── */
/* Список статей — Figma 401:5284 · 1440×1094 */

.blog-list {
  padding-block: var(--space-32) 64px;
  background-color: var(--c-white);
}

.blog-list__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px var(--space-24);
}

.blog-list__grid > li {
  display: flex;
}

.blog-list__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  margin-top: var(--space-32);
}

.blog-list__counter {
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-grey-42);
}

.blog-list__more {
  height: 48px;
  padding-inline: var(--space-32);
  border: var(--stroke-1) solid var(--c-grey-5);
  font-weight: 700;
  letter-spacing: var(--ls-0-6);
  color: var(--c-grey-5);
}

.blog-list__more:hover,
.blog-list__more:focus-visible {
  color: var(--c-white);
  background-color: var(--c-grey-5);
}

/* Мобільна — Figma 401:5477 + 401:5563 */

@media (max-width: 1023px) {
  .blog-list {
    padding-block: var(--space-16) 0;
  }

  .blog-list__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  .blog-list__grid > li {
    flex: 0 0 auto;
  }

  /* картка на всю колонку, інакше на 768–1023 бере ширину вмісту */
  .blog-list__grid .post-card {
    width: 100%;
  }

  .blog-list__foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
    margin-top: 36px;
  }

  .blog-list__counter {
    text-align: center;
  }

  .blog-list__more {
    width: 100%;
    padding-inline: 0;
  }
}


/* ── assets/css/sections/_blog-cta.css ── */
/* CTA під списком статей — Figma 401:5376 · 1440×206 */

.blog-cta {
  padding-bottom: 64px;
  background-color: var(--c-white);
}

/* на 404 панель іде одразу після темної шапки — потрібен власний відступ */
@media (min-width: 1024px) {
  .page-hero + .blog-cta {
    padding-top: 64px;
  }
}

.blog-cta__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-48);
  padding: var(--space-32) 60px;
  border-radius: var(--radius-20);
  background-color: var(--c-grey-5);
}

.blog-cta__text {
  display: flex;
  min-width: 560px;
  flex-direction: column;
  gap: var(--space-8);
}

.blog-cta__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-24);
  line-height: var(--lh-30);
  text-transform: uppercase;
  color: var(--c-white);
}

.blog-cta__note {
  max-width: 560px;
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--c-grey-54);
}

.blog-cta__form {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-8);
}

.blog-cta__control {
  width: 224px;
  height: 48px;
  /* обведення в Figma всередині: 16px мінус 1px бордера */
  padding-inline: 15px;
  border-color: var(--c-grey-27);
  color: var(--c-white);
}

.blog-cta__control::placeholder {
  color: var(--c-grey-48);
}

.blog-cta__control:hover,
.blog-cta__control:focus-visible {
  border-color: var(--c-white);
}

.blog-cta__submit {
  height: 48px;
  padding-block: 0;
  letter-spacing: var(--ls-0-6);
}

/* Мобільна — Figma 401:5568 · 350×301 */

@media (max-width: 1023px) {
  .blog-cta {
    padding-block: var(--space-32) 36px;
  }

  .blog-cta__panel {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    padding: var(--space-24) var(--space-20);
  }

  .blog-cta__text {
    min-width: 0;
    gap: var(--space-8);
  }

  .blog-cta__title {
    font-size: var(--fs-22);
    line-height: var(--lh-28);
  }

  .blog-cta__note {
    max-width: none;
    padding-bottom: var(--space-12);
    font-size: var(--fs-16-body);
    line-height: var(--lh-19);
  }

  .blog-cta__form {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
  }

  .blog-cta__field {
    width: 100%;
  }

  .blog-cta__control {
    width: 100%;
    height: 52px;
    font-size: var(--fs-14);
  }

  .blog-cta__submit {
    height: 52px;
  }
}


/* ── assets/css/sections/_post-head.css ── */
/* Шапка статті — Figma 401:5659 · 1440×327 */

.post-head {
  padding-block: var(--space-40) var(--space-48);
  background-color: var(--c-grey-5);
}

.post-head__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.post-head__crumbs {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-42);
}

.post-head__crumbs a:hover,
.post-head__crumbs a:focus-visible {
  color: var(--c-white);
}

.post-head__meta {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-top: var(--space-8);
}

.post-head__badge {
  flex-shrink: 0;
  padding: var(--space-6) 14px;
  border-radius: var(--radius-8);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-10);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1);
  text-transform: uppercase;
  color: var(--c-grey-5);
  background-color: var(--color-accent);
}

.post-head__date {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

/* заголовок — стиль із мобільного макета (30/34, Extra Bold Italic): у ПК-макеті він помилково 16px Regular */
.post-head__title {
  padding-top: var(--space-4);
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-30);
  line-height: var(--lh-34);
  letter-spacing: var(--ls-tight-0-9);
  color: var(--c-white);
}

.post-head__lead {
  font-size: var(--fs-16-body);
  /* line-height з Figma: «normal» у браузері дає 19.36 */
  line-height: var(--lh-19);
  color: var(--c-grey-66);
}

.post-head__author {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-top: var(--space-16);
}

.post-head__avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: 50% 24%;
  border-radius: var(--radius-full);
  background-color: var(--c-grey-14b);
}

.post-head__author-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}

.post-head__author-name {
  font-weight: 600;
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  color: var(--c-white);
}

.post-head__author-note {
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

/* Мобільна — Figma 401:5941 · 390×380 */

@media (max-width: 1023px) {
  .post-head {
    padding-block: var(--space-20) var(--space-28);
  }

  .post-head__inner {
    gap: var(--space-12);
  }

  .post-head__meta {
    flex-wrap: wrap;
    gap: var(--space-8);
    padding-top: var(--space-4);
  }

  .post-head__title {
    font-size: var(--fs-30);
    line-height: var(--lh-34);
  }

  .post-head__author {
    gap: var(--space-12);
    padding-top: var(--space-12);
  }

  .post-head__avatar {
    width: 44px;
    height: 44px;
  }

  .post-head__author-name {
    font-size: var(--fs-13);
  }
}


/* ── assets/css/sections/_post-cover.css ── */
/* Обкладинка статті — Figma 401:5681 · 1440×508 */

.post-cover {
  padding-top: var(--space-40);
  background-color: var(--c-white);
}

.post-cover__frame {
  aspect-ratio: 800 / 440;
  overflow: hidden;
  border-radius: var(--radius-20);
  background-color: var(--c-grey-85);
}

.post-cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
}

.post-cover__caption {
  padding-top: var(--space-12);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

/* Мобільна — Figma 401:5962 · 390×236 */

@media (max-width: 1023px) {
  .post-cover {
    padding-top: var(--space-24);
  }

  .post-cover__frame {
    aspect-ratio: 350 / 188;
  }

  .post-cover__caption {
    padding-top: var(--space-8);
  }
}


/* ── assets/css/sections/_post-body.css ── */
/* Тіло статті — Figma 401:5688 · 1440×3687; вміст із Ґутенберґа, тому селектори за тегами */

.post-body {
  padding-block: var(--space-48) 75px;
  background-color: var(--c-white);
}

.post__body {
  font-size: var(--fs-17);
  line-height: var(--lh-30);
  color: var(--c-grey-16);
}

/* обнуляємо відступи списків у :where() — інакше специфічність переб'є ритм нижче */
:where(.post__body ul, .post__body ol, .post__body li) {
  margin: 0;
  padding-left: 0;
}

.post__body > * + * {
  margin-top: var(--space-12);
}

/* власні блоки ACF — більший крок; специфічність `.post__body > .x` перебиває базовий */
.post__body > .post-table,
.post__body > .post-verdict,
.post__body > .post-faq   { margin-top: var(--space-32); }
.post__body > .post-video { margin-top: 26px; }
.post__body > .post-cta   { margin-top: var(--space-40); }
.post__body > .post-car   { margin-top: var(--space-16); }

.post__body > p {
  font-size: var(--fs-17);
  line-height: var(--lh-30);
  color: var(--c-grey-16);
}

.post__body > h2 + p {
  padding-top: var(--space-4);
}

.post__body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post__body a:hover,
.post__body a:focus-visible {
  color: var(--c-grey-5);
}

.post__body strong,
.post__body b {
  font-weight: 700;
  color: var(--c-grey-5);
}

.post__body em,
.post__body i {
  font-style: italic;
}

.post__body > h2 {
  padding-top: var(--space-28);
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-30);
  line-height: var(--lh-38);
  letter-spacing: var(--ls-tight-0-9);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.post__body > h3 {
  padding-top: var(--space-20);
  font-weight: 700;
  font-size: var(--fs-22);
  line-height: var(--lh-28);
  color: var(--c-grey-5);
}

.post__body > h4 {
  padding-top: var(--space-16);
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: var(--lh-24);
  color: var(--c-grey-5);
}

.post__body > ul,
.post__body > ol {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.post__body > ul {
  gap: var(--space-12);
  padding-top: var(--space-12);
}

.post__body > ul > li {
  position: relative;
  padding-left: 36px;
}

/* маркер-галочка псевдоелементом: <li> з Ґутенберґа без вкладених елементів */
.post__body > ul > li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 20px;
  height: 20px;
  background-image: url("../icons/check-green.svg");
  background-repeat: no-repeat;
  background-size: 20px 20px;
}

.post__body > ol {
  gap: var(--space-16);
  padding-block: var(--space-20);
  counter-reset: post-step;
}

.post__body > ol > li {
  position: relative;
  padding-left: 64px;
  counter-increment: post-step;
}

.post__body > ol > li::before {
  content: counter(post-step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-28);
  line-height: var(--lh-28);
  letter-spacing: var(--ls-tight-0-84);
  color: var(--color-accent);
}

.post__body > blockquote {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-32);
  padding-block: var(--space-8);
  padding-left: var(--space-28);
  border-left: 4px solid var(--color-accent);
}

.post__body > blockquote p {
  font-weight: 600;
  font-style: italic;
  font-size: var(--fs-22);
  line-height: var(--lh-32);
  color: var(--c-grey-5);
}

.post__body > blockquote cite {
  font-style: normal;
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-grey-54);
}

.post__body > figure:not([class]) > img,
.post__body > .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-16);
}

.post__body > figure:not([class]) > figcaption,
.post__body > .wp-block-image figcaption {
  padding-top: var(--space-8);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

.post__body > .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin-top: 26px;
}

.post__body > .wp-block-gallery figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.post__body > .wp-block-gallery img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius-16);
  background-color: var(--c-grey-85);
}

.post__body > .wp-block-gallery figcaption {
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

/* Решта блоків редактора */

.post__body > hr {
  height: 1px;
  margin-block: var(--space-32);
  border: 0;
  background-color: var(--c-grey-91);
}

.post__body > pre {
  overflow-x: auto;
  padding: var(--space-20);
  border-radius: var(--radius-12);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: var(--lh-22);
  background-color: var(--c-grey-95);
}

.post__body code {
  padding: 2px var(--space-5);
  border-radius: var(--radius-8);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  background-color: var(--c-grey-95);
}

/* Мобільна — Figma 401:5968 · 390×3722 */

@media (max-width: 1023px) {
  .post-body {
    padding-block: var(--space-32) 0;
  }

  .post__body > * + * {
    margin-top: var(--space-10);
  }

  .post__body > h2 {
    margin-top: 18px;
    padding-top: 22px;
  }

  .post__body > h3 {
    margin-top: 17px;
    padding-top: 18px;
  }

  .post__body > ul {
    margin-top: 15px;
    padding-top: 14px;
  }

  .post__body > ol {
    padding-block: 18px;
  }

  .post__body > blockquote,
  .post__body > .post-table,
  .post__body > .post-verdict,
  .post__body > .post-faq,
  .post__body > .post-cta { margin-top: var(--space-28); }

  .post__body > .wp-block-gallery,
  .post__body > .post-video { margin-top: 22px; }

  .post__body > .post-car { margin-top: var(--space-12); }

  .post__body,
  .post__body > p {
    font-size: var(--fs-16-body);
    line-height: var(--lh-19);
  }

  .post__body > h2 {
    font-size: var(--fs-24);
    line-height: var(--lh-30);
    letter-spacing: var(--ls-tight-0-72);
  }

  .post__body > h3 {
    font-size: var(--fs-20);
    line-height: var(--lh-26);
  }

  .post__body > ul,
  .post__body > ol {
    font-size: var(--fs-15);
    line-height: var(--lh-26);
  }

  .post__body > ul > li {
    padding-left: 32px;
  }

  .post__body > ul > li::before {
    top: 4px;
  }

  .post__body > ol > li {
    padding-left: 52px;
  }

  .post__body > ol > li::before {
    width: 36px;
    font-size: var(--fs-26);
    line-height: var(--lh-26);
    letter-spacing: var(--ls-tight-0-78);
  }

  .post__body > blockquote {
    gap: var(--space-8);
    padding-left: var(--space-24);
  }

  .post__body > blockquote p {
    font-size: var(--fs-19);
    line-height: var(--lh-28);
  }

  .post__body > .wp-block-gallery {
    gap: var(--space-12);
  }

  .post__body > .wp-block-gallery img {
    height: 130px;
  }
}


/* ── assets/css/sections/_post-related.css ── */
/* Читати далі — Figma 401:5866 · 1440×568 */

.post-related {
  padding-top: 64px;
  /* нижній відступ як у решти завершальних секцій (blog-cta, faq, lead) */
  padding-bottom: 64px;
  background-color: var(--c-white);
}

.post-related__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
}

.post-related__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-28);
  line-height: var(--lh-36);
  letter-spacing: var(--ls-tight-0-84);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.post-related__all {
  flex-shrink: 0;
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-5);
}

.post-related__all:hover,
.post-related__all:focus-visible {
  color: var(--c-grey-42);
}

.post-related__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
  margin-top: var(--space-24);
}

.post-related__list > li {
  display: flex;
}

/* Мобільна — Figma 401:6142 · 390×512 */

@media (max-width: 1023px) {
  .post-related {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .post-related .container {
    padding-inline: 0;
  }

  .post-related__head {
    padding-inline: var(--container-padding);
  }

  .post-related__title {
    font-size: var(--fs-24);
    line-height: var(--lh-30);
    letter-spacing: var(--ls-tight-0-72);
  }

  .post-related__list {
    display: flex;
    align-items: stretch;
    gap: var(--space-12);
    margin-top: var(--space-16);
    padding: 0 var(--container-padding);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* snap рахується від краю скролпорту без padding — scroll-padding це компенсує */
    scroll-padding-inline: var(--container-padding);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .post-related__list::-webkit-scrollbar {
    display: none;
  }

  .post-related__list > li {
    flex: 0 0 264px;
    scroll-snap-align: start;
  }
}


/* ── assets/css/sections/_catalog-hero.css ── */
/* Шапка сторінки «Каталог» — Figma 401:3633 · 1440×268 */

.catalog-hero {
  padding-block: var(--space-40) var(--space-32);
  background-color: var(--c-grey-5);
}

.catalog-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.catalog-hero__crumbs {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-42);
}

.catalog-hero__crumbs a:hover,
.catalog-hero__crumbs a:focus-visible {
  color: var(--c-white);
}

.catalog-hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-48);
}

.catalog-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.catalog-hero__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-44);
  line-height: var(--lh-48);
  letter-spacing: var(--ls-tight-1-32);
  text-transform: uppercase;
  color: var(--c-white);
}

.catalog-hero__lead {
  max-width: 555px;
  font-size: var(--fs-15);
  line-height: var(--lh-24);
  color: var(--c-grey-66);
}

.catalog-hero__stats {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-12);
}

.catalog-hero__stat {
  display: flex;
  width: 152px;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-20);
  border-radius: var(--radius-16);
  background-color: var(--c-grey-9);
}

.catalog-hero__stat--accent {
  background-color: var(--color-accent);
}

.catalog-hero__stat-value {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-24);
  line-height: var(--lh-30);
  color: var(--c-white);
}

.catalog-hero__stat--accent .catalog-hero__stat-value {
  color: var(--c-grey-5);
}

.catalog-hero__stat-label {
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

.catalog-hero__stat--accent .catalog-hero__stat-label {
  color: var(--c-orange-18);
}

/* Мобільна — Figma 401:6818 · 390×405.7 */

@media (max-width: 1023px) {
  .catalog-hero {
    padding-block: var(--space-20) var(--space-28);
  }

  .catalog-hero__inner {
    gap: 10.9px;
  }

  .catalog-hero__row {
    flex-direction: column;
    align-items: stretch;
    gap: 10.9px;
  }

  .catalog-hero__text {
    gap: 10.9px;
  }

  .catalog-hero__title {
    padding-top: 3.875px;
    font-size: var(--fs-32);
    line-height: 35px;
    letter-spacing: var(--ls-tight-0-96);
  }

  .catalog-hero__lead {
    max-width: none;
    font-size: var(--fs-14);
    line-height: 22.67px;
  }

  .catalog-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    padding-top: 9.1px;
  }

  .catalog-hero__stat {
    width: auto;
    padding: var(--space-16);
  }

  .catalog-hero__stat--accent {
    grid-column: 1 / -1;
  }

  .catalog-hero__stat-value {
    font-size: var(--fs-20);
    line-height: var(--lh-24);
  }

  .catalog-hero__stat-label {
    line-height: 15px;
  }
}


/* ── assets/css/sections/_catalog-bar.css ── */
/* Стан, сортування, швидкі фільтри — Figma 401:3658 · 1440×124 */

.catalog-bar {
  padding-top: var(--space-32);
  background-color: var(--c-white);
}

.catalog-bar__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.catalog-bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.catalog-bar__tabs {
  display: flex;
  gap: var(--space-8);
}

.catalog-bar__tab {
  display: inline-flex;
  height: 40px;
  align-items: center;
  padding-inline: var(--space-20);
  border: var(--stroke-1) solid var(--c-grey-78);
  border-radius: var(--radius-12);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  white-space: nowrap;
  color: var(--c-grey-29);
  transition: border-color var(--transition-fast), color var(--transition-fast),
    background-color var(--transition-fast);
}

.catalog-bar__tab:hover,
.catalog-bar__tab:focus-visible {
  border-color: var(--c-grey-5);
  color: var(--c-grey-5);
}

.catalog-bar__tab--active {
  font-weight: 700;
  color: var(--c-white);
  border-color: var(--c-grey-5);
  background-color: var(--c-grey-5);
}

.catalog-bar__controls {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.catalog-bar__sort-label {
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

/* <details> замість select: системне меню macOS накриває контрол; без JS працюють посилання */
.catalog-bar__sort {
  position: relative;
}

.catalog-bar__select {
  display: inline-flex;
  height: 40px;
  align-items: center;
  padding-inline: var(--space-16) 40px;
  border: var(--stroke-1) solid var(--c-grey-78);
  border-radius: var(--radius-12);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  white-space: nowrap;
  color: var(--c-grey-5);
  background-image: url("../icons/chevron-down-16.svg");
  background-repeat: no-repeat;
  background-position: right var(--space-16) center;
  background-size: 16px 16px;
  cursor: pointer;
  list-style: none;
  transition: border-color var(--transition-fast);
}

/* трикрапка, щоб напис не налазив на стрілку */
.catalog-bar__sort-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* трикутник, який Safari й Chrome малюють у <summary>, нам не потрібен */
.catalog-bar__select::-webkit-details-marker {
  display: none;
}

.catalog-bar__select:hover,
.catalog-bar__sort[open] .catalog-bar__select {
  border-color: var(--c-grey-5);
}

.catalog-bar__sort-menu {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + var(--space-8));
  right: 0;
  min-width: 100%;
  padding: var(--space-4);
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-12);
  background-color: var(--c-white);
  box-shadow: var(--shadow-hover);
}

.catalog-bar__sort-option {
  display: block;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-8);
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  white-space: nowrap;
  color: var(--c-grey-29);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.catalog-bar__sort-option:hover,
.catalog-bar__sort-option:focus-visible {
  color: var(--c-grey-5);
  background-color: var(--c-grey-95);
}

.catalog-bar__sort-option--active {
  font-weight: 700;
  color: var(--c-grey-5);
}

.catalog-bar__filter-toggle {
  display: none;
}

.catalog-bar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.catalog-bar__chip {
  display: inline-flex;
  height: 36px;
  align-items: center;
  padding-inline: var(--space-16);
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-12);
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  white-space: nowrap;
  color: var(--c-grey-29);
  transition: border-color var(--transition-fast), color var(--transition-fast),
    background-color var(--transition-fast);
}

.catalog-bar__chip:hover,
.catalog-bar__chip:focus-visible {
  border-color: var(--c-grey-5);
  color: var(--c-grey-5);
}

.catalog-bar__chip--active {
  font-weight: 700;
  color: var(--c-grey-5);
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

/* Мобільна — Figma 401:7039 + 401:6841 */

@media (max-width: 1023px) {
  .catalog-bar {
    padding-top: var(--space-20);
    border-bottom: var(--stroke-1) solid var(--c-grey-91);
  }

  .catalog-bar .container {
    padding-inline: 0;
  }

  .catalog-bar__inner {
    gap: 0;
  }

  .catalog-bar__row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .catalog-bar__tabs {
    padding-inline: var(--container-padding);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .catalog-bar__tabs::-webkit-scrollbar {
    display: none;
  }

  .catalog-bar__tabs > li {
    flex: 0 0 auto;
  }

  .catalog-bar__controls {
    gap: var(--space-8);
    padding: var(--space-12) var(--container-padding) var(--space-16);
  }

  .catalog-bar__sort-label {
    display: none;
  }

  .catalog-bar__sort,
  .catalog-bar__filter-toggle {
    /* рівно половина мінус проміжок: з flex: 1 1 0 кнопка ширша через падінги й рамку */
    flex: 0 0 calc((100% - var(--space-8)) / 2);
    width: auto;
    min-width: 0;
  }

  .catalog-bar__select {
    width: 100%;
    min-width: 0;
    height: 44px;
    justify-content: center;
    padding-inline: var(--space-12) var(--space-32);
  }

  .catalog-bar__sort-menu {
    left: 0;
  }

  .catalog-bar__filter-toggle {
    order: -1;
    display: inline-flex;
    overflow: hidden;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    border: var(--stroke-1) solid var(--c-grey-78);
    border-radius: var(--radius-12);
    font-weight: 600;
    font-size: var(--fs-12);
    line-height: var(--lh-16);
    white-space: nowrap;
    color: var(--c-grey-5);
    transition: border-color var(--transition-fast);
  }

  .catalog-bar__filter-toggle:hover,
  .catalog-bar__filter-toggle:focus-visible {
    border-color: var(--c-grey-5);
  }

  .catalog-bar__chips {
    flex-wrap: nowrap;
    margin-bottom: var(--space-20);
    padding: var(--space-16) var(--container-padding) 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .catalog-bar__chips::-webkit-scrollbar {
    display: none;
  }

  .catalog-bar__chips > li {
    flex: 0 0 auto;
  }
}


/* ── assets/css/sections/_catalog-page.css ── */
/* Каталог: фільтр + сітка авто — Figma 401:3688 · 1440×1441 */

.catalog-page {
  padding-block: var(--space-32) 64px;
  background-color: var(--c-white);
}

.catalog-page__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
}

.catalog-page__main {
  flex: 1 0 0;
  min-width: 0;
}

.catalog-page__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
}

.catalog-page__grid > li {
  display: flex;
}

.catalog-page__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  margin-top: var(--space-24);
}

.catalog-page__counter {
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-grey-42);
}

.catalog-page__more {
  height: 48px;
  padding-inline: var(--space-32);
  border: var(--stroke-1) solid var(--c-grey-5);
  font-weight: 700;
  letter-spacing: var(--ls-0-6);
  color: var(--c-grey-5);
}

.catalog-page__more:hover,
.catalog-page__more:focus-visible {
  color: var(--c-white);
  background-color: var(--c-grey-5);
}

/* CTA — панель спільна з блогом */

.catalog-page__cta {
  margin-top: var(--space-24);
  padding-inline: var(--space-32);
}

/* flex-shrink лишаємо: на 1280–1440 текст віддає ширину формі */
.catalog-page__cta-text {
  min-width: 0;
  max-width: 520px;
  flex: 0 1 520px;
}

/* Мобільна — Figma 401:6855 · 390×2959 */

@media (max-width: 1023px) {
  .catalog-page {
    padding-block: var(--space-20) var(--space-32);
  }

  .catalog-page__inner {
    display: block;
  }

  .catalog-page__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  .catalog-page__grid > li {
    flex: 0 0 auto;
  }

  .catalog-page__foot {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--space-16);
    margin-top: var(--space-16);
  }

  .catalog-page__counter {
    text-align: center;
    line-height: 15px;
  }

  .catalog-page__more {
    width: 100%;
    height: 48px;
    padding-inline: 0;
  }

  .catalog-page__cta {
    margin-top: var(--space-32);
    padding: var(--space-24) var(--space-20);
  }

  /* у колонці `flex-basis: 520px` став би базовою висотою */
  .catalog-page__cta-text {
    max-width: none;
    flex: 0 0 auto;
  }
}

/* Вигляд «списком» (catalog-bar.js) — макета немає, та сама картка вшир */
@media (max-width: 1023px) {
  .catalog-page__grid--list {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalog-page__grid--list .car-card {
    flex-direction: row;
    align-items: stretch;
    height: auto;
  }

  .catalog-page__grid--list .car-card__photo {
    width: 40%;
    flex-shrink: 0;
  }

  .catalog-page__grid--list .car-card__body {
    flex: 1 1 auto;
  }
}


/* ── assets/css/sections/_car-crumbs.css ── */
/* Крихти сторінки авто — Figma 401:7131 · 1440×40 */

.car-crumbs {
  padding-top: var(--space-24);
  background-color: var(--c-white);
}

.car-crumbs__path {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

.car-crumbs__path a:hover,
.car-crumbs__path a:focus-visible {
  color: var(--c-grey-5);
}

/* Мобільна — Figma 401:4019 · 390×32 */

@media (max-width: 1023px) {
  .car-crumbs {
    padding-top: var(--space-16);
  }
}


/* ── assets/css/sections/_car-gallery.css ── */
/* Галерея авто — Figma 401:7134 · 1440×726; картка купівлі — components/_car-buy.css */

.car-gallery {
  padding-top: var(--space-24);
  background-color: var(--c-white);
}

.car-gallery__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
}

.car-gallery__media {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-8);
}

.car-gallery__main {
  position: relative;
  height: 525px;
  overflow: hidden;
  border-radius: var(--radius-20);
  background-color: var(--c-grey-95);
}

.car-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* кадрування 1:1 з макетом */
  object-position: 50% 45.3%;
}

.car-gallery__badges {
  position: absolute;
  top: var(--space-16);
  left: var(--space-16);
  display: flex;
  gap: var(--space-8);
}

.car-gallery__badge {
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-8);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-10);
  line-height: var(--lh-14);
  letter-spacing: var(--ls-1);
  text-transform: uppercase;
}

.car-gallery__badge--stock {
  color: var(--color-accent);
  background-color: var(--c-grey-5);
}

.car-gallery__badge--cleared {
  color: var(--c-grey-5);
  background-color: var(--c-white);
}

.car-gallery__counter {
  position: absolute;
  right: var(--space-16);
  bottom: var(--space-16);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-8);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-white);
  background-color: rgba(13, 13, 13, 0.8);
}

.car-gallery__thumbs {
  display: flex;
  height: 100px;
  gap: var(--space-8);
}

.car-gallery__thumbs > li {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
}

.car-gallery__thumb {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-12);
  background-color: var(--c-grey-83);
  cursor: pointer;
}

.car-gallery__thumb--active {
  border: var(--stroke-2) solid var(--c-grey-5);
}

.car-gallery__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

.car-gallery__more {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: var(--space-8);
  border-radius: var(--radius-8);
  font-weight: 700;
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  color: var(--c-white);
  background-color: rgba(13, 13, 13, 0.8);
  transform: translate(-50%, -50%);
}

/* Мобільна — Figma 401:4021 · 390×334 */

@media (max-width: 1023px) {
  .car-gallery {
    padding-top: var(--space-16);
  }

  .car-gallery__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* у колонці `flex: 1 0 0` задав би базову висоту 0 */
  .car-gallery__media {
    flex: 0 0 auto;
  }

  .car-gallery__main {
    height: 250px;
  }

  .car-gallery__badges {
    top: var(--space-12);
    left: var(--space-12);
  }

  .car-gallery__badge {
    padding: var(--space-6) var(--space-12);
    line-height: var(--lh-12);
  }

  .car-gallery__counter {
    right: var(--space-12);
    bottom: var(--space-12);
    padding: var(--space-6) var(--space-12);
    line-height: var(--lh-14);
  }

  .car-gallery__thumbs {
    height: 60px;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .car-gallery__thumbs::-webkit-scrollbar {
    display: none;
  }

  .car-gallery__thumbs > li {
    flex: 0 0 76px;
    scroll-snap-align: start;
  }

  .car-gallery__thumb {
    height: 60px;
  }
}


/* ── assets/css/sections/_car-info.css ── */
/* Опис авто — Figma 401:7220 · 1440×2258 */

.car-info {
  padding-top: 64px;
  background-color: var(--c-white);
}

.car-info__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
}

.car-info__main {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-12);
}

.car-info__head {
  padding-top: 36px;
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-28);
  line-height: var(--lh-36);
  letter-spacing: var(--ls-tight-0-84);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.car-info__head:first-child {
  padding-top: 0;
}

.car-info__text {
  max-width: 680px;
  font-size: var(--fs-14);
  line-height: var(--lh-24);
  color: var(--c-grey-42);
}

.car-specs {
  display: flex;
  gap: 48px;
  padding-top: var(--space-8);
}

.car-specs__col {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
}

.car-specs__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  padding-block: var(--space-12) 13px;
  border-bottom: var(--stroke-1) solid var(--c-grey-91);
}

.car-specs__row:last-child {
  padding-bottom: var(--space-12);
  border-bottom: 0;
}

.car-specs__key {
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  color: var(--c-grey-42);
}

.car-specs__value {
  font-weight: 600;
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  text-align: right;
  color: var(--c-grey-5);
}

.car-specs__value--vin {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-13);
}

.car-checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-16);
  padding-top: var(--space-8);
}

.car-checks__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-20) var(--space-20) var(--space-40);
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-20);
}

.car-checks__icon {
  flex-shrink: 0;
}

.car-checks__name {
  padding-top: var(--space-12);
  font-weight: 700;
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  color: var(--c-grey-5);
}

.car-checks__note {
  font-size: var(--fs-12);
  line-height: var(--lh-20);
  color: var(--c-grey-42);
}

.car-price {
  /* поля 24 з макета мінус 1px рамки */
  padding: 31px 23px 24px;
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-20);
}

.car-price__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  padding-block: var(--space-12);
  border-bottom: var(--stroke-1) solid var(--c-grey-91);
}

.car-price__row--last {
  padding-bottom: 28px;
  border-bottom: 0;
}

.car-price__key {
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  color: var(--c-grey-29);
}

.car-price__value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  text-align: right;
  color: var(--c-grey-5);
}

.car-price__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-16) var(--space-20);
  border-radius: var(--radius-12);
  background-color: var(--color-accent);
}

.car-price__total-label {
  font-weight: 800;
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  letter-spacing: var(--ls-0-42);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.car-price__total-value {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: var(--fs-24);
  line-height: var(--lh-30);
  color: var(--c-grey-5);
}

.car-price__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  margin-top: var(--space-24);
  /* 25 + 1px лінії = 26 у макеті */
  padding-top: 25px;
  border-top: var(--stroke-1) solid var(--c-grey-91);
}

.car-price__foot-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.car-price__foot-title {
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: var(--lh-20);
  color: var(--c-grey-5);
}

.car-price__foot-note {
  max-width: 400px;
  font-size: var(--fs-13);
  line-height: var(--lh-22);
  color: var(--c-grey-42);
}

.car-price__foot-cta {
  display: inline-flex;
  height: 48px;
  flex-shrink: 0;
  align-items: center;
  padding-inline: var(--space-24);
  border-radius: var(--radius-12);
  font-weight: 700;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-0-6);
  text-transform: uppercase;
  color: var(--color-accent);
  background-color: var(--c-grey-5);
  transition: background-color var(--transition-fast);
}

.car-price__foot-cta:hover,
.car-price__foot-cta:focus-visible {
  background-color: var(--c-grey-20);
}

/* Як проходить угода: лінія й крапка — псевдоелементи віхи */

.deal {
  display: flex;
  gap: var(--space-24);
  padding-top: var(--space-12);
}

.deal__item {
  position: relative;
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-8);
  padding-bottom: var(--space-20);
}

.deal__item::before {
  content: "";
  position: absolute;
  top: 55px;
  right: -24px;
  left: 12px;
  height: 2px;
  background-color: var(--c-grey-5);
}

.deal__item::after {
  content: "";
  position: absolute;
  top: 48px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-8);
  background-color: var(--c-grey-5);
}

.deal__item--last::before {
  content: none;
}

.deal__num {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-32);
  line-height: var(--lh-32);
  letter-spacing: var(--ls-tight-1-28);
  color: var(--c-grey-5);
}

.deal__name {
  /* 36px — смуга таймлайну (28) + другий проміжок колонки (8) */
  margin-top: 36px;
  padding-top: var(--space-4);
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: var(--lh-20);
  color: var(--c-grey-5);
}

.deal__text {
  font-size: var(--fs-16);
  line-height: var(--lh-19);
  color: var(--c-grey-42);
}

/* подвоєний клас: _faq.css підключений пізніше й перебив би скидання */
.faq.faq--car {
  padding-bottom: 0;
}

.faq--car .faq__list {
  padding-top: var(--space-8);
}

.faq--car .faq__sign {
  color: var(--c-grey-29);
}

.car-info__aside {
  display: flex;
  width: 424px;
  flex-shrink: 0;
  flex-direction: column;
  gap: var(--space-12);
}

.car-book {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24);
  border-radius: var(--radius-20);
  background-color: var(--c-grey-5);
}

.car-book__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-20);
  line-height: var(--lh-26);
  text-transform: uppercase;
  color: var(--c-white);
}

.car-book__note {
  padding-bottom: var(--space-12);
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--c-grey-54);
}

.car-book__control {
  height: 48px;
  padding-inline: var(--space-16);
  border-color: var(--c-grey-20);
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  color: var(--c-white);
  background-color: transparent;
}

.car-book__control::placeholder {
  color: var(--c-grey-48);
}

.car-book__control:hover,
.car-book__control:focus-visible {
  border-color: var(--c-white);
}

.car-book__submit {
  height: 52px;
  margin-top: var(--space-8);
  font-weight: 800;
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  letter-spacing: var(--ls-0-65);
}

.car-book__policy {
  margin-top: var(--space-4);
  font-size: var(--fs-12);
  line-height: var(--lh-20);
  color: var(--c-grey-42);
}

.car-book__policy a:hover,
.car-book__policy a:focus-visible {
  color: var(--c-white);
}

.car-includes {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-20);
}

.car-includes__title {
  font-weight: 700;
  font-size: var(--fs-15);
  line-height: var(--lh-20);
  color: var(--c-grey-5);
}

.car-includes__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.car-includes__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--c-grey-29);
}

.car-includes__icon {
  flex-shrink: 0;
}

/* ≤1279: перевірки у дві колонки, таймлайн вертикальний; діє й на мобільній */

@media (max-width: 1279px) {
  .car-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deal {
    flex-direction: column;
    gap: 0;
    padding-top: var(--space-4);
  }

  .deal__item {
    flex: 0 0 auto;
    padding-left: var(--space-32);
    padding-bottom: var(--space-24);
    gap: var(--space-6);
  }

  .deal__item::before {
    top: 20px;
    right: auto;
    bottom: -6px;
    left: 7px;
    width: 2px;
    height: auto;
  }

  .deal__item::after {
    top: 8px;
    left: 0;
  }

  .deal__item--last {
    padding-bottom: 0;
  }

  .deal__name {
    margin-top: 0;
    padding-top: var(--space-6);
  }
}

/* Мобільна — Figma 401:4104 … 401:4300 · 390 */

@media (max-width: 1023px) {
  .car-info {
    padding-top: 0;
  }

  .car-info__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
  }

  /* display: contents зливає колонки в один потік, порядок — через order */
  .car-info__main,
  .car-info__aside {
    display: contents;
  }

  .car-info__head--faq,
  .faq--car {
    order: 1;
  }

  .car-book {
    margin-top: 28px;
  }

  .car-info__head,
  .car-info__head:first-child {
    padding-top: var(--space-36);
    font-size: var(--fs-24);
    line-height: var(--lh-30);
    letter-spacing: var(--ls-tight-0-72);
  }

  .car-info__text {
    max-width: none;
    line-height: var(--lh-22);
  }

  .car-specs {
    flex-direction: column;
    gap: 0;
    padding-top: 0;
  }

  .car-specs__col {
    flex: 0 0 auto;
  }

  .car-specs__col:first-child .car-specs__row:last-child {
    padding-bottom: 13px;
    border-bottom: var(--stroke-1) solid var(--c-grey-91);
  }

  .faq--car .faq__list {
    padding-top: 0;
  }

  .car-checks {
    gap: var(--space-8);
    padding-top: 0;
  }

  .car-checks__item {
    padding: var(--space-16) var(--space-16) var(--space-16);
  }

  .car-price {
    padding: var(--space-20);
  }

  .car-price__row {
    padding-bottom: 13px;
  }

  /* правило вище стоїть пізніше за модифікатор — повертаємо явно */
  .car-price__row--last {
    padding-bottom: 28px;
  }

  .car-price__total-value {
    font-size: var(--fs-22);
    line-height: var(--lh-28);
  }

  .car-price__foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    margin-top: 0;
    /* 40 + 1px лінії = 41 у макеті */
    padding-top: 40px;
  }

  .car-price__foot-text {
    flex: 0 0 auto;
  }

  .car-price__foot-note {
    max-width: none;
    line-height: var(--lh-24);
  }

  .car-price__foot-cta {
    justify-content: center;
    flex: 0 0 auto;
  }

  .deal__item::before {
    top: 18px;
  }

  .deal__item::after {
    top: 6px;
  }

  .deal__num {
    font-size: var(--fs-24);
    line-height: var(--lh-26);
    letter-spacing: var(--ls-tight-0-96);
  }

  .deal__name {
    line-height: var(--lh-20);
  }

  .deal__text {
    font-size: var(--fs-14);
    line-height: var(--lh-19);
  }

  .car-book {
    padding: var(--space-24) var(--space-20);
  }

  .car-book__title {
    font-size: var(--fs-24);
    line-height: var(--lh-28);
  }

  .car-book__control {
    height: 52px;
  }

  .car-includes {
    padding: var(--space-20);
  }
}


/* ── assets/css/sections/_car-similar.css ── */
/* Схожі авто — Figma 401:7441 · 1440×620; чотири характеристики, звідси 512 замість 536 */

.car-similar {
  padding-block: var(--space-48) 64px;
  background-color: var(--c-white);
}

.car-similar__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.car-similar__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
}

.car-similar__title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-28);
  line-height: var(--lh-36);
  letter-spacing: var(--ls-tight-0-84);
  text-transform: uppercase;
  color: var(--c-grey-5);
}

.car-similar__all {
  padding-bottom: var(--space-4);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  white-space: nowrap;
  color: var(--c-grey-5);
}

.car-similar__all:hover,
.car-similar__all:focus-visible {
  color: var(--c-grey-42);
}

.car-similar__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-24);
}

.car-similar__list > li {
  display: flex;
}

/* Мобільна — Figma 401:4300 · 390×631 */

@media (max-width: 1279px) {
  .car-similar__list {
    display: flex;
    /* скролер виходить за поля контейнера й повертає їх падінгом */
    margin-inline: calc(var(--container-padding) * -1);
    padding: var(--space-16) var(--container-padding) 0;
    gap: var(--space-24);
    scroll-snap-type: x mandatory;
    /* snap рахується від краю скролпорту без padding — scroll-padding це компенсує */
    scroll-padding-inline: var(--container-padding);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .car-similar__list::-webkit-scrollbar {
    display: none;
  }

  .car-similar__list > li {
    flex: 0 0 312px;
    scroll-snap-align: start;
  }
}

@media (max-width: 1023px) {
  .car-similar {
    padding-block: var(--space-36) var(--space-36);
  }

  .car-similar__inner {
    gap: 0;
  }

  .car-similar__title {
    font-size: var(--fs-24);
    line-height: var(--lh-30);
    letter-spacing: var(--ls-tight-0-72);
  }

  .car-similar__list {
    gap: var(--space-12);
  }

  .car-similar__list > li {
    flex: 0 0 264px;
  }
}


/* ── assets/css/sections/_car-bar.css ── */
/* Нижня панель авто — Figma 401:7617 · 1440×72 */

.car-bar {
  /* sticky, а не fixed: панель у потоці й наприкінці стає під футером без резерву місця */
  position: sticky;
  z-index: var(--z-action-bar);
  bottom: 0;
  /* верхня лінія 2px входить у 72 з макета */
  padding-block: 14px var(--space-12);
  border-top: var(--stroke-2) solid var(--color-accent);
  background-color: var(--c-grey-5);
}

.car-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.car-bar__car {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  min-width: 0;
}

.car-bar__photo {
  width: 64px;
  height: 44px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: var(--radius-8);
  background-color: var(--c-grey-83);
}

.car-bar__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.car-bar__name {
  font-weight: 700;
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  color: var(--c-white);
}

.car-bar__status {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

.car-bar__price {
  flex-shrink: 0;
  font-weight: 800;
  font-size: var(--fs-24);
  line-height: var(--lh-30);
  letter-spacing: var(--ls-tight-0-48);
  color: var(--color-accent);
}

.car-bar__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-8);
}

.car-bar__telegram,
.car-bar__call {
  display: inline-flex;
  height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding-inline: var(--space-20);
  border: var(--stroke-1) solid var(--c-grey-27);
  border-radius: var(--radius-12);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  white-space: nowrap;
  color: var(--c-white);
  transition: border-color var(--transition-fast);
}

.car-bar__telegram:hover,
.car-bar__telegram:focus-visible,
.car-bar__call:hover,
.car-bar__call:focus-visible {
  border-color: var(--c-white);
}

.car-bar__icon {
  flex-shrink: 0;
  filter: invert(1);
}

.car-bar__cta {
  display: inline-flex;
  height: 44px;
  align-items: center;
  padding-inline: var(--space-24);
  border-radius: var(--radius-12);
  font-weight: 800;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-0-6);
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--c-grey-5);
  background-color: var(--color-accent);
  transition: background-color var(--transition-fast);
}

.car-bar__cta:hover,
.car-bar__cta:focus-visible {
  background-color: #ffe75c;
}

/* Мобільна — Figma 401:4443 · 390×114 */

@media (max-width: 1023px) {
  .car-bar {
    padding-block: var(--space-12) var(--space-16);
  }

  /* без is-armed (ставить скрипт) панель не ховається */
  .car-bar.is-armed {
    transition: transform var(--transition-fast), opacity var(--transition-fast);
  }

  .car-bar.is-armed:not(.is-visible) {
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
  }

  .car-bar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
  }

  .car-bar__car {
    height: 38px;
    justify-content: space-between;
    gap: var(--space-12);
  }

  .car-bar__photo {
    display: none;
  }

  .car-bar__price {
    font-size: var(--fs-20);
    line-height: var(--lh-26);
  }

  .car-bar__actions {
    gap: var(--space-8);
  }

  .car-bar__telegram,
  .car-bar__call {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding-inline: 0;
  }

  .car-bar__icon {
    width: 16px;
    height: 16px;
  }

  .car-bar__cta {
    height: 44px;
  }

  .car-bar__telegram-text {
    display: none;
  }

  .car-bar__cta {
    flex: 1 0 0;
    min-width: 0;
    justify-content: center;
  }
}


/* ── assets/css/sections/_reviews.css ── */
/* Відгуки клієнтів — Figma 401:2023 · 1440×525 */

.reviews {
  padding-bottom: 64px;
  background-color: var(--c-white);
}

.reviews__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-32);
}

/* плашка рейтингу ближче до заголовка: gap колонки 24 → 12 */
.reviews__head + .gtrust--panel {
  align-self: flex-start;
  margin-top: calc(var(--space-12) - var(--space-24));
}

.reviews__nav {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-8);
}

.reviews__arrow {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: var(--stroke-1) solid var(--c-grey-5);
  border-radius: var(--radius-12);
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.reviews__arrow--next {
  background-color: var(--c-grey-5);
}

.reviews__arrow:disabled {
  opacity: 0.35;
}

.reviews__arrow-icon {
  width: 18px;
  height: 18px;
}

/* список гортається й на ПК, тому картки — фіксована частка ширини, а не `flex: 1 0 0` */

/* position: relative обов'язковий: інакше overflow не обрізає absolute-підписи зірок */
.reviews__list {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--space-24);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
}

.reviews__list::-webkit-scrollbar {
  display: none;
}

.reviews__item {
  display: flex;
  flex: 0 0 calc((100% - var(--space-24) * 2) / 3);
  min-width: 0;
  scroll-snap-align: start;
}

.rcard {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-20);
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-20);
  background-color: var(--c-white);
}

.rcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
}

.rcard__who {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.rcard__name {
  overflow: hidden;
  font-weight: 700;
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-grey-5);
}

.rcard__date {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-grey-54);
}

.rcard__mark {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.rcard__stars {
  display: flex;
  gap: var(--space-2);
}

.rcard__star {
  width: 16px;
  height: 16px;
}

/* текст обрізається по рядках; повний відгук — за посиланням на першоджерело */
.rcard__text {
  display: -webkit-box;
  overflow: hidden;
  flex: 1 0 auto;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  font-size: var(--fs-15);
  line-height: var(--lh-24);
  color: var(--c-grey-29);
}

.rcard__more {
  align-self: flex-start;
  font-weight: 600;
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  color: var(--c-grey-5);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-grey-83);
  transition: text-decoration-color var(--transition-fast);
}

.rcard__more:hover,
.rcard__more:focus-visible {
  text-decoration-color: var(--c-grey-5);
}

/* Мобільна — Figma 401:2735 · 390×540 */

@media (max-width: 1023px) {
  .reviews .gtrust--panel {
    align-self: stretch;
    margin: var(--space-12) 0 0;
  }

  .reviews__list {
    /* без бічних відступів — поля вже дає контейнер секції */
    gap: var(--space-12);
    padding: var(--space-4) 0;
    -webkit-overflow-scrolling: touch;
  }

  .reviews__item {
    flex: 0 0 280px;
  }

  .rcard {
    padding: var(--space-16);
    border-radius: var(--radius-16);
  }

  .rcard__text {
    -webkit-line-clamp: 8;
    font-size: var(--fs-14);
    line-height: var(--lh-22);
  }
}

/* nowrap лише на головній: довший заголовок на «Про нас» виштовхує стрілки за екран */
@media (max-width: 1023px) and (min-width: 390px) {
  .home .reviews__head .section-head__title {
    white-space: nowrap;
  }
}

.reviews__arrow {
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

/* окреме наведення для правої стрілки: жовта на світло-сірому — контраст 1.2:1 */
.reviews__arrow--prev:hover,
.reviews__arrow--prev:focus-visible {
  border-color: var(--c-grey-5);
  background-color: var(--c-grey-95);
}

.reviews__arrow--next:hover,
.reviews__arrow--next:focus-visible {
  border-color: var(--c-grey-20);
  background-color: var(--c-grey-20);
}

.reviews__arrow:focus-visible {
  outline: var(--stroke-2) solid var(--color-accent);
  outline-offset: 2px;
}


/* ── assets/css/sections/_faq.css ── */
/* Часті питання + форма заявки — Figma 401:2081 · 1440×522 */

.faq {
  padding-bottom: 64px;
  background-color: var(--c-white);
}

.faq__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-40);
}

.faq__col {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: var(--space-24);
  width: 640px;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

.faq__item {
  border-radius: var(--radius-12);
  background-color: var(--c-grey-95);
}

.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-16) var(--space-20);
  font-weight: 600;
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  color: var(--c-grey-5);
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__sign {
  flex-shrink: 0;
  font-weight: 600;
  font-size: var(--fs-14);
  line-height: var(--lh-18);
  color: var(--c-yellow-36);
}

.faq__item[open] .faq__sign {
  font-size: 0;
}

.faq__item[open] .faq__sign::after {
  content: "−";
  font-size: var(--fs-14);
}

.faq__answer {
  padding: 0 var(--space-20) var(--space-16);
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--c-grey-42);
}

.faq__answer:empty {
  display: none;
}

.faq__form {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-32);
  border-radius: var(--radius-32);
  background-color: var(--c-grey-5);
}

.faq__form-title {
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-20);
  line-height: var(--fs-26);
  letter-spacing: var(--ls-tight-0-4);
  text-transform: uppercase;
  text-align: center;
  color: var(--c-white);
}

.faq__form-note {
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  text-align: center;
  color: var(--c-grey-54);
}

.faq__roles {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  padding-top: var(--space-8);
}

/* кнопки навпіл: фіксовані 283px з макета не вміщаються на 1280–1430 */
.faq__role {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.faq__role-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.faq__role-label {
  display: flex;
  width: 100%;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: var(--stroke-1) solid var(--c-grey-27);
  border-radius: var(--radius-12);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-0-48);
  text-transform: uppercase;
  text-align: center;
  color: var(--c-grey-79);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}

.faq__role-input:checked + .faq__role-label {
  font-weight: 700;
  color: var(--c-grey-5);
  border-color: var(--c-yellow-58);
  background-color: var(--c-yellow-58);
}

.faq__role-input:focus-visible + .faq__role-label {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.faq__field .field__control {
  border-color: var(--c-grey-20);
  color: var(--c-white);
}

.faq__field .field__control::placeholder {
  color: var(--c-grey-48);
}

.faq__textarea {
  height: 80px;
  /* обведення в Figma всередині: 12/16 мінус 1px бордера */
  padding: 11px 15px;
  resize: vertical;
}

.faq__submit {
  width: 100%;
  height: 52px;
  /* висота задана, напис центрує flex — без асиметричного padding */
  padding-block: 0;
  font-size: var(--fs-13);
  line-height: var(--lh-18);
  letter-spacing: var(--ls-0-65);
}

/* Мобільна — Figma 401:2789 · 390×900 */

@media (max-width: 1023px) {
  .faq {
    padding-bottom: 36px;
  }

  .faq__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-20);
  }

  .faq__col {
    width: auto;
    gap: var(--space-20);
  }

  .faq__question {
    gap: var(--space-16);
    padding: var(--space-16);
  }

  .faq__sign {
    color: var(--c-grey-29);
  }

  .faq__answer {
    padding: 0 var(--space-16) var(--space-16);
  }

  .faq__form {
    padding: var(--space-24) var(--space-20);
    border-radius: var(--radius-20);
  }

  .faq__form-title {
    font-size: var(--fs-19);
    line-height: var(--lh-26);
    letter-spacing: var(--ls-tight-0-38);
  }

  .faq__form-note {
    font-size: var(--fs-12);
    line-height: var(--lh-20);
  }

  /* на 320px дві кнопки по 150px не вміщаються — дозволяємо стискатись */
  .faq__role {
    flex: 0 1 auto;
    min-width: 0;
  }

  .faq__role-label {
    width: 150px;
    max-width: 100%;
    height: 44px;
  }

  .faq__role-input:checked + .faq__role-label {
    width: 148px;
    max-width: 100%;
  }

  .faq__field .field__control {
    height: 52px;
    padding: 14.5px 15px 15.5px;
  }

  .faq__field .faq__textarea {
    height: 88px;
    padding: 15px;
  }

  .faq__submit {
    height: 52px;
  }
}

/* акцентний жовтий на світлому тлі — контраст 1.2:1, тому лише темнішання */
.faq__question {
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.faq__question:hover,
.faq__question:focus-visible {
  background-color: var(--c-grey-89);
}

.faq__question:hover .faq__sign,
.faq__question:focus-visible .faq__sign {
  color: var(--c-grey-5);
}

.faq__question:focus-visible {
  outline: var(--stroke-2) solid var(--c-grey-5);
  outline-offset: 2px;
}


/* 5. Utils */

/* ── assets/css/utils/_helpers.css ── */
/* Утиліти */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.is-locked {
  overflow: hidden;
}

.skip-link {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  z-index: var(--z-modal);
  padding: var(--space-8) var(--space-16);
  color: var(--color-bg);
  background-color: var(--color-text);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}

/* :focus-visible, а не :focus — інакше посилання виїжджало після кліку мишею по «нагору». */
.skip-link:focus-visible {
  transform: translateY(0);
}

/* Переноси рядків окремо для десктопа й мобільної */
.br-mobile {
  display: none;
}

@media (max-width: 1023px) {
  .br-desktop {
    display: none;
  }

  .br-mobile {
    display: inline;
  }
}


/* ── assets/css/utils/_reveal.css ── */
/* Поява блоків при прокрутці; клас ic-reveal ставить assets/js/modules/reveal.js, без скрипта нічого не ховається. */

.ic-reveal {
  opacity: 0;
  transform: translateY(22px);
  will-change: opacity, transform;
}

/* Перехід — окремим класом і на кадр пізніше за початковий стан, інакше анімується й сам початковий стан.
   Longhand, бо скорочення скинуло б transition-delay для почерговості. */
.ic-reveal--ready {
  transition-property: opacity, transform;
  transition-duration: 0.55s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.ic-reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Сусідні картки в ряду — по черзі */
.ic-reveal:nth-child(2) { transition-delay: 0.06s; }
.ic-reveal:nth-child(3) { transition-delay: 0.12s; }
.ic-reveal:nth-child(4) { transition-delay: 0.18s; }
.ic-reveal:nth-child(5) { transition-delay: 0.24s; }
.ic-reveal:nth-child(6) { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .ic-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Перший екран: CSS-анімація без JS; backwards тримає перший кадр лише на час затримки. Великі фото (LCP) не чіпаємо. */

/* Назва анімації у змінній: при prefers-reduced-motion стає none. */
:root {
  --ic-intro: ic-intro;
  --ic-hero-photo: ic-hero-photo;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ic-intro: none;
    --ic-hero-photo: none;
  }
}

@keyframes ic-intro {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.hero__badge,
.hero__title,
.hero__lead,
.hero__actions,
.gtrust--hero,
.hero__stats,
.hero__form,
.page-hero__crumbs,
.page-hero__title,
.page-hero__lead,
.page-hero__stats,
.about-hero__crumbs,
.about-hero__title,
.about-hero__lead,
.about-hero__facts,
.contacts-hero__crumbs,
.contacts-hero__title,
.contacts-hero__lead,
.contacts-hero__cards,
.blog-hero__crumbs,
.blog-hero__title,
.blog-hero__lead,
.blog-hero__stats,
.catalog-hero__crumbs,
.catalog-hero__title,
.catalog-hero__lead,
.catalog-hero__stats,
.post-head__crumbs,
.post-head__badge,
.post-head__title,
.post-head__author,
.car-crumbs__path {
  animation: var(--ic-intro) 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* Черговість: крихти й бейдж → заголовок → текст → кнопка → рейтинг → показники → форма */
.hero__badge,
.page-hero__crumbs,
.about-hero__crumbs,
.contacts-hero__crumbs,
.blog-hero__crumbs,
.catalog-hero__crumbs,
.post-head__crumbs,
.car-crumbs__path {
  animation-delay: 0.05s;
}

.hero__title,
.page-hero__title,
.about-hero__title,
.contacts-hero__title,
.blog-hero__title,
.catalog-hero__title,
.post-head__badge {
  animation-delay: 0.12s;
}

.hero__lead,
.page-hero__lead,
.about-hero__lead,
.contacts-hero__lead,
.blog-hero__lead,
.catalog-hero__lead,
.post-head__title {
  animation-delay: 0.19s;
}

.hero__actions,
.post-head__author {
  animation-delay: 0.26s;
}

.gtrust--hero {
  animation-delay: 0.32s;
}

.hero__stats,
.page-hero__stats,
.about-hero__facts,
.contacts-hero__cards,
.blog-hero__stats,
.catalog-hero__stats {
  animation-delay: 0.33s;
}

.hero__stats {
  animation-delay: 0.38s;
}

.hero__form {
  animation-delay: 0.45s;
}

/* Мобільна: затримки повторюють порядок блоків із sections/_hero.css */
@media (max-width: 1023px) {
  .gtrust--hero {
    animation-delay: 0.26s;
  }

  .hero__form {
    animation-delay: 0.33s;
  }

  .hero__stats {
    animation-delay: 0.4s;
  }
}

/* Фото в хіро (LCP): лише transform, без прозорості; один раз, без циклу. */
@keyframes ic-hero-photo {
  from {
    transform: scale(1.06);
  }

  to {
    transform: none;
  }
}

.hero__media-img {
  animation: var(--ic-hero-photo) 1.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}


/* ── assets/css/utils/_tablet.css ── */
/* Проміжна зона 1024–1279px: жорсткі ширини макета 1440 стають гнучкими */

@media (max-width: 1279px) and (min-width: 1024px) {

  /* «Шість кроків»: сітка 3×2 */
  .steps__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Показники першого екрана: кегль і поля як у мобільній версії */
  .hero__stat {
    padding: var(--space-16);
  }

  .hero__stat-value {
    font-size: var(--fs-19);
    line-height: var(--lh-24);
  }

  /* Хедер: меню стискається, телефон ховається, лишається кнопка */
  .header__list {
    gap: var(--space-16);
  }

  .header__phone-text {
    display: none;
  }

  /* Порівняння: фіксований проміжок 285px замінюємо на розтяжку */
  .compare__head {
    gap: var(--space-24);
    justify-content: space-between;
  }

  .compare__note {
    flex-shrink: 1;
    padding-right: 0;
  }

  /* Калькулятор: заголовок і опис віддають жорсткі максимуми */
  .calc__title,
  .calc__note {
    max-width: none;
  }

  /* Перевірки: колонки стають пропорційними */
  .checks__inner {
    gap: var(--space-40);
  }

  .checks__intro {
    flex: 1 1 0;
    width: auto;
  }

  .checks__title {
    max-width: none;
  }

  /* FAQ: ліва колонка і перемикач ролей стають гнучкими */
  .faq__col {
    flex: 1 1 0;
    width: auto;
  }

  .faq__role {
    flex: 1 1 0;
  }

  .faq__role-label,
  .faq__role-input:checked + .faq__role-label {
    width: 100%;
  }

  /* CTA-смуга: декоративний відступ зменшується */
  .cta-lead__inner {
    padding-left: 80px;
    gap: var(--space-24);
  }

  .cta-lead__panel::before {
    width: 120px;
  }

  /* Футер: бренд-колонка перестає бути 432px */
  .footer__brand {
    flex: 1 1 0;
    width: auto;
  }

  /* Герой: показники не вилазять */
  .hero__lead {
    max-width: none;
  }

  /* Блок для дилерів */
  .dealer__panel {
    padding-inline: var(--space-40);
  }

  .dealer__text {
    min-width: 0;
  }

  /* Прайс: ліва колонка віддає фіксовані 636px */
  .pricing__intro {
    flex: 1 1 0;
    width: auto;
  }

  /* Шапка сторінки: колонка тексту стає гнучкою */
  .page-hero__text {
    flex: 1 1 0;
    width: auto;
  }

  .page-hero__lead {
    max-width: none;
  }

  /* Етапи: середня і права колонки стискаються */
  .stages__text {
    max-width: none;
  }

  /* Сторінка «Про нас» */

  /* Шапка: фото віддає жорсткі 656px, ділить ширину з текстом порівну */
  .about-hero__media {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
  }

  .about-hero__lead {
    max-width: none;
  }

  /* Чому обирають нас: ліва колонка віддає жорсткі 636px */
  .why__intro {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
  }

  /* Команда: фото стискається разом з колонкою сітки */
  .team__photo {
    width: calc(100% - 16px);
  }

  /* Сторінка «Контакти» */

  .contacts-hero__lead,
  .lead__text {
    max-width: none;
  }

  /* перемикач ролей: 291+293px не вміщаються у вужчу колонку форми */
  .lead__role {
    flex: 1 1 0;
    min-width: 0;
  }

  .lead__role-label,
  .lead__role-input:checked + .lead__role-label {
    width: 100%;
  }

  /* Доставка: поля панелі 60px завеликі для 1024 */
  .delivery__panel {
    padding-inline: var(--space-40);
  }

  /* Блог */

  /* Головна стаття: праве поле 60px завелике для вужчої колонки */
  .blog-featured__body {
    padding-right: var(--space-40);
  }

  /* CTA: текст віддає жорсткі 560px, панель — поля 60px */
  .blog-cta__panel {
    gap: var(--space-24);
    padding-inline: var(--space-40);
  }

  .blog-cta__text {
    min-width: 0;
    flex: 1 1 0;
  }

  .blog-cta__note {
    max-width: none;
  }

  /* Каталог */

  /* Сітка авто: дві колонки, фільтр лишається збоку (312px) */
  .catalog-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* CTA всередині вужчої колонки: панель у стовпчик, форма на всю ширину */
  .catalog-page__cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-20);
    padding-inline: var(--space-24);
  }

  .catalog-page__cta-text {
    min-width: 0;
  }

  .catalog-page__cta .blog-cta__form {
    width: 100%;
  }

  .catalog-page__cta .blog-cta__field {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Сторінка авто */

  /* Картка купівлі й бічна колонка вужчі, щоб колонка тексту не була вужчою за картку */
  .car-buy,
  .car-info__aside {
    width: 340px;
  }

  /* Велике фото тримає пропорцію макета замість жорстких 525px */
  .car-gallery__main {
    height: auto;
    aspect-ratio: 872 / 525;
  }

  /* Опис у макеті обмежений 680px — у вужчій колонці обмеження зайве */
  .car-info__text,
  .car-price__foot-note {
    max-width: none;
  }

  /* Підвал розкладу ціни: текст і кнопка не вміщаються в рядок */
  .car-price__foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
  }

  .car-price__foot-cta {
    justify-content: center;
  }

  /* Нижня панель авто: телефон і назва тиснуться — прибираємо фото */
  .car-bar__photo {
    display: none;
  }
}

/* Планшет 768–1023px: мобільна розкладка, але слайдери каталогу, кейсів і відгуків розгортаються в сітку */

@media (max-width: 1023px) and (min-width: 768px) {

  /* Каталог: три картки в ряд */
  .catalog__list,
  .savings__list,
  .reviews__list {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
    justify-content: flex-start;
  }

  .catalog__list {
    row-gap: var(--space-16);
  }

  .catalog__item {
    flex: 1 1 calc((100% - var(--space-12) * 2) / 3);
    max-width: calc((100% - var(--space-12) * 2) / 3);
    scroll-snap-align: none;
  }

  .catalog__photo {
    width: 100%;
  }

  .catalog__cta {
    width: 100%;
  }

  /* Кейси економії: три в ряд */
  .savings__list {
    row-gap: var(--space-16);
  }

  .savings__item {
    flex: 1 1 calc((100% - var(--space-12) * 2) / 3);
    max-width: calc((100% - var(--space-12) * 2) / 3);
    scroll-snap-align: none;
  }

  .savings__photo {
    width: 100%;
  }

  .savings .section-head__title {
    max-width: none;
  }

  /* Відгуки: дві в ряд */
  .reviews__list {
    row-gap: var(--space-16);
  }

  .reviews__item {
    flex: 1 1 calc((100% - var(--space-12)) / 2);
    max-width: calc((100% - var(--space-12)) / 2);
    scroll-snap-align: none;
  }

  .reviews__photo {
    width: 100%;
  }

  .reviews__nav {
    display: none;
  }

  /* Калькулятор: плитки параметрів по чотири */
  .calc__params {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .calc__title,
  .calc__note {
    max-width: none;
  }
}


/* ── assets/css/utils/_cf7.css ── */
/* Contact Form 7: прибираємо обгортки й спінер плагіна, що ламають сітку форм */

.wpcf7,
.wpcf7-form-control-wrap,
.wpcf7 .hidden-fields-container {
  display: contents;
}

/* службовий блок для читалок лишається в потоці, але без місця у флекс-рядку */
.wpcf7 .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wpcf7-spinner {
  display: none;
}

.wpcf7-response-output {
  display: none;
}

.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  margin: var(--space-12) 0 0;
  padding: var(--space-12) var(--space-16);
  border: var(--stroke-1) solid var(--c-grey-86);
  border-radius: var(--radius-12);
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--c-grey-29);
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--c-green-37);
  color: var(--c-green-37);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--c-red-49);
  color: var(--c-red-49);
}

.wpcf7-not-valid-tip {
  padding-top: var(--space-4);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  color: var(--c-red-49);
}

.wpcf7-not-valid {
  border-color: var(--c-red-49);
}

.blog-cta__panel .wpcf7-response-output,
.car-book .wpcf7-response-output,
.cta-lead .wpcf7-response-output {
  color: var(--c-white);
}

/* Форма броні: CF7-форму розчиняємо в батьківському флексі .car-book (і статичну теж). */
.car-book .wpcf7-form,
.car-book__form {
  display: contents;
}