/* ===== Карточка товару =====
 * Підключається лише зі сторінок товарів через $extra_css.
 * Кольорові токени беруться зі styles.css, нових не заводимо.
 */

/* Посилання повернення над основним блоком */
.card__back {
  display: inline-block;
  margin-bottom: 18px;
  color: #2a64ab;
  text-decoration: none;
  font-size: 0.95rem;
}
.card__back:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Дві колонки: галерея ширша за блок покупки */
.card__cols {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
/* Обов'язково: в елементів grid min-width за умовчанням auto, тобто вони
   не стискаються вже за свій вміст. У лівій колонці лежать кадри, ширші
   за саму колонку, — без цього вона розтягувалася під них, і вся сторінка
   ставала ширшою за екран. Саме звідси був обрізаний правий край. */
.card__cols > * {
  min-width: 0;
}

/* ===== Галерея ===== */
/* Усі кадри лежать у потоці, видно лише активний — так PhotoSwipe
   отримує повний список слайдів, а мініатюри тільки перемикають показ. */
/* Фіксована пропорція сцени: предметні рендери (квадрат і 16:9) та
   інтер'єри різної форми, без неї сторінка стрибала б за перемикання.
   object-fit: contain вписує кадр цілком, а тло біле — тоді поля
   по боках зливаються зі сторінкою і підкладки не видно. */
.card-gallery__stage {
  position: relative;
  background: var(--bg-light);
  aspect-ratio: 16 / 10;
}
/* Сушарки ONYX вертикальні: у кадрі 16/10 вони впираються у висоту
   й займають четверть ширини. Квадратна сцена тримає і вертикальні
   моделі, і горизонтальну S1L. */
.card-gallery--portrait .card-gallery__stage {
  aspect-ratio: 1 / 1;
}
.card-gallery__slide {
  display: none;
  cursor: zoom-in;
}
.card-gallery__slide.is-active {
  display: block;
  height: 100%;
}
.card-gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Комп'ютер: мініатюри сіткою в кілька рядів, стовпців скільки влізе
   по ширині. Усі кадри відразу — під галереєю все одно порожнє місце.
   На вузьких екранах нижче повертаємо ленту в один рядок. */
.card-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.card-gallery__thumbs::-webkit-scrollbar {
  display: none;
}
/* Вигляд мініатюри спільний із лентами й лежить у styles.css (ТЗ №71).
   Тут залишається тільки те, що в карточки своє, — розкладка ряду вище. */

/* Сітка складається приблизно до трьох рядів: у 375-ivory кадрів кілька
   десятків, і повний список відводив би блок покупки далеко вниз. Межу
   ставить скрипт за справжньою верхівкою четвертого ряду; якщо рядів менше,
   класу немає і блок поводиться як звичайно. Кнопка-градієнт розкриває
   список на всю висоту. */
.card-gallery__thumbs-wrap {
  position: relative;
}
.card-gallery__thumbs-wrap.is-clamped .card-gallery__thumbs {
  max-height: var(--thumbs-clamp);
  overflow: hidden;
}
.card-gallery__thumbs-more {
  display: none;
}
.card-gallery__thumbs-wrap.is-clamped .card-gallery__thumbs-more {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Рівно на висоту видимого окрайця ряду: туман починається там само, де
     починається обрізаний ряд, і доходить до білого біля самого краю. */
  height: var(--thumbs-fade, 44px);
  padding: 0;
  border: 0;
  cursor: pointer;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 45%,
    var(--bg-light) 100%
  );
}
/* Видимий сигнал: одного туману мало — на світлих інтер'єрних кадрах він
   не читається. Кружок із тінню тримає значок на будь-якому тлі.
   Той самий кружок у кнопки розкриття і в кнопки згортання,
   відрізняється лише поворот шеврона. */
.card-gallery__thumbs-chevron {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(11, 12, 15, 0.18);
  transition: box-shadow 0.2s ease;
}
.card-gallery__thumbs-more .card-gallery__thumbs-chevron {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
}
.card-gallery__thumbs-more:hover .card-gallery__thumbs-chevron,
.card-gallery__thumbs-less:hover .card-gallery__thumbs-chevron {
  box-shadow: 0 3px 14px rgba(11, 12, 15, 0.28);
}

/* Кнопка згортання стоїть у потоці під останнім рядом — поверх кадрів
   їй нема потреби, там вільно. Видно її лише в розкритого списку. */
.card-gallery__thumbs-less {
  all: unset;
  display: none;
}
.card-gallery__thumbs-wrap.is-open .card-gallery__thumbs-less {
  display: block;
  width: 34px;
  margin: 12px auto 0;
  cursor: pointer;
}
/* На вузьких екранах мініатюри йдуть лентою, складати нічого. */
@media (max-width: 900px) {
  .card-gallery__thumbs-wrap.is-open .card-gallery__thumbs-less {
    display: none;
  }
}

/* Повернення до початку галереї після згортання — з поправкою на шапку.
   ТЗ №106: висота шапки береться з тієї самої змінної, що й в інших
   місцях сайту, а не вбита числом. Значення те саме: 64 + 16 = 80. */
.card-gallery {
  scroll-margin-top: calc(var(--hdr-h, 64px) + 16px);
}
.card-gallery__thumb:hover {
  border-color: #b9c2d0;
}
.card-gallery__thumb.is-active {
  border-color: var(--text);
}

/* ===== Блок покупки ===== */
.card__title {
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 10px;
}
.card__lead {
  color: var(--muted);
  margin-bottom: 22px;
}

.card__switch {
  margin-bottom: 18px;
}
.card__switch-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.card__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.card__chip {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid #c9cfd8;
  background: #fff;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
a.card__chip:hover {
  border-color: var(--text);
}
.card__chip.is-active {
  border-color: var(--text);
  border-width: 2px;
  padding: 8px 15px; /* компенсуємо додаток рамки, щоб кнопки не стрибали */
  font-weight: 600;
}

/* Чотири характеристики в рядок */
.card__specs {
  display: flex;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  margin: 22px 0 10px;
}
/* Ширини нерівні, за вмістом: за рівних часток «600 × 600 × 12 мм»
   не вміщалося і «мм» їхало на другий рядок. flex-basis: auto бере
   за відправну точку ширину вмісту, а заборона переносу у значення
   не дає комірці стати вужчою за своє число. */
.card__spec {
  flex: 1 1 auto;
  padding: 10px 8px;
  border-right: 1px solid #eee;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}
.card__spec:last-child {
  border-right: 0;
}
.card__spec b {
  display: block;
  margin-top: 3px;
  font-size: 0.95rem;
  color: var(--text);
  white-space: nowrap;
}

.card__more {
  margin-bottom: 20px;
}

/* Чорна плашка з ціною та кнопкою */
.card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: var(--bg-dark);
  color: #fff;
}
.card__price {
  font-size: 1.6rem;
  font-weight: 700;
}
.card__buy-btn {
  all: unset;
  box-sizing: border-box;
  padding: 12px 28px;
  background: #fff;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.2s ease;
}
.card__buy-btn:hover {
  opacity: 0.85;
}
.card__vat {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--muted);
}
/* Галочка приглушено-зелена: на 0.85rem світлий відтінок читався б
   як сірий, тому беремо темний тон, а не салатовий. */
.card__vat-mark {
  color: #15803d;
  font-weight: 600;
}

/* ===== Повна таблиця характеристик ===== */
#specs {
  /* ТЗ №106: та сама поправка на шапку зі змінної, значення колишнє. */
  scroll-margin-top: calc(var(--hdr-h, 64px) + 16px);
}
/* ТЗ №112. Блок документів став цілью другого посилання під короткими
   характеристиками, і йому потрібна та сама поправка: без неї заголовок
   розділу стає рівно під залиплою шапкою і його не видно. */
#docs {
  scroll-margin-top: calc(var(--hdr-h, 64px) + 16px);
}
/* Заголовок і таблиця живуть у спільній обгортці обмеженої ширини та
   центруються разом. Інакше на широкому екрані блок тиснеться до лівого
   краю, а праворуч залишається порожнє поле майже на пів екрана. */
.card-specs-wrap {
  max-width: 680px;
  margin-inline: auto;
}

/* table-layout: fixed — інакше браузер вважає ширину за вмістом і
   таблиця може вийти за межі екрана на вузьких пристроях. */
.card-specs {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.card-specs th,
.card-specs td {
  overflow-wrap: break-word;
}
.card-specs th,
.card-specs td {
  font-weight: 400;
  padding: 10px 0;
  border-bottom: 1px solid #e2e2e2;
  vertical-align: top;
}
/* ТЗ №127. Лінія розділяє рядки, а не завершує таблицю: над першим
   рядком її немає — після останнього теж не треба. На вузькому екрані
   під таблицею відразу починається наступний блок, і зайва лінія
   читається обривом.

   На широких лишаємо як було: там таблиця стоїть у своїй колонці
   з повітрям під нею, і нижня лінія працює межею блока. */
@media (max-width: 640px) {
  .card-specs tr:last-child th,
  .card-specs tr:last-child td {
    border-bottom: 0;
  }
}
.card-specs th {
  width: 60%;
  text-align: left;
  color: var(--muted);
}
/* Значення притиснуте до правого краю: лінія тоді пов'язує назву
   зі значенням, а не тягнеться в пустоту. */
.card-specs td {
  text-align: right;
  color: var(--text);
}

/* ТЗ №127. На вузькому екрані колонки порівну. Блок стоїть САМЕ ТУТ,
   після базової ширини вище: специфічність у правил однакова, і виграє
   те, що нижче по файлу. Покладений раніше, він не діяв зовсім.

   Навіщо: значення «900 × 600 × 15 мм» займало всю свою колонку, і знак
   питання, що зʼявився в цьому рядку, їхав на окремий рядок — не так,
   як у класу захисту, де значення коротке. 50 % дібрано заміром по
   найгірших випадках (іспанські карточки на 360): за 52 % знак ще їде,
   за 50 % стоїть на рядку значення. Підписи від цього не подовшали —
   найдовші й так переносяться, а таблиця стала коротшою. */
@media (max-width: 640px) {
  .card-specs th {
    width: 50%;
  }
}

/* ===== Підказки в таблиці характеристик ===== */
/* Їх дві: клас захисту (ТЗ №33) і порядок розмірів (ТЗ №127). Вигляд
   спільний, і правила нижче не знають, до якого саме рядка їх причепили.

   Псевдопосилання — саме значення, а не назва рядка: пояснень людина
   шукає до числа. Праворуч від нього знак питання, обидва відкривають
   одне вікно — яке саме, каже data-spec-help у розмітці. Колір
   успадковується від комірки, щоб значення не вибивалося зі стовпця. */
.spec-help {
  all: unset;
  cursor: pointer;
  border-bottom: 1px dashed #b9c2d0;
}
.spec-help:hover {
  border-bottom-color: var(--text);
}
.spec-help__mark {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 7px;
  vertical-align: 1px;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--muted);
  border: 1px solid #c3cad4;
  border-radius: 50%;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.spec-help__mark:hover {
  color: var(--text);
  border-color: var(--text);
}
.spec-help:focus-visible,
.spec-help__mark:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* Спливна підказка, привязана до знака питання. Екран не затемнюється:
   довідка коротка. Координати й бік хвостика ставить ui.js — він же
   рухає підказку під час прокручування, поки вона відкрита. */
.spec-tip[hidden] {
  display: none;
}
.spec-tip {
  position: fixed;
  z-index: 10002; /* вище за попап заявки: може відкритися поверх нього */
  width: max-content;
  max-width: 360px;
}
.spec-tip__box {
  position: relative;
  padding: 16px 18px 14px;
  background: var(--bg-light);
  box-shadow: 0 10px 34px rgba(11, 12, 15, 0.2);
}
/* Поки рахуємо координати, вікно вже в потоці (потрібні його розміри),
   але ще не показане: інакше воно блимнуло б у невірному місці. */
.spec-tip.is-measuring {
  visibility: hidden;
}
/* Хвостик: суцільний трикутник кольору підкладки. Рамки у вікна немає —
   інакше на стику з хвостиком лишилася б помітна волосяна лінія.
   Вікно стоїть збоку від рядка, тому хвостик горизонтальний. */
.spec-tip::after {
  content: "";
  position: absolute;
  top: var(--tip-y, 50%);
  transform: translateY(-50%);
  border: 9px solid transparent;
}
/* Вікно ліворуч від знака — хвостик на правій грані, дивиться праворуч. */
.spec-tip--left::after {
  left: 100%;
  border-left-color: var(--bg-light);
}
/* Ліворуч місця не вистачило — вікно праворуч, хвостик на лівій грані. */
.spec-tip--right::after {
  right: 100%;
  border-right-color: var(--bg-light);
}
.spec-tip__close {
  all: unset;
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 6px;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.spec-tip__close:hover {
  color: var(--text);
}
.spec-tip__title {
  margin: 0 0 10px;
  padding-right: 22px;
  font-size: 1rem;
  line-height: 1.25;
}
.spec-tip__box p {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 0.92rem;
}
.spec-tip__std {
  font-size: 0.82rem !important;
}
.spec-tip__more {
  margin-bottom: 0 !important;
}
/* На вузьких екранах ширину за вмістом не витримати — задаємо її явно.
   Величина колишня, 80 % екрана: раніше вона виходила з полів по 10 %
   з кожного боку, але тепер положення рахує скрипт, і поля віддавати
   не можна — інакше вікно нічим ставити збоку. */
@media (max-width: 560px) {
  .spec-tip {
    width: 80vw;
    max-width: none;
  }
}

/* ТЗ №75. Посилання під блоком питань стоїть по центру і звучить так
   само, як під блоками питань на /hybrid і /onyx: одне місце на сайті,
   одне формулювання. */
.card__faq-more {
  margin-top: 20px;
  text-align: center;
}
/* Приписка під описом моделі: уточнення, а не частина опису.
   Кегль і колір ті самі, що в рядка про ПДВ під ціною (.card__vat) —
   нового прийому не заводимо. */
.card__note {
  /* Згори приписку відбиває нижнє поле самого опису, знизу — своє:
     без нього перемикач серії прилипав до останнього рядка. */
  margin: 0 0 22px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}
/* Посилання всередині приписки веде вниз цією самою сторінкою, а не на
   іншу, тому й виглядає інакше, ніж зовнішнє: колір свій, текстовий, а
   підкреслення пунктирне — той самий знак, що в пунктів смуги розділів
   і в псевдопосилання класу захисту. */
.card__note-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.card__note-link:hover {
  color: var(--text);
}


/* ===== Мобільна розкладка ===== */
@media (max-width: 900px) {
  .card__cols {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .card__title {
    font-size: 1.4rem;
  }
  /* Чотири характеристики — рівна сітка 2×2. Саме grid, а не flex:
     у flex ширина комірки залежить від вмісту, і перша колонка
     роздувалася під найдовший текст. У grid обидві колонки рівні. */
  .card__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .card__spec {
    min-width: 0;
    border-bottom: 1px solid #eee;
  }
  .card__spec:nth-child(2n) {
    border-right: 0;
  }
  .card__spec:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
  /* ТЗ №86. Тут стояло «кнопка покупки — на всю ширину»: нижче 900 px
     плашка розгорталася в стовпчик і кнопка розтягувалася на всю
     ширину блока. Знято — плашка тепер однакова на всіх ширинах:
     ціна ліворуч, кнопка праворуч, обидві в рядок.

     Місця вистачає із запасом: у рядку ціна займає 77 px, кнопка 114,
     плюс 16 зазору й 40 полів блока — 247 px за 331 доступних на 360.
     Перевірено на 360, 390, 414. Правило було не про брак місця,
     а про мобільний звичай тягнути кнопку на всю ширину. */
  /* Вузькі екрани: текст іде відразу під галереєю, тому сітка з шести
     рядів відвела б його далеко вниз. Повертаємо ленту в один рядок зі
     свайпом; комірка залишається квадратною, як і на комп'ютері. */
  .card-gallery__thumbs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .card-gallery__thumb {
    flex: 0 0 auto;
    width: 68px;
  }
}


/* ===== Форма заявки ===== */
.order[hidden] {
  display: none;
}
.order {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.order__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 12, 15, 0.6);
}
.order__dialog {
  position: relative;
  width: min(560px, 100%);
  /* ТЗ №116. Підкладка форми світло-сіра, рядки позицій білі —
     раніше було навпаки, і біле тло мініатюри товару читалося
     на сірому рядку як чужорідний квадрат. Кольори ті самі, помінялися
     ролями: ні нового відтінку, ні рамки навколо картинки не потрібно. */
  background: #fafafa;
  margin: auto;
}

.order__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid #eee;
}
.order__title {
  font-size: 1.05rem;
}
.order__close {
  all: unset;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px;
}
.order__close:hover {
  color: var(--text);
}

.order__body {
  padding: 20px 22px 22px;
}
.order__body[hidden],
.order__thanks[hidden] {
  display: none;
}

/* ── Позиції замовлення ── */
.order__items {
  margin-bottom: 8px;
}
.order__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  margin-bottom: 8px;
  /* Рамка несе розділення рядків: між білим рядком і світло-сірою
     підкладкою різниця майже непомітна, і тримається вона на цій лінії. */
  border: 1px solid #e3e3e3;
  background: #fff;
}
.order__item-thumb {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  object-fit: contain;
  background: #fff;
}
/* Поки модель не вибрана, та сама картинка служить заглушкою: окремого
   елемента-заглушки немає — раніше він не ховався (клас із display: block
   перебивав атрибут hidden) і поряд з'являвся другий квадрат.

   Стан позначено класом, а не відсутністю src. У картинки без src
   браузер малює свій значок «не завантажилося» — дрібний квадрат у куті,
   і всередині сірої рамки він читався як побита картинка. Тому в порожньому
   стані в src лежить прозора точка: вона завантажується успішно,
   значку взятися нізвідки, а рамку й тло видно крізь неї. */
.order__item-thumb.is-empty {
  border: 1px dashed #c4c4c4;
  background: #eee;
}
.order__item-name {
  flex: 1;
  min-width: 0; /* інакше довга назва розпирає рядок */
  font-size: 0.9rem;
  line-height: 1.3;
}
.order__item-name small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.8rem;
}
/* Список стискається разом із рядком, довга назва обрізається
   трьома точками — повну людина бачить, коли відкриває список. */
.order__item-name select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 7px 8px;
  border: 1px solid #c9cfd8;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  border-radius: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Назва й ціна першої позиції — теж в один рядок, без переносу */
.order__item-name {
  overflow: hidden;
}
.order__item-name small {
  white-space: nowrap;
}
/* Поки модель не вибрана, лічильник не потрібен: кількість «нічого» сенсу
   не має. Ховаємо через visibility, а не display — місце має залишитися,
   інакше хрестик їде вліво і стовпець рядків роз'їжджається. */
.order__item--empty .order__qty {
  visibility: hidden;
}
.order__item-del {
  all: unset;
  flex: 0 0 auto;
  cursor: pointer;
  color: #bbb;
  font-size: 0.95rem;
  padding: 4px;
}
.order__item-del:hover {
  color: var(--text);
}

/* Кількість кнопками, а не списком: панелі беруть пачками */
.order__qty {
  display: flex;
  flex: 0 0 auto;
  border: 1px solid #c9cfd8;
  background: #fff;
}
.order__qty button {
  all: unset;
  cursor: pointer;
  padding: 6px 10px;
  color: var(--text);
  user-select: none;
}
.order__qty button:hover {
  background: var(--bg-gray-light);
}
.order__qty input {
  width: 38px;
  box-sizing: border-box;
  border: 0;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  padding: 6px 0;
  text-align: center;
  font: inherit;
  color: var(--text);
}
.order__qty input:focus {
  outline: none;
}

.order__add {
  margin-bottom: 18px;
}
.order__add .anchor-link {
  all: unset;
  cursor: pointer;
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
}

/* ── Поля ── */
.order__field {
  display: block;
  margin-bottom: 14px;
}
.order__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.order__req {
  color: #c0392b;
}
.order__field input,
.order__field select,
.order__field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #c9cfd8;
  background: #fff;
  color: var(--text);
  font: inherit;
  border-radius: 0;
}
.order__field textarea {
  resize: vertical;
}
/* Підказки в усіх полях форми одним правилом — включно з прикладом
   номера, який підставляє віджет телефону. Відтінок помітно світліший за
   основний сірий: підказка має читатися як порожнє поле з натяком, а не
   як уже введений текст. Значення введеного тексту й код країни це
   правило не торкається — лише placeholder. */
.order__field input::placeholder,
.order__field textarea::placeholder {
  color: #a8aeb8;
  opacity: 1;
}
.order__field input:focus,
.order__field select:focus,
.order__field textarea:focus {
  outline: none;
  border-color: var(--text);
}
.order__field input.is-invalid {
  border-color: #c0392b;
}

.order__error {
  margin: -8px 0 12px;
  color: #c0392b;
  font-size: 0.88rem;
}
.order__error[hidden] {
  display: none;
}

/* ── Поле телефону: віджет intl-tel-input під наш стиль ─────────────────── */
/* Бібліотека обертає input своєю розміткою. Завдання — щоб поле не
   відрізнялося від «Ім'я» та «Email», а зона коду читалася як приклеєна
   ліворуч частина того самого поля, а не як окремий елемент.

   ВАЖЛИВО про область дії. На вузьких екранах бібліотека створює ДРУГУ
   обгортку .iti в кінці <body> і переносить список країн туди. Усе, що
   привязано до .order__field, на неї не діє, тому правила списку
   нижче навмисно без цієї привязки, а всередині форми залишається лише те,
   що стосується самого поля. Віджет на сайті один, перетнутися нема з чим. */
.iti {
  --iti-border-color: #c9cfd8;
  --iti-hover-color: #f0f3f6;
  --iti-icon-color: #7a828c;
  --iti-country-selector-bg: #fff;
  --iti-spacer-horizontal: 12px;
}
.order__field .iti {
  display: block;
  width: 100%;
}
.order__field .iti__selected-country {
  background: #f4f6f8;
  border-right: 1px solid #c9cfd8;
}
.order__field .iti__selected-country:hover,
.order__field .iti__selected-country:focus-visible {
  background: #eaeef2;
}
/* Ліворуч у коду відступ є — padding зони після стрілки плюс власний
   margin-left у 4px із бібліотеки. Праворуч не було нічого, і код упирався
   в розділову лінію. Повторюємо лівий відступ праворуч, щоб код сидів
   по центру своєї зони. Вендорний файл при цьому не торкаємо. */
.order__field .iti__selected-dial-code {
  color: var(--muted);
  padding-right: calc(var(--iti-arrow-padding) + 4px);
}
/* У сусідніх полів у фокусі рамка темніє — лінія в зони коду має
   темніти разом із нею, інакше залишається світлою смугою посеред поля. */
.order__field .iti:focus-within .iti__selected-country {
  border-right-color: var(--text);
}

/* На вузьких екранах бібліотека переносить список країн в окремий контейнер
   у кінці <body> і розкриває його на весь екран. Контейнер іде з z-index:
   auto і опинявся ПІД нашим попапом заявки (.order, z-index: 10000) —
   на телефоні людина тиснула на прапорець, список відкривався і залишався
   невидимим. Правило навмисно поза .order__field: елемент лежить уже
   не всередині форми. */
.iti--fullscreen-popup {
  z-index: 10001;
}

/* Спадний список країн: наша типографіка, без округлень */
.iti__country-selector {
  border-radius: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
/* Висоту обмежуємо лише в списку, розкритого під полем: на весь екран
   на телефоні він має займати все, що дають. */
.iti--inline-country-selector .iti__country-list {
  max-height: 240px;
}
.iti__country {
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 0.9rem;
}
.iti__country-name {
  color: var(--text);
}
/* Лінії в списку: після «ua» — кінець пари наших ринків, після «gb» — кінець
   усього блока вибраних країн. Тримаються на атрибуті data-iso2, який
   бібліотека сама чіпляє на кожен пункт, — ні JS, ні втручання в її
   розмітку не потрібні. Порядок заданий у COUNTRY_ORDER (order.js); міняєте
   ці дві позиції — правте тут. */
.iti__country[data-iso2="ua"],
.iti__country[data-iso2="gb"] {
  border-bottom: 1px solid #e3e6ea;
}
.iti__dial-code {
  color: var(--muted);
}
/* Пошук за країнами. Усередині форми наше правило .order__field input задає
   рамку й padding шорткатом і перебиває бібліотечне: рамку прибираємо (її
   роль грає лінія в обгортки), а відступ ліворуч повертаємо — інакше текст
   лізе під лупу. Другий селектор у списку потрібен, щоб правило виграло
   і там, де список винесений із форми, і там, де він усередині неї. */
.iti__search-input,
.order__field .iti__search-input {
  font: inherit;
  font-size: 0.9rem;
  border: 0;
  border-radius: 0;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));
  padding-right: calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal));
}
/* Системна рамка фокуса — округлена й темна — вибивалася з верстки.
   Ставимо свою: той самий прийом, що в «Ім'я» та «Email», де за фокуса темніє
   рамка. Тут рамки немає, тому малюємо її через outline без округлення —
   з клавіатури поле так само видно, що й потрібно. */
.iti__search-input:focus,
.iti__search-input:focus-visible,
.order__field .iti__search-input:focus,
.order__field .iti__search-input:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: -1px;
  border-radius: 0;
}

/* ── Блок перед кнопкою ── */
.order__consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 16px 0;
  font-size: 0.88rem;
  line-height: 1.45;
}
.order__consent input {
  margin-top: 3px;
  flex: 0 0 auto;
}

.order__submit {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--bg-dark);
  color: #fff;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.order__submit:hover {
  opacity: 0.9;
}
/* Службовий підпис під кнопкою: коли чекати відповідь і що буде далі */
.order__after {
  margin-top: 10px;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.45;
  text-align: center;
}

/* «Очистити форму» — найнижчий рядок. Той самий кегль і колір, що у фрази
   вище, без курсиву: дія рідкісна, звати до неї нема чого, але знайти можна. */
.order__reset {
  margin-top: 8px;
  text-align: center;
}
.order__reset-link {
  all: unset;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
}
.order__reset-link:hover {
  color: var(--text);
}
.order__reset-link:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 2px;
}

/* ── Екран завершення ── */
.order__thanks {
  text-align: center;
  padding: 46px 26px;
}
.order__thanks-ico {
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border: 2px solid var(--text);
  border-radius: 50%;
  line-height: 40px;
  font-size: 1.25rem;
}
.order__thanks p {
  margin-bottom: 22px;
}
.order__thanks-btn {
  all: unset;
  cursor: pointer;
  display: inline-block;
  padding: 11px 24px;
  border: 1px solid var(--text);
  font-size: 0.9rem;
}
.order__thanks-btn:hover {
  background: var(--bg-gray-light);
}

/* Телефон: попап на весь екран, вміст прокручується */
@media (max-width: 560px) {
  .order {
    padding: 0;
  }
  .order__dialog {
    width: 100%;
    min-height: 100%;
  }
  .order__head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    padding: 14px 16px;
  }
  .order__body {
    padding: 16px 16px 24px;
  }
  /* Позиція замовлення залишається в один рядок на будь-якій ширині.
     Лічильник і хрестик зафіксовані й завжди праворуч, усе решту
     місця забирає назва — вона й стискається. */
  .order__item {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 9px;
  }
  .order__item-name {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Тісно — вужчаємо лічильник, але не даємо йому стиснутися в нуль */
  .order__qty button {
    padding: 6px 8px;
  }
  .order__qty input {
    width: 30px;
  }
}

/* Підсумкова сума під списком позицій */
.order__total {
  margin: 4px 0 14px;
  text-align: right;
  font-size: 0.95rem;
  color: var(--muted);
}
.order__total b {
  color: var(--text);
  font-size: 1.05rem;
}

/* Заголовок другого блока форми: той самий регістр, що «Ваше замовлення» */
.order__label--section {
  margin-top: 22px;
  margin-bottom: 10px;
}

/* Застереження про доставку стоїть там, де людина бачить суму, а не внизу */
.order__total-note {
  margin: -8px 0 16px;
  text-align: right;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.45;
}

/* ===== Документи ===== */
.card-docs {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 680px;
}
/* ТЗ №126. Рядок документа — звичайний текст, а не флекс-рядок.
   Раніше тут стояв флекс із трьох елементів: значок, посилання, підпис
   із форматом і вагою. Посилання як флекс-елемент — блок: його текст
   переносився всередині нього самого, а підпис лишався окремим
   елементом рядка і стояв там, куди його ставило вирівнювання по
   базовій лінії, — праворуч на ПЕРШОМУ рядку. Назва на двох рядках,
   «(PDF, 0,9 МБ)» окремо біля краю.

   Тепер назва й підпис — один потік тексту: підпис іде слідом за
   назвою і переноситься разом із її кінцем. Значок виведений із потоку
   й стоїть абсолютно, тому висячий відступ лишився — перенесений
   рядок назви не заїжджає під нього.

   Числа повторюють колишній замір: текст на 26 px від лівого краю
   (18 значок + 8 зазор), значок на 13 px від верху рядка. 13 — це
   поле 9 px плюс половина різниці між рядком у 25.6 px і значком
   у 18 px. Зміниться кегль або міжрядковий — перерахувати. */
.card-docs__item {
  position: relative;
  padding: 9px 0 9px 26px;
  border-bottom: 1px solid #e2e2e2;
}
/* Лінія розділяє пункти, а не завершує список */
.card-docs__item:last-child {
  border-bottom: 0;
}
/* Значок формату. Малюється маскою, а не картинкою: так він фарбується
   кольором тексту й залишається монохромним, без кольорових бейджів. */
.card-docs__icon {
  position: absolute;
  left: 0;
  top: 13px;
  width: 18px;
  height: 18px;
  background: currentColor;
  color: var(--muted);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.card-docs__meta {
  color: var(--muted);
  font-size: 0.85rem;
  /* Сам підпис не розривається: «(PDF, 0,9 МБ)» читається як одне ціле. */
  white-space: nowrap;
  /* Зазор до назви. Звичайний пробіл між елементами дає близько 4 px,
     решту добираємо полем — щоб відстань лишилася тією самою 8 px,
     що давав gap флекс-рядка. */
  margin-left: 4px;
}

/* Поле-пастка для ботів: прибране з очей, але не display:none —
   частина ботів такі поля ігнорує. */
.order__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}