/* Import compatibility table styles */
@import "compatibility-table-oznaSnH.css";

/* Import categories styles */
@import "categories-Cc_CHOS.css";

/* Import parts-included tab styles */
@import "part-components-Gt8IIba.css";

/* Import vehicle hub/category styles */
@import "vehicle-W_8yCt-.css";

/* Vendor CSS */
/* Vendor CSS */
@import "../vendor/bootstrap/dist/css/bootstrap.min-gJ4ssuL.css";
@import "../vendor/magnific-popup/dist/magnific-popup.min-9j1O9MO.css";
@import "../vendor/animate.css/animate.min-QZ5-rDR.css";
@import "../vendor/@fortawesome/fontawesome-free/css/fontawesome.min-PKvHrAR.css";
@import "../vendor/@fancyapps/fancybox/dist/jquery.fancybox.min-UYmX0qL.css";

/* Local Vendor CSS - path relative to this file */
/* Note: These files are in assets/vendor or assets/plenty/css. 
   Since app.css is in assets/styles, we need to go up one level. */

@import "../vendor/flickity@2/flickity.min-jVdz0d3.css";

@import "../plenty/css/themify-icons-9IFvupi.css";
@import "../plenty/css/niceselect-L7V3PSp.css";
@import "../plenty/css/flex-slider.min-6AyXFOJ.css";
@import "../plenty/css/slicknav.min-QstRz6v.css";

/* Plenty StyleSheet */
@import "../plenty/css/reset-PnwhDHE.css";
@import "../plenty/style-eRJVdAW.css";
@import "../plenty/css/responsive-zeQBcqJ.css";
@import "../plenty/css/color/color2-V9w-hqw.css";
@import "../plenty/css/plenty-XL5VpxN.css";

/* Search page and header search bar.
   🔴 Стоит ПОСЛЕДНИМ импортом намеренно: тема (`responsive.css`, строка выше) грузится
   этим же файлом, а `@media` специфичности не добавляет — при равной специфичности
   выигрывает правило, идущее позже. Импорт рядом с `vehicle.css` означал бы, что
   `display:none` темы применяется после нашего `display:block`. */
@import "search-fV5nxrd.css";

/* Global favorites entry and browser-local favorites page. */
@import "favorites-G7e_jj2.css";

/* Compact CMS hero sliders on phones. Kept after the legacy theme for the same
   cascade reason as search.css: responsive.css otherwise restores a 300px slide. */
@import "hero-JHMyK4Q.css";

/* Партнёрские предложения на part-page. Тоже после темы и Bootstrap: здесь живёт
   правило `[hidden] { display: none !important }`, без которого `.btn` Bootstrap
   держит кнопки видимыми (авторская таблица сильнее браузерной). */
@import "partner-offers-G347wCU.css";

/* Плоский селектор над hero-блоком таб-страниц. Все правила — через
   `.vehicle-selector--inline …` (0,2,0): база `.vehicle-selector__*` лежит в теле app.css,
   то есть каскадно ПОЗЖЕ этого импорта, и перебивается специфичностью, а не порядком. */
@import "vehicle-selector-inline-9aa9lLn.css";

/* Баннер согласия на cookie. ⛔ Импорт стоит ЗДЕСЬ, а не в конце файла: по спецификации
   `@import` действует только до первого правила, а ниже начинается тело app.css —
   импорт после `body {` браузер молча проигнорировал бы, и баннер остался бы без стилей. */
@import "consent-6q5HGPt.css";

body {
    /* background-color: skyblue; - Removed debug color */
}

/* Homepage vehicle selector hero */
.hero-vehicle-selector {
    padding-top: 22px;
    padding-bottom: 26px;
}

.vehicle-selector__layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.28fr);
    gap: 32px;
    align-items: stretch;
}

.vehicle-selector__card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
    padding: 30px 32px 28px;
    border: 1px solid #e4e7ee;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.vehicle-selector__card-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vehicle-selector__title {
    margin: 0;
    color: #2c2d3f;
    font-size: clamp(1.55rem, 1.9vw, 2rem);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.vehicle-selector__copy {
    margin: 8px 0 0;
    color: #5e6776;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    max-width: none;
}

.vehicle-type-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    background: #f3f5f8;
    align-self: center;
}

.vehicle-type-toggle .toggle-btn {
    min-width: 118px;
    padding: 11px 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #566275;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.vehicle-type-toggle .toggle-btn.active,
.vehicle-type-toggle .toggle-btn:hover,
.vehicle-type-toggle .toggle-btn:focus {
    background: #0088cc;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 136, 204, 0.2);
    outline: none;
}

.vehicle-selector__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vehicle-selector__field {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    margin: 0;
    border: 1px solid #a8afbd;
    border-radius: 6px;
    background: #fff;
    overflow: visible;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    position: relative;
}

.vehicle-selector__field:hover,
.vehicle-selector__field:focus-within {
    border-color: #0088cc;
    box-shadow: 0 8px 20px rgba(0, 136, 204, 0.1);
    z-index: 8;
}

.vehicle-selector__field.is-open {
    border-color: #0088cc;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 8px 20px rgba(0, 136, 204, 0.12);
    z-index: 16;
}

.vehicle-selector__step {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #d6dbe5;
    color: #404854;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}

.vehicle-selector__field-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 16px 10px;
}

.vehicle-selector__field-label {
    color: #5c6677;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.vehicle-selector__native {
    position: absolute;
    inset: auto auto auto -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.vehicle-selector__submit {
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 6px;
    background: #0088cc;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(0, 136, 204, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.vehicle-selector__submit:hover,
.vehicle-selector__submit:focus {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0, 136, 204, 0.24);
    outline: none;
}

.vehicle-selector__submit:disabled {
    opacity: 0.56;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.vs-fallback {
    display: grid;
    gap: 10px;
    padding-top: 6px;
}

.vehicle-selector__fallback-title {
    color: #5d6676;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
}

.vehicle-selector__fallback-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vehicle-selector__fallback-links a,
.vs-fallback-static a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #d5dbe7;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #283343;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.vehicle-selector__fallback-links a:hover,
.vehicle-selector__fallback-links a:focus,
.vs-fallback-static a:hover,
.vs-fallback-static a:focus {
    border-color: #3f67c0;
    color: #3f67c0;
    transform: translateY(-1px);
    outline: none;
}

.vehicle-selector__visual {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 100%;
    padding: 42px;
    border-radius: 6px;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.16);
}

.vehicle-selector__visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 28, 40, 0.18) 0%, rgba(20, 28, 40, 0.08) 45%, rgba(20, 28, 40, 0.04) 100%);
}

.vehicle-selector__visual-content {
    position: relative;
    z-index: 1;
    max-width: 26rem;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.vehicle-selector__visual-kicker {
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vehicle-selector__visual-title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 2.15vw, 2.3rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.045em;
    white-space: nowrap;
}

.vehicle-selector__visual-copy {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.45;
}

.vehicle-selector__control {
    position: static;
    width: 100%;
}

.vehicle-selector__control-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2c2d3f;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.vehicle-selector__control-button:disabled {
    color: #8b95a5;
    cursor: not-allowed;
}

.vehicle-selector__control-button:focus {
    outline: none;
}

.vehicle-selector__control-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vehicle-selector__control-arrow {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-left: 14px;
    border-right: 2px solid #0088cc;
    border-bottom: 2px solid #0088cc;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
}

.vehicle-selector__control.is-open .vehicle-selector__control-arrow {
    transform: rotate(-135deg) translateY(1px);
}

.vehicle-selector__control-menu {
    position: absolute;
    top: 100%;
    right: -1px;
    left: -1px;
    border: 1px solid #0088cc;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    z-index: 20;
}

.vehicle-selector__control-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
}

.vehicle-selector__control-option {
    min-height: 52px;
    padding: 0 18px;
    border-top: 1px solid #e6eaf2;
    color: #2a3341;
    font-size: 15px;
    line-height: 52px;
    font-weight: 500;
    cursor: pointer;
}

.vehicle-selector__control-option:first-child {
    border-top: 0;
}

.vehicle-selector__control-option.is-active {
    background-color: #e8f4fb;
    color: #005b8a;
}

.vehicle-selector__control-option:hover,
.vehicle-selector__control-option.is-selected {
    background-color: #0088cc;
    color: #fff;
}

.vehicle-selector__control-option.is-disabled {
    color: #8b95a5;
    cursor: default;
}

.vehicle-selector__control.is-disabled .vehicle-selector__control-arrow {
    border-right-color: #8b95a5;
    border-bottom-color: #8b95a5;
}

.vs-fallback-static {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 24px 0 8px;
}

/* Homepage trust strip */
.trust-strip {
    padding-top: 28px;
    padding-bottom: 28px;
}

.trust-strip__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.trust-strip__heading {
    margin: 0;
    max-width: 280px;
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6c757d;
}

.trust-strip__grid {
    display: grid;
    /* 4 колонки под 8 показателей = ровно два ряда на любом экране.
       Число показателей задаётся в config/services.yaml (app.homepage.trust_strip):
       менять их вместе, иначе последний ряд обрубается. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 24px;
    flex: 1;
}

.trust-strip__item {
    min-width: 0;
    text-align: center;
}

.trust-strip__value {
    display: block;
    margin-bottom: 4px;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

.trust-strip__label {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: #6c757d;
}

@media (max-width: 1199.98px) {
    .vehicle-selector__layout {
        grid-template-columns: minmax(300px, 0.95fr) minmax(360px, 1.05fr);
        gap: 24px;
    }

    .vehicle-selector__card {
        padding: 24px 24px;
    }

    .vehicle-selector__visual {
        padding: 32px;
    }

    .vehicle-selector__visual-title {
        font-size: clamp(1.45rem, 2vw, 2rem);
    }

    .trust-strip__inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .trust-strip__heading {
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .hero-vehicle-selector {
        padding-top: 14px;
        padding-bottom: 18px;
    }

    .vehicle-selector__layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .vehicle-selector__visual {
        display: none;
    }

    .vehicle-selector__card {
        padding: 24px 18px 22px;
        gap: 18px;
    }

    .vehicle-selector__title {
        font-size: 1.45rem;
    }

    .vehicle-selector__copy {
        font-size: 10.5px;
        line-height: 1.2;
    }

    .vehicle-type-toggle {
        width: 100%;
    }

    .vehicle-type-toggle .toggle-btn {
        flex: 1 1 calc(33.333% - 6px);
        min-width: 0;
        padding: 11px 10px;
        font-size: 12px;
    }

    .vehicle-selector__field {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .vehicle-selector__step {
        font-size: 16px;
    }

    .vehicle-selector__field-body {
        padding: 10px 13px;
    }

    .vehicle-selector__control-button {
        min-height: 30px;
        font-size: 15px;
    }

    .vehicle-selector__submit {
        min-height: 52px;
        font-size: 14px;
    }

    .trust-strip__inner {
        padding: 18px 20px;
        gap: 18px;
    }

    /* Семь показателей вместо четырёх — на планшете и телефоне уменьшаем цифру и подпись,
       иначе полоса занимает больше места, чем сам селектор автомобиля над ней. */
    .trust-strip__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px 10px;
    }

    .trust-strip__value {
        font-size: 1.375rem;
    }

    .trust-strip__label {
        font-size: 0.75rem;
    }
}

@media (max-width: 419.98px) {
    .vehicle-selector__title {
        font-size: 1.45rem;
    }

    /* ⛔ Не 1fr. Показателей стало семь (к четырём «про запчасти» добавились model years /
       vehicle makes / vehicle models), и одна колонка растягивала полосу на семь строк —
       на телефоне это целый экран прокрутки ради подписей. Две колонки помещаются даже
       на 320px: самое длинное значение «552M+» при 1.125rem занимает ~62px. */
    .trust-strip__grid {
        /* Тоже 4 колонки — два ряда и на телефоне. На 320px колонка выходит ~59px,
           поэтому значение ужато до 1rem: «552M+» тогда занимает ~49px и помещается.
           Подписи длиннее колонки («Fitment links») переносятся на вторую строку —
           это допустимо, обрезки нет. */
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px 6px;
    }

    .trust-strip__inner {
        padding: 14px;
        gap: 14px;
    }

    .trust-strip__value {
        font-size: 1rem;
    }

    .trust-strip__label {
        font-size: 0.6875rem;
    }
}


/* ================================
   Shared Tile Styles (Task 04 + Task 05)
   ================================ */

.tile-block {
    aspect-ratio: 2 / 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: 6px;
    background: #f5f7fa;
    border: 1px solid #dde8f4;
    border-top: 3px solid #0088cc;
    padding: 16px 16px 14px;
    text-decoration: none;
    overflow: hidden;
    /* no translateY: modern color-transition hover */
    transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.tile-block:hover {
    background-color: #0088cc;
    border-color: #0088cc;
    box-shadow: 0 6px 22px rgba(0, 136, 204, 0.18);
    text-decoration: none;
}

/* ghost watermark — полный текст, обрезается overflow карточки */
.tile-block__watermark {
    position: absolute;
    left: 12px;
    bottom: -10px;
    font-size: 5.5rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(0, 136, 204, 0.11);
    text-transform: uppercase;
    letter-spacing: -0.05em;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    transition: color 0.22s ease;
}

.tile-block:hover .tile-block__watermark {
    color: rgba(255, 255, 255, 0.15);
}

.tile-block__name {
    position: relative;
    color: #1a2d45;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.22s ease;
}

.tile-block:hover .tile-block__name {
    color: #fff;
}

.tile-block__count {
    position: relative;
    color: #0088cc;
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 5px;
    letter-spacing: 0.03em;
    transition: color 0.22s ease;
}

.tile-block:hover .tile-block__count {
    color: rgba(255, 255, 255, 0.82);
}

/* карточки брендов: название крупнее, чем в карточках категорий */
.brand-tile .tile-block__name {
    font-size: 1.15rem;
    letter-spacing: 0.05em;
}

@media (max-width: 575px) {
    .tile-block {
        aspect-ratio: 3 / 2;
    }

    .brand-tile .tile-block__name {
        font-size: 1.05rem;
    }
}

/* ================================
   Section-title: убираем избыточные отступы темы
   ================================ */

.top-brands .section-title,
.top-categories .section-title,
.trending-parts .section-title {
    padding: 0;
    margin-bottom: 10px;
}

/* ================================
   Nav-tabs: стиль product-area из темы
   ================================ */

.top-brands .nav-tabs,
.top-categories .nav-tabs,
.trending-parts .nav-tabs {
    text-align: center;
    display: inline-block;
    width: 100%;
    border: none;
    margin-bottom: 22px;
}

.top-brands .nav-tabs .nav-item,
.top-categories .nav-tabs .nav-item,
.trending-parts .nav-tabs .nav-item {
    display: inline-block;
    margin-bottom: 0;
}

.top-brands .nav-tabs li a,
.top-categories .nav-tabs li a,
.trending-parts .nav-tabs li a {
    color: #444;
    text-transform: uppercase;
    display: inline-block;
    font-weight: 600;
    background: #f3f7fb;
    padding: 5px 22px;
    border-radius: 3px;
    font-size: 12px;
    letter-spacing: 0.07em;
    margin-right: 4px;
    border: 1px solid #dde8f4;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.top-brands .nav-tabs li a.active,
.top-brands .nav-tabs li a:hover,
.top-categories .nav-tabs li a.active,
.top-categories .nav-tabs li a:hover,
.trending-parts .nav-tabs li a.active,
.trending-parts .nav-tabs li a:hover {
    background: #0088cc;
    color: #fff;
    border-color: #0088cc;
    text-decoration: none;
}

/* ================================
   News & articles
   ================================ */

.news-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin-bottom: 14px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef7fd;
    color: #0088cc;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.news-teaser .shop-single-blog {
    height: calc(100% - 30px);
}

.news-teaser__image-link,
.news-events-page__image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f5f7fb;
}

.news-teaser__image-link {
    min-height: 260px;
}

.news-teaser__image {
    width: 100%;
    height: 260px;
    object-fit: contain;
    padding: 18px;
    transition: transform 0.3s ease;
}

.news-teaser .shop-single-blog:hover .news-teaser__image,
.news-events-page .shop-single-blog:hover .news-events-page__image {
    transform: scale(1.03);
}

.news-events-page__item:hover .news-events-page__image {
    transform: scale(1.03);
}

.news-teaser__placeholder,
.news-events-page__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 260px;
    background: linear-gradient(135deg, #edf3f9 0%, #d9e4ef 100%);
    color: #90a2b6;
    font-size: 42px;
}

.news-teaser__footer {
    margin-top: 10px;
}

.news-teaser__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 50px;
    padding: 0 28px;
    border: 1px solid #d7e2ee;
    border-radius: 999px;
    background: #fff;
    color: #2c2d3f;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.news-teaser__cta:hover,
.news-teaser__cta:focus {
    color: #0088cc;
    border-color: #0088cc;
    box-shadow: 0 12px 22px rgba(0, 136, 204, 0.14);
    transform: translateY(-1px);
    text-decoration: none;
}

.news-events-page .section-title {
    margin-bottom: 38px;
}

.news-events-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 34px;
}

.news-events-filter__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #d9e4ef;
    border-radius: 999px;
    background: #fff;
    color: #5a6372;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.news-events-filter__link:hover,
.news-events-filter__link:focus,
.news-events-filter__link.is-active {
    background: #0088cc;
    border-color: #0088cc;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.news-events-page__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.news-events-page__item {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    border: 1px solid #e5edf5;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.news-events-page__image-link,
.news-events-page__placeholder {
    min-height: 280px;
}

.news-events-page__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px;
    transition: transform 0.3s ease;
}

.news-events-page__item .content,
.news-teaser .shop-single-blog .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.news-events-page__content {
    padding: 28px 32px;
}

.news-events-page__content .title {
    display: block;
    margin-bottom: 0;
}

.news-events-page__excerpt {
    margin: 10px 0 18px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.7;
}

.news-events-page__item .more-btn,
.news-teaser .more-btn {
    margin-top: auto;
}

.news-events-empty {
    padding: 52px 24px;
    border: 1px solid #edf1f5;
    border-radius: 12px;
    background: #f9fbfd;
    text-align: center;
}

.news-events-empty p {
    margin: 0;
    color: #667085;
}

.article-breadcrumbs {
    border-top: 1px solid rgba(0, 0, 0, 0.02);
}

.article-page__hero {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 24px;
    border-radius: 18px;
    background: #f5f7fb;
}

.article-page__hero img {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    border-radius: 10px;
}

.article-page__meta {
    margin-bottom: 24px;
}

.article-page__meta-items {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.article-page__meta-item {
    display: inline-flex;
    align-items: center;
    color: #666;
    font-size: 14px;
    font-weight: 500;
}

.article-page__meta-item i {
    margin-right: 8px;
    color: #0088cc;
}

.article-page__excerpt {
    margin-bottom: 24px;
    color: #4b5563;
    font-size: 18px;
    line-height: 1.8;
}

.article-page__content > *:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .news-events-filter {
        gap: 10px;
        margin-bottom: 28px;
    }

    .news-events-filter__link {
        min-height: 40px;
        padding: 0 14px;
        font-size: 11px;
    }

    .news-teaser__image,
    .news-teaser__placeholder,
    .news-events-page__image-link,
    .news-events-page__placeholder {
        height: 220px;
    }

    .news-events-page__item {
        grid-template-columns: 1fr;
    }

    .news-events-page__content {
        padding: 22px 20px;
    }

    .article-page__excerpt {
        font-size: 16px;
        line-height: 1.7;
    }
}

/* ================================
   Newsroom redesign

   Вся новая тема изолирована префиксом pp-news-. Семейство шрифта намеренно
   не задаётся: блоки наследуют штатную типографику сайта.
   ================================ */

.pp-news-home,
.pp-news-archive,
.pp-news-article,
.pp-news-related {
    --pp-news-ink: #162033;
    --pp-news-ink-soft: #465269;
    --pp-news-muted: #6f7a8d;
    --pp-news-line: #dfe7f0;
    --pp-news-line-strong: #cbd8e7;
    --pp-news-blue: #0088cc;
    --pp-news-blue-dark: #006fa8;
    --pp-news-navy: #12243a;
    color: var(--pp-news-ink);
}

.pp-news-home *,
.pp-news-archive *,
.pp-news-article *,
.pp-news-related * {
    box-sizing: border-box;
}

.pp-news-home a:focus-visible,
.pp-news-archive a:focus-visible,
.pp-news-article a:focus-visible,
.pp-news-related a:focus-visible {
    outline: 3px solid rgba(0, 136, 204, 0.35);
    outline-offset: 3px;
}

.pp-news-heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 38px;
}

.pp-news-heading h2 {
    margin: 0;
    color: var(--pp-news-navy);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.pp-news-heading--small {
    margin-bottom: 30px;
}

.pp-news-heading--small h2 {
    font-size: clamp(30px, 3vw, 40px);
}

.pp-news-eyebrow {
    margin: 0 0 10px;
    color: var(--pp-news-blue-dark);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pp-news-heading__intro {
    max-width: 610px;
    margin: 14px 0 0;
    color: var(--pp-news-ink-soft);
    font-size: 16px;
    line-height: 1.65;
}

.pp-news-section-link,
.pp-news-read-link,
.pp-news-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pp-news-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.pp-news-section-link {
    flex: none;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--pp-news-line-strong);
}

.pp-news-section-link span,
.pp-news-read-link span,
.pp-news-back-link span {
    color: var(--pp-news-blue);
    font-size: 17px;
    transition: transform 180ms ease;
}

.pp-news-section-link:hover,
.pp-news-section-link:focus,
.pp-news-read-link:hover,
.pp-news-read-link:focus,
.pp-news-back-link:hover,
.pp-news-back-link:focus {
    color: var(--pp-news-blue-dark);
    text-decoration: none;
}

.pp-news-section-link:hover span,
.pp-news-read-link:hover span {
    transform: translateX(4px);
}

.pp-news-back-link:hover span {
    transform: translateX(-4px);
}

.pp-news-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    color: var(--pp-news-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.pp-news-meta time {
    position: relative;
}

.pp-news-meta time::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -9px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #a8b2c0;
}

.pp-news-meta time:first-child::before {
    display: none;
}

.pp-news-meta__category {
    color: var(--pp-news-blue-dark);
}

.pp-news-placeholder {
    color: #90a2b6;
    font-size: 42px;
}

/* Homepage newsroom block */

.pp-news-home.section {
    position: relative;
    overflow: hidden;
    padding: var(--pp-section-padding-y, 20px) 0;
    background:
        radial-gradient(circle at 8% 18%, rgba(0, 136, 204, 0.06), transparent 28%),
        linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.pp-news-home::before {
    content: "NEWS";
    position: absolute;
    top: 48px;
    right: -15px;
    color: rgba(18, 36, 58, 0.025);
    font-size: clamp(120px, 16vw, 250px);
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: -0.07em;
    pointer-events: none;
}

.pp-news-home__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(360px, 0.92fr);
    gap: 24px;
}

.pp-news-feature,
.pp-news-compact,
.pp-news-card {
    overflow: hidden;
    border: 1px solid var(--pp-news-line);
    background: #fff;
    box-shadow: 0 10px 32px rgba(18, 36, 58, 0.05);
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.pp-news-feature:hover,
.pp-news-compact:hover,
.pp-news-card:hover {
    transform: translateY(-3px);
    border-color: #c6d8e8;
    box-shadow: 0 26px 70px rgba(18, 36, 58, 0.14);
}

.pp-news-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.45), transparent),
        #eef3f8;
}

.pp-news-media img {
    width: 100%;
    height: 100%;
    padding: 28px;
    object-fit: contain;
    transition: transform 500ms cubic-bezier(.2, .65, .25, 1);
}

.pp-news-feature:hover .pp-news-media img,
.pp-news-compact:hover .pp-news-media img {
    transform: scale(1.035);
}

.pp-news-feature {
    min-height: 560px;
    display: grid;
    grid-template-rows: 320px 1fr;
    border-radius: 26px;
}

.pp-news-feature__index {
    position: absolute;
    right: 22px;
    bottom: -17px;
    color: rgba(18, 36, 58, 0.08);
    font-size: 88px;
    font-weight: 800;
    line-height: 1;
}

.pp-news-feature__body {
    padding: 28px 34px 32px;
}

.pp-news-feature h3,
.pp-news-compact h3,
.pp-news-card h2,
.pp-news-related__card h3 {
    color: var(--pp-news-navy);
    font-weight: 700;
    letter-spacing: -0.018em;
}

.pp-news-feature h3 {
    max-width: 730px;
    margin: 13px 0 9px;
    font-size: clamp(25px, 2.4vw, 34px);
    line-height: 1.14;
}

.pp-news-feature h3 a,
.pp-news-compact h3 a,
.pp-news-card h2 a,
.pp-news-related__card h3 a {
    color: inherit;
    transition: color 180ms ease;
}

.pp-news-feature h3 a:hover,
.pp-news-feature h3 a:focus,
.pp-news-compact h3 a:hover,
.pp-news-compact h3 a:focus,
.pp-news-card h2 a:hover,
.pp-news-card h2 a:focus,
.pp-news-related__card h3 a:hover,
.pp-news-related__card h3 a:focus {
    color: var(--pp-news-blue-dark);
    text-decoration: none;
}

.pp-news-feature__body > p {
    max-width: 640px;
    margin: 0 0 19px;
    color: var(--pp-news-ink-soft);
    font-size: 14px;
    line-height: 1.7;
}

.pp-news-home__secondary {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.pp-news-compact {
    min-height: 268px;
    display: grid;
    grid-template-columns: minmax(150px, 42%) minmax(0, 1fr);
    border-radius: 18px;
}

.pp-news-compact__media img {
    padding: 18px;
}

.pp-news-compact__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 24px 23px;
}

.pp-news-compact h3 {
    display: -webkit-box;
    overflow: hidden;
    margin: 13px 0 20px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    font-size: clamp(18px, 1.45vw, 23px);
    line-height: 1.22;
}

.pp-news-compact .pp-news-read-link {
    margin-top: auto;
}

/* News archive */

.pp-news-archive {
    min-height: 100vh;
    background: #f8fafc;
}

.pp-news-archive__hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--pp-news-line);
    background: var(--pp-news-navy);
    color: #fff;
}

.pp-news-archive__hero::after {
    content: "";
    position: absolute;
    top: -300px;
    right: 4vw;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
    box-shadow: 0 0 0 80px rgba(255, 255, 255, 0.025), 0 0 0 160px rgba(255, 255, 255, 0.018);
}

.pp-news-archive__hero-inner {
    position: relative;
    z-index: 1;
    min-height: 250px;
    display: grid;
    grid-template-columns: 1fr minmax(340px, 500px);
    align-items: end;
    gap: 60px;
    padding-top: 64px;
    padding-bottom: 54px;
}

.pp-news-archive__hero .pp-news-eyebrow {
    color: #66cbf3;
}

.pp-news-archive__hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(46px, 6vw, 72px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.pp-news-archive__hero-inner > p {
    margin: 0;
    color: #c4cfdd;
    font-size: 18px;
    line-height: 1.55;
}

.pp-news-archive__content {
    padding: 48px 0 88px;
}

.pp-news-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.pp-news-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.pp-news-filter__link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 1px solid var(--pp-news-line-strong);
    border-radius: 999px;
    background: #fff;
    color: #526074;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.pp-news-filter__link:hover,
.pp-news-filter__link:focus {
    border-color: var(--pp-news-blue);
    color: var(--pp-news-blue-dark);
    text-decoration: none;
}

.pp-news-filter__link.is-active {
    border-color: var(--pp-news-blue);
    background: var(--pp-news-blue);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 136, 204, 0.2);
}

.pp-news-filter__count {
    flex: none;
    margin: 0;
    color: var(--pp-news-muted);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pp-news-filter__count strong {
    color: var(--pp-news-navy);
    font-size: 15px;
}

.pp-news-archive__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.pp-news-card {
    min-height: 245px;
    display: grid;
    grid-template-columns: minmax(180px, 36%) minmax(0, 1fr);
    border-radius: 20px;
}

.pp-news-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #eef3f8;
}

.pp-news-card__media img {
    width: 100%;
    height: 100%;
    padding: 20px;
    object-fit: contain;
    transition: transform 450ms cubic-bezier(.2, .65, .25, 1);
}

.pp-news-card:hover .pp-news-card__media img {
    transform: scale(1.035);
}

.pp-news-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 24px 22px;
}

.pp-news-card h2 {
    display: -webkit-box;
    overflow: hidden;
    margin: 11px 0 9px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 20px;
    line-height: 1.2;
}

.pp-news-card__body > p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 16px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--pp-news-ink-soft);
    font-size: 13px;
    line-height: 1.55;
}

.pp-news-card .pp-news-read-link {
    margin-top: auto;
}

.pp-news-empty {
    padding: 52px 24px;
    border: 1px solid var(--pp-news-line);
    border-radius: 18px;
    background: #fff;
    text-align: center;
}

.pp-news-empty p {
    margin: 0;
    color: var(--pp-news-muted);
}

/* Single article */

.pp-news-article {
    padding-top: 50px;
    background: #fff;
}

.pp-news-article__header {
    padding-bottom: 42px;
}

.pp-news-back-link {
    margin-bottom: 44px;
    color: var(--pp-news-ink-soft);
}

.pp-news-article__heading {
    max-width: 1040px;
}

.pp-news-meta--article {
    margin-bottom: 18px;
    font-size: 12px;
}

.pp-news-article__heading h1 {
    max-width: 1040px;
    margin: 0;
    color: var(--pp-news-navy);
    font-size: clamp(40px, 5.5vw, 68px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.042em;
}

.pp-news-article__hero {
    margin-bottom: 58px;
}

.pp-news-article__hero-media {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.52), transparent 55%),
        #eef3f8;
}

.pp-news-article__hero-media::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border: 1px solid rgba(18, 36, 58, 0.07);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(18, 36, 58, 0.018), 0 0 0 140px rgba(18, 36, 58, 0.012);
}

.pp-news-article__hero-media img {
    position: relative;
    z-index: 1;
    width: min(84%, 980px);
    max-height: 420px;
    object-fit: contain;
}

.pp-news-article__layout {
    padding-bottom: 92px;
}

.pp-news-article__content {
    max-width: 780px;
    margin-inline: auto;
    color: #303b4c;
    font-size: 17px;
    line-height: 1.78;
}

.pp-news-article__content > p:first-child {
    color: var(--pp-news-ink);
    font-size: 20px;
    line-height: 1.68;
}

.pp-news-article__content p {
    margin: 0 0 26px;
}

.pp-news-article__content h2,
.pp-news-article__content h3 {
    color: var(--pp-news-navy);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.pp-news-article__content h2 {
    margin: 50px 0 18px;
    font-size: 32px;
    line-height: 1.18;
}

.pp-news-article__content h3 {
    margin: 38px 0 16px;
    font-size: 24px;
    line-height: 1.25;
}

.pp-news-article__content a {
    color: var(--pp-news-blue-dark);
    text-decoration: underline;
    text-decoration-color: rgba(0, 111, 168, 0.3);
    text-underline-offset: 3px;
}

.pp-news-article__content img {
    max-width: 100%;
    height: auto;
    margin: 14px 0 30px;
    border-radius: 14px;
}

.pp-news-article__content blockquote {
    margin: 40px 0;
    padding: 25px 28px;
    border-left: 4px solid var(--pp-news-blue);
    background: #f2f8fc;
    color: var(--pp-news-navy);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.55;
}

.pp-news-article__content ul,
.pp-news-article__content ol {
    margin: 0 0 26px;
    padding-left: 25px;
}

.pp-news-article__content li {
    margin-bottom: 9px;
}

.pp-news-article__media {
    max-width: 960px;
    margin: 50px auto 0;
}

.pp-news-video {
    margin: 0;
}

.pp-news-video + .pp-news-video {
    margin-top: 42px;
}

.pp-news-video__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(18, 36, 58, 0.12);
    border-radius: 20px;
    background: #08111c;
    box-shadow: 0 22px 54px rgba(18, 36, 58, 0.16);
}

.pp-news-video__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.pp-news-video figcaption {
    max-width: 780px;
    margin: 14px auto 0;
    color: var(--pp-news-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* Related news is a dedicated partial; shared related blocks on catalog pages
   deliberately keep their existing styles. */

.pp-news-related {
    padding: 72px 0 86px;
    border-top: 1px solid var(--pp-news-line);
    background: #f7f9fc;
}

.pp-news-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.pp-news-related__card {
    overflow: hidden;
    border: 1px solid var(--pp-news-line);
    border-radius: 18px;
    background: #fff;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.pp-news-related__card:hover {
    transform: translateY(-3px);
    border-color: #c6d8e8;
    box-shadow: 0 18px 45px rgba(18, 36, 58, 0.11);
}

.pp-news-related__media {
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #eef3f8;
}

.pp-news-related__media img {
    width: 100%;
    height: 210px;
    padding: 18px;
    object-fit: contain;
    transition: transform 450ms cubic-bezier(.2, .65, .25, 1);
}

.pp-news-related__card:hover .pp-news-related__media img {
    transform: scale(1.035);
}

.pp-news-related__body {
    padding: 22px 24px 26px;
}

.pp-news-related__card h3 {
    margin: 12px 0 0;
    font-size: 20px;
    line-height: 1.26;
}

@media (max-width: 1199.98px) {
    .pp-news-home__grid {
        grid-template-columns: 1fr;
    }

    .pp-news-feature {
        min-height: 380px;
        grid-template-columns: minmax(330px, 47%) minmax(0, 1fr);
        grid-template-rows: 1fr;
    }

    .pp-news-feature__body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .pp-news-home__secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .pp-news-card {
        grid-template-columns: 165px minmax(0, 1fr);
    }
}

@media (max-width: 991.98px) {
    .pp-news-archive__hero-inner {
        grid-template-columns: 1fr minmax(280px, 380px);
        gap: 36px;
    }

    .pp-news-archive__grid {
        grid-template-columns: 1fr;
    }

    .pp-news-card {
        grid-template-columns: minmax(210px, 34%) minmax(0, 1fr);
    }

    .pp-news-article__hero-media {
        min-height: 420px;
    }

    .pp-news-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pp-news-related__card:last-child {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .pp-news-home.section {
        padding: var(--pp-section-padding-y, 8px) 0;
    }

    .pp-news-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
    }

    .pp-news-heading h2 {
        font-size: 34px;
    }

    .pp-news-feature {
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: 260px auto;
        border-radius: 20px;
    }

    .pp-news-feature__body {
        display: block;
        padding: 24px;
    }

    .pp-news-feature h3 {
        font-size: 26px;
    }

    .pp-news-home__secondary {
        grid-template-columns: 1fr;
    }

    .pp-news-compact {
        min-height: 230px;
    }

    .pp-news-archive__hero-inner {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 48px;
        padding-bottom: 42px;
    }

    .pp-news-archive__hero h1 {
        font-size: 45px;
    }

    .pp-news-archive__hero-inner > p {
        font-size: 16px;
    }

    .pp-news-archive__content {
        padding: 34px 0 64px;
    }

    .pp-news-filter-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .pp-news-filter {
        width: calc(100vw - 30px);
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 2px 15px 12px;
        margin-inline: -15px;
        scrollbar-width: thin;
    }

    .pp-news-filter__link {
        flex: none;
    }

    .pp-news-card {
        min-height: 230px;
        grid-template-columns: minmax(150px, 34%) minmax(0, 1fr);
    }

    .pp-news-card__body {
        padding: 21px 20px;
    }

    .pp-news-card h2 {
        font-size: 19px;
    }

    .pp-news-article {
        padding-top: 36px;
    }

    .pp-news-back-link {
        margin-bottom: 34px;
    }

    .pp-news-article__header {
        padding-bottom: 32px;
    }

    .pp-news-article__heading h1 {
        font-size: 38px;
        line-height: 1.06;
    }

    .pp-news-article__hero {
        margin-bottom: 42px;
    }

    .pp-news-article__hero-media {
        min-height: 320px;
        border-radius: 20px;
    }

    .pp-news-article__hero-media img {
        width: 90%;
        max-height: 270px;
    }

    .pp-news-article__layout {
        padding-bottom: 66px;
    }

    .pp-news-article__content {
        font-size: 16px;
        line-height: 1.72;
    }

    .pp-news-article__content > p:first-child {
        font-size: 18px;
    }

    .pp-news-article__content h2 {
        margin-top: 40px;
        font-size: 28px;
    }

    .pp-news-article__media {
        margin-top: 38px;
    }

    .pp-news-video__frame {
        border-radius: 16px;
        box-shadow: 0 16px 38px rgba(18, 36, 58, 0.14);
    }

    .pp-news-related {
        padding: 56px 0 66px;
    }

    .pp-news-related__grid {
        grid-template-columns: 1fr;
    }

    .pp-news-related__card:last-child {
        display: block;
    }
}

@media (max-width: 575.98px) {
    .pp-news-compact {
        min-height: 210px;
        grid-template-columns: 128px minmax(0, 1fr);
    }

    .pp-news-compact__body {
        padding: 20px 18px;
    }

    .pp-news-compact h3 {
        margin-bottom: 15px;
        -webkit-line-clamp: 4;
        font-size: 18px;
    }

    .pp-news-card {
        grid-template-columns: 1fr;
    }

    .pp-news-card__media {
        height: 220px;
    }

    .pp-news-card__body {
        min-height: 250px;
    }

    .pp-news-article__heading h1 {
        font-size: 34px;
    }

    .pp-news-article__hero-media {
        min-height: 260px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-news-home *,
    .pp-news-archive *,
    .pp-news-article *,
    .pp-news-related * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Ряд входов в vehicle-таксономию, стоит между полосой цифр и Top Brands.
   Прежний локальный обход полностью обнулял `.section`, а внутреннему ряду давал
   отдельные 18px сверху. После централизации ритма используем общий token сверху. */
.vehicle-taxonomy-links.section {
    padding: var(--pp-section-padding-y, 20px) 0 0;
}

.vehicle-taxonomy-links .vs-fallback-static {
    padding: 0;
}

@media (min-width: 992px) {
    /* Desktop-эталон — расстояние от последнего ряда карточек Top Brands до
       `Top Categories`: 64px. Перед `Top Brands` было только 20px. Недостающие
       44px = section padding 20px + bootstrap `.mb-4` 24px. Один и тот же переход
       нужен на главной и после `Shop … parts by year` внутри таб-страниц. */
    .vehicle-taxonomy-links.section {
        padding-bottom: calc(var(--pp-section-padding-y, 20px) + 1.5rem);
    }

    .vehicle-shop-by-year {
        margin-bottom: calc(var(--pp-section-padding-y, 20px) + 1.5rem);
    }
}

/* Шапка: строка поиска стояла несимметрично — 33px сверху против 20px до полосы меню
   (замер 24.08). Причина: `.search-bar` несёт `margin-top: 12px`, а `.middle-inner`
   даёт по 20px сверху и снизу. Делим отступ пополам и ужимаем сам контейнер: поиск
   встаёт по центру, шапка теряет 12px высоты. */
/* 🔴 Только от 768px и выше. Ниже этого порога колонки шапки стакаются (`col-12`),
   и вертикальный зазор между логотипом и строкой поиска даёт ровно тот `margin-top`,
   который здесь обнуляется — без медиазапроса логотип на телефоне прилипал к полю
   поиска (замечание владельца 24.08). Центрирование в строке на стопке колонок
   смысла тоже не имеет.

   ⚠️ Селектор с `.header.shop` обязателен: тема задаёт `.header.shop .middle-inner`
   и `.header.shop .search-bar` (style.css:630, 732), то есть специфичность 0,3,0 —
   правило с одним классом `.header` она перебивает независимо от порядка. */
@media (min-width: 768px) {
    .header.shop .middle-inner {
        /* Снизу оставляем тот же зазор до полосы меню, что был всегда (20px, решение
           владельца 24.08) — уменьшать надо было только верхний. Строка поиска ниже
           колонки на 2px, поэтому 19px паддинга дают ровно 20px зазора с обеих сторон. */
        padding-top: 19px;
        padding-bottom: 19px;
    }

    /* Обнулять margin надо у ОБОИХ узлов: у `.search-bar` он 33px (style.css:630),
       у обёртки `.search-bar-top` — свои 10px, и при схлопывании выигрывает больший.
       Симметрию даёт не margin, а вертикальное центрирование в строке: высоту колонки
       задаёт логотип (60px), строка поиска — 48px, разница делится поровну. */
    .header.shop .search-bar,
    .header.shop .search-bar-top {
        margin-top: 0;
    }

    .header.shop .middle-inner .row {
        align-items: center;
    }

    /* Логотип нёс `margin: 19px 0 0` (style.css:618) — при центрировании строки это
       опускало его на 10px ниже середины поля поиска (замер: центр логотипа 54 против
       44 у строки). Обнуляем и отдаём выравнивание флексу. */
    .header.shop .middle-inner .logo {
        margin-top: 0;
    }
}

/* Полоса хлебных крошек: тема даёт `padding: 30px 0` (`plenty/css/reset.css:279`),
   то есть 84px под одну строку текста — против 55px у полосы меню над ней (замер
   headless-хромом 24.08). Полтора десятка пикселей здесь стоят дорого: именно они
   выталкивают блок партнёрских предложений за первый экран. Выравниваем по меню.
   ⚠️ Мобильное правило `padding: 10px 0 !important` (`categories.css:24`) сильнее
   и остаётся в силе — на телефоне полоса и так узкая. */
.breadcrumbs {
    padding: 15px 0;
}

/* Страница запчасти: тема задаёт `.shop.single { padding: 20px 0 100px }`
   (plenty/style.css), и эти 100px висели пустотой между табами и блоком
   аналогов — замер headless-хромом: section pb=100px, .product-info bottom=1360,
   .part-analogs top=1460. Специфичность 0,3,0 перебивает тему независимо от
   порядка импортов (style.css переимпортируется ниже по app.css). */
.shop.single.section {
    /* Сверху тема даёт 20px, и вместе с внутренним отступом колонки это 30px
       от полосы крошек до галереи (замер 24.08). По решению владельца ужимаем
       на треть — до 20px. */
    padding-top: 10px;
    padding-bottom: 30px;
}

.vehicle-taxonomy-links__title {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    color: #5d6676;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    /* Цель — три пилюли в ОДНУ строку на телефоне. Заголовок при этом уходит на свою
       строку (flex-wrap), это ожидаемо. Кегль и паддинги ужаты ровно настолько, чтобы
       «Cars & SUVs» + «Trucks» + «Motorcycles» с двумя зазорами укладывались в ~290px
       полезной ширины при экране 320px. */
    .vehicle-taxonomy-links__row {
        gap: 8px;
        justify-content: center;
    }

    .vehicle-taxonomy-links__row a {
        min-height: 34px;
        padding: 0 10px;
        font-size: 12px;
    }

    .vehicle-taxonomy-links__title {
        min-height: 0;
        width: 100%;
        justify-content: center;
        font-size: 12px;
    }
}

/* Общая типографика CMS- и SEO-текстов каталога.
   Rich text занимает всю ширину родительской колонки; отдельно нормализованы ритм,
   цвет и интервалы, чтобы соседние <p> не слипались. */
.catalog-copy {
    width: 100%;
    color: #465269;
    font-size: 16px;
    line-height: 1.78;
    overflow-wrap: break-word;
    text-wrap: pretty;
}

.catalog-copy p {
    margin: 0;
}

.catalog-copy p + p {
    margin-top: 20px;
}

.catalog-copy h2,
.catalog-copy h3,
.catalog-copy h4 {
    margin-bottom: 14px;
    color: #162033;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.catalog-copy h2 {
    margin-top: 38px;
    font-size: 28px;
}

.catalog-copy h3 {
    margin-top: 30px;
    font-size: 22px;
}

.catalog-copy h4 {
    margin-top: 24px;
    font-size: 18px;
}

.catalog-copy a {
    color: #006fa8;
    text-decoration: underline;
    text-decoration-color: rgba(0, 111, 168, 0.3);
    text-underline-offset: 3px;
}

.catalog-copy a:hover,
.catalog-copy a:focus {
    color: #0088cc;
    text-decoration-color: currentColor;
}

.catalog-copy b,
.catalog-copy strong {
    color: #162033;
    font-weight: 700;
}

.catalog-copy ul,
.catalog-copy ol {
    margin: 20px 0 0;
    padding-left: 24px;
}

.catalog-copy li + li {
    margin-top: 8px;
}

.catalog-copy blockquote {
    margin: 28px 0 0;
    padding: 18px 22px;
    border-left: 3px solid #0088cc;
    background: #f2f8fc;
    color: #253349;
}

.catalog-copy img {
    max-width: 100%;
    height: auto;
    margin: 24px 0;
    border-radius: 12px;
}

.catalog-copy > :first-child {
    margin-top: 0;
}

.catalog-copy > :last-child {
    margin-bottom: 0;
}

/* Короткие фактические вводные над каталогами не должны выглядеть как статья. */
.catalog-copy--compact {
    font-size: 15px;
    line-height: 1.72;
}

.catalog-copy--compact p + p {
    margin-top: 14px;
}

/* Карточка детали: тот же текстовый ритм, что у CMS-контента каталога, но внутри
   своей сетки. Правила ограничены product summary и вкладкой Description — таблицы
   характеристик, OEM, кроссов и совместимости остаются без изменений. */
.shop.single .part-meta-copy {
    margin-top: 8px;
    color: #465269;
    font-size: 14px;
    line-height: 1.55;
}

.shop.single .part-meta-copy p {
    margin: 0;
}

.shop.single .part-meta-copy p + p {
    margin-top: 3px;
}

.shop.single .part-meta-copy strong {
    color: #303b4c;
    font-weight: 700;
}

.shop.single .product-des .short .description.part-summary-copy {
    margin: 20px 0 0;
    padding-bottom: 20px;
    color: #465269;
    font-size: 15px;
    line-height: 1.7;
}

.shop.single .part-detail-copy {
    font-size: 15px;
    line-height: 1.72;
}

.shop.single .part-detail-copy .row > .col-12 + .col-12 {
    margin-top: 18px;
}

.shop.single .part-detail-copy .single-des h2 {
    color: #162033;
    line-height: 1.3;
}

.shop.single .part-detail-copy i {
    color: #6f7a8d;
}

@media (max-width: 767.98px) {
    .catalog-copy {
        font-size: 15px;
        line-height: 1.72;
    }

    .catalog-copy p + p {
        margin-top: 16px;
    }

    .catalog-copy h2 {
        margin-top: 32px;
        font-size: 25px;
    }

    .catalog-copy h3 {
        margin-top: 26px;
        font-size: 21px;
    }

    .catalog-copy--compact {
        font-size: 14px;
    }

    .catalog-copy--compact p + p {
        margin-top: 12px;
    }

    .shop.single .part-meta-copy,
    .shop.single .product-des .short .description.part-summary-copy,
    .shop.single .part-detail-copy {
        font-size: 14px;
    }

    .shop.single .part-detail-copy .row > .col-12 + .col-12 {
        margin-top: 14px;
    }
}

/* ==========================================================================
   Global vertical rhythm
   ========================================================================== */

/* Один источник для внешнего воздуха секций. Desktop сжат с темовых 30px до
   20px; tablet больше не раздувается до 50px; mobile сохраняет уже принятые 8px.
   Значение переопределяется на breakpoint, а все `.section` читают один token. */
:root {
    --pp-section-padding-y: 20px;
}

.section {
    padding-top: var(--pp-section-padding-y);
    padding-bottom: var(--pp-section-padding-y);
}

@media (max-width: 991.98px) {
    :root {
        --pp-section-padding-y: 16px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --pp-section-padding-y: 8px;
    }
}

/* News раньше имел собственные 78/88px и выпадал из общего ритма даже после
   исправления `.section`. Более специфичный селектор фиксирует тот же token. */
section.pp-news-home.section {
    padding-top: var(--pp-section-padding-y);
    padding-bottom: var(--pp-section-padding-y);
}

/* На детали отмеченные интервалы лежат внутри одной секции и глобальным token
   не управляются: тема задаёт 50px до табов и 35px до первого CMS-заголовка. */
.shop.single .product-info {
    margin-top: 24px;
}

.shop.single .single-des {
    margin-top: 20px;
}

@media (max-width: 991.98px) {
    .shop.single .product-info {
        margin-top: 20px;
    }

    .shop.single .single-des {
        margin-top: 18px;
    }
}

@media (max-width: 767.98px) {
    .shop.single .product-info,
    .shop.single .single-des {
        margin-top: 16px;
    }

    /* До централизации это обеспечивал глобальный `section.section !important`
       из categories.css. Сохраняем принятые 8px явно для более специфичного
       product-page, у которого есть собственное desktop-правило 10/30px. */
    .shop.single.section {
        padding-top: var(--pp-section-padding-y);
        padding-bottom: var(--pp-section-padding-y);
    }
}

/* SEO-семантика заголовков, этап 2: бывшие H4/H6 стали div — Bootstrap-правило
   h1–h6 (font-weight 500, line-height 1.2, margin-bottom .5rem) на них больше
   не действует, поэтому размеры восстанавливаются по классу. Правила темы
   (.footer .single-footer h4, .hero-area4 .big-content h4.title) намеренно
   не удалялись: тема общая для всей витрины. */
.footer .single-footer .footer-heading {
    font-size: 17px;
    line-height: 1.2;
    font-weight: 600;
    color: #fff;
    text-transform: capitalize;
    margin-bottom: 30px;
}

.hero-area4 .big-content .title {
    color: #fff;
}

.categories-sidebar__heading {
    margin-top: 0;
    font-size: 1rem;
    line-height: 1.2;
}

/* ⛔ 1.1rem, а не 1rem. Размер задаёт НЕ Bootstrap, а тег-квалифицированное правило
   `.mobile-compatibility .car-header h6 { font-size: 1.1rem }`
   (compatibility-table.css:23, специфичность 0,2,1) — оно бьёт `h6 { font-size: 1rem }`
   и после смены тега на div перестаёт матчиться вовсе. `color: #006DA3` и
   `margin-bottom: .25rem` из того же правила восстанавливать не нужно: цвет перекрыт
   инлайновым `style="color:#212529 !important"`, отступ — утилитой `.mb-1`. */
.compatibility-card__title {
    font-size: 1.1rem;
    line-height: 1.2;
}

/* Группа совместимости была h5 и под правило темы `.single-des h2,h3,h4` не попадала:
   после смены тега размер и отступ надо вернуть к прежним. Селектор повторяет
   специфичность темы плюс класс — иначе 22px/15px победят.
   ⛔ 700 и 0 — а НЕ 500 и 0.5rem: app.css импортирует bootstrap.min.css строкой 15,
   а ../plenty/css/reset.css — строкой 33, то есть ПОЗЖЕ; reset.css:172 ставит
   `font-weight:700; margin:0`, и сегодняшний <h5> рисуется 20px / 700 / mb 0. */
.shop.single .single-des h3.compatibility-group__title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0;
}

/* H1 главной переехал в DOM выше карточки селектора. Grid размещает элементы
   в order-modified document order, поэтому двух строк достаточно, чтобы на десктопе
   визуал вернулся во вторую колонку, а карточка — в первую: раскладка ≥768px остаётся
   ровно такой, как сегодня.
   ⛔ Эти два правила НЕ обёрнуты в media query и действуют на ВСЕХ ширинах. Ниже 767.98px
      колонка одна, но `order` в grid работает и там: карточка с `order: 1` встала бы выше
      визуала с `order: 2`, то есть H1 снова оказался бы ПОД H2 «Select Your Vehicle».
      Поэтому мобильный блок ниже обязан вернуть `order: 0` на `.vehicle-selector__visual`;
      удалить его как «лишний» = вернуть дефект. */
.vehicle-selector__card {
    order: 1;
}

.vehicle-selector__visual {
    order: 2;
}

/* Мобильный: картинку по-прежнему не показываем, но заголовок обязан остаться — иначе
   mobile-first рендер снова получает страницу без H1. Поэтому вместо `display:none`
   на всём блоке (действующее правило — наш же app.css:563) гасим только декор.
   ⛔ `background-image` задан ИНЛАЙНОМ в разметке, перебить его можно только `!important`. */
@media (max-width: 767.98px) {
    .vehicle-selector__visual {
        display: block;
        order: 0; /* ⛔ несущая строка, не косметика — см. врезку выше */
        min-height: 0;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        background-image: none !important;
    }

    .vehicle-selector__visual-overlay,
    .vehicle-selector__visual-kicker,
    .vehicle-selector__visual-copy {
        display: none;
    }

    .vehicle-selector__visual-content {
        max-width: none;
        color: inherit;
        text-shadow: none;
    }

    .vehicle-selector__visual-title {
        color: #2c2d3f;
        font-size: 1.45rem;
        line-height: 1.15;
        white-space: normal;
    }
}

/* ⛔ Именно 450px, а не 767px: мобильный отступ футера тема задаёт в
   assets/plenty/css/responsive.css:1599, а этот блок лежит внутри
   `@media only screen and (max-width: 450px)`. Перекрытие на 767px сжало бы отступ
   с 30px до 12px на всём диапазоне 451–767px, где сегодня 30px. */
@media only screen and (max-width: 450px) {
    .footer .single-footer .footer-heading {
        margin-bottom: 12px;
    }
}

/* Иконки соцсетей в футере. Тема задаёт им `font-size: 16px`
   (assets/plenty/style.css:4927) — на тёмном фоне рядом с 15px-текстом это читается
   как случайный мусор, а не как ряд кнопок. Поднимаем до 22px и добавляем площадь
   нажатия: 16px-глиф даёт цель ~16×16, что вдвое меньше рекомендованных 24×24 для
   пальца.
   ⚠️ Селектор с `.footer` — той же специфичности (0,3,1), что у правила темы, поэтому
   выигрывает порядком: app.css подключается после style.css (см. импорты выше).
   ⛔ Дочерний комбинатор `> ul` обязателен. В блоке `.social` ДВА списка: текстовый
      внутри `.contact` (Contact us / Rights holders) и иконочный прямым потомком.
      Селектор без `>` раздувал до 22px и текстовые ссылки — поймано замером. */
.footer .social > ul li a {
    font-size: 22px;
    line-height: 1;
    padding: 4px;
}

.footer .social > ul li {
    margin-right: 18px;
}

/* Текстовые ссылки блока «Get In Touch» тема оставила без размера, и они наследовали
   16px, тогда как в соседних колонках («Information», «Legal») ссылки 14px — замер
   30.08. Три колонки стоят в ряд, и разнобой читается как ошибка вёрстки.
   Шаг между строками тоже приводим к `.links ul li` (8px против 4px). */
.footer .social .contact ul li a {
    font-size: 14px;
}

.footer .social .contact ul li {
    margin-bottom: 8px;
}

/* Тема сдвигает только ссылки `.links` на 10px вправо при hover. У соседнего
   `Get In Touch` такого движения нет, поэтому три колонки выглядят собранными
   по разным правилам. Цвет оставляем, горизонтальное положение фиксируем. */
.footer .links ul li a:hover,
.footer .links ul li a:focus {
    padding-left: 0;
}

/* После удаления блока платёжных систем copyright занимает всю строку. Текст
   раскрытия больше не зажат в бывшие 8/12 сетки и переносится только тогда,
   когда этого действительно требует ширина viewport. */
.footer .copyright .left {
    width: 100%;
}

/* Мобильный футер: текстовые ссылки блока «Get In Touch» слева, иконки соцсетей —
   справа в той же строке. Экономит высоту ряда иконок вместе с его `margin-top: 20px`
   (замер до правки на 375px: footer-top = 490px).
   ⛔ Только до 767px. На десктопе колонка «Get In Touch» шириной 293px, и строка
      «Rights holders & copyright» рядом с тремя иконками туда не помещается —
      получился бы перенос вместо экономии. */
@media only screen and (max-width: 767px) {
    .footer .single-footer.social {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
    }

    .footer .single-footer.social .footer-heading {
        flex: 0 0 100%;
    }

    .footer .single-footer.social .contact {
        flex: 1 1 auto;
    }

    .footer .single-footer.social > ul {
        flex: 0 0 auto;
        margin-top: 0;
    }

    /* Последняя иконка прижата к правому краю: `margin-right` темы оставил бы
       визуальный зазор и сдвинул ряд влево. */
    .footer .social > ul li:last-child {
        margin-right: 0;
    }
}

/* Actions belong to the product image rather than to the description. Keeping the
   compact vertical stack inside the gallery makes that relationship obvious and
   leaves the right column for product facts only. */
.shop.single .product-gallery .product-gallery-actions {
    position: absolute;
    z-index: 5;
    top: 14px;
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shop.single .product-gallery .product-gallery-action {
    position: relative;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    cursor: pointer;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    background: rgba(35, 37, 43, 0.92);
    box-shadow: 0 5px 16px rgba(18, 22, 31, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 0.18s ease, border-color 0.18s ease,
        box-shadow 0.18s ease, transform 0.18s ease;
}

.shop.single .product-gallery .product-gallery-action svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shop.single .product-gallery [data-favorite-action].is-active svg {
    fill: currentColor;
}

.shop.single .product-gallery .product-gallery-action:hover {
    color: #fff;
    border-color: #fff;
    background: #0088cc;
    box-shadow: 0 7px 20px rgba(0, 136, 204, 0.24);
    transform: translateY(-1px);
}

.shop.single .product-gallery .product-gallery-action:focus-visible {
    outline: 3px solid rgba(0, 136, 204, 0.34);
    outline-offset: 3px;
}

.shop.single .product-gallery .product-gallery-action.is-active {
    color: #fff;
    border-color: #0088cc;
    background: #0088cc;
}

/* Text appears on hover/focus and briefly after an action. It sits to the left so
   it never overflows the gallery column at the right edge. */
.shop.single .product-gallery .product-gallery-action::after {
    content: attr(data-label);
    position: absolute;
    top: 50%;
    right: calc(100% + 9px);
    width: max-content;
    max-width: 210px;
    padding: 7px 9px;
    pointer-events: none;
    color: #fff;
    border-radius: 5px;
    background: rgba(35, 37, 43, 0.96);
    box-shadow: 0 4px 14px rgba(18, 22, 31, 0.16);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    opacity: 0;
    transform: translate(4px, -50%);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.shop.single .product-gallery .product-gallery-action:hover::after,
.shop.single .product-gallery .product-gallery-action:focus-visible::after,
.shop.single .product-gallery .product-gallery-action.is-feedback::after {
    opacity: 1;
    transform: translate(0, -50%);
}

@media (max-width: 575.98px) {
    .shop.single .product-gallery .product-gallery-actions {
        top: 10px;
        right: 10px;
        gap: 7px;
    }

    .shop.single .product-gallery .product-gallery-action {
        width: 42px;
        height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop.single .product-gallery .product-gallery-action,
    .shop.single .product-gallery .product-gallery-action::after {
        transition: none;
    }
}