.header__catalog_list > * {
    height: unset;
}

.header__catalog_subcategories .subcategory-link {
    font-size: 16px;
    line-height: 1em;
    min-height: auto;
    height: auto;
}

.header__catalog_subcategories .subcategory-header {
    min-height: auto;
    height: auto;
}

.header__catalog_subcategories .subcategory-body {
    margin-top: 10px;
}

.header__catalog_subcategories .subcategory__list {
    gap: 10px;
}

.header__catalog_subcategories .subcategory-link,
.header__catalog_subcategories .product__link{
    transition: none;
}

@media (min-width: 1920px) {
    .header__catalog_list {
        width: auto;
        min-width: 369px;
    }
}

.header__catalog.active {
    z-index: 201;
}

.header__catalog_subcategories_frame {
    height: 100%;
}
/* Копірайт "© 2026, Tevix." опускається до нижньої межі футера.
   Базові стилі позиціонують його через padding-top: 110px, через що
   він візуально "висів" посередині правої колонки. */
@media (min-width: 1280px) {
    .footer__contact {
        position: relative;
    }

    .footer__credits {
        top: auto;
        bottom: 0;
        right: 0;
        padding-top: 0;
        padding-bottom: 10px;
    }
}

/* Сторінки пошуку, популярних та нещодавно переглянутих товарів не мають
   блоку .category-navigation (хлібні крихти + слайдер), який на сторінці
   категорії створює верхній відступ. Без нього заголовок майже прилипав
   до хедера. */
.category-segment--search {
    padding-top: 30px;
}


/* Каталог на внутрішніх сторінках поводиться так само, як на головній:
   без виїзду зверху, тільки поява. Дублює правила .header--mainPage з
   components/header-mainpage.css, який редагувати вручну не можна. */
.header .header__catalog,
.header .header__catalog_subcategories_frame {
    transition-duration: 0s;
}

.header .header__catalog {
    opacity: 0;
    transition-duration: .3s;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.header.catalogActive .header__catalog {
    opacity: 1;
}

/* Пункт «Акції» у каталозі хедера має іконку зі шрифту, а категорії —
   <img class="menu-cat-icon"> з жорсткою шириною 20px. Базове правило
   [class^="icon-"]:before додає до гліфа width: 1em (ті самі 20px) плюс
   margin-left/right по .2em, тож іконка-шрифт виходить на 8px ширшою за
   картинку і текст пункту з'їжджає вправо відносно решти списку.
   Сусіднє правило зі stylesheet.css обнуляє лише верхній і нижній
   margin. Мобільне меню вирішує це тим самим способом —
   .catalog-menu__list > * .catalog-menu__item_icon:before { margin: 0 }.
   Заразом вирівнює <i class="icon-grid-01"> — запасну іконку категорій
   без картинки. */
.header__catalog_list > * .header__catalog_item_icon:before {
    margin-left: 0;
    margin-right: 0;
}

/* Плашка доставки, що висувається з-під картки при наведенні.

   1. Висота. Базовий стиль обмежує її через max-height: 20% від висоти картки
      (~76px). Коли рядків два (доставка 1-2 дні + безкоштовна доставка) або
      коли текст переноситься на два рядки у вузькій колонці, вміст не
      вміщається і плашка обрізається посередині рядка разом з нижнім padding.
      Фіксований запас лишає анімацію max-height робочою, але нічого не ріже.

   2. Позиціонування. Базово плашка ставиться через bottom: 1px + box-content +
      width: 100% + translateY(100%) — три різні зсуви, які мають зійтися в одну
      точку. top: 100% дає те саме місце напряму, без transform і без
      розрахунку від нижнього краю.

   3. "Вушка" по кутах. Плашка має рамку з усіх боків, а border-top-color
      робиться прозорим, щоб не було лінії між карткою і плашкою. Але браузер
      ріже кут стику двох сусідніх рамок по діагоналі, тож у верхніх кутах
      половина пікселя лишалася прозорою — на Retina і при масштабі
      125/150% це видно як зарубку, де вертикальна лінія рветься і
      зсувається вбік.
      Верхньої рамки немає взагалі — діагонального стику теж немає.

   Плашка лишається absolute: у потоці вона збільшувала б висоту картки, а
   отже і рядка гріда, і все під ним стрибало б при наведенні. */
@media (min-width: 1280px) {
    .card--expanded .card-expansion {
        top: 100%;
        margin-top: -1px;
        bottom: auto;
        left: -1px;
        right: -1px;
        width: auto;
        box-sizing: border-box;
        border-top-width: 0;
        transform: none;
    }

    .card:hover .card-expansion {
        max-height: 150px;
    }
}

/* Трекінг заголовків, набраних Pinnacle: -7%.
   В em, бо letter-spacing у відсотках браузери не підтримують — саме тому
   чотири правила у stylesheet.css з letter-spacing:-4% ніколи не діяли.
   .timeline__item свідомо не чіпаємо: це не заголовок і в нього додатний
   трекінг .025em. Перелік селекторів повторює ті, де у stylesheet.css
   стоїть font-family:Pinnacle, тож специфічність збігається, а fixes.css
   підключається останнім і перебиває без !important. */
.cart-page__main-btn-title,
.cart-payment-success__order-tag,
.category-navigation .category-slider .category__item_title,
.category-products-slider .category__title,
.category__item_title,
.checkout__info-before-title,
.checkout__products-title,
.complect__title,
.contacts-menu__title,
.des-units__item-title,
.footer__contact-title,
.footer__option-title,
.footer__title,
.modal .cart-modal__info_title,
.modal>.fast-pick .fast-pick__slide_title,
.modal>.fast-pick__window .fast-pick__title,
.order-info__title,
.payments-title,
.pdp-head__meta__title,
.pdp-head__title,
.popular__title,
.product-hero__title,
.product__block .product-card__title,
.protection-window .protection-block__left .block-header__text-title,
.reviews .reviews__title,
.specs-table__group,
.title_h2,
.together-cheaper__title,
.welcome-window__title {
    letter-spacing: -0.07em;
}

/* Варіанти кольору на сторінці товару — прибираємо анімацію.

   У stylesheet.css на .pdp-swatch__btn і на його :hover/--active стоїть
   transition-property: all, через що нижнє підкреслення (border-bottom)
   «наповзає», а .pdp-swatch__btn:hover img ще й масштабує картинку
   до scale(1.1).

   Підкреслення лишається — воно показує вибраний варіант, — але з'являється
   миттєво, без анімації. Збільшення картинки прибрано повністю. */
.pdp-swatch__btn,
.pdp-swatch__btn--active,
.pdp-swatch__btn:hover,
.pdp-swatch__btn img,
.pdp-swatch__btn:hover img {
    transition: none;
}

.pdp-swatch__btn img,
.pdp-swatch__btn:hover img {
    transform: none;
}

/* Підкреслення не має зсувати картинку.

   Кнопка має жорсткі 70x70 при глобальному box-sizing: border-box, а базове
   правило дає їй border-width: 0. Щойно на :hover/--active з'являється
   border-bottom: 4px, контентна коробка стискається з 70 до 66px — і <img>
   з height: 100% стрибає разом з нею.

   Тому місце під підкреслення тримаємо завжди — прозорим бордером тієї ж
   товщини. Ширина всюди 0 0 4px, тож геометрія не змінюється ніколи. */
.pdp-swatch__btn {
    border-style: solid;
    border-width: 0 0 4px;
    border-color: transparent;
}

/* Підкреслення — тільки в активного варіанта.

   Це правило обов'язкове: .pdp-swatch__btn--active має ту саму специфічність
   (один клас), що й базове правило вище, а fixes.css іде після stylesheet.css.
   Без нього прозорий бордер гасив активний стан. */
.pdp-swatch__btn--active {
    border-color: #1a1a1a;
}

/* Ховер неактивної кнопки нічого не малює. У stylesheet.css .pdp-swatch__btn:hover
   фарбує бордер у чорний; тут перебиваємо його свідомо специфічнішим селектором
   (три класи проти двох), щоб не покладатися на порядок підключення.
   Активну кнопку не чіпаємо — під курсором вона лишається підкресленою. */
.pdp-swatch__btn:not(.pdp-swatch__btn--active):hover {
    border-color: transparent;
}

/* Номер замовлення і номер передзамовлення стоять в один ряд.
   Обгортка потрібна тому, що .cart-payment-success__order у stylesheet.css —
   блок з власними вертикальними відступами, і два таких блоки самі по собі
   лягають один під одним. Відступи блоків не чіпаємо: вертикальний ритм
   сторінки лишається тим самим, коли передзамовлення немає. */
.cart-payment-success__orders {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: 40px;
}

/* Підзаголовок над списком товарів передзамовлення: той самий стиль, що й
   у підпису над номером, але тут він відкриває секцію, тож потрібен відступ
   зверху і трохи більший — знизу. */
.cart-payment-success__products + .cart-payment-success__order-title,
.cart-payment-success__price + .cart-payment-success__order-title {
    margin-top: 40px;
    margin-bottom: 20px;
}