.fr-site-header {
    background: #ffffff;
    border-bottom: 1px solid #eaeaea;
    position: relative;
    z-index: 100;
    font-family: system-ui, -apple-system, sans-serif;
}

.fr-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    height: 72px;
}

.fr-header-left, .fr-header-right {
    display: flex;
    align-items: center;
}

.fr-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #111;
}

.fr-logo-img {
    max-height: 40px;
    width: auto;
}

.fr-logo-text {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.fr-desktop-nav {
    display: block;
}

.fr-desktop-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 24px;
}

.fr-desktop-menu a {
    text-decoration: none;
    color: #111;
    font-size: 15px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.fr-desktop-menu a:hover {
    color: #E12626;
}

.fr-desktop-menu .menu-item-has-children {
    position: relative;
}

.fr-desktop-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    list-style: none;
    padding: 12px 0;
    min-width: 200px;
    z-index: 101;
}

.fr-desktop-menu .menu-item-has-children:hover .sub-menu {
    display: block;
}

.fr-desktop-menu .sub-menu a {
    display: block;
    padding: 8px 20px;
}

.fr-search-btn, .fr-mobile-menu-btn, .fr-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.fr-search-btn {
    margin-left: 20px;
}

.fr-mobile-menu-btn {
    display: none;
    margin-left: 10px;
}

/* Modals */
.fr-search-modal, .fr-mobile-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.fr-search-modal.is-active, .fr-mobile-modal.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.fr-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.fr-search-modal-content {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 10vh auto auto;
    background: #fff;
    padding: 30px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.fr-search-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #eaeaea;
    font-size: 16px;
    border-radius: 4px;
    transition: border-color .2s ease;
}

.fr-search-input:focus {
    border-color: #E12626;
}

.fr-search-submit {
    padding: 12px 24px;
    background: #E12626;
    color: #fff;
    border: none;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .2s ease;
}

.fr-search-submit:hover {
    background: #b31313;
}

.fr-search-results {
    margin-top: 16px;
}

.fr-search-results ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fr-search-results a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    text-decoration: none;
    color: #222;
    border-radius: 4px;
    transition: background-color .2s ease;
}

.fr-search-results a:hover {
    background: #f5f5f5;
}

.fr-search-results img {
    width: 70px;
    height: 40px;
    object-fit: cover;
    flex-shrink: 0;
}

.fr-search-results span {
    font-weight: 600;
    font-size: 15px;
}

.fr-search-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 24px;
}

.fr-mobile-modal-content {
    position: relative;
    width: 320px;
    max-width: 85%;
    height: 100%;
    background: #fdfdfd;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease;
}

.fr-mobile-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #eaeaea;
}

.fr-mobile-title {
    font-weight: 800;
    font-size: 18px;
}

.fr-mobile-nav {
    padding: 20px 0;
    overflow-y: auto;
}

.fr-mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fr-mobile-menu li {
    border-bottom: 1px solid #f5f5f5;
}

.fr-mobile-menu a {
    display: block;
    padding: 14px 24px;
    color: #111;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@media (max-width: 1023px) {
    .fr-desktop-nav {
        display: none;
    }
    .fr-mobile-menu-btn {
        display: flex;
    }
    .fr-header-container {
        padding: 0 16px;
    }
}

/* =========================================================
   4rings header hotfix: mobile search clear + menu accordion
   ========================================================= */
.fr-search-form {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.fr-search-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.fr-search-input-wrap .fr-search-input {
    width: 100%;
    padding-right: 46px;
}

.fr-search-clear-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111;
    cursor: pointer;
    padding: 0;
}

.fr-search-clear-btn:hover,
.fr-search-clear-btn:focus-visible {
    background: #f1f1f1;
    outline: none;
}

.fr-search-clear-btn[hidden] {
    display: none !important;
}

.fr-search-modal-content .fr-search-close {
    top: 26px;
    right: 24px;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #f3f3f3;
    color: #111;
    font-size: 20px;
    line-height: 1;
}

.fr-mobile-menu .menu-item-has-children,
.fr-mobile-menu .fr-has-accordion {
    position: relative;
}

.fr-mobile-menu .fr-has-accordion > a {
    padding-right: 72px;
}

.fr-mobile-menu .fr-submenu-toggle {
    position: absolute;
    top: 6px;
    right: 18px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ececec;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
}

.fr-mobile-menu .fr-submenu-toggle:hover,
.fr-mobile-menu .fr-submenu-toggle:focus-visible {
    border-color: #E12626;
    color: #E12626;
    outline: none;
}

.fr-mobile-menu .sub-menu {
    margin: 0;
    padding: 0 0 8px;
    list-style: none;
    background: #fafafa;
    border-top: 1px solid #f1f1f1;
}

.fr-mobile-menu .sub-menu[hidden] {
    display: none !important;
}

.fr-mobile-menu .sub-menu a {
    padding: 11px 24px 11px 44px;
    font-size: 15px;
    font-weight: 650;
    color: #333;
}

.fr-mobile-menu .is-open > .fr-submenu-toggle {
    border-color: #E12626;
    color: #E12626;
}

@media (max-width: 768px) {
    .fr-search-modal-content {
        width: calc(100% - 32px);
        max-width: 520px;
        margin: 9vh auto auto;
        padding: 26px 28px 28px;
    }

    .fr-search-form {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        padding-right: 44px;
    }

    .fr-search-submit {
        width: 100%;
        min-height: 54px;
        font-size: 18px;
    }

    .fr-search-modal-content .fr-search-close {
        top: 26px;
        right: 26px;
        width: 34px;
        height: 34px;
    }
}

/* =========================================================
   4rings FINAL HEADER REPAIR — desktop colors + mobile accordion colors + search X cleanup
   ========================================================= */

/* Desktop: restore category color markers and hover colors */
.fr-desktop-menu > li > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.fr-desktop-menu > li > a::before {
    content: "" !important;
    display: inline-block !important;
    width: 3px !important;
    height: 15px !important;
    flex: 0 0 3px !important;
    opacity: .55 !important;
    transition: opacity .16s ease !important;
}

.fr-desktop-menu > li:hover > a::before,
.fr-desktop-menu > li.current-menu-item > a::before,
.fr-desktop-menu > li.current-menu-ancestor > a::before {
    opacity: 1 !important;
}

.fr-desktop-menu > li:nth-child(1) > a::before { background: #E12626 !important; }
.fr-desktop-menu > li:nth-child(2) > a::before { background: #1565C0 !important; }
.fr-desktop-menu > li:nth-child(3) > a::before { background: #1E8E3E !important; }
.fr-desktop-menu > li:nth-child(4) > a::before { background: #5B3CC4 !important; }
.fr-desktop-menu > li:nth-child(5) > a::before { background: #FFC400 !important; }
.fr-desktop-menu > li:nth-child(6) > a::before { background: #F57C00 !important; }
.fr-desktop-menu > li:nth-child(7) > a::before { background: #8B1E3F !important; }
.fr-desktop-menu > li:nth-child(8) > a::before { background: #E12626 !important; }

.fr-desktop-menu > li:nth-child(1):hover > a,
.fr-desktop-menu > li:nth-child(1).current-menu-item > a,
.fr-desktop-menu > li:nth-child(1).current-menu-ancestor > a { color: #E12626 !important; }
.fr-desktop-menu > li:nth-child(2):hover > a,
.fr-desktop-menu > li:nth-child(2).current-menu-item > a,
.fr-desktop-menu > li:nth-child(2).current-menu-ancestor > a { color: #1565C0 !important; }
.fr-desktop-menu > li:nth-child(3):hover > a,
.fr-desktop-menu > li:nth-child(3).current-menu-item > a,
.fr-desktop-menu > li:nth-child(3).current-menu-ancestor > a { color: #1E8E3E !important; }
.fr-desktop-menu > li:nth-child(4):hover > a,
.fr-desktop-menu > li:nth-child(4).current-menu-item > a,
.fr-desktop-menu > li:nth-child(4).current-menu-ancestor > a { color: #5B3CC4 !important; }
.fr-desktop-menu > li:nth-child(5):hover > a,
.fr-desktop-menu > li:nth-child(5).current-menu-item > a,
.fr-desktop-menu > li:nth-child(5).current-menu-ancestor > a { color: #B88700 !important; }
.fr-desktop-menu > li:nth-child(6):hover > a,
.fr-desktop-menu > li:nth-child(6).current-menu-item > a,
.fr-desktop-menu > li:nth-child(6).current-menu-ancestor > a { color: #F57C00 !important; }
.fr-desktop-menu > li:nth-child(7):hover > a,
.fr-desktop-menu > li:nth-child(7).current-menu-item > a,
.fr-desktop-menu > li:nth-child(7).current-menu-ancestor > a { color: #8B1E3F !important; }
.fr-desktop-menu > li:nth-child(8):hover > a,
.fr-desktop-menu > li:nth-child(8).current-menu-item > a,
.fr-desktop-menu > li:nth-child(8).current-menu-ancestor > a { color: #E12626 !important; }

/* Desktop submenu: keep mega menu and category-colored top border */
.fr-desktop-menu > li:nth-child(1):hover > .sub-menu { border-top-color: #E12626 !important; }
.fr-desktop-menu > li:nth-child(2):hover > .sub-menu { border-top-color: #1565C0 !important; }
.fr-desktop-menu > li:nth-child(3):hover > .sub-menu { border-top-color: #1E8E3E !important; }
.fr-desktop-menu > li:nth-child(4):hover > .sub-menu { border-top-color: #5B3CC4 !important; }
.fr-desktop-menu > li:nth-child(5):hover > .sub-menu { border-top-color: #FFC400 !important; }
.fr-desktop-menu > li:nth-child(6):hover > .sub-menu { border-top-color: #F57C00 !important; }
.fr-desktop-menu > li:nth-child(7):hover > .sub-menu { border-top-color: #8B1E3F !important; }

.fr-desktop-menu > li:nth-child(1):hover .sub-menu a:hover { border-color: #E12626 !important; color: #E12626 !important; }
.fr-desktop-menu > li:nth-child(2):hover .sub-menu a:hover { border-color: #1565C0 !important; color: #1565C0 !important; }
.fr-desktop-menu > li:nth-child(3):hover .sub-menu a:hover { border-color: #1E8E3E !important; color: #1E8E3E !important; }
.fr-desktop-menu > li:nth-child(4):hover .sub-menu a:hover { border-color: #5B3CC4 !important; color: #5B3CC4 !important; }
.fr-desktop-menu > li:nth-child(5):hover .sub-menu a:hover { border-color: #FFC400 !important; color: #B88700 !important; }
.fr-desktop-menu > li:nth-child(6):hover .sub-menu a:hover { border-color: #F57C00 !important; color: #F57C00 !important; }
.fr-desktop-menu > li:nth-child(7):hover .sub-menu a:hover { border-color: #8B1E3F !important; color: #8B1E3F !important; }

/* Search: hide browser-native X so only our controlled clear button remains */
.fr-search-input[type="search"]::-webkit-search-decoration,
.fr-search-input[type="search"]::-webkit-search-cancel-button,
.fr-search-input[type="search"]::-webkit-search-results-button,
.fr-search-input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
}

.fr-search-input[type="search"] {
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Search close X: separate from input clear X, never over search button */
.fr-search-modal-content {
    overflow: visible !important;
}

.fr-search-form {
    position: relative !important;
}

.fr-search-input-wrap {
    position: relative !important;
}

.fr-search-input-wrap .fr-search-input {
    padding-right: 48px !important;
}

.fr-search-clear-btn {
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #111 !important;
    z-index: 3 !important;
}

.fr-search-clear-btn:hover,
.fr-search-clear-btn:focus-visible {
    background: #f1f1f1 !important;
    color: #111 !important;
}

.fr-modal-close.fr-search-close,
.fr-search-modal-content .fr-search-close {
    position: absolute !important;
    top: -50px !important;
    right: 0 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 0 !important;
    background: #111 !important;
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    z-index: 5 !important;
}

/* Mobile menu: restore colored bars + keep accordion plus/minus */
@media (max-width: 1023px) {
    .fr-mobile-menu > li > a {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 18px 76px 18px 26px !important;
        color: #111 !important;
        font-size: 20px !important;
        line-height: 1.16 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        border-bottom: 1px solid #eee !important;
    }

    .fr-mobile-menu > li > a::before {
        content: "" !important;
        display: block !important;
        width: 4px !important;
        height: 22px !important;
        flex: 0 0 4px !important;
        border-radius: 0 !important;
        background: #E12626 !important;
    }

    .fr-mobile-menu > li:nth-child(1) > a::before { background: #E12626 !important; }
    .fr-mobile-menu > li:nth-child(2) > a::before { background: #1565C0 !important; }
    .fr-mobile-menu > li:nth-child(3) > a::before { background: #1E8E3E !important; }
    .fr-mobile-menu > li:nth-child(4) > a::before { background: #5B3CC4 !important; }
    .fr-mobile-menu > li:nth-child(5) > a::before { background: #FFC400 !important; }
    .fr-mobile-menu > li:nth-child(6) > a::before { background: #F57C00 !important; }
    .fr-mobile-menu > li:nth-child(7) > a::before { background: #8B1E3F !important; }
    .fr-mobile-menu > li:nth-child(8) > a::before { background: #E12626 !important; }

    .fr-mobile-menu li.menu-item-has-children,
    .fr-mobile-menu li.fr-has-accordion {
        position: relative !important;
    }

    .fr-mobile-menu .fr-submenu-toggle {
        position: absolute !important;
        top: 10px !important;
        right: 22px !important;
        width: 46px !important;
        height: 46px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid #ececec !important;
        border-radius: 999px !important;
        background: #fff !important;
        color: #111 !important;
        font-size: 30px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        cursor: pointer !important;
        padding: 0 !important;
        z-index: 20 !important;
    }

    .fr-mobile-menu li.is-open > .fr-submenu-toggle {
        color: #E12626 !important;
        border-color: #E12626 !important;
    }

    .fr-mobile-menu .sub-menu {
        display: none !important;
        margin: 0 !important;
        padding: 0 0 8px !important;
        list-style: none !important;
        background: #fafafa !important;
        border-bottom: 1px solid #eee !important;
    }

    .fr-mobile-menu li.is-open > .sub-menu {
        display: block !important;
    }

    .fr-mobile-menu .sub-menu a {
        display: block !important;
        padding: 13px 24px 13px 58px !important;
        font-size: 17px !important;
        line-height: 1.25 !important;
        font-weight: 650 !important;
        color: #111 !important;
        text-decoration: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .fr-search-modal-content {
        overflow: visible !important;
    }

    .fr-search-form {
        padding-right: 0 !important;
    }

    .fr-search-modal-content .fr-search-close {
        top: -46px !important;
        right: 0 !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 0 !important;
        background: #111 !important;
        color: #fff !important;
    }
}

/* =========================================================
   4RINGS FINAL HOTFIX — DESKTOP MEGA MENU MULTI-COLUMN
   Cel: submenu na desktopie nie może spadać w jedną długą kolumnę.
   Mobile accordion zostaje bez zmian.
   ========================================================= */
@media (min-width: 1024px) {
    .fr-desktop-menu > li.menu-item-has-children {
        position: relative !important;
    }

    .fr-desktop-menu > li.menu-item-has-children > .sub-menu {
        display: none !important;
        position: absolute !important;
        top: calc(100% + 18px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(720px, calc(100vw - 48px)) !important;
        min-width: 520px !important;
        max-width: calc(100vw - 48px) !important;
        max-height: calc(100vh - 130px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px 22px !important;
        padding: 24px !important;
        margin: 0 !important;
        list-style: none !important;
        background: #fff !important;
        border: 1px solid #eeeeee !important;
        border-top: 4px solid #E12626 !important;
        box-shadow: 0 22px 45px rgba(0, 0, 0, .12) !important;
        z-index: 9999 !important;
    }

    .fr-desktop-menu > li.menu-item-has-children:hover > .sub-menu,
    .fr-desktop-menu > li.menu-item-has-children:focus-within > .sub-menu {
        display: grid !important;
    }

    .fr-desktop-menu > li.menu-item-has-children > .sub-menu > li {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .fr-desktop-menu > li.menu-item-has-children > .sub-menu a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 12px !important;
        color: #111 !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        font-weight: 750 !important;
        text-decoration: none !important;
        border: 1px solid transparent !important;
        border-radius: 0 !important;
        background: transparent !important;
        white-space: normal !important;
    }

    .fr-desktop-menu > li.menu-item-has-children > .sub-menu a:hover,
    .fr-desktop-menu > li.menu-item-has-children > .sub-menu a:focus {
        background: #f7f7f7 !important;
        outline: none !important;
    }

    /* Krawędzie ekranu: skrajne pozycje rozwijają się do środka, żeby menu nie uciekało poza viewport. */
    .fr-desktop-menu > li:nth-last-child(-n+3).menu-item-has-children > .sub-menu {
        left: auto !important;
        right: 0 !important;
        transform: none !important;
    }

    .fr-desktop-menu > li:nth-child(-n+2).menu-item-has-children > .sub-menu {
        left: 0 !important;
        right: auto !important;
        transform: none !important;
    }

    /* Kategorie z małą liczbą podpozycji mogą być trochę węższe. */
    .fr-desktop-menu > li.menu-item-has-children > .sub-menu:has(> li:nth-child(1):last-child),
    .fr-desktop-menu > li.menu-item-has-children > .sub-menu:has(> li:nth-child(2):last-child),
    .fr-desktop-menu > li.menu-item-has-children > .sub-menu:has(> li:nth-child(3):last-child),
    .fr-desktop-menu > li.menu-item-has-children > .sub-menu:has(> li:nth-child(4):last-child) {
        width: 360px !important;
        min-width: 320px !important;
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 1024px) and (max-width: 1180px) {
    .fr-desktop-menu > li.menu-item-has-children > .sub-menu {
        width: min(620px, calc(100vw - 32px)) !important;
        min-width: 460px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
/* =========================================================
   4rings.pl - MOBILE MENU TOGGLE POSITION FIX
   Plus/minus po prawej stronie wiersza kategorii
   ========================================================= */

@media (max-width: 1023px) {
  .fr-mobile-menu li.menu-item-has-children,
  .fr-mobile-menu li.fr-has-submenu {
    position: relative !important;
  }

  .fr-mobile-menu li.menu-item-has-children > a,
  .fr-mobile-menu li.fr-has-submenu > a {
    padding-right: 76px !important;
  }

  .fr-mobile-menu .fr-mobile-submenu-toggle,
  .fr-mobile-menu .fr-submenu-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 22px !important;
    transform: translateY(-50%) !important;

    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #e5e5e5 !important;
    background: #fff !important;
    color: #111 !important;

    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    cursor: pointer !important;
    z-index: 20 !important;
  }

  .fr-mobile-menu .fr-mobile-submenu-toggle.is-open,
  .fr-mobile-menu li.is-open > .fr-mobile-submenu-toggle,
  .fr-mobile-menu .fr-submenu-toggle.is-open,
  .fr-mobile-menu li.is-open > .fr-submenu-toggle {
    background: #E12626 !important;
    border-color: #E12626 !important;
    color: #fff !important;
  }

  .fr-mobile-menu .fr-mobile-submenu-toggle span,
  .fr-mobile-menu .fr-submenu-toggle span {
    display: block !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }
}

/* =========================================================
   4RINGS — HEADER LOGO FINAL SIZE
   ========================================================= */

.fr-header-left,
.site-header .site-logo,
.inside-header .site-logo,
.fr-logo-link {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.site-header .inside-header,
.inside-header {
  display: flex !important;
  align-items: center !important;
}

img.fr-logo-img,
.site-header .site-logo img,
.site-header .header-image,
.site-header .custom-logo,
.inside-header .site-logo img {
  width: auto !important;
  height: auto !important;
  max-height: 56px !important;
  max-width: 230px !important;
  object-fit: contain !important;
}

@media (min-width: 1024px) {
  img.fr-logo-img,
  .site-header .site-logo img,
  .site-header .header-image,
  .site-header .custom-logo,
  .inside-header .site-logo img {
    max-height: 58px !important;
    max-width: 240px !important;
  }
}

@media (max-width: 768px) {
  img.fr-logo-img,
  .site-header .site-logo img,
  .site-header .header-image,
  .site-header .custom-logo,
  .inside-header .site-logo img {
    max-height: 42px !important;
    max-width: 180px !important;
  }
}

@media (max-width: 380px) {
  img.fr-logo-img,
  .site-header .site-logo img,
  .site-header .header-image,
  .site-header .custom-logo,
  .inside-header .site-logo img {
    max-height: 38px !important;
    max-width: 160px !important;
  }
}

/* =========================================================
   4RINGS — MOBILE SEARCH FLICKER FIX
   ========================================================= */

body.fr-modal-open {
  overflow: hidden !important;
}

@media (max-width: 768px) {
  .fr-search-modal {
    align-items: flex-start !important;
    justify-content: center !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  .fr-search-modal .fr-modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.56) !important;
  }

  .fr-search-modal-content {
    margin-top: 72px !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: opacity, transform !important;
  }

  .fr-search-input {
    font-size: 16px !important;
  }
}

/* =========================================================
   4RINGS — DESKTOP MEGA MENU HOVER BRIDGE FINAL
   Zakres: TYLKO desktopowe menu rozwijane w headerze.
   Cel: submenu ma pozostać otwarte podczas przejazdu kursorem
   z nazwy kategorii na listę podkategorii.
   NIE RUSZAĆ mobile menu, homepage, hero, reklam, typografii.
   ========================================================= */

@media (min-width: 1024px) {
    .fr-site-header .fr-desktop-menu > li.menu-item-has-children {
        position: relative !important;
    }

    /* Niewidzialny mostek między linkiem kategorii a podmenu.
       Dzięki temu hover nie znika, gdy kursor przejeżdża przez przerwę. */
    .fr-site-header .fr-desktop-menu > li.menu-item-has-children::after {
        content: "" !important;
        position: absolute !important;
        left: -18px !important;
        right: -18px !important;
        top: 100% !important;
        height: 26px !important;
        display: block !important;
        background: transparent !important;
        pointer-events: auto !important;
        z-index: 9998 !important;
    }

    .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu {
        pointer-events: auto !important;
        z-index: 9999 !important;
    }

    .fr-site-header .fr-desktop-menu > li.menu-item-has-children:hover > .sub-menu,
    .fr-site-header .fr-desktop-menu > li.menu-item-has-children:focus-within > .sub-menu,
    .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu:hover {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* =========================================================
   4RINGS — MOBILE MENU UNIFIED FINAL
   Zakres: TYLKO mobile menu w headerze na homepage i single.
   Cel:
   1) identyczny wygląd menu na stronie głównej i w artykule,
   2) mniejsze odstępy między kategoriami,
   3) brak czerwonego kółka z minusem,
   4) jeden toggle plus/minus przy nazwie kategorii.
   NIE RUSZAĆ: desktop header, mega menu desktop, homepage, hero,
   reklamy, Rankingi, Chińskie marki, single layout, typografia globalna.
   ========================================================= */

@media (max-width: 1023px) {

    /* Panel i lista — jeden wspólny rytm na homepage i single */
    .fr-mobile-modal .fr-mobile-nav,
    .fr-mobile-modal-content .fr-mobile-nav {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .fr-mobile-menu,
    .fr-mobile-menu ul {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .fr-mobile-menu > li,
    .fr-mobile-menu > li.menu-item,
    .fr-mobile-menu > li.menu-item-has-children,
    .fr-mobile-menu > li.fr-has-accordion,
    .fr-mobile-menu > li.fr-has-submenu {
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #eeeeee !important;
    }

    .fr-mobile-menu > li > a {
        min-height: 72px !important;
        height: 72px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        gap: 22px !important;
        padding: 0 78px 0 52px !important;
        color: #111111 !important;
        background: #ffffff !important;
        text-decoration: none !important;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
        font-size: 22px !important;
        font-weight: 760 !important;
        line-height: 1.08 !important;
        letter-spacing: -0.02em !important;
    }

    /* Kolorowe paski zostają, tylko bez zwiększania odstępów. */
    .fr-mobile-menu > li > a::before {
        content: "" !important;
        display: block !important;
        width: 4px !important;
        height: 28px !important;
        flex: 0 0 4px !important;
        border-radius: 0 !important;
        background: #E12626 !important;
    }

    .fr-mobile-menu > li:nth-child(1) > a::before { background: #E12626 !important; }
    .fr-mobile-menu > li:nth-child(2) > a::before { background: #1565C0 !important; }
    .fr-mobile-menu > li:nth-child(3) > a::before { background: #1E8E3E !important; }
    .fr-mobile-menu > li:nth-child(4) > a::before { background: #5B3CC4 !important; }
    .fr-mobile-menu > li:nth-child(5) > a::before { background: #FFC400 !important; }
    .fr-mobile-menu > li:nth-child(6) > a::before { background: #F57C00 !important; }
    .fr-mobile-menu > li:nth-child(7) > a::before { background: #8B1E3F !important; }
    .fr-mobile-menu > li:nth-child(8) > a::before { background: #E12626 !important; }

    /* Jeden toggle przy głównej kategorii. Nie może spadać w środek sub-menu. */
    .fr-mobile-menu > li > .fr-submenu-toggle,
    .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
    .fr-mobile-menu > li.menu-item-has-children > button,
    .fr-mobile-menu > li.fr-has-accordion > button,
    .fr-mobile-menu > li.fr-has-submenu > button {
        position: absolute !important;
        top: 36px !important;
        right: 24px !important;
        transform: translateY(-50%) !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #e8e8e8 !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        color: #111111 !important;
        box-shadow: none !important;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
        font-size: 0 !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        cursor: pointer !important;
        z-index: 30 !important;
    }

    /* Wymuszone znaki: jeden plus, po otwarciu jeden minus. */
    .fr-mobile-menu > li > .fr-submenu-toggle::before,
    .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
    .fr-mobile-menu > li.menu-item-has-children > button::before,
    .fr-mobile-menu > li.fr-has-accordion > button::before,
    .fr-mobile-menu > li.fr-has-submenu > button::before {
        content: "+" !important;
        display: block !important;
        color: #111111 !important;
        font-size: 28px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        transform: translateY(-1px) !important;
    }

    .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
    .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
    .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
    .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
    .fr-mobile-menu > li.is-open.fr-has-submenu > button::before {
        content: "\2212" !important;
        color: #111111 !important;
        font-size: 30px !important;
        font-weight: 800 !important;
    }

    /* Ukryj tekst/ikony wewnętrzne, które powodowały podwójne plusy/minusy. */
    .fr-mobile-menu > li > .fr-submenu-toggle > *,
    .fr-mobile-menu > li > .fr-mobile-submenu-toggle > *,
    .fr-mobile-menu > li.menu-item-has-children > button > *,
    .fr-mobile-menu > li.fr-has-accordion > button > *,
    .fr-mobile-menu > li.fr-has-submenu > button > * {
        display: none !important;
    }

    /* Czerwone kółko i czerwony minus — całkowicie wyłączone. */
    .fr-mobile-menu li.is-open > .fr-submenu-toggle,
    .fr-mobile-menu li.is-open > .fr-mobile-submenu-toggle,
    .fr-mobile-menu li.is-open.menu-item-has-children > button,
    .fr-mobile-menu li.is-open.fr-has-accordion > button,
    .fr-mobile-menu li.is-open.fr-has-submenu > button,
    .fr-mobile-menu .fr-submenu-toggle.is-open,
    .fr-mobile-menu .fr-mobile-submenu-toggle.is-open {
        background: #ffffff !important;
        border-color: #e8e8e8 !important;
        color: #111111 !important;
        box-shadow: none !important;
    }

    /* Submenu: blisko kategorii, bez wielkich dziur. */
    .fr-mobile-menu > li > .sub-menu {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        background: #fbfbfb !important;
        border-top: 1px solid #eeeeee !important;
        border-bottom: 1px solid #eeeeee !important;
    }

    .fr-mobile-menu > li.is-open > .sub-menu {
        display: block !important;
    }

    .fr-mobile-menu > li > .sub-menu > li {
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #eeeeee !important;
    }

    .fr-mobile-menu > li > .sub-menu > li:last-child {
        border-bottom: 0 !important;
    }

    .fr-mobile-menu > li > .sub-menu a {
        min-height: 58px !important;
        height: auto !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 28px 0 104px !important;
        color: #111111 !important;
        background: transparent !important;
        text-decoration: none !important;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
        font-size: 19px !important;
        font-weight: 700 !important;
        line-height: 1.12 !important;
        letter-spacing: -0.015em !important;
    }
}

@media (max-width: 380px) {
    .fr-mobile-menu > li > a {
        min-height: 68px !important;
        height: 68px !important;
        padding-left: 44px !important;
        padding-right: 72px !important;
        font-size: 20px !important;
    }

    .fr-mobile-menu > li > .fr-submenu-toggle,
    .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
    .fr-mobile-menu > li.menu-item-has-children > button,
    .fr-mobile-menu > li.fr-has-accordion > button,
    .fr-mobile-menu > li.fr-has-submenu > button {
        top: 34px !important;
        right: 18px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .fr-mobile-menu > li > .sub-menu a {
        min-height: 54px !important;
        padding-left: 86px !important;
        font-size: 18px !important;
    }
}


/* =========================================================
   4RINGS — HEADER DESKTOP TYPOGRAPHY + NAV SPACING TUNE
   Zakres: tylko desktopowy header i desktopowe mega menu.
   Cel: równe, bardziej zwarte odstępy oraz lżejsza typografia podmenu.
   NIE RUSZAĆ: mobile menu, wyszukiwarka, modale, homepage, single, archiwa.
   ========================================================= */

@media (min-width: 1024px) {
  .fr-site-header .fr-header-container {
    gap: 26px !important;
  }

  .fr-site-header .fr-header-right {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }

  .fr-site-header .fr-desktop-nav {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  .fr-site-header .fr-desktop-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important;
  }

  .fr-site-header .fr-desktop-menu > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .fr-site-header .fr-desktop-menu > li > a {
    gap: 7px !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.006em !important;
    white-space: nowrap !important;
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
    text-shadow: none !important;
  }

  .fr-site-header .fr-desktop-menu > li > a::before {
    margin-right: 0 !important;
  }

  .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu {
    gap: 7px 18px !important;
    padding: 24px 26px !important;
  }

  .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu a {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    font-weight: 670 !important;
    line-height: 1.28 !important;
    letter-spacing: -0.004em !important;
    color: #111 !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .fr-site-header .fr-desktop-menu {
    gap: 14px !important;
  }

  .fr-site-header .fr-desktop-menu > li > a {
    font-size: 14px !important;
  }
}


/* =========================================================
   4RINGS — HEADER SYSTEM FONT STACK FINAL
   Scope: header, desktop nav, mega menu, mobile menu, search modal.
   ========================================================= */
.fr-site-header,
.fr-site-header *,
.fr-desktop-menu,
.fr-desktop-menu *,
.fr-mobile-menu,
.fr-mobile-menu *,
.fr-search-modal,
.fr-search-modal * {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

@media (min-width: 1024px) {
  .fr-desktop-menu {
    gap: 18px !important;
  }

  .fr-desktop-menu > li > a {
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.003em !important;
  }

  .fr-desktop-menu > li.menu-item-has-children > .sub-menu a {
    font-size: 15px !important;
    line-height: 1.28 !important;
    font-weight: 650 !important;
    letter-spacing: -0.002em !important;
  }
}

@media (max-width: 1023px) {
  .fr-mobile-menu > li > a {
    font-weight: 720 !important;
    letter-spacing: -0.01em !important;
  }

  .fr-mobile-menu > li > .sub-menu a {
    font-weight: 650 !important;
    letter-spacing: -0.004em !important;
  }
}

/* =========================================================
   4RINGS — DESKTOP HEADER CATEGORY COLORS FINAL VIVID
   Zakres: tylko desktopowy header.
   Cel: pionowe znaczniki kategorii w menu mają używać żywych
   kolorów z brandbooka, bez pastelowej przezroczystości.
   NIE RUSZAĆ: mobile menu, wyszukiwarka, modale, mega menu JS,
   homepage, single, archiwa, page.css.
   ========================================================= */

@media (min-width: 1024px) {
  .fr-site-header .fr-desktop-menu > li > a::before,
  .fr-desktop-menu > li > a::before {
    width: 3px !important;
    height: 18px !important;
    flex: 0 0 3px !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    box-shadow: none !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(1) > a::before,
  .fr-desktop-menu > li:nth-child(1) > a::before {
    background: #E12626 !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(2) > a::before,
  .fr-desktop-menu > li:nth-child(2) > a::before {
    background: #1565C0 !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(3) > a::before,
  .fr-desktop-menu > li:nth-child(3) > a::before {
    background: #1E8E3E !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(4) > a::before,
  .fr-desktop-menu > li:nth-child(4) > a::before {
    background: #5B3CC4 !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(5) > a::before,
  .fr-desktop-menu > li:nth-child(5) > a::before {
    background: #FFC400 !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(6) > a::before,
  .fr-desktop-menu > li:nth-child(6) > a::before {
    background: #F57C00 !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(7) > a::before,
  .fr-desktop-menu > li:nth-child(7) > a::before {
    background: #8B1E3F !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(8) > a::before,
  .fr-desktop-menu > li:nth-child(8) > a::before {
    background: #E12626 !important;
  }

  .fr-site-header .fr-desktop-menu > li > a {
    color: #111111 !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(1):hover > a,
  .fr-site-header .fr-desktop-menu > li:nth-child(1).current-menu-item > a,
  .fr-site-header .fr-desktop-menu > li:nth-child(1).current-menu-ancestor > a {
    color: #E12626 !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(2):hover > a,
  .fr-site-header .fr-desktop-menu > li:nth-child(2).current-menu-item > a,
  .fr-site-header .fr-desktop-menu > li:nth-child(2).current-menu-ancestor > a {
    color: #1565C0 !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(3):hover > a,
  .fr-site-header .fr-desktop-menu > li:nth-child(3).current-menu-item > a,
  .fr-site-header .fr-desktop-menu > li:nth-child(3).current-menu-ancestor > a {
    color: #1E8E3E !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(4):hover > a,
  .fr-site-header .fr-desktop-menu > li:nth-child(4).current-menu-item > a,
  .fr-site-header .fr-desktop-menu > li:nth-child(4).current-menu-ancestor > a {
    color: #5B3CC4 !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(5):hover > a,
  .fr-site-header .fr-desktop-menu > li:nth-child(5).current-menu-item > a,
  .fr-site-header .fr-desktop-menu > li:nth-child(5).current-menu-ancestor > a {
    color: #B88700 !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(6):hover > a,
  .fr-site-header .fr-desktop-menu > li:nth-child(6).current-menu-item > a,
  .fr-site-header .fr-desktop-menu > li:nth-child(6).current-menu-ancestor > a {
    color: #F57C00 !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(7):hover > a,
  .fr-site-header .fr-desktop-menu > li:nth-child(7).current-menu-item > a,
  .fr-site-header .fr-desktop-menu > li:nth-child(7).current-menu-ancestor > a {
    color: #8B1E3F !important;
  }
}

/* =========================================================
   4RINGS — MOBILE MENU COMPACT + SCROLL FINAL
   Zakres: tylko mobile menu w headerze.
   Cel:
   1) bardziej zwarte menu mobilne,
   2) mniejsze odstępy między kategoriami,
   3) kompaktowe podkategorie,
   4) stabilny plus/minus,
   5) przygotowanie pod przewijanie aktywnej sekcji przez header.js.
   NIE RUSZAĆ: desktop header, desktop mega menu, homepage, single,
   archiwa, page.css, badges, reklamy, Rankingi mobile final.
   ========================================================= */

@media (max-width: 1023px) {
  .fr-mobile-modal-content {
    width: min(420px, 86vw) !important;
    max-width: 86vw !important;
    background: #ffffff !important;
  }

  .fr-mobile-modal-header {
    min-height: 58px !important;
    padding: 14px 22px !important;
    border-bottom: 1px solid #eeeeee !important;
  }

  .fr-mobile-title {
    font-size: 18px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
  }

  .fr-mobile-close {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .fr-mobile-modal .fr-mobile-nav,
  .fr-mobile-modal-content .fr-mobile-nav {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 0 14px !important;
    scroll-behavior: smooth !important;
  }

  .fr-mobile-menu,
  .fr-mobile-menu ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .fr-mobile-menu > li,
  .fr-mobile-menu > li.menu-item,
  .fr-mobile-menu > li.menu-item-has-children,
  .fr-mobile-menu > li.fr-has-accordion,
  .fr-mobile-menu > li.fr-has-submenu {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #eeeeee !important;
    background: #ffffff !important;
  }

  .fr-mobile-menu > li > a {
    min-height: 56px !important;
    height: 56px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 64px 0 34px !important;
    color: #111111 !important;
    background: #ffffff !important;
    text-decoration: none !important;
    font-size: 18px !important;
    font-weight: 760 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.012em !important;
  }

  .fr-mobile-menu > li > a::before {
    content: "" !important;
    display: block !important;
    width: 4px !important;
    height: 24px !important;
    flex: 0 0 4px !important;
    border-radius: 0 !important;
    background: #E12626 !important;
  }

  .fr-mobile-menu > li:nth-child(1) > a::before { background: #E12626 !important; }
  .fr-mobile-menu > li:nth-child(2) > a::before { background: #1565C0 !important; }
  .fr-mobile-menu > li:nth-child(3) > a::before { background: #1E8E3E !important; }
  .fr-mobile-menu > li:nth-child(4) > a::before { background: #5B3CC4 !important; }
  .fr-mobile-menu > li:nth-child(5) > a::before { background: #FFC400 !important; }
  .fr-mobile-menu > li:nth-child(6) > a::before { background: #F57C00 !important; }
  .fr-mobile-menu > li:nth-child(7) > a::before { background: #8B1E3F !important; }
  .fr-mobile-menu > li:nth-child(8) > a::before { background: #E12626 !important; }

  .fr-mobile-menu > li > .fr-submenu-toggle,
  .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  .fr-mobile-menu > li.menu-item-has-children > button,
  .fr-mobile-menu > li.fr-has-accordion > button,
  .fr-mobile-menu > li.fr-has-submenu > button {
    position: absolute !important;
    top: 28px !important;
    right: 18px !important;
    transform: translateY(-50%) !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111111 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 30 !important;
  }

  .fr-mobile-menu > li > .fr-submenu-toggle::before,
  .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  .fr-mobile-menu > li.menu-item-has-children > button::before,
  .fr-mobile-menu > li.fr-has-accordion > button::before,
  .fr-mobile-menu > li.fr-has-submenu > button::before {
    content: "+" !important;
    display: block !important;
    color: #111111 !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }

  .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
  .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
  .fr-mobile-menu > li.is-open.fr-has-submenu > button::before {
    content: "\2212" !important;
    font-size: 30px !important;
    color: #111111 !important;
  }

  .fr-mobile-menu > li > .fr-submenu-toggle > *,
  .fr-mobile-menu > li > .fr-mobile-submenu-toggle > *,
  .fr-mobile-menu > li.menu-item-has-children > button > *,
  .fr-mobile-menu > li.fr-has-accordion > button > *,
  .fr-mobile-menu > li.fr-has-submenu > button > * {
    display: none !important;
  }

  .fr-mobile-menu li.is-open > .fr-submenu-toggle,
  .fr-mobile-menu li.is-open > .fr-mobile-submenu-toggle,
  .fr-mobile-menu li.is-open.menu-item-has-children > button,
  .fr-mobile-menu li.is-open.fr-has-accordion > button,
  .fr-mobile-menu li.is-open.fr-has-submenu > button,
  .fr-mobile-menu .fr-submenu-toggle.is-open,
  .fr-mobile-menu .fr-mobile-submenu-toggle.is-open {
    background: transparent !important;
    border-color: transparent !important;
    color: #111111 !important;
    box-shadow: none !important;
  }

  .fr-mobile-menu > li > .sub-menu {
    display: none !important;
    margin: 0 !important;
    padding: 6px 0 8px !important;
    list-style: none !important;
    background: #fbfbfb !important;
    border-top: 1px solid #eeeeee !important;
    border-bottom: 1px solid #eeeeee !important;
  }

  .fr-mobile-menu > li.is-open > .sub-menu {
    display: block !important;
  }

  .fr-mobile-menu > li > .sub-menu > li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #eeeeee !important;
  }

  .fr-mobile-menu > li > .sub-menu > li:last-child {
    border-bottom: 0 !important;
  }

  .fr-mobile-menu > li > .sub-menu a {
    min-height: 38px !important;
    height: auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    padding: 9px 24px 9px 72px !important;
    color: #151515 !important;
    background: transparent !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.004em !important;
  }

  .fr-mobile-menu > li > .sub-menu a:hover,
  .fr-mobile-menu > li > .sub-menu a:focus-visible {
    background: #f2f3f4 !important;
    outline: none !important;
  }
}

@media (max-width: 380px) {
  .fr-mobile-modal-content {
    width: 88vw !important;
    max-width: 88vw !important;
  }

  .fr-mobile-menu > li > a {
    min-height: 52px !important;
    height: 52px !important;
    padding-left: 28px !important;
    padding-right: 58px !important;
    gap: 13px !important;
    font-size: 17px !important;
  }

  .fr-mobile-menu > li > a::before {
    height: 22px !important;
  }

  .fr-mobile-menu > li > .fr-submenu-toggle,
  .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  .fr-mobile-menu > li.menu-item-has-children > button,
  .fr-mobile-menu > li.fr-has-accordion > button,
  .fr-mobile-menu > li.fr-has-submenu > button {
    top: 26px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .fr-mobile-menu > li > .sub-menu a {
    min-height: 36px !important;
    padding: 8px 18px 8px 56px !important;
    font-size: 14px !important;
  }
}


/* =========================================================
   4RINGS — MOBILE LOGO WIDTH FINAL OVERRIDE
   Zakres: tylko logo w headerze na mobile.
   Powód: wcześniejsze max-height 42px ograniczało szerokość logo,
   więc wizualnie nie było większe. Teraz sterujemy szerokością.
   NIE RUSZAĆ: menu, search, modale, homepage, single, archiwa.
   ========================================================= */

@media (max-width: 768px) {
  .fr-site-header img.fr-logo-img,
  .fr-site-header .fr-logo-img,
  img.fr-logo-img {
    width: 154px !important;
    max-width: 154px !important;
    height: auto !important;
    max-height: 48px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .fr-site-header .fr-logo-link,
  .fr-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    max-width: 154px !important;
  }
}

@media (max-width: 380px) {
  .fr-site-header img.fr-logo-img,
  .fr-site-header .fr-logo-img,
  img.fr-logo-img {
    width: 142px !important;
    max-width: 142px !important;
    height: auto !important;
    max-height: 44px !important;
  }

  .fr-site-header .fr-logo-link,
  .fr-logo-link {
    max-width: 142px !important;
  }
}

/* =========================================================
   4RINGS — HOMEPAGE MOBILE MENU PLUS/MINUS EXACT ARTICLE LOCK
   Zakres: tylko mobile drawer na stronie głównej.
   Cel: ustawić plus/minus w tym samym miejscu jak w menu artykułu.
   NIE RUSZAĆ: single post, desktop header, mega menu, search,
   homepage layout, reklamy, Rankingi mobile final, typografia.
   ========================================================= */

@media (max-width: 1023px) {
  html body.home .fr-mobile-modal .fr-mobile-menu > li,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li {
    position: relative !important;
  }

  html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button {
    position: absolute !important;
    top: 50% !important;
    right: 18px !important;
    transform: translateY(-62%) !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111111 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 1 !important;
    z-index: 50 !important;
  }

  html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button::before {
    content: "+" !important;
    display: block !important;
    color: #111111 !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    transform: translateY(-5px) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-submenu > button::before {
    content: "\2212" !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    transform: translateY(-6px) !important;
  }
}

@media (max-width: 380px) {
  html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button {
    transform: translateY(-66%) !important;
  }
}



/* =========================================================
   4RINGS — HOMEPAGE MOBILE MENU PLUS/MINUS MICRO ALIGN v2
   Zakres: tylko mobile drawer na stronie głównej.
   Cel: obniżyć plus/minus minimalnie względem poprzedniej wersji
   i ustawić go jak w menu artykułu.
   NIE RUSZAĆ: single post, desktop header, mega menu, search,
   homepage layout, reklamy, Rankingi mobile final, typografia.
   ========================================================= */

@media (max-width: 1023px) {
  html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button::before {
    transform: translateY(-1px) !important;
  }

  html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-submenu > button::before {
    transform: translateY(-2px) !important;
  }
}

@media (max-width: 380px) {
  html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button {
    transform: translateY(-50%) !important;
  }
}

/* =========================================================
   4RINGS — MOBILE MEGA MENU FINAL LOCK 2026-06-02
   Zakres:
   1) HOME: plus/minus trzyma się wiersza głównej kategorii,
      także po rozwinięciu podmenu.
   2) SINGLE: kolorowa kreska bliżej nazwy kategorii.
   Nie rusza desktopu, sekcji homepage, reklam ani układu artykułu.
   ========================================================= */

@media (max-width: 1023px) {
  html body.home .fr-mobile-modal .fr-mobile-menu > li,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li {
    position: relative !important;
  }

  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle {
    position: absolute !important;
    top: 28px !important;
    right: 18px !important;
    transform: translateY(-50%) !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111111 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 1 !important;
    z-index: 60 !important;
  }

  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle span,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle span,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle span,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle span,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle span,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle span,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle span,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle span,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle span,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle span,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle span,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle span {
    display: none !important;
  }

  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before {
    content: "+" !important;
    display: block !important;
    color: #111111 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 36px !important;
    line-height: 1 !important;
    font-weight: 780 !important;
    transform: translateY(-1px) !important;
  }

  html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-submenu-toggle::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle.is-open::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-submenu-toggle::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle.is-open::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-submenu-toggle::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle.is-open::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-submenu-toggle::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle.is-open::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle.is-open::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle.is-open::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open::before {
    content: "\2212" !important;
    transform: translateY(-2px) !important;
  }

  body.single-post .fr-mobile-modal .fr-mobile-menu > li > a,
  body.single-post .fr-mobile-modal-content .fr-mobile-menu > li > a,
  body.fr-single-template .fr-mobile-modal .fr-mobile-menu > li > a,
  body.fr-single-template .fr-mobile-modal-content .fr-mobile-menu > li > a {
    gap: 12px !important;
  }
}

@media (max-width: 380px) {
  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle {
    top: 26px !important;
    right: 14px !important;
  }

  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before {
    font-size: 34px !important;
  }

  body.single-post .fr-mobile-modal .fr-mobile-menu > li > a,
  body.single-post .fr-mobile-modal-content .fr-mobile-menu > li > a,
  body.fr-single-template .fr-mobile-modal .fr-mobile-menu > li > a,
  body.fr-single-template .fr-mobile-modal-content .fr-mobile-menu > li > a {
    gap: 12px !important;
  }
}

/* =========================================================
   4RINGS MOBILE MEGA MENU FINAL FIX v2 - 2026-06-02
   Scope:
   - HOME: plus/minus stays next to category title when submenu is open
   - SINGLE: color bar stays closer to category title
   - ALL MOBILE: no broken encoding glyphs for minus; signs are drawn via CSS escapes
   ========================================================= */
@media (max-width: 1023px) {
  .fr-mobile-modal .fr-mobile-menu > li,
  .fr-mobile-modal-content .fr-mobile-menu > li {
    position: relative !important;
  }

  .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
  .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
  .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0 !important;
    line-height: 1 !important;
    color: #111111 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle span,
  .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle span,
  .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle span,
  .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle span {
    display: none !important;
  }

  .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle::before,
  .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
  .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle::before,
  .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before {
    content: "\002B" !important;
    display: block !important;
    color: #111111 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: translateY(-1px) !important;
  }

  .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-submenu-toggle::before,
  .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle::before,
  .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle.is-open::before,
  .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open::before,
  .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-submenu-toggle::before,
  .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle::before,
  .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle.is-open::before,
  .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open::before {
    content: "\2212" !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    transform: translateY(-2px) !important;
  }

  .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle::after,
  .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::after,
  .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle::after,
  .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::after {
    content: none !important;
    display: none !important;
  }

  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle {
    position: absolute !important;
    top: 28px !important;
    right: 18px !important;
    transform: translateY(-50%) !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 80 !important;
  }

  html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-submenu-toggle,
  html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle.is-open,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle.is-open,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle.is-open,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle.is-open,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle.is-open,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle.is-open,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open {
    top: 28px !important;
    transform: translateY(-50%) !important;
  }

  body.single .fr-mobile-modal .fr-mobile-menu > li > a,
  body.single-post .fr-mobile-modal .fr-mobile-menu > li > a,
  body.fr-single-template .fr-mobile-modal .fr-mobile-menu > li > a,
  body.single .fr-mobile-modal-content .fr-mobile-menu > li > a,
  body.single-post .fr-mobile-modal-content .fr-mobile-menu > li > a,
  body.fr-single-template .fr-mobile-modal-content .fr-mobile-menu > li > a {
    gap: 12px !important;
  }
}

@media (max-width: 380px) {
  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle {
    top: 26px !important;
    right: 14px !important;
  }
}

/* =========================================================
   4RINGS — MOBILE MEGA MENU FINAL CLEAN LOCK v17
   Cel: jeden końcowy wzorzec menu mobilnego na homepage i artykułach.
   - kolorowe paski startują w osi nagłówka „Menu”,
   - nazwy kategorii są bliżej pasków,
   - plus/minus jest lżejszy,
   - brak wpływu na desktop i JS rozwijania.
   ========================================================= */
@media (max-width: 1023px) {
  html body .fr-mobile-modal-content {
    background: #ffffff !important;
  }

  html body .fr-mobile-modal-header {
    min-height: 52px !important;
    height: 52px !important;
    box-sizing: border-box !important;
    padding: 0 24px 0 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #eeeeee !important;
    background: #ffffff !important;
  }

  html body .fr-mobile-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    color: #111111 !important;
    letter-spacing: -0.015em !important;
  }

  html body .fr-mobile-modal .fr-mobile-nav,
  html body .fr-mobile-modal-content .fr-mobile-nav {
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu,
  html body .fr-mobile-modal-content .fr-mobile-menu,
  html body .fr-mobile-modal .fr-mobile-menu ul,
  html body .fr-mobile-modal-content .fr-mobile-menu ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li,
  html body .fr-mobile-modal-content .fr-mobile-menu > li,
  html body .fr-mobile-modal .fr-mobile-menu > li.menu-item,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.menu-item,
  html body .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children,
  html body .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion,
  html body .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #eeeeee !important;
    background: #ffffff !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > a,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > a {
    position: relative !important;
    min-height: 52px !important;
    height: 52px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 58px 0 34px !important;
    color: #111111 !important;
    background: #ffffff !important;
    text-align: left !important;
    text-decoration: none !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 760 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.012em !important;
    transform: none !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > a::before {
    content: "" !important;
    position: static !important;
    display: block !important;
    flex: 0 0 4px !important;
    width: 4px !important;
    min-width: 4px !important;
    max-width: 4px !important;
    height: 22px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #E12626 !important;
    transform: none !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li:nth-child(1) > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li:nth-child(1) > a::before { background: #E12626 !important; }
  html body .fr-mobile-modal .fr-mobile-menu > li:nth-child(2) > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li:nth-child(2) > a::before { background: #1565C0 !important; }
  html body .fr-mobile-modal .fr-mobile-menu > li:nth-child(3) > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li:nth-child(3) > a::before { background: #1E8E3E !important; }
  html body .fr-mobile-modal .fr-mobile-menu > li:nth-child(4) > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li:nth-child(4) > a::before { background: #5B3CC4 !important; }
  html body .fr-mobile-modal .fr-mobile-menu > li:nth-child(5) > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li:nth-child(5) > a::before { background: #FFC400 !important; }
  html body .fr-mobile-modal .fr-mobile-menu > li:nth-child(6) > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li:nth-child(6) > a::before { background: #F57C00 !important; }
  html body .fr-mobile-modal .fr-mobile-menu > li:nth-child(7) > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li:nth-child(7) > a::before { background: #8B1E3F !important; }

  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
  html body .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
  html body .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button {
    position: absolute !important;
    top: 26px !important;
    right: 18px !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #111111 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0 !important;
    line-height: 1 !important;
    z-index: 40 !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle > *,
  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle > *,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle > *,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle > *,
  html body .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button > *,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button > * {
    display: none !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button::before {
    content: "\002B" !important;
    display: block !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #111111 !important;
    transform: translateY(-1px) !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle.is-open::before,
  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle.is-open::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle.is-open::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle.is-open::before {
    content: "\2212" !important;
    font-size: 27px !important;
    font-weight: 600 !important;
    transform: translateY(-1px) !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > .sub-menu,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .sub-menu {
    display: none !important;
    margin: 0 !important;
    padding: 6px 0 8px !important;
    list-style: none !important;
    background: #fbfbfb !important;
    border-top: 1px solid #eeeeee !important;
    border-bottom: 1px solid #eeeeee !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li.is-open > .sub-menu,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .sub-menu {
    display: block !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > .sub-menu a,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .sub-menu a {
    min-height: 38px !important;
    height: auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    padding: 9px 24px 9px 58px !important;
    color: #151515 !important;
    background: transparent !important;
    text-decoration: none !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.004em !important;
  }
}

@media (max-width: 380px) {
  html body .fr-mobile-modal-header {
    padding-left: 28px !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > a,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > a {
    padding-left: 28px !important;
    padding-right: 54px !important;
    gap: 9px !important;
    font-size: 16px !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle {
    right: 14px !important;
  }
}

/* =========================================================
   4RINGS — MOBILE MENU FINAL LOCK v18
   Cel:
   - homepage i artykuł mają ten sam układ menu mobilnego,
   - kreska nie nachodzi na tekst,
   - odległość kreska → nazwa kategorii jest stabilna,
   - plus/minus jest lżejszy,
   - bez zmian w JS, desktopie i podmenu.
   ========================================================= */
@media (max-width: 1023px) {
  html body .fr-mobile-modal .fr-mobile-modal-header,
  html body .fr-mobile-modal-content .fr-mobile-modal-header {
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 24px 0 34px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #eeeeee !important;
    background: #ffffff !important;
  }

  html body .fr-mobile-modal .fr-mobile-title,
  html body .fr-mobile-modal-content .fr-mobile-title {
    margin: 0 !important;
    padding: 0 !important;
    color: #111111 !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.015em !important;
  }

  html body .fr-mobile-modal .fr-mobile-nav,
  html body .fr-mobile-modal-content .fr-mobile-nav {
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu,
  html body .fr-mobile-modal-content .fr-mobile-menu,
  html body .fr-mobile-modal .fr-mobile-menu ul,
  html body .fr-mobile-modal-content .fr-mobile-menu ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li,
  html body .fr-mobile-modal-content .fr-mobile-menu > li,
  html body .fr-mobile-modal .fr-mobile-menu > li.menu-item,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.menu-item,
  html body .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children,
  html body .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion,
  html body .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #eeeeee !important;
    background: #ffffff !important;
  }

  /* Link kategorii: grid wymusza stałe miejsce dla kreski i tekstu.
     Dzięki temu ::before nie może wjechać na nazwę kategorii. */
  html body .fr-mobile-modal .fr-mobile-menu > li > a,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > a,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > a,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > a,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > a,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > a,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > a,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > a,
  html body.single .fr-mobile-modal .fr-mobile-menu > li > a,
  html body.single .fr-mobile-modal-content .fr-mobile-menu > li > a,
  html body.single-post .fr-mobile-modal .fr-mobile-menu > li > a,
  html body.single-post .fr-mobile-modal-content .fr-mobile-menu > li > a,
  html body.fr-single-template .fr-mobile-modal .fr-mobile-menu > li > a,
  html body.fr-single-template .fr-mobile-modal-content .fr-mobile-menu > li > a {
    position: relative !important;
    min-height: 52px !important;
    height: 52px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 4px minmax(0, auto) !important;
    column-gap: 10px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 58px 0 34px !important;
    color: #111111 !important;
    background: #ffffff !important;
    text-align: left !important;
    text-decoration: none !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 760 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.012em !important;
    transform: none !important;
    gap: 10px !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > a::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > a::before,
  html body.home .fr-mobile-modal-content .fr-mobile-menu > li > a::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > a::before,
  html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > a::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > a::before,
  html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > a::before,
  html body.single .fr-mobile-modal .fr-mobile-menu > li > a::before,
  html body.single .fr-mobile-modal-content .fr-mobile-menu > li > a::before,
  html body.single-post .fr-mobile-modal .fr-mobile-menu > li > a::before,
  html body.single-post .fr-mobile-modal-content .fr-mobile-menu > li > a::before,
  html body.fr-single-template .fr-mobile-modal .fr-mobile-menu > li > a::before,
  html body.fr-single-template .fr-mobile-modal-content .fr-mobile-menu > li > a::before {
    content: "" !important;
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    position: static !important;
    display: block !important;
    width: 4px !important;
    min-width: 4px !important;
    max-width: 4px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    flex: 0 0 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #E12626 !important;
    transform: none !important;
    inset: auto !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li:nth-child(1) > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li:nth-child(1) > a::before { background: #E12626 !important; }
  html body .fr-mobile-modal .fr-mobile-menu > li:nth-child(2) > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li:nth-child(2) > a::before { background: #1565C0 !important; }
  html body .fr-mobile-modal .fr-mobile-menu > li:nth-child(3) > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li:nth-child(3) > a::before { background: #1E8E3E !important; }
  html body .fr-mobile-modal .fr-mobile-menu > li:nth-child(4) > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li:nth-child(4) > a::before { background: #5B3CC4 !important; }
  html body .fr-mobile-modal .fr-mobile-menu > li:nth-child(5) > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li:nth-child(5) > a::before { background: #FFC400 !important; }
  html body .fr-mobile-modal .fr-mobile-menu > li:nth-child(6) > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li:nth-child(6) > a::before { background: #F57C00 !important; }
  html body .fr-mobile-modal .fr-mobile-menu > li:nth-child(7) > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li:nth-child(7) > a::before { background: #8B1E3F !important; }

  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
  html body .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
  html body .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button {
    position: absolute !important;
    top: 26px !important;
    right: 18px !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #111111 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0 !important;
    line-height: 1 !important;
    z-index: 40 !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle > *,
  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle > *,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle > *,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle > *,
  html body .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button > *,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button > * {
    display: none !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button::before {
    content: "\002B" !important;
    display: block !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #111111 !important;
    transform: translateY(-1px) !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle.is-open::before,
  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle.is-open::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle.is-open::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle.is-open::before {
    content: "\2212" !important;
    font-size: 25px !important;
    font-weight: 500 !important;
    transform: translateY(-1px) !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > .sub-menu,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .sub-menu {
    display: none !important;
    margin: 0 !important;
    padding: 6px 0 8px !important;
    list-style: none !important;
    background: #fbfbfb !important;
    border-top: 1px solid #eeeeee !important;
    border-bottom: 1px solid #eeeeee !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li.is-open > .sub-menu,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .sub-menu {
    display: block !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > .sub-menu a,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .sub-menu a {
    min-height: 38px !important;
    height: auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    padding: 9px 24px 9px 58px !important;
    color: #151515 !important;
    background: transparent !important;
    text-decoration: none !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.004em !important;
  }
}

/* Ten blok celowo NIE zmniejsza padding-left na małych telefonach.
   Poprzedni override max-width:380px był jednym z powodów rozjazdów. */
@media (max-width: 380px) {
  html body .fr-mobile-modal-header,
  html body .fr-mobile-modal .fr-mobile-modal-header,
  html body .fr-mobile-modal-content .fr-mobile-modal-header {
    padding-left: 34px !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > a,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > a {
    display: grid !important;
    grid-template-columns: 4px minmax(0, auto) !important;
    column-gap: 10px !important;
    padding-left: 34px !important;
    padding-right: 58px !important;
    gap: 10px !important;
    font-size: 17px !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button {
    right: 18px !important;
  }
}
/* =========================================================
   KONIEC — MOBILE MENU FINAL LOCK v18
   ========================================================= */


/* =========================================================
   4RINGS — AUTHOR BADGES RECTANGLE SAFETY LOCK
   Duplikat bezpieczeństwa: header.css ładuje się globalnie, więc łapie stronę autora,
   nawet jeśli archive.css nie zostanie załadowany dla author archive.
   ========================================================= */
body.author .gb-loop-item-bfca2c91 .gb-text-0c87f259 a[rel="tag"],
body.author .gb-loop-item-bfca2c91 .gb-text-0c87f259 a[rel="category"],
body.author .gb-loop-item-bfca2c91 a[rel="tag"],
body.author .gb-loop-item-bfca2c91 a[rel="category"],
body.author .gb-text-0c87f259 a[rel="tag"],
body.author .gb-text-0c87f259 a[rel="category"],
body.author a[rel="tag"][href*="aktualnosci-motoryzacyjne"],
body.author a[rel="category"][href*="aktualnosci-motoryzacyjne"],
body.author a[rel="tag"][href*="testy-samochodow"],
body.author a[rel="category"][href*="testy-samochodow"],
body.author a[rel="tag"][href*="rankingi-samochodow"],
body.author a[rel="category"][href*="rankingi-samochodow"],
body.author a[rel="tag"][href*="poradniki-motoryzacyjne"],
body.author a[rel="category"][href*="poradniki-motoryzacyjne"],
body.author a[rel="tag"][href*="napedy-samochodowe"],
body.author a[rel="category"][href*="napedy-samochodowe"],
body.author a[rel="tag"][href*="rynek-motoryzacyjny"],
body.author a[rel="category"][href*="rynek-motoryzacyjny"],
body.author a[rel="tag"][href*="chinskie-marki-samochodow"],
body.author a[rel="category"][href*="chinskie-marki-samochodow"] {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  overflow: hidden !important;
}

/* =========================================================
   4RINGS — MOBILE MENU FINAL TUNE v29
   Cel: homepage/mobile menu jak na single post.
   Zakres: tylko globalny panel mobile menu; bez homepage.css i bez Rankingi mobile final.
   ========================================================= */
@media (max-width: 1023px) {
  html body .fr-mobile-modal .fr-mobile-modal-header,
  html body .fr-mobile-modal-content .fr-mobile-modal-header {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > a,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > a {
    display: grid !important;
    grid-template-columns: 4px minmax(0, auto) !important;
    column-gap: 12px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 62px 0 24px !important;
    gap: 12px !important;
    font-size: 17px !important;
    font-weight: 760 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.012em !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > a::before {
    content: "" !important;
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    position: static !important;
    display: block !important;
    width: 4px !important;
    min-width: 4px !important;
    max-width: 4px !important;
    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;
    flex: 0 0 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    inset: auto !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
  html body .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
  html body .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
  html body .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button {
    top: 26px !important;
    right: 18px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #111111 !important;
    font-size: 0 !important;
    font-weight: 300 !important;
    box-shadow: none !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle > *,
  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle > *,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle > *,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle > *,
  html body .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button > *,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button > * {
    display: none !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button::before,
  html body .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button::before,
  html body .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button::before {
    content: "+" !important;
    display: block !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    color: #111111 !important;
    transform: translateY(-1px) !important;
  }

  html body .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle.is-open::before,
  html body .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle.is-open::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle.is-open::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle.is-open::before {
    content: "\2212" !important;
    font-size: 29px !important;
    font-weight: 300 !important;
    transform: translateY(-1px) !important;
  }
}

@media (max-width: 380px) {
  html body .fr-mobile-modal .fr-mobile-menu > li > a,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > a {
    padding-left: 24px !important;
    padding-right: 60px !important;
  }
}
/* =========================================================
   KONIEC — MOBILE MENU FINAL TUNE v29
   ========================================================= */


/* =========================================================
   4RINGS — MOBILE MENU FINAL LOCK v30
   Powód: znak + jest renderowany przez button::before, nie przez span.
   Zakres: mobile modal/header menu; bez homepage.css i bez Rankingi mobile final.
   ========================================================= */
@media (max-width: 1024px) {
  html body .fr-mobile-modal.is-active .fr-mobile-menu > li,
  html body .fr-mobile-modal .fr-mobile-menu > li,
  html body .fr-mobile-modal-content .fr-mobile-menu > li {
    position: relative !important;
  }

  html body .fr-mobile-modal.is-active .fr-mobile-menu > li > a,
  html body .fr-mobile-modal .fr-mobile-menu > li > a,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > a {
    display: grid !important;
    grid-template-columns: 4px minmax(0, auto) !important;
    column-gap: 10px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 64px 0 26px !important;
    font-size: 17px !important;
    font-weight: 760 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.012em !important;
  }

  html body .fr-mobile-modal.is-active .fr-mobile-menu > li > a::before,
  html body .fr-mobile-modal .fr-mobile-menu > li > a::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > a::before {
    content: "" !important;
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    position: static !important;
    display: block !important;
    width: 4px !important;
    min-width: 4px !important;
    max-width: 4px !important;
    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    inset: auto !important;
  }

  html body .fr-mobile-modal.is-active .fr-mobile-menu > li > button.fr-submenu-toggle.fr-mobile-submenu-toggle,
  html body .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle.fr-mobile-submenu-toggle,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle.fr-mobile-submenu-toggle,
  html body .fr-mobile-modal.is-active .fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle,
  html body .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle {
    position: absolute !important;
    top: 26px !important;
    right: 18px !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    z-index: 90 !important;
  }

  html body .fr-mobile-modal.is-active .fr-mobile-menu > li > button.fr-submenu-toggle.fr-mobile-submenu-toggle > span,
  html body .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle.fr-mobile-submenu-toggle > span,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle.fr-mobile-submenu-toggle > span {
    display: none !important;
    visibility: hidden !important;
  }

  html body .fr-mobile-modal.is-active .fr-mobile-menu > li > button.fr-submenu-toggle.fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle.fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle.fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal.is-active .fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle::before,
  html body .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle::before {
    content: "+" !important;
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #111111 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    transform: translateY(-1px) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }

  html body .fr-mobile-modal.is-active .fr-mobile-menu > li.is-open > button.fr-submenu-toggle.fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-submenu-toggle.fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-submenu-toggle.fr-mobile-submenu-toggle::before,
  html body .fr-mobile-modal.is-active .fr-mobile-menu > li > button.fr-submenu-toggle.fr-mobile-submenu-toggle[aria-expanded="true"]::before,
  html body .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle.fr-mobile-submenu-toggle[aria-expanded="true"]::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle.fr-mobile-submenu-toggle[aria-expanded="true"]::before {
    content: "\2212" !important;
    font-size: 31px !important;
    font-weight: 400 !important;
    transform: translateY(-1px) !important;
  }
}

@media (max-width: 380px) {
  html body .fr-mobile-modal.is-active .fr-mobile-menu > li > a,
  html body .fr-mobile-modal .fr-mobile-menu > li > a,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > a {
    padding-left: 24px !important;
    padding-right: 62px !important;
  }

  html body .fr-mobile-modal.is-active .fr-mobile-menu > li > button.fr-submenu-toggle.fr-mobile-submenu-toggle,
  html body .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle.fr-mobile-submenu-toggle,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle.fr-mobile-submenu-toggle {
    right: 16px !important;
  }
}
/* =========================================================
   KONIEC — MOBILE MENU FINAL LOCK v30
   ========================================================= */


/* =========================================================
   4RINGS — MOBILE MENU FINAL ALIGNMENT v31
   Wyrównanie pasków i nazw kategorii bliżej nagłówka "Menu"
   ========================================================= */
@media (max-width: 1023px) {
  html body .fr-mobile-modal.is-active .fr-mobile-menu > li,
  html body .fr-mobile-modal .fr-mobile-menu > li,
  html body .fr-mobile-modal-content .fr-mobile-menu > li,
  html body.home .fr-mobile-modal.is-active .fr-mobile-menu > li,
  html body.home .fr-mobile-modal .fr-mobile-menu > li,
  html body.front-page .fr-mobile-modal.is-active .fr-mobile-menu > li,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li,
  html body.fr-home-active .fr-mobile-modal.is-active .fr-mobile-menu > li,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  html body .fr-mobile-modal.is-active .fr-mobile-menu > li::before,
  html body .fr-mobile-modal .fr-mobile-menu > li::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li::before,
  html body.home .fr-mobile-modal.is-active .fr-mobile-menu > li::before,
  html body.home .fr-mobile-modal .fr-mobile-menu > li::before,
  html body.front-page .fr-mobile-modal.is-active .fr-mobile-menu > li::before,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li::before,
  html body.fr-home-active .fr-mobile-modal.is-active .fr-mobile-menu > li::before,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li::before {
    left: 18px !important;
    width: 4px !important;
  }

  html body .fr-mobile-modal.is-active .fr-mobile-menu > li > a,
  html body .fr-mobile-modal .fr-mobile-menu > li > a,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > a,
  html body.home .fr-mobile-modal.is-active .fr-mobile-menu > li > a,
  html body.home .fr-mobile-modal .fr-mobile-menu > li > a,
  html body.front-page .fr-mobile-modal.is-active .fr-mobile-menu > li > a,
  html body.front-page .fr-mobile-modal .fr-mobile-menu > li > a,
  html body.fr-home-active .fr-mobile-modal.is-active .fr-mobile-menu > li > a,
  html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > a {
    padding-left: 18px !important;
    padding-right: 62px !important;
  }
}

@media (max-width: 380px) {
  html body .fr-mobile-modal.is-active .fr-mobile-menu > li,
  html body .fr-mobile-modal .fr-mobile-menu > li,
  html body .fr-mobile-modal-content .fr-mobile-menu > li {
    padding-left: 18px !important;
    padding-right: 16px !important;
  }

  html body .fr-mobile-modal.is-active .fr-mobile-menu > li::before,
  html body .fr-mobile-modal .fr-mobile-menu > li::before,
  html body .fr-mobile-modal-content .fr-mobile-menu > li::before {
    left: 18px !important;
  }

  html body .fr-mobile-modal.is-active .fr-mobile-menu > li > a,
  html body .fr-mobile-modal .fr-mobile-menu > li > a,
  html body .fr-mobile-modal-content .fr-mobile-menu > li > a {
    padding-left: 18px !important;
    padding-right: 58px !important;
  }
}

/* =========================================================
   4RINGS — LOGO SIZE FINAL TWEAK v34
   Delikatne powiększenie logo w headerze bez ruszania menu
   ========================================================= */
.fr-site-logo img,
.site-logo img,
.custom-logo {
  max-height: 42px !important;
  width: auto !important;
}

@media (max-width: 768px) {
  .fr-site-logo img,
  .site-logo img,
  .custom-logo {
    max-height: 34px !important;
    width: auto !important;
  }
}

/* =========================================================
   4RINGS — DESKTOP MEGA MENU PREMIUM COMPACT FINAL v54
   Zakres: TYLKO desktopowy header i desktopowe mega menu.
   Cel:
   - bardziej zwarte, mniej rozciągnięte podmenu,
   - lżejsza typografia desktop menu,
   - brak nachodzenia poziomów w „Chińskie marki”,
   - „Chińskie marki” jako 3 kolumny: Producenci / Zakup i użytkowanie / Porównania,
   - szara belka hover + kolor kategorii jako akcent.
   NIE RUSZAĆ: mobile menu, search, homepage, single, archiwa, reklamy, Rankingi mobile final.
   ========================================================= */

@media (min-width: 1024px) {

  /* Górny pasek menu — ciaśniej i lżej */
  .fr-site-header .fr-desktop-menu {
    gap: 14px !important;
    align-items: center !important;
  }

  .fr-site-header .fr-desktop-menu > li > a {
    font-size: 14.5px !important;
    font-weight: 610 !important;
    line-height: 1.14 !important;
    letter-spacing: -0.008em !important;
    color: #111 !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
  }

  .fr-site-header .fr-desktop-menu > li > a::before {
    height: 16px !important;
    width: 3px !important;
    flex-basis: 3px !important;
  }

  /* Bazowy panel mega menu — mniej rozciągnięty niż poprzednio */
  .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu {
    top: calc(100% + 12px) !important;
    width: min(620px, calc(100vw - 56px)) !important;
    min-width: 460px !important;
    max-width: calc(100vw - 56px) !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 20px 26px !important;
    gap: 6px 18px !important;
    background: #fff !important;
    border: 1px solid #eeeeee !important;
    border-top-width: 4px !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .10) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .fr-site-header .fr-desktop-menu > li.menu-item-has-children:hover > .sub-menu,
  .fr-site-header .fr-desktop-menu > li.menu-item-has-children:focus-within > .sub-menu,
  .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu:hover {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu > li {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 9px 10px !important;
    font-size: 14.5px !important;
    font-weight: 610 !important;
    line-height: 1.24 !important;
    letter-spacing: -0.006em !important;
    color: #111 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    white-space: normal !important;
  }

  .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu a:hover,
  .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu a:focus-visible {
    background: #f5f5f5 !important;
    outline: none !important;
  }

  /* Większe kategorie mogą mieć 3 kolumny, ale bez wielkich odstępów */
  .fr-site-header .fr-desktop-menu > li:nth-child(1) > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:nth-child(4) > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:nth-child(5) > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:nth-child(6) > .sub-menu {
    width: min(660px, calc(100vw - 56px)) !important;
    min-width: 560px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Rankingi — specjalnie ciaśniej, bo 2 kolumny wyglądają tu najlepiej */
  .fr-site-header .fr-desktop-menu > li:nth-child(3) > .sub-menu {
    width: min(560px, calc(100vw - 56px)) !important;
    min-width: 480px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 20px 28px !important;
    gap: 5px 20px !important;
  }

  /* Krawędzie ekranu */
  .fr-site-header .fr-desktop-menu > li:nth-child(-n+2).menu-item-has-children > .sub-menu {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-last-child(-n+3).menu-item-has-children > .sub-menu {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
  }

  /* Kolory hover dla zwykłych mega menu */
  .fr-site-header .fr-desktop-menu > li:nth-child(1):hover > .sub-menu a:hover { color: #E12626 !important; border-color: rgba(225, 38, 38, .30) !important; }
  .fr-site-header .fr-desktop-menu > li:nth-child(2):hover > .sub-menu a:hover { color: #1565C0 !important; border-color: rgba(21, 101, 192, .30) !important; }
  .fr-site-header .fr-desktop-menu > li:nth-child(3):hover > .sub-menu a:hover { color: #1E8E3E !important; border-color: rgba(30, 142, 62, .30) !important; }
  .fr-site-header .fr-desktop-menu > li:nth-child(4):hover > .sub-menu a:hover { color: #5B3CC4 !important; border-color: rgba(91, 60, 196, .30) !important; }
  .fr-site-header .fr-desktop-menu > li:nth-child(5):hover > .sub-menu a:hover { color: #1f2937 !important; border-color: rgba(255, 196, 0, .48) !important; }
  .fr-site-header .fr-desktop-menu > li:nth-child(6):hover > .sub-menu a:hover { color: #F57C00 !important; border-color: rgba(245, 124, 0, .32) !important; }

  /* =======================================================
     CHIŃSKIE MARKI — FIX: bez nachodzenia, bez scrollbara,
     3 kolumny z wewnętrznymi listami statycznymi.
     ======================================================= */

  .fr-site-header .fr-desktop-menu > li:nth-child(7).menu-item-has-children > .sub-menu {
    width: min(760px, calc(100vw - 56px)) !important;
    min-width: 680px !important;
    max-width: calc(100vw - 56px) !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 24px 34px 26px !important;
    gap: 26px !important;
    grid-template-columns: 1.25fr 1fr .82fr !important;
    border-top-color: #8B1E3F !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(7).menu-item-has-children:hover > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:nth-child(7).menu-item-has-children:focus-within > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:nth-child(7).menu-item-has-children > .sub-menu:hover {
    display: grid !important;
  }

  /* Pierwszy poziom w chińskich markach to nagłówki kolumn */
  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li {
    display: block !important;
    position: static !important;
    min-width: 0 !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li > a {
    padding: 0 0 10px !important;
    margin: 0 0 8px !important;
    font-size: 14.5px !important;
    font-weight: 760 !important;
    color: #111 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li > a:hover,
  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li:hover > a {
    color: #8B1E3F !important;
    background: transparent !important;
    border-color: #f0f0f0 !important;
    box-shadow: none !important;
  }

  /* Drugi poziom chińskich marek — statycznie, nie absolutnie */
  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li > .sub-menu {
    display: block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li > .sub-menu > li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li > .sub-menu a {
    display: block !important;
    width: 100% !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    font-size: 14.5px !important;
    font-weight: 610 !important;
    line-height: 1.24 !important;
    color: #111 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li > .sub-menu a:hover,
  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li > .sub-menu a:focus-visible {
    background: #f5f5f5 !important;
    color: #8B1E3F !important;
    border-color: rgba(139, 30, 63, .34) !important;
    outline: none !important;
  }

  /* Producenci — w pierwszej kolumnie 2 małe kolumny z markami */
  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li:nth-child(1) > .sub-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .fr-site-header .fr-desktop-menu {
    gap: 11px !important;
  }

  .fr-site-header .fr-desktop-menu > li > a {
    font-size: 13.8px !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(7).menu-item-has-children > .sub-menu {
    width: min(700px, calc(100vw - 36px)) !important;
    min-width: 620px !important;
    padding: 22px 28px 24px !important;
    gap: 20px !important;
  }
}

/* =========================================================
   KONIEC — DESKTOP MEGA MENU PREMIUM COMPACT FINAL v54
   ========================================================= */

/* =========================================================
   4RINGS — DESKTOP MEGA MENU UNIFIED PREMIUM COMPACT v55
   Zakres: TYLKO desktopowy header i desktopowe mega menu.
   Cel:
   - jeden styl rozwijania menu na desktopie,
   - Chińskie marki poziomo jak pozostałe mega menu,
   - panel bardziej zwarty,
   - cieńsza / spokojniejsza czcionka,
   - bez zmian mobile menu, homepage, single, archiwa, reklam.
   ========================================================= */

@media (min-width: 1024px) {

  /* Górne menu — ciaśniej i lżej */
  .fr-site-header .fr-desktop-menu {
    gap: 11px !important;
    align-items: center !important;
  }

  .fr-site-header .fr-desktop-menu > li > a {
    font-size: 14px !important;
    font-weight: 560 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em !important;
    color: #111111 !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
  }

  .fr-site-header .fr-desktop-menu > li > a::before {
    width: 3px !important;
    height: 16px !important;
    flex: 0 0 3px !important;
  }

  /* Wszystkie desktopowe panele — wspólny, zwarty styl */
  .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu {
    top: calc(100% + 10px) !important;
    width: min(620px, calc(100vw - 48px)) !important;
    min-width: 520px !important;
    max-width: calc(100vw - 48px) !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 18px 24px !important;
    gap: 4px 18px !important;
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    border-top-width: 4px !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .09) !important;
  }

  .fr-site-header .fr-desktop-menu > li.menu-item-has-children:hover > .sub-menu,
  .fr-site-header .fr-desktop-menu > li.menu-item-has-children:focus-within > .sub-menu,
  .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu:hover {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu > li {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
    position: static !important;
  }

  .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    font-weight: 560 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.006em !important;
    color: #111111 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    white-space: normal !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
  }

  .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu a:hover,
  .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu a:focus-visible {
    background: #f5f5f5 !important;
    outline: none !important;
  }

  /* Standardowe menu z wieloma pozycjami — poziomo, zwarte kolumny */
  .fr-site-header .fr-desktop-menu > li:nth-child(1) > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:nth-child(4) > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:nth-child(5) > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:nth-child(6) > .sub-menu {
    width: min(640px, calc(100vw - 48px)) !important;
    min-width: 560px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(3) > .sub-menu {
    width: min(540px, calc(100vw - 48px)) !important;
    min-width: 480px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 18px !important;
  }

  /* Krawędzie ekranu */
  .fr-site-header .fr-desktop-menu > li:nth-child(-n+2).menu-item-has-children > .sub-menu {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-last-child(-n+3).menu-item-has-children > .sub-menu {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
  }

  /* =======================================================
     CHIŃSKIE MARKI — UJEDNOLICONE MEGA MENU POZIOME
     To nadpisuje pionowe układanie sekcji.
     ======================================================= */

  .fr-site-header .fr-desktop-menu > li:nth-child(7).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki"]).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki-samochodow"]).menu-item-has-children > .sub-menu {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    width: min(720px, calc(100vw - 48px)) !important;
    min-width: 660px !important;
    max-width: calc(100vw - 48px) !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 20px 28px 22px !important;
    gap: 20px !important;
    grid-template-columns: 1.25fr 1fr .9fr !important;
    grid-auto-flow: column !important;
    align-items: start !important;
    border-top-color: #8B1E3F !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(7).menu-item-has-children:hover > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:nth-child(7).menu-item-has-children:focus-within > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:nth-child(7).menu-item-has-children > .sub-menu:hover,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki"]).menu-item-has-children:hover > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki"]).menu-item-has-children:focus-within > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki"]).menu-item-has-children > .sub-menu:hover,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki-samochodow"]).menu-item-has-children:hover > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki-samochodow"]).menu-item-has-children:focus-within > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki-samochodow"]).menu-item-has-children > .sub-menu:hover {
    display: grid !important;
  }

  /* Trzy główne sekcje w Chińskich markach mają stać obok siebie */
  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki"]) > .sub-menu > li,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu > li {
    display: block !important;
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Nagłówki kolumn w Chińskich markach */
  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li > a,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki"]) > .sub-menu > li > a,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu > li > a {
    padding: 0 0 9px !important;
    margin: 0 0 8px !important;
    font-size: 14px !important;
    font-weight: 680 !important;
    line-height: 1.22 !important;
    color: #111111 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #eeeeee !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: default !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li > a:hover,
  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li:hover > a,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki"]) > .sub-menu > li > a:hover,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki"]) > .sub-menu > li:hover > a,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu > li > a:hover,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu > li:hover > a {
    color: #8B1E3F !important;
    background: transparent !important;
    border-bottom-color: #eeeeee !important;
    box-shadow: none !important;
  }

  /* Drugi poziom w Chińskich markach jest zawsze widoczny i statyczny */
  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki"]) > .sub-menu > li > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu > li > .sub-menu {
    display: block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: auto !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li > .sub-menu > li,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki"]) > .sub-menu > li > .sub-menu > li,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu > li > .sub-menu > li {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li > .sub-menu a,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki"]) > .sub-menu > li > .sub-menu a,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu > li > .sub-menu a {
    display: block !important;
    width: 100% !important;
    padding: 7px 9px !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 560 !important;
    line-height: 1.22 !important;
    color: #111111 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    white-space: normal !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li > .sub-menu a:hover,
  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li > .sub-menu a:focus-visible,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki"]) > .sub-menu > li > .sub-menu a:hover,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki"]) > .sub-menu > li > .sub-menu a:focus-visible,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu > li > .sub-menu a:hover,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu > li > .sub-menu a:focus-visible {
    background: #f5f5f5 !important;
    color: #8B1E3F !important;
    border-color: rgba(139, 30, 63, .30) !important;
    outline: none !important;
  }

  /* Producenci w Chińskich markach — dwie małe kolumny marek */
  .fr-site-header .fr-desktop-menu > li:nth-child(7) > .sub-menu > li:nth-child(1) > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki"]) > .sub-menu > li:nth-child(1) > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu > li:nth-child(1) > .sub-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
  }

  /* Kolory hover dla zwykłych mega menu */
  .fr-site-header .fr-desktop-menu > li:nth-child(1):hover > .sub-menu a:hover { color: #E12626 !important; border-color: rgba(225, 38, 38, .28) !important; }
  .fr-site-header .fr-desktop-menu > li:nth-child(2):hover > .sub-menu a:hover { color: #1565C0 !important; border-color: rgba(21, 101, 192, .28) !important; }
  .fr-site-header .fr-desktop-menu > li:nth-child(3):hover > .sub-menu a:hover { color: #1E8E3E !important; border-color: rgba(30, 142, 62, .28) !important; }
  .fr-site-header .fr-desktop-menu > li:nth-child(4):hover > .sub-menu a:hover { color: #5B3CC4 !important; border-color: rgba(91, 60, 196, .28) !important; }
  .fr-site-header .fr-desktop-menu > li:nth-child(5):hover > .sub-menu a:hover { color: #1f2937 !important; border-color: rgba(255, 196, 0, .42) !important; }
  .fr-site-header .fr-desktop-menu > li:nth-child(6):hover > .sub-menu a:hover { color: #F57C00 !important; border-color: rgba(245, 124, 0, .30) !important; }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .fr-site-header .fr-desktop-menu {
    gap: 9px !important;
  }

  .fr-site-header .fr-desktop-menu > li > a {
    font-size: 13.4px !important;
  }

  .fr-site-header .fr-desktop-menu > li:nth-child(7).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki"]).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki-samochodow"]).menu-item-has-children > .sub-menu {
    width: min(680px, calc(100vw - 32px)) !important;
    min-width: 620px !important;
    padding: 18px 24px 20px !important;
    gap: 18px !important;
  }
}

/* =========================================================
   KONIEC — DESKTOP MEGA MENU UNIFIED PREMIUM COMPACT v55
   ========================================================= */


/* =========================================================
   4RINGS — DESKTOP MEGA MENU CATEGORY TOP BAR COLORS v56
   Zakres: tylko desktopowe mega menu.
   Cel: wszystkie rozwijane panele mają pasek u góry w kolorze kategorii,
   tak jak obecnie „Chińskie marki”.
   Nie rusza mobile menu, homepage, single, archiwów ani układów kart.
   ========================================================= */

@media (min-width: 1024px) {

  /* Bazowy pasek — zostaje 4 px, ale nie szary */
  .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu {
    border-top-style: solid !important;
    border-top-width: 4px !important;
  }

  /* 1. Aktualności — czerwony */
  .fr-site-header .fr-desktop-menu > li:nth-child(1).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="aktualnosci"]).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="aktualnosci-motoryzacyjne"]).menu-item-has-children > .sub-menu {
    border-top-color: #E12626 !important;
  }

  /* 2. Testy — niebieski */
  .fr-site-header .fr-desktop-menu > li:nth-child(2).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="testy"]).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="testy-samochodow"]).menu-item-has-children > .sub-menu {
    border-top-color: #1565C0 !important;
  }

  /* 3. Rankingi — zielony */
  .fr-site-header .fr-desktop-menu > li:nth-child(3).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="rankingi"]).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="rankingi-samochodow"]).menu-item-has-children > .sub-menu {
    border-top-color: #1E8E3E !important;
  }

  /* 4. Poradniki — fioletowy */
  .fr-site-header .fr-desktop-menu > li:nth-child(4).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="poradniki"]).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="poradniki-motoryzacyjne"]).menu-item-has-children > .sub-menu {
    border-top-color: #5B3CC4 !important;
  }

  /* 5. Napędy — żółty */
  .fr-site-header .fr-desktop-menu > li:nth-child(5).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="napedy"]).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="napedy-samochodowe"]).menu-item-has-children > .sub-menu {
    border-top-color: #FFC400 !important;
  }

  /* 6. Rynek — pomarańczowy */
  .fr-site-header .fr-desktop-menu > li:nth-child(6).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="rynek"]).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="rynek-motoryzacyjny"]).menu-item-has-children > .sub-menu {
    border-top-color: #F57C00 !important;
  }

  /* 7. Chińskie marki — bordowy */
  .fr-site-header .fr-desktop-menu > li:nth-child(7).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki"]).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="chinskie-marki-samochodow"]).menu-item-has-children > .sub-menu {
    border-top-color: #8B1E3F !important;
  }

  /* Dodatkowe zabezpieczenie: hover głównej pozycji nie zmienia paska na szary */
  .fr-site-header .fr-desktop-menu > li.menu-item-has-children:hover > .sub-menu,
  .fr-site-header .fr-desktop-menu > li.menu-item-has-children:focus-within > .sub-menu,
  .fr-site-header .fr-desktop-menu > li.menu-item-has-children > .sub-menu:hover {
    border-top-style: solid !important;
    border-top-width: 4px !important;
  }
}

/* =========================================================
   KONIEC — DESKTOP MEGA MENU CATEGORY TOP BAR COLORS v56
   ========================================================= */


/* =========================================================
   4RINGS — SEARCH MODAL INPUT ALIGNMENT FIX v57
   Zakres: tylko okno wyszukiwarki w headerze.
   Cel: wyrównać tekst i ikonę X w polu wyszukiwania na stronach
   kategorii / artykułów tak samo jak na stronie głównej.
   Nie rusza: menu desktop, mobile menu, homepage, single layout, archiwa.
   ========================================================= */

.fr-search-modal input[type="search"],
.fr-search-modal .search-field,
.fr-search-modal .fr-search-input,
.fr-search-modal .fr-search-form input,
.fr-search-modal form[role="search"] input[type="search"],
.fr-mobile-modal input[type="search"],
.fr-mobile-modal .search-field,
.fr-mobile-modal form[role="search"] input[type="search"] {
  height: 54px !important;
  min-height: 54px !important;
  line-height: 1.2 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 18px !important;
  padding-right: 48px !important;
  display: block !important;
  box-sizing: border-box !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  vertical-align: middle !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* WebKit/Blink potrafi trzymać własne wyrównanie pola search */
.fr-search-modal input[type="search"]::-webkit-search-decoration,
.fr-search-modal input[type="search"]::-webkit-search-cancel-button,
.fr-search-modal input[type="search"]::-webkit-search-results-button,
.fr-search-modal input[type="search"]::-webkit-search-results-decoration,
.fr-mobile-modal input[type="search"]::-webkit-search-decoration,
.fr-mobile-modal input[type="search"]::-webkit-search-cancel-button,
.fr-mobile-modal input[type="search"]::-webkit-search-results-button,
.fr-mobile-modal input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Jeżeli X jest osobnym przyciskiem w polu, ustawiamy go centralnie */
.fr-search-modal .fr-search-clear,
.fr-search-modal .search-clear,
.fr-search-modal button[type="reset"],
.fr-mobile-modal .fr-search-clear,
.fr-mobile-modal .search-clear,
.fr-mobile-modal button[type="reset"] {
  top: 50% !important;
  transform: translateY(-50%) !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Przycisk "Szukaj" wyrównany do wysokości inputa */
.fr-search-modal button[type="submit"],
.fr-search-modal .search-submit,
.fr-search-modal .fr-search-submit,
.fr-mobile-modal button[type="submit"],
.fr-mobile-modal .search-submit,
.fr-mobile-modal .fr-search-submit {
  min-height: 54px !important;
  height: 54px !important;
  line-height: 1.1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Bezpieczny fallback, jeśli formularz ma własny wrapper */
.fr-search-modal form,
.fr-search-modal .fr-search-form,
.fr-mobile-modal form,
.fr-mobile-modal .fr-search-form {
  align-items: center !important;
}

/* =========================================================
   KONIEC — SEARCH MODAL INPUT ALIGNMENT FIX v57
   ========================================================= */


/* =========================================================
   4RINGS — NAPĘDY MENU HOVER COLOR FIX v58
   Zakres: tylko desktopowe mega menu / kategoria Napędy.
   Cel:
   - po najechaniu na podkategorię w Napędach tekst ma być żółty,
   - zachować żółtą ramkę i szare tło hover,
   - nie ruszać mobile menu, search modal, homepage, single ani archiwów.
   ========================================================= */

@media (min-width: 1024px) {

  /* Napędy — hover/focus podkategorii: żółty tekst zamiast czarnego */
  .fr-site-header .fr-desktop-menu > li:nth-child(5):hover > .sub-menu a:hover,
  .fr-site-header .fr-desktop-menu > li:nth-child(5):hover > .sub-menu a:focus-visible,
  .fr-site-header .fr-desktop-menu > li:nth-child(5):hover > .sub-menu li:hover > a,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="napedy"]):hover > .sub-menu a:hover,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="napedy"]):hover > .sub-menu a:focus-visible,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="napedy"]):hover > .sub-menu li:hover > a,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="napedy-samochodowe"]):hover > .sub-menu a:hover,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="napedy-samochodowe"]):hover > .sub-menu a:focus-visible,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="napedy-samochodowe"]):hover > .sub-menu li:hover > a {
    color: #B88700 !important;
    background: #f5f5f5 !important;
    border-color: rgba(255, 196, 0, .52) !important;
    box-shadow: none !important;
  }

  /* Główna pozycja Napędy po hoverze też zostaje żółta/gold */
  .fr-site-header .fr-desktop-menu > li:nth-child(5):hover > a,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="napedy"]):hover > a,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="napedy-samochodowe"]):hover > a {
    color: #B88700 !important;
  }

  /* Pasek górny panelu Napędy zostaje żółty */
  .fr-site-header .fr-desktop-menu > li:nth-child(5).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="napedy"]).menu-item-has-children > .sub-menu,
  .fr-site-header .fr-desktop-menu > li:has(> a[href*="napedy-samochodowe"]).menu-item-has-children > .sub-menu {
    border-top-color: #FFC400 !important;
  }
}

/* =========================================================
   KONIEC — NAPĘDY MENU HOVER COLOR FIX v58
   ========================================================= */


/* =========================================================
   4RINGS — MOBILE CHIŃSKIE MARKI NESTED TOGGLES FIX v59
   Zakres: tylko mobile mega menu / Chińskie marki.
   Cel:
   - usunąć zdublowane minusy przy markach i zwykłych podkategoriach,
   - zostawić główny minus/plus przy „Chińskie marki”,
   - plus/minus ma pojawiać się tylko przy poziomie:
     Producenci / Zakup i użytkowanie / Porównania,
   - wyrównać plus/minus do prawej krawędzi tych trzech nagłówków.
   Nie rusza: desktop menu, search modal, homepage, single, archiwów.
   ========================================================= */

@media (max-width: 1023px) {

  /* Chińskie marki — wewnętrzny drugi poziom ma być normalną listą, bez „latających” kontrolek */
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki"]) .sub-menu .sub-menu .menu-toggle,
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki"]) .sub-menu .sub-menu .dropdown-menu-toggle,
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki"]) .sub-menu .sub-menu .fr-submenu-toggle,
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki"]) .sub-menu .sub-menu button,
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki-samochodow"]) .sub-menu .sub-menu .menu-toggle,
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki-samochodow"]) .sub-menu .sub-menu .dropdown-menu-toggle,
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki-samochodow"]) .sub-menu .sub-menu .fr-submenu-toggle,
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki-samochodow"]) .sub-menu .sub-menu button,
  .fr-mobile-modal .fr-mobile-menu .menu-item:has(> a[href*="chinskie-marki"]) .sub-menu .sub-menu .menu-toggle,
  .fr-mobile-modal .fr-mobile-menu .menu-item:has(> a[href*="chinskie-marki"]) .sub-menu .sub-menu .dropdown-menu-toggle,
  .fr-mobile-modal .fr-mobile-menu .menu-item:has(> a[href*="chinskie-marki"]) .sub-menu .sub-menu .fr-submenu-toggle,
  .fr-mobile-modal .fr-mobile-menu .menu-item:has(> a[href*="chinskie-marki"]) .sub-menu .sub-menu button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* W fallbacku po URL ukrywamy przełączniki przy konkretnych markach i końcowych linkach */
  .fr-mobile-modal a[href*="/byd/"] + button,
  .fr-mobile-modal a[href*="/mg/"] + button,
  .fr-mobile-modal a[href*="/chery/"] + button,
  .fr-mobile-modal a[href*="/geely/"] + button,
  .fr-mobile-modal a[href*="/gwm/"] + button,
  .fr-mobile-modal a[href*="/omoda/"] + button,
  .fr-mobile-modal a[href*="/jaecoo/"] + button,
  .fr-mobile-modal a[href*="/nio/"] + button,
  .fr-mobile-modal a[href*="/xpeng/"] + button,
  .fr-mobile-modal a[href*="/leapmotor/"] + button,
  .fr-mobile-modal a[href*="/lynk-co/"] + button,
  .fr-mobile-modal a[href*="/zeekr/"] + button,
  .fr-mobile-modal a[href*="/ceny/"] + button,
  .fr-mobile-modal a[href*="/dostepnosc/"] + button,
  .fr-mobile-modal a[href*="/opinie/"] + button,
  .fr-mobile-modal a[href*="/serwis/"] + button,
  .fr-mobile-modal a[href*="/czy-warto-kupic/"] + button,
  .fr-mobile-modal a[href*="/vs-toyota/"] + button,
  .fr-mobile-modal a[href*="/vs-hyundai/"] + button,
  .fr-mobile-modal a[href*="/vs-tesla/"] + button,
  .fr-mobile-modal a[href*="/byd/"] ~ .dropdown-menu-toggle,
  .fr-mobile-modal a[href*="/mg/"] ~ .dropdown-menu-toggle,
  .fr-mobile-modal a[href*="/chery/"] ~ .dropdown-menu-toggle,
  .fr-mobile-modal a[href*="/geely/"] ~ .dropdown-menu-toggle,
  .fr-mobile-modal a[href*="/gwm/"] ~ .dropdown-menu-toggle,
  .fr-mobile-modal a[href*="/omoda/"] ~ .dropdown-menu-toggle,
  .fr-mobile-modal a[href*="/jaecoo/"] ~ .dropdown-menu-toggle,
  .fr-mobile-modal a[href*="/nio/"] ~ .dropdown-menu-toggle,
  .fr-mobile-modal a[href*="/xpeng/"] ~ .dropdown-menu-toggle,
  .fr-mobile-modal a[href*="/leapmotor/"] ~ .dropdown-menu-toggle,
  .fr-mobile-modal a[href*="/lynk-co/"] ~ .dropdown-menu-toggle,
  .fr-mobile-modal a[href*="/zeekr/"] ~ .dropdown-menu-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Trzy nagłówki drugiego poziomu w Chińskich markach ustawiamy jako pozycje z kontrolką po prawej */
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki"]) > .sub-menu > li.menu-item-has-children,
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu > li.menu-item-has-children,
  .fr-mobile-modal .fr-mobile-menu .menu-item:has(> a[href*="chinskie-marki"]) > .sub-menu > li.menu-item-has-children {
    position: relative !important;
  }

  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki"]) > .sub-menu > li.menu-item-has-children > a,
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu > li.menu-item-has-children > a,
  .fr-mobile-modal .fr-mobile-menu .menu-item:has(> a[href*="chinskie-marki"]) > .sub-menu > li.menu-item-has-children > a {
    display: block !important;
    width: 100% !important;
    padding-right: 46px !important;
    box-sizing: border-box !important;
  }

  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki"]) > .sub-menu > li.menu-item-has-children > .menu-toggle,
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki"]) > .sub-menu > li.menu-item-has-children > .dropdown-menu-toggle,
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki"]) > .sub-menu > li.menu-item-has-children > .fr-submenu-toggle,
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki"]) > .sub-menu > li.menu-item-has-children > button,
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu > li.menu-item-has-children > .menu-toggle,
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu > li.menu-item-has-children > .dropdown-menu-toggle,
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu > li.menu-item-has-children > .fr-submenu-toggle,
  .fr-mobile-modal .menu-item:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu > li.menu-item-has-children > button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    z-index: 3 !important;
  }

  /* Główny plus/minus przy „Chińskie marki” zostaje po prawej i nie jest ruszany przez reguły niżej */
  .fr-mobile-modal .fr-mobile-menu > li:has(> a[href*="chinskie-marki"]) > .menu-toggle,
  .fr-mobile-modal .fr-mobile-menu > li:has(> a[href*="chinskie-marki"]) > .dropdown-menu-toggle,
  .fr-mobile-modal .fr-mobile-menu > li:has(> a[href*="chinskie-marki"]) > .fr-submenu-toggle,
  .fr-mobile-modal .fr-mobile-menu > li:has(> a[href*="chinskie-marki-samochodow"]) > .menu-toggle,
  .fr-mobile-modal .fr-mobile-menu > li:has(> a[href*="chinskie-marki-samochodow"]) > .dropdown-menu-toggle,
  .fr-mobile-modal .fr-mobile-menu > li:has(> a[href*="chinskie-marki-samochodow"]) > .fr-submenu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* =========================================================
   KONIEC — MOBILE CHIŃSKIE MARKI NESTED TOGGLES FIX v59
   ========================================================= */

/* =========================================================
   4RINGS — MOBILE CHIŃSKIE MARKI REAL ICON OVERRIDE v66
   Zakres: tylko mobile menu / Chińskie marki / 2. poziom:
   Producenci, Zakup i użytkowanie, Porównania.

   Dlaczego:
   DevTools pokazał, że widoczny znak + / - nie pochodzi ze spana,
   tylko z pseudo-elementu ::before. Button ma text-indent:-9999px,
   więc regulowanie samego buttona albo span nic nie zmieniało.

   Cel:
   - sterować realnym widocznym znakiem przez ::before,
   - usunąć kółka/tła/obramowania,
   - zamknięte grupy: plus większy i czytelny,
   - otwarte grupy: minus cieńszy, ale dłuższy i widoczny,
   - zostawić główny plus/minus przy „Chińskie marki” bez zmian.
   ========================================================= */

@media (max-width: 1024px) {

  /* Sam przycisk drugiego poziomu: tylko pozycja i czyszczenie stylu */
  body .fr-mobile-modal .fr-mobile-menu
  li.menu-item:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu
  > li.menu-item-has-children > button.fr-submenu-toggle.fr-mobile-submenu-toggle,
  body .fr-mobile-modal .fr-mobile-menu
  li.menu-item:has(> a[href*="chinskie-marki"]) > .sub-menu
  > li.menu-item-has-children > button.fr-submenu-toggle.fr-mobile-submenu-toggle {
    position: absolute !important;
    top: 5px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;

    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 80 !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-indent: -9999px !important;
  }

  /* Ukryty span nie może wpływać na wygląd */
  body .fr-mobile-modal .fr-mobile-menu
  li.menu-item:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu
  > li.menu-item-has-children > button.fr-submenu-toggle.fr-mobile-submenu-toggle > span,
  body .fr-mobile-modal .fr-mobile-menu
  li.menu-item:has(> a[href*="chinskie-marki"]) > .sub-menu
  > li.menu-item-has-children > button.fr-submenu-toggle.fr-mobile-submenu-toggle > span {
    display: none !important;
    visibility: hidden !important;
  }

  /* Zamknięte grupy: realny plus z ::before */
  body .fr-mobile-modal .fr-mobile-menu
  li.menu-item:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu
  > li.menu-item-has-children > button.fr-submenu-toggle.fr-mobile-submenu-toggle[aria-expanded="false"]::before,
  body .fr-mobile-modal .fr-mobile-menu
  li.menu-item:has(> a[href*="chinskie-marki"]) > .sub-menu
  > li.menu-item-has-children > button.fr-submenu-toggle.fr-mobile-submenu-toggle[aria-expanded="false"]::before {
    content: "+" !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    color: #111111 !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;

    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Otwarte grupy: realny minus z ::before — trochę cieńszy i dłuższy */
  body .fr-mobile-modal .fr-mobile-menu
  li.menu-item:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu
  > li.menu-item-has-children > button.fr-submenu-toggle.fr-mobile-submenu-toggle[aria-expanded="true"]::before,
  body .fr-mobile-modal .fr-mobile-menu
  li.menu-item:has(> a[href*="chinskie-marki"]) > .sub-menu
  > li.menu-item-has-children > button.fr-submenu-toggle.fr-mobile-submenu-toggle[aria-expanded="true"]::before {
    content: "−" !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    color: #111111 !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;

    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: scaleX(1.35) !important;
    transform-origin: center !important;
  }

  /* Wyłączamy ::after, żeby nie dublował znaku */
  body .fr-mobile-modal .fr-mobile-menu
  li.menu-item:has(> a[href*="chinskie-marki-samochodow"]) > .sub-menu
  > li.menu-item-has-children > button.fr-submenu-toggle.fr-mobile-submenu-toggle::after,
  body .fr-mobile-modal .fr-mobile-menu
  li.menu-item:has(> a[href*="chinskie-marki"]) > .sub-menu
  > li.menu-item-has-children > button.fr-submenu-toggle.fr-mobile-submenu-toggle::after {
    content: none !important;
    display: none !important;
  }
}

/* =========================================================
   KONIEC — MOBILE CHIŃSKIE MARKI REAL ICON OVERRIDE v66
   ========================================================= */


/* =========================================================
   4RINGS — HEADER SEARCH BRAND RED v82
   Zakres: header / przycisk lupki / modal wyszukiwarki.
   Cel:
   - ujednolicić kolor podświetlenia lupki z czerwienią znaku 4RINGS,
   - nie ruszać układu menu desktop/mobile.
   ========================================================= */

:root {
  --fr-logo-red: #D7193F;
}

body .fr-site-header .fr-search-toggle,
body .fr-site-header button.fr-search-toggle,
body .fr-header-search button,
body .fr-header-search .fr-search-button,
body .fr-main-nav .fr-search-toggle,
body .fr-desktop-menu .fr-search-toggle {
  background-color: transparent !important;
  color: #111111 !important;
  border-color: transparent !important;
}

body .fr-site-header .fr-search-toggle:hover,
body .fr-site-header .fr-search-toggle:focus,
body .fr-site-header .fr-search-toggle:focus-visible,
body .fr-site-header button.fr-search-toggle:hover,
body .fr-site-header button.fr-search-toggle:focus,
body .fr-header-search button:hover,
body .fr-header-search button:focus,
body .fr-main-nav .fr-search-toggle:hover,
body .fr-main-nav .fr-search-toggle:focus,
body .fr-desktop-menu .fr-search-toggle:hover,
body .fr-desktop-menu .fr-search-toggle:focus {
  background-color: var(--fr-logo-red) !important;
  border-color: var(--fr-logo-red) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body .fr-site-header .fr-search-toggle:hover svg,
body .fr-site-header .fr-search-toggle:focus svg,
body .fr-header-search button:hover svg,
body .fr-header-search button:focus svg,
body .fr-main-nav .fr-search-toggle:hover svg,
body .fr-main-nav .fr-search-toggle:focus svg,
body .fr-desktop-menu .fr-search-toggle:hover svg,
body .fr-desktop-menu .fr-search-toggle:focus svg {
  color: #ffffff !important;
  fill: none !important;
  stroke: #ffffff !important;
}

body .fr-search-modal button[type="submit"],
body .fr-search-modal .search-submit,
body .fr-search-modal .fr-search-submit {
  background-color: var(--fr-logo-red) !important;
  border-color: var(--fr-logo-red) !important;
  color: #ffffff !important;
}

body .fr-search-modal button[type="submit"]:hover,
body .fr-search-modal button[type="submit"]:focus,
body .fr-search-modal .search-submit:hover,
body .fr-search-modal .search-submit:focus,
body .fr-search-modal .fr-search-submit:hover,
body .fr-search-modal .fr-search-submit:focus {
  background-color: #B91435 !important;
  border-color: #B91435 !important;
  color: #ffffff !important;
}

/* =========================================================
   KONIEC — HEADER SEARCH BRAND RED v82
   ========================================================= */

/* =========================================================
   4RINGS — DESKTOP RYNEK SUBMENU SAFE FIX 2026-06-10
   Zakres: tylko desktopowe submenu Rynek (#menu-item-7134).
   Ważne:
   - NIE nadpisujemy mechanizmu hover/display z istniejącego header.css,
   - zostawiamy globalne reguły otwierania submenu,
   - poprawiamy tylko rozmiar panelu, kolumny i zawijanie tekstu.
   Cel:
   - Rynek ma się dalej otwierać po najechaniu,
   - tekst nie może nachodzić ani zawijać się litera pod literą,
   - mobile menu bez zmian.
   ========================================================= */

@media (min-width: 1024px) {
  .fr-site-header .fr-desktop-menu > li#menu-item-7134.menu-item-has-children > .sub-menu {
    left: auto !important;
    right: 0 !important;
    transform: none !important;

    width: 620px !important;
    min-width: 620px !important;
    max-width: min(620px, calc(100vw - 48px)) !important;

    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 8px 24px !important;

    padding: 24px 26px !important;
    border-top-color: #F57C00 !important;
    overflow: visible !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  .fr-site-header .fr-desktop-menu > li#menu-item-7134.menu-item-has-children:hover > .sub-menu,
  .fr-site-header .fr-desktop-menu > li#menu-item-7134.menu-item-has-children:focus-within > .sub-menu,
  .fr-site-header .fr-desktop-menu > li#menu-item-7134.menu-item-has-children > .sub-menu:hover {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .fr-site-header .fr-desktop-menu > li#menu-item-7134.menu-item-has-children > .sub-menu > li {
    display: block !important;
    float: none !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  .fr-site-header .fr-desktop-menu > li#menu-item-7134.menu-item-has-children > .sub-menu > li > a {
    display: block !important;
    float: none !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    color: #111 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: none !important;
    box-sizing: border-box !important;
  }

  .fr-site-header .fr-desktop-menu > li#menu-item-7134.menu-item-has-children > .sub-menu > li > a:hover,
  .fr-site-header .fr-desktop-menu > li#menu-item-7134.menu-item-has-children > .sub-menu > li > a:focus {
    color: #F57C00 !important;
    border-color: #F57C00 !important;
    background: #fff8f1 !important;
    outline: none !important;
  }
}

/* =========================================================
   KONIEC — DESKTOP RYNEK SUBMENU SAFE FIX 2026-06-10
   ========================================================= */

/* =========================================================
   4RINGS — DESKTOP RYNEK SUBMENU FONT WEIGHT FINAL 2026-06-10
   Zakres: tylko desktopowe submenu Rynek (#menu-item-7134).
   Cel:
   - zostawić działający układ 2-kolumnowy,
   - odchudzić font do poziomu pozostałych submenu,
   - nie ruszać mobile menu ani innych kategorii.
   ========================================================= */

@media (min-width: 1024px) {
  .fr-site-header .fr-desktop-menu > li#menu-item-7134.menu-item-has-children > .sub-menu > li > a {
    font-weight: 500 !important;
    letter-spacing: -0.001em !important;
  }
}

/* =========================================================
   KONIEC — DESKTOP RYNEK SUBMENU FONT WEIGHT FINAL 2026-06-10
   ========================================================= */