/*
 * BARASHKOV Fluid UI — Spacing/Layout v4
 * ===================================
 * Подключать ПОСЛЕ media.css и ДО simple.css.
 *
 * data-fluid-ui="base" : только глобальный root/rem scale.
 * data-fluid-ui="full" : root/rem + semantic fluid typography + spacing.
 *
 * В этой версии базовые style.css / stylesheet.css сами используют
 * var(--font-..., fallback). Поэтому fluid.css в основном управляет
 * значениями переменных, а не переопределяет десятки селекторов.
 */

/* =========================================================
   1. GLOBAL ROOT SCALE
   ========================================================= */
html[data-fluid-ui] {
    --fluid-root-min: 12px;
    --fluid-root-max: 16px;
    --fluid-root-size: clamp(
        var(--fluid-root-min),
        calc(6.035px + 0.4367vw),
        var(--fluid-root-max)
    );
    font-size: var(--fluid-root-size);

    /* primitive typography scale */
    --fs-2xs: 0.75rem;
    --fs-xs: 0.833333rem;
    --fs-sm: 0.916667rem;
    --fs-base: 1rem;
    --fs-md: 1.166667rem;
    --fs-lg: 1.333333rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 1.8rem;
    --fs-3xl: 2rem;
    --fs-4xl: 2.5rem;
    --fs-5xl: 3rem;

    /* spacing API — подключим к компонентам на следующем этапе */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --radius-sm: clamp(4px, 0.25rem, 6px);
    --radius-md: clamp(6px, 0.5rem, 10px);
    --radius-lg: clamp(10px, 0.75rem, 16px);

    /* product component API — работает и в base, и в full */
    --font-product-card-title-wrap: 2em;
    --font-product-card-title: 1rem;
    --font-product-card-carousel-title: .5em;
    --font-product-card-attribute: .9rem;
    --font-product-page-title: 2rem;
    --font-product-list-price: 1rem;
}

html[data-fluid-ui] body {
    font-size: 1rem;
}

/* =========================================================
   2. FULL MODE — SEMANTIC TYPOGRAPHY API
   =========================================================
   Базовые CSS-файлы обращаются к этим переменным.
   В base-режиме переменные ниже не определяются, поэтому работают
   fallback-значения, записанные непосредственно в базовых селекторах.
 */
html[data-fluid-ui="full"] {
    /* site headings */
    --font-main-heading: clamp(
        1.8rem,
        calc(-16.60px + 3.85vw),
        3rem
    );

    /* articles / informational sections */
    --font-section-title: clamp(24px, calc(9.28px + 2.56vw), 40px);
    --font-section-subtitle: clamp(14px, calc(11.23px + 0.4808vw), 16px);
    --font-article-title: clamp(2rem, calc(7.38px + 2.8846vw), 3rem);

    /* care block */
    --font-care-title: clamp(13px, calc(8.85px + 0.72vw), 16px);
    --font-care-text: clamp(13px, calc(11.62px + 0.24vw), 14px);

    /* why block */
    --font-why-title: 2.5rem;
    --font-why-head: clamp(16px, calc(14.60px + 0.145vw), 17px);
    --font-why-text: clamp(13px, calc(11.60px + 0.145vw), 14px);

    /* FAQ */
    --font-faq-title: clamp(2.3rem, calc(2.05rem + 0.35vw), 2.5rem);
    --font-faq-question: clamp(14px, calc(12.60px + 0.145vw), 15px);
    --font-faq-answer: 13px;

    /* material/accessory carousel section headings */
    --font-material-section-title: clamp(24px, calc(16.64px + 1.28vw), 32px);
    --font-accessory-section-title: clamp(22px, calc(12.80px + 1.60vw), 32px);

}

/* =========================================================
   3. PRODUCT COMPONENT TYPOGRAPHY
   =========================================================
   Breakpoint logic сохранена, но теперь живёт в одном API-пункте.
 */
@media (max-width: 991.98px) {
    html[data-fluid-ui] span.attribute-name,
    html[data-fluid-ui] span.attribute-text {
        font-size: var(--font-product-attribute);
    }

    html[data-fluid-ui] .opt-price-b .price-extra-opt {
        font-size: var(--font-product-option-price-b);
    }

    html[data-fluid-ui] .opt-price-cc .price-extra-opt {
        font-size: var(--font-product-option-price-cc);
    }
}

@media (max-width: 575px) {
    /* В старом media.css эти два диапазона были с !important */
    html[data-fluid-ui] span.attribute-name,
    html[data-fluid-ui] span.attribute-text {
        font-size: var(--font-product-attribute) !important;
    }
}

@media (max-width: 375px) {
    html[data-fluid-ui] {
        --font-product-page-title: 1.5rem;
        --font-product-attribute: .9rem;
        --font-product-option-price-b: 1rem;
        --font-product-option-price-cc: 1.4rem;
    }
}

@media (min-width: 375.9998px) and (max-width: 575px) {
    html[data-fluid-ui] {
        --font-product-page-title: 1.8rem;
        --font-product-attribute: 1rem;
        --font-product-option-price-b: 1.2rem;
        --font-product-option-price-cc: 1.4rem;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    html[data-fluid-ui] {
        --font-product-attribute: 1.2rem;
        --font-product-option-price-b: 1.2rem;
        --font-product-option-price-cc: 1.2rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    html[data-fluid-ui] {
        --font-product-page-title: 1.5rem;
        --font-product-attribute: 1.2rem;
        --font-product-option-price-b: 2.5rem;
        --font-product-option-price-cc: 2.5rem;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    html[data-fluid-ui] { --font-product-page-title: 1.6rem; }
}

@media (min-width: 1023.98px) and (max-width: 1365.98px) {
    html[data-fluid-ui] {
        --font-product-option-price-b: 3.5rem;
        --font-product-option-price-cc: 3.4rem;
    }

    html[data-fluid-ui] .opt-price-b .price-extra-opt {
        font-size: var(--font-product-option-price-b);
    }

    html[data-fluid-ui] .opt-price-cc .price-extra-opt {
        font-size: var(--font-product-option-price-cc);
    }
}

@media (min-width: 1366px) and (max-width: 1823.98px) {
    html[data-fluid-ui] { --font-product-page-title: 1.5rem; }
}

@media (min-width: 1824px) {
    html[data-fluid-ui] { --font-product-list-price: 1.5rem; }

    html[data-fluid-ui] .product-description div.price .h6 {
        font-size: var(--font-product-list-price) !important;
    }
}

/* =========================================================
   4. OPTIONAL UTILITIES FOR NEW TWIG
   ========================================================= */
html[data-fluid-ui] .fs-fluid-xs   { font-size: var(--fs-xs) !important; }
html[data-fluid-ui] .fs-fluid-sm   { font-size: var(--fs-sm) !important; }
html[data-fluid-ui] .fs-fluid-base { font-size: var(--fs-base) !important; }
html[data-fluid-ui] .fs-fluid-md   { font-size: var(--fs-md) !important; }
html[data-fluid-ui] .fs-fluid-lg   { font-size: var(--fs-lg) !important; }
html[data-fluid-ui] .fs-fluid-xl   { font-size: var(--fs-xl) !important; }
html[data-fluid-ui] .fs-fluid-2xl  { font-size: var(--fs-2xl) !important; }
html[data-fluid-ui] .fs-fluid-3xl  { font-size: var(--fs-3xl) !important; }
html[data-fluid-ui] .fs-fluid-4xl  { font-size: var(--fs-4xl) !important; }
html[data-fluid-ui] .fs-fluid-5xl  { font-size: var(--fs-5xl) !important; }

/* =========================================================
   5. CONTAINER-QUERY READY
   ========================================================= */
@supports (container-type: inline-size) {
    html[data-fluid-ui] .fluid-container {
        container-type: inline-size;
    }

    html[data-fluid-ui] .fluid-container-title {
        font-size: clamp(1rem, calc(0.75rem + 2cqi), 1.75rem);
    }
}

/* =========================================================
   6. ACCESSIBILITY
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    html[data-fluid-ui] *,
    html[data-fluid-ui] *::before,
    html[data-fluid-ui] *::after {
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   HEADER VISUAL CENTERING FIX (1024–1365.98px)
   Keeps the logo optically centered in the desktop/tablet header.
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1365.98px) {
  #menu-123 {
    position: relative;
    align-items: center;
  }

  #menu-123 > #logo.opt-header-logo,
  #menu-123 > #logo.desktop-view {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    margin-left: 0 !important;
    z-index: 12;
  }

  #menu-123 > #search_wrapper {
    margin-left: 0 !important;
    flex: 0 1 320px;
    max-width: 320px;
  }

  #menu-123 > #leftblockmenuwrapper {
    margin-left: auto;
    max-width: calc(50% - 80px);
    padding-left: 32px;
  }

  #menu-123 > #leftblockmenuwrapper .telefoblock {
    margin-left: 0 !important;
  }

  #menu-123 > .buttcatalogmn {
    min-width: max-content;
  }
}

/* =========================================================
   7. SEMANTIC SPACING API — V4
   =========================================================
   base = старые ступенчатые значения;
   full = те же диапазоны превращены в плавные clamp-кривые.
   Абсолютная геометрия (top/left), HPM и SimpleCheckout здесь не участвуют.
   ========================================================= */
html[data-fluid-ui] {
    --space-section-title-bottom: 20px;
    --space-section-subtitle-bottom: 25px;

    --space-text-box-y: 25px;
    --space-text-box-x: 30px;
    --space-care-y: 10px;
    --space-care-x: 30px;
    --space-care-block: 15px;

    --space-why-section-y: 50px;
    --space-why-title-bottom: 40px;
    --space-why-row-gap: 35px;
    --space-why-item-gap: 18px;

    --space-faq-header-bottom: 30px;
    --space-faq-header-gap: 20px;
    --space-faq-item-y: 25px;
    --space-faq-item-x: 20px;
    --space-faq-question-bottom: 18px;

    --space-carousel-section-y: 30px;
    --space-material-title-bottom: 16px;
    --space-accessory-title-bottom: 16px;
    --space-dtf-title-bottom: 16px;
}

/* BASE: повторяет прежние breakpoint-значения */
@media (max-width: 991px) {
    html[data-fluid-ui] {
        --space-why-section-y: 30px;
        --space-why-title-bottom: 25px;
        --space-why-row-gap: 25px;

        --space-material-title-bottom: 14px;
        --space-accessory-title-bottom: 14px;
        --space-dtf-title-bottom: 14px;
    }
}

@media (max-width: 767px) {
    html[data-fluid-ui] {
        --space-section-title-bottom: 15px;
        --space-text-box-y: 20px;
        --space-text-box-x: 20px;
    }
}

@media (max-width: 575.98px) {
    html[data-fluid-ui] {
        --space-text-box-y: 15px;
        --space-text-box-x: 20px;

        --space-carousel-section-y: 20px;
        --space-material-title-bottom: 12px;
        --space-accessory-title-bottom: 10px;
        --space-dtf-title-bottom: 10px;
    }
}

/* FULL: плавные значения вместо ступеней */
html[data-fluid-ui="full"] {
    --space-section-title-bottom: clamp(15px, calc(11.96px + 0.81vw), 20px);
    --space-section-subtitle-bottom: clamp(20px, calc(16.96px + 0.81vw), 25px);

    --space-text-box-y: clamp(15px, calc(8.92px + 1.62vw), 25px);
    --space-text-box-x: clamp(20px, calc(13.92px + 1.62vw), 30px);
    --space-care-y: clamp(8px, calc(6.78px + 0.32vw), 10px);
    --space-care-x: clamp(20px, calc(13.92px + 1.62vw), 30px);
    --space-care-block: clamp(10px, calc(6.96px + 0.81vw), 15px);

    --space-why-section-y: clamp(30px, calc(17.84px + 3.24vw), 50px);
    --space-why-title-bottom: clamp(25px, calc(15.88px + 2.43vw), 40px);
    --space-why-row-gap: clamp(25px, calc(18.92px + 1.62vw), 35px);
    --space-why-item-gap: clamp(14px, calc(11.57px + 0.65vw), 18px);

    --space-faq-header-bottom: clamp(22px, calc(17.14px + 1.30vw), 30px);
    --space-faq-header-gap: clamp(14px, calc(10.35px + 0.97vw), 20px);
    --space-faq-item-y: clamp(20px, calc(16.96px + 0.81vw), 25px);
    --space-faq-item-x: clamp(16px, calc(13.57px + 0.65vw), 20px);
    --space-faq-question-bottom: clamp(14px, calc(11.57px + 0.65vw), 18px);

    --space-carousel-section-y: clamp(20px, calc(6.21px + 2.40vw), 30px);
    --space-material-title-bottom: clamp(12px, calc(6.48px + 0.96vw), 16px);
    --space-accessory-title-bottom: clamp(10px, calc(1.73px + 1.44vw), 16px);
    --space-dtf-title-bottom: clamp(10px, calc(1.73px + 1.44vw), 16px);
}

/* =========================================================
   8. HEADER: PROMO + PHONE WRAP FIX — V4.1
   ========================================================= */

/* Desktop/tablet promo: keep code, copy button and discount on one row. */
@media (min-width: 768px) {
  .dealer-strip #promo-box {
    width: max-content;
    max-width: 100%;
    height: 100%;
    margin-top: 0;
    display: flex;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .dealer-strip #promo-box .promo-title {
    padding-top: 0;
    white-space: nowrap;
    line-height: 1.15;
    flex: 0 0 auto;
  }

  .dealer-strip #promo-code {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
  }

  .dealer-strip #promo-code-value,
  .dealer-strip #promo-copy-btn,
  .dealer-strip .promo-discount {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Header phone: never split the telephone number between lines. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  #menu-123 #href-rtel-dsctp {
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
  }

  #menu-123 #topphonenumber {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: max-content;
    padding-left: 0;
    padding-right: 0;
  }

  #menu-123 #topphonenumber a {
    display: inline-block;
    width: max-content;
    max-width: none;
    white-space: nowrap;
    margin-right: 0 !important;
  }
}

/* =========================================================
   MOBILE MENU — V4.4
   Original category/Twig logic is preserved.
   Only the mobile modal shell is enhanced.
   ========================================================= */
@media (max-width: 991.98px) {
  #ftMenu_mob #ftModalMenu {
    padding-right: 0 !important;
  }

  #ftMenu_mob #ftModalMenu .modal-dialog {
    width: min(94vw, 400px) !important;
    min-width: 0 !important;
    max-width: 400px !important;
    height: 100%;
    margin: 0 !important;
  }

  #ftMenu_mob #ftModalMenu .mobile-menu-panel {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 0 18px 18px 0 !important;
    box-shadow: 12px 0 32px rgba(0, 0, 0, .12);
  }

  /* Header */
  #ftMenu_mob #ftModalMenu .mobile-menu-header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 72px;
    height: auto !important;
    margin: 0;
    padding: 12px 12px 12px 18px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid #edf0f0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  #ftMenu_mob .mobile-menu-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #111 !important;
    text-decoration: none !important;
  }

  #ftMenu_mob .mobile-menu-logo {
    display: block;
    width: 42px;
    max-width: 42px;
    height: 42px;
    object-fit: contain;
    flex: 0 0 42px;
  }

  #ftMenu_mob .mobile-menu-brand-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }

  #ftMenu_mob .mobile-menu-brand-text strong {
    font-family: "Montserrat";
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    color: #111;
  }

  #ftMenu_mob .mobile-menu-brand-text small {
    margin-top: 4px;
    font-family: "Montserrat";
    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
    color: #7c8585;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  #ftMenu_mob .mobile-menu-close {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    margin: 0;
    padding: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #f4f6f6;
    box-shadow: none;
    transition: background-color .18s ease, transform .18s ease;
  }

  #ftMenu_mob .mobile-menu-close:active {
    transform: scale(.94);
    background: #e8eded;
  }

  #ftMenu_mob .mobile-menu-close img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }

  /* Scrollable content */
  #ftMenu_mob #ftModalMenu .mobile-menu-body {
    padding: 16px 14px max(28px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #ftMenu_mob #ftModalMenu .mobile-menu-body::-webkit-scrollbar {
    width: 4px;
  }

  #ftMenu_mob #ftModalMenu .mobile-menu-body::-webkit-scrollbar-thumb {
    background: #d5dddd;
    border-radius: 999px;
  }

  /* Section headings */
  #ftMenu_mob .mobile-menu-section-label {
    margin: 0 4px 8px;
    font-family: "Montserrat";
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #899191;
  }

  /* Main category card */
  #ftMenu_mob #m_category_menu_list.mobile-category-list {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8eded;
    border-radius: 14px;
  }

  #ftMenu_mob #m_category_menu_list > .category-menu-item {
    display: block;
    margin: 0;
    padding: 0 !important;
    background: #fff !important;

    position: relative;
    border-bottom: 0 !important;
  }

  /* Reliable separator for every top-level row, independent of legacy border rules. */
  #ftMenu_mob #m_category_menu_list > .category-menu-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 1px;
    background: #edf0f0;
    pointer-events: none;
    z-index: 2;
  }

  /* Every top-level menu link has identical typography and touch height. */
  #ftMenu_mob #m_category_menu_list > .category-menu-item > a.link-level-1,
  #ftMenu_mob #m_category_menu_list > .category-menu-item > .row > .col > a.link-level-1 {
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 0 42px 0 14px !important;
    display: flex !important;
    align-items: center;
    position: relative;
    font-family: "Montserrat" !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: #171919 !important;
    background: #fff !important;
    text-decoration: none !important;
    transition: background-color .16s ease;
  }

  #ftMenu_mob #m_category_menu_list > .category-menu-item > a.link-level-1 > .row,
  #ftMenu_mob #m_category_menu_list > .category-menu-item > .row > .col > a.link-level-1 > .row {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
  }

  /* Neutralize old mobile font-size rules on nested spans. */
  #ftMenu_mob #m_category_menu_list a.link-level-1 .cat_name_item,
  #ftMenu_mob #m_category_menu_list a.link-level-1 .pointaddedmeny,
  #ftMenu_mob #m_category_menu_list a.link-level-1 > .row > .col,
  #ftMenu_mob #m_category_menu_list a.link-level-1 > .row > .col-auto {
    height: auto !important;
    margin-right: 0 !important;
    font-family: "Montserrat" !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: inherit !important;
  }

  /* Arrow on EVERY top-level category, including special/manual links. */
  #ftMenu_mob #m_category_menu_list > .category-menu-item > a.link-level-1::after,
  #ftMenu_mob #m_category_menu_list > .category-menu-item > .row > .col > a.link-level-1::after {
    content: "›";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-52%);
    font-family: Arial, sans-serif;
    font-size: 22px;
    line-height: 1;
    font-weight: 400;
    color: #a5aeae;
    pointer-events: none;
  }

  /* Do not visually single out the current category in the drawer. */
  #ftMenu_mob #m_category_menu_list > .category-menu-item.active,
  #ftMenu_mob #m_category_menu_list > .category-menu-item.active > a.link-level-1,
  #ftMenu_mob #m_category_menu_list > .category-menu-item.active > .row > .col > a.link-level-1 {
    color: #171919 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  #ftMenu_mob #m_category_menu_list a.link-level-1:active {
    background: #f1f5f5 !important;
  }

  /* Help / information card */
  #ftMenu_mob .mobile-menu-info-label {
    margin-top: 18px;
    margin-bottom: 8px;
  }

  #ftMenu_mob .mobile-menu-info {
    margin-top: 0;
    padding: 11px 12px;
    background: #f6f8f8;
    border: 1px solid #e8eded;
    border-radius: 14px;
  }

  #ftMenu_mob .mobile-menu-info-grid > [class*="col-"] {
    padding-left: 4px;
    padding-right: 4px;
  }

  #ftMenu_mob .mobile-menu-info-link {
    min-height: 38px;
    width: 100%;
    padding: 7px 24px 7px 8px;
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 8px;
    font-family: "Montserrat" !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: #343838 !important;
    text-decoration: none !important;
    transition: background-color .16s ease;
  }

  #ftMenu_mob .mobile-menu-info-link::after {
    content: "›";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-52%);
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    color: #a5aeae;
    pointer-events: none;
  }

  #ftMenu_mob .mobile-menu-info-link:active {
    background: #e9eeee;
  }
}

@media (max-width: 374.98px) {
  #ftMenu_mob #ftModalMenu .modal-dialog {
    width: 96vw !important;
  }

  #ftMenu_mob #ftModalMenu .mobile-menu-header {
    min-height: 66px;
    padding-left: 14px !important;
  }

  #ftMenu_mob .mobile-menu-logo {
    width: 38px;
    max-width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  #ftMenu_mob #m_category_menu_list > .category-menu-item > a.link-level-1,
  #ftMenu_mob #m_category_menu_list > .category-menu-item > .row > .col > a.link-level-1 {
    min-height: 47px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ftMenu_mob .mobile-menu-close,
  #ftMenu_mob #m_category_menu_list a.link-level-1,
  #ftMenu_mob .mobile-menu-info-link {
    transition: none !important;
  }
}

/* =========================================================
   MOBILE HEADER — TRUE LOGO CENTER (v4.6)
   Center the logo against the whole header row, not the free
   space between Bootstrap columns.
   ========================================================= */
@media (max-width: 991.98px) {
  #menu-optovoe {
    position: relative;
  }

  #menu-optovoe > #logo-mobile {
    position: absolute !important;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    margin: .5rem 0 .5rem 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    z-index: 20;
  }

  #menu-optovoe > #logo-mobile > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #menu-optovoe > #logo-mobile img,
  #menu-optovoe > #logo-mobile img.img-fluid,
  #menu-optovoe > #logo-mobile > a > img.img-fluid {
    display: block;
    width: 60px !important;
    min-width: 0 !important;
    max-width: 60px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
}